Hemsidan – 10 design att göra och inte göra

Varje år letar designers efter det nya, det unika och det innovativa. Och varje år blir de inte besvikna. Webbplatsdesign, särskilt för hemsidor, fortsätter att spegla förändringarna i konsumenternas krav samt vad nyare teknik gör möjligt.

Det är lätt att ryckas med av de senaste kreativa innovationerna och att dyka in i nya tekniker, men det finns också en varning att berätta. Design måste möta de känslomässiga behoven och standarderna för engagemang hos de besökare som kan bli kunder/följare.

Ta ett steg tillbaka

All design på hemsidan är i grunden ett försäljningsargument. Oavsett om du vill att en besökare ska komma in i försäljningstratten genom någon typ av konvertering; om du vill att en besökare ska vara tillräckligt förundrad för att kolla in de andra sidorna; eller om du vill att en besökare ska bli känslomässigt engagerad (t.ex. ett välgörande ändamål), måste du tänka i termer av kunden, inte dina designpreferenser eller vad du tycker skulle vara "coolt." Det är lätt att ryckas med av sådana saker som parallax och rullning, men var villig att dra dig tillbaka och fundera över vem du designar för. Även om nytt ögongodis är spännande måste det passa varumärket och publiken, så trampa försiktigt. Här är några viktiga saker att göra och inte göra som kommer alltid att råda, oavsett vilka nya designtrender som kan dyka upp.

1 Skapa en intim relation med varumärket och dess kunder

Oavsett om det är ett leksaksföretag, en lyxjuvelerare eller en välgörenhetswebbplats, har varje organisation ett varumärke och en varumärkesimage att skildra. Detta kräver massor av studier och forskning, inte bara vad en VD eller CMO kan säga. Hur framställs företaget på sociala medier och dess nuvarande hemsida? Vad är "kulturen" inom företaget självt? Var står företaget inom sin bransch? En KIA är inte en Cadillac och vice versa. En traditionell bank är inte en ny och innovativ långivare. Varje organisation har en personlighet, och varje hemsida måste matcha den personligheten.

Lär känna kunderna – få ihop en profil:

Likaså har varje varumärke kunder eller potentiella mål. När innehållsmarknadsförare planerar sina strategier är de noga med att skapa innehåll som tilltalar deras kunder. De utvecklar en kundpersona som är mycket detaljerad. Om du designar för en organisation, gå med CMO och få den kundpersonan. Om en inte har utvecklats måste du ta reda på demografin för dess typiska kunder och/eller dess målmarknad innan du börjar designa. Din design måste tilltala den kunden, inte till dig eller någon i företaget.

Det som tilltalar en företagsägare kanske inte tilltalar hans/hennes kunder. Ibland är det svårt att övertyga företagsägare om detta. 1971 designade Carolyn Davidson, en konst- och designstudent, Nike swoosh. Phil Knight var inte förtjust i det, men gick med på att ge det ett försök. Det är bra att han gick med designern och inte sina egna första tankar. Du kanske måste vara lite påstridig här, och diplomatisk i det påståendet. Om du inte kan komma överens, föreslå A/B-testning av två konstruktioner. Beviset finns i antalet som stannar längre och som konverterar på något sätt.

2 Studera psykologi för visuellt innehåll och använd det när du designar

Marknadsföringspsykologin har alltid varit knuten till text som används – skapa en känsla av brådska, vädja till önskan att tillhöra, etc. Det finns också en bestämd psykologi av visuellt innehåll, och neurovetenskap ger oss mer information om detta varje år. En del av detta tas upp i designskolan, naturligtvis, men en del inte. Designens psykologi relaterar till texten du använder men också till principerna för neuropsykologi som är inbäddade i det visuella du skapar.

• Viscerala svar: Vi har alla haft dessa erfarenheter. Vi tittar på en huvudsida och älskar den (eller hatar den). Vi kan inte säga exakt varför, men vårt undermedvetna reagerar på vissa triggers som det visuella har aktiverat. Psykologi säger oss att dessa typer av reaktioner vanligtvis aktiveras av grundläggande önskningar och behov – säkerhet, hot, tröst, kärlek, överlevnad, etc. Att använda en pastoral eller fridfull vattenmiljö, till exempel, kommer att framkalla en trevlig känsla, men och öppen och Snygg design främjar faktiskt en känsla av säkerhet och trygghet – något vi kanske inte inser.

• Eye Movement: Om du inte har läst på om neurolingvistisk programmering bör du göra det. Denna gren av neurovetenskap relaterar specifikt till ögonrörelser på en sida. En del av denna forskning har resulterat i "Rule of Thirds". Du har läst och övat och använt rutmönster mycket. Tredjedelsregeln hänför sig dock till vart ögat går när det först träffar en sida – det finns 4 fläckar som bildas av skärningspunkterna mellan en tic-tac-toe-sidaindelning. Ta en titt på denna sida:

  Det viktigaste elementet på sidan placeras i en av dessa fyra korsningar. De nedre korsningarna är under vecket, vilket kan strida mot traditionella "regler", men neuroforskare håller inte med. Om du vill att mer information ska ses kan du använda karusellen och placera den i området för de två översta korsningarna. Det är en mycket vanlig metod och används flitigt nuförtiden.

• Humör och ton/färg: Designen måste matcha allt om humöret och tonen hos den produkt eller tjänst som erbjuds. De flesta designers, naturligtvis, vet detta, men färgpsykologi spelar en viktig roll för att etablera den stämningen, tonen och känslorna:

3 Experimentera med mönster; Överdriv inte mönster

Det finns tre typer av mönster du kan använda, men återigen, när du väljer ett mönster, var försiktig – det måste matcha organisationens uppdrag och får inte överdrivas. Lyckligtvis finns det så många resurser och appar för mönster, du hittar en som passar. Här är några mönsterexempel som talar till ett företags syfte och personlighet.

• Det generativa mönstret: Dessa är återkommande mönster – geometriska mönster, partiklar, etc. Vissa kan vara ganska subtila; andra kan vara djärva och övertygande. Här är exempel på var och en:

  Det här mönstret är subtilt och mjukt – för en fransk musiksajt.

  Detta mönster är för ett italienskt modernt möbelföretag. Mot detta rörliga mönster flyger bilder av möbler in och över sidan.
  Båda dessa mönster hjälper till att förstärka organisationens identitet och tilltala dess kund-/anhängarebas.

• Datamönster: Många företag säljer mer abstrakta tjänster, inte konkreta produkter. Bakgrundsmönstren som används bör återspegla det. Dessa mönster kan vara inspirerade av matematik eller högteknologi, och kan ge en känsla av "bortom världsligt." Här är ett exempel på ett mycket subtilt och minimalistiskt datamönster för Optimizely:

• Parallax: Många designers experimenterar med parallax, och effekten kan vara ganska fantastisk. Även om du uppenbarligen inte kan se rörelsen, här är en webbplats som gör det perfekt.

  Maaemo är en exklusiv norsk restaurang. Molnen går över himlen medan namnet förblir stillastående. Parallax kan vara fantastiskt, men bara om det görs rätt. Resten av grafiken och texten får inte vara för upptagen, eller så går hela effekten förlorad och besökaren lämnas förvirrad och bombarderad.

• Animationsmönster: Rörliga delar kan vara en stor attraktion, och det finns nyare teknik som gör dem ganska roliga och övertygande. Dessutom har den lätthet med vilken designers nu kan lägga till animation fått vissa att gå lite överbord. Återigen, överväga publiken och företagets personlighet innan du lägger till animering. Här är ett exempel från Manchester Masters Fieldwork, ett brittiskt webbdesignföretag, som visar vilken typ av animation de kan producera. Du kan inte uppleva animationen av alla looping och rörelser. Det är naturligtvis en överdrift och skulle vara lämpligt för en webbplats som säljer barnprodukter.

• Rutnätsmönster: En traditionell rutmönster kan användas för att placera bakgrundsobjekt i ett symmetriskt mönster. Tänk på detta bakgrundsmönster för Aark Collective, en klockförsäljare – perfekt.

• Blödning: Detta är ett relativt nytt men värdigt designelement, lämpligt för vissa typer av företag. I huvudsak börjar ett mönster på innehållssidan och blöder sedan ut i en enfärgad bakgrund. Här är hur Web Designer Depot brukade ha det för sin egen webbplats.

4 Leta efter ett unikt sätt att designa knappar

Att använda traditionella navigeringsknappar kan vara lite tråkigt. De behöver inte vara det om sedan kan införlivas direkt i hemsidans design. Här är ett par sätt på vilka designers har lagt in lite kul på en sida och dess knappar.

Ta en titt på Small Stones hemsida – de säljer videor och musik. Menyn har designats till en gammaldags soundboard, och rattarna är navigeringsknapparna – ganska unika.

Custom Tshirts är ett brittiskt företag som låter kunder designa sina egna t-shirts. Navigeringsknapparna är placerade på t-shirten, tillsammans med andra menyalternativ längre ner.

5 Experimentera med menyer

Precis som knappar kan menyer också vara ganska tråkiga. Dessutom kan de förringa en annars snygg design. Att gömma menyn har nu blivit ganska uppfattat av besökarna så länge det är i det övre vänstra eller högra hörnet med hamburgerelementet med tre barer. Detta rensar upp en webbplats. Det finns några nackdelar, så gör din forskning och se om det är rätt för organisationen.

Ytterligare andra designers har experimenterat med att göra hela hemsidan till menyn enligt följande:

6 Gör formulär behagliga eller roliga:

Ett formulär finns vanligtvis inte på huvudsidan på en webbplats, men det fungerar för vissa företag, om designen antingen är trevlig eller ger lite kul för besökaren. När formuläret matchar temat kanske du kan komma undan med det. Här är två exempel på formulär som finns direkt på en hemsida:

Kan vara en bra idé för en resewebbplats.

Här är ett exempel för en brittisk design- och varumärkesbyrå.

7 Lägg ofta till nya saker på hemsidan; Låt det inte gå inaktuellt

Folk gillar variation, och det är glädjande när de återvänder till en webbplats för att se lite nya bilder och text. Att hålla logotypen, temat, färgerna och navigeringselementen desamma kommer att låta dem veta att de är på rätt plats, men nya saker är bra att göra.

Portuondo är en heminredningswebbplats som erbjuder en ny bild på sin hemsida regelbundet, och den kan få besökare och kunder att återvända bara för att se vilken ny designidé som presenteras.

8 Överdriv inte text

Självklart måste du ha text. En besökare behöver veta var han/hon har landat, och det är den första uppgiften i varje text. Utöver det, dock vara minimal. Några av de mest slående hemsidorna har nästan ingen text, och det gör att besökarna kan ta in designen och njuta av den bara ett ögonblick innan de börjar navigera. Och det säger sig självklart att tjusiga manus bara är till för stora rubriker och bara om det stämmer med stämningen och tonen i företaget.

9 Prova One-Page Website Design

Allt finns på startsidan och besökaren rullar bara. Dessa sajter behöver bara laddas en gång, och du kan sätta knappar överst för att ta en besökare till platsen på sidan för specifik information. Dessa är särskilt populära bland människor som du och andra artister.

10 Använd inte frontsidekaruseller

Det är förmodligen inte trevligt att avsluta med ett negativt, men hur populära dessa än kan vara finns det många problem med dem. De kan lägga till ett visst visuellt intresse, och visst minskar de röran på en hemsida, men det finns tydliga nackdelar. De är dåliga för SEO, de kan skapa prestandaproblem (laddningstid, bildupplösning, etc.), och viktigt annat innehåll kan behöva placeras nedanför mitten.

Slutsats

Det finns säkert många andra att göra och inte göra för webbdesign. Du har förmodligen redan dina husdjur och sällskapsdjur. Det finns egentligen bara en nyckel takeaway. Poängen med webbdesign är att förena dig, designern och konstnären, med organisationen och dess konsumenter. Och den viktigaste av de tre är alltid konsumenten. Om du kommer ihåg att designa med den målgruppen i åtanke, kommer du att uppnå uppdraget med bra hemsidadesign.