Trends in webdesign (Joomladagen 2016 )
•Als PPTX, PDF herunterladen•
1 gefällt mir•1,280 views
Mooi hoor al die nieuwe technische snufjes hier op JDNL16 maar hoe zit het met de trends op het gebied van webdesign. Ik ga het niet hebben over design programma’s als Photoshop of Sketch en al helemaal niet over PHP, maar wel over de huidige webdesign trends. Als de term Ghost Button jou niets zegt kom dan zeker even langs.
Empfohlen
Weitere ähnliche Inhalte
Andere mochten auch
Andere mochten auch (20)
Ähnlich wie Trends in webdesign (Joomladagen 2016 )
Ähnlich wie Trends in webdesign (Joomladagen 2016 ) (8)
Trends in webdesign (Joomladagen 2016 )
- 1. Trends in Webdesign Joomladagen 2016
- 2. Dennis Buis • Perfect webteamer • Organisatie Joomladagen • Organisator Jug Bussum
- 3. Trends in webdesign geschiedenis huidige trends toekomst
- 9. w
- 10. Flat design
- 12. Material design
- 15. 17 april 2016
- 25. bron: Frankwatching: Désirée Battjes en Andre van Iterson
- 33. De volgende stap
- 36. Internet of things big data API’s Liquid content
- 37. bron: Frankwatching: Martijn van Hoof van Netvlies
- 40. Links Eerste webpagina: http://info.cern.ch/hypertext/WWW/TheProject.html Flat design voorbeeld: https://hell-o-baby.com/promo Google over wat Material design is: https://www.youtube.com/watch?v=rrT6v5sOwJg Long scroll / Paralax voorbeeld: http://forbetter.coffee Niemand zijn lieveling kleur http://www.frankwatching.com/archive/2015/12/08/dit-zijn-de-10-webdesigntrends-voor-2016/ Theater Chassé http://www.frankwatching.com/archive/2016/03/04/liquid-content-scoort-een-gepersonaliseerde- homepage-beter-case/ ANWB Golf: https://www.anwbgolf.nl/ RADIO1: http://www.radio1.nl/
Hinweis der Redaktion
- wanneer kwam ik in aanraking met webdesign
- toekomst.. als ik die kon voorspellen stond ik hier niet
- meer en meer mogelijkheden met html + Initiële release van CSS 1996 2000 Hier wordt het interessant mogelijkheden html/css groeien Vormgeef technisch geen beperkingen
- - 2000 Internet word groot veel meer mensen krijgen toegang tot het internet - vanuit het dagelijkse leven weet je hoe iets werkt, hoe een het internet werkt moet geleerd worden. - er word teruggegrepen naar wat gebruikers kennen van de ‘echte’ wereld.
- html css enz zijn zo door ontwikkeld dat er vrijwel geen technische beperkingen meer zijn om iets eruit te laten zien hoe de designer dat zou willen. Beeldschermformaten niet belangrijk ontwerpen voor 960px
- 2007 En toen was daar de iphone in 2007 - Er volgen meer fabrikanten met nog meer formaten - Verschuiving van internet gebruik via computer browser naar via mobile browser en App’s - Ipad, Phaplet’s, netbook’s, enz. Skeuomorfisme werkt niet op kleine schermen, behoefte aan eenvoudigere opmaak
- 2007 technische ontwikkelingen gaan snel, diverse frameworks die het webdesigners en ontwikkelaars makkelijker maken schieten de grond uit. focus gaat terug naar content… en hoe die op de verscheidene schermgrootes getoond word. - Lang leve Flat design want met skeuomorfisme gaan we het niet redden
- FD kenmerkt zich door Geen gebruik van effecten geen schaduwen om knoppen of invul velden aan te duiden Strak en minimalistisch duidelijk grid Eenvoudiger uniform toe te passen op diverse grote schermen. Naar het schijn had Microsoft in 2002 een mp3 speler uitgebracht met waarin elementen van wat we nu Flat design waren verwerkt 2006 Windows Phone 7 Sommige zeggen zelf dat oorsprong in Swiss design uit 1920 komt…
- is mode geworden Illustratie stijl Veel van het zelfde, lastiger te onderscheiden. - Verschil jongeren en ouder doelgroep groot - rekening mee houden bij designen - Onderzoek blijkt dat omdat niet altijd even duidelijk is dat iets klikbaar is men op goed geluk rond klikt.
- is van google Dient als richtlijnen/toolset voor developers voor maken van app’s tbv uniforme gebruikers ervaring, op het web als met Apps. (UX)
- Schaduwen en interacties uit de echte wereld om de gebruiker hints te geven hoe de interface werkt. (skeuofomisme?!) Material design - heeft skeuomorfisme onderliggende filosofie Material design voegt visuele hints toe aan flat design (UI)
- zachte schaduwen. Knoppen worden weer meer knop. en animaties die volgen op interacties, vanuit die punt interactie. En animatie die volgt uit een interactie doet dat vanuit de oorsprong van die interactie. Nadeel Material design daar waar Skeuomorfisme in verband wordt gebracht met apple is Material design heel erg Google
- Dat was het wel eigenlijk de toon is gezet en zal de aankomende tijd uitkristalliseren
- Functioneel Minimalisme pro’s - Makkelijk responsive op te lossen - Gebruiker geen ruis voorgebruiker - Focus op 1 onderwerp/doel - Eenvoudig boodschap over te brengen
- cons - Moeilijk om echt goed te doen - Erg populiar waardoor lastiger kan zijn onderscheid te zijn - Copy, typografie en beeld onder vergrootglas
- Card design -> Pintrest Pro’s verschillende content overzichtelijk diverse foto’s van specifiek onderwerp, diverse projecten van diverse ontwerpers -> Behanced con’s - Overtref Pintrest of Behanced maar eens - Ux design lastig, maar Key. Interactie is essentieel - Je met er de content voor hebben - erg populair
- toegepast op NPO Radio 1 want diverse content als: nieuws headings nieuws items poll thema artikel
- Micro annimaties/interacties - helpt in begrijpen hoe interface werkt (komt uit material design) Er is daarbij gekeken naar de animatie technieken van de waldisney Daar word om duidelijk te maken overdreven.
- Mouseover met vertraging, iemand die de knop kent zal de mouseover niet zien. de player zit links boven in beeld. Letterlijk toegevoegd.
- Long scroll / Parallax - Storytelling - Entertaining en houd aandacht vast, Meestal gebruikt door (web)designers Web bureaus functie / vorm uit balans… hmmm???
- Typografie / Editorial design - Letters worden beeld Scherm opmaken alsof het een pagina uit een glossy Magazine is, tekst en beeld smelten samen. Pro erg esthetisch con vertaling naar responsive
- - Niemand zijn lievelingskleur
- - Echte Hero’s geen stookbeeld Eerlijk tekst word beeld
- Logische volgende stap: de Video-achtergrond Video achtergrond, maar dan niet te druk en/of het moet wel betekenis hebben, Fuctioneel : blijke bestuurder n klanten volgende ghost button…
- Ghost Button oftewel de Niet opdringerige knop esthetische keuze - hiërarchie in knoppen
- Split screen Landing pages Duidelijke twee deling in website biedt iets aan zoekt naar iets gebruiker administrator
- Mobiel naar desktop op mobiel logisch Prioritizing navigation Rit / rijden
- Prioritering van navigatie wat dus niet direct nodig is niet direct beschikbaar
- bruggetje naar auto
- De zelf rijdende auto…
- …geen stuur meer nodig.
- tijdperk van gepersonaliseerde content word volwassener - Denk aan Google gepersonaliseerde zoekresultaten - Bij Webshops - andere kopers hadden ook interesse in… Techniek neemt steeds meer uithanden Navigatie kan dan met minder relevanter worden. Prioritizing Navigation.
- Theater Chassé content gecategoriseerd na aanschaf gebruiker in categorie gezet. en de daar relevante voorstellingen van getoont click trough 518% Conversiepercentage steeg met 56 procent! Doe daar een beetje AI bij en het internet ziet er anders uit Navigatie gaat minder belangrijk worden. Prioritizing Navigation
- De ANWB Golf pagina zou er heel anders uit zien als de de site weet welke pagina’s de interesse heeft van bezoeker, of hij al een lid is, op welke banen hij wel eens speelt, of hij de app wel of niet gebruikt, wat zijn niveau is.
- Radio1 Herkent dat iemand vaak naar programma x luistert en zet het vervolgens automatisch klaar in je playlist. Leest veel techniek artikelen en zodra jij op de site komt staan die artikelen voor je klaar.