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.

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.

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

Dontclickit, Screenshot15

3. Using enhanced interface design.

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

Screenshot

4. Offering another perspective.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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

  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

    @ Gamermk (July 17th, 2007, 11:28 pm)

    So many usability nightmares… :(

    — Agree, also, so many Accessibility nightmares :(

    0
  2. 52

    Awesome!!!! Esp. notepad website!!!!

    0
  3. 103

    Most of these sites are not usable, but that does not make them bad sites. Before judging a site, think of the site’s purpose.

    Yes, a fancy, flashy, difficult to navigate online book store who targets old women is a bad idea. But a fancy, flashy, difficult to navigate portfolio site targeting showcase sites and tech-savvy digital marketing companies may be a good idea.

    0
  4. 154

    GREAT!!!!

    0
  5. 205

    Great thread!

    0
  6. 256

    beautiful bages espacialy; 12. 14. and 15. designs are ver striking :) but couldn’t compare with my page :)

    0
  7. 307

    Great stuff. creative and technically savvy

    0
  8. 358

    A little to flash heavy but better than anything I could do.

    0
  9. 409

    All very well and good, but far too much Flash – since your website’s visitors will spend more time on other peoples’ website, using ‘unique’ navigation like the examples above will probably just alienate most of your users.

    Agree with the comments above regarding usability – nightmares!

    0
  10. 460

    Very creative and cool. Just not very useful in the real world besides being eye-candy. See “mystery meat navigation”

    0
  11. 511

    wow, awesome list

    0
  12. 562

    Based on your title and opening paragraph I was really expecting to see some powerful examples of a start page. While the Flash, design and creative aspects of these sites are indisputable; they largely fail to meet the challenge of a commercial start page – tell the site visitor what it is you do before they move on to the next site.

    Many of the sites make it very hard to figure out what the company they represent actually sells. While it is clear on most that they have some sort of portfolio, there are many creative fields where a company would have a portfolio.

    Designing for design’s sake is certainly more fun and interesting; but, at the end of the day someone must pay for these experiments. Ignoring search engines, usability, and potential customers with slow connection speeds is simply not a good business strategy to keep the lights on.

    -1
  13. 613

    thanks.. nice list

    0
  14. 664

    you guys rock some serious balls. these posts/lists are great.

    0
  15. 715

    I dislike most of them, interesting stuff, but not usable.

    Between, the notepad “design” (if I can call it this way) is the worst in this list. This “thing” is more anti-webdesign than the other flash sites.

    -1
  16. 766

    ithink all of them very simple and easy finder

    0
  17. 817

    I have to say MHQ.nl is by far the best and most unique out of all these examples…

    All the rest I would just ignore if I came across a site that looked like any of them…

    0
  18. 868

    about half of the linked to examples of outstanding start pages result in an entirely blank page for me. so i’d have to take issue with the idea that they’re good start pages. from my perspective about half of them are inredably bad start pages imo.

    0
  19. 919

    “outstanding start pages (nonflash)” would make an interesting sequel to this list. leep it up

    0
  20. 970

    very nice list of cool Site. Please Check for Interactive & user-friendly. our Online Shop https://www.stylebandits.com/shop

    Greets from Germany DOM

    0
  21. 1021

    Wonderful!

    0
  22. 1072

    It’s funny to see all of the rage against Flash and yet the fact that tangerine-tree is a completely dead page isn’t commented on. That is, it’s a very pretty page but it DOESN’T GO ANYWHERE.

    That’s got to be the cardinal start page sin.

    0
  23. 1123

    While I enjoy gazing at really attractive websites, that is always secondary to what happens BEYOND the beauty. Beauty is not only skin deep. I want great navigation, relevant and well written content, resourseful copy and fast loading pages. Flash websites can be nice to look at but I usually click off before they finish loading. Clean properly codded and well written CSS web pages get my vote. Beauty and brains.

    0
  24. 1174

    Thanks for the review of the site I made http://www.keen.nl/
    I’ve linked you back. :)

    As for everyone’s comments on Flash…

    Not all of these sites are targeted at all audiences.
    I don’t understand why people always want “old ladies” to be able to use any website. Why should everything be compliant?
    Compliance isn’t necessarily better from a business point of view either. Would you ask Kanye West to make his music more compliant to the sensibilities of these old ladies?

    W3 standards are restrictive by nature.
    For many smaller design agencies they are just too many and too far-fetched to be practical.
    Add to that backward compatibility and other cross browser support problems.

    That said, Flash is still the only more-or-less-standard way to create certain effects. Not W3 standard… but standard enough to ensure that most people will be able to see and use the site.

    I think that experimental Flash designers are (partly) the reason why DHTML has been getting better support and more interest, because Flash showed what could be done.
    DHTML was already around when Flash started booming, but hardly anybody was able to use it back then.
    Flash was really about support and standardization in the beginning, and it still is in part.

    Programmatic design is perpetually transitional as is the technological industry, and there will never be such a thing as purist standard compliance.
    One of the tasks of a designer is to set priorities, and compliance isn’t necessarily the top priority.

    MHO, Joris

    0
  25. 1225

    I can’t believe you are promoting these horrors as examples of good practice. Pretty, yes. Usable, accessible, even useful: absolutely not.

    CapitalComm – apparently a serious business, but how can you tell when you have to struggle your way through endless “cute” animations.

    “Navigation menu can be gorgeous. MHQ.nl proves it.” It may be gorgeous: but instead of just clicking on the link I want I have
    to work out how to bring it to the front of the “carousel”.

    “Classical solutions can be boring” – yes, if by “boring” you mean “consistent”, “easy to use”, “not getting in the way of what I want to do.”

    Another feature of most of these sites is that all the effort seems to have gone into the graphic design, with nothing left over to create any useful content.

    0
  26. 1276

    Tangerine site is beautiful but had plenty usability issues and its built with tables! Eugghh!!

    0
  27. 1327

    That was nice list. I loved that rotating one. Thinking would it be good or would it confuse the users.

    0
  28. 1378

    Great links! So much inspiration! Check also my flash website at monofx.cjb.net. Not so great as those but I’ve made this with 1 week Flash experience.

    0
  29. 1429

    really really nice compilation and very useful site specially for budding designers.. such sites really showcases the enormous design talent out there.. love the navigation with the acute angle..

    0
  30. 1480

    Very creative, but most of these pages is very little accessible

    0
  31. 1531

    looks good-so the links need help-navigation is important but that wasn’t the what the topic
    was about here you delivered fine and I know great ideas when I see them. I know some dot.coms that could really be inspired by hitting this page. whats next

    0
  32. 1582

    Great analogy. If you want pretty, paint a picture. The web is about information transfer, which is pretty sparse on some of these pages. I did however get a lot of layout inspiration. I’ve been looking for ways of engaging metro and flip book styling.

    0

↑ Back to top