Web Design Trends

2018

Website ?

Fortælle en historie

Vise data og information

Brande sig og synlighed

Sælge fysiske eller digitale varer

Ofte flere grunde...

Websites

Har altid en signalværdi

Moderne - Ol' skool

Minimalistisk - Bombastisk

Billig - Dyr

Konservativ - Progressiv

Web Design Trends 2018

Flat Design 1.0

Skeumorphism

Flat Design

Web Design Trends 2018

Flat Design 1.0

Ærligt digitalt

Ikonbaseret

Skeumorphism

Flat Design

Masser af effekter

​Ligner virkeligheden

Web Design Trends 2018

Flat Design 1.0

Microsoft Windows 8 - 2012

Apple iOS 7 - 2013

Google Material Design - 2014

Web Design Trends 2018

Farver

'80er' pasteller

Store mættede farveflader

Duotone

Web Design Trends 2018

Billeder

Store fuldskærms baggrundsbilleder

Speciallavede kreative illustrationer og tegninger

Web Design Trends 2018

Video

Fuldskærm baggrundsvideo intro Informative og forklarende videoer

Web Design Trends 2018

Cinemagraphs

.gif

Animerede billeder

Web Design Trends 2018

Asymmetri og Brutalisme

Kantede vinkler

Cut-outs

'Hulter til bulter'

Indhold ind over hinanden

Voldsomme visuelle farver og former

https://theoutline.com/

Web Design Trends 2018

Typografi

Stort og vovet typografi

Spændende typografi

Cut-out tekst

Web Design Trends 2018

Negative space

Større brug af negative space

Web Design Trends 2018

Animationer

Scroll udløste animationer

Animerede: logoer, menuer og baggrunde, overgange, ikoner

Web Design Trends 2018

Etisk design

#MeToo #TimesUp

Stock photos -> ærlige billeder

Web Design Trends 2018

IoT forbindelse

Forbind til Internet of Things

Vis IoT data på website

Interager med IoT enheder

Web Design Trends 2018

PWA
Progressive webapps

push notifikationer

splash screens

offline mode

Animerede page transitions

Tilpasser sig til dig, vha algoritmer

(Twitter, Washington Post, Medium)

Web Design Trends 2018

Performance

Load tider

Web Design Trends 2018

Top / Bund

sticky menuer

Ergonomisk

Mobile first

(2018 WordPress Theme)

Web Design Trends 2018

Sikre websites

HTTPS - Secure

Sikkerhedscertifikat

Web Design Trends 2018

AI / machinelearning

Neural networks

NLP - Natural Language Process -

Chatbots - intelligent personlig samtale

Billedgenkendelse

http://www.adobe.com/sensei.htm
​https://thegrid.io/

Web Design Trends 2018

Web Design Trends 2018

Web Design Trends 2018

https://99designs.dk/blog/trends/skeuomorphism-flat-design-material-design/
https://www.houstonwebdesignagency.com/blog/11-web-design-trends-2018/
https://www.forbes.com/sites/tomaslaurinavicius/2017/12/20/web-design-trends-2018/
https://webflow.com/blog/18-web-design-trends-for-2017/
https://webflow.com/blog/19-web-design-trends-for-2018/
http://spyrestudios.com/5-web-design-trends-2017-2018/
https://99designs.dk/blog/trends/web-design-trends-2018/
http://www.creativebloq.com/features/web-design-trends/
https://designshack.net/articles/inspiration/web-design-trends-2018/

Design Guides

https://developer.apple.com/design/

https://fluent.microsoft.com/
https://developer.microsoft.com/en-us/windows/apps/design

https://design.google/
https://material.io/guidelines/

Visuelle trends 2018

https://depositphotos.com/trends2018/

Web Design Trends 2018

Web Design Trends 2018

Web Design Trends 2018 - Eksempler

Typografi + Scroll effekt + Minimalism + Whitespace + Full screen photos + Videoer
https://www.hugeinc.com/
https://www.hugeinc.com/us

Gradienter + Animationer
https://stripe.com/dk

Dropshadows
https://www.algolia.com/

Dropshadows + Gradienter
https://www.scaleapi.com/

Dropshadows + gradienter + 80er farver
https://www.spotify.com/dk/

Mættede farve flader + Scroll sektioner + Videoer
http://egwineco.com/

Store billeder + White space
www.hochburg.design

Brutalism + Asmymetri
https://www.adidas.co.uk/speedfactory

Store billeder + asymmetri + scroll effekt
https://www.beoplay.com/en/landingpages/beoplaye8#music

Web Design Trends 2018

Jes Conradsen

about.me/jesconradsen

dk.linkedin.com/in/jesconradsen

slides.com/superfly