Exploring Design: Outstanding Start Pages!
注:中文部分可不是英文的翻译哦,只是我的感言而已。英文不难,我就不浪费时间啦:)
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.Users can use it to navigate in 3D. Beautiful, interactive and user-friendly.方式很吸引人,铅笔涂鸦,满有趣味的,但是唯一的问题就是导航挺让人迷惑的,像我这样的方向白痴绝对晕死过去,因为经常让我找不到回去的路。
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.就像拉灯绳一样的点击方式导航,还真让我想起了“无印良品”的那个CD机。纸鹤展开以后纸面上是信息,又不禁想起了变形金刚的变身过程。。。
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. 和上面的拉绳有异曲同工之妙,都是走木偶路线,呵呵,不过还是要强烈推荐一下里面的音乐模块,很棒的音乐!(HR是哪国文字啊?)
Interactive vertical navigation menu. SectionSeven.com lets you browse through its sections like through the pages of a book. 超级无敌的导航方式,像看书一样的自然,还能说什么,技术+艺术的顶级配合!
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. 个人不太喜欢,讨厌那个跑来跑去的泡泡,关键是总觉的被泡泡戏弄。也不喜欢太长的导航,一个长条,跟无底洞似的,内容还很无聊,互动太少了。
Navigation menu can be gorgeous. MHQ.nl proves it. (The site was already featured in one of our previous posts).呵呵,有意思的想法,不过鼠标控制有些蹩脚的感觉,转圈的方向和速度总是肉肉的,不爽。
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.太油菜花的一个网站了,一个点击都没有的畅快浏览过程是我完全没有想到的。他们的研究工作和研究精神是值得我们学习滴。中间Contact要输入名字的时候我还失误点击了一次,结果。。。(哈哈,有机会大家自己试试吧)
3. Using enhanced interface design.
Jason Hickner offers sliding navigation with amazing typography and well thought-out dynamic interaction.
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.这位荷兰帅哥还是很牛的一个人物滴,很全才的设计师啊!佩服佩服!人家这个MA就是绝不缺斤少两的MA,哪像咱们,该打假啦!他的sound design很有意思,让我想起了老赵以前玩的音乐视觉化,视觉音乐化。。。(不过页面的统一性感觉差点)
Similar approach by Mathieu Badimon. 对不住,我进不去啊!!
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.
传说中的标哥出现了,哈哈。不过这哥们的标都转了N圈,我怎么就没有看到蜕变的感觉呢?
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. 简单却不乏生动的想法,我喜欢这种风格。
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. 将视觉力量运用至极致,100%读图的页面。BTW:他们的作品真漂亮,太漂亮了,巨漂亮,漂亮得无法形容!!!狂赞一个先!!!哎,太激动了!!!!
Basism showcases its works in well-structured grids; the description is hidden, but appears once the image is hovered. Flash-based solution.
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. 巨大的Tag云呀,这个不足为奇,呵呵,早就有人干过这事啦
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.
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. 我喜欢那张百事的图,够精彩!
Cappen.com achieves the user-friendliness with illustrations, artwork and though-out site structure.
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.
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.
Typography-based solution at its best. For those who can see the beauty in the text. Shortcoming: in no-stylesheets-mode navigation simply disappears.
Similar idea, but Flash-based approach by Neil Duerden.
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.
Similar Textmarker-Effect is also used by Mostardesign. The whole design is based upon a background image and the highlighted content.
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.
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.
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.”
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.
The navigation items has to be explored on Mstudio, too. The sections are represented as three-dimensional paper sheet.
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.
The start page of Post Typography is a Splash-Screen that offers you a foreteaste of what the site is all about – typography.
The inner pages look like a button-collection. Yes, they are links, indeed.
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.
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.
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.
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.
The flash-based design of LeoBurnett.ca uses a pencil as a mouse pointer.






































