I’ve recently redesigned my website because I felt my old website did not reflect me at all. And to be honest, my old website was a complete mess! The flow didn’t make sense to even me, the code was jumbled, and I had plugins I didn’t even remember installing.

Being a web and graphic designer, I find myself focusing more on other people’s websites and designs while completely neglecting my own. It felt as though my website was always in the back of my mind, haunting me with it’s messiness… cleaning it up was just what I needed to clear my mind and refocus my brand and business. I now feel like I am better able to focus on other aspects of my business.

I figured this redesign would be a great opportunity to show a behind the scenes step by step process of how I do branding and website designs.

1 // Brainstorming

Before starting in on my design, I did some reflecting and journaling on what I wanted from my business. What did I want to offer? Who do I want to offer that to and why? What colors do I even like?

I knew I wanted a less complicated design. I knew I wanted something tropical-esque. I knew I wanted to narrow down my portfolio to only focus on the design work I was truly proud of and that which reflected my style. So over the course of a couple weeks (I procrastinated a bit…), I just wrote down random thoughts I had about what I wanted.

I then created a board on Pinterest with the styles I liked that I felt reflected me and my current “aesthetic” I guess you would say.

pinterest mood board

 

2 // Mood Board

Using the pinterest board I created, I created a mood board. The mood board shows off some inspiration photos and color schemes for the website.

mood board

3 // LOGO

I then use the aesthetics/colors of my mood board to brainstorm logo ideas. I ultimately came up with this logo:

lily liseno logo

I also came up with some variations that I can use in different contexts:

lily liseno logo variation

lily liseno logo variation

lily liseno logo variation

lily liseno logo variation

4 // Style Guide

Using the mood board and logos, I created a style guide. The style guide is used to organize all of the styles for the website: colors, logos, logo variations, fonts, patterns/textures, and inspiration.

Whenever I am creating a new graphic for a website, I like to whip out the style guide so I can easily get the colors/style inspiration I need to keep things consistent.

5 // PSD DESIGN FOR HOME PAGE

At this point, I would usually create wireframe layouts for each page, but my old website already had a good layout for my pages that I wanted to use. So I went straight to designing the home page on photoshop.

It is so much easier to manipulate and experiment with website designs on photoshop because you are free to do whatever you want! You also don’t need to worry about breaking anything on the site or it taking hours to do one simple design edit.

The final page design turned out quite different than the PSD design because I discovered new things while I was developing the design to make the site even better.

6 // DEVELOPING THE DESIGN/CLEANING UP

I then created a test site to develop the design on.

Here is the process I followed for development:

  1. I duplicate the original website to a test domain.
  2. I clean everything up. That means getting rid of unused plugins and themes, making updates, and cleaning up code.
  3. I start to develop the design page by page. I used the divi builder* to create my site and I am lovin it!
  4. Once that is complete, I duplicate everything over to my actual site!

It feels good to actually love my site.

If you have a website, how do you feel about it right now? Is it overwhelming? Do you feel like it reflects who you are?

 

Pin It on Pinterest

Share This