Smashing Magazine we smash you with the information that will make your life easier. really.
Design Patterns: Badges, Tag Clouds, Huge Fonts
September 3rd, 2006 in Graphics | 48 Comments
Web 2.0 dominates. Everywhere and all the time. The new design trends are there, in front of you and me, on the blog you’ve come from and on the blog you are going to visit next. Every now and again we find new design elements which somehow manage to become essential for every hip, trendy, glossy, stylish web-site which will be developed in the era of its majesty Web 2.0.
Remember those web-sites with old gray Javascript buttons, huge Comic Sans headers and visible eXtreme counters we used to visit few years ago? Looking at them, and looking at recent developments, one realizes how much actually has changed. But what has changed really - ok, we don’t see those buttons, those headers and those counters. In fact, we see something else.
With this article we start a series of articles about the latest design trends and patterns a web-developer should keep in mind, designing his new web-site.
1,2,3… Start!
Presenting services and end-products to potential customers, web-designers tend to stick to simplicity. The information provided by clients has to be explained in an understandable way. A web-developers should make sure the user understands instantly, what the company is offering, what are users’ adventages and what is actually required for using the service.
What is interesting is the fact that one can see the same familiar form of process visualization over and over again. You don’t see a huge list with requirements (in fact, usually you’ll find them on the bottom of the page, written in font size 7px or even smaller) or detailed .pdf-manuals on a front page. What you usually see are three-steps- and easy-to-go-badges in the center of the pages - they describe exactly what has to be done to use the service in few clicks. The use of graphics is essential and obligatory. Also Flash is often used to attract the attention of the users.
Examples:
friendster.com
fon.com
communitywalk.com
blish.com
dpolls.com
Badges and Flowers
Probably one of the most popular trends in the era of Web 2.0 are “Badges” with various round and square corners and modified flowers, we used to find on milk packages in the 90s.
Examples:
sixapart.com/comet
goowy.com
ajaxload.info
haveamint.com
conversate.org
sidejobtrack.com
zerohex.org
secondsite.biz
Beta
Have you tried to find at least one released Web 2.0 service? Browsing through the swarm of Web 2.0-sites you are more likely to find a beta-version than a released one. Ironically, just like few years ago, new ideas are born every day. But today they are realized instantly - and presented to the public as a beta-version.
Of course, “Beta”-stage delivers many advantages for developers. Being “Beta” means being incomplete and therefore - being allowed to offer the functionality which will - and probably - should be improved in the near future - just the way user would like it to be. In this way it is easier to prevent complaints, gain the attention of curious users and win some time for further development.
The label “Beta” has become some kind of trademark for something new and exciting. Over the last year it has almost become a standard for new projects and is often presented in bright and eye-catching colours together with the logotype of the site - intentionally, of course.
Examples:
clickcaster.com
bubbleshare.com
shozu.com
riya.com
picpix.com
redtoucan.com
mabber.com
Tag Clouds
Tag Clouds can simplify the navigation or confuse the visitors. Used effectively, they can provide help and emphasize the main topics and themes being tackled in a blog. However, sometimes they simply don’t fit and make both readability and usability more difficult: mainly, if web-typography isn’t used properly or basic rules are breached (i.e. line-height hasn’t been defined in em’s, but in px’s).
Examples:
shadows.com
connotea.org
blogmarks.net
imeem.com
browsr.com
Large Input Fields
Not a single web-developer would dare to do it few years ago, especially because not every browser would present input fields properly. In the meanwhile, it isn’t a problem any more and web-developers make use of it. Web forms are changing, legends and fieldsets become more and more popular, and large input fields appear like mushrooms after a rainy day - here some examples of them.
Examples:
Quite unusual design decision. Actually, it is an input field of a search engine seekum.com.
podbop.org
feedpile.com
Huge Fonts
The presentation of headers has become an important style element of every web-page. Image headers tend to be replaced by text-based headers - CSS does its work perfectly. The time of mini-headers is over, the opposite becomes more and more apparent - and sometimes extremely exaggerated. Enormous fonts can be found not only in headers, but also in navigation menus and brief texts.
Examples:
krugle.com
clearleft.com
blog.qype.com
rrove.com
Rounded Corners
Actually, there is a reason why we love rounded corners. This elements simplifies the readability and makes the understanding of presented information easier. In fact, rounded corners are used by emerging web-sites and young projects. All page elements become more round - navigation menus, buttons, input fields, tables and text columns.
Typical examples are web-sites like Ioutliner, Netsquared and Springdoo, which use rounded corners to its fullest effect.
Rounded corners with sharp shadows: cluckoo.com
ning.com
Rounded corners everywhere: zimbra.com
Leave a Reply
Sponsors
- Advertise with us!
Smashing Links
Popular Posts
- 100 Wordpress Themes
- 83 Wordpress Themes
- 80 AJAX Solutions
- 53 CSS Techniques
- 45 Blog Designs
- 50 Beautiful Designs
- 50 Simple Designs
- 60 Elegant Designs
- 65 Flash Designs
- Brilliant Wallpapers
- Brilliant HDR Pictures
- Brilliant Photos
- Free Design Templates
- Free CSS Layouts
- Free Icon Sets
- Free High-Quality Fonts
- Slideshows & Lightboxes
- Adobe Photoshop Tutorials
- Adobe Illustrator Tutorials
All Posts
- 404 Error Pages
- AJAX Libraries
- AJAX Solutions
- Blog Designs
- Blog Headers
- Book Covers
- Browsers Round-Up
- Browser Test Suites
- Buzz-Monitoring
- Charts and Diagrams: Tools
- Cheat Sheets
- Code Beautifier
- Copyright Explained
- CSS Coding Techniques
- CSS Designs 1, 2, 3, 4, 5
- CSS Expert Ideas
- CSS Float Theory
- CSS Frameworks
- CSS Free Templates
- CSS Footers
- CSS Forms 1, 2
- CSS Frameworks
- CSS Galleries
- CSS Ideas
- CSS Layouts
- CSS Menus
- CSS Print-Layouts
- CSS Specificity
- CSS Styleguides
- CSS Tables
- CSS Tutorials
- CSS-Techniques
- CSS Tools
- Data Grids and Tables
- Data Visualization 1, 2
- Date Stamps
- Design Books 1, 2
- Design Magazines
- Designer's Checkpoints
- Domain Tools
- Dreamweaver Tutorials
- E-Mail Delivery
- Favicons 1, 2, 3, 4, 5, 6
- Firefox Themes
- Fireworks Tutorials
- Flash Designs
- Flash Slideshows
- Flash Tutorials
- Fonts 1, 2, 3, 4
- Forums
- Gadgets 1, 2, 3
- Google AdSense
- Google PageRank
- Graphics Design
- Grid-Based Design 1, 2
- Grunge Design 1, 2
- Hand-Drawing Design
- Handwriting and Lettering
- Hotkeys
- HDR Pictures
- HTML Template Systems
- Icon Sets 1, 2, 3, 4
- Icons, Templates 1, 2, 3
- Illustrator Tutorials 1, 2
- Laptop Sleeves
- Laptop Designs
- Link Building
- Mascots
- Motion Graphics
- Music Videos
- Navigation Menus
- Newspaper Designs
- Online Converters
- Online Generators
- Pagination
- PDF Magazines
- Photoshop Tutorials 1, 2
- Pixel art
- PNG Transparency
- Portfolios
- RSS Best Design Practices
- RSS Icons
- Screensavers
- SEO Tools
- Shopping Carts
- Short Movies
- Slideshows & Lightboxes
- Splash Pages
- Start Pages
- Stock Icons
- Tab-Based Interfaces
- Tag Clouds
- Textures & Backgrounds
- Tooltips Scripts
- Tutorials
- Typefaces 1, 2
- Type Setting Principles
- Typographic Posters
- Typography In Motion
- Typography Showcase
- Usability Books
- Usability Glossary
- Usability Nightmares
- Usability Principles
- User Interfaces
- Vintage and Retro
- Wallpapers 1, 2, 3, 4
- Web 2.0 Tutorials
- Web Profis Ideas 1, 2
- Whitespace & Simplicity
- Wordpress Plugins
- Wordpress Themes 1, 2, 3, 4
Webtips
Sideblog
Ross Johnson discusses 8 forgotten fonts you may use in CSS. Among them are Palatino Linotype, Century Gothic, Copperplate and Gill Sans — apparently, these fonts are installed on a variety of operating systems.
How creative can a table of contents be? Designobserver presents Thirty Tables of Contents. The collection includes excerpts from the books by Philip Larkin, Philip Roth, Paul Rand and Jan Tschichold.
A set of 18 splendid and colorful looking 3D RSS-Icons. They are done with 3d Studio Max. JPG.
In Font Clock 12 different fonts are printed within the mechanism of a clock, providing a random, mixed display of graphic language within a single time piece. Designed by Sebastian Wrong.
One pixel notched corners as used by Google Analytics. Instead of each option being boxed in a clickable rectangle, there is a 1px notch in each corner. It's not necessarily a curved corner, but it is a little softer than a normal box. Nice little trick.
Hartija is a CSS print framework which is an attempt to unite best CSS printing practices into one single CSS-file.
Rather than standard website templates, a free admin template is nearly impossible to find. This is an admin template which you can use for web applications like online-shops or CMS.
Fully Personal Interface research is a survey where people are questioned about their interface preferences. Results: labels and icons should be placed on the left, horizontal menus are more popular than vertical ones.
Alexander Kinnunen (September 15th, 2006, 12:50 am)
A really nice article, with great examples!
Deborah (October 10th, 2006, 2:07 pm)
What a coincidence. We are both writing about web stuff and we have chosen the same theme. Good taste I guess. Your site is very informative. I found it whilst doing a Google search.
I see by your profile you are involved with the ‘Web Developer’s Handbook’, which is a site I used at one point for resources. Very extensive.
milo (October 22nd, 2006, 4:32 pm)
Pretty good article, all new stuff in one hand, thanks.
rajendran (January 17th, 2007, 8:55 pm)
Very good article and a very useful one for designers like me as well. I have bookmarked your site so that I can learn more about the latest happenings. Thanks!
SvT (January 25th, 2007, 5:53 pm)
good article!) tnx..
Özcan (January 29th, 2007, 12:16 am)
Pretty good article, all new stuff in one hand, thanks.
Matt (January 31st, 2007, 10:42 pm)
A good article but how long will it be before badges, huge input fields and tag coulds be a thing of the past? In other words another web “trend”.
Matt Davies (February 16th, 2007, 9:07 pm)
Bring on web 3.0! Great article. Cheers!
Web Designer (March 5th, 2007, 9:49 pm)
what a cool article! Thanx for such a useful information.
Piyal Kundu (March 6th, 2007, 1:43 am)
Very nice article. Need more. Thanks
klein (March 14th, 2007, 4:56 pm)
nice information,i will surely use this info in my site designersyard.com, i like this.
navi (March 22nd, 2007, 6:53 am)
nice lists….
It gives me some inspiration,keep on moving forward!!
Güneş (April 13th, 2007, 11:24 pm)
Your site is very informative. I found it whilst doing a Google search.
Direccion cuboCMS (May 5th, 2007, 3:59 am)
You give programmers the guidelines to enrich application development. Since I read your articles I become aware of all the things involved in web development, not just tables, dbs and server side code. I trying to quit on tables, but as you can imagine it’s a little hard because I’ve been doing everything with tables since 1997!
Thanks, this is an unvaluable resource, not just to designers, but also to server side programmers!
CYA!
Harry (June 5th, 2007, 5:28 am)
These design trends have very little to do with Web 2.0 (other than tag clouds maybe). Mostly these trends have to do with recent “design” ideas that are popular. Everyone is getting on the bandwagon and copying everyone else. That’s not really new either. Rounded corners certainly aren’t new.
Randolph Valencia (June 6th, 2007, 12:22 am)
Very informative post! Good job!
albert (June 20th, 2007, 10:59 pm)
Thanks for all inspirations, smashingmagazine is one of my favorite site…
greetings
Albert from cuba
Freelance Rotterdam (July 16th, 2007, 11:16 am)
good post, this design trends are true =)
Freelance Rotterdam (July 16th, 2007, 11:17 am)
ow, i think you forgot the “reflections” :))
arun bhatia (July 24th, 2007, 7:01 am)
really nice articles with example. I m realy impressed with the way it was explained.
NIshanthe (August 5th, 2007, 1:02 pm)
Good list with nice examples.
-Nish
TN (August 16th, 2007, 9:21 am)
I think Web 2.0 has a lot to do with web dev catching on to design, layout and information hierarchy - the theory has been around forever, and the things Web 2 is addressing is quite basic, but the basics are good and I can only say it’s about time.
The fact that everything is shinny, or has rounded corners means nothing. It’s like saying bell-bottoms on trousers are integral to the trousers - obviously they aren’t, it’s just a fad. And the same can be said about the current penchant for slick buttons, reflections etc. However the underlying theory behind making information easy to access and comprehend has started seriously on the web, which is good to see.
bincom (October 8th, 2007, 9:55 pm)
Here is a lovely list. Our company website is currently being redesigned and this list is serving as inspiration. Cheers.
Ivy Clark (November 4th, 2007, 11:14 am)
Great observations! I’ll definitely check back for more. Thanks for sharing. Cheers!
John Smith (November 27th, 2007, 11:15 pm)
why not go straight to web4.0
Rajiv (December 27th, 2007, 3:08 pm)
Hi this is cool Article. those who are learning Web 2.0 this is very best article to understand Web 2.0
thangaraj (January 11th, 2008, 5:02 am)
I like to see all these good concepts.
john feller (January 18th, 2008, 12:28 pm)
I was under the impression that web 2.0 was about functinality, not fancy-schmancy stripy glossy graphics. And what happened to vowels?!
Seriously, facebook is a good example of web 2.0 (apparently) - being able to rearrange items on the page at will makes the site (or any site that utilizes such a feature) engaging and feels more personal to the user. Modular…ness.
or am i thinking of Web 3.0?
waqas zahoor (January 25th, 2008, 9:40 am)
Nice, vary nice
Dean (February 15th, 2008, 6:40 am)
Great post.
Ive noticed an emerging trend not mentioned here, and one which i believe we will be seeing a lot of in ‘08.
Pattern fills. Mostly subtle, ornamental florals, or sometime retro graphic, used in clean flat vector shapes in logos and other graphics.
I’m led to believe its crossed over from interior design and last years trend for using wallpaper as opposed to paint.
One to watch….
Loky (February 27th, 2008, 4:24 pm)
There is another nice LARGE input field at: Link [www.pricegrabber.com]
Loky (February 27th, 2008, 4:24 pm)
Thanks Guys!
There is another nice LARGE input field at: Link [www.pricegrabber.com]
Kishore Blog (March 12th, 2008, 11:42 am)
Useful stuff for everyone. Somany informations. Thanks
Ofcourse im a regular visitor here.
Link [www.kishoreblog.com]