Exploring Design: Outstanding Start Pages

Advertisement

Designers have only a fraction of a second to attract users’ eye and win over their loyalty. Clear visual structure, thought-out typography and moderate use of images are extremely important – as they can drastically improve the scanning process for the users. Consequently, to achieve a lasting positive impression, it’s common to make use of basic rules of usability.

However, classical solutions can be boring; creative solutions can be appealing. Therefore to impress visitors, designers risk unusual and innovative approaches. After all, between standards and creativity there is a lot of room for design experiments. We observe these experiments. We explore new approaches. And we collect them, so you don’t have to.

And since no page is equally important as the start page, it’s interesting to know, which approaches designers come up with, developing an innovative design for start pages. Let’s take a look. Unusual, remarkable and outstanding start pages – in a brief overview.

1. Dynamic, interactive, stylish. Link

Apparently Leo Burnett prefers to work with pencils, at least in the sketch phase of the site development. The flash-based design of LeoBurnett.ca1 uses a pencil as a mouse pointer. Users can use it to navigate in 3D. Beautiful, interactive and user-friendly.

Leo Burnett, Screenshot2

The navigation items on Capitalcomm3 seem to be bounded to a string. To navigate through the content users have to drag the menu items. Extremely well designed, extremely nice to explore.

Screenshot4

Flash-based navigation at Yammat.com5 sticks to a rubber or elastic band; once a link is clicked, the whole page gets in motion. The background images changes with every page reload.

Screenshot6

Interactive vertical navigation menu. SectionSeven.com7 lets you browse through its sections like through the pages of a book.

Screenshot8
Screenshot9

Not only users can play with web-sites, web-sites can play with users. The navigation menu on Flaboy.com10 captures the mouse cursor and offers specific browsing locations – automatically. Nicely designed, nicely implemented.

Screenshot11

Navigation menu can be gorgeous. MHQ.nl12 proves it. (The site was already featured in one of our previous posts13).

Screenshot14

2. Browsing a site in a new way. Link

What about browsing a web-site without having to click on any links? Interesting approach. Designers experiment.

Dontclickit, Screenshot15

3. Using enhanced interface design. Link

Jason Hickner offers sliding navigation with amazing typography and well thought-out dynamic interaction.

Screenshot

4. Offering another perspective. Link

An unusual design perspective is offered at Davor Vaneijk16‘s site. Users look at the icon-based navigation under an acute angle.

Screenshot17

Similar approach by Mathieu Badimon18.

Screenshot19

Lance Wyman20 showcases his work in the form of a spiral. The latests works are placed on the outer side. A navigation menu helps to select some more specific works. Implemented with Flash.

Screenshot21

5. Using visual communication. Link

The start page of the campaign “One Laptop per Child”22. The start page isn’t a splash-page: the images refer to different sections of the site. The icons can be found in the navigation menu. An unusual, but interesting concept.

Screenshot Startseite23
Screenshot Startseite24

6. Using the power of visual elements. Link

73dpi.net25 conveys its message with images, not with words. The works are presented one after another. Without comments and descriptions.

73 dpi, Screenshot26

Basism27 showcases its works in well-structured grids; the description is hidden, but appears once the image is hovered. Flash-based solution.

Screenshot28

7. Using Huge Tag Clouds. Link

Search the Beat29, a music search engine, experiments with huge tag clouds. The start page has over 150 Kb text.

Screenshot Searchthebit30

Talking about huge tag clouds: the agency Wieden +Kennedy31 makes use of them to present its clients – according to their “weight” and their authority. Apparently, there are many of them. Users can also use a timeline to navigate through all of them with the mouse. A Flash-based solution, which has some usability shortcomings. What is not necessarily gorgeous, sounds like an interesting concept.

Screenshot Startseite32

8. Dynamic interaction & artwork. Link

Vault4933 uses the Flash-approach to show off its works. The page is divided into six sections; navigating through each of them users can see the results as the background images. Although well designed, the site makes use of annoying popups. Firefox blocks.

Screenshot Startseite34

Cappen.com35 achieves the user-friendliness with illustrations, artwork and though-out site structure.

Screenshot Startseite36

9. Interactive & user-friendly. Link

A single-page online-shop: Shopcomposition.com37 delivers single-in-one solution: all products can be found and viewed directly from the start page.

Screenshot38

10. Typography in use. Link

Quite unusual39, but still remarkable. Users can even play with text stripes – if they are linked, which they not always are. Not particularly informative, but quite unusual – however, there are further possibilities, particularly if Flash is used.

Screenshot Startseite40

Typography41-based solution at its best. For those who can see the beauty in the text. Shortcoming: in no-stylesheets-mode navigation simply disappears.

Screenshot42

Similar idea, but Flash-based approach by Neil Duerden43.

Screenshot44

11. Using a text marker-effect. Link

For instance, Andy Rutledge45‘s web-site. Andy presents long text passages as headlines. Sometimes just three colors are enough for a visually appealing design. Textmarker-effect in use.

Screenshot46

Similar Textmarker-Effect is also used by Mostardesign47. The whole design is based upon a background image and the highlighted content.

Screenshot48

Eoghan Mccabe49 surprises his visitors with a hover-effect. As long as no text is hovered, the page looks quite boring. Important aspects are highlighted with a green marker. The font-size is definitely too big.

Screenshot50

12. Experiment with your sites. Link

Shaun Inman51 experiments using color and saturation to suggest the age (and arguably relative importance) of site content. Each day of the year is associated with a color.52 Winter begins with a blue which Spring changes to green. Summer fades to yellow and turns an orange-red by Autumn. As time passes, these colors begin to fade.

Screenshot53

On AListApart.com54 each issue has its own color scheme. “Imagine: Red and green for Christmas; blue underlined links for when Jakob Nielsen finally writes for us.”

Screenshot55

13. Let users explore the page. Link

Rinzen56 offers a start page for explorers. The navigation consists of dozens of colored pixels; each of them leads to a specific location. Tooltips at the top of the page provide clues of where the pixel is linked to.

Screenshot57

The navigation items has to be explored on Mstudio58, too. The sections are represented as three-dimensional paper sheet.

Screenshot59

Catalogtree60 offers probably one of the weirdest navigation menus ever designed. A small animation on the left side of the alphabet (type here) offers users to type in the code symbols and numbers; once the input is confirmed with the return-key, the new page is loaded.

The site is quite strange, and has few problems in modern browsers. Users who don’t cope with this kind of navigation can use the index link, which lists all available pages. Although implemented not perfectly, the idea of letting users type in the page they’d like to land to, is worth mentioning.

Screenshot61

The start page of Post Typography62 is a Splash-Screen that offers you a foreteaste of what the site is all about – typography.

Screenshot63

The inner pages look like a button-collection. Yes, they are links, indeed.

Screenshot64

At the first glance KEEN65 doesn’t offer something particular. However, instead of traditional navigation the site uses sliding data blocks; the whole information is shown on a one single page, no page refresh is needed.

Screenshot 66
Screenshot Startseite67

14. Minimalism and attention to small details. Link

Tiny, but with a keen attention to the smallest details: The Tangerine Tree. It doesn’t really have to be that small.

Screenshot

15. Using uncommon solutions. Link

Where to place the navigation menu? On the left, on the right? At the top or at the bottom? Well, why not in the middle of the page? Nonstep68 places the navigation menu on a fixed position, which never change – even if the page is scrolled. Navigation is extremely simple – the click on a navigation item scrolls to the content dynamically and changes the background color of the page.

Screenshot69

Believe it or not, but this is actually a weblog70. The page not only looks like Windows Notepad, but also works like that. The navigation menu appears as the drop-down-menu at the top of the window.

Screenshot71

Footnotes Link

  1. 1 http://leoburnett.ca/
  2. 2 http://leoburnett.ca/
  3. 3 http://www.capitalcomm.com.my/
  4. 4 http://www.capitalcomm.com.my/
  5. 5 http://www.yammat.com/
  6. 6 http://www.yammat.com/
  7. 7 http://www.sectionseven.com/
  8. 8 http://www.sectionseven.com/
  9. 9 http://www.sectionseven.com/
  10. 10 http://flaboy.com/folio2/
  11. 11 http://flaboy.com/folio2/
  12. 12 http://www.mhq.nl/
  13. 13 http://www.smashingmagazine.com/category/showcase/
  14. 14 http://www.mhq.nl/
  15. 15 http://www.dontclick.it/
  16. 16 http://www.davorvaneijk.com/
  17. 17 http://www.davorvaneijk.com/
  18. 18 http://lab.mathieu-badimon.com/
  19. 19 http://lab.mathieu-badimon.com/
  20. 20 http://www.lancewyman.com/
  21. 21 http://www.lancewyman.com/
  22. 22 http://www.laptop.org/
  23. 23 http://www.laptop.org/
  24. 24 http://www.laptop.org/
  25. 25 http://www.73dpi.net/
  26. 26 http://www.73dpi.net/
  27. 27 http://www.basism.com/
  28. 28 http://www.basism.com/
  29. 29 http://searchthebeat.com/
  30. 30 http://searchthebeat.com/
  31. 31 http://www.wk.com/
  32. 32 http://www.wk.com/
  33. 33 http://www.vault49.com/
  34. 34 http://www.vault49.com/
  35. 35 http://www.cappen.com
  36. 36 http://www.cappen.com/
  37. 37 https://www.shopcomposition.com
  38. 38 https://www.shopcomposition.com
  39. 39 http://www.dawebsiteb4dawebsite.com/
  40. 40 http://www.dawebsiteb4dawebsite.com/
  41. 41 http://www.ilkilkilk.com/
  42. 42 http://www.ilkilkilk.com/
  43. 43 http://www.neilduerden.co.uk/
  44. 44 http://www.neilduerden.co.uk/
  45. 45 http://www.andyrutledge.com/
  46. 46 http://www.andyrutledge.com/
  47. 47 http://www.mostardesign.com/
  48. 48 http://www.mostardesign.com/
  49. 49 http://www.eoghanmccabe.com/
  50. 50 http://www.eoghanmccabe.com/
  51. 51 http://shauninman.com/
  52. 52 http://flickr.com/photos/shauninman/tags/si10/
  53. 53 http://shauninman.com/
  54. 54 http://www.alistapart.com
  55. 55 http://www.alistapart.com
  56. 56 http://www.rinzen.com/
  57. 57 http://www.rinzen.com/
  58. 58 http://www.mstudio.com/mstudio.html
  59. 59 http://www.mstudio.com/mstudio.html
  60. 60 http://www.catalogtree.net/projects/
  61. 61 http://www.catalogtree.net/projects/
  62. 62 http://www.posttypography.com/
  63. 63 http://www.posttypography.com/
  64. 64 http://www.posttypography.com/
  65. 65 http://www.keen.nl/
  66. 66 http://www.keen.nl/
  67. 67 http://www.keen.nl/
  68. 68 http://www.nonstep.com/
  69. 69 http://www.nonstep.com/
  70. 70 http://bartleby.rambleschmack.net/
  71. 71 http://bartleby.rambleschmack.net/

↑ Back to top Tweet itShare on Facebook

Sven is the co-founder and former CEO of Smashing Magazine. He's now writing at his Conterest Blog, where he focuses on blogs, content strategy and publishing — all in German.

Advertisement
  1. 1

    This is the awesomest post since your dark designs and “KISS” posts, at least IMHO.

    *fap fap fap*

    1
  2. 2

    Love the SectionSeven.com web-site! Simply amazing.

    Thanks for a truly wonderful article; indeed, this is one of the best articles since the KISS post.

    0
  3. 3

    So many usability nightmares… :(

    0
  4. 4

    Nice! Lots of inspiration. Keep it commin’!

    0
  5. 5

    I agree with Gamermk. Lots of Flash…

    0
  6. 6

    neat, thats why geek sysadmin choose black and white world :-)

    0
  7. 7

    LOVE the notepad site.

    0
  8. 8

    Love the article, some very usefull sites/concepts presented. As for there being too much flash in this article, while flash also doesn’t have my personal preference it doesn’t really matter since the whole idea is to learn/be inspired from the sites presented.

    0
  9. 9

    Flash used for navigation is as bad as pounding nails through your scrotum, but the use of colour in many of these examples and the amusing experimentation that has been done more than makes up for it. Just make sure that you NEVER EVER rely on Flash for a site’s navigation, ok?

    0
  10. 10

    That last page (the notepad / windows design) is totally kool

    0
  11. 11

    Nice collection of smashing web pages. Just the last one remembers me something – my old homepage (it’s in Czech language) :-) .

    0
  12. 12

    Great sites, the notepad one is killer! :) I’ve always liked mstudio.com

    0
  13. 13

    “…a fracture of a second” should be “…a fraction of a second”

    0
  14. 14

    Vitaly Friedman & Sven Lennartz

    July 18, 2007 3:17 am

    Thanks, Alex. Fixed.

    0
  15. 15

    I really love the no click start page. It’s probably my favorite concept.

    0
  16. 16

    Really nice collection here even though there is a lot of flash.

    0
  17. 17

    So much Flash… horrible.

    0
  18. 18

    These ideas are fine if you don’t care about usability, accessibility or search engines.

    The “single page e-commerce website” is a great case in point. That’s one page that will get indexed by search engines, whether you have 1 item for sale or 10,000. That’s bad for shoppers who have to navigate to the product they want via your Flash navigation rather than have Google index the specific page of that item and the shopper just land on it directly from the search engine (like a normal HTML page).

    These ideas might be aesthetically appealing, but eye candy isn’t very useful if you want people to find your site and actually use it.

    0
  19. 19

    Very interesting.

    I’d like to see a version of this less oriented toward interaction and branding and more oriented towards converting visitors to signups. Something every designer needs to consider when doing commercial work is the successful communication of the message.

    “Successful start pages for web 2.0 companies” could be the theme.

    If it was really well done, each start page presented would include statistics on new visitors vs. conversions.

    Love the site. Keep it up!

    0
  20. 20

    Lovely design ideas, very creative but too many search and user issues – some of these designs need there own manual / user guide / website for users just to figure out how to browse the content. Must be a nightmare for Google to index also. Still very interesting concepts, looking forward to seeing more of this type of thing on the web in the future.

    0
  21. 21

    good list definitely a few new ways to look at how we use the web.
    also a little typo:
    “Typography-based solution at ist best”

    0
  22. 22

    Yeah, pretty to look at, but essentially worthless. It’s Flash, what more can one say?

    0
  23. 23

    Wow. Talk about a lot of misguided design. There’s some beauty in there. Certainly. But oh – my – god. Some of the sites I clicked had no easy navigation. Many couldn’t be linked to, aside from the home page. One crashed my browser. Another didn’t render properly at all, and another took TWENTY SECONDS to load its Flash!

    Please, please PLEASE! Please tell me that somebody out there understands there’s more to design than being pretty.

    My ex girlfriend is pretty. There’s a reason why she’s my EX.

    Pretty design that isn’t friendly is no different. I’d kick that b!tch to the curb too!

    0
  24. 24

    Awesome stuff, p.s there is no link on the AListApart screenshot.

    0
  25. 25

    Wow, amazing list of sites with creative navigation schemes. Really good post.

    0
  26. 26

    Mixed feelings about this…I agree there’s some REAL usability nightmares but at the same time interesting concepts regardless of technology used. I would love to see SM do the article that I thought this was going to be: Outstanding Start Pages in terms of engaging and/or surprising the user without compromising usability, clarity, directing the user to good content, not wasting peoples time, etc.

    It’s so hard to push web standards to print designers as it is…I’m looking for good articles to forward to my firms giant web redesign committee (of which I’m the only actual person that’s seen the light of a text editor) – this is not the one!!!

    0
  27. 27

    These are great for fun and and the sake of art. But if I were looking for information I would instantly look elsewhere.

    0
  28. 28

    Bandsintown.com uses a gaint tag cloud similar to searchthebeat to show local concerts in your area that match your musical tastes. You signup and add your favorite artists so that the tag cloud can visually display the concerts you’de be most interested in.

    Bandsintown.com

    I think this is a great post, I think there is still a lot to be done as far as experimenting with better ways to visualize information.

    0
  29. 29

    There is a difference between web sites built for art and ones for commerce, some of these sites may use flash and may not index well in google but does that make worse? I’m sure being valid CSS code was not on the minds of any of the designers in this batch, art is about breaking the rules, and most of these sites are experiments in visual design and navigation.

    0
  30. 30

    this is inspiring! I like the nonstep radio navigation, that is cool.

    So much nice sites to explore.

    Great Post!

    0
  31. 31

    I applaude the designers who are trying to push the boundries of web design, but some of these sites were plain awful.
    I agree – too much flash is used in an attempt to try something totally “out there” and most of the time it does not work and usability and accessibility go out the window.

    The “no click” concept for example is interesting, but totally impractical and frankly annoying after a while.

    0
  32. 32

    thanks, really good collection.

    0
  33. 33

    hi,
    thanks a lot for this great collection ! These are wonderful sites, giving a lot of design and functionnality ideas….!

    0
  34. 34

    I Agree, the flash animations looks nice. But I think people with not much knowledge will find it difficult to navigate in some of them. Sometimes I have to search to get to the “main” naivgation page . . kinda hard sometimes, hidden and stuff.

    I think flash is cool to visualize things, playing movies and stuff. But it should the site should be able to work as intended even if someone dont have flash installed . . .100% or even 50% or more usage of flash in a site will probably reduce some visitors. But I understand, at the end . . these people make the site to “showoff” . . or satisfy the company that are hiring them :p so its important to add some “WOW” factor with flash hehehe.

    0
  35. 35

    Phil from Loreauville

    July 18, 2007 7:25 pm

    Pretty cool and outside-the-box designs, but some are a little too outside-the-box. I agree with the consensus here about the usable navigation and content (or rather, the lack there-of). While the more abstract navigation designs may be appreciated by the “designer savvy” crowd, I think the average internet user would become quickly disinterested after the initial “WOW- that looks cool” effect wears off.

    0
  36. 36

    Tejvan - net writing

    July 18, 2007 7:42 pm

    Some great ideas here – where to start!

    0
  37. 37

    I can’t help but think the designers of these pages are more interested in what they think looks cool, and less what their user actually needs. At some point, it has to stop being an art gallery and start being a web site. If you built a really cool looking building, but no one could figure out where the door is, what have you gained?

    0
  38. 38

    Daniel Condurachi

    July 18, 2007 8:09 pm

    GREAT!!! Thank you for sharing all this with us! I feel so small with all that you shared, all those ideas. Indeed there are some that are better than others, but all have a twinkle

    0
  39. 39

    Seems Andy Rutledge’s site doesn’t have the text marker-effect design anymore.
    First site I thought of is plasticbag.org.

    0
  40. 40

    For most of the site the user/vistor probably would have no idea what to do. Some geeks problably stick around to enjoy an unconventional design.
    Ofcourse your basic three column portal lookalike website probably would do the same thing…. But basically I agree with Gamermk.

    0
  41. 41

    Flash is really the anti-web.

    0
  42. 42

    Another great post!

    0
  43. 43

    oohh yes, alot of flash and what?, very creative congratulations for open our inspirations

    0
  44. 44

    I find most of these start pages to be less than outstanding. These designers have chosen to showcase their Flash and Photoshop skills. A great start page that works as part of a multi-site Web experience must use conventions used by other sites, and perhaps add one or two new elements, but not be totally new, or the visitor will become frustrated and leave.

    0
  45. 45

    this one should have done it in the list:
    http://www.thibaud.be

    0
  46. 46

    Nice, nice, nice :-)
    a great selection.

    0
  47. 47

    This article should be called the ‘least usable start pages’.

    I got annoyed after just the first few and didn’t bother with the rest, but the ones I looked at were terrible. The ‘no click’ page – it’s virtually impossible to move your mouse without being sent to a page you don’t want.

    Lots of ‘mystery meat’ navigation too.

    There are few cases where sites such as these work. One example would be a children’s site, where the process of finding the information is just as important as the information itself. In that case, it’s fine to turn it into some sort of game. But for most other sites, people just want to find the information they need as quickly and easily as possible.

    It’s unfortunate that some less internet savvy people may be taken in by the fancy portfolio pages when choosing a designer, just because it looks good. The end result is that they probably get some kind of abstract, completely useless website.

    0
  48. 48

    thanks for the list!! great

    0
  49. 49

    Hiii….There…..This is such a wonderful collection. This collection really enhance teh creativity of web developers……

    Thx 4 article….

    0
  50. 50

    Simply amazing~

    0

↑ Back to top