Understanding the Creative Process behind Website Design

in Design, Social, Webdesign

This article has been contributed by Lori Wagoner.

The designing stage is arguably one of the most important stages of a web project. It typically involves giving shape to all the information defined in the planning stage. The main deliverables upon completion of the design phase are documented site structure and visual representation of the website.

A web designer should not only be technically proficient in web design platforms and associated technology, but also a creative individual who can think out of the box.

All web designers have a different creative process that allows them to achieve their designing objectives. But at its very core, the creative process for every successful designer remains the same.

Typically designers follow a step by step creative process. Let’s have a look at the 5 pointers that take you through this process:

1. Sketching / Brainstorming Ideas

Once you are done with requirement gathering and analysis and are very sure you know everything there is to know about the project, it’s time to get into your creative zone. Get a pencil and paper and sketch out your creative ideas!

Sketching is a great way to start any design. Using pencil and paper (or tablet) for sketching gives you the distinct ability to jump from one idea to another easily.

Wireframe Sketch

Whether you are a website design agency or a freelancer, being able to communicate ideas to clients with a sketch is really vital, especially during the early stages of a project. The best practice is to sketch out a bunch of rough designs for your ideas, narrow them down to a few and let the client provide feedback on whether you are on the right track or not.

Depending on the knowledge or expectations of your client, you may want to skip the sketches and move into some more detailed wireframes or style tiles.

Style Tile

2. Define Content & Create A Workflow

When your client green signals an idea or two, the next step of the creative process is to create a workflow. Creating a workflow includes creating a list of each section to be included on the site, with brief information on what type of content will be shown on each page.

The client is presented with the outline or the workflow so they can add, remove or adjust any sections or features. Sharing the workflow with the client gives the designer room for creativity and in turn helps in churning out innovative design ideas and keeps the client in loop at all times.

Website Sitemap

The client needs to approve the workflow before the project continues. This will help you develop a budget and time frame to build the site (not a part of the creative process but important all the same).

3. Low-fidelity Wireframe

Low-fidelity wireframes provide a framework for your creative designs. These wireframes are simple line drawings of website layouts that focus on placement of elements rather than color and type. They describe in detail what features will be on the site, such as user accounts, social networking functions or a newsletter sign-up. Low-fidelity wireframes are presented as a rough sketch to the client without graphics.

Low Fidelity Wireframe
Wireframe Sketch

A designer should not be afraid of experimentation while developing wireframes. Sometimes, as you fill in more detail, you may realize the original layout is not working well. That’s the whole point of the wireframing process; to make as many blueprints as possible in order to narrow down the best way of representing the information at your disposal.

4. High-fidelity Wireframe

Post low-fidelity wireframes, high-fidelity wireframes play a crucial role in providing a more realistic experience of the actual product, in this case your website. These wireframes provide a better outline of the product; filling in the details missing in low-fidelity wireframes. These wireframes define the visual hierarchy of the page, actual form and interaction elements, and often labels, instructional text and some copy.

High Fidelitity Wireframe
High Fidelity Wireframe
Prolo Wireframe

They are extremely helpful as they determine what content deserves the most focus and the percentage of space they can occupy on a page. They can be used in sequence to show how a specific task can be accomplished in a sequence of screens. These wireframes highlight how user friendly and intuitive the product is going to be.

High fidelity wireframes incorporate a level of detail that closely matches the design of the actual webpage though it should not dictate the final design or UX. So before finalizing, you should tryout different versions by experimenting with the 3 main components of wireframe information design, navigation design and user interface design. Finally, select the one that best suits your client requirement.

5. Visual Mockups

A web designer brings life to the wireframe by coming up with a visual representation of the website (see The Ultimate Web Design Workspace) .The mockup is meant to provide your web client with visuals of what the completed site will look like in a browser window before the web developer spends any time building the web pages.

Prolo Website Design

Prolo Website Design

A graphic mockup is the best way to show the client what the finished website will look like because it can demonstrate near-precise color, accurate representation of font sizes, and precise placement of all the navigation and content elements on the site relative to one another.

To achieve that awesome look and feel in the design, a website designer should be creative and play with the design elements and overall user experience. Experiment and choose the right combination of colors, fonts and typefaces that are ideal for the brand and website you’re designing.

The idea is to use a bit of trial and error to come up with a design that is unique, visually appealing and highly functional. That’s the mark of a reliable and effective creative process.

Lori Wagoner is the Web Community Manager for Ink Colour, a prominent printing equipment retailer in the UK. Lori has blogged at Tweak Your Biz, Get Entrepreneurial and many other business and tech blogs. You can reach her on Twitter.