A dark, dated and hard-to-read site changed to a light one that is easy on the eye and easy to read, with plenty of space around content.
Maria Kelly is a stylist, creative director, TV and radio contributor, journalist and digital brand collaborator. She currently presents a weekly fashion segment on Ireland’s top Magazine Show ‘RTE Today Show’. Maria needed her 6 year old website redone.
Dark to Light
Maria’s existing website was a dark one that was looking very dated. It showcased her personal shopper and similar services but these are only a small part of her business now. There was no mention of her creative director or TV/radio contributor roles. She gave me the okay to throw out the entire site and its content.
Bright and Colourful
I started with a theme that is colourful from the start and has nice fonts including a handwritten one. Almost all the photos on the site are from photoshoots that Maria has overseen, completed with a few free ones from pixabay.
The Digital Marketing section includes short marketing videos that Maria has created.
Six photos from Maria’s instagram feed are shown on the home page. The photos are cached so that their inclusion does not slow down the site. The site checks for feed updates every few hours instead of at each page view.
Carousels
On the home page we decided to place a carousel where one would expect a hero image – it’s under the site tag line of “Increase brand awareness for success”. So as not to be jarring, the carousel shows up to 5 slides at a time (less on smaller devices) and moves a single slide every 5 seconds. The photos can be moved with a swipe motion or a mouse. I described the process and show the code in my post Replace Boss Pro header with carousel.
In the Photoshoots section we wanted to show a wide selection. Instead of a large gallery of photos I suggested another carousel. We had 23 images to show. Similar to the home page I set it to auto play, moving left by a single image. I reduced the delay time to 3 seconds. It would take over a minute for someone to see all images. As no one would sit looking at it for that long I decided to group the photos by photoshoot and randomise the order the photoshoots were displayed. This kept the photos from each photoshoot together but changed the order of photoshoots. I later made the code more flexible by using CMB2 to create the carousel.
Breathe
Maria’s site is built on the Genesis framework, my preferred foundation when building websites. It is fast and I often tweak it to make it a little faster.
The site is easier to read than Maria’s previous site, even changing from a dark to light theme helps but there is a lot of white space around content and this allows the content to ‘breathe’ and is easier on the eye.