网页设计参考 魅力十足的35个精选网站(上)
UI设计是要跟上潮流的,今天和大家一起欣赏一些国外的精美网站。在翻译和分析的过程中,发现如今 hero header 已经成了一个潮流,不仅如此,动效的大量利用也成了网页设计的一个重要表现手法。睁大你的双眼,让我们静静感受~
随着技术的发展,网页设计中以前很难实现的效果都成为了可能,设计风格也发生了日新月异的变化。注重用户体验的网站在不断增加,利用动效排版等新颖的元素,可以产生更具魅力的交互设计形式。
North 2
鲜艳的配色加上切换的主页横幅,给人以强烈的视觉冲击。
Adison Partners
采用两种颜色的霓虹系配色的网站,内容切换时使用的动效可以作为典型案例参考。
Radoor & Co.
Proud and Punch
中间使用的热带元素插画让人印象深刻,与各个商品包装相呼应的插画采用了如烟雾般消失的转场动效,很值得借鉴。
Pocket Mustang Ford
扫描一下页面中的二维码,就会唤醒一辆袖珍的3D赛车模型。
Fotonaut
鲜艳的黄色和粗体的非衬线字体之间产生了非常美妙的平衡感,小元素的设计也非常值得参考。
Big Youth
使用看起来很舒服的蓝色进行大面积的排版,充足的留白也是时下流行的设计样式。
Rainforest Foods
画面随着鼠标进行移动,侧边菜单的交互方式也采用了特别的动效。
Caava Design
圣迭戈一个设计工作室的作品,色彩和字体相得益彰,是一个引人注目的简洁类型网站。
Famigliacecchi
Hero header 采用动态背景配合衬线字体展示出了深色系网站的高级感。
Secondary Gree Project
Hero header 使用了 HTML5 的 Canvas,随着上下移动产生相应的动效交互。
Yatzer
排版错开了网格,达到了一种图片和文字的平衡。
Panerabread
A is for Albert
字母采用动效进行表现,配合清新的颜色,展现了一种可爱的气质。
A-Dam Underwear
网站采用了柔和的配色,打破网格并使一些元素重叠,随着鼠标的滚动增加了很多动效,并且使用了很多小装饰。
Phil Casabon
滑板 Phil Casabon 的官网,这个网站很巧妙地运用了模拟故障的效果。
Vermont
随着鼠标的滑动切换画面,动效和插图配合地十分巧妙。
Photoshopvip
译者:学UI网翻译社-M菌