Tips and advice from front-end developer

Learn. Code quickly. Deliver. Sale. This is the dotnetdojo baseline a blog that offers to share his best advice regarding web development. I decided to participate in the operation, sharing my best advice as a front-end developer :

Code for the system and not for the pages

Principle of a design system

A system has basic components like typography, layout, shapes, colors. When you consider the design of a product as a whole these components can be enriched with design patterns, content strategy, employee tone … These decisions can help you to have a consistent product throughout the design process.

Since the advent of responsive design, this principle is more and more true. The behavior of each component must be tested on different devices. We must check its reaction, allow it to be flexible and deliver an optimal experience regardless of the device used.

Components that do not change:

  • Basic units
  • Colors
  • shapes
  • Typography

Components with fluid behavior:

  • Wire rack
  • Layout
  • Font Size

Basic components

Priority to typography

When working in a context with a lot of text, typography is the easiest way to give a visual feel to your content. Generally I choose 2 different fonts :

  • Serif for content
  • Without Serif for titles
$body-font-family: 'Lato', Helvetica, Roboto, Arial, sans-serif;
$header-font-family: 'Chivo', sans-serif;

To give a rhythm you can also play with bold, italic, with different sizes … The advantage is that if the viewportchange, your reading experience will remain consistent.

Typography and layout

One of the first things is to choose a basic unit to start working. Number of columns and maximum size for your grid, font size and titling based on the fibonachi sequence, or something more arbitrary.

Sometimes it is wise to choose multiples of 10 to make the mathematical calculations in CSS simpler. The typographer Tim Brown suggests trying out the modular ladder method .

Grid and Layout

fluid grid is a solid foundation for designing your layout system. But you have to think that your system has to work through different resolutions. You must keep your pervasive grid component .

If your content contains a group of 3 blocks on a line, you must change it to 1 block on 3 lines to be displayed on mobile.

It may seem simplistic, but it is extremely important for the designer. It can highlight some blocks, choose to center text and icons in one context, align left in another … The important thing is to have the most common elements to maintain a uniform user experience.

Form components

Designing components is a concept already used in the old world of “page encoding”.

Since the CSS property border-radiusis supported by leading browsers, many designs are based on circles. Button components with a rounded or non-rounded border are elements that stand out very quickly.

Used properly together, you get a unique, reusable and consistent atmosphere. The trick is to think globally by analyzing all the components that make up a page:

  • Buttons
  • lists
  • Breadcrumb
  • Content put forward
  • Main Menu
  • Secondary navigation

I use SASS to help build components.

Leave a Reply

Your email address will not be published. Required fields are marked *