Presentation

The presentation is tricky thing.

Presentation derives from the content of the website, the character of the work. It is different for visual photography based content and different for text based. And not just that what you have to consider is the the receiver, people whom you want to address, their age and cultural background. In other words the content the form of presentation has to fit its viewers.

Remember the Minh gold color?.. What might look cheep and cliche in one culture might be of high value in other culture. If Minh wants more Europe based clients he might consider to use different color than gold (Although if he persist to use the gold color he is expressing the importance of his heritage and his proudness of it which is of high value as well, it just might be misunderstood by the western crowd… you see how tricky it all is?). On the other hand, for asian clients and consumers the gold is safe bet. 

The socio-cultural heritage is really important. 
You might say that people are nowadays of many kind, each with different style. You see, different style. They all have a style which is rooted in their culture, or subculture. This is super important, do not underestimate it.
If you make a website for Gothic band with orange and purple shades, never mind how hip these colors are or much they mean to you as designer with understanding of past design and modern trends you’ll fail (Unless they are hipster-gothic animals).

The style has its roots. As the style has roots in our culture the visual style, the patterns layouts are all rooted by certain root a elementary dimension you can “read” throughout the design. There are roots which are common and you can always incorporate them and they’ll never hurt. Like the golden ;) ratios and Fibonacci proportions.

People tend to like nice balanced structures and structures are basically a derivation of a root element.
The easiest and right way to start any project is to set the root. Be it root note in music, font size in typography or a brick in architecture.
Type scale in typography is the Thing. I would not pretend I’m a typography specialist and so I like to help my self with tools like the type scale calculator.

When you start your project it is alway good to set as a starting point the root element that you’ll derive your work upon. If you look on the screen of the type scale calculator you find the root to be 16px font size.
This is a perfect root. The font has 16px height the spaces around can be like (0.5*16, 2*16, 4*16, 8*16, 1*16, …)
Why spaces and not objects them self? Well even object but as everything nowadays has to be responsive, and so the objects transforms a lot, it is much easier to focus on spaces and define the design field by spaces. Spaces can stay untouched while the objects are transforming and all will look nice and tidy.
Space is another big thing. Do not press objects to close to one another. Use spaces. Blank spaces give us a space to breath. If there will be too much content people easily jump over the content and miss the point. If you give them a space they will catch the upcoming object with pleasure.  Think of a space as of an introduction.

Units. The web can be defined by various units such as:

• px – pixles are grate on the beginning when you set you root element, and are helpful in the end when you fine tune. Most of the work is done in other flexible units/dimensions though.
• pt – like pixles, although I never found them any useful
• em – first from the flexible units. This one is bit hard to work with as the referential dimension is taken from the parent element. Which can be super tricky. I would try to avoid it.
• rem – it is like em but with much more predictable behavior. All the multiplications of the root are taken from the very root, the dimension of the root element and it is simple to work with.
• % – percents are generally grate for layouts, never used for fonts.
• vh, vw – (widow width, window, height)  is strange beast but helps a lot in responsive layouts where the % doesn’t work like in the case of  “100% height of nothing”.
• cm,.. – boy, you better do carpentry in this unit, not design for screens.

Recap.

Set you root in pixles. Start with font size. Then forget about pixles and set your layout in rem, or % or multiples of the root element, not in pixles though. Say you have 16px height font and you want margin of same heigh, then declare it in rem – 1rem and so on. Do the scaffold in percents and rems. Let images stretch within its parent element. If anything is not pixle perfect, fine-tune it with rem if you can. if rem are too hard to tune right use pixles instead.

See you next time.