Web Designer
Who’s a web designer?
A web designer is a specialist who is responsible for designing and visualizing a website or web service. If the site is well thought-out structurally and interfacely, the visitor will quickly find the information he needs and reach his goals.
What does it usually do?
- Forms a portrait of the user;
- Develops a scenario of user interaction with the site;
- Conducts a briefing with the client;
- Studying competitors and their indicators;
- Analyzes the site with the help of web analytics services;
- Projects the interface of the site or web service;
- Develops prototypes;
- Draws design concepts;
- Designs layouts and graphic elements of the site;
- Supports and improves existing sites: draws additional. layouts and graphical elements of the site.
Why is it useful for a web designer to know the frontend technology?
Many people believe that the main thing for a web designer is to make the site “beautiful”. But in fact, the web designer should strive to make the site convenient and comfortable for the user. And for this it is important to have a basic understanding of the processes of creating and displaying the site.
In the Western market, for example, knowledge of web technology designer is a very desirable skill and can often be decisive in selecting a candidate. We have this opinion is not so popular, and many web designers believe that the frontend – a territory of developers: boring, unnecessary and limiting the creative aspects of work. But it is not so.
Web-technology – is another tool in the arsenal of the designer, which can be useful if applied at the right time. Let’s see when a web designer can use the knowledge of make-up.
Basic understanding of what the site consists of and how it is built
Knowledge of front-end technologies helps to understand better how its drawn models “come to life” and become blocks on the site. As an example we can give interior designers. Often they know not only 3D-editors, in which design the interior, but also well understand the final materials: wood, stone, wallpaper, fabrics and more.
Good interior designers know these materials tactilely as they complement each other, and how to use and integrate them into the interior. They know all the difficulties and pitfalls of each material. This helps interior designers to find optimal solutions, both in terms of quality and durability, and the final price of the project.
However, among web designers it is customary to think that their tools are only graphic editors. But this is not the case. Picture in the editor and the real block on the site have little in common.
Assessment of the labor intensity of your decision
When the designer understands how and what is being done on the site, he begins to assess the cost of his decision: whether it is worth the time in this particular case, and how many hours to develop it.
If a designer does not have an understanding of how to create a site, how it is loaded, as well as how much the site is rendered to the client, the visual solutions of such a designer can often affect the long and expensive development.
And okay, if it justifies itself in the long run, but sometimes it happens that it is a question of third-step pages or scripts, and the creation of this takes a few days.
The designer begins to think in blocks and components
The designer stops thinking with page layouts. He begins to think systematically: he better structures and splits the content into layers, blocks, components. Such thinking helps to reduce the number of unique entities when there is no obvious need for them.
This approach not only optimizes the developer’s work, but also helps the user to solve their problems faster due to the greater consistency of elements.
Design right on the website
The designer often has to make corrections to projects that have been closed for a long time. If the changes are small, it is often easier and faster to make them directly on the work site. To do this, you do not need to look for layouts a year ago.
Instead, you can open a site in your favorite browser and fix the necessary elements in the inspector, add some new ones, test on the necessary permissions and immediately transfer the changes made to the development.
Simplifies the transmission of animation and other “beauty”.
Visual style and animation is the territory of the designer. If the process of transfer of layouts in the development is already established, the transfer of animation is still painful. To create animation designer usually uses Principle, Adobe After Effects, less often Invision Studio, or is limited to primitive built-in features of the main editor.
One way or another, developers often do not have these tools, so most often animations are transmitted by recorded views. They are very difficult to track the desired timing of the animation, guess the right ising-function and other parameters that the designer so long and scrupulously sharpened.
The result is a misunderstanding: the developer did something, but not like in the video. The designer asks to remake it, expresses his thoughts in terms of graphic editor, the developer tries to translate them into his own language.
After several such loops, the right solution is found. However, if the designer had opened the codepen from the very beginning and created the most difficult animation for the transfer of animation, it would have greatly accelerated the process of working on the project.
Animation is the territory of the designer. And a good developer has something to do in addition to all sorts of “rushes”. He still has to “revive” the site itself: fill it with real data, optimize the load, think about accessibility and much more. Spin the izing-function conditional animated arrow – the last thing that cares about him.
But it is important for the designer. That’s why it’s easier and better to create animations at once in the environment where they will eventually live. It will help to stop in time and not to enter the processor of the computer in anabiosis of the dizzying animation. And also it is madly interesting – to animate your own models on real web technologies.
One language.
Basic knowledge of front-end technologies helps the designer and developer to communicate more effectively. The team starts to speak the same language. The developer, of course, is a native speaker of the language, the designer is rather a tourist, but even this is enough to better interact, achieve joint results faster and make projects cooler.
Good communication is especially important when working on the design system – the trend of the last few years for most digital brands. The final repository for any design system is always a repository with ready-made components and styles. Guess what they are written on?
That’s right, on front-end technologies. Therefore, the better the communication and understanding between the designer and the developer in the team is established, the better the design-system is thought out. And, as a consequence, it becomes more convenient to use and maintain it.
Thanks to this, the design system is extended and supplemented, and the process of creating new digital products with its use becomes cheaper and easier.
Framer Studio
In addition to all of the above, knowledge of front-end technologies allows you to make full use of such a powerful design tool as Framer Studio.
In it it is possible to draw layouts or import from Sketch, Figma and Photoshop, create interactive animations, design complex prototypes with the ability to export to html, css and js for further testing on user studies. But alas, for most of this you need a basic frontend.
inference
Knowledge of HTML and CSS today is not something very narrowly focused and accessible only to a select group of people. The basic layout is needed not only by front-end developers, but also by other specialists.
Today it is a necessity for people who connect their work with the Internet. Interface designers are no exception. To meet the trends, we advise you to follow the market changes and decisions of Western authoritative specialists.
And here I would like to make a note: site layout and understanding of the basics of JavaScript are their mandatory skills. This trend gradually comes to the Russian market. And we recommend to be ahead of the trends.
