Stora webbplatser verkar alltid kombinera bra design med bra kod. Eftersom byggandet av en webbplats är en ganska enkel uppgift, finner du att många människor lär sig HTML och CSS och visar att om de kan lära sig så kan de designa vilken webbplats som helst. Medan de tekniskt kan de kan du ofta upptäcka att det finns några viktiga misstag de gör eftersom de inte vill ta sig tid att faktiskt lära sig om design.

Programmerare är designers i sig, men de utformar kod och underbart arkitekter. Att utforma något visuellt är helt annorlunda och bara för att du har ett bra öga för design betyder inte att du har ett bra sinne att tillämpa det.

Eftersom så många programmerare har personliga projekt som vanligtvis innebär att de måste skapa egna webbplatser. Om du är en frilans kodare är en av de största tillgångarna du kan ha veta hela webbutvecklingsprocessen från början till slut, och detta inkluderar design.

Här är åtta misstag som jag ofta ser utvecklare gör när man tillämpar design på en webbplats.

1. Jag vet vilken bra design som ser ut

Det kan vara svårt att skilja ett öga för design med förmågan att designa. Det är mycket lik de människor som kan titta på mode och berätta vad som ser bra ut, men kan inte riktigt klä på samma sätt själva.

Stora designers vet helt enkelt vad bra design är. De vet vad som ska fungera och vad som inte fungerar många gånger innan de plockar upp en penna eller öppna Photoshop. Ofta är detta fallet för att de har spenderat år häller över olika mönster och prövar mönster själva. Precis som ingen konstnär kan plocka upp en penna och rita något bra första gången, borde ingen utvecklare tro att de kan knacka sin första design direkt ut ur parken.

På samma sätt som en programmerare kan studera en annan persons kod kan vem som helst studera en design och börja förstå varför det fungerar.

Titta på den vackra Punchfork du kan se vad som gör designen så stor.

  • En bra användning av bilder. Bilderna är alltid till hjälp när man spiser upp en design, men för många gånger kan designers bli borta med dem. Bilderna som används på Punchfork hjälper dig att få meddelandet över.
  • Ett solidt nät. Den stora användningen av en rutnätlayout hjälper ögat att komma in i ett flöde.
  • Enkel typografi. Det finns teckensnitt som ska användas på webben och det finns teckensnitt som borde användas mycket, mycket sparsamt på webben (Papyrus, Comic Sans, etc.). Det finns inget fel med att klibba med Georgien och Helvetica för en design eftersom de fungerar när de är färdiga.

Det finns många fler delar av designen som gör det så underbart. När du stöter på en design som du tycker om, ta dig tid att studera de enskilda elementen, men också erkänna hur de passar in i hela. Ett stort element i en design gör inte hela designen stor.

2. Färgval

Färgval kan vara en smärta. Jag hatar att behöva välja färger eftersom det finns så många att välja mellan. Av någon anledning tenderar de flesta utvecklare att hålla sig till en blå och vit palett. Kanske eftersom det används överallt eller det är webbläsarens standard, men bra design kan innebära en rad olika färger. Lyckligtvis för oss färgutmanade människor finns det massor av verktyg där ute som kan hjälpa oss att sätta ihop några underbara färgkombinationer.

Colour är en stor gemenskap där människor skapar sina favoritfärger och delar dem. Du kan bläddra, spara och rösta på dina favoritpaletter och färger. Vid mer än ett tillfälle har jag vänt mig till COLOURlovers för att komma igenom och spara dagen med färgval.

När du plockar en färgpalett måste du hålla fast vid en som passar stämningen på din webbplats och dess innehåll. Välj inte en palett helt enkelt för att du älskar det. Orange och svart kanske inte är de bästa färgerna för en webbplats kring begreppet kärlek till exempel.

Sällan behöver du använda mer än 3-4 olika färger och om du bestämmer dig för att du behöver rättfärdiga ditt val.

3. Centrera den

Det kan vara väldigt frestande att centrera en rubrik. Det ser bra ut i tidningar, men sällan kommer det att fungera bra på webben om inte allt är centrerat. Vi vet att vänsterjusterad text ser professionell ut och arbetar med ögonens naturliga flöde så varför går det utanför linjerna?

Centrerad text används bäst för rubriker och korta textrader. Användare kan läsa dem enkelt eftersom linjerna är korta, skannbara och behöver inte upprepade ögonrörelser. Centrerad text kan också ge din layout ett estetiskt utseende med sitt symmetriska format. Detta fungerar för text som går med centrerade bilder. Om dina bilder är vänster- eller högerlinjerade ska du placera din text efteråt för att hålla den i överensstämmelse med din layout.

Centrerade rubriker arbetar i tidningar eftersom texten är uppdelad i kolumner så rubriken flyter över hela historien. Om du bara handlar om en kolumn med text borde du hålla dig till en vänsterriktad rubrik.

4. Font smorgasbord

När du inte är nedsänkt i typografiens värld ser Arial ut som Helvetica och Georgien liknar Times New Roman. Du vet att det finns andra teckensnitt där som Comic Sans, men du ser inte vikten av att betala för ett teckensnitt när du enkelt kan använda det som finns tillgängligt för dig.

Med resurser som Typekit men valet av teckensnitt har blivit eerily liknar färgvalet. Det kan ta dagar med forskning för att hitta rätt kombination när du lätt kan använda en grundläggande typsnitt och sluta med resten.

Gå inte överbord med teckensnitt. Liksom färger fungerar ett begränsat urval ofta bäst. När det gäller teckensnitt kan en eller två olika typsnitt vara mycket att producera en vacker design. Kom ihåg att du kan göra många olika saker med teckensnitt. Du kan kursivera dem, djärva dem, understryka dem, uppge dem eller ringa dem.

5. Pack i informationen

När du är en utvecklare, desto bättre information kan du få på en sida. När jag kodar gillar jag det på flera skärmar eftersom det gör att jag kan ha allt mitt framför mig. Tyvärr fungerar det inte i design. Du får inte ställa så mycket information i ett trångt utrymme som du passar, för då blir designen dysfunktionell.

Ögat kan bara ta in så mycket information åt gången och om syftet med de flesta mönster är att få en uppgift slutförd, då att gömma den inuti en miljon andra informationstyper kommer inte att hjälpa till.

Medan upptagna webbplatser kan vara effektiva, fler gånger än inte är de inte. Vitt utrymme bör vara din bästa vän. Du behöver tomma delar i din design för att lägga tonvikten på de delar av designen som är viktiga.

6. Inga frågor ifrågasatta

Vi känner alla till den underbara känslan av att skapa något och se det ut i den verkliga världen. Eftersom vi skapade det tenderar det att vara en bias bakom det som får oss att tro att det är bättre än det verkligen är. Du behöver få andras åsikter att veta om din design är effektiv och om det inte är kan du hitta sätt att förbättra det. I stället känner utvecklare att de inte behöver fråga andras åsikter eftersom de vet hur deras design fungerar så det är helt enkelt för dem.

Du kommer också att finna att när människor frågar efter en mening om en design frågar de inte en kritik, men godkännande. De vill motivera de beslut de fattat och det här är inte rätt sätt. Ställande frågor hjälper dig verkligen att hitta användbarhetsproblem som du kanske inte har varit medveten om tidigare. Ofta blir du så fast i din egen design att allt är meningsfullt för dig, men för en ny person kan din design vara mer komplicerad än en Rubiks-kub.

7. Detaljer avfallstid

Med stora mönster kan det vara svårt att märka de små detaljer som verkligen gör det. De kan vara så subtila att den lediga observatören ser över dem och fortsätter vidare. För en utvecklare kan de små detaljerna vara slöseri med tid eftersom de inte förstår den övergripande effekten en droppskugga kan ha på ett element.

Små detaljer i sig påverkar bara ett visst element i en design, men när de alla kommer ihop så har du en underbar design som flyter. Sidor som Dribbble avslöja hur stora de små detaljerna kan fungera i en större design. Men om du inte är en designer av handel, kan fokusering för mycket på detaljerna sakta ner processen mer än vad du vill. Detta betyder dock inte att du inte borde vara medveten om hur detaljerna kan påverka en design.

Vilka andra vanliga misstag gör utvecklare när det gäller design? Vänligen dela i kommentarerna!