Designing a website at Evolution.

Websites /

March 2020

This month, as web designer here at Evolution Design Agency, I thought I could take you through Evolution’s unique approach to designing custom website themes. We design custom WordPress website themes, not by using an off-the-shelf purchased theme, but by creating it pixel by pixel. And this is how we do it:

Once the on-boarding stage is complete each website enters the Design Phase and so, lands in my inbox to start work on. We have recently completed a standout custom designed and developed WordPress website for Fairy Park in Anakie (see it here). At the beginning of this project, the Evolution team sat down with Garry to outline exactly what he wanted to achieve with a brand-new website, forming a brief for me to dissect and create a masterpiece from.

1. Research & Mood-board

I start each website, no matter the size, price or client, exactly the same way – with some in-depth research. The end product of this stage is a mood board that I share with the client for purely visual reasons, but what happens behind the scenes is quite a process. I take a detailed look into who the brand is, what the key message is, who the target market is and how they behave, as well as what the competitors or industry leaders are doing – taking notes and brainstorming ideas as I go. To bring together a visual mood board, unique to each client, I use these notes and ideas and search through several online resources to find examples that match.

2. Feedback & Client Collaboration

During my chat with Garry about the mood board for Fairy Park, we chose a few design examples that he connected with and could see potential in for the park. Then, I spend a week absorbing everything I’ve researched, all the functionality components included in the project and get my creative juices flowing.

3. Wireframes

Each design starts with some wire frame sketches in my handy Cahier Moleskin Journal (myrtle green is my personal preference).

4. Designing in Adobe Illustrator

Once I’ve fleshed out some layout ideas and the general order of sections on the home page, I jump into Adobe Illustrator and recreate the wireframe at scale, working in black and white only with no brand or style cues. Images and coloured areas are represented by grey boxes and generic placeholders are used for headings or text. Doing this gives me an indication on the length of the page, the size of the sections and allows me to see any layout themes or patterns.

5. Font Selection

Once I’m happy with the general layout, I start to add the visual elements. Picking a web safe font from Google Fonts is usually first – I chose ‘Bershire Swash’ for Fairy Park’s headings and ‘Raleway’ as a secondary font because it has good readability.

6. Brand Colours & Personality

At this stage, I also start adding brand colours and images to add some personality. Slowly adding in graphic elements section by section, I start to see the website come to life. After each working session, I go back to my original notes and the job brief to make sure everything is included, and no idea is missed, pushing myself to be more creative each time I revisit the design.

7. Design Completion & Team Collaboration

Once the transformation from wire frame to design is complete, I send my ideas over to our web developers to review for functionality issues or anything that is out of scope, before I send it off to the client for their first look at their new website!

8. Presenting the First Draft

In my experience, the best way to review the first draft of a website is to sit down with the client face to face (or screen to screen) and go through each section of the design to explain why we’ve decided to include it, making sure all the right sections are included and it meets the brief.

9. Perfecting the Design

Often when during my meeting where I present my first draft to a client they are able to better visualise the site, as though it is almost coming to life… We carefully map out and consider consider how the site is to be used by the visitor and we make changes to enhance their experience at this time, perfecting it for the ultimate user experience.

10. Handover to our Development Team!

The final stage of my role in website design phase is to package up the approved site in preparation for our web developers to take over, interpret the design and create a functioning website for our clients. In Fairy Park’s case, I exported the design files so that each graphic element was a separate piece, along with a breakdown of the colours and fonts used and a list of all the functionality inclusions in the project.

Everyone at Evolution is over the moon with the outcome for Fairy and so glad to play a part in their business growth.

If you want to receive monthly emails from the Evolution team with our latest blog post, hot off the press, please sign up here.

 

Related reads

View All Articles

Why DIY websites can end up costing you more!

Receive a $120 tax deduction for every $100 spent on your website

7 Reasons to use WooCommerce to build your online store

Why you should avoid drag and drop website builders

7 Reasons Why Your Website Isn’t Ranking On Google

$30k business boost competition with BayFM

Designing a website at Evolution.

Should I purchase a WordPress Theme?

Are you making these SEO mistakes?

Suffering Cart Abandonment Issues?

Good Digital Citizens

Your Google Map might disappear in June

The internet is changing in July! And it affects us all …

Merry Business

12 Things All Successful Websites Have

SE…what?

Why remarketing is the fastest growing form of digital marketing

How to decide which keywords you should be targeting.

What is the difference between a $500 website and a $2,000 website?

What are web alternative fonts and why do you need them?

Why you need to be so clear on your ideal customer

What you need to know about SEO when Google is forever changing

FREE Photos – 20 Top Sites for Downloading Totally Free Photos

Is Your Website Annoying?

The Power of Blogging in Business (Part 3) – Finding Ideas to Blog About

The Power of Blogging in Business (Part 2) – Finding Time to Blog

The Power of Blogging in Business (Part 1) – Why Have a Blog?