Här på Design Shack erbjuder vi en enkel men användbar tjänst som kallas en webbdesignkritik. Det är i grund och botten en konsulttjänst som du kan dra nytta av för ett galet billigt pris i utbyte mot att vi skickar in den på webbplatsen som ett pedagogiskt verktyg.
Jag har personligen skrivit en hel del femtiotal av dessa saker hittills (# 85 kommer att publiceras senare i veckan). Det är en hel del designråd! Läs vidare för att se vad jag har lärt mig om webbdesign i processen, både från de goda exemplen och de dåliga.
Web Design Critiques
När någon skickar en sida för en kritik, häller jag över det, gör anteckningar om vad som fungerar bra, vad som kan vara bättre och vad som behöver lösas omedelbart. Jag skriver sedan allt som en webbdesign kritikpost.
? Jag lär mig faktiskt av er så mycket som du är från mig !?Det är uppenbart att jag använder dessa kritiker som ett undervisningsverktyg, men vad du kanske har missat är att jag inte strängt lär dig, jag lär mig faktiskt av dig så mycket som du är från mig! Det är ofta att vi får en webbplats för kritik som verkligen är fantastisk, eftersom jag analyserar och förklarar varför det är så bra, jag absorberar tekniker, idéer, användargränssnitt och mer.
Efter ungefär tjugo av dessa saker märkte jag att vissa mönster och trender uppstod, råd som jag gav om och om igen, platser där designers tenderade att vara starka och svaga, ofta gjorda misstag. Sixty kritiker senare och jag har mycket att säga om de områden där de flesta designers behöver fokusera på att förbättra.
1. Den tredje andra regeln
Om du har läst några av de kritiker som jag har skrivit har du säkert märkt att jag alltid börjar med vad mitt första intryck berättar om webbplatsen. När jag laddar den sidan i webbläsaren, vad kan jag säga om sidan under de första tre sekunderna?
? Vad kan jag berätta om sidan under de första tre sekunderna ??Tre sekunder säger du? Vad bra är det? Svaret är att det som en webbläsare tar mig bara några sekunder att bestämma om din webbplats är det jag söker efter, sedan har jag fattat mitt beslut om huruvida jag ska gå vidare eller utforska vidare.
För vissa designers ger det en utmaning att få användarens uppmärksamhet med något prickigt att dra in dem. Det här är en bra teknik, men det kanske inte är lämpligt för alla konstruktionssituationer. Den universella sanningen här är att jag alltid ska, på ett minimum, veta vem du är och varför din webbplats finns i dessa första sekunder.
Vi såg detta gjort bra i Design Critique # 66 med sidhuvudet för IdentyMe.
Både grafik och meddelanden här samlas för att skapa ett kristallklart meddelande som kan läsas på ett ögonblick: den här webbplatsen låter dig skapa virtuella visitkort.
När vi ser det här bra, är det svårt att föreställa sig hur någon kunde skruva upp den, men det är faktiskt mycket oftare så att de platser jag kritiserar saknar märket i detta område med vaga meddelanden. Vi glömmer att när vi är nära ett projekt, kan vi ofta förlora det faktum att inte alla vet vad det handlar om, som vi gör.
Efter några möten vet du allt om din kunds affärer och det släpar ditt sinne om att du fortfarande måste förklara för alla andra precis vad det är? Smiths Logistics? gör och vad deras hemsida försöker åstadkomma.
2. Målorienterad design
Den andra viktiga sak som jag lärde mig om webbdesign är att projekten är mycket mer framgångsrika när de kontaktas med en mycket specifik uppsättning mål i åtanke. Den tidigare lektionen var egentligen bara en förlängning av detta: Ett av de viktigaste målen för en webbplats är att kommunicera sin egen syfte.
? Det är mycket som att vara en taxichaufför som hoppar frågar killen i baksätet där han går och i stället kör bara till en slumpmässig plats, hoppas han får det rätt.?Alltför ofta öppnar designersna bara Photoshop och börjar skissa idéer slumpmässigt. Det här är en bra kreativ övning, men som den primära metoden att bygga klientwebbplatser suger den. Det är mycket som att vara en taxichaufför som hoppar frågar killen i baksätet där han går och i stället kör bara till en slumpmässig plats och hoppas att han får det rätt.
I stället måste det vara så att en mycket avsiktlig uppsättning mål ska utarbetas av dig och din kund angående vad du hoppas åstadkomma med designen. Detta ska ske innan du skriver en enda kodlinje eller skapar en enda PSD.
Vi såg denna idé i praktiken mycket effektivt i Web Design Critique # 61: Undead Kit. Med tanke på att säljplatsen sålde ett kit för att hjälpa dig att överleva en kommande zombieapokalyps, fanns det två uppenbara delmål som webbplatsen behövde för att uppnå.
Den första var att visa vad som var exakt så var potentiella köpare visste vad de kom till:
Det andra delmålet var att förklara hur köpare skulle använda sitt kit för att överleva. Att ange objekten räcker inte, folk behöver se fördelarna med dessa saker i praktiken.
Som du kan se blev båda dessa mål uppnådda genom fantastiska illustrationer och enkla textbeskrivningar. Designern kunde fortfarande gå av och böjda sina kreativa muskler, men han gjorde det på ett sätt som ledde webbplatsen i en lyckad riktning.
3. Design Trends är som bakgrund
Bild din mormors hus. Föreställ dig alla saker där som indikerar att huset ägs av någon som växte upp i en annan era från egen hand: porslinsknickarna pryder varje hyllan, de ögonhuggiga färgscheman och naturligtvis tapeten. Skikt på bakgrundsbild, ett primärt (men nu ganska föråldrat) designelement i rummet som förändrats några år för att matcha de senaste trenderna.
? Om du skulle skölja bort dessa lager en åt gången skulle du resa genom tiden.?Bostäderna som ägs av olika medlemmar i min familj har säkert offrat 5% av deras kvadratmottagningar till lager av tapet galenskap. Om du skulle avlägsna dessa lager en åt gången skulle du resa genom tiden och bevittna olika mönster och färger som en gång såg som passande för att täcka ett rum, men år senare avskedades som ett hemskt misstag och ersattes med något som bara skulle tjäna till att fortsätta denna oupphörliga cykeln.
Jämfört med tapet är webbdesign fortfarande i sin linda, men vi har redan kommit tillräckligt långt för att se att designtrenderna fungerar här på samma principer. Ta tag i en design trend som verkade så fantastisk för fem år sedan och det fungerar nu som något som daterar en webbplats.
Vi såg detta i praktiken med de mönster, strukturer och skråkänslighet som användes på webbplatsen från Web Design Critique # 74:
Här ser vi vad som en gång kan ha varit nyskapande design, men nu känns det bara som något bra förbi sin tid. Webbdesigners är lummiga djur och när mobben rör sig, flyttar du antingen med det eller kommer efter.
Även om du tar hänsyn till det faktum att webbplatsen ovan har en avsiktlig retro känsla, fungerar designen fortfarande inte för att det sätt vi tar av retro faktiskt också utvecklas under åren!
? Mode, tv, hollywood, mat, ingenting släpper ut det trendiga.Du kanske tror att att hålla sig till moderna designtrender (eller ställa in nya) är dumt, men det är absolut inte fallet. Webdesigntrender utvecklas som en del av din kultur som helhet. Mode, TV, Hollywood, mat, ingenting släpper ut den trendiga räckvidden. Precis som arbetare i alla dessa branscher måste fortsätta eller riskera att bli irrelevanta, gör du också som webbdesigner.
Tro mig inte? Hitta någon som inte har byggt en webbplats sedan 1999 och låt dem utforma din nya portfölj. Odds är du slutare vid tanken.
4. Många webbdesigners stred fortfarande med typografi
Under de senaste två eller tre åren har webbdesigners helt anammat typografi. Detta speciella designområde har gått långt bortom en trend för många designers och har vuxit till en besatthet. Kör en sökning efter? Typografi? på Pinterest eller Dribbble och du får se otaliga exempel på fantastisk typografisk konst.
Kombinera detta med tjänster som Typekit och Google Webfonter, som ger vackra anpassade teckensnitt till webben, och du ser en bransch som har ökat i spridning inom detta område på mycket kort tid.
Med detta sagt är en av de problem som jag oftast möter i webbdesign fattig typografi. Det här kräver många former: liten kunskap om hur man effektivt kombinerar teckensnitt, dåligt val av teckensnitt, fula Photoshop-kartering, udda dimensionering, squished linjehöjd, etc. Här är ett exempel från kritik nr 73:
Vi kan fokusera vår uppmärksamhet på en typ av typografisk konst i timmar i slutet, men när vi arbetar på ett levande projekt, är typen rusad och drivs live utan ordentlig förberedelse eller undersökning. Goda skrivdesigners cringe på kerning exempel som ovanstående eftersom de vet i sin bransch, det finns ingen att gå tillbaka. När det är tryckt, är du klar.
? Goda skrivdesigners cringe på kerning exempel som ovanstående eftersom de vet i sin bransch, det finns ingen att gå tillbaka. När det är tryckt, är du klar.?Med webbdesigners kan kunskapen om att allt lätt kan uppdateras när som helst, göra slarvigt, skyndsamt arbete. Ta dig tid att få din typ rätt första gången.
5. Mindre är mer
Eftersom jag har tittat igenom dessa 85 webbplatser och föreslagna ändringar som måste göras är det ärligt ett mycket sällsynt fall där mitt intryck är att sidan är för gles.
Istället kämpar jag alltid med att få designers att förstå att de faktiskt försöker för hårt för att fylla på sidan. Detta resulterar i röriga, text-tunga konstruktioner som ingen verkligen tar sig tid att siktas igenom.
? Jag kämpar alltid för att få designers att förstå att de faktiskt försöker för hårt för att fylla på sidan.?Webben är ett snabbt tempo. Det finns anledning att termen är formulerad? Bläddrar du på webben? snarare än att läsa på webben.? Vi hoppar runt snabbt från plats till plats och letar efter allt som hoppar ut och håller vår uppmärksamhet.
De saker som gör det är vanligtvis enkla och attraktiva med några djärva uttalanden och / eller bilder som sticker ut ur sin omgivning. Sidor fulla av skräp presenterar ett fall av information överbelastning och vi går snabbt vidare.
Tänk på exemplet nedan från Kritik # 68:
Den här rutan är inte ful på något sätt, men den kan bli effektivare genom att ta bort det mesta av texten och lägga till lite typografisk kontrast:
Typ är inte det enda området där saker måste förenklas dock. Tänk på det här exemplet från kritik nr 77:
Detta är ett klassiskt exempel på att helt enkelt försöka pressa för mycket saker i ett litet utrymme. Vi tänker inte kritiskt på innehållsorganisationen utan i stället träffar en punkt där vi fortfarande har många saker som behöver ingå och ingen plats att uttrycka det, så vi klämmer bara och resultatet är ful, ineffektiv rubbning.
Vad har du lärt dig?
Så där har du det, fem lektioner som jag har lärt mig om webbdesign från att skriva femtio kritiker. Nu är det din tur.
Läs du våra webbdesign kritik? Vad har du lärt av dem? Hur kan vi göra dem ännu bättre? Lämna en kommentar och meddela oss.