11 trender inom webbdesign att ha koll på 2015

Webbdesign trender 2015Nytt år, nya möjligheter. I livet i stort och så klart inom webbdesign.

Det var väl inte bara jag som vid tolvslaget på nyårsafton höjde glaset och storstilat lovade att göra min webbplats till en ännu bättre plats under året när andra pratade om att börja träna och bli en bättre människa?

Nej skämt åsido, det gjorde jag kanske inte, men självklart har min sajt en given plats på listan över de viktigaste prioriteringarna under det kommande året.

Kanske ser det ut på samma sätt hos dig? För webbplatsen är ju det viktigaste vi har, grunden i allt arbete med digitala och sociala medier.

2014 var ett finfint år för alla oss som gillar design, WordPress och allt annat härligt som finns på webben. Nya tjusiga teman, nya smarta plugins och mycket annat som gör livet värt att leva för en webbfantast gjorde entré. Man upphör aldrig att förvånas över vad mänskligheten kan skapa och med webben som arbetsfält kan man utan tveka säga att vår bästa tid är nu, för att citera en gammal dänga.

Men nu är det dags att ta sig samman efter nyårsfestligheterna, lägga partyhatten på hyllan, sopa bort konfettin och blicka framåt.

Hur kommer trenderna för webbdesign se ut 2015? Vad blir hetast och vilka blir pinsamheterna som designpolisen kommer att sätta span på?

Blir en Pinterst-liknande layout det nya svarta? Kommer vi navigera på en webbsida genom att scrolla eller klicka? Gör Comic Sans, typsnittet vi älskar att hata, en storstilad comeback?

För att hitta svar på dessa frågor tänkte jag göra en djupdykning i de trender som uppstod 2014 och ge mig på att göra en framtidsspaning om vad som kommer gälla de närmaste 12 månaderna. Eftersom WordPress är och förblir mitt absoluta favoritverktyg för webbpublicering kommer jag att fokusera på det lite extra, men det betyder absolut inte att du som använder ett annat verktyg inte kan ha behållning av min trendspaning.

Så häng med!

1. Flat design (platt design) är här för att stanna

Platt design

Glöm skuggor, övertoningar och allt annat 3D-aktigt. Nu är det tvådimensionellt, avskalat med enkla detaljer i solida fäger som gäller, precis som på Lyctics webbplats.

Även om du sitter och njuter av dagens första kopp kaffe vill jag att du genast ställer ifrån dig den, släpper allt du har att göra och beger dig till din webbplats stilmallar. Style.css alltså. Där vill jag att du genast raderar allt som har att göra med skuggor, övertoningar, texturer eller annat som ger dina designelement djup. Webbens 3D-era är över gott folk. Platt design (flat design på engelska) cementerade på allvar sin plats 2014 och den är definitivt här för att stanna.

Den innebär att du istället för att sträva efter att få din design att se så ”verklig” ut som möjligt genom olika effekter, använder en mer minimalistisk och avskalad design med en tvådimensionell och platt yta, solida färger, designelement utan 3D-djup, typografi och enkla ikoner.

Studera till exempel designutvecklingen i Apples operativ för iPhone och iPad. I den senaste versionen iOS 8 ser du inga spår av de skuggor och gradienter etc. som dominerade de tidigare versionerna. Nu är det platt som gäller i äppelriket och som Apple gör har ju vi andra en tendens att också göra…

Dekorationer och pynt får stå tillbaka till förmån för innehållet som är det viktigaste. Enkelt och utan krusiduller. Resultatet blir renare, snyggare och mer överblickbart. Dessutom går sajten betydligt snabbare att ladda och det gillar både användare och sökmotorer.

”The best design is the simplest one that works.”
– Albert Einstein

PS. Du blir inte haffad av designpolisen om du skulle smyga in en liten skugga på någon knapp. Användbarheten ska alltid vara din högsta prioritet.

2. Mer tonvikt på typografi

Typografi webbdesign

Låt typografin på din webbplats ta plats och bli en del av designen – precis som den irländska digitala byrån Kooba

Som bekant innebär typsnitt på webben idag så mycket mer än de klassiska – men ack så tråkiga – Arial, Times New Roman, Verdana, Trebuchet MS m.fl. Alltså de typsnitt som förr kallades webbsäkra, men som inte gör någon med lite känsla för det visuella glad. Som tur är har du idag betydligt större möjligheter att göra din webbplats till en typografisk fröjd för ögat, där texten står i centrum inte bara för budskapet utan också för designen.

Traditionellt har typsnittskit som gjort det möjligt att pryda sin webbplats med tjusiga typsnitt som går bortom det vanliga varit ganska dyra, vilket medfört att den som var sugen på en sajt dominerad av typografi behövt en större budget. Men det har förändrats. Idag kan du köpa billiga typsnitt, eller till och med ladda hem dem gratis i form av Google Fonts, vilket gör det möjligt för designers att oavsett storlek på plånboken skapa fantastiska typografiska verk på webben.

3. Responsiv webbdesign är inte längre ett val utan ett måste

Responsiv webbdesign

Dina besökare är värda en fulländad webbupplevelse oavsett om det surfar på sin dator eller smartphone, eller hur?

Idag surfar vi bara mer och mer med våra mobila enheter, dvs mobiltelefoner och surfplattor. Det gäller mig, och det gäller säkert dig också. Många har till och med nästan övergett datorn under sina surfäventyr. Men trots att denna utveckling är uppenbar för alla som inte bott under en sten i skogen under de senaste åren, stöter jag alltför ofta på webbplatser som inte är mobilvänliga, dvs inte använder responsiv webbdesign.

Detta är alltså ingen ny trend, den mobila revolutionen bröt som sagt ut för länge sen. Och vad det innebär är att responsiv webbdesign inte längre är ett val för företag och organisationer utan ett måste. Det är inte längre okej att utsätta dina besökare för en webbplatsupplevelse där de måste zooma och scrolla åt alla håll för att ta del av vad du har att erbjuda. 2015 kommer därför trenden – eller ska vi säga normen istället – med responsiv design bara fortsätta och kanske förhoppningsvis få med sig de sista gammeldesignskramarna. Om inte annat kanske argumentet att mobilvänlighet numera är en rankingfaktor hos Google kan bita på skeptikerna.

Själv har jag gjort det enkelt för mig själv genom att använda det responsiva WordPress-temat Divi från Elegant Themes som utan att du behöver göra något extra ser till att alla besökare blir nöjda och glada, oavsett vilken skärm de surfar på.

4. Card Design i bästa Pinterest-stil fortsätter sin frammarsch

Webbdesign card design

Med WordPress-temat Pinable från Theme Junkie kan du skapa ditt eget Pinterest

I brist på ett bra svenskt ord kallar jag det här fenomenet för dess engelska namn, Card Design. Designen är inspirerad av hur exempelvis Pinterest är uppbyggt med ”kortliknande” content-boxar som är placerade under och bredvid varandra i ett aldrig sinande flöde.

Förutom att det ser fantastiskt tjusigt ut så är card design perfekt för responsiva webbplatser eftersom korten enkelt kan placera om sig beroende vilken typ av enhet som besökaren surfar med. Och det sias om att 2015 blir Pinterests år, så kan vi räkna med att fler och fler kommer hoppa på card design-tåget.

Vill du redan nu förvandla din WordPress-sajt till ditt alldeles egna Pinterest hittar du ett gäng bra teman här. Vill du nöja dig med att ”pinterestiera” dina gallerier kan du använda pluginen POWr Photo Gallery.

5. Scrolla är det nya klicka

Webbdesign scrollning

Vill du se ett tjusigt exempel av scrollningstrenden in action ska du bege dig till Apples sajt

Jag som jobbat med att skapa webbplatser i några år minns den tid då det ofta stod väldigt högt på mina kunders önskelista att besökaren inte skulle behöva scrolla överhuvudtaget på deras nya webbplats utan navigera sig runt genom att klicka i menyerna. Scrollning betraktades som ett djävulens påfund som skulle undvikas till varje pris. Allt skulle med andra ord serveras besökarna direkt – hur mycket som än behövde rymmas på den begränsade yta som fanns att tillgå innan du tvingades att scrolla nedåt. Resultatet blev alltsomoftast en fullproppad startsida och ett överflöd av undersidor. Men vadå, inte en scrollningslist så långt ögat nådde och det var väl huvudsaken..?

Idag har vinden tack och lov vänt. Det evinnerliga klickandet som dessa scrollningfria webbplatser med alla sina undersidor förde med sig har ersatts av scrollning. Den tidigare så utskällda rullningstekniken har alltså gjort en strålande comeback och jag välkomnar den tillbaka av hela mitt hjärta.

Trenden innebär att fler och fler webbplatser numera tvingar sina användare att flytta fingret från musknappen till scrollningshjulet. Istället för att klicka sig fram genom en massa menyer kan de nu scrolla sig ner genom snygga webbplatser som ibland också är ändlösa med en ständig påfyllning av nytt innehåll allteftersom besökaren tar sig längre ner på sidan. Detta byte av klickande mot scrollande innebär många fördelar, bland annat att det blir färre sidor att ladda, smidigare övergångar mellan olika informationssektioner och större engagemang hos besökarna. Och dessa insikter har också gett upphov till de webbplatser som består av enda sida där du serveras allt innehåll på en och samma sida som du scrollar dig igenom.

Det i mitt tycke allra läckraste inom denna scrollningstrend är så kallad Parallax där bilder och andra designelement rör sig i olika hastigheter och riktningar, vilket skapar fantastiska visuella effekter (men kom ihåg att less is more – precis som med mycket annat inom webbdesign). Ta dig en titt på de här exemplen för att se vad jag menar. Och självklart har mitt favorittema Divi stöd även för Parallax.

Så 2015 hoppas jag att vi alla i kör utbrister: Tänk vad härligt att jag kan få allt presenterat på en och samma sida så att jag slipper klicka en extra gång!

6. Modulär design istället för undersidor

Modulär webbdesign

Sweden.se, Sveriges officiella sajt, har satsat på modulär webbdesign

När vi ändå är inne på det här med väldigt många sidor på en webbplats – en annan trend som kommer öka framöver är användningen av modulär design. Det innebär att du istället för att dela in ditt content i olika sidor använder dig av olika moduler på en och samma sida. Dessa moduler beter sig och interagerar med användaren på olika sätt och istället för hoppa runt från sida till sida kan man enkelt och bekvämt stanna på samma ställe och låta innehållet runt omkring sig förändras.

7. Stora och snygga bakgrundsbilder- och videor

Webbdesign stora bakgrundsbilder

Stora och snygga bakgrundsbilder och som här – bakgrundsvideor – är bara några av funktionerna i WordPress-temat Divi från Elegant Themes

En stor hit under de senaste åren – och en viktig anledning till att jag valde att bygga Online Marketing Academy med WordPress-temat Divi – är stora och snygga bakgrundsbilder som är ett av de enklaste sätten att få din webbplats att sticka ut och presentera ditt content på ett iögonfallande sätt. På senare tid har dessa bakgrundsbilder också fått sällskap av bakgrundsvideon där du kan låta en snygg video ackompanjera ditt budskap i bakgrunden och på så sätt verkligen imponera på dina besökare.

För den med sinne för det visuella är trenden med bakgrundsbilder- och videor rena rama julafton. Elegant och modernt är bara förnamnet – och möjligheterna till visuella storverk är oändliga.

 8. Spökknappar

Spökknappar

De transparenta spökknapparna är den perfekta kombon med stora bakgrundsbilder på din webbplats. Bild från webbyrån Parallax

”Spökknappar” (ghost buttons på engelska), dvs genomskinliga knappar, är ytterligare en växande trend på nätet som du kanske redan stiftat bekantskap med. Och trots det kusliga engelska namnet behöver du inte bli rädd utan de är tvärtom ett mycket trevligt och välkommet inslag på webben där vi genom åren tvingats stå ut med så många anskrämliga knappar – grälla färger, fasansfulla övertoningar och andra obehagligheter. Designpolisen borde gjort en razzia i knappvärlden för länge sedan.

Sedan dessa moderna, rektangulära och transparenta knappar som behåller bakgrunden synlig gjorde entré, har de alltmer tagit över exempelvis landningssidor och WordPress-teman som bygger på stora bakgrundsbilder (se punkt 7). Anledningen är inte svår att förstå; det är ju så vansinnigt snyggt. Och som grädde på moset kan du dessutom lägga till en diskret och tjusig hover-effekt när man för musen över knappen.

Räkna med att de genomskinliga knapparna kommer fortsätta spöka under 2015.

9. Interaktiv storytelling

Interaktiv storytelling

Olympic Story är ett riktigt praktexemplar inom interaktiv storytelling – med bilder, grafik, video, text och ljud i ljuv kombination

Storytelling är verkligen ingenting nytt utan något som funnits med oss sedan urminnes tider då vi satt runt lägerelden i grottan och berättade historier för varandra. Ingen trend således – men denna urgamla konstform har fått ett uppsving på senaste år och blivit en het potatis inom marknadsföringen.

Bra storytelling är nämligen lika med storyselling. Med andra ord kan den som är en skicklig berättare skratta hela vägen till banken.

Kanske tänker du på text när jag pratar om att berätta ditt företags story? Då är du säkerligen inte ensam. Men tänk ett steg till – varför inte använda alla din webbplats möjligheter för din storytelling? Förutom text kan du använda bilder, bakgrunder, grafik (gör den rörlig vetja) och video för att ta med dina besökare på en spännande resa som väcker deras känslor, slår dem med häpnad och får dem att stå på kö för att köpa dina produkter eller tjänster. Och du som är riktigt djärv kan också slänga in ljud i din webbplats storytellingmix.

Och var inte orolig – att jag uppmuntrar dig att bli en storytellingmästare betyder inte att din webbplats ska förvandlas till en fablernas värld eller sagostund. Det betyder att du berättar om ditt varumärke – vem du är, vad du står för och varför du gör vad du gör. Låt företagets värden – kreativitet, enkelhet, kvalitet, innovation etc. – lysa igenom i alltifrån webbcopy och sidlayouter till ikoner och typsnitt så att de tillsammans bildar en stark story som förmedlar dessa värden.

Det må vara lättare sagt en gjort att förvandla sin sajt till en berättelsemaskin, men du som använder WordPress och tänker att det här med storytelling verkar smart ska ta dig en titt på Aesop Story Engine, en plugin som du kan använda för att berätta företagets story med hjälp av 13 olika moduler. Och går du in för detta helhjärtat kommer du få lön för mödan, tro mig. Människor älskar – och har alltid älskat – starka berättelser.

10. Personifierat användargränssnitt

Personifierat användargränssnitt

Fler och fler gör som Netflix och serverar dig skräddarsydda förslag

Tittar du på Netflix? Då har du nog märkt att tjänsten ganska omgående började ge förslag på filmer och serier som skulle tänkas falla just dig i smaken. Personlig anpassning alltså (även om man ibland kan tro att tjänsten är fullständigt från vettet i sina förslag…).

Idén med att individanpassa användargränssnitt genom att visa ytterligare relevant innehåll för besökare är inte ny. Hemligheten heter cookies. Netflix använder det för att minnas vad du tittat på. Detsamma gäller YouTube. Webbutiker som till exempel Amazon ger dig personliga förslag utifrån vilka produkter du köpt eller tittat på och på nyhetssajter blir rekommenderad ytterligare artiklar som sajten tror kan intressera dig. Allt det här känner du igen.

Men på senare tid har konceptet fortsatt att spridas alltmer. Allas vårt hatobjekt popups kan till exempel göras mer sofistikerat så att återkommande besökare slipper se den varje gång de kommer till en webbplats. Tips på artiklar som du redan läst kan döljas för att göra plats för nya och olästa. Möjligheterna är oändliga och människor gillar som bekant att känna sig speciella så vi kommer garanterat att se mer av detta.

11. Dolda menyer även utanför mobilvärlden

Dolda menyer

Menyikonen ”hamburgaren” hjälper dig att spara plats på skärmen. Bild från Curadmir.

Du som är en van mobilsurfare och användare av appar är sedan länge bekant med den ikon (ibland kallad hamburgerikonen) bestående av tre små streck placerade under varandra som symboliserar att det finns en dold meny du kan expandera och som då liksom flyger in på skärmen. Denna såväl älskade som hatade ikon har än så länge varit i princip reserverad för de versioner av webbplatsen som visas på surfplattor och smartphones, men nu börjar den även dyka upp på datorversionen.

Den utveckling som sker på webben med appar och annat har gett webbutvecklare behov av att spara plats på skärmen och då kommer den dolda menyn som flyger in vid behov väl till pass. Så oavsett vad du tycker om ”hamburgaren” så är det lika bra att du vänjer vid den – den är här för att stanna och kommer att bli din klickkompis framöver.

Summa summarum

För att sammanfatta det hela kan man säga att det som var webbtrendigt 2o14 fortsätter att vara webbtrendigt under 2015. Under förra året gjordes stora framsteg när det gäller att få stil på webbdesignsvärlden som i mitt tycke inte riktigt hade hittat hem innan dess.

Många välkomna trender blossade upp eller blommade ut ordentligt, och i min spåkula ser jag att dessa kommer fortsätta sina segertåg under 2015. Vissa kommer mogna till naturliga självklarheter (jag tänker framför allt på responsiva webbplatser) medan andra trender inte kommer ligga i toppen på måste-ha-listan utan mer betraktas som trevliga prickar över i:n. Något som ger extra piff men som man kan överleva utan.

Men oavsett om du tänker hoppa på någon av trenderna eller inte så går det inte längre att negligera designens del i en webbupplevelse. Även om du är en gudabenådad skribent och ser tangentbordets 29 bokstäver som ditt vassaste vapen så behöver dina enastående texter en snygg kostym om du ska maximera dina möjligheter att nå ut till så många som möjligt. Det är det visuella som människor ser först när de landar på din hemsida och gör du inte ett starkt intryck där så riskerar du att tappa besökaren innan han eller hon ens läst dina budskap.

Och det vore väl ytterst onödigt.

Så låt oss ta i hand på att vi tillsammans skapar ett snyggare internet 2015!

Charlotta Wortzelius


Dagens marknadsföringslärdom

Du får aldrig en andra chans att göra ett första intryck, och eftersom det är din webbdesign som människor ser först på din webbplats så är det, om du inte redan gjort det, dags att ge den platsen den förtjänar.

Om skribenten Charlotta Wortzelius

Charlotta Wortzelius är grundare av Online Marketing Academy och en hängiven copywriter och internetmarknadsförare som brinner för att hjälpa företag att lyckas med sin närvaro på nätet.

Följ mig:

Gör din röst hörd:

2 kommentarer
Monika säger 8 juni 2015

Hej
Super tack för tipsen. Jag undrar dock vilka web redigeringsprogram som är bäst att använda (typen WYSIWYG) idag? Har använt frontoffice 2003 som jag varit nöjd med länge men det verkar fruktansvärt omodernt. Har ekonomi att köpa något rejälare, vad skulle du rekommendera? Jag är ingen HTML hackare :-) dock.

Svara
    Charlotta Wortzelius säger 9 juni 2015

    Hej Monika!
    Vad kul att du gillade tipsen. Med webbredigeringsprogram antar jag att du syftar på publiceringsverktyg för webben där du enkelt kan skapa och uppdatera din webbplats. I så fall rekommenderar jag WordPress som jag är helt såld på och använder till alla mina webbplatser. I mitt tycke har det otroligt många möjligheter med teman och plugins – dessutom är det gratis.

    Svara
Svara

Popular posts

Pin It on Pinterest

Share This