How to Refresh the First Screen of Homepage #首屏设计

I have been working on improving the user experience of our desktop website, basically fixing the problems assembled by the Content Operation Team. The biggest problem of the current first screen is low density of infomation. It displays a pretty but nonsensial background image. The first screen is a critical interface that tell the users their most desirable information. My design alternatives are discussed below.


The first screen has two key elements: the carousel and the two buttons.#首屏有两个视觉焦点:轮播的banner和两个入口

Carousels, image rotators, sliders, featured content modules, whatever you want to call them — they’re everywhere on the web.

The carousel is indispensable out of the business consideration. News, events, new competition notifications will be shown here as sliders. However, the action of sliding left is quite eye-catching so if not well arranged, the another element would be ignored or weakened.#加上轮播主要是出于运营方面的考虑。但是轮播的动效非常抢眼,往往会弱化另一个重点。

The two buttons, Create a Designer Account and Host a Competition, represents the essence of our product. It has to be highlighted because when I visited the current official website, it really confused me that I thought this company was a design agency. #两个入口,分别叫做“设计师入驻”和“举办设计竞赛”,对于说明这个网站是做什么的非常重要。

To conclude, it’s tricky to decide the visual hierachy of the two elements. Apple is doing an outstanding job in regard to this issue. #因此,首屏设计的难点是安排视觉层级。Apple的首页首屏在这一方面做的十分出色,轮播起到了展示新产品的作用,同时屏幕下方的四个入口很好地转化了流量。

There’s a UX research paper supporting my idea. It also explains why some websites have statics displaying areas besides the carousel.#理论支持

Most users won’t see all the slides in a homepage carousel. This means the sequence of the slides in the carousel is incredibly important as the initial slides will get vastly more exposure than later ones. Another crucial implication is that one can’t assume that users will see any particular slide.

According to the Rudolph Arnheim’s structural net, it’s better to locate the buttons beneath the carousel because people naturely focus on the area below the axis.



First Screen A
First Screen B

The difference between the two plans is the navigation bar. Inspired by Airbnb, some very important entrances can be located in the nav bar which is fixed to the browser. And my mentor came up with a great idea that the nav bar can be changed from A to B when the website is scrolled down.#B和A的区别是品牌和入口放在了导航栏内(受airbnb启发),然后小伙伴就提出可以在A的基础上下翻至第一屏结束后导航变成B的样式,这样重要的元素在整个体验中都会保留。

The Nav of Airbnb

The first edition ( which was not approved)