How to become a novice layout designer?
In this article, I will tell you how to become a novice layout designer. So, after following all the recommendations, you can apply for this position. The article (or guide of frontend for beginners) was written for the students of glivera-team, but it can help everyone who decided to master this profession.
Let’s study HTML/CSS
HTML and CSS – is what the layout designer writes every day, these are the languages that the browser understands and your site draws. You can choose any resource for studying (books, videos, articles), the main is to understand the basics. Here are some useful links that can help you to start:
- HTML for beginners from loftblog (video lessons)
- Basics CSS from Sorax (video lessons)
- Interactive courses from HTML Academy
- A visual guide to Flexbox properties
- Flexbox CSS3 (video lessons)
After passing the lessons you need to understand:
- what are HTML tags and how they work
- block model (border, margin, paddling)
- how float, inline-block and flexbox work
- positioning (absolute, relative, fixed, z-index)
You should be able to:
- insert text, pictures, links, form elements on the page
- stylize page elements (resizing, colour change, changing shadows and so on)
- create tables
Work with Photoshop
A designer gives a layout in psd format to a layout designer (the format of Photoshop files). That’s why a layout designer should be able to work with it. All functions of the program aren’t necessary, the main is to know the following:
- work with layers (hiding, displaying, view effects)
- measuring the size of elements
- cutting pictures (simple and patterns)
- copying text from layout to HTML
- Photoshop for layout designer (habr)
- With knife against steam locomotive, V. Makeev
- Photoshop for coder (cycle of articles)
- Basic Photoshop for a web developer
For a fast start you will need an editor and a browser. You can choose any but I advise to use Sublime Text as an editor and Chrome as a browser. From Operating Systems choose either Windows or Mac. Other systems will only slow down the training.
Slicing of the first site
At this stage, most likely, you will feel a stupor. You seem to know html/css (in fact, no) and Photoshop. But you absolutely don’t understand how to make a site from a layout. In this case, you can take a small course about site slicing, there are a lot of them on YouTube. At this stage, you will need to make the first site. Don’t pay attention to such meanings as rubber, adaptability. And also, don’t use css frameworks (bootstrap, foundation).
Understanding semantics, validity
So, you have sliced the first site, what next? You need to understand how to properly place tags in the html-code as well as to learn how to validate. With validation everything is simple – the machine analyses the code, says what’s wrong, you fix and understand. The semantics is more difficult since this field is quite Holy War and, in many situations, the developers don’t have a common opinion. But still, there are common standards. After you learn this – try to slice a new layout in a semantic way. Now at each stage, you need to get an overview of your code from an experienced specialist/mentor.
- Basic JS from Sorax (be careful, your head can blow)
- Basic jQuery from Loftblog
- Basic page elements from Loftblog
- Russian API jQuery documentation
Study BEM technology. You need to understand how to slice in independent blocks, how to provide modularity in your slicing. There is a lot of information about this on the Internet. You don’t need to study full stack BEM, it’s just important to understand the methodology for CSS. Slice a new layout with the use of methodologies.
- How glivera-team uses BEM (article)
- Write BEM correctly (video)
- BEM&SMACSS – Sass methodologies for project organization (video)
To speed up and make easier the writing of the styles the preprocessors were made. You need to study preprocessor and to slice a new layout with it. You need to understand:
- the difference between mixins and silent classes (placeholders)
- how “&” works
- how to split styles into several .scss files
At this stage compile scss in css using prepros.
Also, to speed up the slicing and support, the layout designers use HTML template engines. Our choice is pug. After studying you should understand:
- how to make mixins
- how extends works
- cycles and variables
- work with arrays
You slice the site using the template engine.
Now you can start to slice adaptive sites that adapt to the width of the browser window. You can take the layout, where various permissions are indicated by the designer, or you can think of how the site will be rebuilt. From this moment slice all the sites in an adaptive way.
Sooner you switch from the editor to PHPStorm, better it will be. This IDE lets significantly speed up the development. You can download free (early access) PHPStorm on the official site. If you don’t want to pay, download it once a month. As for the rest, the free version is the same as the pay version.
Any developer should be able to work with version control systems and the layout designer isn’t an exception. We, like most, have chosen Git. You should be able to:
- work with github interface
- be able to clone the repositories on a computer
- do commit, push, merge
- do pull request
After all these points, you need to slice and get the hand of it, running each layout through a code review and find the first order. Then the second, third and so on.