Introduction to web 2.0

Introduction to Web 2.0

Anyone who wants to understand Web 2.0 design must first be

familiar with what Web 2.0 means. The phrase stands for the

supposed second generation of the web that focuses on

collaboration and sharing of information among users.

What used to be one-way highways of the old web is now

replaced by a community-driven world of Web 2.0.

The term Web 2.0 was first used in 2004 during the O’Reilly

Media Web 2.0 conference. This suggested a change on how

developers and users use the web.

Some of the things related to Web 2.0 include blogs, RSS

(really simple syndication) feeds, social bookmarking

websites and the like.

All of them share the common factors of having

interactivity and communication between the website owner

and the visitors, as well as among the visitors themselves.

The so-called Web 2.0 encompasses the back and front end of

websites. However, to the average users, the changes are

most evident on what they actually see and use on the

websites that they visit.

For example, for Ajax-based applications, what they see are

the updating of data on the page without actually

refreshing the entire page, which was the technique before.

Web 2.0 has made it possible to create a desktop

environment to websites. For example, users of the past can

only type their documents on their computers and were only

able to share them to others by sending it through e-mail.

But with Web 2.0, users can now create their documents on

websites which offer that service and are able to share

them to others by merely adding the e-mail addresses of

their friends. Such is the case with Google Documents,

formerly known as Writely, until Google acquired the


All in all, Web 2.0 has further enriched the internet by

letting people collaborate, making the web into a true


Elements of web 2.0 graphics

Elements of Web 2.0 Graphics

Web 2.0 has created a revolution on the internet in a

number of ways. There’s the collaboration factor which

enabled people to share information much easier than


Then there’s the factor of bringing the desktop environment

to the internet. But nothing’s more obvious in the Web 2.0

world than the so-called Web 2.0 design.

What makes a Web 2.0 design different from the designs of

the past? Here are some of the elements that set it apart

from everything that has come before it.

1. Rounded boxes

- although this has been used in designs of the past, this

design element wasn’t used extensively until Web 2.0 came.

This helps give a fresh look into websites which used to be

dominated by very professional-looking rectangular boxes.

2. Reflections

- this element aims to give off a 3D look for icons.

However, this is to be used sparingly, only to be used to

give depth to otherwise plain-looking icons.

3. Whitespace

- in web designs of old, having a lot of whitespace was a

no-no. Information was to be packed in as much space as

possible. But not anymore in the Web 2.0 world. Having a

lot of whitespace on a design makes it possible to read

things on-screen without causing too much eye strain. Aside

from that, it sets borders among elements without actually

creating a demarcating line.

4. Large fonts

- immediately capture one’s attention. Large fonts are

therefore useful in highlighting important parts of the

webpage especially the headlines and the banners.

Three tips on how to become a better web designer

Three Tips on How to Become a Better Web Designer

A good web designer is able to create great designs long

after the phenomenon called Web 2.0 has passed. It is true

that becoming good at web designing takes years of


However, it is also rooted in learning the fundamentals

well. Time has proven that the basics work and they should

always be the most important tools that any designers

should have.

Here are some basic skills that help one become a good web


1. Subtlety

- each era will have its own sense of style. Amateurs will

always exploit the new trends and use it on every occasion

possible. But this makes designs look amateurish and tacky.

Great designers, on the other hand, learn the new styles

and keep its use to a minimum.

2. Simplicity

- this is somehow connected with the first skill.

Simplicity is not making things bare and dull, but it is

making things work. A simple design will always have its

timeless appeal and it will always help new visitors of

websites navigate the site easily.

3. Willingness to Learn

- another good thing about great designers is that they

never cease to learn. For them, there is something new to

pick up everyday. The willingness to learn helps designers

stay fresh and relevant even styles and tastes have


The things listed above seem easy enough to follow.

However, things are different in the real world. There will

always be the temptation to design like the rest. But as

always, great designers will always find ways to stand out.

Skills you need to create web 2.0 websites

Skills You Need to Create Web 2.0 Websites

If you want to create your own websites, there are several

skills you need to get the job done. Some need a steep

learning curve, meaning that they are easy to learn, while

others need more effort in order to be executed properly.

We’ve listed down some of the skills needed in creating


1. Using a graphics editor

- this is important when you wish to create graphics for

your website. A good graphics editor can do jobs such as

simple photo editing to more complex ones such as creating

gradient and reflection effects. Photoshop and GIMP are

popular graphics editors used by designers.


- is another important skill any web designer needs to

have. HTML is a markup language, and just like other markup

languages, it tells the computer how the graphics and other

elements of the page will be displayed. Basic tags are

enough to let normal users get by, but knowledge of more

specialized tags are needed by those who want to build

better websites.

3. CSS

- is short for Cascading Style Sheets. Having a style sheet

for a website makes it easier for designers to design a

page by assigning values to tags such as those used in

paragraphs, lists and the likes. With a style sheet, a

style can be easily applied by using a variable on any part

of the site.

4. Flash

- is a program used for creating animations, games and

entire websites. Knowledge on how to use this is a must

among web designers. While the basic commands will be

enough for most users, Flash’s ActionScript gives people

more control over their creations.

How to create a product box

How to Create a Product Box

Product boxes give your website’s visitors a glimpse at the

products that you sell such as books and software. It helps

in selling your products because customers prefer an image

of the product they’ll buy over simple descriptions.

There are several software out there that can automatically

generate a product box for you. This is good if you have no

time to devote in making boxes. However, it is always

better to learn things by yourself.

Want to create your own product box? Here’s how.

1. Open your favorite graphics editing software.

2. Place the images of the front and side of the box on the

working area.

3. Remember that giving the illusion of a perspective is

the key to making a convincing product box.

4. Place the front image on the right side. Skew the upper

and lower portions of it so that the left side of the image

is taller than the right.

5. Align the image of the box’s side with the left side of

the front image.

6. Skew the upper and lower portions of the side image so

that its right side is taller than the left.

7. Adjust the angles of the front and side images so that

they form a box that is seen from the corner.

8. Add a shadow or a reflection to create a 3D effect for

your image.

9. Save your work into an image format. Also make sure to

save your source file just in case you need to edit the

image in the future.

Tools you can use in creating a web 2.0 design

Tools You can Use in Creating a Web 2.0 Design

Although Web 2.0 design is different from its predecessors,

practically the same programs are still used in creating

them. Newer versions of course have different features, but

these programs remain essentially the same.

If you would like to create your own website designs, here

are some tools that you will need.

1. Photoshop

- is probably the most ubiquitous graphics-editing software

on the entire planet. It is used by amateurs, web designers

and professional photographers alike. Since it was created

in 1987 by Thomas Knoll, it has since become the market

leader in the web design world.


- is short for GNU Image Manipulation Program. It is a

program used for graphics editing just like Photoshop.

Although it is not considered as a clone of Photoshop,

there has been a lot of comparison between the two. GIMP

supports a lot of Photoshop’s files and performs a lot of

tasks that Photoshop can also do. But their great

difference? GIMP is for free and Photoshop is not.

3. Illustrator

- is a vector graphics editor than can be used in creating

logos, typography and other images. Just like other

programs of its kind, it allows images to be resized

without degradation.

4. CorelDraw

- is another vector graphics editor that is widely used by

graphic designers. It has been used by professionals since

its release in 1989.

5. Flash

- is also a vector graphics editor but is more geared

towards creating animated graphics. It can also be used in

creating games and even entire websites.

Basic html tags for beginners

Basic HTML Tags for Beginners HTML is the markup language that is predominantly used in web pages. It is the one which tells the computer how information contained in the page is to be displayed. Learning how to write HTML codes is an important skill that any web designer should have. Below is a list of the most common HTML tags used to help beginners become familiar with this language. 1. - are the opening and closing tags used at the beginning and end of each HTML file. 2. - comes after the tag and it is where information that is not displayed on the website can be found. It includes META tags, style sheets and Java Scripts. 3. - is enclosed within the HEAD tags and it is where the title of the web page is placed. 4. - it is within these tags that the things displayed on the website can be found. 5. - the tag stands for emphasis. It replaced the tags which were used to make the text inside the tags italicized. 6. - are tags used to make the text within them bold. 7.

- are used for headers. Placing text within any of these tags makes the font larger or smaller than the normal text and bold. 8.

- placing text within these tags turns them into a single paragraph. A single line break is automatically added below the last line of the displayed text.

How to create reflections

How to Create Reflections

Reflection is another design element that is used heavily

in Web 2.0 websites. This technique is often employed in

icons to create a 3D effect on the image.

The use of this design turns images that are otherwise

plain into visually-pleasing ones.

Want to make a 3D icon? Follow these steps:

1. Open your favorite graphics editing program.

2. Open or paste your image on the working area.

3. Create a copy of that image and place it directly where

you want to place the reflection. Remember that a

reflection is a mirror-image of the image. This is

important when making any reflections on your design.

4. Create a layer mask over a good portion of the


5. Place a gradient effect on the remaining portion of the

reflection to create the illusion of a reflection.

6. Voila! You have now created a 3D icon.

Of course, there are several ways of creating this effect.

The one that we have shown you is only one of them. You can

find a lot more tutorials on the internet that will help

you achieve this effect. Choose one that you find most


However, keep in mind to use this effect sparingly. Just as

in any kind of visual effect, overdoing your reflections

can make your overall design look tacky and unprofessional.

You don’t want your design to look amateurish, right?

Subtlety is the key to creating great designs and you

should incorporate this in the designs that you make,

including creating reflections.

Tips on choosing fonts for your website design

Tips on Choosing Fonts for Your Website Design

The font is a critical factor in creating a website. For

one, it will either make it easy or difficult for your

readers to read the content of your website.

Another thing is that, it also says a lot in the overall

design of your website. It is therefore important to choose

a font that is legible and pleasing to the eyes as well.

Here are some factors that you should consider when

choosing fonts for your website:

1. Font size

- this is an important consideration when choosing a font.

You should determine what font size will do the job that

you expect it to do. For your overall content, you should

make sure that they are big enough to be readable by

average readers.

Also make the size varied for different elements such as

the content, the headline and the header. Also consider

offering an option for changing the font sizes for the

convenience of your readers.

2. Font type

- apart from the graphics, the font type also says a lot in

the overall design of your website so you should choose

your font type carefully. In general, fonts used nowadays

are sans serif fonts which are easier on the eyes. Arial is

probably the most widely-used of these sans serif fonts.

3. Color

- once you’ve got the color scheme of your entire website

figured out, choosing the color of your font would be a

breeze. However, keep in mind that the color should

contrast well enough with the background so that it will be

easy to read.

How to create boxes with rounded corners

How to Create Boxes with Rounded Corners

Boxes with rounded corners are a staple of Web 2.0 design.

While rectangular shapes are better used on professional

websites, rounded boxes are more suited for websites that

aim to look playful, modern and experimental.

The boxes can be used in the design in a number of ways.

These include the header and the content. What’s great with

them is that they can divide the page into several parts

without actually using borders.

Here are some ways by which you can use rounded corners on

your website design:

1. Use images

- this is probably the easiest way of adding rounded boxes

on your web page. All you have to do is create a rounded

box using your favorite graphics editor, save it and use it

as a background image for the portion of the page of your


However, the images you use can add kilobytes to your page

which spells slower load times for users and higher

bandwidth usage on your part which is especially important

if you are paying hosting fees for your site.

2. Use CSS

- Cascading Style Sheets is another way of creating rounded

boxes for your website. The great thing about this is that

since you’re only using a style sheet to create these

boxes, it eats up less bandwidth and the page loads faster.

This however, requires a reasonable amount of skill on

creating style sheets. There are a good number of websites

that deal with this which should be enough to help

beginners out.