Mobiele Navigatie

Afgelopen weekend ben ik aan het (visueel) herontwerp begonnen van deze website, gonzodesign v6. Deze website maakt sinds 16 juni 2013 gebruik van het WordPress CMS, de redenen waarvoor ik voor WordPress heb gekozen, kunt u in dit artikel teruglezen.

Persoonlijk vond ik dat het tijd was voor een redesign van mijn website, omdat ik de visuele stijl achterhaald vond. Ik wilde een meer 2019-ish look creëren die ook beter uitstraalt wat ik kan .., maar nog steeds met een unieke ‘look & feel’ en niet zoals de meeste tegenwoordige websites .. 13 in een dozijn!

Opsomming van de Aanpassingen

Zoals al eerder aangegeven, de aanpassingen in het herontwerp waren hoofdzakelijk van esthetische aard, er is nagenoeg niets gedaan aan de bestaande techniek of functionaliteit van deze WordPress site.

Webtypografie

Allereerst heb ik het lettertype van de broodtekst in de website aangepast door gebruik te maken van Systeem fonts. Systeem fonts zijn lettertypes die horen bij het besturingssysteem (bijv. in Windows is dit Segoe UI) van uw computer waarop u de site bekijkt.

CSS
/* System Fonts Rule */
font-family: "Segoe UI", "Roboto", "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", -apple-system, BlinkMacSystemFont, "Lucida Grande", sans-serif; 

Deze keuze heb ik gemaakt omdat systeem fonts veel beter leesbaar zijn op het scherm dan bijv. een lettertype dat via @font-face is ingesloten. Maar nog belangrijker is dat er geen custom lettertypes gedownload hoeven te worden van de server, waardoor de totale laadtijd van de website vele malen korter is!

De kopteksten vormen de uitzondering op bovenstaande regel omdat ik met lekker dikgedrukte kopteksten wilde werken. Het gebruik van dikgedrukte kopteksten zorgt er ook voor dat lezers met weinig tijd snel en makkelijker de belangrijke stukjes vinden, en dat kan er toe leiden dat ze langer blijven en verder lezen. 

Ik heb gekozen voor het lettertype Glober waarvan ik slechts 2 diktes gebruik (in 2 stylen: staand en cursief), namelijk ‘Black’ en ‘Heavy’. Tevens heb ik ook mijn webtypografie goed onder de loep genomen en bijv. mijn line-height en margins veranderd.

Nieuwe Buttons

Buttons .. oftewel de verschillende knoppen die ik hier in mijn site gebruik. Knoppen zijn een essentieel element van het interactie ontwerp, omdat ze een primaire rol spelen in de interacties tussen een gebruiker en een website.

Het is belangrijk om de juiste visuele kenmerken (zoals grootte, vorm, kleur, schaduw, whitespace, enz.) te gebruiken om een element op een knop te laten lijken. Maar dat hoeft niet te betekenen dat alles op het internet maar op elkaar moet lijken!

Ik heb even zitten experimenteren met de juiste vorm van mijn buttons en hoe ik deze het best kan animeren op een mouse-over (:hover) beweging. Hieronder is mijn codepen waar ik mee heb zitten spelen:

See the Pen Cool Button by gonzodesign (@gonzodesign) on CodePen.

Meer (micro)animaties

Het schijnt dat als je website niet heen en weer stuitert op je beeldscherm bij het op en neer scrollen, dan ben je geen hipster designer? Dat wil BTW niet zeggen dat ik tegen animaties ben, .. integendeel! (Micro)animaties kunnen juist de mooie details in het design zijn, maar er moet wel rekening gehouden worden met mensen die misselijk of duizelig worden van bewegingseffecten zoals bijv. flitsende animaties of (snel) bewegende afbeeldingen of teksten.

De verschillende micro-animaties zijn allemaal in CSS geschreven en zijn hoofdzakelijk zichtbaar op :hover. Er wordt gebruik gemaakt van transitions en @keyframes om deze micro-animaties zo ‘smooth’ mogelijk te maken.

Verder wordt de IntersectionObserver API gebruikt die kan worden ingezet om te zien welke elementen in een scrollend document in de viewport verschijnen. De InspectorObserver API zit in alle moderne browsers ingebakken, dus geen noodzaak voor een extra JS library!

Meer Project afbeeldingen

Dit is misschien een beetje een inkoppertje, maar .. één foto zegt meer dan 1000 woorden! Dat was voor mij o.a. de reden om de jQuery Carousel uit de verschillende projectpagina’s weg te halen en ik heb nu de projectfoto’s los in de content geplaatst waardoor ze nu allemaal zichtbaar zijn.

fig.1: Mooie Projectfoto’s scoren altijd goed!

Geinige Visuele Effecten

Onderstaand visueel effect valt stiekem ook onder animaties, maar ik wilde deze animatie een beetje uitlichten. Deze animatie is volledig in CSS gemaakt middels @keyframes en is te zien in de header van de website.

See the Pen An animated particle background by gonzodesign (@gonzodesign) on CodePen.

Nieuwe Mobiele Navigatie

Ook heb ik mijn mobiele navigatie een beetje gepimpt, dit is nu een fullpage slide-in off canvas menu geworden. Niet alleen de hoofdknoppen zijn aanwezig in deze nieuwe mobiele navigatie, maar ik heb ook de belangrijkste secundaire menu-knoppen én ook mijn sociale media accounts toegevoegd.

Nieuwe (geactualiseerde) Content

Er is niet alleen naar de inhoud van de teksten gekeken, om te kijken of de content nog steeds actueel is. Maar er is ook naar de leesbaarheid van de web teksten gekeken. Alle teksten hebben nu een goed contrast met de achtergrond waarop deze tekst leesbaar is, waardoor deze website nu nog toegankelijker is geworden voor slechtzienden.

Opschoning Code

Uiteraard is ook de codebase opgeruimd en alle oude stukjes code die nodig waren voor de voorgaande versie(s) verwijderd. Hiermee zijn sommige files een flink stuk kleiner geworden en samen met bovenstaande aanpassingen heeft dat ook een mooie performance boost opgeleverd.

fig.2: Laadtijd van het herontwerp (pagespeed 99 op mobiel 😲)

Conclusie

Het herontwerpen van een bestaande website is waarschijnlijk moeilijker dan het ontwerpen van een totaal nieuwe website op een nieuw domein, omdat veel van de statistieken, feedback en feiten bekend zijn.

Als (front-end) web designer moet je dus intelligent en strategisch denken om nieuwe veranderingen in een bestaande website te integreren. Moet uw site binnenkort ook op de schop, neem dan contact met mij op .. ik help u graag.

Deel dit Bericht:

Auteur: Jan Rajtoral

Jan - AKA Gonzo the Great - Rajtoral is een ervaren grafische en web designer, gespecialiseerd in (front-end) Responsive Web Design, WordPress Ontwikkeling, Logo en Huisstijl ontwerp.

Nog Geen Reacties

Laat een Reactie achter


*) Verplichte velden.

Meest Recent Project

Leerschoon M/V