来源:优设 作者:网秦UEC
这个网站紧密的网格布局非常适合展示作品集。将鼠标悬停在任意一副作品上即可显示标题,单击作品即可显示有关该作品的“首页”。这个页面中会提供有关作品的各种相关信息,例如日期、客户、设计师职责等,所有作品均依此方式布置。如果要深入查看作品,则需要点击翻阅屏幕上所显示的幻灯片。个人认为这是展示作品的一个非常有效的方式。
Norwich University of the Arts
具有冲击力的照片和美轮美奂的图片充分展示了这所高校的艺术特质。主页的背景图片展开了一个生动有趣的故事,可以吸引用户。其导航栏放到侧面的布局很不错,与众不同而且完全有效,同时也不会抢图片和布局的风头。网站所有标签均为黄色,能够形成贯穿始终的一致化视觉特色。点击任意内容分类后,下拉菜单将吸引人的注意力,同时与布局相得益彰。
其Logo采用了整洁的Helvetica字体,也让我眼前一亮。Logo设计没有压迫感,但其中“N”的倾斜却带来了一丝果敢的韵味。虽然其巨大的背景图片会给我们奠定下第一印象,但随后显示的箭头会指引我们滚动鼠标浏览不同的故事,每个故事均采用了带有标题的大缩略图。页面的其他部分还是比较传统的。
Adam Hartwig
这个网站的有趣之处在于它似有似无的布局。网站使用类似于Flash的动画文字打造,动画效果会在整个网站内持续自动播放。即便不点击查看各个不同内容分类,用户也能通过动画幻灯片了解到设计师的作品情况。其动画效果贯穿始终,同时展示效果也很可爱,充分表现出了设计师极具创意的个性。
Contad
这个网站的所有内容:CSS、HTML、JavaScript和SVG都会随着鼠标滚动展示动画效果。简直太疯狂了!其明亮的颜色极具刺激性,设计中也融合了错综复杂的图示。但其缺点在于网站是专门为带有鼠标的台式机开发的,所以只支持Chrome浏览器。
National Academy Museum
这个布局比较有层次感,表现出了模块化的风格。页面上不同的元素看似彼此重叠,例如,导航栏几乎占到了整个页面的四分之三。照片放置于导航栏下方,各个按钮和标题均使用彩色方块表现,更能增添模块化的层叠美感。另外,我比较喜欢导航栏中下拉菜单的投射阴影效果,其具有一种很有趣味的深度。
Andrew McCarthy
Andrew McCarthy的作品集采用了独具一格的布局方式。页面上充斥着彩色的条带,有关设计师的详细信息则需要向下滚动鼠标查看。滚动鼠标时,会有一个像素化的猫形定格动画随之运动。这一简单的创意所带来的动感让我大爱不已。另外,这个网站也需要依仗用户的交互操作。
Mikael Edwards
动画效果如果使用巧妙,则能给网站的功能带来大大的贡献。Mikael Edwards在这个网站上使用了既具有视觉吸引力也承载了网站功能的动画。我们毕竟是在给Web端做设计嘛。所以没有必要把所有东西都挤到页面中或在所有图片旁边都环绕文字。那么加入一些互动的动画效果增添趣味又何妨呢?这个想法在这个网站的悬停特效上得到了充分体现。蓝色的点代表了光标,随着鼠标的移动,图像会变形并将空间腾给文字。
Designer’s Friend
跟你脑子里想的设计师网站有点不一样是吧。Designer’s Friend看起来更像是网站背后的HTML代码。你所需知道的所有内容都含在代码里,标签则是标题。其中“Tip of the Day”这个方框的设置非常巧妙,其能够引导用户浏览整个网站。
Hatched
Hatched 的布局之精髓在于横跨整个屏幕的导航栏和各个部分,这一布局既大胆又开放。其响应式的导航栏非常有趣。如果在小屏幕上,看起来就会有点笨拙,但如果在这里,其导航栏(包括社交网络按钮)仅占了一个菜单按钮的空间。
Institute for Emerging Issues
这个网站采用了一致化的过渡效果,页面加载时会有小圆圈弹出。网站结构很好,小圆圈的友好很大程度抵消了下方冰冷的统计数据。“Challenges”部分的标题看起来很像对话气泡,更添友好气氛。标题上的悬停效果既有视觉吸引力,也不失功能性。统计数据中的数字只有在划过鼠标时才显示,因此不会让用户觉得太过枯燥。
Into The Arctic
Into the Arctic的布局一方面能够吸引用户,另一方面还能鼓励他们进行交互。背景中的视频能够吸引用户的注意力同时展示网站的业务。导航栏的风格与众不同——鼠标滑过时,将展开显示更多信息,有点类似折叠的小册子。文字效果也很诱人,另外醒目引文也比较强势。整个网站设计在执行上做的确实非常的好。
John Jacob
这个作品集网站采用了水平滚动的方式,非常少见。点击查看任一作品时,其会展开放置到屏幕中央,并显示为大图,并配有简短的介绍说明。说明和作品清单都简短扼要,不会让你觉得一直在不同的页面之间翻来翻去。我很喜欢它的导航栏,所有元素都堆在左上角,设计师的社交网络链接放在右下角,形成了对整个页面的包裹。设计师对空间的运用非常到位,另外变形效果也很有意思。
Impress
这个网站的空白区让人觉得神清气爽,能够带来开放和友好的感觉。空白区能够让用户舒服地进行阅读和导航,同时也能更加高效地使用网站内容。其悬停特效比较特殊,类似于半张白纸折叠起来的样子。用鼠标点击后,按钮会像书本一样闭拢以显示更多信息。
Postable
Postable 的理念非常可爱;其会通过邮件给用户发送设计精良的感谢卡,另一方面网站的设计外观类似于邮政邮递的感觉。网站的整体设计和布局在传达网站理念方面扮演了至关重要的角色。网站背景采用了纸张材质,顶部边缘类似老式的信封。将真实生活中的感觉放到Web上能够带来非常令人舒适的韵味,就好像你真的在笔记本上书写一般。
Lucas Nikitczuk
我个人非常喜欢Lucas Nikitczuk作品集的布局,原因就在于其表现出了Lucas的水平。网站开门见山,主页是设计师的简短自传以及作品。圆圈图形带来了友好和流程的美感。背景上泼溅的油漆奠定了网站的开放和自由特色。导航栏简单好用,在整个网站内保持一致。另一个值得称道的地方是,用户可以使用方向键进行导航,这一点对于笔记本用户来说非常方便。
最后
布局是一个网站的基石,同时也是创意工作的重要组成部分。我们应当多多考虑用户的情况以及他们与网站进行交互的情况。他们是只使用移动设备访问你的网站吗?这一点又对布局有何影响?我希望我所搜集到的这些信息能够激发你自己的布局设计灵感。