What is design?

Design is not taking something and making it pretty. It’s not simply moving things around in Photoshop, or making something look beautiful without any background thought or reasoning. Design has a purpose.

“Design is a solution to a problem. Art is a question to a problem.

– John Maeda

To me, design is solving problems and achieving goals - either the act of planning, or the execution of that plan, or both. A visually appealing user experience may be part of those goals, but it’s far from the only aspect.

Designing for the web

In designing a website, usually the main goal is encouraging the user to perform a particular action or series of actions, and to make this process as frictionless as possible.

Another important aspect is creating that pleasing user experience, of which the visual design plays a part, and it all goes back into creating and strengthening the brand through these positive experiences.

These days digital design is more than creating a static website - we have to consider how a website will work responsively on different devices, different platforms and browsers, how users interact with the site, animations, microinteractions, users with different levels of ability and web savviness, and content management systems which allow the client to change content around completely. That’s a lot of different variables to deal with!

The brief

The design process usually begins with a brief - a set of goals, requirements, constraints and ideas about the project, often a collaborative effort between the client, account manager and designer. It is especially vital to know the goals and the target audience, to avoid an unfocused and ineffective website.

Often that this time we’ll get provided a style guide, logo files, photography, the client’s preferences or ideas, site architecture and content.

Capturing this information is an essential starting point to the design process, as every decision made should support the decided upon goals and will be guided by the requirements.

Research and Moodboard

With the brief and all materials provided, research and gathering ideas can begin.

Taking inspiration from offline sources, such the way people interact with the brand and products in the real world, can be a useful source of fresh and original ideas that address the problem in a unique way. Looking at competitors and other existing websites can also be helpful to see how others have implemented solutions, and what is possible to create in a website.

 

Moodboard
Moodboard

 

Moodboards are great for collating ideas and putting them together into a nice visual format. For clients, it’s a good way to check in and see if the direction is in line with their brand and focus; for the team it can be a used as a reference throughout the project.

The moodboards I create usually begin with all the provided visual elements; I then start adding other ideas, colours, fonts, typography, real world references, layouts, UI elements and animated micro-interactions.

Wireframes

As I’ve written previously, a wireframe is a simple visual layout, usually without colour or decoration, used to outline the balance and layout of content, elements, features and navigation. Wireframes are deliberately kept simple to convey the structure of a website or app without getting lost in the details of visual design elements.

Wireframes
Wireframes

 

Having experimented with different tools and levels of fidelity, I now prefer fairly low fidelity sketches. This way it’s just enough to show the layout, without focusing on the exact content or nailing down styling that should really be in the next phase. Often wireframes are intended mainly for discussion and iteration internally, with the chosen layout then either being tidied for client viewing or going straight into visual design before presentation.

Even if we’re not showing a wireframe to a client, I find it a useful exercise for getting ideas out of your head and onto paper quickly without wasting too much time on fancy tools.

Visual Design

The execution of the design from a wireframe into a visual design is the time to get into details. Using the moodboard, previous research and wireframes as a reference, and always referring back to the brief and goals, usually we create the design in Photoshop to explore the visual treatment of elements.

Design concept
Design concept

 

The user interface needs to both reinforce the overall brand through its user experience, as well as address the website’s specific goals. These needs guide the decisions made during the whole process, including the visual design.

The development team is kept in the loop throughout the design process, ensuring that all ideas are feasible to implement.

In general only one unified concept is shown to the client, rather than a range of options for them to choose from. Various ideas and options are of course explored internally, with only the best going forward to be shown. This both enables more time to be fully exploring one design concept rather than two or more, and takes the burden of a design decision from the hands of the client to those of the professional designer.

This chosen concept will be presented to the client, either in a design presentation meeting or accompanied by a phone call or notes to explain the decisions that went into it.

“Everything should be made as simple as possible, but not simpler.”

– Albert Einstein

Iterations

Every design goes through multiple iterations, even if they are only done internally in order to find the best possible design to put forward to the client.

After the design presentation, clients will be given the opportunity to suggest changes to the design before moving forward. As a designer, I try to keep the perspective of the website’s goals in mind when considering any suggested alterations, explain the reasoning behind decisions made and offer alternatives if there are any issues.

Getting the design approved is important at this point, as with each step forward changes become more difficult and time consuming to implement.

Handover & Development

The approved design is then handed over to the development team to build and implement, bringing the functionality of the website, the interface and the interactions to life.

Communication between designers and developers is vital, to ensure that the concept is built according to the vision for it, and that the user experience is smooth and considered. Questions and discussions happen throughout the design phase and continue during development, as decisions about interactions, mobile responsive considerations and other user interface elements need to be made.

Once the website has been built and content has been placed, a final look over by a designer is done to make sure all is looking as it should before the website is made live.

Summary

The design process will vary between different agencies and designers, but is always built on a foundation of research and problem solving to suit the needs of the client’s client, the end user. We are constantly tweaking this process to make it more efficient and more effective, give the best possible user experience.