29. marts 2016

Designtrends 2016

Tænk ud af boksen og ind i browseren

Designtrends og webdesign udvikler sig hele tiden. Mange af de designtrends som du finder i det følgende vil du sikkert genkende fra 2015. Nogle trends, tag eksempelvis "responsivt design", er udsprunget af ren og skær nødvendighed, da Google i dag straffer hjemmesider som ikke er "mobilvenlige". Andre trends opstår på baggrund af æstetiske overvejelser. Trends og strømninger har alle det til fælles, at ville sammensmelte "det smukke" med det funktionelle og samtidigt holde brugerne i fokus.

Der findes selvsagt et hav af forskellige strømninger, så nedenfor har jeg udvalgt de tendenser der kommer til at dominere det digitale landskab i 2016. 

Flat Design 2.0 (Material design)
"Flat Design" er efterhånden ingen nyhed og derfor har vi måtte sande, at det er kommet for at blive. I 2014 introducerede Google deres "Material Design". Dette tager udgangspunkt i ”pen og papir” og gør blandt andet brug af realistiske skygger og animationer. 

En spændende tendens for 2016 er kombinationen mellem det helt flade design og de levende og iøjefaldende karaktertræk fra "Material design". Resultatet af sammensmeltningen, er rene og overskuelig designs, med overlappende elementer, animationer, bastante grafiske elementer, stærke farver og stærke billeder.

De to designstile er ikke hinandens modsætninger, tværtimod vil vi i det kommende år, se en bevægelse mod designs, hvor begge stile komplimenterer hinanden.

Her ses et eksempel på et design, hvor de to designstile flyder sammen. Ophavsret: Anton Aheichanka.  

Grids
Grids er en "institution" inden for webdesign. Det er en af hjørnestenene i  ”International Typographic Style” og har siden udgivelsen af  Joseph Müller-Brockmanns bog ”Grid Systems in Graphic Design” i 1961 været et fast omdrejningspunkt for grafisk design.

Nathan Smiths 960px grid har  igennem lang tid været en ”standard”, når det kommer til webdesign. Efterfølgende er dette blevet afløst af andre alernativer, såsom 1170px grids eller helt flydende grids.

Grid’et er stadig omdrejningspunktet for alt webdesign i 2016, dette vedbliver med sikkerhed. Der dukker konstant nye fortolkninger af eksisterende gridsystemer op: Overlappende grids, flydende grids, asymmetriske grids, split screens, masonry grids og så videre.

Her ses et eksempel på flere typer af grids.  

Skarpe farver
I de tidligere år har afdæmpede farver, såsom pastelfarver været meget dominerende. I takt med en større udbredelse af "Material design", vil vi i 2016 oftere se designs med modige og vovede farvevalg. De foretrukne farver er mættede og at der anvendes skarpere kontraster og nuancer. I 2016 forventer vi også at se langt flere ”duotone”-farveskemaer og gradients. Alt i alt, vil vi opleve mange designs, som er mere levende og skarpe i farverne end hidtil. 

Både Mailchimp og Spotify anvender de nye trends ved udgangen af 2015. 

Eksperimenterende navigation - Mobile first
Efter "responsivt design" blev standard, har den traditionelle navigation, som vi kender fra de fleste websites, været et område i konstant bevægelse. De gængse navigationskonventioner sættes under angreb. Angrebet drives primært af brugernes skifte fra computer til smartphones og tablets. Denne udvikling fortsætter helt sikkert i 2016.

Brugerne bevæger sig i stigende grad rundt på nettet fra deres mobile enheder. De søger information, handler og er sociale med deres venner. Brugeroplevelsen på mobile enheder skal derfor være i top, heraf designtendensen "mobile first". 

I øjeblikket ses et væld af  forskellige designvariationer: "Global navigation", "Hamburger icon", "Sticky navigation", "Full screen navigation", "Sidebar navigation" og mange flere. Mulighederne er mange, og designerne vil fortsat eksperimentere med navigationen i 2016, for at "knække koden" til den optimale brugeroplevelse..

Her har Shellshock eksperimenteret med navigationen på deres nye side. 

Animation
Takket være CSS og JS, er mulighederne med interaktive elementer næsten uudtømmelige. I 2016, ligesom i de foregående år, vil vi se endnu flere animationer. Animationer bliver brugt til "transitions", "hovers", "pop-ups", "modals", "check-outs", "sign-ups" og meget, meget mere.

Subtile og realistiske animationer vil formentlig præge billedet, da det ligger i tråd med principperne i både "Flat Design" og "Material Design".

Ud af boksen – ind i browseren
En anden stigende tendens vedrører designerens workflow. Store dele af designprocessen flyttes fra Photoshop eller Sketch og direkte over i ”browseren”. Dette skyldes at flere og flere designere også er gode til frontend-programmering  og ved at flytte designprocessen til browseren spares der både tid og penge, og designeren kan lettere tilpasse designet til de forskellige platforme. 

Derudover kan der hurtigere skabes en mere ”levende” prototype, hvor alle interaktive elementer og responsive tilpasninger kan præsenteres for kunden.

 

 

[unex_ce_button id="content_yk0dfoy2k" button_text_color="#ed5641" button_font="regular" button_font_size="18px" button_width="auto" button_alignment="center" button_text_spacing="0 px" button_bg_color="" button_padding="10px 45px 10px 45px" button_border_width="2px" button_border_color="#ed5641" button_border_radius="100px" button_text_hover_color="#ffffff" button_text_spacing_hover="1px" button_bg_hover_color="#ed5641" button_border_hover_color="" button_link="/blog/" button_link_type="url" button_link_target="_self" has_container="1" in_column=""]Tilbage til blogoversigten[/ce_button]