Afgelopen weekend ben ik aan het (visueel) redesign 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, kun je in dit artikel teruglezen.
Persoonlijk vond ik dat het tijd was voor een herontwerp van mijn website, omdat ik de visuele stijl achterhaald vond. Ik wilde een meer 2020-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!
Zoals al eerder aangegeven, de aanpassingen in het redesign 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 je computer waarop jij de site bekijkt.
/* 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 in het redesign.
#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, 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 gebakken, dus geen noodzaak voor een extra JS library!
#Nieuwe header + header afbeelding
Ik heb een nieuwe header voor de hoofdpagina’s ontworpen omdat ik de ‘oude’ headers iets te saai vond omdat ik geen gebruik maakte van een afbeelding. Ik wilde op elke hoofdpagina een ‘sprekende’ afbeelding hebben die aansluit bij het onderwerp per hoofdpagina.
Ook heb ik een Custom Meta Box toegevoegd zodat ik in de hoofdpagina’s zelf header titels en een bijbehorende subtitel kan plaatsen in de headers. De header tekst en afbeelding zijn uiteraard ook responsive gemaakt waarbij beide elementen van layout veranderen naarmate het beeldscherm kleiner wordt.
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.
#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 –tegelijkertijd– zichtbaar zijn.
#Nieuwe Mobiele Navigatie
Ook heb ik mijn mobiele navigatie een beetje gepimpt in het redesign, dit is nu een full-page 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.
Conclusie
Een redesign 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 jouw site binnenkort ook op de schop, neem dan contact met mij op .. ik help je graag.
Deel dit Bericht:
Nog Geen Reacties
Sorry, maar het is niet (meer) mogelijk te reageren op dit artikel.