There are a lot of areas related to design in the IT industry. The most common of these are designers, hidden behind the acronyms UX and UI. Well, some people manage to enroll even front-end developers as designers. Let's try to figure out who designers are in the IT world, what is the difference between UI and UX, and how front-end designers are related to design.
Designers
Developing the interface of applications, websites or games is a rather complicated process and requires the application of knowledge from different areas: engineering, psychology and design. User interface designers (in English - User Interface or UI) focus on the way the functionality of the site (search, tabs, menus) is displayed and the details of the interaction between the client and the interface. The goal of a UI designer is an 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 often conducts research and surveys that will form the basis for creating a design concept, and also tests concepts during development and after it. It usually focuses on structure, content, navigation, and how the user interacts with those elements.
It produces sitemaps, prototypes, which are the basic structure for creating software. The goal of a UX designer is to ensure that the user quickly and painlessly gets from the site what he comes here for . However, today it is very common to see these two specializations spelled 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 editors . 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 the site or application by modernizing them a bit.
Prototyping tools (Mockplus, Axure) . The prototyping tool is the link between an idea and its implementation. It doesn't matter what tool you use. You can try a few and decide on the one that suits your style and preferences.
User psychology. Already at the design stage of the layout, it is worth considering whether it will be convenient for you or someone else to use this interface. Put yourself in the client's shoes, build a strong bond with them, and be attentive to their needs. After all, the product will be successful if there is a demand for it.
You will also need knowledge of color theory . Something we know 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 job, it may be necessary to understand HTML and CSS or (a little) 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 the front-end developer is to develop the client side of the interface. That is, such a specialist “revives” what the designers have designed. He is responsible for the operation and operation of the interface and less for visual content. The front-end developer often has to find a good solution for the user interface at the development stage, so he often interacts with the UX / UI designer. The code written by the front-end developer is executed in the user's browser (as they say, "on the client side"). Also, one of the most important tasks is to check 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 stands 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 the HTTP protocol, servers and browsers, 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 organization of the site, the content, and all the interaction between them. It allows you to designate the top of the page, bottom, side blocks with content, headings, text display and multimedia elements. CSS style sheets are used to decorate HTML elements. They determine how exactly each graphic element that is located on the page is displayed. With 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. 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.
Also, the front-end developer should 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, as from a constructor, you can assemble sites much faster than without them. But, of course, you need to sharpen it to your needs yourself. If you know English, we recommend the getbootstrap site and the same w3schools .
JavaScript
Javascript is the core of front-end development. It is the first and most widely used interface programming language. He is able to 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 CodeGym courses, we learn JavaScript a little. You can also study it at the same W3School or read about it in Russian, on the site 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 search form autocomplete features, rearrange and resize the grid, and set up countdown timers. jQuery practical course at w3school
Javascript frameworks
There are different types of frameworks, but you can choose the one that suits you best. The most famous are Angular, Backbone, Ember, and React. They are a ready-made structure for code. They help speed up development. And in combination with libraries, they can minimize the development of a site or application from scratch. Overview of the 5 Most Popular JavaScript Frameworks and Libraries of 2017
Git version control system
Version control systems are able to track changes that are made to code over time. It also allows you to revert to a previous version of the project. Git is the most widely used version control system. Knowing how to work with Git is an essential skill for every developer. Git tutorial in Russian
Brief conclusions
UI stands for User Interface, which means "user interface" in translation. That is, the UI Designer is primarily responsible for how the product is presented to the user. He develops buttons, icons, selects fonts, prepares the layout. UX stands for User Experience. So the UX designerdesigns the design of the site, application - yes, 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 person-orchestra: UI / UX designer. The Front-end developer brings the work of designers to life, bringing dynamics into it: buttons start to be pressed, and the picture changes. He must know programming languages flavored with frameworks, preprocessors and libraries.
GO TO FULL VERSION