Layout

There is a rule in programming. The rule is called DRY, Don’t – Repeat – Yourself.
Repetition is mother of learning and also source of mistakes. It is time consuming and requires some knowledge

Sure, repetition is mother of learning,  but only once you get the knowledge then you make it DRY.
This rule applies to anything. Layout, design even concepts.
How to do things the DRY way when we do not have the appropriate knowledge yet?

Lay out DRY framework

As in last lesson we focused on the Bootstrap again. Bootstrap gives as a solid framework for building the websites their structures and elements in nice cozy way by declaring classes to elements which then have a complex behaviour. This behaviour would be hard or time expensive if we have to do it by our selves.

Although we don’t know the complex HTML, CSS yet, we can make use of this complex framework with lot of knowledge behind by simple declaration that do complex things.

We know that everything on website is a container. The container needs some declarations to behave like we want it to behave.. it has to have its position defined, color, fonts etc. Containers serve as a space dividers. Almost every website has header with menu, content area, side area with related information and maybe some notes on the bottom of the page. This is all known fact and so why not to help our selves with a some kind of framework that will help speed up the process.

The most valuable or most useful part for us at this point is the Bootstrap grid system. It helps you to nicely divide the website into harmonised blocks that are pleasant for human eye and easy to work with.

css-%c2%b7-bootstrap

http://getbootstrap.com/css/#grid

Let’s look on some examples.
Most of the examples use Bootstrap as their HTMl framework, some of them not. What you see is a website screenshot where I simply highlighted it’s div structure with some blue shadows.
As you can see the website is always divided in to specific parts, like: halfs, thirds, 2/12, and so on.
What you might notice is also kind of deviation from time to time, that gives the website a peak, point of interest. If it will be all divided into perfect grid there is no spot the eye can be caught on and the website will become boring.

Some people just put everything into a grid and forget about the point of interest.
But don’t over do it. You can’t have multiple point of interests, otherwise you turn it all in to pile of junk.

 

method-digital-agency-auckland-nz-web-virtual-augmented-reality-mobile

http://method.digital/

google-fonts

google fonts

kuraz-cz-design-moda-sperky

http://kuraz.cz/

springforward-cz

http://springforward.cz/

welikesmall-%e2%80%a2-work

http://www.welikesmall.com/work/

Sure the whole structure can be randomised, but humans needs a structure and point of interest sticking out of it.
If the structure would be random the user simply will be lost and won’t understand. Not only the structure has to follow the rule, but the typography and all part in it has to have some kind of inner size reference. Say 1 rem, which is a size of a letter. If you have a letters set to 14px height and you apply this measure to all spaces you use in the design or its multiples like 28, 42, … it’ll all work really well without extra work.

I think it is pretty clear what crucial role the layout and its harmony plays in the design.
Think of it. Next time bring sketches of the structure of your project/s.

"This post is written for Prague College students. Feel free to explore the topic with us."