Yalantis: iOS, Android And Web App Development Company

Gridalicious Magic

The thing that I listened to with great interest on that day when our designers talk about their art experience might be interesting for anyone and everyone who deals with websites, mobile apps or even paper magazines. I can’t but share the point of view on positive user experience and accuracy in design of our designer Kostya Trundayev, who specializes in web design predominantly. So designers, developers of any kind, mobile and web projects enthusiasts, here is a dose of modular grid science for you to make the best of your digital solutions!

Designer Seminar

Read alsoUber API integration into an app

What is a modular grid?

People have always liked to measure things and used different objects as a unit of measurement. These objects were parts of human body, horses, barns, stones or whatever they could find around and count. That was long until things like centimeters on paper and pixels on a digital screen appeared.

There is an old soviet cartoon called «38 parrots». The reason why I recalled it was the fact that the main character in this cartoon, a snake, wanted to measure his body using a parrot as a measuring unit. The snake’s idea perfectly explains the concept of a modular grid — parrots in a this case are modules the grid consists of.

Web design just like typography has borrowed measuring idea and shaped into a modular grid, which is essentially a grid consisting of horizontal divisions from top to bottom in addition to vertical divisions from left to right.

g-column-gird

Swiss are considered world best professionals in the sphere of grid building. They laid the foundation of web modular grid design and established the rules of proportions on pages. The principles of grid design they developed have long been used in typography which is absolutely unmatched and distinguishes with unrivaled mastery. Check out the book published back in 1987 in Switzerland, which is the re-issue historic 1972 lecture manuscript «How Can one make Swiss Typography?» and explore the beautiful layouts of time-tested Swiss design crafting experience.

octavo_87.4_7

Read also: Real Estate applications development

Why bother?

If we take a look at something like New York Times magazine it will be hard to imagine how one can put all those columns in order without a grid. Paper print, as well as rich content websites, need grid in the first place because it simplifies hard designer toil by making the process faster. How much time would you spend to design a layout, provided you measured the columns and picture content with your eyes only?

nytimes-chrome-app

Secondly, proportions are very important in every product that runs for positive user experience. Users are such kind of creatures who get irritated when the line of text, let’s say, gets out the edge. Negative aesthetic impression doesn’t invoke warm feelings and a wish to stay, especially if there is a better solution with similar content right behind the corner.

triboro-design-2

What is more, grid is your skeleton you can put any coating on. It can at the same time teach you lessons of proportion and correctness of shape. By the way here you go with our article on proportion studies. Grid gives you a possibility to gauge the thing and literally touch it. Many designers even print the grid out to play with: shade definite parts to indicate a text or a picture zone, cut the grid into pieces and put them back in different orders, decorate it with fresh fonts and what not.

picture-4

How modular grids are made

To start with, there are different types of grids. The most typical grid for web consists of 12 equal verticals. Let’s say the width of the screen reaches 960px for medium devices like desktops, the column width is going to be 60px and a gutter width between them will equal 20px. You can calculate the size of a baseline by multiplying the size of font by 1,5.

_02

Grids can be very different depending on the content on the page or your designer imagination. Here you go with unusual grids examples: Designer Seminar.2

To sum up, grid requires pixel calculation and accuracy. Before a front end developer gets down to implementing design, it’s up to a designer to do the mathematics. See some examples of sculpturing grids for e-commerce websites:

456718

Modular grid is a must

What about the case with the websites that don’t have as much content as that of a newspaper? Is it necessary to use modular grid? There have been different opinions on the grid ever since it climbed over the sheets of paper outlets and out to the screen of your computer. Some designers believe that grid limits freedom of expression and demands extra time which no one but nerds have enough of. While others, taking into consideration all the advantages listed above, keep to the position of using grid in their everyday life.

Like it or not, but as for today modular grid has become an absolute necessity rather than a preference. Why? Screen matter I would say.

responsive-design-example1

Things change and mobile is quickly becoming a rule in digital technology. If before a designer could look at the size of a usual computer screen to design a website, now stuff like tablets, cell phones, smart TVs, have flooded the market and if you don’t want to lose avid mobile users, you have to think twice before putting your content on the screen. Web design should be responsive, which means it should respond to the needs of different customers using various devices. Here are some examples of what one and same design should look like on different screens.

In fact, web now inherits a lot from mobile and not visa versa. More and more websites start having things like side menu, which comes from user interface in mobile. This refers to products like social networks or those, which have the majority of users from mobile. Look at Medium or Facebook — that’s exactly what I am talking about!

In order to transfer layout from a big screen to the small one, a designer should identify items priority so that the main things on the site get user’s attention first. There are different ideas of how design can look like on a small screen. The idea is not to decrease the size of different objects to be able to fit the same layout on a small screen, but to change the order in which the items get aligned on the page strictly following modular grid skeleton.

Fast way of wireframing is sketching layouts on paper grid templates. Here are the sketches I made:

yalantis-trundayev-design-seminar-grid-system-3

Useful tools for designers

Online grid generators:

PhotoShop plugins:

A wonderful thing to measure before cut! Printable paper to sketch on:

Design

Our First Look at the Floid Prototyping Tool

Design

7 Up-to-Date Mobile App Design Trends 2016

Design

How to Adapt Your App's UI and UX to Another Platform