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.
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.
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.
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.
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.
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.
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.
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.
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.
译文:
想做什么样的首页？只有你想不到的，没有我做不到的
设计师只要钩钩小指就能牢牢抓住用户的眼球，赢取他们的忠诚。清晰的视觉结构，反复推敲后的印刷样式并适度运用图片是吸引用户的关键所在，因为这些因素能大大提高用户的浏览体验。
因此为了达到持久的积极影响，我们开始普遍使用颇具实用性的基础法则。
不论怎么样，传统的解决方案是枯燥乏味的，而创新的解决方案可能很有感染力，因此为了吸引更多的访客，设计师们冒险尝试使用与众不同的革新方法，毕竟在传统和创新之间，设计还是有很大创意空间的。我们观察着他们的设计，发掘新的方法，并收集起来，所以你无需再费时整理。
再说了没有一个页面比首页更重要，我们都很想知道设计师们在设计首页的时候用了哪些方法，现在就让我们来小窥一下突破常规，非同寻常的个性首页吧。
1.动态、交互、个性
Leo Burnett显然喜欢用铅笔，至少在绘制网站设计草图的时候喜欢用铅笔。第一个基于flash的网站LeoBurnett.ca把铅笔作为鼠标指针，用户可以用它操控3D，看上去十分漂亮，交互性很强，而且用户用起来也方便。
Capitalcomm网站上的导航项排成一行，用户可以通过拖拉菜单来查看内容，十分出挑的设计，值得研究一下。
Yammat.com网站上基于flash的导航上都有一块橡皮或橡皮筋，一旦点击了一个链接，整个页面都会动起来，而且每个页面的背景图片都是不同的。
交互式的垂直导航菜单。 SectionSeven.com让你体验看网页像看书一样的感觉。
Flaboy.com 网站上的导航菜单会抓住你的鼠标指针不放，然后自动转到特殊的浏览页面。精细的设计，精细的工具。
导航菜单可以变得很华丽，MHQ.nl网站证实了这一说法（这个网站的头块招牌还是我们以前的那篇文章呢）
2.用全新的方法浏览网站
如果浏览网站无需点击任何链接，结果会怎么样？哈哈，很有趣的尝试，设计师们正在做这个试验呢。
3.运用增强型的界面设计
Jason Hickner 就用令人惊异的样式和周全的动态交互设计出了滑动导航。
4.换个角度看网页
Davor Vaneijk的网站提供了一个非同寻常的设计视角，用户在锐角角度下看到了基于图标的导航。
Mathieu Badimon也运用了相似的方法。
Lance Wyman用螺旋样式展示了他的作品，最新作品被放在了最显眼处。导航菜单有助于更明确的选择内容，这些效果由Flash支持。
5.利用可视因素
“One Laptop per Child”网站的首页并不很醒目，图片代表着网站中不同的版块，导航菜单上也有图标，一个与众不同却十分有趣的概念。
6.利用视觉冲击力
73dpi.net 用图片而不是文字传达它所要表达的信息，所有的图片一个接着一个，没有任何评论和描述。
Basism 网站运用布局合理的格子来排列内容，描述是隐藏起来的，但是一旦图片处于悬停状态，描述就会显现出来。这是基础Flash所达到的效果。
7.大量使用标签云
Search the Beat是个音乐搜索网站，有着大量标签云，首页大约有150KB的文字。
说到标签云，代理商 Wieden +Kennedy根据客人的“分量”和职位，运用标签云来介绍他们的客人，用户同样可以用鼠标查看导航内容。这是个基于Flash的解决方案，虽然在实用性上有些缺点，而且过于华丽，但却是个十分有趣的理念。
8.动态交互和艺术品
Vault49网站用Flash手法来展现它的作品，页面被分割成6个部分，互相之间都建立了导航系统，虽然设计颇费心思，但这个网站却运用了讨厌的弹出窗口，受到Firefox浏览器阻截。
Cappen.com 运用了图解、艺术品和周全的网站结构，使用户使用起来更方便。
9.交互性和易于用户使用
Shopcomposition.com 是个只有一个网页的网站，在运用了多项合一的解决方案后，在首页上就能看到所有的产品。
10.运用印刷样式
这个方法虽然不太常用，但却很出挑，如果文本stripes框架有链接（但通常是没有链接的），那么用户就能看到文本，虽然信息量不是太大，但还算与众不同，然而如果运用Flash技术，可能会出现其他情况。
对于那些懂得欣赏文字的人来说，基于Typography的解决方案是最好的，但也有个缺点：在没有stylesheet的模式下，导航也消失了。
Neil Duerden网站上也运用了相似的理念。
11.使用文本标记效应
Andy Rutledge的网站就用了文本标记效应。Andy用一段长长的文字作为标题，有时一个吸引人的设计运用三种颜色就足够了。
Mostardesign网站上也使用了相似的技术，整个设计都是建立在背景图片和醒目的文本上的。
Eoghan Mccabe的悬停效果着实让访问者大吃一惊，没有悬停状态文本的网页看上去真的很乏味，最重要的是用绿色标记突出重点，字体索性就大点。
12.用你的网站做试验
Shaun Inman 使用色彩和饱和度来说明网站内容的新旧状态（或相关重要性），我们每天都离不开色彩，冬天是蓝色的，而到了春天就变成了绿色，夏天褪成黄色，秋天就转换成了桔红色，随着时间的流逝，色彩也渐渐暗淡。
在AListApart.com网站上每个内容都有自己独特的色彩设计，“图片：圣诞节用红色和绿色，Jakob Nielsen写给我们的文章都用蓝色下划线标出来。”
13.让用户自己浏览网页
Rinzen 网站为访问者精心设计了一个主页，主页上的导航栏由许多种有色像素组成，其中每个像素都指向了一个特定的位置，页面最上方的工具提示显示了像素的链接位置。
Mstudio网站上也有这么一个导航栏，以三维平板纸的样式展现在大家面前。
Catalogtree 网站设计出了一种最不可思议的导航菜单，字母(请在这里输入)左边有个小动物让用户输入码符号和数字，一旦返回键确认了输入的内容，新的页面也就随之导入了。
使用这个网站很不习惯，在浏览器中却很少出现问题，无法使用这种导航栏的用户可以使用索引链接，页面上所有的内容一目了然。虽然在操作上还存在问题，但让用户输入他们想要访问的页面的想法很值得称赞。
Post Typography的首页是个溅射屏幕，告诉你这个网站是关于哪个方面的。
里面的页面看上去像一个个按键的集合，但实际上它们确实是链接。
乍一看KEEN并没有觉得有哪些不同，然而网站除了用滑动数据块代替传统的导航栏外，所有的信息都在一张网页上出现，无须一次次的刷新。
14.保守行动，注重细节
The Tangerine Tree网站虽小，但却注意到了各个微小的细节，但有些地方好像做的太过了点。
15.使用非常规解决方案
导航菜单应该放在哪里？左边还是右边？上面还是下面？对了，为什么不放在页面正中呢？ Nonstep就把导航菜单放在了一个固定位置，从不更换，即使页面在滚动，导航菜单的位置也变。导航菜单很简单，点击上面的链接，内容马上出现在你所指的位置，背景颜色也随之改变。
随你信不信，但这确实是个 weblog。不但页面看上去像Windows的记事本，功能也像。导航菜单作为下拉菜单出现在窗口的顶部。