We’re all mostly accustomed to educating ourselves by reading articles. Rare are the opportunities to attend conferences or watch live shows on subjects that we’re interested in. That’s why we are presenting here phenomenal videos and related resources on the topic of user experience (UX) by different presenters at different events. We have focused on current content but have included some older videos that are still relevant. It will take you more than 16 hours to watch all of these videos. So, make some popcorn, turn off the lights and enjoy.

User Experience Videos

The State of User Experience
Jesse James Garett, founder of Adaptive Path and author of the book The Elements of User Experience, speaks on what UX and UX design is, what UX looked like before and what are some of the challenges people are encountering now. He cites engagement as the main goal of UX design and, through some fantastic examples, shows that engagement is an universal quality achieved through visuality, sound, touch, smell, taste, body and mind. One of the most impressive moments from the session is when Jesse compares Beethoven to an experience designer, accompanied by the Ninth Symphony. Duration: 40 minutes.

UX Best Practices
In this excellent video session, Nick Finck pries open the most popular websites today, including eBay, Amazon, Toyota, Flickr, Twitter and Netflix, to explain user experience best practices. Nick discusses both the good and bad experiences on these websites on the basis of visual design, information architecture, interaction and ease of use. For those unfamiliar with UX, Nick explains the basic concept and contributing factors. The last 20 minutes of the session are reserved for Q&A, and some very interesting questions and great answers come up. Duration: 1 hour 32 minutes. There is no video of the session, only 75 slides with an audtio track.

The Three Ways That Good Design Makes You Happy
In this short but fantastic lecture, Don Norman, known to many as the author of The Design of Everyday Things, explains visual, behavioral and reflective design and the ways in which each of them affects people. In his witty way, Done shows examples from everyday life. Duration: 13 minutes.

5 Minutes on Imitation in Design
In this brilliant short talk, Jeffrey Veen explains what is meant by “Good artists copy, great artist steal.” By way of an interesting short story about World War II and the American army’s contact with natives of the Pacific Islands, he also explains “cargo cult” and how it still present today. A truly brilliant video. Duration: 6 minutes.

UX Team of One
In this half-hour session held at the IA Summit 2008, Leah Buley of Adaptive Path shows what it means to be a UX team of one by telling her own story and recounting a real-life example. Leah explains the concept of generative design, which is the process of creating and sketching a lot of different ideas and then refining them. The slides are amazing because Leah drew them by hand. Duration: 32 minutes.

Experience Is the Product
Peter Merholz explains why it is important to focus not on technology or features but on the product and the experience you want to create. The session is rich in good and bad examples drawn from real life. Duration: 43 minutes.

Behavior Is Our Medium
In this fantastic session, Robert Fabricant talks about interaction design beyond computing technology. His examples include the family tree and one particularly interesting tree that his daughters drew. His examples from history, especially ancient history, are amazing and put interaction design in a broader context beyond the computer interfaces we’re so used to. Duration: 61 minutes.

Web Form Design
If you think Web forms suck (because you have to fill them in every day), then you must see this video. This talk by Luke Wroblewsky at MIX 09 is based on years of experience in usability testing and study. Luke shows examples from the real world and addresses the major problems with Web form design today. You will see how some of the biggest websites have failed and what you can do to prevent such failures in your Web forms. Duration: 75 minutes.

User Experience Design for Non-Designers
In this short mini-breakout session, Shawn Konopinsky explains what UX design is at a very abstract level. He shows three different types of user interfaces and how UX design applies to all three. He explains basic concepts such as concept ideation, interaction design and visual design and emphasizes the importance of an “Agile” approach to projects. Duration: 18 minutes.

The Importance of Identity and Vision to UX Designers on Agile Projects
If you watched the previous video, you will know why the Agile approach is important in UX design. This video and the slides go deeper into the Agile approach, relying on research done at London university. Johanna Kollmann explains the research and the results. Duration: 32 minutes.

Learning IxD from Everyday Objects
“Inspiration surrounds us in everyday objects.” This is how Bill DeRouchey begins this brilliant talk about interaction design. We use icons, words or shapes to create a language of interactions. If we use the wrong language, the interaction becomes confusing, and this is what Bill shows, using many common objects and devices. One of the most interesting slides is the one that shows how users “hack the interface.” Duration: 45 minutes.

Two videos: Information and Architecture
In these two short videos, Mickey McManus explains related concepts: information and architecture, using everyday objects, such as cup of tea, to illustrate his argument. The videos are part of a short article in which Mickey draws these concepts together to explain what information architecture is. Duration: a few minutes.

Wireframes for the Wicked
Nick Finck, along with Michael Angels and Donna Spencer, goes over wireframing basics via short easy questions. What are wireframes? Why use wireframes? What does the process of wireframing look like? The three of them also explain the different types of wireframes and show examples of their work. Duration: 1 hour 5 minutes.

Design Prototyping: Bringing Wireframes to Life
Dan Harrelson explains the purpose of prototyping, why it is important and how it differs from wireframes and visual comps. With wireframing, instead of seeing how a concept functions or works, we see how it actually feels, which contributes to better usability testing. The video, like all videos from MIX 09, has “double view”: while looking at the large slides, you have a synchronized inset video of the speaker. Duration: 60 minutes.

Journey to the Center of Design
Does user-centric design really exist? In this funny keynote, Jared Spool asks whether user-centric design (UCD) has lost its way and needs to evolve into something else. Ironically, as studies have shown, many great projects have succeeded without UCD. Jared suggests three key attributes of great experience design that can replace UCD. Duration: 1 hour 14 minutes.

User-Centered Design 101
In this Web seminar, Frank Spiller demystifies the paradigm of UCD. He explains the difference between usability and UCD, which has confused many. From the perspective of the development process, he compares UCD to the Agile and Waterfall processes. At the end, he shows some UCD success stories. Duration: 58 minutes.

The Mint.com Experience
Aaron Forth of Mint.com speaks of the importance of aligning your user experience and business objectives. He goes over the challenges of delivering such a user experience at Mint, what the company did to attract brand interest and how Mint became one of the best personal-finance software tools today. Interesting fact: Mint discontinued IE6 support because it spent almost 20% of its time designing for the browser. Duration: 40 minutes.

Mobile User Experiences
Rachel Hinman start her talk about mobile user experiences with a provocative thought: that technology disengages us from real life. She says we should rethink our relationship to devices and use them in the context of concrete tasks. Duration: 24 minutes.

Tap Is the New Click
“Several years ago, Minority Report was a sci-fi movie, and now we’re already there with [the touch wall].” At the beginning of his session, Dan Saffer shows a couple of examples of touch-screen technology that marks the beginning of a new era of interaction in which gesture and touch replace mouse clicks. He explains how to design for these technologies by going over how touch-screens differ from traditional websites and devices. Duration: 67 minutes.

10/GUI
This is a fantastic experiment that examines current mouse-driven user interfaces and their limitation while offering a completely new way of interaction. Although keyboard and mouse were really great innovations in past century, Clayton Miller think we shouldn’t stop there but rather innovate further. Duration: 8 minutes.

The Least You Can Do About Usability
Steve Krug, known to many as the author of Don’t Make Me Think, here tries to convince people to do their own usability testing. Confirming Jacob Nielsen’s advice, that developers can do it themselves, Steve identifies the minimum requirements to make usability testing meaningful. At the end of the session, Steve performs a short usability test right in front of the audience, which makes this session truly outstanding. Duration: 60 minutes.

AJAX Usability
Kelly Norton talks about a very interesting, and often forgotten, subject: AJAX usability. He covers usability basics and how to design AJAX applications for humans. Full of real-life examples, he offers several concrete suggestions on how to improve usability in AJAX applications. Duration: 55 minutes.

Jason Fried of 37signals Speaking at Business of Software 2008
In this short amazing session, Jason Fried shares his thoughts and experiences from 37Signals. Ideas are agile, some even radical. This video is interesting because many of Jason’s thoughts contrast with widespread opinion. In the second half of the session, Jason uses audience questions to explain his ideas in more detail. Duration: 55 minutes.

Bonus videos

Sketching User Experiences
In this keynote from MIX09, the first 25 minutes are taken up by Bill Buxton, known to many as the author of the book Sketching User Experiences. In an optimistic talk, he explains why now, in these days of crisis, is a good time to pay attention to design and what key factors are required to revitalize the user experience. Duration: 25 minutes.

Interview With Don Norman on UX Week 2008
In a relaxed atmosphere at UX Week 2008, Don Norman answers interesting questions and share his thoughts on various aspects of design. One of the best bits comes at the beginning, when Don speaks of his “crusade” to replace the word “users” with “people.” Will we ever have “People Experience”? Do we already have it? Find the answer in this fantastic interview. Duration: 53 minutes.

(al)

© Janko Jovanovic for Smashing Magazine, 2010. | Permalink | 40 comments | Add to del.icio.us | Digg this | Stumble on StumbleUpon! | Tweet it! | Submit to Reddit | Forum Smashing Magazine
Post tags: usability, user experience, ux

This article reviews some important and necessary checks that web-sites should be checked against before the official launch — little details are often forgotten or ignored, but – if done in time – may sum up to an overall greater user experience and avoid unnecessary costs after the official site release.

Favicon

A favicon brands the tab or window in which your website is open in the user’s browser. It is also saved with the bookmark so that users can easily identify pages from your website. Some browsers pick up the favicon if you save it in your root directory as favicon.ico, but to be sure it’s picked up all the time, include the following in your head.

<link rel="icon" type="image/x-icon" href="/favicon.ico" />

And if you have an iPhone favicon:

<link rel="apple-touch-icon" href="/favicon.png" />

Titles And Meta Data

Your page title is the most important element for SEO and is also important so that users know what’s on the page. Make sure it changes on every page and relates to that page’s content.

<title>10 Things To Consider When Choosing The Perfect CMS | How-To | Smashing Magazine</title>

Meta description and keyword tags aren’t as important for SEO (at least for the major search engines anyway), but it’s still a good idea to include them. Change the description on each page to make it relate to that page’s content, because this is often what Google displays in its search result description.

<meta name="description" content="By Paul Boag Choosing a content management system can be tricky. Without a clearly defined set of requirements, you will be seduced by fancy functionality that you will never use. What then should you look" />

Cross-Browser Checks

Just when you think your design looks great, pixel perfect, you check it in IE and see that everything is broken. It’s important that your website works across browsers. It doesn’t have to be pixel perfect, but everything should work, and the user shouldn’t see any problems. The most popular browsers to check are Internet Explorer 6, 7 and 8, Firefox 3, Safari 3, Chrome, Opera and the iPhone.

• Cross-Browser Checks: Services and Test Suites
• 7 fresh and simple ways to test cross-browser compatibility

Proofread

Read everything. Even if you’ve already read it, read it again. Get someone else to read it. There’s always something you’ll pick up on and have to change. See if you can reduce the amount of text by keeping it specific. Break up large text blocks into shorter paragraphs. Add clear headings throughout, and use lists so that users can scan easily. Don’t forget about dynamic text too, such as alert boxes.

• Writing for the web

Links

Don’t just assume all your links work. Click on them. You may often forget to add “http://” to links to external websites. Make sure your logo links to the home page, a common convention.

Also, think about how your links work. Is it obvious to new users that they are links? They should stand out from the other text on the page. Don’t underline text that isn’t a link because it will confuse users. And what happens to visited links?

• W3C Link Checker

Functionality Check

Test everything thoroughly. If you have a contact form, test it and copy yourself so that you can see what comes through. Get others to test your website, and not just family and friends but the website’s target market. Sit back and watch how a user uses the website. It’s amazing what you’ll pick up on when others use your website differently than how you assume they’d use it. Common things to check for are contact forms, search functions, shopping baskets and log-in areas.

• Silverback – guerrilla usability testing

Graceful Degradation

Your website should work with JavaScript turned off. Users often have JavaScript turned off for security, so you should be prepared for this. You can easily turn off JavaScript in Firefox. Test your forms to make sure they still perform server-side validation checks, and test any cool AJAX stuff you have going on.

Validation

You should aim for a 100% valid website. That said, it isn’t the end of the world if your website doesn’t validate, but it’s important to know the reasons why it doesn’t so that you can fix any nasty errors. Common gotchas include no “alt” tags, no closing tags and using “&” instead of “&” for ampersands.

• 10 reasons your code won’t validate (and how to fix it)
• W3C validator

RSS Link

If your website has a blog or newsreel, you should have an RSS feed that users can subscribe to. Users should be able to easily find your RSS feed: the common convention is to put a small RSS icon in the browser’s address bar.

Put this code between your <head> tags.

<link rel="alternate" type="application/rss+xml" title="Site or RSS title" href="link-to-feed" />

Analytics

Installing some sort of analytics tool is important for measuring statistics to see how your website performs and how successful your conversion rates are. Track daily unique hits, monthly page views and browser statistics, all useful data to start tracking from day 1. Google Analytics is a free favorite among website owners. Others to consider are Clicky, Kissmetrics (still in closed beta yet), Mint and StatCounter.

Sitemap

Adding a sitemap.xml file to your root directory allows the major search engines to easily index your website. The file points crawlers to all the pages on your website. XML-Sitemaps automatically creates a sitemap.xml file for you. After creating the file, upload it to your root directory so that its location is www.mydomain.com/sitemap.xml.

If you use WordPress, install the Google XML Sitemaps plug-in, which automatically updates the sitemap when you write new posts. Also, add your website and sitemap to Google Webmaster Tools. This tells Google that you have a sitemap, and the service provides useful statistics on how and when your website was last indexed.

Defensive Design

The most commonly overlooked defensive design element is the 404 page. If a user requests a page that doesn’t exist, your 404 page is displayed. This may happen for a variety of reasons, including another website linking to a page that doesn’t exist. Get your users back on track by providing a useful 404 page that directs them to the home page or suggests other pages they may be interested in.

Another defensive design technique is checking your forms for validation. Try submitting unusual information in your form fields (e.g. lots of characters, letters in number fields, etc.) and make sure that if there is an error, the user is provided with enough feedback to be able to fix it.

• 404 error pages reloaded

Optimize

You’ll want to configure your website for optimal performance. You should do this on an ongoing basis after launch, but you can take a few simple steps before launch, too. Reducing HTTP requests, using CSS sprites wherever possible, optimizing images for the Web, compressing JavaScript and CSS files and so on can all help load your pages more quickly and use less server resources.

Besides, depending on the publishing engine that you are using, you may need to consider taking more specific measures – for instance, if you are using WordPress, you may need to consider useful caching techniques to speed up the performance.

• Best practices for speeding up your website
• Web page analyzer

Back Up

If your website runs off a database, you need a back-up strategy. Or else, the day will come when you regret not having one. If you use WordPress, install Wordpress Database Backup, which you can set up to automatically email you backups.

Print Style Sheet

If a user wants to print a page from your website, chances are she or he wants only the main content and not the navigation or extra design elements. That’s why it is a good idea to create a print-specific style sheet. Also, certain CSS elements, such as floats, don’t come out well when printed.

To point to a special CSS style sheet that computers automatically use when users print a page, simply include the following code between your <head> tags.

<link rel="stylesheet" type="text/css" href="print.css" media="print" />

• Printing The Web: Solutions and Techniques
• A List Apart: Going to print

Download the Ultimate Website Launch Checklist!

Just recently Dan Zambonini has published a very detailed checklist that covers both the pre-launch and the post-launch phase of the web site life cycle. Among other things his Ultimate Website Launch Checklist contains checks related to content and style, standards and validation, search engine visibility, functional testing, security/risk, performance and marketing.

The pdf-version is available as well. The checklist is a very useful reference that may help you in your daily projects and will help you to prevent errors and mistake once the site is released.

You may also want to consider the Quick Usability Check List by David Leggett that highlight some of the more common problems designers should address on their own sites in a Usability checklist of sorts. Not all of these items will apply to every website, these are just suggested things to look for in your own site design.

What other checks would you list?

Make yourself a to-do list and keep it handy to check over before making any website live. Are there any other points you would add? Share them in the comments!

About the author

Lee Munroe is a freelance Web designer from Belfast. You can see his other writings on Web design on his blog, or follow him on Twitter.

(al)

© Lee Munroe for Smashing Magazine, 2009. |
Permalink |
181 comments |
Add to del.icio.us | Digg this | Stumble on StumbleUpon! | Tweet it! | Submit to Reddit | Forum Smashing Magazine

Post tags: checks, design, launching, release, usability

You may have a personal portfolio website for a number of reasons. If you’re a freelancer, then you’d need one to showcase your work and allow people to contact you. If you’re a student (or unemployed), then you’d need one to show prospective employers how good you are and what you can do, so that they might hire you. If you’re part of a studio, then you might use one to blog about your design life, show people what you’re doing and build your online presence.

A personal portfolio website is all about promoting you. You are a brand, and your name is a brand name. No one is going to know about your brand unless you get it out there; and if you’re a Web designer, developer, writer, gamer or any other type of creative, then it’s essential that you have a good portfolio website.

You may want to take a look at the following related articles:

• Creating a successful online portfolio
• 50 beautiful and creative portfolio websites

What makes for a good personal portfolio website?

1. Logo

Your logo is usually the first thing a user sees. In the Western world, we read from left to right, top to bottom, so it makes sense to put your logo in the top left of your website so that users can immediately identify who owns the website.

It doesn’t necessarily have to be your name, but if you’re trying to promote yourself online, then it’s a good idea to go by your name. And always link your logo to your home page. It’s a common convention that users expect online.

Mohit goes by the alias of CSS Jockey.

Jason Reed uses a signature-style logo of his name.

2. Tagline

Once the user sees who owns the website, they’ll want to know what it is you do. This is where you explain what you do with a tagline. Your tagline should be short and snappy, summarizing what you do.

Things to ask yourself when writing your tagline:

• What are you? A designer? A writer? A developer?
• What do you do? Design websites? Develop games?
• Where are you from? Country? City?
• Are you a freelancer or do you work for a studio? Are you looking for work?

Sarah Longnecker makes it clear that she puts together videos and is good at it.

3. Portfolio

This is a personal portfolio website after all, so your portfolio will determine whether the website is interesting or not. People will want to see your previous work to decide whether you’re good or not and for general interest, to see what you’ve been up to in the past.

Depending on what you do, your portfolio should contain big high-quality images, clearly accessible to the user. Always include a link to the live version of the website you worked on, and link your screenshot to the live version (another common convention that people expect). Include a short description for each project, including the different skills that you needed to complete the project.

It’s never a bad idea to get a testimonial from a client. Your visitors might also be interested in the stages of development for your projects and how you arrived at the final outcome.

Leigh Taylor displays nice clear screenshots of previous work and indicates what software was used during development.

4. Services

Your tagline summed up what you do, but you’ll want to go into a bit more detail here about each service that you offer. You can’t expect potential clients to guess what you do based on your portfolio, and you don’t want to leave them wondering whether you offer a particular service or not.

Make it clear, and break it down: Web design, development, video, copywriting, branding, etc. You may want to be even more specific: corporate branding, church website design, Flash banner ads and so on.

Chris Spooner clearly indicates the services he offers for both print and Web.

5. About me

It’s all about you. Let people see the man or woman behind the mask (i.e. website). Share your background, where you came from, how many years you’ve been in the business, etc. The more details you give, the better your users can form a bond and build trust with you.

If you’re not camera-shy, show a picture of yourself. This will give potential clients peace of mind by allowing them to see who they’re dealing with, and it adds an element of trust.

Don’t be afraid to show off your awards and recognition here. You want people to know you’re good at what you do.

Chikezie Ejiasi shows us a photo of himself and even lets us know how to pronounce his name.

6. Contact

This is one of the most important elements of a portfolio website but is often hidden or even neglected. A potential client has browsed your website, is impressed with your portfolio and can see who you are. Now they want to hire you.

Your contact information should be obvious and easy to access; don’t hide it in the footer. Let people know they can contact you for a quote or a chat. Use a form to make it easier for users to contact you (so that they don’t have to take down your email address and then open up their email manager). A form also allows you to ask for specific information, such as name, email address, website URL, details of inquiry.

Stuart Johnston offers clear contact details throughout his website but also provides an easy-to-use contact form.

7. Blog

A blog is always a good idea. Blog about your area of expertise; show you know what you’re talking about. It will help promote you and prevent your website from lying static.

Let people follow you by subscribing to an RSS feed, and show off your most popular blog posts to new readers.

Be sure to enable comments for feedback. Don’t make users register to add a comment to your blog, and don’t use anti-spam Captcha software, which only turns people off from commenting. There are plenty of anti-spam plug-ins available that don’t require users to do extra work.

Chris Wallace uses his blog about Web design-related topics to help out other people in the industry and to engage in discussion.

8. Call to action

Ask yourself what you want to get out of your personal portfolio website. Do you want to be hired? Attract more blog readers? Maybe you just want people to know who you are.

Each page should have a call to action, a “Next step.” The best way to accomplish this is with a “call to action” button that is clear and stands out from the rest of the page. Link it to your blog, portfolio or contact page, and use appropriate language (e.g. “Hire me,” “Request a quote,” “View my portfolio”).

Matthew Brown’s call to action is a contrasting button that stands out from the rest of the website.

9. Use social networking websites

Now that people have an interest in you and your work, encourage them to follow you on other websites. Make it clear that they can follow you on Twitter, Facebook, Flickr, LinkedIn, etc. Make the most of social networks and have a group of friends to call on if needed.

Sam Brown offers clear links to other websites he uses, allowing us to stalk him.

10. Language and communication

How you conduct yourself is important. Remember, it’s a personal portfolio website, so be personal. You don’t need to sound like a corporate brand with no emotion. Be friendly and personal, but also clear and precise; don’t ramble. Once you write all the text for your website, read it again and see if you can cut it in half.

Marius Roosendaal uses a relaxed and friendly tone on his website.

Other tips:

• Let people know where you’re from. This is always interesting to know, and some clients prefer to work with people nearby or in the same time zone.
• Validation is important, especially for Web designers. If you’re going to be building professional websites for clients, then your own website’s code should at least be valid.
• Link images, not just text. Most people will click on images, expecting them to point somewhere.
• If you don’t have any previous clients for your portfolio, create a WordPress theme, design an icon set, develop a Twitter mashup, etc. You have a lot of possibilities, and there’s a big difference between having one project to show in your portfolio and having none.

40+ beautiful personal portfolio websites

Robbie Manson

F. Claire Scroggins

Timothy van Sas

Ole Martin Kristiansen

Maru Velázquez

Chikezie Ejiasi

Miki Mottes (Flash)

Jakub Krcmar

Mopa

Chris J. Lee

Pedro Lamin

Cartonblanc (Flash)

Leigh Taylor

Alex Coleman

Sarah Longnecker

Toby Powell

Jay Hafling

Elliot Jay Stocks

Tony Geer

Marius Roosendaal

Ryan O’Rourke

<img /> is everything (Phil Thompson)

Leigh Taylor

Design Me (Marek Levak)

Matt Dempsey

Brad Candullo

Andre Augusto

Rob Hawkes

Magnus Jepson

Corking Design (Daniel Cork)

Evan Eckard

Alexandru Cohaniuc

Miles Dowsett

Andrew Bradshaw

Shannon Moeller

Vitor Louranco

Mark Dearman

Wong Yeng Kit

Chris Wallace

Spoon Graphics (Chris Spooner)

Fabiano Meneghetti

Mark Wallis

Chris Morris

Paiko (Heiko Brömmelstrote)

Conan Robbins

Henry Jones

Winnie Lim

Greg One (Gregoire Hoin)

Mark Hadley

David Appleyard

Design Moves Me (Roy Vergara)

Brian Murchison

Mike Precious

Digital Deceptions (Duncan)

Chirag Solanki

Jason Reed

Johnston North (Stuart Johnston)

Penflare Designs (Sean Farrell)

Nine Lion (Chikezie Ejiasi)

Brian Wilkins

Jason Santa Maria

David Hellmann

Guillaume Pacheco

Dave Lam

Luke Stevens

James Lai

Alessandro Cavallo

CSS Jockey (Mohit)

Kerry Nehil

Darren Hoyt

Matthew Brown

Digital Mash (Rob Morris)

The Things We Make (Mike Kus)

Ed Merritt

What do you expect to see on a good personal portfolio website?

Anything important we’ve missed? What would make the difference between your deciding to hire someone and deciding against it?

Further reading:

• 10 characteristics of excellent portfolio websites
• 50 excellent designer portfolio websites
• Creating a successful online portfolio
• 50 beautiful and creative portfolio websites
• Call to action buttons

About the author

Lee Munroe is a freelance web designer from Belfast. You can see his other writings on web design on his blog, or follow him on Twitter.

(al)

© Lee Munroe for Smashing Magazine, 2009. |
Permalink |
174 comments |
Add to del.icio.us | Digg this | Stumble on StumbleUpon! | Submit to Reddit | Submit to Facebook | Who is linking? | Forum Smashing Magazine

Post tags: design, Design Showcase, portfolios

Below, we present 50 extremely useful CSS tools, generators, templates and resources. We did not include “traditional” CSS tools, such as Firebug or the Web Developer extension, but tried to focus on rather unknown tools that are definitely worth a look. Some tools are new and some are old, but hopefully everybody will find a couple of new useful or at least inspiring tools.

We strongly encourage you to develop these tools further, build on the ideas presented here, release new tools for the public and let us know about them. We would love to feature your handy tool in our next review.

Please take a look at the following related posts:

• Powerful CSS-Techniques For Effective Coding
• 53 CSS Techniques You Couldn’t Live Without
• CSS: Techniques, Tutorials, Layouts
• 75 (Really) Useful JavaScript Techniques

CSS and Typography

• Hyphenator
  Hyphenator.js brings client-side hyphenation of HTML documents to every browser by inserting soft hyphens using hyphenation patterns and Frank M. Liang’s hyphenation algorithm commonly known from LaTeX and OpenOffice. The goal is to provide hyphenation in all browsers that support JavaScript and the soft hyphen for at least English, German and French. Here is the server-side script that does the hyphenation.
• CSS Type Set
  CSS Type Set is a hands-on typography tool that allows designers and developers to interactively test and learn how to style their Web content.

  

• Typechart
  Typechart lets you flip through, preview and compare Web typography while retrieving the CSS.

  

• CSS-Typoset Matrix and code generator
  A matrix table that presents font sizes and (symmetrical and asymmetrical) margins for various base font sizes — in pixel and em units. It also generates the source code on the fly. Created by Jan Quickels.
• Em Calculator
  Em Calculator is a small JavaScript tool that helps you make scalable and accessible CSS design. It converts sizes in pixels to relative em units, which are based on a given text size.

  

• Facelift Image Replacement (FLIR)
  Facelift Image Replacement (or FLIR, pronounced “fleer”) is an image replacement script that dynamically generates image representations of text on your Web page in fonts that might otherwise not be visible to your visitors. Written by Cory Mawhorter. How To Use Any Font With FLIR: Tutorial.
• Vertical rhythm calculator
  This tool converts pixel values to em values depending on the font size of the text. You can also set margins and paddings automatically, depending on the line height you’ve defined. Very useful.

  

• typeface.js
  Instead of just creating images or using Flash to show your website’s graphic text in the font you want, you can use typeface.js and write in plain HTML and CSS, just as if your visitors had the font installed locally.

CSS Online Tools

• PSD2CSS Online
  A free online service that generates Web pages from Photoshop designs. By following the guidelines and naming conventions, you can precisely choose how the transformation from PSD to (X)HTML and CSS is done.
• Conditional-CSS
  Conditional-CSS allows you to write maintainable CSS with conditional logic to target specific CSS statements for both individual browsers and groups of browsers.

  

• MoreCSS
  MoreCSS is a design-oriented JavaScript library that allows you to write code for applying automatic hyphenation and creating pop-ups, tool tips, tab menus, zebra tables, advanced list styling and cross-browser opacity style. But the really special thing is that you can do these things as you would with regular CSS.
• px to em
  This tool is what its developers call “px to em conversion made simple”. Type a base font size in pixels, and the tool will produce a complete pixel to em conversion table, making elastic Web design much easier to produce.
• CSS Frame Generator
  This tool returns corresponding CSS in a line-by-line way indented with spaces to reflect XHTML structure – each selector and all of its properties and values in one line. This may be a bit strange for you at the beginning, but if you get used to it you’ll find it much better.

  

• CSS Redundancy Checker
  You can use this tool to find CSS selectors that aren’t used by any of your HTML files and that may be redundant.
• CleverCSS
  CleverCSS is a small markup language for CSS, and inspired by Python, that can be used to build a style sheet in a clean and structured way. In many ways, it’s cleaner and more powerful than CSS2. You can also work with variables.
• WordOff
  WordOff applies some rules to strip the cruft that is pasted into WYSIWYG editors from Word. For example, attributes are removed for all elements except <a>, <span> and <div>, empty elements are removed and consecutive line breaks are reduced to two. It also contains an API.

  

• Postable
  “I absolutely hate having to switch all the ‘< ‘ and ‘>’ signs in my code to ‘<’ and ‘>,’ respectively. I also hate having to write “&” any time I want to include an ampersand. It makes including code snippets on my blog and whatnot extremely annoying, and today I finally got fed up.” This handy tool is a little app that will do all that for you. Created by Elliot Swan.

  

• Kotatsu
  Kotatsu is a simple HTML table generator. The tool lets you attach classes to cells in the same column easily.

  

• htmldevelopertools
  This tool allows you to update your CSS files on the server in a browser window. Currently works only under IIS + .NET 3.5. An interesting idea. Could someone create a similar script for Apache? Let us know, and we’ll support your both financially and with the broad coverage of our magazine.

  

• Deploy
  Deploy is a free open-source Web application that allows you to choose the name of a project, the Doctype, whether you want a CSS reset or jQuery integration, and it creates a zipped, ready-to-use package with all specified files and folders. The tool has been optimized for Fluid, the Mac application that creates SSBs (site-specific browsers) for websites.

  

• CSS Evolve
  CSSEvolve lets you play with many properties of a website, including the website’s color scheme, fonts, borders and more. CSSEvolve works through a process of simulated evolution in which you select website features that you like and refine them through multiple generations.”It uses a traditional blind watchmaker, user-driven genetic algorithm to drive CSS changes on a website of the user’s choosing. Basically, a set of mutated CSS variants are produced, the user selects changes that he or she likes, the algorithm randomly combines those changes through crossover and mutation and the process continues.” [ via ]
• Lorem 2
  This tool provides you with an “all around better Lorem experience.” It contains short paragraphs, long paragraphs, short list items and long list items to use in your wireframes.
• SelectORacle
  A small script that explains CSS selectors in plain English or Spanish. Particularly useful for CSS3 selectors.
• JS Bin
  A Web app specifically designed to help JavaScript and CSS folk test snippets of code in a particular context and debug the code collaboratively. It allows you to edit and test JavaScript and HTML (reloading the URL also maintains the state of your code: new tabs don’t). Once you’re happy, you can save and send the URL to a peer for review or help. They can then make further changes, saving anew if required. Alternative: CodePaste or EtherPad.

  

• CSS Text Wrapper
  The CSS Text Wrapper allows you to easily make HTML text wrap in shapes other than just a rectangle. You can make text wrap around curves, zig-zags, or whatever you want.

  

• Writing Tests Against CSS
  CSS is hard to test automatically. Do font sizes meet expectations? Does the layout width correspond to the initial mockup? This tool helps you spot changes in unexpected areas of a website’s layout and design. It can also extract rendered DOM values, such as text size, from a given Web page and compare them against expected values. This could be useful for both regression testing and assertion-based, test-driven development. Written in Python by Gareth Rushgrove.
• CSS Sprite Generator
  With this tool, you can upload all of your images (you have to place them in a .zip file first) and it will combine the uploaded images into a single sprite and generate the CSS for you.
• Sky CSS Tool
  An online CSS authoring tool, Sky CSS allows you to create CSS classes almost without using handwritten code. A JavaScript-compatible browser is needed for proper functioning.
• CSS Tidy Online
  An online version of CSS Tidy, a tool that allows you to keep your code clean by compressing the code.
• Web-Based Tools for Optimizing, Formatting and Checking CSS
  A huge compilation of some of the best free Web-based CSS optimizers/compressors, code formatters and validation services. By Jacob Gube.
• Grid Designer 2.4
  This tool enables you to create a grid by specifying the number of columns and the widths of the columns, gutters and margins. You can also specify typography in the same tool and export the final CSS and (X)HTML markup. You can also bookmark your grid and typography settings and create designs with spanning columns. Created by Rasmus Schultz.

  

• Yahoo’s Secret Text-Sprite Generator
  Basically this is a URL you can hit that creates a perfect sprite-ready PNG graphic of text you add to the URL.
• Replace CSS Colors – Editor
  This tool enables you to change the entire color scheme of your website without going through the CSS code. You choose your local CSS file, replace colors and then download the new CSS file.
• The Box Office
  The Box Office lets you wrap, float or contour text around free-form images using CSS for (X)HTML pages.
• MinifyMe
  A small AIR application that can compress multiple CSS and JavaScript files into one and runs on your desktop.

  

• cssdoc
  CSSDOC is a convention for commenting in CSS to help individuals and teams to improve writing, coding, styling and managing CSS files. It is an adoption of the well known JavaDoc/DocBlock-based way of commenting in source code by putting style, DocBlocks and tags together.
• CSS Menu Generator
  This tool generates vertical, horizontal and drop-down menus online. Various color schemes are available, and you can also customize the menus online.
• sheetUp – DOM Stylesheet Library
  Simplify the tedious task of manipulating style sheets contained in document.styleSheets. You can use the sheetup bookmarklet to integrate a built-in CSS/HTML-editor in your browser.
• CSS SuperScrub
  This tool claims to significantly reduce the size and complexity of your CSS by programmatically stripping unneeded content, stripping redundant calls and intelligently grouping the remaining element names.
• DrawAble Markup Language
  Drawter Beta 2 gives you the possibility of literally drawing your website’s code. It runs on every single Web browser, which makes it really useful and helpful. Each tag is presented as a layer you have drawn.

  

Handy Kits For Designing With CSS

• Regex Patterns for Single Line CSS
  If you are formatting your CSS style sheets single-line, you may find Dan Rubin’s Textmate macro useful and helpful. “This macro retains a single blank line where your original contained two or more blank lines (helpful if you group your rules) and adds white space that matches my standard formatting preferences (which I find makes it easier to scan quickly).” And if you don’t use Textmate, you can use a regular expression instead; it is also provided in the post.

  

• 21 Excellent Dreamweaver Extensions for CSS Productivity and Standards
  An extensive overview of various Dreamweaver extensions, such as CSS Sculptor, CSS Menu Writer, Link Fader, CSS Layouts, Format Table, Style Switcher, etc.
• Graph Paper
  This graph paper is made for visual designers, interactive designers and information architects. You’ll find styles for wireframing user interfaces, storyboarding interaction and plotting values on a two-by-two grid. Plus, you’ll get a basic grid for drafting sitemaps or anything else that might come up.
• Starter Kit For Developers (PSD)
  This starter kit is a free Photoshop template that includes forms, grids, ad placeholders, dummy copy and other design elements (13 MB).
• CSSHttpRequest
  CSSHttpRequest (CHR) is a method for cross-domain AJAX, using CSS for transport. Similar to JavaScript, this works because CSS is not subject to the same-origin policy that affects XMLHttpRequest. Like JSONP, CSSHttpRequest is limited to making GET requests. Unlike JSONP, untrusted third-party JavaScript cannot execute in the context of the calling page.

In-Browser CSS Tools

• Collection of Web Developer Tools, by Browser
  Sometimes it is not easy to keep track which tools are at a developer’s disposal (and which ones are actually useful). This article lists the best tools available and quickly describes how to activate, install and use them.

  

In-Browser CSS Tools: Firefox Extensions

• Dust-Me Selectors
  A Firefox extension (for v1.5 or later) that finds unused CSS selectors. It extracts all of the selectors from all of the style sheets on the page you’re viewing, then analyzes that page to see which of those selectors are not used. The data is then stored so that when testing subsequent pages, selectors can be crossed off the list as they’re encountered.
• Aardvark Firefox Extension
  With Aardvark, you can: clean up unwanted banners and surrounding “fluff,” especially prior to printing a page; see how a page is created, block by block; and view the source code of one or more elements.
• CSSViewer
  A CSS property viewer that displays all information about a design element.
• Dummy Lipsum
  This Firefox extension dynamically fills a selected field with Lorem ipsum text; the function is called via the context menu.
• Firefox: Test- und Entwicklungstools für Webentwickler | Dr. Web Magazin
• GridFox
  GridFox is a Firefox extension that overlays a grid on any website. If you can open it in Firefox, you can put a grid on top of it. It’s easy to customize and allows you to create the exact grid you based your layout on.

  

• 20 Firefox Add-Ons To Enhance Your Web-Development
  Yet another overview of useful Firefox add-ons that can help developers create websites more efficiently. Among them are Codetch, Pixel Perfect, Link Checker and ColorZilla.

Coding and Programming With CSS

• CSS Extra Coda Plug-in
  CSS Extra is a plug-in for Coda that gives you access to some dynamic CSS. Although it is not truly dynamic in that it will not force Coda to process the variables and settings, it gives you the commands to process the CSS instead. What this means is that you can have constants, bases and a layout module within your CSS.
• Edit in Place with JavaScript and CSS
  This tool offers you more intuitive editing (in-place editing) of your documents and style sheets. The idea: in a selected area, the user can enter the markup or change the current value directly.
• Simple CSS
  Simple CSS is a free CSS editor that runs on Mac, Windows and Linux. It allows you to create CSS from scratch and modify existing sheets, using a familiar point-and-click interface. Freeware.
• AWK
  AWK is a very powerful programming language that you can use on the command line for advanced text processing.
• cssutils
  A Python package for parsing and building CSS.



• RESTful CSS
  A new method for organizing CSS that better maps on to the way that popular Web application frameworks are built. The examples are based on Ruby on Rails, but the concepts should be easily transferrable to other MVC frameworks. By Steve Heffernan.

  

New CSS Frameworks

• CSS Drop-Down Menu Framework
  A cross-browser, modular framework that contains 14 customizable templates for designing drop-down-menus.
• BlueTripCSS Framework
  A full featured and beautiful CSS (Cascading Style Sheets) framework which combined the best of Blueprint, Tripoli (hence the name), Hartija’s print stylesheet, 960.gs’s simplicity, and Elements’ icons, and has now found a life of its own. The framework contains 24-column grid, sensible typography styles, clean form styles, a print styleshet, an empty starter stylesheet, sexy buttons and status message styles.
• Hartija – CSS Print Framework
  Hartija is a CSS print framework that attempts to unite the best CSS printing practices into one single CSS file.
• AM framework
  This framework contains six basic templates: for fixed, fluid, one-column, two-column and three-column layouts, as well as a jQuery template.
• Introducing SenCSS
  A clean, minimal CSS template for new projects.
• Typogridphy
  Typogridphy is a CSS framework constructed to allow Web designers and front-end developers to quickly code typograhically pleasing grid layouts.
• formy-css-framework
  A CSS Framework for better form management.
• emastic
  Emastic is a CSS Framework. Its continuing mission: “to explore a strange new world, to seek out new life and new Web spaces, to boldly go where no CSS framework has gone before.”

CSS Bookmarklets

• Design Bookmarklet
  Design is a suite of Web design and development tools that can be used on any Web page. Encompassing utilities for grid layout, measurement (rule) and alignment (unit, crosshair), Design is a powerful and useful JavaScript bookmarklet.
• ReCSS: Reload your CSS
  This little bookmarklet makes refreshing your CSS a breeze. It comes in quite handy when you’re developing dynamic applications. Tested in IE and Firefox.
• XRAY
  A bookmarklet for Internet Explorer 6+ and Webkit- and Mozilla-based browsers (including Safari, Firefox, Camino and Mozilla). You can use it to see the box model of any element on any Web page.
• MRI
  MRI is a bookmarklet for Internet Explorer 6+ and Webkit- and Mozilla-based browsers (including Safari, Firefox, Camino and Mozilla). You can use it to debug and test selectors.
• CSSFly
  A tool for editing websites easily, directly and in real-time in your browser.
• 15 Must-Have Bookmarklets For Web Designers And Developers
  An extensive list of 15 handy Web designer and developer bookmarklets. The whole pack can be downloaded and imported into Firefox.

Tools For Generating CSS Layouts

• Construct Your CSS
  A visual layout editor based on Blueprint and jQuery. A video tutorial is available as well. You can use the keyboard to create layouts on the fly. By Christian Montoya.
• XHTML/CSS Markup Generator
  Markup Generator is a simple tool created for XHTML and CSS coders who are tired of writing boring frame code as they just begin slicing work. Its main purpose is to speed up your work by generating (X)HTML markup and a CSS frame out of very intuitive, shortened syntax, so that you can jump directly to the styling of elements.

  

• Dynamic Layout Generator
  This tool generates cross-browser multi-column liquid designs and enables you to visually change the width and colors. You can drag the sliders to choose the width you want in your layout and preview the layout online. The CSS code is generated automatically.
• iStylr – Online CSS Template Generator
  An advanced WYSIWIG online CSS-editor with syntax highlighting, drag’n'drop-functionality, template import/export, image manager, stylsheet sharing option and a visual DOM tree. A registration is required (OpenID-login is supported).

  

Blank CSS Layouts

• The Only CSS Layout You Need
  A collection of basic cross-browser layouts.
• Faux-Column CSS Layouts
  There are a total of 42 faux-column CSS layouts for downloading. All markup has been validated against a strict Doctype.

  

• Fixed-Width CSS Layouts
  There are a total of 53 fixed-width CSS layouts for downloading. All markup has been validated against a strict Doctype.

  

• ___layouts
  The foundational ___layouts file offers five preset page widths, the option to have a fixed width or a text “zoom”-style scaling effect and two core templates that give you the ability to nest subdivided regions of one to four columns. The framework supports fluid-width layouts and fixed-width layouts.

CSS Layouts

• 100 Free High-Quality XHTML/CSS Templates
  In this post, we showcase 100 free high-quality templates. Hopefully, some of them will save you some time in your design and development. While they are generally free for personal or commercial use, always remember to check the license first for any restrictions or guidelines.
• 45 Excellent Free Web Templates

Would you like to see more similar posts?

Should SM publish more similar posts? (JavaScript, Ruby, PHP etc.)
( polls)

Related Posts

Please take a look at the following related posts:

• Powerful CSS-Techniques For Effective Coding
• 53 CSS Techniques You Couldn’t Live Without
• CSS: Techniques, Tutorials, Layouts
• 75 (Really) Useful JavaScript Techniques

(al)

[NeoProj] (only worked in safari for me)

Instead of splitting down the middle like the Platzhalter, the REK expands and collapses like an accordion to eliminate negative space on the shelf. As you book collection grows, the shelves can be pulled apart in a configuration of your choosing. To be honest, I love the design—but if you have ever tried to move even a small bookshelf you know that trying to alter something this large when it is laden with books would probably be more trouble that it is worth. [Dezeen]

Your website represents your brand. New visitors will form a first impression of your service or product within seconds of arriving at your website, and the visuals, layout and aesthetic will play a large role in shaping that impression. Sure, your website may be very usable and have great content, but it’s the aesthetic that will evoke feeling, and it’s the aesthetic that will be used to judge the quality of your website in those first few seconds before the visitor has had time to browse around.

Use this to your advantage and fashion a unique style that will set your website apart from the rest — a style that will impress and delight your users.

Throughout history, great artists always found new ways to express themselves and create new techniques to set their work apart from the rest. Think about the styles of Leonardo da Vinci, Vincent van Gogh, Pablo Picasso, Salvador Dali and Jackson Pollock. Think about the different movements of art, from Impressionism and Expressionism to Surrealism and Minimalism. These styles couldn’t be more different from each other — and that’s the point. The artists’ names live on because their art is unique.

Do you want to simply follow the latest design trends and create a website that works well but looks just like many other websites out there? Following trends won’t set you apart from the rest; it won’t help your work make a strong impression. To make something memorable, you’ll need an element of creativity and novelty.

Unlike certain other forms of art, such as painting and sculpture, Web design is very limited in its expression because more often than not your website has to serve a very specific function and achieve certain goals. Successful designs are influenced and driven by those goals. There is, however, still room to develop your own unique style and aesthetic. Doing so will help you stand out from the competition and allow you to develop a strong identity.

Web design isn’t art

Having said all that, Web design isn’t art. Art is self-expression that is meant to be enjoyed and appreciated on its own. Design is communication; and, more specifically, Web design is an interface for content. Sure, there are websites out there that are purely art, but the large majority of them perform a certain function or deliver information. The website acts as the interface between the user and that function or information. This means it not only has to look nice, it actually has to do its job well, too. Indeed, in most cases, function should come before form.

I believe I can say that websites today are much better than they were 10 years ago. What do I mean by “better”? I mean to say that Web designers have learned from their mistakes over the years and have picked all the low-hanging fruit of usability. Websites today are more usable and more user-friendly because we have greater experience in and increased knowledge of how to build websites that work and interfaces that are easy to figure out.

Yet, I cannot say that art today is “better” than it was ten or a hundred or a thousand years ago. Impressionism isn’t “better” than Realism. Expressionism isn’t “better” than Minimalism. They’re just different.

Web design as architecture

While Web design incorporates an aspect of art, it also incorporates function. In this way, I think it actually has a lot of similarities to architecture, for which you need a healthy dose of both style and function.

The world’s earliest treatise on architecture, “De architectura,” written by Vitruvius in around 25 BC, outlined three principles that all good construction should fulfill: firmitatis, utilittis and venustatis: durability, utility and beauty. I believe that today these three principles apply to Web design as well.

Your work should be durable in that it should scale well — or handle a lot of traffic — which is ensured by having code that is clean and optimized, as well as a means of making future modifications and updates with ease. It should fulfill the goals and function of the website, whether they be to advertise a product, sell goods, show off a portfolio or perhaps display articles from a blog. Finally, it should look good; it should have its own look and feel. We need to make the Web browsing experience enjoyable for our visitors by crafting a pleasing aesthetic.

Over centuries, architects and engineers have figured out better ways to construct buildings, to make them stronger and larger. These advances in function are similar to advances we’ve seen in Web design. We’ve figured out better ways to make registration forms, navigation menus that are easier to use, layouts that are simpler to figure out; generally speaking, we have greatly improved the usability of our websites. This is because we’ve had years to look at how people use the Web and to fix the usability problems that pop up most of the time. We see what works best and implement those things in new websites that we build.

Venustatis

But let’s not forget Vitruvius’ third principle of beauty. In architecture we see different waves of style. Different centuries bring different looks and feels to buildings. Houses are designed to be lived in, but life would be really dull if they all looked the same and focused only on function.

The design of the Opera House in Sydney is so distinct that it’s more than just a building — it’s an iconic city landmark.

In Web design we have very similar waves. Most notable is the Web 2.0 style, in which we had things like glossy buttons, mirrored floors, starbursts and so on; it even inspired various Web 2.0-style logo and website generators, because the style was so formulaic in nature.

New trends like this appear, and some get picked up and quickly adapted across the Web. Does your current website design follow a trend? Perhaps it is setting one? If you copy other trends, then your website will be just that, a copy, but if you can go the extra mile and create a unique look that differentiates your website, then your website will be memorable. Of course, being different isn’t the only thing you’ll need. The unique style and layout must also be attractive and must accomplish its goals.

Fresh inspiration

So how do you go about creating something different? Where do you find inspiration to create something unique? When Cordell Ratzlaff and his team were designing the new interface for the Mac OS X operating system, they found their ideas in the most unusual places.

Cordell saw a great opportunity to change to an appearance that was fresh and fun, in contrast to the existing state of the art. He decided to change from gloomy, square, and bevelled, to light, fun, and colorful, with a very fluid expression. He asked, What’s the opposite of a computer interface? He came up with things like candy, liquor, and liquids, to inspire a new visual design of the interface. The designers collected magazine ads for liquor, with delicious looking liquids in glasses with ice cubes, sparkling with reflections and highlights.

Bill Moggridge, Designing Interactions

When working on your new website or Web application interface, don’t simply look at what everybody else is doing. If you look inward to your own industry and similar websites, you will no doubt find a lot of likeness. This is because many of these websites borrow from each other, and when new websites launch, they borrow from them in turn. What we have is a monotonous experience in which you are only looking inward, blind to the world of possibilities outside.

Take a lesson from Cordell Ratzlaff and seek inspiration from new sources. Look at nature, look at real world objects, look at the things that symbolize and evoke the kinds of emotions and feelings you really want to elicit with your design and aesthetic. Cordell looked at things like ice cubes in liquor, which inspired him to create the liquid Aqua interface for Mac OS X. The glossy gel buttons and other user interface elements in Aqua have since inspired many Web designers in the rise of Web 2.0 and all of the glossy and shiny visuals it brought.

Let’s take a look at a few trendsetters, websites that break the mold and feature successful designs that get picked up and adapted by others.

Leaders and Followers

Twitter, the popular micro-blogging platform, has created a unique flat and colorful look that features illustrations of clouds and birds (and whales). The bright, cartoony feel is accompanied by an elegant and simple layout.

Yammer, a recently launched “Twitter for businesses” application, takes on a similar appearance and an almost identical layout. The cartoony feel is gone, but the shape and feel remain very similar, due to the iconic Twitter layout.

Facebook, the social networking heavyweight, has won its audience partly because of the uncluttered, minimalist design that puts the content right in the front seat. The clean layout is accompanied by a simple blue and gray color palette.

Social Median, a social news website, features the familiar minimalist look and feel of Facebook, together with a similar color palette and layout.

Highrise, a CRM application, features a very powerful landing page. On one page, visitors can see a description of the app, an overview of several features, a video tour as well as a bunch of links inviting them to explore. The typography and colors work to focus the visitor’s attention on the most important things.

Presently, another internal communication tool for businesses, features a landing page that is very close in its composition to that of Highrise, or indeed that of any other 37signals app. This powerful layout is now used by a lot of Web start-ups.

Apple’s website incorporates the same aesthetic as that of its product interfaces, and indeed its entire product line. Over the last few years, it has transitioned from the watery Aqua style to smooth aluminum gradients, light-gray shades and rounded corners.

Newspond, a news aggregator, features a different layout than that of Apple’s own website, but the aesthetic is strikingly similar. There are many other websites today that use very similar styles that are inspired by Apple’s industrial designs and interfaces.

Basecamp, one of the most popular Web project management applications, from 37signals, has pioneered this simple and effective layout that you can find in a lot of other Web apps today. Everything is clear and structured, with a minimal use of images to speed up downloading time.

Blinksale, an invoicing Web application, is one among many to borrow the popular design and structure of the 37signals website.

SimpleBits, Dan Cederholm’s design company, uses his signature minimalist layout and typography. Dan takes out everything that doesn’t absolutely need to be there, tweaks white space to pixel perfection and focuses on really polishing the little details. The result is beautiful minimalism.

The Twiek blog design looks like it’s heavily inspired by SimpleBits.

Conclusion

If you want to craft an iconic website that stands out from the competition, you need to come up with a unique and novel aesthetic. You need to design a look and feel that’s different — something that doesn’t look like all of the other websites in your industry. Getting inspired by great work and beautiful things is a good thing, but you have to make sure you don’t fall into the trap of mimicking other designs too closely, or else your website could end up looking like a cheap copy.

Seek inspiration from outside your industry. Focus on the emotions you want to evoke and the character you want to give your website, rather than on what everybody else is doing. Design a layout unique to your website or application by focusing on its goals and objectives rather than on what other people have done.

While Web design isn’t art, and while there are limits to how much you can express yourself and how many visuals you can use, there is still plenty of room for a unique style. Just as Vincent van Gogh’s post-Impressionism style and Pablo Picasso’s unique art set them apart from the rest, breaking the mold will give your website a powerful and memorable identity that others will want to mimic.

Don’t follow trends: set them.

About the author

Dmitry Fadeyev is the founder of the Usability Post blog, where you can read his thoughts on good design and usability. (al)

Minimalism, in the context of design, refers to simple, unadorned designs that embody only the most basic and fundamental needs. In art, it is a movement that has its roots in the post-World War II era, started by highly regarded minimalist artists such as Donald Judd, Carl Andre, and Robert Morris. Minimalism today refers to a certain style (or even a certain attitude or way of life) that transcends different fields, such as architecture, philosophy, law and, of course, Web design.

In this article, we explore the meaning of minimalism in the context of Web design. First, we’ll look at some features of a minimalist Web design in the hope of learning by way of deconstruction. Then, we’ll see a showcase of minimalist designs. Finally, you’ll find some useful resources on the topic of minimalism in Web design.

Showcase of clean and minimalist designs

Though there are different ways to achieve a minimalist Web design, and designers have varying definitions and interpretations of what minimalist Web design truly is, there are certainly some commonalities among what we can consider minimalist designs.

In the review below we’ll consider some common features and attribues of a minimalist Web design. However, let’s first take a look at some truly outstanding examples of excellent minimalist and clean web design.

Jan Reichle

HUGE

Markenpersonal.de

Rodrigo Galindez

BrynnShepherd.com

SpiekermannPartners

MaximNew

Muller

FLOWmarket

Rbg6.se

80/20

Minus.dk

Cubic

Vitor Lourenco

Deep.co.uk

fellswoop

3rings

AIGA New York

Kalle Gustafsson

Clagnut

BetterInteractive.com

Concentric-Studio.com

Clandrei.de

Ab-c.com.au

Forgetfoo

MAYØ

Berit Sømme

Poccuo

SMeltery

kraaft

Hermes.com

Sitening

bora aksu

hillmancurtis

BuuHouse Interactive

Theme

Marek Levák

Mark Wieman

Rogier Bikker

Razvan Stavila

Lovecreative.com

1. Design is focused on the content

In minimalist designs the focus lies not on the visual presentation, but on the content — the information presented in a “naked”, clean and intuitive way. The property of being minimal refers to the structure of the layout; but it is the main task of every simple design to keep its functionality and communicate the information it is supposed to present.

The content is the focal point of the Web page, whether that content is a showcase of photography, Web designs, or writing. The design provides little to no distraction.

Autumn Whitehurst Illustration
In this Web design, the use of a plain white background and de-emphasized text makes your eyes gravitate towards the artwork.

Frieze Magazine
When viewing this design, note where your eyes look first. Probably, you would have looked at either the large image or the “frieze” logo first.

2. Whitespace is the king…

To make it easy for readers to scan and read the content, minimal designs usually need a lot of whitespace to breathe. In some cases whitespace dominates in the design, taking 60-70% of the whole layout space. In such designs whitespace, while remaining passive, strongly bundles user’s attention on very few site elements and thus effectively influences users’ perception of the overall design.

Rule of thumbs: the fewer elements you have and the more whitespace you have, the more attention will each element in your design get.

Cameron.io uses whitespace as the primary element. Notice how little space is used by content and how strongly your attention is focused on the navigation menu and the blog posts. Please also notice that very calm, neutral and subtle colors are used.

3. Typography is the queen

Typography is used to convey messages to the user. Larger, bold text draws the user’s attention to the intended area. Careful use of color, size and style of text is used in the design phase to underscore important elements and make others less prominent.

i love typography
Notice how the large bold, centered logo on the page manages to grab your attention.

Astheria
This design directs the user’s focus straight to the “featured” content (in this case, the most recent article of the author). Notice how your focus bypasses the logo, even though it appears before the “featured” content; completely the opposite of i love typography’s design, which directs you to the logo/website name.

Corporate Risk Watch

4. Color palette consists of solid colors

The in-your-face, flashy, loud color schemes associated with Web 2.0 and vintage/retro design trends are avoided. Usually, designers pick one vibrant color and use it effectively to communicate the most important information presented on the site. Such elements are usually clickable; the number of these elements rarely exceeds 5-7.

Behance

Alltop

5. Plain, solid white/gray or solid dark backgrounds are common

Solid backgrounds are effective especially when the content is vibrant and colorful (such as in design showcases). Plain colors doesn’t fight for users attention; instead, they support the readers and make it easy to actually scan the page when looking for the content. “Minimal” designg almost never have vibrant background images — patterns, textures and vivid colors are used very rarely.

kind company
The thumbnail project images really stand out from the solid white background.

The Consultâ„¢
The same concept applies to dark backgrounds.

6. A minimal number of colors

Many minimalist Web designs use only one to three colors, and page elements outside the content are often monochromatic. This again reduces distraction from the Web page content.

Rikcat Industries
This design showcases a monochromatic color palette in the foreground.

Cameron Moll
In this design, page elements such as the logo, navigation bar and sidebar use different hues of gray.

7. Text-based logos instead of illustrative, iconic logos

Again, to uphold the concept of minimalism whereby you strip down the design to the bare, unadorned minimum, the logos of minimalist websites are plain and simple.

The Idiot Behind the Iron Mask

8. Clean right angles and lines in use

Very often clean right angles and lines are used instead of rounded and uneven edges. Rounded graphic elements, the main clichée of Web 2.0, and the uneven edges seen in grunge style are avoided in minimalist Web designs.

Monty Lounge

Builtbybuffalo.com

Antonio Carusone

SIGMA6

9. Minimal ? white, gray and black colors

White/black (or dark gray) is the typical color scheme of minimalist Web designs, but others use different colors to achieve the same goals.

Soulellis Studio

Emigre

10. Use of vibrant, colorful images

The use of colorful, bold images can enrich the visual impact of the design by providing a stark contrast to the muted, solid colors of the minimalist design elements.

Coptix

11. Use of grid-based designs

Many minimalist designs use a grid-based layout to reflect the structured, right-angled, rigid nature of minimalism.

Jamie Gregory

Resources

• New Minimalist in Web Design
  A discussion of the “new minimalist” trend in Web design.
• Minimalist in Fashion Web Design
  A discussion of minimalist Web designs in the fashion industry and possible reasons for choosing this style of design.
• Design 2.0: Minimalism, Transparency, and You
  Learn the reasoning behind a design company’s choice of minimalism for its designs.
• The Anatomy of a Minimalistic Web Design
  Steven Snell breaks down the different parts of a minimalist Web design.
• Is Minimalistic Design More Effective?
  A showcase of minimalist designs by Adelle L. Charles.
• Administrative Debris
  Ryan Tomayko talks about his journey into a minimalist design.
• Minimal Sites
  A showcase of minimalistic web designs.

About the Author

Jacob Gube is a Web developer/designer and author of Six Revisions, a blog on Web development and design. If you want to connect with the author, you can follow him on Twitter. (al)

News websites can be intriguing to examine from a design perspective. Regardless of what type of news they cover, they all face the challenge of displaying a huge amount of content on the home page, which creates plenty of layout, usability and navigational challenges for the designer. The lessons that can be learned from examining how news websites address these challenges can be valuable for designers who work with other types of websites, including ones with blog theme designs.

Monetization is also a major factor for news websites, and it’s interesting to see how they integrate advertisements in the design. In some cases, the ads are somewhat intrusive or excessive, but most news websites are able to use ads without turning readers away, in part because of the content that’s available.

For the purposes of this article, the term “newspaper website” refers to any news-related website that has the editorial focus of an online periodical. Many of the websites mentioned here are the online versions of major newspapers, but others are standard news websites and some blur the line between news website and blog.

You may want to take a look at the following related posts:

• Award-Winning Newspaper Designs
  This post is supposed to provide you with some examples of outstanding newspaper designs which have been rewarded with prestigious awards (see references at the bottom of this post), and demonstrate unusual approaches of newspaper design.

Common Trends of Newspaper Websites

1. Color Schemes

Most news websites use dark text on a white background. Obviously, these websites contain a huge volume of content, and readability is important. A few of the websites mentioned later in this article use darker colors for headers or for the body of the page outside the content.

A large percentage of news websites also use blue and red in addition to a dark gray or black for text. Blue is extremely common for headlines, article titles and links. Red is often used sparingly as an accent color. Some news websites also mix in more colors in other places, such as in the navigation.

The L.A. Times website demonstrates a common color scheme:

2. Header and Sidebar Banners

Of course, all of these websites need to produce revenue, and banner ads in headers are a key source of income. Some websites use banner ads on all pages, and others exclude banners on the home page but display them above the header on other pages.

While blogs commonly use 125 by 125 pixel banners in sidebars, news websites commonly use 300 by 250 banners or tall skyscrapers. Many of the websites mix in some AdSense or other text link ads.

The Telegraph uses a 730 by 90 pixel banner over its header.

3. Top Navigation

Although there are a few notable exceptions to this trend, most news websites put their primary navigation menu just below the header and above the content. The New York Times and MSNBC are two of the exceptions, as they both use the left sidebar for the main navigation.

The Times Online uses a two-level navigation menu.

4. Tabbed Content Areas

Many news websites use tabbed content areas that allow visitors to see popular articles, recent articles, most commented articles, etc. This is sometimes used in the sidebar, and other times in the main content area, such as on Wired. This allows for more control by users over what content and links they see, and it can save space in the design by making more content accessible in a specific area.

5. Grid-Based Layouts

Newspaper websites are commonly built with grid-based designs. The grid is a popular choice not only because of the sharp look it creates but because it’s one of the most effective ways to manage and organize a large amount of content. The New York Times has one of the more well-known grid-based layouts.

Notable Differences Between News Websites and Blogs

The line between a news website and a blog is a fine one, and the two types are difficult to distinguish sometimes. For the purpose of this article, “blog” refers more to a traditional blog than to a commercialized news blog by a team of writers. While there are certainly similarities between blogs and news websites, there are also some key differences.

Social Media Integration

Seeing widgets or voting buttons on blogs is extremely common; in fact, most blogs use them in one form or another. Most news websites, however, use them more subtly, if at all. It’s common to see a “Share” section on articles, such as the one shown below from ABC News, but voting buttons are not used in quite the same way as on blogs, where a standard “Digg This” button may appear at the top of every post. A growing number of news websites recognize the impact of social media, but they are still using such tools subtly in their designs.

A few websites shown in more detail below do make more use of social media than others. The Huffington Post has a section specifically to display stories that are new on Digg, and the website certainly makes plenty of front page appearances.

RSS Feeds

Subscriptions and RSS feeds are a huge part of blogging, and most blogs use large icons or FeedBurner counts to make it easy for visitors to subscribe. Most news websites, however, don’t push RSS feeds on readers like a blog would. Most news websites do offer feeds, often according to category of content, but they’re not a major part of the design or layout. In fact, most visitors probably don’t even notice the small icons or links to feeds. As RSS feeds become a part of the daily lives of average readers, this will probably change.

The Guardian promotes a link to its feed in the website’s header, but with much less attention drawn to it than most blog themes.

Comments

Reader comments and discussion are a critical element for most blogs, but they’re not as important to news websites. Many news websites allow readers to leave comments, but they’re usually an afterthought in the design and are rarely promoted the same way as they would be on a blog. For example, many blogs show excerpts of posts on the front page, and almost all will also show a comment count with the excerpt that links to the comment section. This is used on a few news websites, but it’s rare.

ABC News is one of the rare news websites that shows a comment count by the post excerpt on the home page.

A Look at 20 Leading Newspaper Websites

The Onion
Satirical news website The Onion features a grid-based design (it’s been called the funniest grid you ever saw) that makes excellent use of the screen space that’s available. There is a lot going on on the website, which can be both good and bad. The main navigation separates the content into video, radio, sports, election, etc.

The header includes an ad on each side, and the sidebar has some advertising as well, but nothing too intrusive. Some parts of the home page are used essentially as advertisements for features that are part of The Onion, such as The Onion Personals and The Onion Store.

New York Times
The website of the New York Times is another well-known grid. The majority of the website’s navigation is down the left side of the page, which is not as common as top navigation. The website does use a tabbed navigation bar at the top with links to such features as “Today’s paper,” “Video,” and “Most popular,” but all of the content category links, such as World, U.S., Politics, Business, etc., are down the side.

The website’s design includes a nice use of blue and black headers and links, with a touch of red added in a few places, such as the time of an article’s publication. Overall, the New York Times presents one of the better newspaper websites.

Chicago Tribune
Unlike many of the other websites featured here, the Chicago Tribune uses only one small banner in the header of its home page, although individual article pages use a 730 by 90 banner. Aside from the header, the rest of the home page is fairly ad-heavy, including text link ads.

The content on the Chicago Tribune website is spaced out a bit more than, for example, the New York Times’. Again, blue is used for headers and links, with a touch of red.

Washington Post
The Washington Post also uses the common colors of blue, black (or dark gray) and red on a white background. The header includes a small 290 by 45 banner, and the top of the sidebar includes a 300 by 250 banner. The rest of the home page contains only a few other small banner ads.

The layout of content on the home page is focused on providing categorized links to specific content. An image is included for the lead story, but other headlines above the fold do not have thumbnails. At the top right, there is a section for the most-viewed articles.

Los Angeles Times
The L.A. Times website takes a different approach with its header than some other news websites. There is relatively little going on there, with plenty of unused space that could be filled with ads, something that most other news sites are doing. The rest of the home page uses only two 300 by 250 banners and a few text link ads. Individual article pages use a 730 by 90 banner above the header.

The content of the L.A. Times home page is contained in a grid-based layout, with primary navigation on the left. Again, blue, black and red are the colors of choice for text, links and headlines.

Tennessean
The Tennessean isn’t one of the largest newspapers in the U.S., but its website is worth noting. The Tennessean breaks some of the norms of the other websites that have been examined so far, primarily in terms of color. A dark orange is used for headlines and links, instead of a more common choice, such as blue. Additionally, a green background color is used on the sidebar.

There is a 300 by 250 banner in the sidebar and a skyscraper in the left sidebar, with more ads at the very bottom of the page. Individual article pages include a 730 by 90 banner above the header.

Houston Chronicle
The Houston Chronicle packs a large number of headlines onto the home page, including in the top center of the layout. This means there are more links to content above the fold, but each of them stands out less than it would on a news website that uses more thumbnails.

The website has no ads in the header of the home page, but has a few banners in the right sidebar and some text link ads at the bottom of the page. Article pages have a 730 by 90 banner above the header.

USA Today
The USA Today uses more color than many other news websites, particularly in the navigation menu and with links throughout the website. Category links for feature articles, such as sports, markets, education and people, all use different colors, which help them stand out.

Unlike most news websites, the USA Today shows the number of comments on articles right by the headlines on the home page. Only a few smaller banners are located on the home page, aside from a 730 by 90 banner at the very bottom of the page. Individual article pages are much more ad-filled, and at times while navigating through the website you may encounter a full-page ad that you have to skip to get to the content.

Mail Online
British news website Mail Online uses a more colorful design than many other news websites. The headlines and links are a lighter blue than those on the New York Times or Chicago Tribune websites, and they turn red on hover. The right sidebar includes tons of thumbnails from recent posts and colorful headers and roll-overs.

The website includes AdSense ads in the header and various ads throughout the rest of the layout, including some in the middle column. The grid layout keeps the content organized and makes use of virtually the whole page, which is incredibly long.

Telegraph
Another leading UK news website, the Telegraph, uses a nice, clean grid-based layout. Above the header is a 730 by 90 banner, and the only other advertising on the home page is a 300 by 250 banner and a skyscraper, both in the right sidebar.

The home page design makes extensive use of thumbnails to go along with article headlines and brief descriptions. Blue and red are used for headlines and links. The main navigation is located at the top of the page.

Guardian
The Guardian uses a clean but colorful design. The main navigation at the top of the page consists of various colored links to different sections of news. The home page uses little advertising, but individual article pages include a 730 by 90 banner above the header of the page, and 300 by 250 ad at the top of the sidebar.

Headers on the Guardian website are a common blue, but colorful borders are used to add some visual appeal. Thumbnails are used in several spots on the home page, but most stories have only a headline and brief description or just a headline.

Times Online
The Times Online is one of the few news websites to use a bright color in its logo/branding area, but it does accomplish the goal of distinguishing the website. Above the header is a 730 by 90 banner.

The home page uses a two-level navigation menu above the content and a fairly typical blue color for headlines. Several article excerpts on the home page include thumbnails, but there are no large images for featured articles as there are on many news websites.

MSNBC
MSNBC stands out among other news websites due to its dark yet colorful header, a look that’s been imitated by many Photoshop users. The header includes no advertisements, and in fact there is only one ad visible above the fold. Text link ads are used in a few places throughout the home page. Individual article pages do include a 730 by 90 banner above the header at the very top of the page.

Overall MSNBC is a very well-designed website, with an attractive color scheme and a layout that’s well-structured but not overly cluttered. Like the New York Times, MSNBC uses the left sidebar for its primary navigation.

ABC News
ABC News features a dark header that helps distinguish the website from other news leaders. There is relatively little advertising on the home page. The right sidebar contains a 300 by 250 banner and the only other ads are at the very bottom of the page.

At the top right of the page there are three current videos, plus a link to more video content. While other news websites include video, most don’t place videos as high on the page as ABC News does.

Ars Technica
Tech news website Ars Technica has a vastly different design than mainstream general news websites, which should be expected. Unlike the image-heavy general news websites, Ars Technica does not use thumbnails on its home page. Additionally, the article pages have very few images in comparison to general news websites.

The website uses tabbed navigation at the top of the page to take visitors to different categories of news, such as Business, IT, Apple, Hardware, etc. The header includes a 730 by 90 banner, and the top of the right sidebar includes a 300 by 250 banner ad. Further down the sidebar is a skyscraper banner.

CNET News
Tech news website CNET News uses a fairly basic design with a dark header, a featured content area, and a long list of headlines with brief excerpts. Blue and red are used for headlines and links.

The header includes a small text link ad on the right side of the screen and a few 300 by 250 ads in the sidebar. No additional ads are used on individual articles.

TechRadar
UK technology news website TechRadar includes a few items that currently aren’t very common on other news websites. Just above the content of the page, there is a “TechRadar Update” section that scrolls through links to the most recent content. Additionally, there is a featured content area that rotates through the six leading stories. Below the featured content area is a grid of the latest news headlines with brief excerpts.

The website header includes a 730 x 90 banner, and the sidebar contains some other banners and text link ads. The navigation on TechRadar is a bit different as it uses tabs for news, reviews, blogs, and forums.

Wired
The design for Wired is rather unique. Most notably, thumbnails, headlines and excerpts of featured content reside above the main navigation menu. Thumbnails are used below for the most recent article in each of seven different categories.

The header includes no banners, just an internal advertisement for WiredBiz. The sidebar contains a few ads as well as additional monetization through a job board widget that links to recent job postings on the website’s job board.

The Huffington Post
The layout and design of individual pages on The Huffington Post is quite different than that of the home page. On individual pages you see a small logo/branding area at the top left, with a very long banner on the right that takes up most of the width of the page. Advertisements throughout the rest of the page are fairly minimal.

On the home page, most of the area above the fold is used for a headline and image from a featured article. The rest of the home page includes a lot of images and headlines, as well as post excerpts from a variety of writers in the left sidebar.

Sporting News
The Sporting News has one of the most outdated designs. The header is used primarily for displaying scores, but with less space efficiency than other major sports websites. Above the header is a 730 by 90 banner.

Much of the real estate of the sidebar is used for directing visitors to other sections of the website, such as Sporting News Radio, the Blog Network and community blogs.

Related posts

You may want to take a look at the following related posts:

• Award-Winning Newspaper Designs
  This post is supposed to provide you with some examples of outstanding newspaper designs which have been rewarded with prestigious awards (see references at the bottom of this post), and demonstrate unusual approaches of newspaper design.

About the Author:

Steven Snell is a Web designer and freelance blogger who can be found on his own blogs: Vandelay Website Design and DesignM.ag. (al)

The following list bucks tradition by not being tied to one particular theme; although, as you’ll see, there are subtle threads running through them. While excellent, none of these designs are perfect, and I’ve pointed out room for improvement we can learn from.

Give it a go. Grab a coffee and take time to explore further. As you would a quality timepiece made of thousands of parts, analyze and enjoy how intricate parts come together to create a cohesive experience. Look closely and see what makes each website design tick.

You may also want to take a look at the following related articles:

• 40 Creative Design Layouts: Getting Out Of The Box

OkayDave

OkayDave.com
I’ve noticed Dave Werner’s portfolio mentioned in passing on Smashing Magazine before and thought it was well worth a closer look, even if it dates to 2006. One basic way to provide focus and emphasis is to desaturate everything except the target element. On OkayDave, all is in black and white until you mouse over an element.

Things get startlingly more vibrant when you actually click something; a burst of colored particles brighten the screen before transitioning to the selected media. It’s a tad on the over-compressed side but only lasts a second. What a great way to combine very artificial and earthly organics (see Dave’s handwriting and scratchy notes, in particular). And, rewarding visitors for clicking will encourage them to spend more time discovering your content.

Vimeoland

Vimeoland
Video-sharing website Vimeo is known for a number of things, foremost among them being an astoundingly consistent user interface, an example being its very user-friendly roadmap. Vimeoland is a playful form of data visualization: little figurines teleport in, representing unique website users and their status. For example, hearts appear above their heads when they like a video. From time to time, an airplane will fly by.

YouTube may be the biggest video website, but its user interface falls short of Vimeo’s elegance. Vimeo’s video quality, which can go up to true high definition, is superior, too. Something worth thinking about the next time you want to make a film easily accessible.

Grooveshark

Grooveshark.com
Looking for music? Grooveshark may have what you want. In a turbulent time when popular mainstays like Pandora and Muxtape have run into legal tangles because of archaic copyright laws, Grooveshark claims to be in the clear, compensating artists for their work.

Alas, this also means that unlike other services, such as imeem, you can’t (at least yet) embed music on your blog. But I was surprised by how many rare tracks that I searched were already available (they apparently reward people for uploading). Two problems I noticed: (1) some broken help files, and (2) the circular progress indicator will keep going infinitely if it can’t play a song. Hopefully they’ll be smarter about that in the future.

But overall the player is very slick: queued songs visually lock together like Legos, elements slide horizontally to show and hide controls and hierarchies as needed, and the overall blue and gray theme — like a shark! — is sleek.

If you want to download songs, your registration needs to be approved. It’s not an automated process yet, and I’m still waiting for my approval.

SpaceCollective

SpaceCollective.org
Into trans-humanism, fringe science, and the far reaches of space? Space Collective bills itself as “a cross-media information and entertainment channel for post-ideological, non-partisan, forward-thinking terrestrials”. And its website is a joy to visit: in the new posts section, fresh content is arranged in a curved-corner matrix, with green tabs to indicate specific projects.

It seems pretty far out at first, and you may not buy some of the beliefs, but even a glimpse of this imagery will uplift your perspective on humanity’s creativity in the cosmos.

Funnel Design Group

FunnelDesignGroup.com
Do you remember the bizarre devices in the first Myst game that combined familiar elements, and by doing so, came off as alien? The “dentist-chair planetarium” hybrid was a striking example of that. When you visit Funnel’s website, you’ll sense a similar atmosphere: gears are churning away, and a little automaton with a lightbulb for a head is there to help you view its work. It’s almost Steampunk-ish.

I appreciate the detail they’ve gone into: selecting a different section makes the art in the O-shaped viewfinder spring a little, and the title up top closes and opens, as if it were a piece of paper in a rotating carousel. (The old-time Glenn Miller music and whirring sounds are fitting, too.)

Viewzi

Viewzi.com
Finally, in the visual search arena, Viewzi’s results aggregate other websites (like Google and Amazon) and present them in the most sensible context it can detect. For example, searching for “Royksopp” (whose “Remind Me” video has been popular on Smashing Magazine) brings up the album view first. Clicking on it brings up a list of the group’s CD covers.

If that doesn’t suit you, multiple other views — like the traditional “Simple Text” and the pseudo-3D “Photo Tag Cloud” — allow you to explore the same data in different ways. They have other views for specialized searches, so try them all out for appropriate media.

GoDesignate

GoDesignate.com
Here’s another fine example of a goodie-hook. The Web developers at Buffalo were inspired to create this after a “‘discussion about whose turn it was to make the tea.” It provides a clean twist on the old “cards in the hat” process and takes seconds to use. The reference to Buffalo at the bottom is a compact pixelfont, a subtle reassurance that they’re not intrusive marketers.

I couldn’t help but ask if this was actually used by the company, and Dan Griffiths, Managing Director, graciously replied:

“Glad you like it! We do use it for all sorts of things still. You should see some of the things people use it for. :)”

“Should I leave my husband?” was one of the strangest ones I have noticed!

Some more from a list of highlights Dan shared with me:

“Why does my boss call me lady?”

“Will Chris ever regain his masculinity?”

“Should I make a new site design based on Buffalo’s design?”

When hooks like this are in tune with your company’s overall image and sense of humor they build brand familiarity through repeated usage, not to mention subsequent smiles.

Hypnoteis

Hypnoteis.nl
Teis Albers is fond of splashy color. His style is more about grungy splashes of paint and pseudo-decoupage, as demonstrated in his gritty depictions of font flourishes set against a backdrop of various animal and human body parts. But similar to Pagano’s website, clicking on any thumbnail will dynamically zoom and enlarge that picture without refreshing the page. While Pagano’s zooms are Flash-based, Albers uses the magic of Highslide JavaScript.

Serge Seidlitz

Serge Seidlitz
But sometimes you want to make everything stand out, and that’s what this guy is here for. Using a mess-on-the-bedroom-floor approach similar to Werner’s, Seidlitz has nothing fancy in the way of mouse-overs. But his motley assemblage of mayhem does invite clicking: he even urges you to “click on things.”

Needless to say, if you keep updating your portfolio with new stuff, maintaining a website like this could become a time-consuming jumble. But if you already have a wealth of work to show off, the discover-my-creative-chaos approach might work for you.

Six Pixels of Separation

Six Pixels of Separation is Mitch Joel’s showcase of social media insights. It looks pretty usual and boring at the first glance, but a closer look reveals a close attention to detail. Consider how sparse graphical elements are used for maximum effect. Embedded podcasts fit perfectly into the theme; it’s relatively easy to navigate, despite the large amount of links; and leaving a comment rewards you with a surprising (but non-annoying) pop-up; try it!

There are too many social media blogs out there that buy into the same generic “Web 2.0″ conventions. Six Pixels bucks that banality with a layout that doesn’t get in the way of “the meat” and is all the better for it.

Fontpark 2.0

Fontpark 2.0
When I see Web typography guides, they’re often in the Roman characters that I’m well familiar with, so it’s refreshing to look beyond this style and bask in what else is happening around the world.

Japan’s Morisawa is a venerable typesetting company, and in addition to a brief but helpful primer on Japanese Kanji Culture, they have created Fontpark, a unique way of looking at characters with hundreds of years of history. Sit back and watch pieces be animated into animals and faces, or be an active participant and submit your work to the gallery.

Like FontStruct, this is a novel way of promoting your paid products with a quality freebie, another kind of goodie-hook. It may not be as funny as CSS Homer, but finding faces in the swashes and strokes is enlightening nonetheless.

Picnik

Picnik.com
Staying on the food theme, here is a Picnik of a very special sort. Sure, you rely on Photoshop for your more heavy-handed tasks, and rising Web-based image editors such as a.viary boast complex features. But when you want to retouch photos in a jiffy, Picnik is nothing short of a usability dream!

From the smooth registration form (observe how password and email confirmation fields are hidden until you need them, reducing the perception of complexity) to the actual “in-the-basket” look and feel of this Flash application, Picnik is a joy to use inside and out. It simply puts other Web-based image editors to shame — or at least inspires them to do better.

Bestiario

Bestiario.org
Fancy more data visualization? This isn’t as playful as Vimeoland but is substantial in its own right. At first, the lack of anti-aliasing may hurt your eyes, but scroll over (or down) the projects and watch the collection unfold. It’s almost like a very graphical elevator.

It’s fun to move your cursor to the right, whereupon the whole gallery will tilt, as if to look at you askance and ask “Now what?” Well, there’s a pop-out collection of tags on the far right, containing another way to navigate the set. And if you love mathematical visuals…

Phatterism

Phatterism.com
This website is one of the neatest ways I’ve seen (even if somewhat impractical) to share a blog (and other media). Upon visiting, Luis Santi Jr. will greet you with ample white space, fidgeting and occasionally gazing to his left, imploring you to check out his stuff. Like Funnel Design, he’s got his own head-bopping music, which reminds me of the Austin Powers movies.

Click “TXT” and Luis goes to work for you, pulling out an index card of his journal entries. His hand even moves a bit unsteadily, adding to the realistic feel. If you click on a title, you’ll see him scribbling a note, then hold it up for you. The shakes are gone now and the handwriting is obviously a font, but what impressed me is how he presents his comments; they, too, are shown as separate note cards.

What a fun way to show yourself off! For more of Santi’s work, see his main portfolio.

Energi Design

Clickenergi.com
From the get-go, Steve Holmes’ compact Flash website doesn’t have very much, but what’s on it is amazing. He has done video tutorials for well-known stock content provider ArtBeats, and you owe it to yourself to watch his demo reel. The earlier, more up-tempo music he used when I first saw this a while ago was better, but the visuals are captivating nonetheless. If you enjoy type-in-motion videos like Justice’s “DVNO,” this will definitely appeal to you.

Mirror’s Edge

MirrorsEdge.com
It seems like every big game title coming out nowadays needs a Flash website. They’re usually very glossy and don’t have a lot of content, but the techniques involved are well worth experiencing. Mirror’s Edge, which is due for release in November 2008, has already been acclaimed for its aesthetics. Promoting a game with authoritarian cyberpunk gloom but set in a very clean white-blue city, the website complements it almost perfectly.

The waving of the main character’s hair and the slow rotation of the city are nice little touches. Games with such a striking and individual look are rare (some of my favorites include the Wipeout series and Ico) and beg to be copied. Of course, the irony is that copycatting leads to angry cries that the spawns are too derivative.

Observe also that the buttons and headers are slightly askew but not horrendously so, lending a certain sense of dynamic imbalance that reflects the fleet-footed parkour seen in the game.

Like.com

Like.com
Visual search continues to rise. A couple of decades ago, the mere idea of searching through thousands of catalogued images seemed improbable. Today, we can enjoy it everyday on websites like Flickr. Websites such as Riya’s Like.com go a few steps further, and they claim to be “slowly innovating” by improving facial and object recognition. Like a handbag but think the material’s a bit too shiny? Narrow not just by color but by style, and feel like you have more investment in (and control over) the overall search process.

Someday, this will be commonplace too, but until then, it’s flirty fun to drill through look-alike Halloween costumes to pick out one that’s just right for you.

Navigaya

Navigaya.com
Think visual search is too quiet? Navigaya is another value-added search aggregator with a twist: by default, as you search, a halftone-mottled music video (from YouTube) plays in the background. Most of the selections are electronic dance, and, while not immediately obvious, you can reveal the transport controls by moving your cursor to the top of the screen.

Highlights to look out for: the blurred in-and-out (not just faded) effect for hover tips and certain menus, and dotted icons for arrows and other buttons. It’s a tight, dark design that gives the appearance of staying in the background even when it’s in the foreground.

Overall, Navigaya is too claustrophobic at times for my taste compared to Viewzi, because it mainly shows its search engine results in windows within windows. But if you like your search activities to be an information onslaught, give this a spin.

What common threads can you identify running through different design styles? The surfaces may look different, but the underlying spirits and code may have more in common than you think. Take a moment to gaze, absorb, and mentally deconstruct; it will increase your overall understanding of why great Web design works.

About the author

Torley Wong loves to “amplify your awesome” as a screencast pioneer, virtual worlds expert, and aesthetic enthusiast. His video tutorials, which you can watch on Torley Lives, have been viewed over three million times. (al)

Related articles

You may also want to take a look at the following related articles:

• 40 Creative Design Layouts: Getting Out Of The Box