How a web design is created (and what actually the designer does)?

Being a web designer for more than 15 years, I often hear comments like “Oh, you make web designs, so you just draw pretty mock-ups?” That's just partly the truth. The true web designers are not just visual artists. They have to get their feet wet in the technical side, as well as to have skills of marketers and even copywriters. In this article I'll share what’s our team’s process of creating a web design, start to finish, from the designer's perspective.

1. Planning out the project

Everything starts with the client's idea and requirements. Even before drawing a single line of the wireframe, I have to discuss and understand the details of the project. That's not just the project manager's job – the designer must get familiar with every aspect of the task - from studying the client’s business field in detail, what are their marketing goals, through the back-end and all required functionalities. After all, the UI/UX is what the end user sees and its design must present in the best way possible all of the app's features. If I, as a designer, am not completely aware of the features, how they work and what's their application, I might translate them poorly in the UX, decreasing the entire project's value.

In most projects the client has already made more or less detailed study of the competitors and what they offer in their products, but nevertheless, I should make a market study on my own and get really familiar with the field of the given project. I have to become a part of this field, learn the terms, specifics and see what are the norms and best practices used by the competitors. This way I can be sure that I truly understand the project and will be able to create a design that stands out in the market.

2. Starting the work and splitting the development and design processes

After the project's specifications are done and confirmed, the actual build process starts. The tasks are mainly split in two areas – back-end structure and development and designing the front-end. The development team chooses the best framework, tools, plans out the web admin interface, the database and the overall infrastructure and starts building the project from the ground up. In the meantime, I start creating initial mock-ups for layouts of the front-end by sketching out the main elements and clarifying the user journeys for each major piece of functionality. It's important to have rough (low-fidelity) mock-ups as early as possible so I can easily discuss them with the dev team and the client. This way we might catch potential issues which are missed in the initial planning process and suggest the necessary back-end changes in time.

Having the flexibility to quickly adjust the initial mock-ups is important, because in this phase I’m in close contact with the client and I’m getting feedback frequently. That's why using prototyping tools such as Adobe XD and Figma saves a lot of time for both me and the client. When the initial mock-ups/wireframes and the user journeys are clarified, I can move to the next step of my work.

3. Creating the final designs and high-fidelity mock-ups

This is the phase when the actual appearance of the website is being built. In some cases I might already have requirements from the client, about what colors to be used and overall branding styles, which I must follow, but it's still up to me to make a unique design, which will be competitive in the project's field. Actually, the word “unique” is a bit of a cliché which I personally don't like. The most important thing is to make the design effortless to use and not hinder it with elements and features, just because they look cool. The design must complement the functionality, to catch the user's attention by its elegance and simplicity. The good user experience is not only the visuals, but the way the graphic design guides you through the journey of using the site. This is what makes your website attractive and memorable. The well working UX is not just a good graphic design either. I have to make sure that even the copywriting is well thought, that every button, error message, heading, footer text is in place and presents the website's product in the best way possible. This is why it's so important for me to study the website's field in detail and be familiar with the terms and practices in it.

Don't forget – always think responsive! Back in the day the designers were making pixel-perfect layouts for desktop screens and kind of neglected the mobile devices. That's no longer the case. Today the mobile devices' usage is getting such a large share of the market, that during the entire design process I constantly ask myself “How will this work on mobile?”. I can not make bold and wildly extravagant designs which will be amazing for print materials or desktop only, but unusable on small screens or touch devices. This is why it’s so important for me to know how everything will be sliced in the markup afterwards. Knowing what can be translated into HTML5/CSS3 is essential, because it’s not right to promise something beautiful, but unusable to the client. After all a website is always dynamic, it must be flexible – its contents can't always be predicted, like in a print design for example. What happens if a title is extremely long or a button has two rows of text in it? A fragile design is not a good design. That's why I make sure that each design is thoroughly tested and thought-through.

Once I have the final design mock-ups approved, it is time for slicing them into markup. I like when a designer can fully slice their own mock-ups, because this gives them the realistic view of how everything will be translated into live interfaces. Even if I have to send the mock-up files to another front-end developer, they will understand my ideas quickly, instead of wasting time wondering “How am I supposed to make this work?”.

In many large-scale projects it's not possible to prepare mock-ups for every single UI element at once. The work process requires an initial style guide and overall header, footer, form styles, which will be closely followed when creating extra pages, modals, sections, etc., after the main design is applied into the actual working templates. This way we can get to the next steps as quickly as possible.

Subscribe to our newsletter

4. Applying the design and taking first glance at the finished product

It's time to turn the beautiful picture into a real, working layout. I’m rolling up my sleeves and waking up the developer inside me. One of the things I like in being a designer at MTR Design is the chance I have to be a part of the entire design process from start to finish. This gives me the freedom to further develop my ideas even during the front-end build and make sure I have everything tested and working, just the way I've envisioned it.

Before starting to slice the designs I have to set up my local environment and run the project with the already built back-end. This requires setting up Docker, migrating the database and reviewing the template structure. Based on the used framework (Laravel, Django, Phoenix, etc.), I'm also getting familiar with the syntax of the different templating engines we use in our work. At this time I'm working closely with our back-end development team.

After the overall design is sliced and applied to the templates, the website truly comes to life. This is the most exciting moment for both me and the client - to do the “first test-drive” of their new website. Of course there are still more layouts to be completed before we're done.

5. Completing all layouts and performing full website test

During every step of the build the client follows the development closely. There might be new additions to the functionality, improvements to the UI, UX adjustments and in the end, we have a fully completed website, with even the smallest tooltip, button and modal designed and in their places. We always make sure to perform multiple tests of every feature we create, but we also make overall testing of the entire project before handing it over to the client for final review. This is one of my favourite moments of the entire process and I take it seriously. I'm literally trying to “break” everything – from the design, to the functionality, making sure there are no weak spots on any devices. When me and the dev team are done with the overall test, we are giving the project to the client for their seal of approval. We might fix a few more bugs and tweaks and then my work is almost done. Once the dev team carries out the project launch, it's also my duty to make an official final review of the live site.

I hope you liked my inside view of the designer's process of creating a website here, at MTR Design. As you can see, there's much more depth to making a perfect design than just drawing a pretty mock-up, and I'm happy to be a part of each step from the initial project review, through the actual front-end built, to the final testing.