Working with Web Designer. Development phase
Web Designer work in the project doesn’t end with creating the mockup of the client’s future application. When the cooperation starts, this person is still needed to make the idea from mockup real. Let us show you how web designer actions influence look and feel and bring the value to the project.
We have already written about the importance of the good mockup, which shows how the application we would develop may look and work. Once it’s ready, we present it to the potential client. We apply their changes in the project, if needed, and when the company is satisfied with the prototype – we start the development phase.
TECHNICAL SPECIFICATION AND WHAT IT GIVES US
The first thing that Joanna – our web designer – does after the project kickoff is generating a technical specification of the future application. She imports it from Adobe XD – the tool she uses to create mockup – because of its simplicity in usage and its quick synchronization with other Adobe programs. The other tools that Joanna recommends for mockup development (with many functionalities and expanded specifications) are Figma and UXpin.
The technical specification contains elements of the mockup content such:
- color palette (with colors hex, saturation),
- elements that you can save as SVG images (eg. icons),
- font types and sizes,
- elements’ height and width,
- properties of elements like margins and paddings.
Developers find useful to see the paths, interactions, and their triggers. They can see as well what were the animations – if used in the mockup – and their length.
OK, we can easily point the benefits of the technical specification for web designers and developers. But, what profit can it bring to the client? They can be sure that we will create exactly the same project they agreed on. We are able to fully reproduce what we designed in the mockup.
WEB DESIGNER’S FAVORITE FEATURES
When the client gets the specification, we start the development phase. Web designer and developers create application setup – environment, file’s structure. They use HTML5 and CSS3 with Sass preprocessor allowing to code in simpler, more efficient and more organized way.
It is also possible to make groups of CSS declarations for further reuse in your application. Whereas, in standard CSS you would have to write this element as many times as it is needed in the code.
Another nice feature in Sass – variables. They keep information that we want to reuse (colors, fonts, elements’ sizes and any CSS value). For example, when you want to change the main application color for dark blue, you don’t have to alter each line separately. You set color name in one place and it is automatically applied to the whole application. Our web designer simply loves this feature!
Joanna works closely with developers. Sometimes she prepares for them a kind of template where programmers can later create elements of the apps such left sidebar, right sidebar or navbar. Other times developers prepare a simple form with HTML Inputs and the send button. Then web designer creates its attractive visual look.
FROM MOCKUP TO IMPLEMENTATION
Our web designer is present during the demo meetings with the client. She shows the results of her work – both from UI and UX perspectives. In the first and second sprint of the project the application doesn’t look visually attractive. However, as the work progresses, the app starts to look nicer. Obviously, the interesting visual elements may appear later in case of bigger, and more complex projects.
The work on mockups doesn’t end with the start of the project. Every time the client comes up with the new idea or our team has an idea how to improve or add some feature, Joanna prepares a mockup. We discuss it with the client before deploying it in the application.
“The sequence of our actions is specification – mockup – implementation. Whenever we want to apply some significant changes to the application, we consider coming back to this path.”
Thanks to that method, the client can check whether the prototype of a new module matches with his vision of it.
Do you have some application idea? Contact us! Our team is ready to help you!
