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.
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.
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.
3. Using enhanced interface design. Link
Jason Hickner offers sliding navigation with amazing typography and well thought-out dynamic interaction.
4. Offering another perspective. Link
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.
6. Using the power of visual elements. Link
7. Using Huge Tag Clouds. Link
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.
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.
9. Interactive & user-friendly. Link
A single-page online-shop: Shopcomposition.com delivers single-in-one solution: all products can be found and viewed directly from the start page.
10. Typography in use. Link
Quite unusual37, 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.
11. Using a text marker-effect. Link
Eoghan Mccabe47 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.
12. Experiment with your sites. Link
Shaun Inman49 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.50 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.
13. Let users explore the page. Link
Rinzen54 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.
The navigation items has to be explored on Mstudio, too. The sections are represented as three-dimensional paper sheet.
Catalogtree56 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.
The inner pages look like a button-collection. Yes, they are links, indeed.
At the first glance KEEN61 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.
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.
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? 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.
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.
- 1 http://leoburnett.ca/
- 2 http://leoburnett.ca/
- 3 http://www.capitalcomm.com.my/
- 4 http://www.capitalcomm.com.my/
- 5 http://www.yammat.com/
- 6 http://www.yammat.com/
- 7 http://www.sectionseven.com/
- 8 http://www.sectionseven.com/
- 9 http://www.sectionseven.com/
- 10 http://flaboy.com/folio2/
- 11 http://flaboy.com/folio2/
- 12 http://www.mhq.nl/
- 13 /2015/07/hunt-for-the-webs-lost-soul/
- 14 http://www.mhq.nl/
- 15 http://www.dontclick.it/
- 16 http://www.davorvaneijk.com/
- 17 http://www.davorvaneijk.com/
- 18 http://lab.mathieu-badimon.com/
- 19 http://lab.mathieu-badimon.com/
- 20 http://www.lancewyman.com/
- 21 http://www.lancewyman.com/
- 22 http://www.laptop.org/
- 23 http://www.laptop.org/
- 24 http://www.laptop.org/
- 25 http://www.73dpi.net/
- 26 http://www.73dpi.net/
- 27 http://www.basism.com/
- 28 http://www.basism.com/
- 29 http://searchthebeat.com/
- 30 http://searchthebeat.com/
- 31 http://www.wk.com/
- 32 http://www.wk.com/
- 33 http://www.vault49.com/
- 34 http://www.vault49.com/
- 35 http://www.cappen.com
- 36 http://www.cappen.com/
- 37 http://www.dawebsiteb4dawebsite.com/
- 38 http://www.dawebsiteb4dawebsite.com/
- 39 http://www.ilkilkilk.com/
- 40 http://www.ilkilkilk.com/
- 41 http://www.neilduerden.co.uk/
- 42 http://www.neilduerden.co.uk/
- 43 http://www.andyrutledge.com/
- 44 http://www.andyrutledge.com/
- 45 http://www.mostardesign.com/
- 46 http://www.mostardesign.com/
- 47 http://www.eoghanmccabe.com/
- 48 http://www.eoghanmccabe.com/
- 49 http://shauninman.com/
- 50 http://flickr.com/photos/shauninman/tags/si10/
- 51 http://shauninman.com/
- 52 http://www.alistapart.com
- 53 http://www.alistapart.com
- 54 http://www.rinzen.com/
- 55 http://www.rinzen.com/
- 56 http://www.catalogtree.net/projects/
- 57 http://www.catalogtree.net/projects/
- 58 http://www.posttypography.com/
- 59 http://www.posttypography.com/
- 60 http://www.posttypography.com/
- 61 http://www.keen.nl/
- 62 http://www.keen.nl/
- 63 http://www.keen.nl/
Hold on, Tiger! Thank you for reading the article. Did you know that we also publish printed books and run friendly conferences – crafted for pros like you? Like SmashingConf Barcelona, on October 25–26, with smart design patterns and front-end techniques.