It always feels great to see a project that you’ve been working come to life after all the hard work behind the scenes. Today, I am super excited to share my recent work for the amazing fashion blog I Want You To Know written by the lovely Kristabel Plummer.
Last winter, Kristabel got in touch with me to work on designing and coding her website that she had been blogging on for about 7 years. Kristabel has a huge library of around 800 posts with content mainly related to fashion, travel and lifestyle. She wanted her new web design to be more user-friendly, easy to navigate and speak her brand to her audience. Additionally, she also wanted to make the move from Blogger to Wordpress. I loved her style and jumped at the opportunity to work with her on her website overhaul.
Tools used: Adobe Illustrator
Deliverables: Wireframe and Mockups
Background: Kristabel worked with a talented graphic designer, Carmen Nacher to build her brand identity. By the time I was ready to start the project, Kristabel had all her brand identity elements ready to go. One of the most important things that stood out to me in her brand identity was the colorful graphic elements that Carmen had created. It added a lot of personality to Kristabel’s brand and I wanted to bring it into the website without it overpowering the content. We used the graphic elements as a repeatable pattern for the background on the entire website. Since the graphic elements were sparsely spaced, there was a lot of white space in between which made the background look colorful but in the least distractive way possible.
Visual design elements: Based on what Carmen had created, I worked with the color and font palette to reflect her branding throughout the website. I created buttons, menus and icons to fit with her branding and add functionality to the website.
Content Organization: Since Kristabel had almost 800 posts in her archives, it was important to organize the content in a way that was easy to access and navigate for her readers. To do this, we organized the content into Categories and Archives. I created a color block in the sidebar to organize the categories and draw the attention of her readers to her older posts.
Changing logo on refresh: One of my most favorite features of Kristabel’s website is that her logo changes on every page refresh. Carmen had created 4 variations of the primary logo and Kristabel wanted to bring them into the web design to add a bit of fun. Wow, I loved the idea but when Kristabel asked me about it, I wasn’t even sure if I would be able to implement it. But it was one if the most easiest as well as fun features that I worked on. Basically, each time a new page loads on her website, one of the four logos are selected for display based on a random number that is generated by the algorithm.
Follow widgets after the first post: This was a first for me. After the first post on every page, there are two prompt widgets to follow the Kristabel on Bloglovin’ and Instagram. This is a great way to prompt first time visitors to follow along with Kristabel’s work.
Scrolling navigation bar: In order to keep the navigation menu always accessible to the readers, I implemented a scrolling/ sticky navigation menu that stays fixed at the top as the reader scrolls down her website. After reaching the end of a page, if the reader wants to back to the top quickly, there is also a handy back to top button in the footer.
Full width Instagram: Kristabel has a popular Instagram account and in order to draw more attention to that, we added a full-width Instagram widget at the bottom of the website to highlight and showcase her beautiful Instagram pictures.
Responsive Design: Since a significant chunk of Kristabel's audience read her blog on their smart devices like phones and tablets, I made sure that the design was highly responsive. This was particularly challenging with the background graphics that varied a lot based on screen sizes. However, after a lot of trial and error, I coded the background to change based on the device its being viewed on. I loved how it all turned out and this is by far one of my favorite responsive designs.
Once the site was developed, it was time to migrate all her content from blogger.com to Wordpress. After a couple of failed attempts using other plugins, I used the Blogger extended importer plugin to import all of Kristabel's posts into Wordpress. It was a fairly easy task except that it took a long time as it had to import a large amount of content. Once the content was imported, I quickly ran a check to see if all the images and text were imported correctly. I also fixed the permalink structure on Wordpress so that all the previous links that were pointing to Kristabel's website continue to work undisturbed. This was a very important step in order to maintain the SEO of the website through the move from Blogger to Wordpress.
Overall, It was a joy working with Kristabel on her new website. Although she lives across the pond in the UK, we worked out the time difference and had fun meetings on Skype to discuss the progress of the website design. Head over to her website to check out the new design for yourself and let me know what you think in the comments!
If you are interested looking to collaborate on a Branding + Web design project, check out my services here!