Designing for Web 2.0

Even though the World Wide Web hasn’t gone through much significant change (for the most part it’s still the same, actually), we are now in a virtual era called Web 2.0, in which the Internet is not merely a window to the world, but a platform in the technical and figurative sense—new uses for it are currently being researched for both developers and end-users, in aspects of business, technology, education and societal purposes.

Of course, with the arrival of this second generation, it’s not just the form or the substance that is undergoing change—its exterior should keep up with it too. Designers now are not just confined to perform the duties of mere visual artists, but they must be their own programmers or data encoders as well. Presently, there are these so-called guidelines that one must observe in order to keep up with the growing and expanding Web 2.0 style.

To make your layout design to HTML file transition easier, it might delight you to know that a plug-in made for Photoshop, SiteGrinder, is available to address those kinds of issues. That aside, here is a small compilation of the styles and elements incorporated in a design for it to be qualified as Web 2.0:

Simple and focused. The lesser the elements, the clearer the divisions, the fewer the columns, the more uncluttered it looks, and definitely better. It will look clean, organized, and professional. Minimalism is the way to go from now on. Also, if you using multiply columns or frame, try to create focus on the most integral part by harmonizing the color scheme, images, fonts and whole flow of the layout.

Bright and bold. Uses of bright, highly saturated colors are in vogue again. Nothing says “fresh and high energy” like warm hues in blood-pumping tones. Rich, dark colors may work too, just make sure they vary in tones and are intense. Otherwise, pale, dull colors will just disinterest the viewer, except perhaps for a few select websites. Remember that good contrast is the key; now is the time to take advantage of different color schemes such as complementary, triad, split-complementary, etc. Study your elementary color wheel, or better yet, try out Adobe’s nifty color-matching program called “Kuler”.

Defined logos, icons and clean, sleek graphics. Take a look at today’s popular website and one thing you’ll notice is that few use the fade effect so used and abused in the days past. A clean-edge logo looks more solid, and will generally look the same even if you have it put up or printed in other mediums. One that utilizes a fade-effect will have to compromise somewhere. As always, keep in mind that your logo should be able to represent you company well, first and foremost.

Critical use of reflections and gradients. When used sparingly, and in the right places, reflections and gradients maximize the sleek and finished look of your site. Be careful in overusing them, as the effect desired might just backfire.

Creative addition of Flash. Whether it be for an animated header, or navigation bar effects, or whatever you have in mind, tuck little pieces of small but functional flash effects, to create a dynamic feel throughout your site. A plug-in that will be useful for this is PSD2FLA, which lets you open and edit .fla files in Photoshop.

Now that you know the look of Web 2.0, feel free to design away!

New Ways for Easier Site Revamping

You thought your current layout was really awesome the last time you logged in to your blog, personal site, MySpace, what have you. But as you check your site again, you realize something’s off— it’s becoming old and terribly familiar. Ah, you’ve outgrown your layout.

A change of scenery is needed by everyone now and then.

Lucky for you, if you’re using blog publishing systems, or social networking sites that have their own HTML editors, perhaps even a WYSIWYG program, changing the design of your website is a mere matter of copy & pasting the right codes in the right places. Since these sites have their own set templates, the more graphic-savvy users of the site usually make their own designs, and at most times even share it with others, as long as they are credited back.

But what if the design you want is one that features a very, very obscure underground band which you are a big fan of? What if you want a layout that would proclaim your pet’s cuteness? Well, if what the Internet offers doesn’t satisfy you, you could always make your own. Especially if you’re the type to build up and manage web pages from scratch.

You could always hire a web or graphic designer to do the dirty work for you—but why miss out on the learning experience? HTML, CSS, JavaScript and designing tutorials are very much available in the World Wide Web. The Internet is a pretty big library of self-help books; it’s a matter of finding the time to read all of it.

The basic languages of web design are pretty easy to understand and utilize. A few self-study sessions will reward you with a web page made entirely in Notepad. Spend a few more hours on it and your well on your way to having a layout revamp every time you want. Pretty soon you’ll discover programs like Microsoft FrontPage, Adobe Photoshop and Dreamweaver. Photoshop, you’ll learn soon, is crucial in making your website look like a million dollars.

If you’re the lazy or no-time-to-spare type, however, there are certain tools to help you on your web designing crusade. An example of this would be SiteGrinder, a Photoshop plug-in which enables you to convert your creations into fully coded pages. This is immensely helpful for designers who enjoy the layout-creation process, but have a hard time when it comes to translating the layout into the web language. Other plug-ins and support programs offer different kinds of aids to make the layout-changing process easier and more efficient, some examples of which include: psd2fla, photocaster, etc. (Check those out when you’ve leveled-up in terms of design knowledge.)

Once you’ve graduated from HTML, CSS. XHTML, JavaScript, PHP and all that jazz, you can now move on to adding multimedia content to your site. This includes, but is not limited to, music, nifty mini-games, animated galleries, movies—whatever you want! The only thing that could probably limit you is your webhost space and bandwidth limit. Probably.