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.ca uses a pencil as a mouse pointer. Users can use it to navigate in 3D. Beautiful, interactive and user-friendly.

Leo Burnett, Screenshot

The navigation items on Capitalcomm 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.

Screenshot

Flash-based navigation at Yammat.com 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.

Screenshot

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

Screenshot

Screenshot

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

Screenshot

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

Screenshot

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, Screenshot

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 Vaneijk‘s site. Users look at the icon-based navigation under an acute angle.

Screenshot

Similar approach by Mathieu Badimon.

Screenshot

Lance Wyman 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.

Screenshot

5. Using visual communication.

The start page of the campaign “One Laptop per Child”. 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 Startseite

Screenshot Startseite

6. Using the power of visual elements.

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

73 dpi, Screenshot

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

Screenshot

7. Using Huge Tag Clouds.

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

Screenshot Searchthebit

Talking about huge tag clouds: the agency Wieden +Kennedy 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 Startseite

8. Dynamic interaction & artwork.

Vault49 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 Startseite

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

Screenshot Startseite

9. Interactive & user-friendly.

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

Screenshot

10. Typography in use.

Quite unusual, 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 Startseite

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

Screenshot

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

Screenshot

11. Using a text marker-effect.

For instance, Andy Rutledge‘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.

Screenshot

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

Screenshot

Eoghan Mccabe 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.

Screenshot

12. Experiment with your sites.

Shaun Inman 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. 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.

Screenshot

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

Screenshot

13. Let users explore the page.

Rinzen 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.

Screenshot

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

Screenshot

Catalogtree 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.

Screenshot

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

Screenshot

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

Screenshot

At the first glance KEEN 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

Screenshot Startseite

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? Nonstep 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.

Screenshot

Believe it or not, but this is actually a weblog. 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.

Screenshot

↑ Back to top

Co-Founder of Smashing Magazine. Former writer, web designer, freelancer and webworker. Sven is now writing Science Fiction Stories.

  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
  51. 51

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

    So many usability nightmares… :(

    – Agree, also, so many Accessibility nightmares :(

    0
  52. 52

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

    0
  53. 53

    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
  54. 54

    GREAT!!!!

    0
  55. 55

    Great thread!

    0
  56. 56

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

    0
  57. 57

    Great stuff. creative and technically savvy

    0
  58. 58

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

    0
  59. 59

    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
  60. 60

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

    0
  61. 61

    wow, awesome list

    0
  62. 62

    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
  63. 63

    thanks.. nice list

    0
  64. 64

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

    0
  65. 65

    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
  66. 66

    ithink all of them very simple and easy finder

    0
  67. 67

    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
  68. 68

    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
  69. 69

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

    0
  70. 70

    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
  71. 71

    Wonderful!

    0
  72. 72

    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
  73. 73

    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
  74. 74

    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
  75. 75

    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
  76. 76

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

    0
  77. 77

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

    0
  78. 78

    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
  79. 79

    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
  80. 80

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

    0
  81. 81

    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
  82. 82

    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

Leave a Comment

Yay! You've decided to leave a comment. That's fantastic! Please keep in mind that comments are moderated and rel="nofollow" is in use. So, please do not use a spammy keyword or a domain as your name, or else it will be deleted. Let's have a personal and meaningful conversation instead. Thanks for dropping by!

↑ Back to top