Människor bygger webbplatser av många anledningar: att nå en bredare publik; att sälja, marknadsföra eller uttrycka att tilltala ömsesidigt tryck. Nyheten slutade vara en anledning ca 2001. På sin plats har vi förstås: o naturligtvis har jag en hemsida; självklart måste du ha en Facebook-vägg, Twitter-konto, LinkedIn-profil eller Pinterest-styrelse; Naturligtvis har vi alla e-post.

Och självklart använder webbdesign HTML och CSS - två språk med vilka webbläsare och designare hittar gemensam mark. Men många webbdesigners skapar fantastiskt utbud med samma språkregler genom att fråga vad om istället för att falla in i naturligtvis.

Andra håller fast vid vad som fungerar.

De som följer konventionell visdom använder inte bara språket utan de samma meningarna - i webben, inte bara HTML / CSS, utan Arial och Georgien, 960 pixlar breda layouter eller understrukna blåa länkar. Att använda sådana konventioner är inte fel. Men designers som inte väljer att använda etablerade mönster - som följer konventionell visdom utan att fråga varför - saknar möjligheter.

Standardstrukturen

Standardstrukturen med enkel nivå har praktiska fördelar. Det är enkelt, och enkelt är bra för deadlines. Ännu viktigare är det bekant. Både webbsökande offentliga och webbdesigners har ett oförtalat avtal om hur webbplatser fungerar. Efter hemmet / tjänsterna / om / kontaktmönstret tjänar designers och publiken genom att uppfylla sina förväntningar.

Andra begrepp är så uppenbara att de är lätta att förbise:

  • Folk förväntar sig att klicka på ordet "kontakt" kommer att presentera e-post eller telefon detaljer.
  • De vet att de hittar en hemlänk i det övre vänstra hörnet av en sida. I kombination med en logotyp, förstås.
  • De kommer se upphovsrättsdeklarationer i sidfoten, ofta till vänster, med ett år.
  • De vet att webbplatser rullar upp och ner, inte sida vid sida.

Plus, lätthet till lärt beteende lindrar friktion. Men konstruktörer som följer konventioner, med eller utan att förstå det, förstärker konventionerna själva.

  • Klicka på logotypen och få ett kontaktformulär? "Det är inte vad jag förväntade mig."
  • Klicka på en länk som säger "läs mer" och få en betalningsvägg? "Ge mig bara artikeln."
  • Bläddra horisontellt istället för vertikalt? "Det var konstigt. Är det trasigt? "
  • Mest framträdande grafik längst ner på sidan? "Det är upp och ner."

Det är lätt att dra den uppenbara slutsatsen: Bryt konventionen och riskera att alienera människor.

Ändå är inte alla konventioner absoluta. De flesta webbplatser följer reglerna med sina egna stilistiska skillnader. Inte varje länk på varje webbplats understryks blå text. Inte alla bilder är dimensionerade på samma sätt. Inte varje layout använder samma arrangemang av kolumner. Människor anpassar sig för att variationer i konventionen är själva konventioner. Folk förväntar sig att hitta egenskaper mellan webbplatser.

I så fall hur blir okonventionella webbplatser borta med att bryta rang? Deras designers uppfinna nya konventioner som är lätta att lära.

Adaptivt tänkande

Det gamla ordspråket, "bryta inte det som inte är trasigt" är bra råd tills någon ändrar definitionen av "trasig".

Sedan början av webben skulle konstruktörer kunna lita på Skärmarna är minst 640 pixlar breda . Mer nyligen är 1024 pixlar och större vanliga. Börjar 2007 mycket litengadgetar sätta webbplatser i människors händer. Plötsligt utformar för 320 pixlar var i mode .

Men tvungen att förändras och väljer att förändras är olika attityder. Kreativitet är inte rädd för att följa en väg med större motstånd.

Roberts

Roberts-gruppen Webbplatsens experiment med en nätbaserad layout. Användare navigerar på deras webbplats med en "bokstavlig sidokarta". Textlänkar ger en återgång till användarna obekväma med nätet.

Hur man bryter mot konventioner

Inte alla risker lönar sig. De flesta okonventionella webbdesign misslyckas inte för att de bryter mot mönster, men för att de misslyckas med att kommunicera nya löften. Tricket är att identifiera varför konventionerna kom till.

1. Sätt ett hemlänk med en logotyp i övre vänstra hörnet

Problem: Besökare på en komplex webbplats kan gå vilse. En tillförlitlig hemsida länk fungerar som webbplatsens återställningsknapp.

Konventionellt tänkande: varje sidladdning börjar överst på sidan. Eftersom de flesta webblayouter rullar ner är toppen av varje sida den mest logiska platsen för en pålitlig knapp.

Okonventionellt tänkande:

  • Använd position: Fast att hålla en hemknapp på samma plats på besökarnas webbläsare, inte bara sidan
  • Uppmuntra människor att bläddra igenom innehåll med en framstående hemlänk längst ner på sidorna
  • Ta bort hemsidan till förmån för en rik navigeringsfält

2. En lista med artiklar kommer att göra sina titlar, bilder eller "läs mer" klickbara

Problem: människor behöver uppenbara vinklar för att nå information som titlar och beskrivningar lovar.

Konventionellt tänkande: Titlar och miniatyrbilder representerar bäst det innehåll de beskriver. Den kortaste vägen till "Jag vill läsa mer om det" är att göra det klickbart. Gör därför titlar och miniatyrer klickbara.

Okonventionellt tänkande:

  • Gör hela teaser - bild, titel och beskrivning - klickbar. Länkar med mer ytarea är bra för mobil design och lätt att skapa med CSS
  • Vänd den upp och ner: led med en eller två övertygande meningar, sätt sedan den klickbara titeln under i mindre text
  • Snarare än att "läs den här nu", låt användarna lägga till artiklar i en kö som ska läsas i sin fritid i den ordning de väljer

3. Skapa en mall innan du skriver innehållet

Problem: estetik, inte kod eller semantik, skapa en webbplats första intryck.

Konventionellt tänkande: Design webbplatsens utseende först. Lämna ett utrymme för innehåll.

Okonventionellt tänkande:

  • Använd typografi och färg för att dra in innehållet med humör, röst och karaktär. Därefter designa element som förstärker den karaktären, om det behövs, som bakgrundstexturer och sidobar.
  • Gör bakgrundsdelen av innehållet. Ändra färger per sida för att återspegla humör, ämne eller funktion.
  • Dölj eller minska sidospårinformation tills användaren väljer att vara uppmärksam på den.
Stories at Longboard World

Berättelser på Longboard World inte bara trotsar "teasers måste vara text" regel, men lär sig en lektion från Fitt's Law genom att göra hela notecarden klickbar.

Riktlinjer för regler

Att bryta allmänhetens lärda beteende är att renegera på ett löfte. Konventioner är synonymt med förtroende. Det bästa sättet att bryta etablerade regler är att inte bryta dem, men att ersätta dem.

1. Byt ut, bryt inte, regler

För att ändra konventionen måste vi respektera varför gamla regler fungerade.

  • Tidiga webbläsare behövdes för att göra länkar uppenbara, så de betonade klickbar text.
  • Textlinjer som är bredare än 400 pixlar är svåra för att människor följer linje efter rad. Kolumnerna förkortar inte bara linjer, men de möjliggör en mer horisontell organisation.
  • Innehållsrika webbplatser skapar organisatoriska huvudvärk. Sökverktyg låter folk jaga efter en viss fras snarare än att gräva genom godtyckliga kategorier.

2. Håll dig till dina egna regler

När människor associerar, säg orange lådor med länkar, bör designen inte variera från det löftet. Varje gång du klickar på en orange ruta tar människor till en ny sida förstärks den här regeln. Varje apelsinlådan som gör det annars kommer att försämra regeln.

3. Ge det tid

Både den offentliga och motvilliga platsägare får förtroende genom exponering. Design kan hjälpa det genom att sänka inlärningskurvan - vilket gör reglerna tydliga.

4. Använd mål

Konventioner fungerar. De är enkla för både designare och publik. Att bryta dem för förändringens skull gör ingen till någon fördel. Tänk istället om problemen.

  • Populär konsensus är emot denna lagstiftare. Om folk besöker webbplatsen har vi mindre än en sekund för att vinna dem över. Hur kan vi ändra sinnen så snabbt?
  • Vi vill visa mer än 200 bilder. Hur kan vi göra det lätt för människor att navigera?
  • Våra produkter är säkra, men vi har ett rykte om att vi inte bryr oss om miljön. Pressmeddelanden betyder ingenting. Hur kan vi visa äkta oro i undertext?
  • Vi har en glut av lager. Ingen köper. Hur kan vi göra det till vår fördel?
Evolution of the Web

Utveckling av webben vågar bryta webbläsarens "högra vik" genom att sträcka sig åt sidan. Animering i början visar till användarna vad de kommer att få för sidrullning.

När webbdesign utvecklas är att lyda konventionen mer riskfylld än att experimentera. När allmänheten märker okonventionella mönster som fungerar bra, mobila eller inte, kommer de också att bli medvetna om webbplatser som begränsar sig till konventionerna i går. Designers som erkänner detta kan göra stora steg mot att bygga bättre webbplatser.

Bryter du regler eller spelar det säkert? Vilka regler för webbdesign vill du skriva om? Låt oss veta i kommentarerna.

Utvalda bild / miniatyrbild, okonventionell bild via Shutterstock