Web 2.0 UI design guide/tips - how can I make my site look Web2.0'ish?

Hi,

Does anyone have any websites/URLs they could suggest re how to develop web pages that have the web 2.0 look & feel? i.e. rounded buttons, colors etc. I’m a backend code guy but would like to know the best/easiest way to web2.0’ize my site.

e.g.

  • do I need to buy a graphics program (like Photoshop)

  • if yes would the GIMP be sufficient

  • steps to follow in one of these programs

  • is there an on-line site that I could use to create my personal images instead?

Thanks

Personally, I would hire a design guy to do the work. I am also a (part time) developer, so I can never get the flare that true designers seem produce.

Simple you just visit.... http://www.web20generator.com/ and you're done.

I did come across this link http://mittermayr.wordpress.com/2006/02/03/20-culture/

Lots of gradients, rounded corners, oh and a nice chunky sans-serif font!

Please, just hire a designer…

:stuck_out_tongue:

I'm amazed that article which is so thoroughly tongue-in-cheek has missed one of the most noticeable visual features of Web 2.0: the "Fade from Piss Yellow Highlight".

I'm going to have to echo everyone's who's said hire a designer. A GOOD designer. BUT if you want to do it yourself, take the time first to learn about design theory, like grid structures and typography, and effective use of negative space, and balance and style. Then load yourself up with a graphics program. I've been using Photoshop for ages & am trying to transition to the GIMP, which seems to be equally powerfull. For what you're doing, it's probably more than sufficient. You may find a vector tool like Illustrator (or Freescape) more useful for creating site images, though -- I usually use both.

Use 24-bit PNGs. There's a js plugin called pngfix that'll let IE use them, but it still won't work for background images, so keep that limitation in mind.

Design for a max-width of 770px to keep everyone happy, make sure your CSS is standards-compliant, and make use of AJAX (Scriptalicious is easy to implement).

If you really want to follow "Web 2.0" guidelines, go here: http://www.webdesignfromscratch.com/web-2.0-design-style-guide.cfm BUT I think you're approaching it from the wrong angle. Design should be about creating a visual feel, not copping a current trend. While the 2.0 style sure can be pretty (gradients and whitespace are great!), I think you might be better off incorporating some of its elements into your website where appropriate, rather than trying to include them solely for the sake of looking 2.0. 2.0 should be about function, not form, and we all know that form ought to follow function, anyway. Your site design ought to be based around your goals for the website and its useability, not recreating a current trend. The 2.0 look has become so ubiquitous that it's already becoming cliched -- if you spend all your time trying to look current, you're going to find you look dated pretty damned soon.

Just a few thoughts from the design side of the fence.

thanks Sarah - I’ll take up your advice. Any recommendations on a good book/text covering the design concepts you mentioned? I obviously keen to have a crack at this otherwise I wouldn’t have posted, so thanks for taking the time with you answer.

BTW - Another good link I found (via digg) was this one.

thanks Sarah - I’ll take up your advice. Any recommendations on a good book/text covering the design concepts you mentioned? I obviously keen to have a crack at this otherwise I wouldn’t have posted, so thanks for taking the time with you answer.

Start looking at design. Lots of design. It’s everywhere; pay attention to it – what works, what doesn’t, and why.

Learn basic composition & art principles.

Search for “CRAP” on Google.

For general typographic principles:

“The Elements of Typographic Style” is practically a bible

“Stop Stealing Sheep” is much shorter & a better introduction to the art of typography.

Typography for the web is a pain in the ass. Stick to the web-safe ones:

http://www.angelfire.com/al4/rcollins/style/fonts.html

Unless you implement sIFR, which is great but sometimes a pain itself, and can only really be used for headlines.

I prefer to set my main body font-size to xx%, and base all other font sizes in ems. This creates the most consistent font sizing while still allowing browsers to increase/decrease font sizes.

http://webtypography.net/ is a great resource.

Design Theory:

I HIGHLY recommend “The Elements of Graphic Design”, which is short & very readable but presents lots of good principles & applications.

“The Non-Designer’s Design Book” comes highly recommended but I’ve never read it myself.

The Universal Principles of Design is a fantastic book about the over-arching principles of design as applied to all kinds of different disciplines, but is probably something you only want to get into if the design bug bites hard.

http://www.usask.ca/education/coursework/skaalid/theory/cgdt/designtheory.htm gives a general overview of design principles.

http://poynteronline.org/column.asp?id=47&aid=37529 talks about grid structures. Also try “Making and Breaking the Grid”.

Search for the Golden Spiral and the Golden Rectangle.

For more web-specific stuff:

http://www.webdesignfromscratch.com/ is a great site about making websites.

http://developer.apple.com/internet/webcontent/bestwebdev.html describes best practises for website design.

Run your designs through the W3’s standards-compliance tools, and test cross-browser/cross-platform. A few tools to test browser compatibility, if you don’t have the resources:

http://ipinfo.info/netrenderer/

http://v03.browsershots.org/

http://www.browsercam.com/

http://www.designmeltdown.com is a great discussion of design trends & a good source of inspiration.

http://platea.pntic.mec.es/~jmas/manual/english/sitemap.html is a pretty comprehensive design manual, though not all that accessible.

http://www.alvit.de/handbook/ is a whole mess of links to other resources.

BTW - Another good link I found (via digg) was this one.

There’s a million tutorials out there like this, about how to make Aqua-style buttons, Web 2.0 buttons, reflections, gradients, etc. Basically it’s all just making use of PS’s Layer Styles (in the layer pallet, click the button at the bottom that looks like the Flash logo, and play especially with the “Bevel and Emboss” and “Gradient Overlay” and the various inner/outer glow option). Your best bet is to just go in & play around with layer styles, experimenting until you get a feel you like – you can get a lot of interesting effects this way, and it’s an easy way of adding depth to otherwise flat graphics. To reuse an effect, simply right-click on the layer with the styles attached, choose “Copy Layer Style” from the drop-down, then r-click on a different layer & select “Paste Layer Style”. You can also save layer styles as sets but I can’t remember off the top of my head how to do this.

Good luck, and if I can help out, do let me know!

Heya,

Also keep in mind that good design is an interative process, exactly like good programming. The rinse and repeat formula is applicable, too. IMHO, design and programming are also not to be strictly seperate, as they can greatly influence each other.

Some pointers: - The best sites that have the best look and feel (and thus, functionality) are those where designers and programmers are working closely together, starting during the "inception phase" of the site. This is especially true when doing web applications, where things like Ajax-driven page updates need to work seemlessly (vs. pure page-based updates) - One great designer can be better than ten not-so-good ones - Learn the scoop: be aware of design, and learn how to differentiate good from bad

Good luck! :slight_smile:

Best, Thomas

thanks Sarah/Thomas

Hey, one question comes to mind. By spicing up the UI using images for buttons (with web 2.0 effects etc) this would imply the need for multiple buttons images to be created for each language, and also the ability to change text via the properties files would be lessened.

Are there any tricks re maintaining the flexibility of displaying text from this respect, but with the look and feel of web 2.0 type images? Perhaps by slicing up a web 2.0 type of button style into top/button & corners so that it is possible to create what looks like a web 2.0 button using DIV techniques (like when one creates a rounded square to keep a variable length amount of text in), and then having the text appear within this?

Any suggestions/ideas re this?

Cheers Greg