Design Style Tutorial: SIMPLICITY IN WEB 2.0 (Part 1)

[Graphic Design Blog]

I think it is about time to include CSS as one of the design element in the tutorials. The chances to get your blog or website stunning would depend so much on the process of integrating elements of visual design to your blog by CSS. As Web 2.0 begin to emerge in the beginning of 2006, many websites and blogs articles have been giving us clarity of how to visualize better Web 2.0 style.

You will need to take a look of some Web 2.0 design resources before we get in to our today’s tutorial. When you use one of those resources, please credit the original designers for appreciation and read his or her design copyright before you apply them to your design.

Certain design elements which are frequently implemented on Web 2.0 themes are:

1. Fonts and Typography – Big Size Text for Headings.
The trends will however show you bigger text in order to improve functionality in layout design. Bigger text is more accessible to more people, and font sizes range between 14 and 16. The consequences of using big text, you have to make room by simplifying, removing unnecessary elements. There are also tendencies to have less contrast between text and background. Darker background would benefits users of new computer that has brighter screen.

2. Round Corner
Round corner in web 2.0 sites seemingly polished to create informal invitation. This cozy form is chosen for comfort eyes when searching down from header to footer.
We have included this design element to the Web 2.0 resource list and round corners can be generated from:
- Online round corner generators
Round corner generators should be easy for anyone who probably doesn’t know of how to use CSS or graphic application. Really a time saver!
- CSS
This CSS round corner will let your web page load faster, since you don’t have to add big size of image as background in html markups nor CSS techniques.
- Photoshop or illustrator application
It has the advantages to create more variation of FX, for instances: more options to use background color gradients, fading out some other sides of corners, more option to add sleek border FX, etc.

3. Color Scheme
If you notice carefully, color schemes in Web 2.0 genuinely consist of vivid colors to add more contrast over some part of page element AND shades of greyscale ranges from Shiny silver [#EEEEEE] to Shadows Grey [#36393D].
They are greenish, as it works like a charm on Techcrunch and Technorati. Flickr and Odeo Pink should be popular for star badges and icons. Bold and saturated blue as well as RSS orange are also common. Little bit red on Last.fm and Blog Catalog add up some spice to the pale white – grey background.

4. Gradients, Glossy, and Reflected Effect
Web 2.0 was a breakthrough from a static and none semantic rules kind of website into modern and dynamic website that talks visually to achieve interactivity and functionality with the viewers. There is an interesting article debating of how people have started following Web 2.0 trends without further learning of design concept process. Onur Oztaskiran has a personal opinion on the article: “How Web 2.0 Style designs disturb me”

The use of gradients, glossy and reflected effect is so much about Web 2.0 style, but being excessive with those effects could make your site gone out of focus.
Bear in mind that special effect is good, but put it or use it for the right spot! Less is more and keeping it as simple as possible.

5. Miscellaneous vectors shape and image style
Glossy button, big RSS icons, Stars badges are everywhere… :D Oh so cute, and shiny....
The looks are simpler than the old times style. Again, I shall remind you to give some space to your website layout structure even if you have to use some of them.
They are easy to create and even you’re not good to make one, internet provides you tons of links to download the files and they are ready to use. Find some of cool buttons, badges and icons on the Web 2.0 resources.
Regardless of how you want your Web 2.0 design style going to look like; you don’t have to implement every of those simple guidelines on your design. Consider it twice, in which part of element that need some retouch and experiment is the best

OK, in the next section I will make a tutorial of how to use CSS to create rollover image buttons/menus using relative position.
Why CSS? Rollover image without Cascading Style Sheet will hardly to manage. Assuming that you want to arrange your button menus into random placement like you can see on CSS-Tricks http://css-tricks.com/ header ….or taufik monyong… well, CSS relative position has the answer ;)

There will be another post for tomorrow’s tutorial following this section. You can also subscribe to Graphic Identity by RSS Feed or by Email if you like to follow the next updates :)


WEB 2.0 THEMES ON INTERNET:


Pixel2Life





Split Da Diz




StylishLabs




Juricks2Web




Related Post:

• Design Style Resources: SIMPLICITY IN WEB 2.0
• Design Style Tutorial: GRUNGE URBAN ART
• Design Style Resources: GRUNGE URBAN ART

Read More at Graphic Identity Blog