Web Design Workshop # 37 Matthew Williamson

Web Design Workshop är vårt vanliga samhällsprojekt där vi ber läsarna att skicka in sitt arbete för din vänliga och konstruktiva kritik. Det är det perfekta sättet att lära sig, erbjuda åsikter och få ditt eget arbete kritiskt! Denna vecka, en spanking ny webbplats för brittisk modedesigner Matthew Williamson ...


Regler för förlovning

Spela fint! Vi väljer medvetet arbete som kommer att gynnas av råd och tips. Om du inte kan vara konstruktiv i dina kommentarer, gör det inte. Annat än det, ge råd som du kan ge. Känn dig fri att länka till exempel och bilder som säkerhetskopierar dina poäng.


Designen


Vi arbetade på detta projekt tillsammans med Matthew och hans team i ca 4 månader. Syftet var att flytta varumärket till framkanten av digitalt mode och ge dem en plattform där de kunde berätta om deras varumärkeshistoria. En del av denna briefing inkluderade att skapa en online-tidskrift som kallas "MW Daily". Vi tog stor referens från ett stort utbud av moderna och traditionella tryck från glänsande tidskrifter som Vogue och Tatler hela vägen till mer obskyra publikationer som The Travel Almanac och Monocle magazine.

- Kommer Ryan

Vi försökte kopiera många element som du kan hitta i traditionellt tryck. Vi använder saker som en bok som binder ner sidans vänstra sida och skriver ut testgrafik för att verkligen få det att känna som en online-tidskrift. I artiklarna själva har vi gjort det möjligt för författarna att använda mekanismer som dra citationstecken, droppkapslar (stora ledande bokstäver), ledande textjustering, utdrag och bildtexter. Varje artikel är bunden till min en accentfärg, ofta den övervägande färgen från huvudbilden. Detta hjälper till att binda artikeln tillsammans och ge den en unik närvaro när du flyttar mellan artiklar.

En av de många utmaningarna var att få det att fungera på ett responsivt sätt. En av de svårastaste saldorna möjliggjorde en bred, nästan breddskalaktig bredd till platsen, men hindrade inte användbarheten i webbläsare som hade begränsad höjd. Om du sakta sänker höjden på webbläsaren ser du så småningom det klippet på plats med mindre bredd som ges till själva artikeln, samtidigt som bilder hindras från att dominera webbplatsen och gör allt "för stort". Men om du har turen att ha en större skrivbordsbeskrivare märker du hur vi är mycket lyxigare med utrymme.


Under hela webbplatsen använder vi sig av den senaste webbtekniken, från CSS3 3D-rotationer på startskärmen till ett generellt ajax-sidfragmenthämtningsmetod när du bläddrar mellan sidor. Detta gör webbplatsen snygg och att du bläddrar genom en tidning snarare än en webbplats där sidan försvinner mellan sidladdning. Vi gjorde en anpassad laddningsspinner som använder sig av några av Matthew Williamsons ikoniska tryckdesigner som ger den en personlig, rolig och skräddarsydd känsla. På butikssidan filtrerar och beställer vi produkterna på klientsidan, så att hitta den produkt som passar dig borde vara super lätt.

Vi ville verkligen få produkten att se vacker ut, så på produktsidan ser du att den tar mittstadiet och använder så mycket utrymme som det finns tillgängligt för produkten (produktbilden är inte en viss storlek). Detta hjälper till att visa upp produkten i all sin ära - Matthew Williamson är känd för den exakta detaljeringen av hans stycken och det här låter dig bli väldigt nära och personlig med plaggen. Tidningen och butiken hänvisar ständigt till en annan ökning av omloppet kring platsen och hjälper till att bygga upp varumärkeskännedom och lojalitet.


Matthew Williamson visar sin senaste samling denna söndag kl 19:00 i Saatchi Gallery i London för London Fashion Week.

  • Projekt: Matthewwilliamson.com
  • Designers: Electric Labs

Letar du efter konstruktiv kritik på ditt eget arbete? Skicka in det till en workshop - mest men inte alla inlagor publiceras. Var tålamod men det kunde vara en kö ...