CIS251 Web 2.0 Home page



web 2.0

GIMP and Web 2.0


I bet you can't wait to start designing your own graphic elements, and there really isn't any reason why you should. Remember when you were a kid and you played for hours on your Etch-a-Sketch? Even though you claimed you had no artistic talent, you made some pretty awesome designs (if you say so yourself). I've heard that "I can't even draw a straight line with a ruler" excuse before, and I want you to know... you're probably not going to draw many straight lines. And even if you do, there are DOZENS of tutorials (both written and video) to walk you through the steps in using GIMP© drawing tools. In no time at all, you will be creating text effects, badges, icons, buttons, and banners like a pro. READY! SET! GO!


Web 2.0, pronounced 'Web Two Oh', is all about sharing information online using file sharing, blogs, social networking, wikis, podcasts, and RSS feeds, to create a rich user experience.

But there is another side to web 2.0 -- the popular design trends that grab the attention of visitors. Staples of this paradigm are a simple, noise free site with bold, bright colors, enormous fonts, rounded corners, tab browsing, glossy buttons, badges, image reflections and icons with a 3-D effect.

Vibrant colors, such as orange and neon green (which some designers have labeled the "official color of Web 2.0") have replaced more conservative color schemes. Mini-headers have been traded for maxi-headers -- the bigger, the better. Page backgrounds are characterized by the use of subtle gradients, patterns, and stripes.

Menus in web 2.0 have a trendy new look that allows users to easily navigate the site. Buttons tend to be large and clearly labeled with exaggerated font sizes and a focus on letting the visitor know where he/she is at all times. The use of icons, as well as text links, are very common..

The major design principle is simplicity. Save the pixel (the title of our course text) is another way of saying "Less is more." Content and graphics that do not add value to the site should be eliminated. Formatting with tables is a not allowed. Web 2.0 sites must formatted exclusively with css. The text content is usually a fixed width, centered horizontally on the page, with plenty of whitespace on either side.

You can download GIMP (GNU Image Manipulation Program), an open-source image manipulation software, add it to your Portable Apps menu, and start designing a personal library of web 2.0 graphic elements. You can incorporate these images into page headers and navigation menus and format with CSS to design a user-centric interface that is the hallmark of a web 2.0 site.

The course requires that you download the free e-book, Save the Pixel -- the art of simple web design.". You will be required to discuss the principles of web 2.0 design in during class discussions in Blackboard.