See the interface “through the eyes of the designer”: on the interaction of the front-end with the designer
The interface designer and frontend developer are different specialists, but their tasks are closely related. So much so that smart designers understand the basics of layout, and programmers know the principles of good design. This helps to avoid misunderstandings and get the expected result. Details says Vladimir Sinitsyn, head of Design and UX in Netology.
Hello! Here are two main reasons why front-end developers need to know the basics of design.
The designer makes the layout, and the front-end developer turns it into a full site interface. A high-quality product is obtained when both specialists understand the essence of each other's work.
Designers often think unusual and find innovative solutions for the web interface of the site. It is easier for a front-end developer to understand the logic of the designer, understanding the flow of his thoughts.
Collaboration systems with layouts do not always simplify work. Now the systems for creating layouts are so developed that the designer can transmit to the front-endner all the necessary information without personal meetings and discussions - simply organizing joint work in the program. On the one hand, this saves team time. On the other hand, the developer needs to understand the colleague’s idea and figure out how the layout design works. Otherwise, long discussions and improvements cannot be avoided.
I will give some tips from personal experience on how to establish cooperation and make team work comfortable.
If you are a designer and prepare a layout, try to simplify the work of the front-end developer:
If you are a front-end vendor and turn the layout into a site interface:
When each team member understands what his colleagues are doing and how to simplify their tasks, the work goes smoothly. The result is a quality interface, delivered on time.
A developer with a good knowledge of design can become a universal specialist and close two positions at once.
Large companies are willing to pay two separate specialists - a developer and a designer. In other segments of the market the situation is different - often companies prefer to hire universal specialists who alone can close a large pool of tasks.
Site builders are now popular and most CMS systems work as constructors. With their help, a programmer can also make a simple interface, but designer skills are still needed to create a high-quality layout. Designers massively use small companies and private customers. It is more profitable for them to hire a universal specialist who will make the layout and turn it into an interface with or without a constructor. A similar situation is with freelance.
I immediately recall a good illustration of the 20 basic design principles. I advise you to start diving with her.
At the next stage, understand in practice the interface creation tools: Figma, Adobe XD or Sketch. Read, look at the reviews of each and choose which is closer to you. The main thing is not limited to manuals. Watch them and immediately practice your skills in practice, right in the tool.
In the future, I recommend to understand 3D: Cinema 4D and Adobe Dimension programs; and interface animations: ProtoPie and Adobe After Effect.
In the University. I will not recommend universities, they give too much extra for a quick start, and the training itself is stretched. If this is your first education, then you can go to university for the sake of a diploma. Those who already have an education should look towards intensities (they are taught even at some universities) or online courses.
Independently. Self-education is suitable for those who know how to filter and structure information, have perseverance and self-discipline. Now in the public domain there are too many not always verified and useful information, in it you can get confused and move away from the necessary skills even more.
At online courses. An option for those who care about getting structured information, instruction, and feedback from teachers.
We launched the course “ Web Design from Zero to Middle ” and we invite front-end developers who want to master the interface precisely “from the point of view of the designer”.
Four and a half months of training in video format, workshops and analysis of homework. We consolidate the theory with practice, and also master the main tools of a web designer.
Hello! Here are two main reasons why front-end developers need to know the basics of design.
The first reason. Frontender and designer solve a common problem
The designer makes the layout, and the front-end developer turns it into a full site interface. A high-quality product is obtained when both specialists understand the essence of each other's work.
- The designer must understand the basics of layout and CMS (if he makes a layout for the control system). This allows you to better define technical constraints and how difficult it will be for the front-end to implement the idea.
- The developer must correctly understand the logic and structure of the layout, figure out what and how it works, how the animation is displayed, how the interaction between the elements on the page occurs. Because the ideas of designers are not always obvious at first glance.
Designers often think unusual and find innovative solutions for the web interface of the site. It is easier for a front-end developer to understand the logic of the designer, understanding the flow of his thoughts.
Collaboration systems with layouts do not always simplify work. Now the systems for creating layouts are so developed that the designer can transmit to the front-endner all the necessary information without personal meetings and discussions - simply organizing joint work in the program. On the one hand, this saves team time. On the other hand, the developer needs to understand the colleague’s idea and figure out how the layout design works. Otherwise, long discussions and improvements cannot be avoided.
How to establish interaction between a designer and a developer: basic rules
I will give some tips from personal experience on how to establish cooperation and make team work comfortable.
If you are a designer and prepare a layout, try to simplify the work of the front-end developer:
- Work on the grid. Yes, asymmetry as a technique is now becoming popular, but it should also be inscribed in the grid.
- Type objects as much as possible in the layout. Typing facilitates and speeds up layout.
- Show the states of objects in the interaction.
- Sort the layers and name them with friendly names. For example, the header layer is header, the buttons layer is buttons. So the developer will quickly figure out your layout.
- Collect all the images, icons, fonts and other elements in one place, so you don’t waste time later exporting elements from the layout.
- Create a UI kit on a separate page and show all the states and elements.
- Do not be too lazy to comment on the prototype layout before passing it to the front-end vendor - this way a colleague will figure it out faster.
If you are a front-end vendor and turn the layout into a site interface:
- Feel free to ask the designer a question if something is not clear.
- If you see from experience that you need to make changes to the layout, first discuss them with the designer. Any changes need to be agreed upon.
- If the project is a team project, at the first stage of work, discuss with colleagues what tools you plan to use and how best to transfer the layout to you for layout.
- Do not be afraid to discuss design and give constructive comments. If you see that something cannot be realized, explain why and what can be replaced.
When each team member understands what his colleagues are doing and how to simplify their tasks, the work goes smoothly. The result is a quality interface, delivered on time.
The second reason. It is easier for a developer who knows design to find a job
A developer with a good knowledge of design can become a universal specialist and close two positions at once.
Where front-end designers are in demand
Large companies are willing to pay two separate specialists - a developer and a designer. In other segments of the market the situation is different - often companies prefer to hire universal specialists who alone can close a large pool of tasks.
Site builders are now popular and most CMS systems work as constructors. With their help, a programmer can also make a simple interface, but designer skills are still needed to create a high-quality layout. Designers massively use small companies and private customers. It is more profitable for them to hire a universal specialist who will make the layout and turn it into an interface with or without a constructor. A similar situation is with freelance.
What to learn about design first if you are a front-end developer
I immediately recall a good illustration of the 20 basic design principles. I advise you to start diving with her.
At the next stage, understand in practice the interface creation tools: Figma, Adobe XD or Sketch. Read, look at the reviews of each and choose which is closer to you. The main thing is not limited to manuals. Watch them and immediately practice your skills in practice, right in the tool.
In the future, I recommend to understand 3D: Cinema 4D and Adobe Dimension programs; and interface animations: ProtoPie and Adobe After Effect.
Where to study
In the University. I will not recommend universities, they give too much extra for a quick start, and the training itself is stretched. If this is your first education, then you can go to university for the sake of a diploma. Those who already have an education should look towards intensities (they are taught even at some universities) or online courses.
Independently. Self-education is suitable for those who know how to filter and structure information, have perseverance and self-discipline. Now in the public domain there are too many not always verified and useful information, in it you can get confused and move away from the necessary skills even more.
At online courses. An option for those who care about getting structured information, instruction, and feedback from teachers.
Advice
- Learn the basics of design in order to better understand the layouts and turn them into interfaces without much discussion and refinement.
- Study the design in depth to become a universal specialist and apply for positions not only in large companies, but also in digital agencies, start-ups, and look for customers on freelance.
- Master the designer’s tools not by manuals, but manually - open the program and understand it.
- If you are ready to filter information and find useful training materials on the Internet, learn design yourself. If you want to speed up the process and study in a structured, relevant program, choose courses.
If you are ready to learn the basics of web design, we invite you to a new course in Netology
We launched the course “ Web Design from Zero to Middle ” and we invite front-end developers who want to master the interface precisely “from the point of view of the designer”.
Four and a half months of training in video format, workshops and analysis of homework. We consolidate the theory with practice, and also master the main tools of a web designer.
All Articles