From Wireframe to Visual Design – Establishing Initial Concepts

The creation of visual concepts is a process that many visual designers may be familiar with. My process may differ a bit from others, or may be altogether unfamiliar to those who only see the completed concepts. Often I find that people think it simply ‘happens’. I assure you, it does not. The process can cycle through 4 phases: Wireframe hand off, Visual Discovery, Digital Execution, Presentation.  As a Visual Designer, I will focus on the process I take once wireframes have been handed over by the Interaction Designers (and how we create beautiful, informed and usable visual solutions!)

Wireframe Handoff

Wireframes are the bare-bones of the interaction. Akendi is experienced in creating systems with hundreds or more pages. It’s up to the Interaction Designers to establish interactions and task hierarchy inspired by the research they’ve conducted and create wireframes that are versatile and minimalistic. Once the wireframes are approved by the clients, we Visual Designers step in. I meet with the Interaction Designer and they tell me what they’re trying to achieve, who the users are, and then walk me through the wireframe step by step. I ask a lot of questions and raise any concerns that are obvious at this point. It’s imperative that the communication with the Interaction Designer stays open throughout the rest of this process.

The Visual Designer first has to identify which wireframe templates to start with out of potentially hundreds of wireframed pages. To determine this we generally assess the complexity of the wireframes as well as simple constraints such as resolution or type size. The Visual Designer must extract a small number of templates from diverse and complex wireframes in order to create a visual system. The number of templates executed is determined by the complexity of the system – each case has a different set of requirements. We identify common elements that will be used across the product e.g. buttons, drop downs, etc. Finally, the templates must speak to the project’s brand which might include exciting colours and themes, and always includes some rudimentary interactions that businesses and their customers are used to. Thus, the Visual Designer must choose templates that fit all constraints and work with the oddest elements among the wireframes, all the while speaking to an existing or growing brand. We would never execute a complete set of wireframes, creating the visual system is about being able to recycle visual elements from a small number of final visual templates to execute all the required pages for a large system in a consistent way.

An example wireframe

With the wireframes templates chosen, the Visual Designer takes the project to the next phase: Visual Discovery

Visual Discovery

This is about the emotional impact of the design, which at the end is what everyone sees. Though wireframes are a vital element in the concept, they add functionality and good interaction, which is what makes people want to keep using something – they do not add the emotional element.  So wireframe templates are temporarily set aside in favour of a search for abstract visual directions. The focus here is on creativity and collecting inspirations. We draw inspiration from a variety of sources including: dribbble, pinterest, pop culture, and more. I use a mood board because of how enormous some collections become. The Discovery phase is messy and playful. Then, through sketching, the Visual Designer synthesizes new visual directions. The act of sketching strips away the aesthetics and allows me to focus on the themes or ideas – jumping straight into digital will often become too fidgety. From here, about 6 sketches are chosen to work with the wireframe templates. The Discovery is complete – on to Digital Execution!

Digital Execution

Executing the design into digital elements starts with a grid. The grid obeys project constraints on elements such as resolution, columns, spacing between elements, etc. From there, the execution is largely a matter of intuition and skill. Here is where you blend the structure with the sketches. Experience greatly impacts this process – more experienced designers will have more developed systems to help them through this part. A back-and-forth cycle begins where work is presented to other members of the design team (visual and interaction), and privately reiterated. After final touches, the roughly six visual directions have become six visual concepts, ready for presentation. Often some of the concepts are abandoned at this stage because it becomes obvious that they may not be working or adding any insight as to how to solve the visual problem.

The Presentation

The presentation is a matter of unveiling the design, but also a matter of listening and seeking more ideas. Here we explain each approach and the underlying concept or theme applied to each idea. Clients are then encouraged to identify their single favourite concept, as well as any appealing solutions and elements from the other concepts. Clients must be given options during the presentation where new, practical, constraints might emerge in dialogue. The clients’ choices are taken back to create a final set of template designs with the most effective solution.

An example concept based on the wireframe.

This is a snapshot of the process I go through. Although the length will vary from project to project, it may give you a rough idea of what goes into creating visual concepts. This process allows us to explore a plethora of options as we emerge with the final ones to present. It’s a lot of work, but it’s also a lot of fun!