Behind the Scene of My Website Design Process

 
Oct 11.jpg
 
 

One of the reasons I wrote this blog post is to educate my clients about what goes on behind the scenes of website design.  Most people, including my friends and family, think web design is about placing pretty pictures in Photoshop. There are quite a few steps when it comes to creating a website. Below are steps that I follow each time I design a new website.

Discovery

The Discover phase of the web design process is all about information-gathering. As your designer it’s crucial for me  to understand your needs, the intricacies of your business, your target market and who your customers are, and what ultimately is the goal/purpose of your website. I always ask a few questions before I start working on a website:

  • Who are your competitors?
  • Who is your ideal customer?
  • Describe the concept, project or service this site is intended to provide or promote.
  • What is the goal of your website?
  • Who is coming to your website?
  • What is your dream for this website?
  • What is the budget?

Inspiration / Ideation

Another important part of my design process is walking. I love walking. I walk 5 - 7miles every single day, rain or shine. Walking is very beneficial for overall health. Walking strengthens your bones and your muscles, improves your mood (trust me on this one), and improves your balance and coordination.

Most of my ideas come to me during my daily walks. Without any distraction I let my  thoughts and ideas come freely, without directing them or concentrating on any one of them.

On my walks I always carry a sketchbook (with me) to write down or sketch out  any ideas that come to my head. Sometimes I take pictures w/my iPhone, but I try to  avoid it, since it can be a big distraction (once I pull out a phone from my pocket, I want to check my email, FB, or IG and poof, inspiration is gone) . Instead I soak in all  the beauty that surrounds me, or as Sir Paul Smith once said: ”You Can Find Inspiration in Everything”. In a beautiful city like San Francisco, with so many parks and pretty Victorian homes, inspiration is everywhere. I feel very blessed to live here.

Sketch ( wireframing, lo-fidelity + high fidelity )

After my walks, relaxed and mind full with inspirations I start translating those ideas into website sketches. This process is called website wireframing. A website wireframe, also known as a page schematic or screen blueprint, is a visual guide that represents the skeletal framework of a website. Wireframes are created for the purpose of arranging elements to best accomplish a particular purpose. The purpose is usually being informed by a business objective and a creative idea. The wireframe usually lacks typographic style, color, or graphics, since the main focus lies in functionality, behavior, and priority of content.

Wireframes.JPG
wireframes
Wireframes.JPG

Visual Design

Once the wireframes for the site has been defined, the next step is to create visual style. Before I start working on visual design I like to create mood board. Mood board is a collection of textures, images and text related to a design theme that serves as a reference point. This helps me decide what colors, images, and fonts I’ll use through visual design process.

Usually I create several versions of the design that will be presented to clients, so they can either pick the most suitable design or give more feedback. We, (designers) love to have creative constraints, in fact constrains are crucial for creativity. Clients often say : “do whatever you want, you are the designer”. Unfortunately, boundless freedom isn’t always helpful.  Constraints play a special role as drivers  of discovery and invention. Constraints are not the  boundaries of creativity but the foundation of it.

Squarespace template.jpg
Squarespace template for yoga studio.jpg

Coding

It’s time to flesh out design of the pages into squarespace environment, develop content, and build out the HTML and CSS of the site.

Testing

Before the site is launched it is critical to rigorously test it. This should include, testing for broken links, broken design elements, and for functionality. Also at this stage your site will be tested in different browsers  (Firefox, Safari, Chrome) and across multiple devices (laptops, tablets, and mobile) for extensive troubleshooting.

Launch

YAY, the launch day is here! After the site was tested and approved by the client it is time to launch. Hold on, the work is not over yet. You should be prepared to address any feedback from users adapting to the new site. Expect to make some immediate changes to the site, such as fixing broken links, editing copy and making adjustments.

 
Boris JovanovicComment