Since launching my design services last month, I 've had the opportunity of working on a series of what I 'd call, dream projects. Today, I am super excited to share one of the newest additions to my portfolio - What Olivia Did, a popular lifestyle and fashion blog written by the lovely Olivia.
I had the wonderful opportunity of collaborating with Lauren from Elle & Company who created the spot-on branding and design for Olivia's website. Lauren is an incredibly talented designer and I absolutely loved the experience of developing her design. It was a joy to work with both, Olivia and Lauren which made this nothing but a dream collaboration for me. Today I am taking you behind the scenes to give you a peek into the website development process for What Olivia Did website.
Platform : BLOGGER.COM
One of the unique challenges of this project was to develop the design on the blogger.com platform. Most major blogs are developed using rich content management systems like Wordpress, Squarespace etc. which are highly customizable and flexible. Whereas blogger.com, although very simple and easy to use, doesn't allow for easy addition of functionality. Blogger.com doesn't come with a beautiful drag and drop interface, extensive set of internal widgets or external plugins. To top it all, there is limited online resources and documentation to help working on the blogger platform. Given these challenges, I was excited to work on this project and make the beautiful design that Lauren had created a reality.
Colors: Using CSS, I implemented the color palette that Lauren had created to style the different layout elements of the website. I created a code snippet that defined the color variables to be used in the website and categorized them as: PrimaryColor, SecondaryColor, BackgroundColor and AccentColor. This helped in keeping all the colors on the website consistent with the color palette and make it look cohesive.
Typography: As with the colors, I created type variables to maintain the consistency in type throughout the website. I created two variables: TitleFont and TextFont to use them as required for the different text sections of the website. We used the font Raleway in different weights and sizes to bring the hierarchy in the type.
Illustrations: Olivia worked with the talented Emma Block for the beautiful and ultra cute illustrations for her blog design. These were incorporated in different ways to add a bit of personality to the design - on the about page to denote Olivia's favorite things, the interactive maps and a sign to draw attention to the hidden drawer menu at the top of the website.
Sticky Navigation: The top navigation that houses the pages of the website is embedded into a sticky navigation bar that stays fixed as the user scrolls down through the website.
Drawer Menu: The flip in - flip out drawer menu at the top was one of the most challenging and fun features that I implemented for Olivia's website. We included extra navigation and search options along with an Instagram widget in the additional menu.
Interactive Maps: Olivia has a lot of travel posts in her archives that needed an easy way of access and navigation. With the help of image mapping, I added an interactive layer to the beautiful maps that Emma created. Each of the places on the map can be clicked to navigate to the travel archives of that place. I also added fluid drop down menus to showcase other places that weren't present on the map.
I developed the design on a trial blogger.com site and we loved seeing the design come together slowly. Both, Olivia and Lauren were extremely helpful and friendly to work with which made my job easy and quick. I am thrilled with the outcome!At first, some of the features seemed difficult to implement on the blogger.com platform and I wasn't completely sure if they were possible. But eventually as I worked through the project it all became clear and possible. One of my biggest takeaways from this project is that anything is possible, we just have to find a way :) Check out Olivia' s new website here.
If you are interested looking to collaborate on a Branding + Web design project, check out my services here!