Style Tiles ger ett fräscht och produktivt sätt att närma sig designprocessen. De låter dig specifikt integrera och fokusera på ett projekts personlighet och humör utan att oroa sig för specifika layoutbeslut.
Idag kommer vi att visa dig exakt vilka stilplattor, varför ska du använda dem och hur man införlivar dem i din designprocess. Följ med och du kan bara ändra hur du designar för alltid.
Vad är stilplattor?
Style Tiles är ett sätt att utveckla en webbplats visuell identitet oberoende av den komplicerade logistiken som spelar in när man försöker utveckla en fullfjädrad mockup. Tanken kommer från Samantha Warren, en extremt begåvad formgivare och bloggare på Badass Ideas.
Snarare än att slå runt bushen, låt oss hoppa direkt in i vad en stilplatta ser ut. Det är svårt att beskriva så här är ett exempel från Style Tiles webbplats.
Om du är driven av visuell design, bör du omedelbart kunna se användbarheten av det här verktyget. Det är både anmärkningsvärt enkelt och oerhört användbart. Många viktiga beslut har gjorts här om typografi, färg, knappstyling och mer. Om vi byggde en webbplats baserad på denna styrelse hade vi en gedigen uppfattning om den visuella riktningen som vi skulle driva.
Flipsidan av trådramar
Style Tiles-webbplatsen beskriver dem som något mellan ett humörbräde, vilket är för vagt och en full mockup, vilket är för precist. Jag tänker personligen på dem lite annorlunda: som baksidan av wireframes.
Tänk på det, ditt mål med wireframes är att fokusera på layout utan stil. Du tänker bara på hur en sida ska struktureras, hur storleksförhållandena mellan element kommer att bli etc. Med hjälp av en förenklad wireframe kan du snabbt utveckla en massa idéer eftersom du inte distraheras av saker som färger, skuggor, mönster, teckensnitt och bilder.
En stilplatta är motsatsen till detta, vilket betyder att det ger ett perfekt komplement till denna process. Här får du överge uppfattningar om layout och fokusera helt på vad som kan anses vara "känslan" ,? de specifika designbesluten som ger webbplatsen en unik identitet.
Tre skäl att använda stilplattor
Nu när du har en bra förståelse för vad Style Tiles är, låt oss gå över några av de främsta anledningarna att du bör tänka på att integrera dem i ditt arbetsflöde.
Snabb visuell utveckling av idéer
Den första anledningen till att Style Tiles är stor är att du borde kunna krossa flera av dem på en relativt kort tid. Full mockups kan ta timmar eller till och med dagar att producera men dessa brädor är helt enkelt små smaker av större design och borde bara ta dig en bråkdel av tiden.
Det innebär att du enkelt kan skapa tre till fem unika idéer för din webbplats personlighet, välj sedan vilken som fungerar bäst eller blanda och matcha element från varandra.
Klient Feedback är lättare att integrera
När du har tillbringat en vecka utvecklar kundens första titt på ett projekt och de skickar dig tillbaka till ritbordet, kan det vara en nedslående upplevelse. All den tid och ansträngning du spenderade på projektet utplånades i ett enda möte och du är kvar på torget.
Med Style Tiles kan du inkludera din klient i designprocessen på ett tidigt stadium. Visa några olika plattor och de kommer genast att få en känsla för vad som händer och kommer troligen att älska möjligheten att hoppa in och ge feedback.
I detta skede är det oerhört lätt att göra små tweaks eller till och med stora förändringar globalt utan att känna att du har slösat bort hälften av din tid och budget.
Perfekt för ett ansvarsfullt arbetsflöde
Eftersom lyhörd webbdesign blir mer och mer populär, tvingas konstruktörer att ompröva sina arbetsflöden. Att utveckla statiska comps för en design som ständigt anpassar sig är ett svårt och kanske till och med fruktlöst företag.
Som ett alternativ tillåter Style Tiles dig att nagla ut dina elements utseende utan att oroa dig för specifika enhetsdimensioner eller brytpunkter. När du har hittat dessa figurer kan du sedan ansluta dem till ett lyssnart rutnät.
Låt oss göra en
Talk är billigt, låt oss se om vi faktiskt kan använda denna process för att komma upp med något värdefullt. Om du vill börja från början, bra. Men om du letar efter en bra utgångspunkt, se till att ladda ner den kostnadsfria mallen från Style Tiles-webbplatsen. Så här ser det ut:
Som du kan se finns det flera element på plats för att hjälpa dig att få en känsla för en allmän layout samt vilka typer av element du bör tänka på vid denna fas i designprocessen. Observera att det finns en mycket viktig rådgivning i nedre högra hörnet av denna mall: Var kreativ, använd inte bara denna mall som-är !?
Det är frestande att bara springa med vad du har fått här men låt inte verktyget försvaga din kreativitet, det är faktiskt tänkt att förbättra den.
Som ett provprojekt, låt oss skapa en Style Tile för min favorit burrito plats: Chipotle. Vi låtsas att de heller inte har en webbplats eller är beroende av oss för att skapa reviderat utseende.
Logotyp
Det första steget som vi tar är att inkludera en logotyp. Strax utanför flaggan löper vi in ett behov av att ändra mallen för våra egna ändamål. Logotypbehållaren ovan är rektangulär och Chipotle-logotypen är rund. Lyckligtvis är PSD-mallen mycket snyggt organiserad så det är lätt att jag stänger av alla huvudelementen och släpper in vår runda logotyp.
Bakgrund
Det finns ingen bestämd ordning att följa för att uppdatera elementen, bara studsa runt från bit till bit när idéerna kommer till dig. Ett logiskt nästa steg för mig var bakgrunden. Eftersom Chipotle är en matlagning i sydvästra stil gav jag bakgrunden en slags gammal världsfel.
Vi är bara två steg och vi har redan gjort en dramatisk inverkan på mallen. Vi kan tydligt se stilguiden ta form när varumärkets personlighet framträder.
Färger
Nu när vi har en logotyp och en bakgrund på plats kan vi börja se lite av en färgidentitet. Jag drar nytta av det befintliga färgområdet för att expandera detta till en komplett palett.
Typografi
Efter färgerna fortsätter jag att springa och landa på typografi. Jag gillar verkligen att mallen inte bara ger dig en plats för att ange någon exemplstyp utan också har små etiketter så att du kan notera de teckensnitt du använder.
Den färdiga produkten
Förskjutning jag bara höll iterating och tweaking tills jag landade på något som jag kunde överväga en färdig kakel. Längs vägen ställde jag råd om att byta mall till god användning och helt omformaterade layouten samtidigt som jag behöll de avsnitt som jag tyckte var till hjälp. Här är vad jag kom med:
Som du kan se är det långt ifrån den ursprungliga mallen. Jag använde PSD som en startpunkt för mina idéer, inte en krycka. Nu har jag en solid grund för att börja när jag börjar smälta layout och stil tillsammans i en färdig produkt.
Slutsats: En andning av frisk luft
Senast har jag blivit ganska upptagen med glänsande nya buzzwords som CSS3, HTML5 och responsiv design. Som ett resultat har jag inte riktigt grävt in i ren design på ett tag och utforska användbarheten av Style Tiles var bara påminnelsen om att jag behövde att det här är var min sanna passion ligger.
Jag älskade absolut att ha friheten att utveckla en visuell stil utan att oroa sig för huruvida hemsidan ska vara en tre eller fyra kolumnlayout. Det är ganska uppfriskande att kunna fokusera på specifika delar av designprocessen utan att vara skrämmad eller distraherad av det större projektet.
Ett stort tack går ut på Samantha Warren för att dela sin process och starta mall. Jag tror att Style Tiles kommer att vara en mycket viktig del av min process härifrån.
Lämna en kommentar nedan och låt oss veta vad du tycker. Använder du stämningsbrädor, trådramar eller andra liknande verktyg i din designprocess? Skulle introduktionen av Style Tiles förbättra hur du jobbar? Vi vill veta!
Wireframe bild med tillstånd av Joe Crawford.