In this tutorial, I describe various common graphic design elements in modern web “2.0″ design style.
I then attempt to explain why they work (i.e. why they have become common), as well as how, when and where you might use each element in your designs.
It follows on from my Current Style article, and analyses in greater depth the design features of the current “Web 2.0″ design style.
To learn how to design Web2.0 sites yourself, you must read “Save the Pixel – The Art of Simple Web Design”, which is a comprehensive guidebook to the principles and techniques of Web2.0 design.
Clearly, a site doesn’t need to exhibit all these features to work well, and displaying these features doesn’t make a design “2.0″ – or good!
I’ve already addressed some of these factors in my introductory Current Style article. Also note my article on Real Web2.0 Design, which explains that the essence of Web2.0 design isn’t surface graphical effects but the discipline of simplicity.
You can’t just take all these elements, throw them together and make a good web page, any more than you can take some eggs, sugar, flour and throw them together and get a cake.
Making a web page that works requires a lot of sensitivity to the various forces at work. A good design solution is one that balances those (often opposing) forces.
Many people use the term “Web 2.0″ to describe:
In sociological terms, movements impact people on many levels: economic, cultural, political, etc. Is skate-punk about entertainment and sport, music and the music industry, fashion, or the breakdown of society?
If I had to sum up “Web 2.0″ design in one word, it would have to be “simplicity”, so that’s where we’ll start.
I’m a great believer in simplicity. I think it’s the way forward for web design.
Today’s simple, bold, elegant page designs deliver more with less:
2.0 design means focused, clean and simple.
That doesn’t necessarily mean minimalist, as I’ll explain later.
I really believe in simplicity. That’s not to say that all websites should be minimal, but that we should use as few features as are necessary to achieve what you need to achieve.
I’ve written elsewhere about Occam’s Razor, which is a principle I use all the time. One way of interpreting it is: Given any two possible solutions to a problem, the simpler one is better.
Here are some examples. Note how unnecessary elements have been stripped out from each. There could be a lot more on each page than there is… but would that make them stronger?
The result is that you have to look at the content. You find yourself interacting with exactly the screen features the designer intended. And you don’t mind – it’s easy, and you get just what you came for.
Here’s a great case in point. Atlas Software help businesses with cloud software solutions. Their website tells you exactly what you need to know, with very little decoration or unnecessary visual information. The content comes through.
I then attempt to explain why they work (i.e. why they have become common), as well as how, when and where you might use each element in your designs.
It follows on from my Current Style article, and analyses in greater depth the design features of the current “Web 2.0″ design style.
To learn how to design Web2.0 sites yourself, you must read “Save the Pixel – The Art of Simple Web Design”, which is a comprehensive guidebook to the principles and techniques of Web2.0 design.
Summary of Best Web Design Features
The list below is a summary of many of the common features of typical “Web 2.0″ sites.Clearly, a site doesn’t need to exhibit all these features to work well, and displaying these features doesn’t make a design “2.0″ – or good!
I’ve already addressed some of these factors in my introductory Current Style article. Also note my article on Real Web2.0 Design, which explains that the essence of Web2.0 design isn’t surface graphical effects but the discipline of simplicity.
Best Website Design? Disclaimer
Not all these design features are appropriate in all cases. There are always exceptions, and there are lots of bad examples of these features being used wrongly, over-used, or done without sensitivity to the “symphony” of a site’s design.You can’t just take all these elements, throw them together and make a good web page, any more than you can take some eggs, sugar, flour and throw them together and get a cake.
Making a web page that works requires a lot of sensitivity to the various forces at work. A good design solution is one that balances those (often opposing) forces.
Web 2.0 ?!
I’m using the term “Web 2.0 design” to describe the prevailing style of the best web design I introduced in my current style article.Many people use the term “Web 2.0″ to describe:
- a resurgence in the web economy
- a new level of technological interactivity between web sites and services
- or social phenomena deriving from new types of online communities and social networks
In sociological terms, movements impact people on many levels: economic, cultural, political, etc. Is skate-punk about entertainment and sport, music and the music industry, fashion, or the breakdown of society?
Best Web Design Features
I’m going to take you through the features of the current wave of the best website designs, dissect the most significant features, explain why each one can be good, and show you how to use them in your own sites.If I had to sum up “Web 2.0″ design in one word, it would have to be “simplicity”, so that’s where we’ll start.
I’m a great believer in simplicity. I think it’s the way forward for web design.
Today’s simple, bold, elegant page designs deliver more with less:
- They enable designers to shoot straight for the site’s goals, by guiding the site visitor’s eye through the use of fewer, well-chosen visual elements.
- They use fewer words but say more, and carefully selected imagery to create the desired feel.
- They reject the idea that we can’t guess what people want from our sites
1. Simplicity
“Use as few features as are necessary to achieve what you need to achieve”
Web design is simpler than ever, and that’s a good thing.2.0 design means focused, clean and simple.
That doesn’t necessarily mean minimalist, as I’ll explain later.
I really believe in simplicity. That’s not to say that all websites should be minimal, but that we should use as few features as are necessary to achieve what you need to achieve.
I’ve written elsewhere about Occam’s Razor, which is a principle I use all the time. One way of interpreting it is: Given any two possible solutions to a problem, the simpler one is better.
Here are some examples. Note how unnecessary elements have been stripped out from each. There could be a lot more on each page than there is… but would that make them stronger?
The result is that you have to look at the content. You find yourself interacting with exactly the screen features the designer intended. And you don’t mind – it’s easy, and you get just what you came for.
Here’s a great case in point. Atlas Software help businesses with cloud software solutions. Their website tells you exactly what you need to know, with very little decoration or unnecessary visual information. The content comes through.
More examples of simple design
Why simplicity is best
- Web sites have goals and all web pages have purposes.
- Users’ attention is a finite resource.
- It’s the designer’s job to help users to find what they want (or to notice what the site wants them to notice)
- Stuff on the screen attracts the eye. The more stuff there is, the more different things there are to notice, and the less likely a user is to notice the important stuff.
- So we need to enable certain communication, and we also need to minimise noise. That means we need to find a solution that’s does its stuff with as little as possible. That’s economy, or simplicity.
When & how to make your designs simple
When?
Always!How?
There are two important aspects to achieving success with simplicity:- Remove unnecessary components, without sacrificing effectiveness.
- Try out alternative solutions that achieve the same result more simp
0 komentar:
Posting Komentar