Latest In Portfolio: What Olivia Did

Nov 21 2015

Do you know there is a lot of scope for development on the blogger.com platform too? Here is an example with the web development for What Olivia Did by PinkPot Design STudio!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.

Development specifics:

Platform : BLOGGER.COM

Languages + Software : HTML , CSS, Javascript, JQuery

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.

Blogger.com, although limited, allows access to one backend file that you can modify and I cashed in on the opportunity to make complete use of it. I wrote custom HTML, CSS, Javascript and JQuery to implement the features, styles and functionality of the design.

Web Design Elements:

Do you know there is a lot of scope for development on the blogger.com platform too? Here is an example with the web development for What Olivia Did by PinkPot Design STudio!

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.

Features:

Do you know there is a lot of scope for development on the blogger.com platform too? Here is an example with the web development for What Olivia Did by PinkPot Design STudio!

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.

Do you know there is a lot of scope for development on the blogger.com platform too? Here is an example with the web development for What Olivia Did by PinkPot Design STudio!

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.

Do you know there is a lot of scope for development on the blogger.com platform too? Here is an example with the web development for What Olivia Did by PinkPot Design STudio!

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.

What are your thoughts on the new website for What Olivia Did?

If you are interested looking to collaborate on a Branding + Web design project, check out my services here!

If you are interested in learning more about the course, enter your email address to join the waitlist and be notified when it launches! :)
  • I didn’t know it was possible to do these things with Blogger! Great work, Chaitra!

    • Hi Carmia 🙂 Thank you so much – it was so good to see your comment 🙂 Hope you are well! x

  • Megan

    Awesome work! I saw the reveal through Elle & Company last week and thought it was gorgeous! I am curious though why blogger was chosen? Was it the clients request, and they just didn’t want to stray from what they’ve been using?

    • Hi Megan! Thank you so much 🙂 Yes Olivia wanted to stay with blogger which she has been using for quite sometime now 🙂 x

  • Wow, major props to you for making such a custom design work in Blogger. I originated my blog on Blogger, but found it very limited and made the switch to WP. I’m a semi-regular reader of Olivia’s site and I’ll be excited to see this design at work 🙂

    xoxo – Kelly
    http://www.dreaminlace.com

    • Hi Kelly! 🙂 Thank you so much. I had assumed that blogger was pretty limited too until i explored it a bit more!

  • Pingback: Fave posts from week nov 16-22 | My Blogosphere()

  • You’re just so good at web development. I mean, the image map, the side menu… You absolutely rock! I’m in love with your skills! ♥

    • Hey Kelly 🙂 Thanks so much – that means a lot to me 🙂

  • I love Olivia’s blog, you did a wonderful job!

    Sara – She Who Is Short

    • So good to hear that Sara 🙂 Thank you so much! <3

  • Gorgeous and professional! Amazing job as always, Chaitra <3

    Emily / Lynde Avenue

    • Thank you so much Emily 🙂 Your encouragement means a lot to me xx

  • Beautiful design! Do you know how can I set up shop option like the one on Olivia’s blog? I love how it turned out, and would like to make something similar on my blog. Is there maybe some plugin or anything like that that you can recommend? I use wordpress. Thank you in advance!

JOIN ME ON PERISCOPE

@PinkPot7