Thursday, November 22, 2007

100 Unconventional Sources for Web Design Inspiration

Most web designers look to the usual resources for inspiration : web design portfolios, social media sites and CSS galleries. But what happens when you do that? You get a site that looks just like everyone else’s.

Check out these resources that inspire you to build a website that separates itself from the pack.

Art & Illustration

Web design is a visual art, so take a look at the aesthetics employed by artists in other fields for inspiration.

Photography

  1. The Photography Showcase: Check out The Photography Showcase for links to top rated photographers.
    Photography Showcase
  2. PhotoPost: Shutterbug’s PhotoPost is a gallery of user-created photos, divided into categories like monochrome, US National Parks, and Digital Doings.
    Shutterbug Photopost
  3. Photo-eye: On Photo-eye, you can look for unique camera formats and print processes.
    Photo-eye
  4. Flickr: This immensely popular photo sharing site is home to both amateur and professional photographers.
  5. photoSIG: Check out the community-critiqued photos on photoSIG.
  6. Fine Art Photography Gallery & Forum: For fine art photography from the stars of today and pioneers of the past, check out this gallery.
  7. Photo Arts: On Photo Arts, you’ll find fine art and documentary photography.

Illustration & Comic Book Art

  1. theispot: On theispot, you’ll find illustrations from over 1,000 top artists.
  2. Illosaurus: Illosaurus is a portal for some of the best illustration sites online.
  3. Children’s Illustrators: Check out this website to see illustrations made with kids in mind.
  4. Drawn!: This blog features illustrations and cartoons that are sure to spark your creativity.
  5. Comic Book Art: Check out Comic Book Art for loads of original illustrations created for comic books.
  6. Illustration Web: On Illustration Web, check out amateur and pro illustrations.
  7. Comic Book Pros: Here you’ll find comic art created by some of the best in the business.
  8. Comic Art Links Directory: Get hooked up with covers, manga, individual artists, and more on this directory.
  9. Masters of Comic Book Art: On this site, you’ll be able to find high quality comic book art, fonts, sketches, and more.
  10. Illustration Friday: See how different artists respond to a weekly prompt in their own unique ways.

Fine Art

  1. Fine-Art: On Fine-Art, you can find art from jewelry to sculpture in nearly any genre and subject.
  2. Art cyclopedia: On Art cyclopedia, find historic works, art movements, and more.
  3. Art Gallery Worldwide: This online art gallery has selections in fantasy, landscape, abstract, nude, and lots of other genres.
  4. Fine Art America: Find art that’s being created in your region of America.
  5. The Worldwide Art Gallery: On this site, discover art from all over the world.
  6. National Gallery of Art: The US government’s National Gallery of Art offers online tours that take you through sculpture, works on paper, and many other creative mediums.
  7. PBS-Fine Art: Find out the stories behind art by watching programs from PBS.
  8. Web Gallery of Art: On this searchable online gallery, you’ll find European fine art dating from 1100-1850.
  9. Fine Art Models: Fine Art Models showcases amazing scale models of trains, ships, automobiles, aircraft and more.

General Art

  1. deviantART: deviantART showcases work from artists whose work is off the beaten path.
  2. World Wide Arts Resources: Find art from all over the world here.
  3. Warmtoast Cafe: The Warmtoast Cafe is home to loads of artists and designers that love to showcase their work.
  4. Burning Word: Burning Word features a collection of poetry and prose.
  5. Lounge72: Lounge72 is a portal for superior design, interviews, and a gorgeous PDF calendar.
  6. Neozine: Here you’ll find a collection of art and resources relating to design.

Product Design

Whether it’s a DVD menu title, video game, or toaster, web designers can learn from what other design fields offer. Use them to consider usability, aesthetics, and create new effects that are usually reserved for offline design.

  1. The Gamers’ Gallery: On the Gamers’ Gallery, you’ll find screenshots of the latest games.
    Gamers Gallery
  2. Michael Graves Design Group: Take a look at Michael Graves’ product design gallery to study the way he employs functionality and friendly aesthetics.
    Michael Graves Design Group
  3. Kotaku: Kotaku has the latest in game screen shots with insightful commentary.
    Kotaku
  4. B1 Media: Check out what this award-winning design firm has done with DVD menu titles.
  5. Alessi: This Italian design group engineers thoughtful home accessories.
  6. Highend3D: Check out Highend3D’s product design gallery, which ranges from cologne bottles to cell phones.
  7. Charles and Ray Eames: Take a look at the historic designs and ongoing creations made in the name of Charles and Ray Eames.
  8. Industrial Designers Society of America: Check out some of the leaders in industrial product design.
  9. Gallery of Historic Patents: This gallery showcases the patents behind historic creations like the Statue of Liberty, Orville and Wright’s “flying machine,” and more.
  10. Memento Navigation Guide: Take a look at the Memento DVD menu’s unique, yet frustrating navigation.
  11. Great Buildings: Discover historic and inspiring architecture in this collection.
  12. Pilots Product Design: Pilots has an extensive gallery of their design work, which includes interior and exterior creations.
  13. UGO: Under Ground Online has screenshots of new and yet-to-be-released games.
  14. Yanko Design: Check out modern industrial design news and product highlights at Yanko Design.

Information Architecture

Information architecture is key to building a highly usable site. Check out these resources for tutorials and other helpful information.

  1. Defining Information Architecture: Peter Morville defines what information architecture is all about.
    Defining Information Architecture
  2. Recommended Reading: Check out these books for an in-depth look at information architecture.
    Recommended Reading
  3. Information Architecture Glossary: If you’re clueless about information architecture terms, check out this handy glossary.
  4. Web Guide: This guide is full of information architecture resources, from associations to education.
  5. Information Architecture Tutorial: Follow this tutorial for 5 lessons in information architecture.
  6. Web Site Architecture 101: This guide offers an explanation of web site architecture in three easy steps.
  7. Visual Vocabulary for Information Architecture: This collection of definitions will help you visualize information architecture.
  8. Information Architecture Lesson: In this lesson, you’ll find information architecture ideas and how they relate to information science.
  9. Effective Info Architecture: Andrew Chak runs down the basics of information architecture techniques.
  10. Information Architecture of the Shopping Cart: Sarah Bidigare discusses best practices for information architecture in e-commerce.
  11. Christina Wodtke: Read what Christina Wodtke has to say about the intersection of design, fine art, and information architecture.
  12. The Art of Topless Dancing and Information Design: Denice Warren describes how to deal with the people you’ll work with in information design.
  13. Information Architecture: Here you’ll find a nine-step guide to deploying a site with appropriate information architecture.
  14. Information Architecture models: Here you can take a look at some common information architecture models.
  15. The challenges of designing interactive systems: Find out about the challenges of designing easy to use interactive systems.

Usability & Accessibility

Designing an attractive website is great, but you have to make sure that it can be navigated. Use these resources to find out more about why you should pay attention to usability and accessibility, and how you can implement them in your work.

  1. Accessibility for web sites: Find out why it’s important to build an accessible web site here.
  2. Designing Web Usability: Read this article from usability leader Jakob Nielson on design for both users and search engines.
  3. Key principles of user centred design: Get back to the basics with these principles for building a highly usable website.
  4. Accessibility Tools: Check out this link for accessibility tools and wizards that will make your job easier.
  5. Effective text: Find out why text is better than graphics in web design.
  6. Usability First: Usuability First’s guide to web design encourages readers to remember that usability should not be an afterthought.
  7. Readability: Check out this guide to clear, readable text.
  8. The Usability Methods Toolbox: Check out this source for the latest in usability methods.
  9. Affinity Diagramming: Find out about the method of affinity diagramming here.
  10. The Perfect Pop-up: This tutorial shows you how to use unobtrusive pop-up windows that are accessible for everyone.
  11. Questionnaires: Use these questionnaires to find out how usable people think your site is.
  12. People are impatient: Find out why people aren’t going to wait for your website and what you can do about it.
  13. How to promote usability in an organisation: Use this guide to implement usability in your organization.
  14. Ten Quick Tests to Check your Web Site for Accessibility: Check out this tutorial to find out if your website is accessible or not.
  15. Tips: Design for accessible Web sites: Check out this article for a good introduction to building a website that’s accessible to users with disabilities.
  16. Clear Language and Effectiveness Tool: Use this tool to make your language more readable.
  17. Lynx Viewer: See how your pages render in the Lynx text browser.
  18. RoboBraille: Use RoboBraille to translate text documents into Braille, and more importantly, speech.
  19. Methods table: Use this table to find the most appropriate usability method for your situation.
  20. 5-Second Tests: Measuring Your Site’s Content Pages: Make sure your content is usable by utilizing these tests.
  21. An Introduction to Accessible Design: Get the lowdown on accessible design here.
  22. How people use web pages: Check out this article for information on the difference between how web designers look at pages and how users look at them.
  23. Better Accessible Forms: Read this tutorial to find out how to fix your forms to create a more accessible website.

Examples

These websites are excellent examples of unconventional web design. You’ll want to emulate their style-if you can figure out how in the world they did it.

  1. Addicted Flavours: Addicted Flavours has a diagonal roll-over menu that goes completely against the web’s traditional vertical and horizonal style.
  2. Michael Fakesch: Michael’s navigation is an unenven set of stairs.
  3. Diana Stewart: Diana Stewart’s site has a bottom navigation with a fixed base.
  4. Haus Hoyer: Haus Hoyer’s site is a virtual coffee table, full of interactive objects that can be clicked on and moved around.
  5. Web Design 2.0: This site features a floating, rotating cube.
  6. Subway Life: Check out the map-like design of this site.
  7. C.DRIC.BE/GIUM: This site is inside a notebook and full of color.
  8. Apex A: Apex A’s site is built upon a big, green leaf.
  9. Jansochor: Jansochor’s site is divided into small black boxes.
  10. Cartonagem Trinidade: This site uses a see-through cube for navigations.
  11. Muziektheater: Like Jansochor, Muziektheater’s navigation and homepage is laid out on boxes.
  12. Cathy Beck: Cathy Beck’s site is built into a tree.
  13. No one belongs here more than you: Miranda July used her refrigerator and stovetop as whiteboards to create this site.
  14. Triart 2000: This homepage allows users to float in any direction as well as grab and drag objects.
  15. Alexdukal: Alex Dukal’s site artfully displays his work and uses smart typography.
  16. B_Cube: B_Cube’s pages are laid out on a cut open cube.

Source : http://www.designvitality.com/blog/2007/09/web-design-inspiration/