Trender att hålla koll på under 2014.

av: Matilda B

Webbdesign är ett område som ständigt förändras. Nya krav från användarna tillsammans med den snabba tekniska utvecklingen gör att trender inom detta området sällan är permanenta. Det som upplevdes som nytänkande och inspirerande för två år sen behöver inte vara det idag. Även om trender inom webbdesign (precis som trender inom andra områden) inte är något man måste/bör följa slaviskt, kan det ändå vara bra att vara insatt i vilken riktning webben är påväg för att på så vis kunna skapa moderna, konkurrenskraftiga hemsidor som optimerats för såväl användare som ny teknik.

Här har jag sammanställt en lista över de trender som av flera tidningar och bloggar anses vara som kommer att slå störst under 2014 och som jag tänkte skriva lite mer om.

1. Flat Design

en-EMEA_L_Win_8_3ZR-00005_RM1_mnco

Flat design var en av de största trenderna under 2013 och förutspås vara en fortsatt stark trend under 2014. Det påbörjades med Microsoft produkter och framför allt Windows 8. Flat design innebär till största delen att man undviker att använda överflödig dekoration som exempelvis skuggor, texturer, överdrivna färgövergångar och 3D-effekter. Man fokuserar istället på typografi, layout samt användning av form och färger. Tanken är att skapa en design i två dimensioner, utan att förlora den funktionalitet som ett “vanligt” gränssnitt innebär (Pratas, 2013). Trenden baseras på minimalism och funktionell design och en av anledningarna till att den är så populär är att den fungerar väldigt bra på alla plattformar och hemsidor som är gjorda med flat design behöver därför inte designas om för specifika plattformar som mobiltelefoner eller läsplattor.

Flat design – An in-depth look
http://www.awwwards.com/flat-design-an-in-depth-look.html
Antonio Pratas beskriver i denna artikel vad flat design är för något och hur det blev så stort på webben. Han går även igenom hur man som designer kan komma igång med flat design.

Fltdsgn
http://fltdsgn.com/
Inspirationssida där mängder av hemsidor skapade med flat design finns att hitta.

2. Nya och annorlunda typsnitt

wwwminoncomtren-full

Då vi inte längre är begränsade till ett fåtal typsnitt som fungerar i de olika webbläsarna har mängder av nya fonter och tjänster där du kan ta del av dom kommit. Numera kan man använda i princip vilket typsnitt som helst på webbplatser utan att de moderna webbläsare får problem. 2014 tros bli ett spännande år när det gäller nya kommande typsnitt. Man ser även oftare att designers använder sig av “personliga typsnitt” för att uttrycka sin egen stil (Turner, 2013:2).

Webfonts Gallery
http://www.webfontsgallery.com/
På webfonts gallery har man samlat massor av webbsidor som använder sig av typografi på ett extra kreativt sätt. Perfekt för inspiration!

Font Squirrel
http://www.fontsquirrel.com/
Här finns en mängd fonter samlade, samtliga är gratis och fria att använda både privat och kommersiellt.

Google Fonts
http://www.google.com/fonts
Om någon mot förmodan skulle ha missat Google fonts vill jag tipsa om denna sida som ger tillgång till hundratas olika typsnitt som är optimerade för webben och dessutom är supersmidiga att använda.

3. Långa, scrollbara sidor

scroll17

Vi har blivit allt bekvämare med att scrolla genom webbsidor för att ta del av mer information vilket flera webbdesigners har lärt sig att dra nytta av. Långa scrollbara sidor i sig är inget nytt fenomen men till skillnad från förr då man ofta stötte på långa sidor fullspäckade med innehåll går trenden nu snarare åt att lämna mycket luft kring elementen på en sida och på så vis presentera innehållet på ett mer organiserat, enklare sätt (Asgerally, 2012)

Trends in webdesign: Long scrolling pages and sticky navigation
http://www.usability101.net/2012/06/trends-long-scrolling-pages-and-sticky-navigation/
Yusuf Asgerally tar i denna artikel kortfattat upp hur man kan tänka kring en lång, scrollbar sida. Bland annat skriver han om vikten av en fungerande navigation och om hur man på ett lättförståeligt sätt presenterar innehållet.

18 websites that take scrolling to the next level http://webdesignledger.com/inspiration/18-websites-that-take-scrolling-to-the-next-level
Här presenteras 18 sidor som tagit scrollfunktionen ytterligare ett steg.

 4. Enkla färgscheman

Screen-Shot-2013-12-16-at-6.17.39-PM

Under 2014 kommer det bli allt vanligare att använda sig av ett enkelt färgschema, där man håller sig till endast en eller två olika färger. En ny trend är att använda en ljus och ren bakgrundsfärg och sedan endast svarta och vita element ovanpå. Effekten är minimalistisk och användarvänlig och gör sig dessutom bra på mindre skärmar (Taheri, 2014). Pantone har utsett orkidélila till årets färg, men åsikterna bland webbdesigners när det gäller hur välanvänd den kommer att vara verkar vara delade.

Här kan du se årets färg:
http://www.pantone.com/pages/index.aspx?pg=21133&from=hpbanner

5. Att utnyttja sin “Hero Area”

Screen-Shot-2013-12-16-at-5.37.42-PM-520x330

Hero Area kallas den sektion av hemsidan som är den första som man som besökare stöter på. Tidigare har det varit vanligt att utnyttja detta utrymme med någon typ av bildspel som ofta presenterar andra delar av sidan som man vill lyfta fram. Nu ser man allt oftare sidor som istället med hjälp av några få, stora element använder detta uttrymme för att ge en stilren och tydlig introduktion till vad deras verksamhet ägnar sig åt (Hoag, 2013).

6. Video istället för text

video-instead-of-text1-1024x774

Att byta ut en del av textinnehållet på en sida mot en video blir allt mer populärt på webben, särskilt på sidans “Hero Area”. Videos blir allt enklare att producera och gör ofta en hemsida mer dynamisk (Hoag, 2013). Många gånger underlättar det också för besökaren att förstå någonting som annars skulle behöva skrivas ut i långa textstycken (Turner, 2013). Viktigt att tänka på är att man inte använder för tunga filer, då detta kan göra att sidan tar för lång tid att ladda.

7. Responsiv webbdesign

fd884e2753b0e64260ddc485b32925e2(1)

Responsiv webbdesign är vid det här laget inget nytt koncept, däremot bör det inte längre ses som ett valbart alternativ som vissa hemsidor har utan snarare som en standard (Bacic, 2014). Flera av de trender som jag redan tagit upp, som exempelvis flat design och långa, scrollbara sidor är optimerade för att passa på mindre enheter. Det blir allt populärare att designa med ett s.k. “mobile-first”-tänk, det vill säga att man istället för att utgå ifrån en datorskärm när man skapar sin design istället börjar med att göra en design som anpassats för en mobil och sen succesivt utökar denna till större plattformar (Johnson, 2013). Man bör inte vara rädd för att plocka bort och/eller lägga till element på sidan baserat skärmstorlek och enhetstyp. Det handlar inte bara om att ändra bredden och storleken på layouten, utan snarare om att optimera sidan på alla tänkbara sätt för olika enheter och skärmstorlekar för att förbättra användarupplevelsen så mycket som möjlig (Bacic, 2014).

Mitt arbete om responsiv webbutveckling:
http://media.hv.se/kurser/vfu1/responsiv-webbutveckling/

 Källförteckning:

Bacic, Haris (2014). 3 Major Web Design Trends For 2014. [Elektronisk] Tillgänglig: http://www.forbes.com/sites/allbusiness/2014/01/14/3-major-web-design-trends-for-2014/2/ [2014-01-23]

Hoag, Steven (2013). 2014 – Three web design trends to watch. [Elektronisk] Tillgänglig: http://www.fasttrackteam.com/2014-three-web-design-trends-to-watch.aspx [2014-01-23]

Johnson, Joshua (2013). Mobile First Design: Why It’s Great and Why It Sucks. [Elektronisk]. Tillgänlig: http://designshack.net/articles/css/mobilefirst/  [2014-01-21]

Pratas, Antonio (2013). Flat Design – An in-depth look [Elektronisk]. Tillgänglig: http://www.awwwards.com/flat-design-an-in-depth-look.html [2014-01-20]

Taheri, Maryam (2014). Web design trends for 2014 [Elektronisk]. Tillgänlig: http://webdesignledger.com/trends-2/web-design-trends-for-2014 [2014-01-22]

Turner, Amber (2013). 10 web design trends you can expect to see in 2014. [Elektronisk] Tillgänglig:http://thenextweb.com/dd/2013/12/29/10-web-design-trends-can-expect-see-2014/1/ [2014-01-21]

 

Leave a Reply

Your email address will not be published. Required fields are marked *