Designtrends til hjemmesider 2014

Dato: 14.01.2015

7 tendenser i webdesign du bør holde øje med i 2015

Standarden for godt webdesign ændrer sig hele tiden i takt med internetbrugernes skiftende adfærdsmønstre og præferencer for brugen af hjemmesider. Derudover giver den teknologiske udvikling (med fx HTML5 og CSS3) løbende webdesignere muligheden for at skabe mere avancerede, interessante og flotte effekter med hjemmesidedesign, som helt naturligt også præger de designtendenser, vi ser udfolde sig.

Det kan være svært at spå præcis hvad fremtiden bringer, men der er allerede nu nogle klare tendenser, som vi kan forudsige kommer til at dominere hjemmesidedesignet i 2015.

1. Fladt simpelt design fortsætter


Vi har tidligere nævnt fladt design som en stor trend i 2014, og meget tyder på, at det kun bliver større i 2015. Hvorfor? For det første fordi fladt design fungerer efter nogle minimalistiske principper, som sørger for at fjerne unødvendige designelementer, der forstyrrer forståelsen for hjemmesidens indhold. Det betyder at hjemmesiden fremstår mindre støjende og mere indholdsfokuseret og brugervenlig.

For det andet er fladt design meget lettere for en webserver at levere til de forskellige devices hjemmesiden kan tilgås fra, fx smartphones og tablets. Det betyder at det for brugerne er hurtigere at loade hjemmesiden og lettere at finde det, de søger. Med andre ord er fladt design et perfekt match mellem design og funktion. Hvis du vil have fladt design til din hjemmeside, anbefaler vi at du bruger D4 design.

Et eksempel på udviklingen indenfor fladt design er Google's Material design, som Google bruger til sine mobilapps og i mindre grad i elementer af Chrome browseren. Herunder finder du andre eksempler på hjemmesider, som bruger fladt design (og også mange andre af de trends, vi kommer ind på i denne artikel).

2. "Ghost buttons"


I løbet af 2014 opstod tendensen "Ghost Buttons", som er blevet meget populær i kølvandet på fladt design og brugen af store baggrundsbilleder (se afsnit 5 længere nede), og som helt sikkert også vil dominere webdesign i 2015. En ghost button er en transparent og tom knap, som har en enkelt form, fx rektangulær eller kvadratisk. Omkredsen af knappen markeres med en meget tynd linje, hvor selve knappens indhold består af ren tekst på en transparent baggrund (deraf navnet "Ghost" eller spøgelse). Til trods for at knapperne er transparente, fanger de dog nemt øjet med deres elegante og minimalistiske look.

Den store fordel ved ghost buttons vil for især grafik- og billedtunge hjemmesider være, at de modsat almindelige farverige knapper meget nemt kan placeres oven på et billede eller en video, uden at fjerne fokus fra indholdet eller skabe farveforvirring. De gør det altså meget nemt at tilføje call-to-action (CTA) på hjemmesiden uden at forstyrre designet.

Se nogle eksempler på brugen af ghost buttons på hjemmesider herunder fra Campus BubbleHARBR og Badington House  eller besøg denne Tublr blog som lader til at have uendeligt mange eksempler.

3. Parallax scrolling og lange sider


En af de helt store tendenser i 2015 lader til at blive scrolling og ofte på længere sider med facinerende parallax-effekter, som giver overraskende og imponerende visuelle oplevelser for den besøgende.

Scolling har i mange år været sat ud i kulden til fordel for relativt korte sider, der kræver minimal scrolling fra den besøgende på en computer. Men da det private brug af smartphones og tablets begyndte at boome for få år tilbage, begyndte scrolling langsomt at genvinde popularitet. Det var fordi brugerne vænnede sig til at scrolle løs på nettet og i forskellige apps via de mobile enheder, og derfor også vænnede sig til at scrolle løs, når de var på nettet fra computeren. Hjemmesider med scrolling er derfor gradvist blevet mere populære end hjemmesider med dybe komplicerede menustrukturer, som er besværlige at bruge fra mobile enheder.

Scrolling kræver færre kliks fra den besøgende, hvilket gør det mindre krævende at bruge hjemmesiden. Derudover kræver enkelte lange sider mindre loadingtid for hjemmesiden end mange små undersider, og det gør det lettere at opdele den enkelte sides design fra afsnit til afsnit uden at skulle afbryde informationsflowet for læseren. Det har medført, at hjemmesider som består af enkelte lange sider (One-pager eller single-page hjemmesider) hurtigt blev meget populære i 2014. Dog mistede one-pagers hurtigt lidt af sin popularitet i løbet af året, fordi der er grænser for hvor langt en besøgende gider at scrolle på en side for at finde en bestemt information. Så husk at det er okay at have lange sider på din hjemmeside - men kun hvis det er nemt for brugeren at finde det, vedkommende søger, og at designet følger med sidens indhold hele vejen ned!

Med scrolling på vej tilbage har parallax scrolling også vundet mange webdesigneres hjerter. Parallax scrolling er en særlig scrolling-effekt, som oprindeligt blev udviklet til computerspil, hvor baggrunden bevæger sig langsommere end forgrunden, når man scroller. Det skaber en fascinerende 3D effekt, når man bevæger sig op og ned ad siden, og det er helt sikkert også en effekt vi kommer til at se meget mere af til hjemmesider i 2015. Hjemmesider som har parallax scrolling effekter har vist sig at forbedre engagementet på hjemmesiden med op til 70%, hvilket dels kan forklares af de flotte visuelle og meget underholdende effekter, scrollingen skaber. Et eksempel på parallax scrolling (og ghost buttons) er Grey Goose og These Are Things, som du også finder et eksempel på under dette afsnit. Se flere gode eksempler på parallax scrolling hos Creative Bloq.

Grey Goose eksempel på parallax scrolling These Are Things

4. Responsive design - Alt eller intet


I 2014 blev muligheden for at oprette responsive hjemmeside muligt med mono, da tendensen allerede dér var hastigt voksende, og nu er responsive design efterhånden blev en forventning hos den almindelige bruger. I 2015 er responsive design derfor et absolut must, hvis du vil undgå høje bouncerater fra mobile brugere, lave klikrater og en dalende konkurrenceevne for din forretning. Hvis din hjemmeside ikke kan tilpasses forskellige skærmstørrelser, så er den fastlåst i fortidens webdesign!

Hjemmesider som ikke er responsive kræver for meget arbejde fra brugerens side, som hele tiden må zoome ind og ud og bruge mange kliks på at bevæge sig frem, tilbage, op og ned på siden, og det får hurtigt de besøgende til at forlade siden. Sidste år var responsive design en fantastisk nyhed, i 2015 er det et absolut must.

Responsive design med mono.net

5. Store billeder og visuelle baggrunde


For blot få år siden var det en gylden regel at holde størrelsen på hjemmesidens billeder til en begrænset størrelse fordi internethastigheden var begrænset, så hjemmesider med store billeder tog alt for lang tid at loade og derfor ødelagde brugeroplevelsen. Internethastigheden (bandwidth) for især private er dog eksploderet de seneste par år, hvilket har betydet, at det ikke længere er et problem at bruge store billeder og grafikker på hjemmesiden. Det har mange designere været glade for, fordi det udvider mulighederne for at være kreativ og skabe fantastisk indbydende hjemmesider med et mere æstetisk visuelt look.

Det betyder også, at vi i højere grad vil se store baggrundsbilleder, hvor forskellige typer af filtre og overlays vil tillade tekst, knapper og andre elementer at blive placeret oven på baggrunden uden at forstyre brugervenligheden og overblikket for den besøgende. I forlængelse af den voksende popularitet for scrolling giver det også rigtig god mening at bruge store billeder til at skabe sammenhæng og storytelling ned langs de lange sider.
 

TIP!
Hvis du gerne vil bruge store billeder på din hjemmeside, anbefaler vi at du bruger nogle af de mange fuldbreddemoduler, som er optimeret til responsive design og gør det nemt at gøre hjemmesidens design unikt. Herunder kan du se et par eksempler på mono-hjemmesider som gør brug af fuldbreddebilledmoduler. Bemærk hvordan billederne i sig selv hjælper dig til at forstå hjemmesidens indhold og formål.

6. Video, video... video!


Hvis et billede siger mere end tusind ord, hvad siger en video så? En hel del hvis man kigger på den hastigt voksende tendens for brugen af video på hjemmesider, som er fortsat fra 2014. Noget der især vil præge 2015 er brugen af video som baggrund på hjemmesiden. Og i kombination med scrolling, ghost buttons og responsive design, kan dette skabe fantastiske indlevende effekter, som engagerer den besøgende i langt højere grad.

Video er en fantastisk måde at formidle viden, som er let for den besøgende at forstå. Det giver en bedre forståelse for og indlevelse i virksomhedens formål, services og produkter. Vi har tidligere talt om fordelene ved at have video på din hjemmeside, og i blogpostet Lær at bruge video på din hjemmeside kan du blive klogere på hvordan du gør, og hvis du har mod på at lave dine egne videoer kan du her få gode råd fra eksperterne. Se nogle eksempler på hjemmesider, der gør god brug af videobaggrund:

TILBUD PÅ VIDEO
Vil du gerne have video på din hjemmeside? Vores Mono Apps partner Doxafilm giver gratis sparring og 10% rabat på at producere en professionel video til din hjemmeside. Læs mere om Doxafilm og deres tilbud her.

7. Forskellige fleksible typografier


Et fokus på typografi vil helt sikkert stjæle fokus i løbet af 2015. Det er nemlig ikke kun billeder der bliver større og vildere, det gør teksten også! 

Selv om billeder og video kan sige meget uden ord, er der alligevel et stort behov for tekstformidling på din hjemmeside (både i forhold til forståelse af hjemmesidens formål, men også SEO), hvilket ikke bør komme som en overraskelse. Og den nye designtendens lyder nu på i højere grad at udnytte hjemmesidens tekst til også at blive et stort grafisk element i hjemmesidens design. 

 

TIP!
Hvis du vil lege lidt med at få store typografier på din hjemmeside hos mono.net anbefaler vi at du bruger Display-modulet til at skabe farverige tekster i forskellige størrelser. Du kan evt. kombinere modulet med et stort baggrundsbillede således at Display-teksten ligger oven på billedet. Du kan her placere gennemsigtige mellemrumsmoduler rundt om display-teksten, hvis du ønsker kun at vise baggrundsbilledet med Display-teksten i et udvalgt område (fx den øverste del af siden som er det første en besøgende ser når han kommer ind på siden). 

Hvis du har forstand på CSS-kodning og gerne vil skifte fonten på din hjemmeside ud, kan du på mono Academy's CSS bibliotek finde en guide til, hvordan du gør trin-for-trin.

Se forskellige eksempler på hvordan man kreativt kan bruge forskellige typografier som en del af hjemmesidens design hos awwwards.com eller i galleriet herunder.

Kilder og ressourcer


Har du et bud på hvad der bliver trendy i 2015?


Har du observeret en ny eller blivende tendens i hjemmesidedesign, som vi ikke har nævnt i denne artikel? Så er du velkommen til at byde ind i kommentarfeltet herunder!

3 kommentar(er)

Skriv gerne en kommentar eller et spørgsmål - Klik her!

2016.05.03 Skrevet af Smithd635
Nice read, I just passed this onto a friend who was doing some research on that. And he just bought me lunch since I found it for him smile So let me rephrase that Thank you for lunch! Whenever you have an efficient government you have a dictatorship. by Harry S Truman. akgakaekabfbdcdg
2015.03.19 Skrevet af Mono
Hej Jens!

Tak for din kommentar. Det er godt at høre at artiklen kan bruges :-) Vi er meget enige i din kommentar omkring Google's algoritmeændringer - vi har derfor skrevet et helt seperat blogpost om nyheden for at gå i dybden med ændringernes betydning for hjemmesideejere, som du kan læse her: http://www.mono.net/google-kraever-responsive-design-2015-03-12

Rigtig god dag til dig!

// Mono
2015.03.19 Skrevet af Jens Peter Nielsen
Super god artikel - hos http://www.siterex.com bruger vi den jævnligt til at udfordre vores kunder. Måske et bud på opdatering her: Google lægger fra d. 21/4 2015 sin algoritme om og vil nu lægge mærkbar vægt på mobilvenligheden af din hjemmeside. Test din hjemmesides mobilvenlighed her: https://www.google.com/webmasters/tools/mobile-friendly/

Mvh
Jens Peter Nielsen
CEO
SITEREX