Trends in webdesign

Een groot onderdeel van jouw lessen in het 2e leerjaar zal te maken hebben met trends. En dan, uiteraard, trends op het gebied van web. Wel of niet grote buttons? Wel of geen video? Wel of geen animaties?

Ons wereldje gaat zo snel dat klanten die ook steeds meer van je verwachten. Het is zeer realistisch dat een klant iets leuks ziet bij een concurrent en dat ook wil. Het is dan aan jou om te bekijken of dat haalbaar is (tijd, techniek, past het wel?) en om dat dan te ontwerpen.

Je gaat in deze sessie aan het ontwerpen. Er zijn twee oefeningen. Maak ze allebei of een van beiden. Het gaat er weer om dat jij inzicht krijgt in onze richting.

Leuk om te lezen zijn UX Pin, Mediaweb en Business2community:

Trends volgens UX Pin

Trends volgens UX Pin

Mediaweb

Mediaweb

Trends 2016 - 2017

Trends 2016 – 2017


Oefening 1: ontwerp een site voor een luxe snackbar

Steeds meer snackbars willen zich anders uitstralen naar het publiek. Er wordt nadruk gelegd op het gezonde frituurvet, de restaurants worden aangepast en stralen meer elegantie uit. Er wordt benadrukt dat er rekening gehouden wordt met het milieu en dat er uitsluitend scharrelvlees gebruikt wordt. Kortom: revolutie!

Ontwerp een site waarin deze groene uitstraling naar voren komt. Maar… zorg er tegelijkertijd wel voor dat eten smakelijk en luxe wordt weergegeven.

Formaat voor jouw site wordt een liggende tablet en een staande smartphone. Dit houdt in dat je een ontwerp maakt wat past op 1024 pixels breedte en een ontwerp wat past op 480 pixels breedte. Lengte kan oneindig zijn.

Kies een van de volgende stijlen om jouw eigen ontwerp op te baseren:

Oefening 2: ontwerp een banner met dramatische typografie

Ontwerp een banner voor jezelf waarin je jezelf aanprijst als webdesigner. De banner moet grotendeels uit tekst bestaan en je maakt gebruik van dramatische typografie. Het formaat van de banner is 336 x 280 pixels. Afbeelding mogen wel gebruikt worden maar de tekst is leidend.

Card layout

Card layout of Pinterest layout is een multi-column interface waarmee diverse artikelen naast en onder elkaar getoond worden zelfs wanneer ze niet dezelfde hoogte hebben. Bij Pinterest zijn de kaartjes echt zichtbaar maar het is mode om dit naadloos te laten gebeuren en de card een grote foto te laten zijn.

flat-design1flat-design2flat-design3


Illustraties

Handgetekende websites of websites met handgetekende illustraties er op zijn populair. Wil je niet alleen met de muis bezig zijn maar hou je van tekenen? Bekijk via de site van Hongkiat een overzicht van mooie geïllustreerde websites. Of kijk dan eens naar de volgende voorbeelden:

Mint Design Company

Mint Design Company

Make your money matter

Make your money matter. Deze site doet echt aan storytelling. Gewoon scrollen en blijven scrollen!


Minimalistisch

Veel witruimte, een sober kleurenpalet en aandacht voor de typografie.

Wearable print

Wearable print

Studio Nudge

Studio Nudge

Oefening 2: ontwerp een facebook advertentie voor jezelf

Biedt jezelf aan als mediavormgever interactief. Je hebt een speciale actie waarbij je bij iedere website gratis een facebook ad ontwerpt. Dit moet in de advertentie naar voren komen. Maak gebruik van dramatische typografie. Combineer 2 fonts en gebruik deze om je ad te maken.


Dramatische typografie

Het combineren van fonts is momenteel hip. Combineer fonts met een schreef met fonts zonder schreef. Handgeschreven met strak. Je kunt het zo gek niet bedenken. Maar… niet alle combinaties werken goed. Gelukkig kun je op internet heel goed diverse sites vinden waarop fonts getoond worden welke goed samen gaan. Hieronder zijn 3 sites genoemd waarop je gratis font combinaties (font pairings in het Engels) kunt bekijken en downloaden:

http://fontpair.co/
https://femmebot.github.io/google-type/
http://www.hongkiat.com/blog/font-pairing-tools/