How to project a minimalist layout? attention to the details
According to Webdesignerledger it is one of the web design trends of 2010, according to others it is a style destined to remain timeless and a sign of good taste and refinement.
The password is “Less is more”, that is: Less is better. White, black, at the maximum a single color. Graphics practically inexistent, images reduced to the essential minimum. The minimal layouts, shadowed by the vintage/grunge/doodles styles of the turn, live now their principal moment of splendour and make a good display of themselves in the galleries and in showcases of the biggest thematical blogs of the sector.
But which are the details that make a minimalist website successful?
White background, a navigation menu and three paragraphs: there is someone who really believes that behind a minimalist website it’s not the same graphic projection required by the most “graphic” sites or the same dosage of aesthetical sense.
Nothing could be more wrong, on the contrary: a minimal layout requires a decisively more minute accuracy of details, just because the absence of graphics and the use of few colors impedes the camouflaging of eventual flaws and highlights even further the problems related with typography and with the white spaces. In this article we will see, in synthesis, which are the details that deserve attention in the completion of a minimalist layout professional and captivating.
1. A good logo
If in a site rich in graphics it is possible to hide somehow the turn’s amateur logo, in a minimal layout the logo shows off and if it is the only color note of the template, it represents the first element on which the user will lay his eyes upon. It is not by chance a lot of minimal site styles owe their aesthetic efficient impact to the logo, which even quite simple in black and white, it represents the only dynamic and vivid not of the entire layout.
2. A full-bodied and original font
In a website which reduces to the minimum the graphics is practically obvious that the typography covers a primary role of the layout’s aesthetics. An original note is inserting text content – a slogan, a welcome message, or even the website’s name – using a more versatile font, like for example a calligraphic. In this way there is a tendency to “play down” the website a little, which otherwise risks to appear too “snobbish”, austere.
3. Choose a color
This is not a rule, but however it’s the cult of the moment. Normally, the layout is made in grey scale with a color in contrast to revive the whole. Every tonality should be alright, but the best are the red, the orange, bright and vibrant colors in general, used in general for the details such as buttons or links.
4. Typography, queen of the layouts
Key concept already overtreated but I repeat it: a good typography can make a website successful. Even more if the website is almost totally concentrated on text content with respect to the graphic component.
The passwords? Legibility, Harmony and Aesthetics. Therefore keep an eye on the interline, the tittles (which the bigger they are, the better it is) and not to use a lot of fonts, even of different families. Remember that the layout has to remain simple and ordered and useless habits and frills do not belong to this style.
In general, the typographic tendencies of this style can be summarized like this:
- Titles and links in bold, in capital, in block letters. The more they are highlighted, the better it is.
- Also for the titles, the contrast between grey (or black) and a bright color.
- Background to the text, be it colored or negative effect (black highlight with white text)
5. Icons, adhesives, balloons
If you feel like cementing yourself in a minimal layout but you feel sorry having to completely give up to the graphics, you can always enrich the layout with small graphic details such as icons, badges and so on. The general rule is: do not overdo it. For the rest give it a try and let yourself be guided by the good taste.
Some already tested elements and surely aesthetic success?
- Colored badges, preferably from spherical forms.
- Balloons, of every form and color, as logo complements or for attracting the attention on certain details.
- Icons: to be prefered in grey scale and with rollhover effect.
Inspiration
If you like this style and you want to see some layouts of success, I advise you to have a look to the following showcases: there are some absolutely fascinating.
- Vandelay Design: Minimalistic webdesign
- Webdesigner Wall: 50 minimal site
- Pro Blog Design: 30 beautiful and clean blog design
- Spyre Studios: 40 killer minimalist blog design
Conclusions
The minimal style layouts are the tendency of the moment. Even it might appear as if they don’t require a big graphic competency, it is obvious that for a layout of success-of whichever style it is- it is essential the study of details as well as an appropriate projection of the content. On the other hand even a minimalist layout –that superficially might appear easier to be made- can become a bare website and lacking efficiency both from the conceptual point of view and from an aesthetic one. After this article I feel very inspired and want to design with and for you a minimal layout, based on what we discussed. I will do it next week: be there!
*****************************************
L'immagine principale dell'articolo è stata fornita da @Fotolia
The Author
Related Posts
You may be interested in the following articles:
4 comments
Trackback e pingback
-
How to project a minimalist layout? attention to the details | Design Newz
[...] How to project a minimalist layout? attention to the details [...]
Wow, Sarah, I could not disagree more with your 5 pointers. None of these are good examples. In my book, minimalism is all about communicating the essence or essentials – and in the case of web design, that is the textual or visual content. Designers do this by removing distractions, clutter and decoration, and replacing it with whitespace and micro and macro typography.
1. A good logo: How is that more important in a minimalist design than other designs? Actualy, I would say to keep the logo absent or neutral or small, rather than big and prominent.
2. A full-bodied, original font. A decorative font is a great eyecatcher, but not considered exemplary for minimalist design. Instead, in minimalist web design you would keep the number of fonts limited to one or two, with limited variation in header sizes.
3. Choose a color. Indeed, as you say: This is not a rule.
4. Typography, queen of the layouts. Yes, typography is king in minimalist web design. The suggestions you make in this paragraph however are all very good, but not minimalist. Legibility is always important, but it’s not one of the USP’s of minimalist web design. Instead, I would expect you to say something about whitespace around and within paragraphs here.
5. Icons, adhesives, balloons. Say what? You are suggesting to use these?! Talk about distraction… These are the type of elements that are in immediate competetion with the actual primary content on the page. Adhesives, balloons, banners – they all fight for the attention of the visitor, over the main page content.
In conclusion: Attention to details is key, true. But it’s in the careful balance between positive and negative space, harmony and disharmony, in typography, but mostly in ‘what do we NOT put on the page’. And the answer is: all of your suggestions.
I look forward to your response in this comment thread!
Hi Maarten,
first of all welcome on YIW, we are at the beginning of our English experience and your comment is the first one on our blog.
I’m glad to receive a constructive comment: we can exchange our ideas, infact I understand and accept your disapointment.
In my article I talked about the details, the point of color, the elements that can make a little more “bright” a minimal layout, without making it heavy.
This is the reason I started my article saying: “Less is more” and explaining that in this kind of style we erase every graphic element, we reduce the colors and every not essential element is dropped out.
By the way, I’ll answer you point by point:
1) A good logo: I think that a good logo is basic for every site, this point is fondamental. But I mean that, if in a more-graphic site an amatorial logo could be “hidden”, in a minimalist-layout the logo is a great eyecatcher. About the size of the logo, I think is something personal. I wrote down examples of minimal sites – coming from thematic galleries – that use bright and dinamic logos.
2) Fonts? I agree with you: we should use at least 2 fonts. I didn’t write that we should overuse with the fonts! However if we have the goal to give importance to a slogan or to a welcome text, we could use a calligraphic font for example. This is a well known trick, take a look on the sites suggested in the article…
3) Infact, this is not a rule. Anything I wrote down would be it. I spoke about the little graphic details that could make a minimal layout cooler, if used in a good way.
4) About typography: on the white space lots of international sites has pages and pages of discussions and, since I was writing only about the details of a minimal web site, I wrote “superficially” about the argoment. Infact, as you can see, I focused my attention more on the colors of the texts and on the effects to emphatize the titles, than on concepts like margins and white spaces.
5) Yes, I suggest to use baloons and icons: even in this case I do not speak about rules – because I don’t believe in rules – but about a trick to underline some elements in the page that otherwise could be meant “poor”, only black and white. I saw dozens of sites before writing this article and I noticed that is very common to accentuate the layout with baloons, small slogans, “hire me”, prices, “news!”. I speak about ONE baloon, ONE badge and so on… It should be a sort of exception and not an abuse. The only rule I meant was: not exaggerate! But I think, to be honest, that a good bright element could be a great eyecatcher and could enrich the general aesthetic.
Maybe you confused the general meaning of the article that is not a guide you have to follow to create a minimalist layout but a general analysis about some details that could make the layout of a minimalist site “rich”.
By the way, comparing our ideas is a pleasure, because this comparison bores the constant growing of our skills.
Thanks for your comment!
I do understand that this is focusing on the details in minimalistic design, even though I think that there are more important things considering when going for minimalism.
Like spacing. Keeping the right distance, with fonts, sections, images etc. And to not make it to cluttered. Just because you don’t use many graphics doesn’t mean that the text needs more attention.
Anyway, good roundup. I admire many of the sites in here, and I’m very honored to be included in it. Thank you and good luck!