Advertisement
Workshops

Web Design Workshop #37: Matthew Williamson

by

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..

Related Posts
  • Web Design
    Interviews
    A Quick Q&A With Jason PamentalJason thumb
    Jason Pamental has been working the web for a long time; so long in fact, he's even used something called "Netscape". This experience, coupled with his passion for responsive design and web typography (amongst many other things) have made him a familiar face on the speaking circuit. I caught up with him, shortly before he heads to London for the Future of Web Design, and fired a few questions his way.Read More…
  • Web Design
    eCommerce
    Taking Shopify Theme Development FurtherShopify thumb
    In this final part of our Shopify series we will look at how a deeper knowledge of Liquid will enable you to make your themes even more flexible. This will help you deliver richer and more imaginative store designs.Read More…
  • Web Design
    eCommerce
    A Web Designer's Introduction to ShopifyShopify 1 thumb
    Over the course of three articles here on Tuts+ we'll be looking at how to build a theme for the hosted ecommerce platform Shopify. My goal is to equip you with all the skills you’ll need to get started, as well as show you a number of creative ways to make your themes flexible and powerful.Read More…
  • Web Design
    Workflow
    Three Simple Steps to Higher Output and Greater CreativityMike thumb
    The beginning of a new year is filled with a massive amount of energy and resolve, people setting out to find new ways of thinking and working that can bring them closer in line with their goals. This post is going to give you, a web designer and developer, both practical steps and conceptual advice to help you reach a higher level of output and a more consistent flow of creativity.Read More…
  • Web Design
    Case Studies
    Celebrating Ecommerce DesignShopify retina
    Shopify recently announced the winners of their inaugural Design Awards. With over 150 submissions the judging panel of Jeffrey Zeldman (Founder of A List Apart, and Happy Cog), Tina Roth Eisenberg (Founder of swissmiss, Creative Mornings and Tattly) and Daniel Weinand (Co-founder and Chief Design Officer of Shopify) had their work cut out deciding on a winner.Read More…
  • Web Design
    Case Studies
    How They Did It: Rebuilding 8 Faces8faceslogo white retina
    8 Faces is an 88 page bi-annual, independently published, magazine centred around interviews with eight leading designers from the fields of print, web, illustration and type design. Each interview is loosely based around the question "if you could use just eight typefaces, which would you choose?"Read More…