My first blog, showing the process of learning to research, design and build a website.

Web 2.0 Workshop

Understanding Web 2.0

Web 2.0 was coined in 1999 to describe web sites that use technology beyond the static pages of earlier web sites. It is closely associated with Tim O’Reilly. Although web 2.0 suggests a new version of the World Wide Web, it does not refer to an update to any technical specification, but rather to cumulative changes in the ways software developers and end-users use the Web.

Web 2.0 is a style of web design from a period in the life of the world wide web. It is still in this style now, 2012. The styles primary idea is design which includes interaction with the viewer and social interaction such as online communities.

Broken down Web 2.0 means:

more user interaction

AJAX & XHTML & JAVASCRIPT (Asynchronous)

Community based websites like Youtube and Flickr

Syndication, was stickiness. This makes people want to come back

Wikipedia, was Britannica. A online encyclopaedia, source of information.

Blogging, was personal websites.

Participation, was Publishing.

Design

Web 2.0 design is based around making interface design look more real, 3D. If a button looks 3D, you believe you can actually push it, albeit wit a mouse and cursor. There are many ways to make interface design interactive such as rounded shapes, bold logos, gradients, sans serif fonts, pastel colours, footers/headers and buttons.

Beyond Design

Web 2.0 is a type of design, but also includes other ways of creating interaction such as WordPress, Blogger for blogging. Also Flickr, a online photo community, Google apps such as maps and calendars. Also widgets such information on the weather. Podcasts, Tagging, web content voting and social bookmarking. All of these things that are included in a website mean that the viewer is getting more from a static website.

I am going to look into the broken down ways in which to incorporate Web 2.0 into a website so that I can get a thorough understanding of the different elements.

Simplicity is a way to sum it up. Remove unnecessary components without sacrificing effectiveness:

This is a example of a photographers website which has been designed to be simple and self explanatory. It is easy to use and navigate.

Central Layout also used in web 2.0 design because its bold and simple and more like a magazine than a book to read:

This website shows that designing with a central layout looks orderly and symmetrical (in a way).

Solid areas of screen real estate is used in interface design and layout to block off areas that makes it easy for your eye to flick around the page and easily finding information.

The page is easy to navigate because the block areas of colour separate different sections of information. This website uses colour blocks to divide the logo/navigation, from the ‘pre-order now’ button, from the photo and info box on the right, with a black one holding a image and link to video.

Navigation Bar designed with Web 2.0 are large and bold, easily readable and clearly positioned and clearly differentiated within the website:

This navigation bar is 100% good example of Web 2.0 design, firstly it is simple, bold, clean and obvious, secondly it uses a clear rounded font, and thirdly it is a rounded rectangle.

Bold Logos are part of the interface design as well, as I know from my logo workshop and research a logo must be strong on its own, recognisable and distinctive and at the same time represent the brands identity and personality. It must be clear upon first viewing:

This logo is simple and clear, it uses just three colours, red, green and white. It is only a example logo but it shows the effectivness of easy to read fonts with a shine added to the stroke around the text with a simple strawberry to illustrate what it is saying in the text.

Sans Serif type is used often in Web 2.0 because it is so easy to read and contemporary. Decorative typeface is NOT appropriate in Web 2.0. Here are a few good examples:

All of these fonts are contemporary and to me, quite similar, but what is key is the simplicity of their design. There is nothing ‘fancy’ about any of them, and has no connotations.

Big text is used, this ties in with the clear, bold, strong, easy to read way of designing a Web 2.0 interface:This is Apple’s website, they use Web 2.0 design. Every home page (which changes often) uses very large type, with very little words. Its very effective. BIGGER IS BETTER!

Strong colours are a important design feature in Web 2.0 as they are eye catching, and also helps to draw the eye around the page’s elements. This is linked into the solid areas of screen real estate design:This example of some colour palettes for Web 2.0 websites shows the effectiveness of choosing bold colours, the more different they are from each other the more each one will stand out from the rest. Colour choice’s can also vary what is looked at first when the website is viewed, colour can highlight important elements of the page. USE SPARINGLY.

Rounded corners in Web 2.0 design means that the page has a softer look, and also they mix well with straight edges, used with gradients makes a effective area/button that really stands out:This website shows that rounded corners add a soft approach, also bold colours are used to separate areas of the website effectively.

Rich surfaces are used and this is what is done to make areas become 3D. This could be from giving something a glow, orb, gradient, drop shadow or shine in Photoshop. Gradients look best when mixed with other elements that do not have gradients. Gradients can be used in backgrounds, text boxes, buttons and navigation bar, so anything! I am going to look at and practice all of the rich surfaces later on in Photoshop, so for now here is a example of a gradient:

Here we see a gradient of blue going into green.

Reflections are also added onto areas or buttons as they help to highlight and make it look 3D. The rich surfaces and reflections all add up to making the website look more real and touchable, less flat, making the viewer want to interact with it.

This house is a house, but the highlights and shadows plus the reflection al help it to look real. This is because in real life everything is lit by the sun, a light coming from one place, giving everything a highlighted area, and a shadow. Unless its cloudy, then everything looks flat and has less contrast. Here is a link to a website with a tutorial to make a reflection.

Icons, flashes & badges are used to draw attention to offers, sales and any other links that you want someone to see. They buttons that are used to resemble stickers in shops like ‘buy 1 get 1 free’ which is a classic. They can be round, square, star shaped, any shape, but need to have some rich textures added to bring them to life and stand out.

This is a downloadable selection of editable ones. They vary in colour, shape etc and all have a shine, gradient, glow, orb or shadow added to make them standout. These are blank (text wise) and would have a offer such as ‘sale’ or ‘click here’ added to them which would take the viewer to a new page.

Letterpress is a way of making it look like text has been stamped out, so the background is the same as the hollow (looking) text. With highlight and shadow done carefully and precisely (not too much) this effect can look very realistic. This effect is done to emulate a real letterpress effect:This example was done in Illustrator, see this tutorial of how to do it, the website Tutorial Magazine has many more tutorials to look at too!