Programmers develop the coding of applications. It’s crucial work but it is nothing without the work of a good Web Designer. This is the person who creates the first image we encounter—the visual layout of the product. In our new series of Web Designer articles we will explain more about their tasks and role in projects, as well as the tools of the trade. We’re starting with mockup design—one of the first steps in our cooperation with a client.

Our Web Designer, Joanna, participates in projects from the beginning. She is present on the very first meetings, along with developers, when the client outlines his needs and expectations. The designer listens carefully to what the customer needs and sketches some ideas of how design could work as a valuable function in the project.

WEB DESIGNER’S QUESTIONS

Joanna presents her suggestions right after she has them, so that the cooperating company can quickly see what’s possible. At Synergy Codes we always want to create cross-browser applications. The designer therefore needs to bear in mind which browsers the future app should support. It is also important to know whether the application will use responsive web design and operate on mobile devices.

The app should also be consistent with the rest of the company’s programs or systems. The designer checks if the client has an identity book and familiarizes herself with which visual solutions the client prefers. She collects as much information as possible, to design the best mockup, using her IT background to take care of both visual and technical aspects of the design.

PROTOTYPE DESIGN

Work on a mockup always starts with a conversation with the client or a meeting with the business analyst and developer from our team if web designer isn’t able to attend a workshop with the client. Regardless of the introduction to the project, the next step for Joanna is always drawing on a board what she understood from the conversation. The developer and business analyst are on hand to review her observations and ideas. When they are all decided on the final prototype concept, Joanna begins the design process, regularly consulting with developers as she builds her visual solutions.

PROTOTYPING TOOLS

Our web designer often does paper prototyping. Handmade shapes and colors are sometimes enough for her to show how the application will look.

She also uses prototyping tools such as Balsamiq (for sketches) and Adobe XD (for interactive mockups).

Joanna uses Adobe XD together with Photoshop and Illustrator to create layouts. When several screens are painted, Joanna links them in the prototyping feature of Adobe XD. She can get numerous connections from one screen, which allows her to make a mockup look like a data flow diagram application. It is sometimes so convincing that the client mistakes the prototype for a working application.

WHY MOCKUP IS IMPORTANT?

We usually start working on the project with a prototype so the client can be sure that we properly understood his business and expectations. It also gives him a possibility to check our idea before we bring it to life. That’s why we devote so much attention to prototype design; we want it to be visually attractive and work as well as it is possible. We’re able to create a solid and interactive mockup in two weeks.  

Do you want to learn more about how we work? Visit our Web Applications Development tab and follow our Web Design series on the blog. 

This post was also published on Medium.