Advertisement

Web Design Workshop #37: Matthew Williamson

by
Student iconAre you a student? Get a yearly Tuts+ subscription for $45 →

Web Design Workshop is our regular community project where we ask readers to submit their work for your friendly, constructive criticism. It's the perfect way to learn, offer opinions and have your own work critiqued! This week, a spanking new site for British fashion designer Matthew Williamson..


Rules of Engagement

Play nice! We deliberately select work which will benefit from advice and pointers. If you can't be constructive in your comments, don't. Other than that, offer any advice you can give. Feel free to link to examples and images which back up your points.


The Design

mw-studio

We worked on this project alongside Matthew and his team for about 4 months. The aim was to move the brand to the forefront of digital fashion and give them a platform upon which they could tell their brand story. Part of this brief included creating an online magazine to be known as the "MW Daily". We took huge reference from a huge array of modern and traditional print from glossy magazine like Vogue and Tatler all the way to more obscure publications like The Travel Almanac and Monocle magazine.

We tried to replicate many elements that you might find in traditional print. We use things like a book binding down the left hand side of the page and print test graphic to try to really make it feel like an online magazine. In the articles themselves, we enabled the authors to use mechanisms such as pull quotes, drop caps (large leading letters), leading text adjustment, excerpts and captions. Each article is tied together my an accent colour, often the predominant colour from the lead image. This helps bind the article together and give it a unique presence as you move between articles.

One of the many challenges was making it work in a responsive manner. One of the trickiest balances was allowing a wide, almost broadsheet-like width to the site, whilst not hindering the usability on browsers which had limited height. If you slowly reduce the height of the browser, you'll eventually see it clip into place with less width given to the article itself, meanwhile preventing images from dominating the site and making it all feel "too big". But, if you are lucky enough to have a larger desktop monitor, you'll notice how we're much more luxurious with space.

mw-daily

Throughout the site, we make use of the latest web technologies, from CSS3 3D rotations on the homescreen through to a general ajax page fragment fetching approach as you browse between pages. This makes the site feel snappy, and that you are flicking through a magazine rather than a web site where the page disappears between page reloads. We made a custom loading spinner which makes use of some of Matthew Williamson's iconic print designs giving it a personal, fun and bespoke feel. On the shop section, we do filtering and ordering of the products on the client side, so finding the product that is right for you should be super easy.

We really wanted to make the product look beautiful, so on the product page, you'll see that it takes center stage and uses as much space as is available for it (the product image is by no means a set size). This helps show off the product in all of its glory- Matthew Williamson is known for the precise detailing of his pieces and this allows you to get really up close and personal with the garments. The magazine and the shop constantly reference one another increasing circulation around the site and helping to build brand awareness and loyalty.

mw-footer

Matthew Williamson is showcasing his latest collection this Sunday at 7pm in the Saatchi Gallery in London for London Fashion Week.


Looking for constructive criticism on your own work? Submit it for a workshop - most but not all submissions are published. Be patient though, there could be a queue..

Advertisement