There are quite a lot of areas related to design in the IT industry. The most common of them are designers, hidden behind the acronyms UX and UI. Well, some people even manage to include front-end developers as designers. Let's try to figure out who designers are in the IT world, what the difference is between UI and UX, and what relation front-end engineers have to design.
Designers
Developing the interface of applications, websites or games is a rather complex process and requires the application of knowledge from different fields: engineering, psychology and design. User interface designers (in English - User Interface or UI) focus on the way the functionality of the site is displayed (search, tabs, menus) and the details of the interaction between the client and the interface. The goal of a UI designer is aesthetically acceptable modern product design . UX stands for User Experience, which means “user experience”. A UX designer is more focused on the usability and understanding of the interface by the potential user. Such a specialist will often conduct research and surveys that will form the basis for creating a design concept, and also test concepts during and after development. It typically focuses on structure, content, navigation, and how the user interacts with these elements.
It produces sitemaps, prototypes, which are the basic structure when creating software. The goal of a UX designer’s work is for the user to quickly and painlessly get from the site what he came here for . However, today it is very common to see these two specializations written with a slash. That is, the tasks of both directions are performed by one specialist. A UX/UI designer designs the user's interaction with the interface, decides what exactly he needs to do and is responsible for how this interface will look as a result.
What a UX/UI designer needs to know
Graphic editor . The most popular tools on the market are Adobe Photoshop, Adobe Illustrator, as well as Sketch, Figma. Choose an editor that is convenient for you and first try to draw screenshots of a website or application, modernizing them a little.
Prototyping tools (Mockplus, Axure) . A prototyping tool is the link between an idea and its implementation. It doesn't matter what tool you use. You can try several and decide on the one that suits your style and preferences.
User psychology. Already at the design stage, you should think about whether it will be convenient for you or someone else to use this interface. Put yourself in the client's shoes, build a strong connection with him and be attentive to his needs. After all, a product will be successful if there is demand for it.
You will also need knowledge of color theory . We know some things from childhood, especially those who went to art school. However, there are certain specifics regarding the work of designers. Basic knowledge can be obtained from books or articles on the Internet.
Depending on the specifics of the work, you may need an understanding of HTML and CSS or (some) programming languages (links to resources can be found below, in the section “What a Front-end Developer Should Know”).
Front-end developer
The main task of a front-end developer is to develop the client part of the interface. That is, such a specialist “revitalizes” what the designers designed. He is responsible for the operation and operation of the interface and less for the visual content. A front-end developer often needs to find a good solution for the user interface during its development stage, so he often collaborates with a UX/UI designer. The code written by the front-end developer runs in the user's browser (as they say, "on the client side"). Also, one of the most important tasks is to ensure that the site or web application looks the same on all platforms and browsers.
What a Front-end Developer Should Know
As a rule, the front-end is based on three pillars: the HTML page markup language, CSS style sheets and the JavaScript programming language. In addition, the front-end developer must understand the principles of operation of the HTTP protocol, servers and browsers, and the features of displaying the interface on various devices that are currently on the market. Tools and methods for creating web interfaces are constantly evolving and changing, so the developer must constantly monitor this.
HTML and CSS (layout)
This is the layout, the very bricks from which the site is built. The HTML markup language dictates the site's organization, content, and all interactions between them. It allows you to designate the top of the page, the bottom, side blocks with content, headings, display of text and multimedia elements. CSS style sheets are used to decorate HTML elements. They determine exactly how each graphic element that is located on the page is displayed. Using the latest versions of HTML5 and CSS3, you can place video and audio components on a page, create 2D images and animations, and even write simple games. There is no need to try to remember all the tags and styles at once. It will be helpful to learn the basics and put them into action right away. A very good site where you can learn the basics of HTML and CSS is W3School. But only if you have at least basic knowledge of English.
Also, the front-end developer must understand cross-browser and cross-platform development, adaptive and responsive layout.
Bootstrap
It is a framework for HTML, CSS and JavaScript. That is, certain templates from which, like from a constructor, you can assemble sites much faster than without them. But, of course, you need to customize it to suit your needs yourself. If you know English, we recommend the getbootstrap website and the same w3schools .
JavaScript
Javascript is the core of front-end development. This is the first and most widespread interface programming language. It can add a lot of features to the site. At a basic level, this language allows you to add interactive elements to a page. It is used to create maps that update in real time, interactive online games and movies. In our senior JavaRush courses, we learn a little JavaScript. You can also study it at the same W3School or read about it in Russian on the website javascript.ru .
jQuery
jQuery is a Javascript library that contains plugins and extensions that can make development even easier and faster. Instead of writing code from scratch, libraries allow you to add ready-made components, which can then be customized for a specific project. You can use the functions of auto-filling search forms, rearranging and resizing the grid, and setting countdown timers. Hands-on jQuery course at w3school
Javascript frameworks
There are different types of frameworks, but you can choose one that is convenient for you to use. The most famous are Angular, Backbone, Ember, and React. They represent a ready-made structure for code. They help speed up development. And in combination with libraries they can minimize the development of a website or application from scratch. Review of the 5 most popular JavaScript frameworks and libraries of 2017
Git version control system
Version control systems can track changes made to code over time. They also allow you to return to a previous version of the project. Git is the most widely used version control system. Knowing how to work with Git is an important skill for every developer. Git tutorial in Russian
Brief conclusions
UI stands for User Interface, which means “user interface”. That is, the UI Designer is primarily responsible for how the product is presented to the user. He develops buttons, icons, selects fonts, and prepares a layout. UX stands for User Experience. So a UX designer designs the design of a website, an application - or anything - so that the user is comfortable and understandable what's what, and he can get what he needs from the site with minimal effort. Very often, both types of work are performed by one man orchestra: a UI/UX designer. The Front-end developer enlivens the work of designers by introducing dynamics into it: buttons begin to be pressed, and the picture begins to change. He must know programming languages, seasoned with frameworks, preprocessors and libraries.
GO TO FULL VERSION