Hands-On UX Design for Developers

Creating and configuring the grid

Now we've got the project structure, the color defined, and the typefaces, but, before we move on to designing the UI components, we have to define and configure grids so that our application will have a consistent alignment through the entire user interface.

Often, we create grids from scratch on Sketch itself or in other specific design tools that we are using – we just need to do the right calculations.

Usually, when we have to deal with web development, and if the developers decide that they will use a specific framework for the frontend, such as Foundation, Skeleton, or Bootstrap, then we immediately start designing our UI components on that framework grid:

There can be different types of grids, depending ...