Share
Om du är som jag, håller du med om att den inledande designfasen i ett projekt kan vara tidskrävande, full av frustration och sällan uppfyller kundens förväntningar vid det första godkännandemötet. Vad händer om det var ett bättre sätt att närma sig saker? Med stilplattor finns det nyaste barnet på designmetodikblocket.
Vissa säger att dagarna med att skapa fulla mockups för webbdesignprojekt i Photoshop är döende, om inte helt död. Andra säger att designa-i-webbläsaren är inte allt som det är knäckt för att vara heller. Men kommer vi alla fram emot oss själva? Kanske är det inte verktyget som vi ska titta på men hela sättet vi går på att designa en ny webbplats och hantera klientens godkännande.
I den här handledningen kommer vi att ta en närmare titt på Style Tiles - ett nytt sätt att tänka på de inledande designstadierna, en designmetod skapade och uppfattades av den oändliga Samantha Warren. Vi ska ta en titt på vad de är, varför ska du använda dem och gå igenom processen om hur man skapar och genomför en stilplatta för ditt nästa projekt.
[Style Tiles tillåter dig att] ... Nuvarande kunder med gränssnitt val utan att göra investeringen i flera photoshop mockups. - Samantha Warren
Klar att lära sig mer? Låt oss börja.
I sin enklaste form är en Style Tile en enda sida samling av gemensamma element inklusive färger, typografi, texturer, mönster och designfunktioner. Där en inredningsdesigner kan presentera sin klient med en stämningsbräda som består av lackchips, tyger och magasinklipp, kan den progressiva webbdesignern presentera sina intressenter med en uppsättning stilplattor.
Det viktiga att komma ihåg om stilplattor är att de inte är en bokstavlig representation av hur webbplatsen ska se ut. i stället hjälper de till att definiera stämning, ton och "känsla" av en webbplats baserad på vad du har lärt dig från kunden vid dina initiala kickoff-möten.
En annan sak att komma ihåg är att Style Tile-tillvägagångssättet inte är en ram, en definierad process eller till och med ett verktyg. Istället är stilplattor byggda kring en uppsättning riktlinjer, tekniker och tillvägagångssätt som gör att du kan fokusera på vad som verkligen är viktigt i designen (åtminstone i början av ett nytt projekt). Börja med att ladda ner en psd-mall för att hjälpa dig att komma igång, men gärna skaka dina stilplattor till ditt eget arbetsflöde och kreativa estetiska.
Låt oss ta en titt på några exempel för att visa dig hur Style Tiles kan presenteras. Jag omvänd-konstruerade två platser för att visa dig vad deras Style Tiles skulle kunna har sett ut i de inledande designfaserna:
Denna stilplatta bygger på den nyligen uppgraderade Tuts + Premium-webbplatsen.
Som du kan se är kärnan på Tuts + Premium-webbplatsen snyggt fångad i denna stilplatta. Vi har noggrant definierat några av designelementen i den huvudsakliga orange presentationsdelen av webbplatsen, samt förmedlar känslan och utseendet på blogginläggen (dvs handledningslistorna).
Viktigt, eftersom Style Tile inte presenteras för en viss skärmstorlek, orientering eller till och med vad som helst bortsett från "digital", är det lätt att föreställa sig hur webbplatsen skulle titta på vilken enhet som helst från ett skrivbord till en surfplatta till en smartphone.
För lite kul, här är min tolkning av vad http://styletil.es webbplatsen själv kan ha sett ut på det inledande designstadiet:
Var särskilt uppmärksam på adjektivavsnittet i denna stilplatta. Alla färger, typografival och designtexturer pratar på något sätt med dessa adjektiv, vilket säkerställer att Style Tile är konsekvent både när det gäller design samt ton och märke meddelande.
Låt oss ta en titt på några av de gemensamma likheterna mellan dessa två stilplattor:
Som jag nämnde tidigare följer stilplattor inte ett fast format. Faktum är att du kan inkludera nästan vad som helst - så länge som det på något sätt är grundläggande för konceptkonceptet. Du kan till exempel välja att släppa sektionen "knappar" och ersätta den med en anpassad videospelare, en widget med någon beskrivning eller vissa formelement.
Sammanfattningsvis ta den övergripande riktningen på webbplatsen i din stilkavel, men var god böj dina kreativa muskler.
Style Tiles är inte bara en annan wishy-washy-best-practice-if-you-have-the-time-strategi för att samla damm längst ner på din webbdesigntillsats. De har ett antal ganska fantastiska fördelar för både dig och kunden när de implementeras korrekt:
Mer än någonting, stilplattor behåller den initiala designfasen och klientens godkännandeprocess enkelt.
Att presentera klienter med en heltäckande designkompis efter det första mötet löper risken att sakna skogen för träden. I stället för att klienten hänger sig på små designfunktioner ("hmmm ... Jag tror att sociala knappar måste vara lite mer" poppier ") kan kunderna tala säkert om hur den övergripande designriktningen speglar deras mål (" Jag gillar hur dessa färger ger en känsla av förtroende, vilket är perfekt för min Acme-widget ").
Kom ihåg att våra kunder i allmänhet inte är konstruktörer, men vet ofta vad de tycker om, även om det bara är i allmänna termer. Style Tiles är ett perfekt verktyg för att låtsaspersonen ska prata om designen som helhet utan att heja på dussintals individuella designelement som snabbt kan bli förvirrande och överväldigande.
Pixel-perfekt mockups tar tid. Realtid. Timmar och timmar.
Inte bara behöver du faktor i all denna kostnad i din slutliga faktura, om du skapar tre separata comps, det är två tredjedelar av din tid som går rakt in i mappen "Oanvända resurser" på din hårddisk - för att inte nämna två tredjedelar av kundens pengar för den delen av slutbetalningen går också upp i rök.
Med stilplattor är det å andra sidan en väldigt snabb process att iterera olika versioner, och lika snabbt att göra ändringar i luften. Att använda stilplattor innebär att du kan effektivisera designprocessen, hålla fart på de tidiga stadierna av projektet och svara på ändringsförfrågningar i minuter i stället för timmar.
För att uttrycka detta i perspektiv tog de två exemplet Style Tiles ovan mig cirka 20 minuter vardera (och skulle ha tagit 15 minuter vardera om jag var bättre att namnge mina lager när jag gick).
Jag talar bara från erfarenhet här - varje designer är annorlunda - men om du skapar tre separata Photoshop-mocks är det inte ovanligt att skapa en som är perfekt, en som är ganska bra och en som är ganska genomsnittligt, och långt ifrån ditt bästa arbete. Du presenterar de tre till klienten och försöker sälja dem på din flaggskeppsdesign och alltid väljer de en design som du gillar minst ... och nu är du fast och kodar en webbplats som du inte är stolt av och det är inte heller t i kundens bästa intresse, antingen.
Även om du skapar tre perfekta comps som du skulle vara stolta över att koda, är det lätt att bli kreativt blinkande. Style Tiles gör att du snabbt kan experimentera med olika konceptkoncept och erbjuda verkliga designalternativ för kunden baserat på deras definierade behov.
Okej, så låt oss säga att du inte använder Style Tiles, och du har valt att presentera klienten med en uppsättning komplett designkompositioner.
Vad presenterar du dem med? En 960px bred desktop version? Vad sägs om en iPad-version? Glöm inte en iPhone-version också. Åh, men se till att du också adresserar Kindles, Blackberrys och de 500 + mobila Android-enheterna som har producerats under de senaste åren. Och vad sägs om när de frågar "Hur kommer det att se på min favorit Palm Pilot som jag har haft sedan Bush var president?"
Stilplattor betyder inte dimensioner eller enhet; bara att designen kommer att vara digital. - Samantha Warren
Webben är tillgänglig i bokstavligen hundratals sätt idag, varje enhet med sin egen uppsättning brytpunkter, egenskaper och funktioner.
Ett bättre sätt att närma sig projektets inledande designfas är att ta enheten helt ur ekvationen. Det fantastiska med stilplattor är att de är helt enhetliga agnostiska.
Naturligtvis måste du ta reda på hur webbplatsen kommer att svara och / eller anpassa sig till olika enheter senare i projektet, men i de inledande fasen muddar det bara vatten som ska blandas med att skapa en övergripande designriktning med webbplatsens slutliga funktionalitet.
Nu när du har lärt dig vilka Style Tiles är du och säljs på fördelarna med att använda dem som ett alternativ till full design comps, är jag säker på att du är redo att spricka öppna Photoshop och börja skapa din första Style Tile.
Whoa där, cowboy. Vänta lite nu! Tja innan vi börjar trycka pixlar måste vi identifiera kundens behov och mål och översätta dem till begrepp som gör det möjligt för oss att bilda informerade designbeslut.
Processen med fyra steg för att skapa en stilplatta är följande:
Förvirrad? Var inte. Låt oss ta en titt på varje steg i detalj.
Oavsett om du sitter i person med din klient, pratar med dem på Skype eller är beroende av e-post, måste du alltid spendera lite tid och ansträngning för att lära känna deras verksamhet och deras webbplatsmål. Om du inte gör det skickar du ner en mörk, läskig väg med antaganden och gissningar som nästan alltid kommer att säkerställa ett misslyckat slutresultat och en olycklig kund.
Denna upptäcktsprocess handlar om mycket mer än bara att fråga dem deras favoritfärger och vilka andra webbplatser de tycker om på nätet. Medan vi lätt kunde få en hel handledning om effektiv klientfrågor, är det några upptäcktsstrategier för att komma igång:
Alla älskar att prata om vad som är viktigt för dem ...
När du får en kund att prata om sin verksamhet, kommer du ofta att få svårt att få dem att sluta. Faktum är att i detta skede ju ju mer de pratar om sin verksamhet desto bättre blir det för det slutliga resultatet.
Här är några inledande frågor för att värma upp din klient för att prata om sin verksamhet:
När du har några av de grundläggande frågorna ur vägen och du har en bättre förståelse för sin verksamhet är det dags att gräva lite djupare och verkligen identifiera behoven hos din klient och välja några nyckelkoncept som hjälper dig att skapa en designriktning i nästa steg.
Medan människor ofta har svårt att översätta abstrakta begrepp och känslor till uttalanden, älskar människor att prata i metaforer - förutsatt att du ställer de rätta frågorna.
Här är några frågor du kan begära för att komma igång:
När du väl har kommit till kärnan i klientens projekt är det dags att skapa en baslinje för den övergripande designen.
Det finns olika sätt att göra detta, men ett effektivt tillvägagångssätt är att få klienten att slutföra en interaktiv undersökning. Med lite kreativ HTML, CSS och Javascript kan du skapa en uppsättning reglage som gör att klienten kan placera sitt varumärke mellan en rad dikotomier:
Titta på detta exempel tänker jag redan på en rolig och färgstark retro-inspirerad design för vår fiktiva klient. Vilka konceptkoncept hoppas omedelbart när du ser detta?
När vi har ifrågasatt vår kund är det dags att destillera kärnan i kundens projekt, produkt och behov för deras hemsida. Syftet med denna del av processen är att definiera ett urval av beskrivande ord som kommer att fylla i avsnittet "Adjektiv" i vår Style Tile.
Låt oss ta en titt på ett exempel. Här är några uttalanden som vår fiktiva klient säger till dig under upptäcktsfasen:
Ur dessa uttalanden är ditt jobb att identifiera ett enda adjektiv som beskriver nyckelmeddelandet om vad de har sagt till dig.
Här är fyra adjektiv som vi kan använda för att sammanfatta de ovanstående uttalandena och komma till hjärtat av vad kunden är verkligen säger till oss:
Nu när vi har definierat denna uppsättning adjektiv har vi flyttat till en punkt där vi faktiskt kan börja översätta ord till design. Medan du kanske har en något annorlunda tolkning av ovanstående adjektiv än jag gör, är det ganska troligt att våra mönster skulle dela med gemensamma element - eller i alla fall skulle vi kunna beskriva varför vi gjorde de val som vi gjorde.
Phew! Alla pratade ut? Goda nyheter: Vi har gjort det fantastiska arbetet, nu får vi lite roligt. När vi har kokat hela upptäcktsfasen ner till fyra till sex dynamit adjektiv, är det dags att skapa din första Style Tile.
Gå vidare till http://styletil.es och ladda ner Photoshop-mallen (eller skapa din egen).
Nästa steg är helt upp till dig. Bli kreativ! Jag antar att du redan har en ganska bra grepp om Photoshop, så jag kommer inte att gå igenom varje steg (Photoshop-mallen är väldigt lätt att anpassa), men huvudidén är att skapa en rad designelement (färger, texturer, knappar, typografi etc.) som talar med de adjektiv som du anlände till i föregående steg.
Vill du gräva djupare in hur du skapar ett färgschema och välj typografiparingar för din Style Tile (och mycket mer)? Här är några Webdesigntuts + artiklar för dig att granska:
När du har skapat din första Style Tile, är det dags att rengöra skiffer och iterera. Det finns inget antal sten i versioner du borde skapa, men tre till fyra stilplattor för varje projekt är nog en bra balans mellan att utforska tillräckliga oberoende designkoncept och inte överväldiga dina kunder med för många alternativ.
Kom ihåg att dina adjektiv kan vara desamma för varje stilplatta, men de kan också vara olika - speciellt om du har svårt att bryta ned dina kunders behov eller de har presenterat dig med några olika alternativ att utforska som en del av frågeställning.
Från våra upptäcktsfrågor från steg två kan vi till exempel ha kommit med tre separata uppsättningar adjektiv som är lika, men olika nog att ta olika tillvägagångssätt för designen för vår fiktiva klient:
Som du kan se kan dessa tre uppsättningar av adjektiv alla resultera i en helt annan designriktning. Det är här Style Tiles verkligen kommer till sin egen. Med några få snabba färg- och typografiändringar kan du enkelt skapa tre helt olika iterationer på ett mycket litet tidsrymd.
Se till att din kund vet vad du kan förvänta dig
Nu när du har skapat din uppsättning stilplattor är det dags att presentera dem för din klient. Som med varje steg i denna process finns det ett antal strategier att genomföra för att säkerställa att du får de bästa resultaten och att din kund är säker på att fortsätta med nästa steg i projektet.
Din kund borde inte förvänta dig att presentera en komplett designkompatibel för att du ska kunna dra ut dina stilplattor. I slutet av frågefasen, visa din klient exempel på andra stilplattor som du har skapat och förklara deras värde för att ställa in webbplatsens designriktning.
Se till att din kund vet vad du ska visa dem före presentationsmötet!
Förbereda presentationen på PhotoDune Låt din klient prata fritt om dina konceptkoncept, men se till att du inte slipper dem lätt ur kroken. Uppmuntra dina kunder att expandera på sina uttalanden. Med en viss effektiv fråga kan vi göra tomma uttalanden till exceptionella uttalanden:
Kom ihåg att när du utformar webbplatser hela dagen, är det mycket troligt att det här är något som din klient inte har haft mycket tidigare erfarenhet av. Var tålamod, hjälp din klient att klargöra sina uttalanden, vägleda dem för att göra värdefulla uttalanden, men gör aldrig antaganden baserade på din kunds allmänna svar på ditt arbete.
Stilplattor är ett bättre alternativ till fullständiga designkomponenter i projektets tidiga skeden (dvs. under klientens godkännande), men beroende på hur du tycker om att fungera kan en full mockup vara nästa steg för projektet, om det är en del av ditt etablerade arbetsflöde.
Nu när du har definierat designens riktning och kunden har skrivit av på en av dina Style Tile-versioner, kan du vara säker på att din kompis kommer att vara mycket närmare att uppfylla dina kunders förväntningar än om du hoppade rakt in i öppningen av Photoshop efter det första mötet. Inte bara kommer mockupen att ligga mycket närmare den övergående mönstret, det finns inte heller behov av att skapa flera iterationer av designen - det har redan gjorts med våra Style Tiles.
Beroende på hur du gillar att närma sig ditt klientarbete är det här alla perfekt genomförbara exempel på arbetsflöde för resten av projektet:
Tack för att du bodde hos mig och läser allt om vad, hur och varför med Style Tiles - jag hoppas att du trivdes så mycket som jag har tyckt om att presentera dem för dig!
Style Tiles är ett revolutionerande sätt att närma sig designprocessen och hjälpa dig och din klient att bilda en tydlig riktning för webbplatsen från även det mest involverade och komplicerade projektet.
Vad är dina tankar? Kommer du att använda stilplattor i ditt nästa projekt? Vi skulle gärna höra dina tankar i kommentarerna!
Accentsconagua