A New Face for the World: Welcome to the New CosmicLagoon Design!

By: Jessica Scott | 29 Jun 2016
CosmicLagoon Design by Jessica Anne Scott Welcome Blog Post

It’s been 9 months gestating, but I’m finally ready to present my new baby to the world. Welcome to the new home for my portfolio: CosmicLagoon Design!

It’s been a long time coming, but I’m finally at a stage where I can push live and start promoting my work. I still have quite a few pages to create, but it’s now at a good place to bring into the light. I’ve known I’ve needed this for a while; while at the agency, I was getting many page views on my old site and on my LinkedIn page. With these traffic spikes, I knew it was time to start working on a better face to present to the world.

Coming up with a kick-ass new brand

I knew the first thing I needed to do was take a survey of my current state of affairs. I saw that not just my website needed a refresh ‒ my whole brand needed a breath of new life. The logo, the colors, the typography; all needed a fresh look.

Before and After Logos

A branding project started in 2011, now look where I ended up. 5 years difference!

First, I started with the branding. The logo and the typography needed facelift. I was using an older type, ‘Melbourne,’ while fashionable at the time (2011), it was too clumsy and narrow for my tastes. I switched to the ‘Gotham’ type family, which has a greater variety of weights and a wider letterform. The resulting look was much more open and friendly, greatly improving the readability of my printed materials like my résumé.

The Saturn-like ring planet logo got a fresh look too. I wanted to do away with any gradients, leaning toward a flat design for my brand. Partly for simplification, partly to make the logo more useful in more media: ease in print and retaining sharp resolution on many different digital screens. The icon is now an even size with the type in the logo, making the entire visual more balanced than before.

I kept the same basic color scheme, but added several shades of blue to add more options for designs.

Putting together the concept

First Round of Mockups for the Site

On of the first concepts for the site. I was slightly surprised that the end result is fairly close to this original.

Once I felt comfortable with where the look & feel was going, I started crafting mockups prior to messaging. I intentionally went about it backwards (note, you should write copy first and craft your design around it); I started with a design and filled in messaging later. It’s a bit of a design no-no, but seeing that copywriting isn’t my strongest suit, it worked for me. I had something visual to write to.

I made several page mockups with the Bootstrap CSS3 framework in mind: 12 column layout, desktop container 1170px wide. I knew ultimately it would be responsive with a grid layout, yet clean and accessible.

I went right for it with a home page, about me, work page, and mobile mockup. I was getting excited seeing my ideas come together!

Diving into Development, and the Stumbling Block

At this point, I was beginning to see the fruits of my labor. Feeling energized, I wanted to dive head first into development.

To rewind for a second, part of my original goal for this site was to learn how to the develop code in a hands-on kind of way. I was already intimately familiar with HTML5 and CSS3, but since the new frameworks have come about recently I wanted to experiment with them. Bootstrap3 and SASS had just been released, and it was the perfect opportunity to dive in.

I had also wanted to dip my toe into learning PHP. I knew at a rudimentary level enough to navigate the backend of a WordPress site. But I wanted to be able to create a theme on my own. I knew this meant using a bare theme for WordPress, like Bones, and build a custom theme on it on my own.

I got as far as creating pages of HTML for front-end development, until it came time to make them into a theme. After many tries and days of frustration, it didn’t take long to realize I was over my head!

Reassessing the dilemma and finding a solution

Sad Girl

The pain of having to start your project over. This little girl gets it!

So I took a deep breath, and looked again at my mockups. Then it came to me ‒ I realized I could achieve the same result as building my own theme by using a pre-development theme. I just needed to find one with the same capabilities I needed. The search began with a customizable theme that could be adapted to match my original intention.

Luckily many themes incorporate page builders that allow you to craft the foundation, then go as crazy as you want with custom features and extra code. I found one that I liked that I could adapt, and for the most part, match the mockups I crafted earlier. However, in order to get all the functions I wanted, I did have to learn some PHP and Custom Fields wizardry to make it work. I was pleased that I was able to learn something from the experience. All it means is that I’ll have to leave building a custom theme for another time, and a project with more patience.

Armed with my new knowledge and new pages in process, I started to fill in all the content I needed to make the site a success.

Launch Day!

So here we are. 10,000 words, 58 pictures and 9 months later, my website is reborn! It feels like it has taken a decade, but in reality, despite the setback and a full-time job, it was a fairly quick job. And mostly importantly, an end product I can be proud of.

Do you like what you see? Have a need for a new website, new web content, or need to breathe some new life into your brand? Well, I’m your gal! I offer free consultations with new potential clients, so don’t delay, contact me today for your project quote.

Share