Glivera Team Frontend Development Agency » FrontEnd Blog » Front-end » How to become a novice layout designer?

How to become a novice layout designer?

in Front-end | November 9, 2018
Frontend for beginners

Hello, reader!

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:

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

Useful links:

Basic tools

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).

Useful links:

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.

Useful links:

Javascript and jQuery

At this stage, you should understand what Javascript is and why you need it. Next step is to get acquainted with jQuery library and try to slice the site with interactive elements (sliders, popup window, tabs).

Useful links:

BEM

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.

Useful links:

SASS

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:

  • variables
  • 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.

Useful links:

PUG

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.

Useful links:

Adaptability

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.

Useful links:

IDE PHPStorm

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.

Useful links:

Git

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

Useful links:

Practice

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.

That’s all.

Related posts