Web2.0 style design
Please, whenever I am refering to Web2.0/Ajax ?I am NOT talking about the technology itself. Apparently I wasn’t able to find a proper term for that very popular design scheme appearing quite often lately in TechCrunch entries or similar reviews. It’s due to the fact that most of these “web applications” are using Ajax technology and benefit from the interconnection of web services (Web 2.0) ?so that’s why I tend to call them “Web2.0/Ajax”. I think I’ll name it ”2.0Culture” for now. Right. So let’s stick to that.
In order to get attention to your brand-new 2.0Culture backed website, you need to bring up some decent “up-to-date” design with it. No, I am not talking about CSS instead of tables or suchlike. I am talking about simplicity combined with big fonts, shiny shaders and very, very strange brand names. Despite the fact that you need to do your homework learning about tags, clouds and plenty more of these catchy words? You can still be a great “new wave” designer? Without being a pro 2.0Culture technology geek.
Right, let’s get it started while it’s hot.
First of all, check out these sites for a basic overview. Try to identify the major similarities between the various concepts. All of them seem to origin from the very same developer. Even though there’s no guideline (except this one here, wooho!) on that kind of design ?it seems that the Bay Area is handing around some secret guide for that particular design scheme. Look here:
As you might notice, these designs are pretty similar. But wait, the 2.0Culture has much more to show than that. This is just a small excerpt and we are going to put a particular focus on that kind of design for this article. There are millions of other sites, looking totally different while still being recognized as a “hmm, this looks like 2.0Culture” design. If you want to learn about the technology behind it, use our SanFran friend, Google.
* Rounded Shapes
* Sans Serif
* Pastell v2.0
* Font-Size: Oversized
* Descriptive HTML (XML style)
Major DO NOT’s:
* Java Applets (Script is fine though)
* Animated GIFs (the blinky ones)
* 100% Flash Websites
* Visible tables
Right, let’s get our feet wet and start right off with:
Ok, this sort of break-boring-html-rules trend seems to have got quite a must-have nowadays. Frankly, I also prefer rounded shapes over tight rectangles. Same with women, I guess. Nevertheless, some 2.0Culture providers do still stick to the rectangle design schemes. No problem at all, have a look at writeboard.com ?their editor is a rectangled interface. Nice as well. To try a “psychological” approach to this difference, I might point out these facts:
- Rounded shapes look more inventive, younger, flexible and experimental
- Rectangles do impress with professionality, big-business, trustworthy
So, this is my personal interpretation. Flames welcome. But take your time and think about it yourself. Check out some different designs and make your decision on what’s happening “inside yourself” while looking at them. I guess a decent interconnection between professionality and a fresh young breeze of inventive Bay Area mushrooms might be our perfect fit for this project. How do we achieve that? Simple: Combine. We got 2 solutions:
- Use a rectangled website container and rounded shapes for interface boxes like content divs and navigation.
- Use a rounded-shape website container and keep the content divs and navigation very straight.
It’s up to you what you prefer for your project. I do indeed like both. Though I got to say that using the second approach might be a bit easier to implement for the average web designer. You can do a simple Photoshop design for that purpose. Might take you some 15 minutes to get it done. To be honest, I think the trend is going towards a non-bordered website including lots of rounded shapes (which is the first approach then). So get ready to step up a gear and dig some more CSS guides.
I have put together a list of websites that go into detail on how to implement a rounded-shape design:
So get some coffee or tea and open up the virtual books. This might take you some 30 minutes to an hour if you are new on that. But it’s worth the effort. Think of browser compatibility, it’s a tough one.
Don’t overdo with shades, but think of using them. It’s not obvious for a web designer to think of them, but users feel the difference having them around on a website. It’s not about trying to make a 3D look, but more about pushing the plain, flat designed boxes into a new dimension of visual recognizeability (is this a word?). Mostly used as a nice background for a top heading or around content boxes. Examples do the talking here:
Sans Serif (Arial, Helvetica, …)
I had to update this part of the guide due to heavy complaints about only refering to the Arial font, while Helvetica and other sans-serif fonts just do perfect as well (or better!). It’s that particular font style that’s been around for ages now. I remember a time when it was absolutely out and “nerdy” to use Arial for anything you wrote. Simply because geeks tried to seperate themselves from the every day Word Processor user, who were choosing Arial as most easily readable, besides Times New Roman. And now, wohoo, major come back. Literally Arial (and Helvetica, and similar…) has become a rule for simple, yet great looking web design. Font-Size 8 to 10 was a cool thing to do recently. Now we talking about sizes 14 and up. Not kidding. If someone asked me to design a webpage for impaired visitors I would most likely set up a 2.0Culture website. Even though it was not very popular to stick to “easy navigation and readable content” in recent days, things have changed big time by today. No more Font-Size 8 100% Flash ?Please wait while pre-loading 1% ?websites. I welcome that. Webdesign tends to become easy with that approach. Assuming CSS3 is really going to make things easier, of course. Remember to mark all your content with relevant terms like “headings”, “lists”, “links”, “paragraphs”. More on that further down then. Just a quick summary of this Arial rule:
- Use a base font size for your website. And make all other fonts relative to that one (e.g. font-size: 115%). This allows users to get foxy with their mouse wheel to rotate through font-sizes ?while your website still looks cool.
- Do ALWAYS define your font-relevant settings inside a CSS file.
- As usual: ONE FONT PER WEBPAGE is totally fine, trust me.
- Never use more than 3 different font-sizes.
This has been known for quite a long time now. The only addition to that is a combination of pastell colors with 100% Green, Blue or Red. Keep your website backgrounds and interface elements in Gray, White or some very light pastell colors. And now, you might be able to use a 100% Green header bar. Or (please, notice the OR, not AND) use a red navigation with white links. Go ahead and Make your download links sky-blue. It’s going to rule. But again, look around and get some first impression on how this looks at professional 2.0Culturals. This should get your started pretty quick. Just don’t overdo, that’s why you should really mind the “OR”. I think you’ll find your way through.
Check out freaky Skype on that: http://www.skype.com
It has become a must have. Footers. Most users don’t even notice them. You might have never clicked on one as well. But still, they need to be there to make a site look professional. Without them, everyone assumes you run a personal website. Believe or not, try and see yourself. Oh yes, and please, don’t ever think of making your footer stick to the bottom of the screen, behaving totally unimpressed of scrolling. That’s a no no. That’s too much geek, I’m afraid. There are two major sorts of footers, you need to decide yourself, which one is more suitable for your particular design. I have prepared two links with those two major implementations for you:
Friendster: A centered approach, containing well aligned elements.
Del.icio.us: Gray horizontal line, left(or right)-aligned links underneath.
Within the major trend of moving from a home-computer application interface to a hosted worldwide web based application design, also lies the origin of recent sightings of button-like navigational elements. No, I am not talking about those -go to hell- Java applet buttons. Brrr, freezing. I am talking about “image buttons”. Either rounded or stricly rectangle shaped. And mostly quite large ones as well. The number one usage of these buttons is the must-have: DOWNLOAD button. When used in site navigation, the buttons appear to be a bit smaller. And don’t forget to use Arial for captioning, I told you.
Mhm. Right. Huge fonts. A no no no back in the days of Frontpage heros and free webspace fans a la “Look ma, I got a website!”. But times do change. Johnny Cash is dead and big fonts are back. I wish it was the other way round, but let’s get ourselves updated to 2.0 and accept oversized fonts. No big deal with that, simply remember to set up all your font settings inside your CSS file and define a base font and size, while using relative sizes after that. That’s common procedure. If you are totally uncomfortable with that, I might point you to a 2.0Culture compatible work-around:
* Use large headings, make them stand out
* Use medium sub-headings as a fade from large headings to normal content.
* Use normal sized content.
* Avoid long blocks of text then, this is crucial.
* Try to seperate your content into medium boxes
See here: http://clipmarks.com/ or http://www.banshee-project.org/Main_Page
And for everyone comfortable with fancy oversized design:
Descriptive HTML (XML style)
View sources of:
Great so far. I will not go into any details concerning the DONTs here. You might be able to figure it out yourself.