Design i webbläsaren brukade skrämma mig. Inte för att det verkade svårt, men för att jag trodde att jag skulle sluta med en design bestående av många lådor, skulle något som var så generiskt och intetsägande jag skulle sluta göra om det i Photoshop.
Den rädslan visade sig vara helt obefogad. Inte bara blev mina modeller mer fokuserade, jag slutförde dem också snabbare och fick kunderna involverade tidigare i processen genom interaktion och diskussion.
Design är design. Det spelar ingen roll om det görs i ett program eller skrivs i kod. Att designa i webbläsaren är inte svårare än att utforma i Photoshop. Precis som något verktyg du behöver använda det för att lära dig det och så småningom behärska det.
Design är en iterativ process, en som blir svårare genom att arbeta för kunder. Det är svårt ibland att klienterna bildar exakt vad du beskriver. utformning i webbläsaren kan få dem involverade under hela processen snarare än bara designfasen.
I huvudsak sammanfaller design och utvecklingsfaser och om du är naturligt bra på design och front-end-utveckling kommer du att ta för att designa i webbläsaren som en anka tar till vatten.
En stor fördel med att designa i webbläsaren är att vi kan designa utifrån realistiska förväntningar. Ibland kan designa i programvara skapa oförutsedda problem för utveckling av fronten. UI-element kan utformas wonky eller kanske de bara inte har någon mening, det är svårt att förklara för en klient varför du ändrade något, inte för att de inte förstår, men för att du redan har lagt den i designen och hade den godkänd. Utformning i webbläsaren låter sig vara enkel att tänka på.
Innan jag ens tänker på designen behöver jag ha en plan. Bara för att jag använder ett annat verktyg betyder inte mina processförändringar. Jag gillar att ha en ganska solid plan innan jag börjar designa och jag behöver veta vad jag designar, varför jag designar, vem jag designar för, klientbakgrund och eventuell service eller produktinformation som jag måste fokusera på på.
Efter att jag bestämmer dessa saker kommer jag att få en bättre uppfattning om vad produkten är eller vad kunden gör, hur länge de har gjort det, vad skiljer dem från sin konkurrens, vem deras användarbas är och vad den primära och sekundära Målen på webbplatsen kommer att vara.
Jag personligen vill ha dokumentation av allt. Vanligtvis har jag dokumentation för sidokartan, innehållet, uppmaningen till handling och webbplatsarkitekturen. När jag börjar utforma borde jag ha en tydlig strategi för designen och hela innehållet borde ha samlats in.
Skissning är nyckeln om jag ska utforma någonting i webbläsaren. Jag kan grova ut innehållsområden med penna och papper, få feedback och snabbt iterera till grunden för min design.
Jag skissar baserad på planen som jag beskrev ovan och jag ser till att jag har alla innehållsområden och uppmaningar till handlingar. Skissning ska vara snabb, spendera inte mycket tid på att perfekta någonting. Det ska vara tillräckligt solid för att visa för en klient men slarvig nog att du kan få dem att färdas på mindre än en timme.
Nästa gillar jag att prototyper webbplatsen från mina skisser i HTML och CSS. Prototypen är många grålådor med text och bilder för platshållare. De grå lådorna fungerar som behållare för innehåll när jag faktiskt börjar utforma. Den största fördelen med prototyper med kod är att klienten kan interagera med prototypen och se hur webbplatsarkitekturen fungerar, på det sättet om något är avstängt eller behöver raffineras, kan vi hantera det nu snarare än på lanseringsdagen.
Innan vi kan börja utforma behöver vi någon form av stil för att basera vår design av. Vi måste bestämma de färger och teckensnitt vi ska använda med potentiella strukturer och mönster. Här kommer stilplattor till spel.
Stilplattor skapades av Samantha Warren och jag har använt dem ett tag nu. De hjälper kunderna att se en tidig och mycket enkel stilguide som vi kan använda för att börja designa med. Jag gillar att skapa flera av dessa för att se vilken klient som föredrar det sättet att jag kan begränsa det till en. Jag finner att dessa också är mycket viktiga i godkännandeprocessen och hjälper till att förhindra en fullständig avvisning.
Nu är vi redo att börja designa. Om du är van att utforma i ett program som Photoshop eller Sketch är det inte så mycket annorlunda. Genom att använda vår prototypfil börjar vi lägga till häftigt innehåll i vår markup. Vid denna tidpunkt vet vi exakt vad som går in i varje innehållssektion i markeringen och rutnätet har redan definierats så det borde inte ta så lång tid.
Nu ska jag börja lägga layering stilar på mitt innehåll. Jag ska lägga till basformat för färg, typografi och layout. När basstilarna är färdiga kommer jag att gå och titta på den. Jag gillar att skärmbilda vissa delar av designen för att referera senare.
När jag väl är nöjd med baslagret gillar jag att ta anteckningar om vad man ska förfina. Baserat på dessa noteringar kommer jag med största sannolikhet att använda Photoshop eller Skiss att lägga till konsistens eller något med en påtaglig känsla. Photoshop och Sketch är bra verktyg för att förfina komplexa UI-element snabbt så jag sparar allt som kan vara en smärta att koda ut mer än en gång
Anledningen till att jag gör det här är att jag vill att min kodbas ska vara mager och ren och ju mer du kodar, kommenterar och tar bort, desto mer slarvigt och uppblåst blir din kodbas.
Om du var tvungen att designa i webbläsaren från början varje gång, kan det tyckas som om de tar evigt men om du startar från en anpassad bas, ett ramverk, kan du eliminera repeterande steg. Till att börja med har jag en anpassad version av Initializr som jag använder med ett anpassat responsivt nät byggt i Sass (http://sass-lang.com/). Genom att använda en anpassad ram ger jag en början för prototyper och design.
Att ha ett bibliotek med vanliga användargränssnitt är också ett bra sätt att bygga en snabb prototyp och det gör utformningen i webbläsaren effektivare. jag använder Sublim Text att koda och en sak som jag har lärt mig att utnyttja är de anpassade utdrag som du kan skapa. Jag har lagt till flera variationer av navigering, listor, sidfält och andra vanliga element till min lista med utdrag, så att jag snabbt kan placera dem i min markering med en enkel åtgärd. Jag använder också konton på Codepen och JSFiddle för att rädda mönster. Dan Cederholm skapade ett bra WordPress-tema för att lagra vanliga mönster som heter päron . Det använder inlägg för att lagra kod som du kan redigera live i fronten för att testa och förhandsgranska ändringar.
Praktik och praktisk tillämpning kommer att göra dig bättre att utforma i webbläsaren. Chansen är att om du gör någon form av front-end-utveckling har du redan en grundram till att börja med och du har redan några vanliga mönster att använda.
Allt du behöver göra är att börja utforma i webbläsaren och så småningom kommer du att komma fram till ett arbetsflöde som är effektivt och fungerar inom din process. Med träning får du bara snabbare.