(c) PublicDomainPictures@Pixabay

Webdesign Trends 2016

Die Web­de­sign Trends wer­den auch in 2016 geprägt sein von einem Mega-Trend, der sich ste­tig wei­ter ent­wi­ckelt – bei den Gerä­ten und im Para­dig­ma: der gro­ße Trend zu immer klei­ne­ren Inter­net-taug­li­chen Gerä­ten. So sind wir in 2015 mit der Lan­cie­rung der Apple Watch nun bei den Weara­bles ange­kom­men: Arm­band­uh­ren mit Dis­play, die wie ein Smart­pho­ne ein Betriebs­sys­tem und diver­se Apps haben. Die Ära des Ubi­qui­tous Com­pu­ting dage­gen steht noch ziem­lich am Anfang. Aber der Rei­he nach:

Respon­si­ve Web­de­sign – evol­ved

Die Her­stel­ler haben mitt­ler­wei­le vie­le hun­dert ver­schie­de­ne inter­net­taug­li­che Gerä­te­mo­del­le pro­du­ziert. Seit­dem wer­den immer mehr Web­sites einem Rede­sign unter­zo­gen. Auch für Con­tent Manage­ment Sys­te­me und Web-Bau­käs­ten gibt es eine Viel­zahl von Tem­pla­tes, die neu­er­dings zum über­wie­gen­den Teil auch respon­si­ve sind. Damit ist Respon­si­ve Design mitt­ler­wei­le Stan­dard.

Obwohl es für die ganz klei­nen Bild­schir­me der Smart Wat­ches auch Web­brow­ser gibt, dürf­te eine nor­ma­le Web­site dar­auf wohl kaum zu lesen sein – wohl eher eine Anwen­dung für Häupt­ling Adler­au­ge. So bleibt auf die­sen klei­nen Dis­plays nur Platz für eigens dafür gestal­te­te Apps.

Auf der ande­ren Sei­te der Ska­la hat der Web­de­si­gner und Web­sei­ten­be­trei­ber schon eher eine Her­aus­for­de­rung. Der Trend geht bei den grö­ße­ren Gerä­ten – von Smart­pho­nes über Tablets und Note­books bis zu den gro­ßen 27-Zoll-Bill­dschir­men zu hoch­auf­lö­sen­dem Dis­play, sog. HiD­PI. 2012 lan­cier­te Apple sein Reti­na dis­play, wur­de aber schon kurz danach bei den Auf­lö­sun­gen über­holt von der Win­dows-Kon­kur­renz, z. B. mit dem Toshi­ba P50T-B Note­book, das ein 15,6-Zoll-Display mit einer Auf­lö­sung von 3840 x 2160 dpi hat.

Flat Design wird zu Mate­ri­al Design

Nach­dem Flat Design am Anfang eine Revo­lu­ti­on gegen den Skeoumor­phis­mus war, ent­wi­ckelt es sich nun evo­lu­tio­när wei­ter. Goog­le hat einen umfang­rei­chen Sty­leGui­de vor­ge­legt, wie es umge­setzt wer­den soll­te und nennt es Mate­ri­al Design. Mit drei Grund­prin­zi­pi­en folgt es einem prag­ma­ti­schen Rea­lis­mus: „Mate­rie ist die Meta­pher“. So sol­len Schat­ten rea­lis­tisch sein und Bewe­gungs­ani­ma­ti­on eine Bedeu­tung ver­mit­teln. Man spricht auch von „almost flat“ oder Flat 2.0, das lan­ge Schat­ten, mehr Far­ben ent­hält und nicht mehr ganz so kon­se­quent flat ist, aber noch gut zum Mini­ma­lis­mus passt, und so auch bes­ser mit dem Respon­si­ve Design ver­ein­bar sei.

In naher Zukunft ist zu erwar­ten, dass sich Flat Design im Zusam­men­spiel mit Ani­ma­tio­nen und Par­al­lax Scrol­ling zu einem „hap­py medi­um“ ent­wickeln und in Kom­bi­na­ti­on mit pro­mi­nen­ten Bil­dern aus der Skeoumor­phis­mus-Gegen­be­we­gung zu einem eige­nen Stil eman­zi­pie­ren wird. Auch wenn es für kri­ti­sche Mini­ma­lis­ten den Anschein erweckt, dass Mate­ri­al Design der ers­te Schritt wie­der in Rich­tung Skeoumor­phis­mus ist, so stellt doch die Dar­stel­lung der Z-Ach­se mit Hil­fe von Schat­ten eine Not­wen­dig­keit zur Visua­li­sie­rung auf engem Raum dar.

Card Design

carddesignNach­dem 2014 erst­mals die mobi­le Inter­net­nut­zung die der Desk­top Com­pu­ter über­trof­fen hat, wur­de Card Design wich­ti­ger denn je. Die Cards sind im Pin-, Mason­ry- (Mau­er), oder Maga­zin-Style und haben den Vor­teil, dass sie auf allen Gerä­ten funk­tio­nie­ren und intui­tiv rich­tig ver­stan­den wer­den. Man kann sie auch tei­len, ins­be­son­de­re in Sozia­len Medi­en, und man kann sie auf fast jeden Stil anwen­den bzw. anpas­sen. Aller­dings funk­tio­niert das Card Design nicht auf jeder Web­site. Vor­al­lem ist es schwie­rig, sie so zu gestal­ten, dass sie ori­gi­nell sind und gleich­zei­tig eine leich­te Anmu­tung haben.

Pro­li­fe­ra­ti­on von UI Mus­tern

Die wucher­ar­ti­ge Ver­meh­rung von User Inter­face Mus­tern bezeich­net einen Trend, die scha­blo­nen­ar­ti­gen Vor­la­gen der Gestal­tung (sog. Tem­pla­tes) von weit ver­brei­te­ten Con­tent Manage­ment und Blog Sys­te­men zu ver­wen­den und nur leicht an eige­ne Bedürf­nis­se anzu­pas­sen. Dadurch sehen vie­le Web­sites sehr ähn­lich aus, was bei einem Word­Press-Anteil von 60 Pro­zent aller CMS-gestütz­ten Web­sites nicht ver­wun­der­lich ist. Die­se Ent­wick­lung hat aber auch den Vor­teil, dass sich dadurch Stan­dards bes­ser und schnel­ler eta­blie­ren kön­nen. So ist z. B. das Ham­bur­ger Menu Sym­bol weit­läu­fig bekannt und erspart auf klei­nen Dis­plays das Wort „Menü“.

Ori­gi­na­li­tät

Gegen das Ver­ges­sen in der gro­ßen Ton­ne der Ein­heits­brei-Web­sites kann man sich nur stem­men, wenn man ori­gi­nel­ler als der Wett­be­wer­ber ist. Ver­ein­zelt fin­det man schon län­ger Web­sites, die aus einer Kom­bi­na­ti­on von Hand­zeich­nung und Ani­ma­ti­on bestehen. Bei­spie­le: Mint­de­sign­com­pa­ny.

Dra­ma­ti­sche Typo­gra­fie

Die Zei­ten von Hel­ve­ti­ca, Ari­al und Times New Roman sind längst vor­bei. Eine gro­ße Anzahl von frei ver­füg­ba­ren Web­fonts sorgt für mehr Indi­vi­dua­li­tät. Mit­tels neu­er Stan­dards wer­den sie extrem ver­grö­ßert, ani­mie­ren und gedreht. Ein paar Fonts wie z. B. Robo­to oder Open Sans haben zwar die Nase vorn, aber hier wird man dem­nächst sicher­lich immer mehr Indi­vi­dua­li­tät sehen. Es wird span­nend – hof­fent­lich ohne töd­li­ches Ende.

Immer­si­ve (umfas­sen­de) Inter­ac­tio­nen

Ani­ma­tio­nen wer­den des­halb zuneh­men, da sie den Nut­zer fes­seln, aber in der Kom­bi­na­ti­on mit Inter­ak­ti­on sind sie unschlag­bar. Umge­kehrt ist die Inter­ak­ti­on ein­fach inter­es­san­ter, wenn sie von einer anspre­chen­den Ani­ma­ti­on beglei­tet wird. Mit moderns­ten Tech­no­lo­gi­en (HTML5, CSS3) erge­ben sich hier neue Mög­lich­kei­ten. Wäh­rend man frü­her gern eine Navi­ga­ti­on ani­mier­te, sieht man dar­in mehr eine Spie­le­rei, wäh­rend eine ange­neh­me Ani­ma­ti­on die Inter­ak­ti­on auf ange­neh­me Art unter­stüt­zen soll. So kann der Hea­der beim Scrol­len flüs­sig – ohne zu ruckeln oder sprin­gen – ver­klei­nert wer­den und damit Platz für den Inhalt frei­ge­ben. Sol­che Über­gän­ge (“Tran­si­ti­ons”) ver­bin­den die ani­mier­ten Effek­te mit­ein­an­der und las­sen die Nut­zung leich­ter wir­ken. Auch ani­mier­te Web­gra­fi­ken unter­stüt­zen den Nut­zer, kom­pli­zier­te Sach­ver­hal­te schnel­ler zu erfas­sen, z. B. Sta­tis­ti­ken – wie Info­gra­fi­ken in Zeit­schrif­ten. (Bei­spie­le psd2html, Gaé­tan Paut­lerHUMAAN) Web­links: TNW.

Micro­in­ter­ak­tio­nen

Dazu gehö­ren auch die klei­nen Apps, die für zusätz­li­che Funk­tio­na­li­tät sor­gen, z. B. ein Chat-Modul am unte­ren Rand, ein Log­in-For­mu­lar oben rechts, Soci­al Media But­tons, Wer­bung. Die­se fle­xi­blen Hel­fer sind leicht zu imple­men­tie­ren und ver­brei­ten sich daher recht schnell.

Pla­ka­ti­ve Gestal­tung

Mit leb­haf­ten Far­ben, fes­seln­der Foto­gra­fie, bild­schirm­fül­len­den Hin­ter­grün­den, besag­ter “dra­ma­ti­scher” Typo­gra­fie und beson­de­rer Gra­fik nutzt man zuneh­mend den gesam­ten Raum, um die vol­le Auf­merk­sam­keit zu erlan­gen. Dies ent­spricht den Ent­wick­lun­gen in ande­ren Medi­en wie Film, Fern­se­hen, Pla­ka­ten etc. Ein Bei­spiel für beson­de­re Gra­fik sind zur­zeit Low poly. Die­se Poly­gon­net­ze sind zur­zeit recht beliebt, da sie gut zum flat design kom­bi­niert wer­den kön­nen und Hin­ter­grün­de ergän­zen.

 

Weni­ger im Trend sind

  • Sli­der, die auch auf Smart­pho­nes lau­fen und unnö­ti­gen Daten­bal­last dar­stel­len
  • sepa­ra­te Mobi­le Web­sites, da sie in Zei­ten von Respon­si­ve Web­de­sign über­flüs­sig wer­den
  • Web­site Apps, die sich down­loa­den las­sen
  • zu lan­ges Scrol­len ohne Navi­ga­ti­ons­hil­fen
  • Effek­te wie Par­al­lax-Scrol­ling, sofern es nur Effekt­ha­sche­rei und unnö­ti­gen Daten­bal­last dar­stel­len

Fazit

2016 wer­den die vie­len ein­zel­nen Web­de­sign Trends den enga­gier­te­ren Web­site-Betrei­bern in geschick­ter Kom­bi­na­ti­on einen Vor­sprung ver­schaf­fen. Web­de­sign in 2016 wird also noch mini­ma­lis­ti­scher und pla­ka­ti­ver, aber auch indi­vi­du­el­ler und inter­ak­ti­ver.

Web­links: 6 Design Trends/AWWWards, Mat­thew Mom­bre­a/IT-World, David Layton/Datachieve.