10 webbdesign regler som du kan bryta
Eftersom webbdesign och design i allmänhet har utvecklats har regler upprättats för att säkerställa konsekventa och användbara konstruktioner.
Några av dessa regler skapades helt enkelt för att webbplats skapare misshandlade vissa principer utan hänsyn till deras användare.
Men dessa regler är inte verkställda av någon och borde brytas vid behov, speciellt när de bryter dem skulle leda till en fantastisk design.
I den här artikeln presenterar vi 10 regler som du kan bryta om det passar dina designbehov.
Regel nr 1: Visa inte den horisontella rullningsfältet
Ett betydande antal möss har inte ett horisontellt mushjul. Detta gör det besvärligt att rulla åt vänster eller höger när en webbsidans innehåll sträcker sig över sidorna av webbläsaren.
Det kan vara irriterande att du måste ta muspekaren ner till fönstrets undersida och dra rullrutan över för att bara se ett ord eller två som ligger bortom det synliga området på sidan. Det är sagt, här är några väl utformade webbplatser som gör att rullningsfältet fungerar på effektiva sätt.
Benek
Benek använder JavaScript för att ändra rullningsriktningen för mushjulet från vertikalt till horisontellt. Varje objekt i Beneks portfölj är uppdelad i sin egen kolumn. Webbplatsen har en överraskande frisk känsla och rinner smidigt.
Skoguru
Skoguru får bort med horisontell rullning eftersom det drar nytta av hur människor tittar på skor. Människor ser på de flesta produkter från topp till botten, men skor är olika. Människans ögon rör sig oftast över skos längd. Genom att använda denna vana till sin fördel gör Shoe Guru sin hemsida designflöde i samma riktning, vilket gör rörelsens känsla naturlig.
Stephane Tartelin
Stephane Tartelin använder den horisontella rullningsfältet för att få sitt konstverk att se ut som det är i ett konstgalleri. Även om det vertikala mushjulet inte fungerar som det gör i exemplen ovan fungerar effekten överraskande bra. Du kan till och med argumentera för att effekten skulle minska om mushjulet kodades om för att rulla horisontellt.
Grafisk terapi
Medan Grafisk terapi visar inte en horisontell rullningsfält på sidan, det tillåter fortfarande horisontell rullning genom att klicka och dra runt skärmen. Grafisk teori använde horisontell navigering eftersom alla dess bilder har samma höjd men inte samma bredd. Den horisontella navigeringen hjälper platsen att flöda smidigt.
Det horisontella sättet
Det horisontella sättet är en presentation av webbplatser som använder horisontell rullning. Grungy-grafiken är vacker, och den här webbplatsen är unik när det gäller CSS-gallerier.
Regel # 2: Använd ett minimalt antal teckensnitt
För många teckensnitt strider vanligtvis mot varandra och överväldigar betraktaren. Varje teckensnitt har en personlighet, och för många personligheter kan skapa störningar.
För att effektivt använda mer än bara ett par teckensnitt måste en design vara mycket textorienterad och resten av designen måste vara relativt tyst. Här är några exempel på webbplatser som använder denna känsla av konflikt och störning för att engagera användaren.
Länkar LA
Länkar LA använder många teckensnitt i en icke-linjär layout för att skapa en känsla av energi. Sidan är svår att läsa snabbt men drar användaren in. Det är också värt att notera att ingen av tecknen är alltför dekorativa; Varje ord är läsbart och håller designen skarp och ren.
Geo Elements Design Studio
Använda en mängd olika typsnitt ger vanligtvis en känsla av energi och kaos, men Geo Elements Design Studio s hemsida är mycket öppen och ren. Varje teckensnitt har sitt eget utrymme så att tittaren inte associerar den med ett annat teckensnitt. Bilden av himlen i bakgrunden bidrar till att förstärka känslan av öppenhet.
Richard Stelmach
Till skillnad från det sista exemplet, Richard Stelmach skjuter sina olika teckensnitt nära varandra. Designen fungerar eftersom endast en teckensnitt inte ser handritad, och de andra två fungerar bra med illustrationen. Handritade teckensnitt fungerar oftast bra tillsammans, även om det finns många olika teckensnitt.
Satsu
Satsu verkar ha många olika teckensnitt, men har faktiskt bara tre (inte sportportföljens portföljartikel). Genom att avstånda allt försiktigt förenar Satsu vissa textlinjer med varandra, även om texten kan vara i olika teckensnitt.
Logotypens titel är i ett teckensnitt, och de två undertitlarna har sina egna teckensnitt, men tittaren grupperar naturligtvis dessa tre textobjekt tillsammans. Satsu kan skapa energi utan att överväldiga sidan med personligheter.
Regel # 3: Använd inte för många färger
Rädslan att gå för långt med en design är vad som skiljer proffs från rookies och rookies från det oblivious. De oblivious försöker göra sina mönster så extrema som möjligt, med ord i brand, blinkande text och så många färger som möjligt.
Rookies vill behålla sin design subtil och lätt på ögat, men i slutändan kan deras mönster ibland se livlösa ut. Följande ögonvänliga mönster är av några sanna proffs som driver gränser.
Matt Mullenweg
Matt Mullenweg s vackert färgad design ser ut som en akvarellmålning (webbplatsen har uppdaterats sedan den här artikeln skrevs). Alla färger i bakgrunden skulle få tag på någons uppmärksamhet.
Generellt kommer bra mönster med massor av färger att ha dessa färger i bakgrunden, med en enklare palett uppåt. Läsa text är mycket svårt när alltför många saker pågår.
Travic Isaacs
Travis Isaacs designen har en färgstark vertikal gradient i bakgrunden som gör att designen verkar färgstarka hela tiden. Den här webbplatsen har ljusrosa som sin länkfärg, vilket är ett utmärkt val för designers som vill skapa en färgstark effekt.
James De Angelis
James De Angelis ' Webbplatsen visar att texten kan vara färgrik utan att komma över som rookie-like. Designen är väldigt extra, och taglinjen är givetvis centrerad.
Regel # 4: Gör din webbplats mål självklart
Någonting som verkligen blir kramat i unga av unga designers är att en design borde genast berätta tittare vad de tittar på innan de läser någon text.
Varumärkesigenkänning är viktigt för stora företag, men ibland måste de mindre killarna vara lite smartare för att få betraktarens uppmärksamhet. Att hålla tillbaka information kan intrigera betraktaren och "reta" människor till att vilja lära sig mer.
Att tillämpa denna teknik för webbdesign kan öka tiden som användarna bor på din webbplats.
Cetrotrees
På de flesta portföljer presenterar frilansaren eller företaget vanligtvis sig själva och förklarar sitt arbete. Cerotreees ställer istället vissa vagt märkta länkar till vänster och prover av sitt arbete till höger, men ingenting förklarar idén eller personen bakom den.
Luften av mysterium som omger platsen lockar användaren att stanna.
Den sista Mixtape
Den sista Mixtape är en annan portfölj som visar sitt arbete och ingenting mer. Sådana mönster utövar en känsla av extremt förtroende. De försöker aldrig sälja sig själva; de förväntar sig bara att användaren blåses bort och ber om ett kontrakt.
Peter Pearson
Att använda en stänkskärm är ett bra sätt att sakta ner användarens tankeprocess och inspirera dem att gräva djupare. Stänksidans mål är oftast att förklara webbplatsen snabbt med foton eller en kort bit text.
Men i Peter Pearson fallet är dess mål att framkalla en känsla. Den stora himlen och splattered texteffekten gör ett bra jobb för att framkalla nyfikenhet eftersom dessa saker vanligtvis inte framträder tillsammans. Den här webbplatsen gör också ett bra jobb för att fortsätta de känslor som skapas av stänksidan i det faktiska innehållet.
Sidrullningsrörelse och animerade linjer som följer användaren är verkligen effektiva.
Piepmatzel
Ett bra sätt att komma runt språkbarriären är att inte använda några ord. Piepmatzel är ett CSS-galleri, och folk som har sett ett CSS-galleri före kommer sannolikt att känna igen det som en med en gång.
De som inte kan vara intresserade nog att ge några av miniatyrerna ett klick i hopp om att räkna ut mönstret. Den lilla mängd text längst ner på sidan hjälper till att sortera och är överflödig.
Regel # 5: Navigering ska vara lätt att räkna ut
Navigering ska inte vara flaskhalsen på en webbplats. Användare ska kunna hitta vad de vill ha snabbt. Ibland kan dock en ointuitiv men engagerande navigering hjälpa användaren att känna sig kopplad till webbplatsen och vad den marknadsför.
Alvin Tang
Som nämnts i föregående avsnitt förmedlas en förtroendeluft när en portfölj inte stavar ut sig själv. Detta är fallet i Alvin Tang s fotoporteföljen. När du först kommer på webbplatsen känner användaren inte genast de ord de ser som länkar.
Denna osäkerhet bör uppmana dem att dyka runt lite. Flytta musen över ett ord avslöjar att det verkligen är en länk, och när du klickar på det, fyller du ett underbart foto. Bilden kommer att locka användare att fortsätta bläddra.
För att se fler bilder måste användarna klicka på "Tillbaka" -knappen i webbläsaren (något de flesta förstår att göra) och klicka sedan på en annan länk. Det finns ingen handhållning i designen, och det fungerar extremt bra. Detta är inte en konventionellt "underbar design", men den levererar exakt vad den behöver.
Kasulo
Kasulo 's navigering är inte fruktansvärt svårt att räkna ut, men den genomsnittliga användaren kanske inte vet exakt vad man ska göra när man kommer på platsen. Efter det första klicket blir allt dock uppenbart.
Användaren navigerar portföljstyckena i 3-D-stil, och de senaste objekten visas närmast början. Att använda mushjulet är ännu roligare.
Marcio Kogan
Marcio Kogan s webbplats är ett annat exempel på bra navigering som inte är omedelbart uppenbart. Instruktionen "Drag mig" är svår att motstå, och när användaren gör det, är de på väg att kryssa portföljen. Förhandsgranskningarna är en liten detalj men verkligen imponerande.
Ceranco
Om en klient skulle fråga en designer för att göra sin webbplats i 3-D, som ett första person shooter-videospel, skulle de flesta designers tyst skratta åt sig själva, ta ett djupt andetag och sedan förklara långsamt varför det skulle vara en dålig idé .
Medan webbplatsen för Ceranco är inte exakt en 3-D skytt, det kan lätt förväxlas för någon form av indie datorspel. Sidor som detta är bra för engagerande användare. Medan den långa laddningstiden och dålig sökmotoroptimering gör detta mindre än idealiskt för de flesta projekt, är det definitivt värt en andra tanke.
Regel # 6: Använd olika färger för texten och bakgrunden
Denna regel kanske inte är skrivet överallt, men många rookies är så rädda för att göra text oläslig att de inte anser att använda samma basfärg för både bakgrund och teckensnitt. Du kan följa några enkla tekniker för att få liknande färger att fungera.
Linksys
De Linksys platsen är snygg på grund av hur den har en blå för alla dess länkar, även om bakgrundsfärgen är olika nyanser av blått. Medan en risk och kanske inte det största färgbeslutet, fungerar det.
Brad Colbow
Brad Colbows design liknar Linksys "på grund av den blå texten på blå bakgrund. Blått på blått är svårt att dra av sig, särskilt med så många olika blues på hela webbplatsen.
Powerset
Hittills i det här avsnittet har vi bara sett blå webbplatser, eftersom blå text är hårdast för det mänskliga ögat att läsa, och så läsbart blå är alltid imponerande. Om en texteffekt fungerar i blått, kommer det troligen att fungera i vilken färg som helst.
Powerset använder en bokstäverstil för sin typsnitt för att skapa en 3-D-effekt som effektivt skiljer texten från bakgrunden.
Konstnär I Design
Konstnär I Design har inte bara grön text på en grön bakgrund och gul / beige text på en gul bakgrund men har text direkt ovanpå ett foto.
Medan vissa enskilda bokstäver kan vara svåra att läsa är orden som helhet läsbara. Denna typ av effekt borde nästan alltid vara mittfas i en design.
Horacio Bella
Horacio Bella använder en annan 3-D effekt på sin portfölj. I det här fallet verkar bokstäverna popa ut snarare än att dras inåt. Utan denna effekt skulle läsbarheten ha minskat kraftigt. En annan bra effekt som används här är den snäva ordningen av bokstäver, vilket ytterligare förbättrar läsbarheten.
Regel # 7: Lägg inte animering i vägen för ditt innehåll
Allvarligt, kom inte upp lite Flash-annonser direkt där användaren läser. Samma sak gäller för de enkäter som visas när användaren är mitt i en mening. Användare tycker inte om att vara distraherad när de är halvvägs genom en mening. Såvida inte…
Det är verkligen svårt att inte vara upptagen av den lilla spindeln på ABA s webbplats. Designen är ren, och även om spindeln är en distraktion, är det okej. Hittills är den här sidan jag anser vara det enda undantaget från regeln.
Regel # 8: Håll dig till webbsäkra teckensnitt
Även om teckensnittet ersätter tekniker är fortfarande unga, gör de redan ett stort stänk. sIFR var den första och nyligen cufon och Typefasce.js har dykt upp.
Diseñorama
På Diseñorama webbplats, den röda "Recientemente" -texten kan väljas. En nackdel är att om webbplatsen inte laddas omedelbart, så kommer användaren att se det vanliga rena teckensnittet kortfattat.
En annan nackdel är att om användaren antingen har JavaScript eller Flash inaktiverat, skulle de bara se originalfonten. Allting är det fortfarande ganska coolt. Förhoppningsvis är det en förhandsgranskning av vad som kommer att komma de närmaste åren.
Cactuslab
Cactuslab använder också sIFR för de blå underrubrikerna (till exempel "Winter Work"). Även om sIFR är den mest komplicerade av teckensnittsutbytet, kan texten kopieras och klistras, vilket ger en stor fördel gentemot de två andra teknikerna.
Regel # 9: Har inte en splash / målsida
Många designers har haft samma gamla diskussion med sina kunder om varför en stänk sida inte är en bra idé. Google tenderar att rangordna sådana sidor lägre, och de saktar ner användaren från att få innehållet som de efterfrågar. Men de kan vara otroligt vackra och inspirerande om de görs rätt.
Glans Postproduktion
Syftet med portföljprovet som visas på splash-sidan av Glans Postproduktion s hemsida är att framkalla en känslomässig reaktion från användaren.
Vid varje besök laddas ett slumpmässigt foto från portföljen. När du klickar på bilden skalar den ner och placerar den på plats bland de övriga portföljstyckena på webbplatsen. Skalning och rörelseffekten ger fortsättning och hjälper till att överföra användarens känslor till resten av företagets arbete.
Issa London
När en webbplats är helt klar i Flash kan laddningsfältet fungera som en stänksida. När en användare ser en laddningsrad stänger de antingen sidan och går någon annanstans eller växlar till en annan flik och bläddrar någon annanstans medan de väntar.
När sidan har laddats är det bäst att vänta på att användaren ska återvända innan den startas. I Issa London s fall är porten en perfekt metafor för att säga att webbplatsen är klar och användaren kan komma in.
När användaren klickar på porten öppnas porten och olika illustrerade modeller visas. Genom att använda porten på stänk sidan är en bra designidee, eftersom användaren känner sig engagerad vid inmatning.
Regel nr 10: Använd inte tabeller
Varje webbdesigner som använder tabeller i sina mönster kommer genast att kallas en rookie av erfarna designers. Tabellerna visar inte samma sak i alla webbläsare, och de kan göra källkoden snyggig, men i alla fall vet du vad du får med dem. Här är några exempel på mönster som innehåller tabeller.
Denna tabell är lite svår att se men ligger däremellan mellan de två stolarna. Det är ett trevligt litet sidobord, men tyvärr bidrar inte mycket till den här webbplatsens design.
Tabeller är sätt i bakgrunden till denna design på Arbeta på spel , men de håller arbetarnas bärbara datorer och andra objekt inom räckhåll. Utan dessa bord skulle rummet känna sig mycket emptier, och bakgrundsbildet skulle inte ha samma effekt.
Även om denna design mestadels har stolar, visas ett fint litet bord längst upp till höger om miniatyren. Ser ut som en kruka sitter på den.
När det gäller mönster med bord går det här en av de bästa. Med två tabeller i denna Flash-animering ger designen dem mycket uppmärksamhet. Den här webbplatsen borde finnas på varje designers lista med bra mönster som använder tabeller.
Bryter mot reglerna!
Att bryta reglerna är okej när en design kräver det. Många av de designval som granskades här skulle inte beaktas av den genomsnittliga designern. Det här skiljer stora designers från de genomsnittliga.
De som är modiga nog att gå emot vad de har blivit undervisade står alltid ut.
Skriven uteslutande för WDD bt Eli Penner. Han driver sin egen hemsida på SleepyHero.com
Bryter du några regler i dina webbdesigner? Varför eller varför inte? Vänligen dela dina åsikter med oss ...