文章翻译自Designmodo,作者:Nataly Birch。互联网创业家,业余网页设计师与构架师,来自克里米亚的塞瓦斯托波尔。爱好:读书、桌上游戏、排球。
Nataly BirchAs we wave goodbye to 2015, it’s a good time to look back on some of thegreat design this year has had to offer. Many of the trends of 2015 showed upin thebest website designs(and redesigns) out there. Also, you canreview the best website designs from 2014.
Are you ready to make New Year’s resolutions, welcoming the year andtaking a look back at the outgoing one that was quite rich in events? 2015blessed us with some predictable and unexpected, original and strange, ambitiousand not so long-playing trends.
There were trends that carved a quite niche for themselves such asresponsiveness, mobile-friendliness, animations; others that matured such asflat style or scrolling effects; a few that remained unchanged like hamburgermenu button or one-pages; and those that took the web by storm and quicklypassed like dynamic patterns. The year certainly supplied creative folks with afertile environment where one can easily go wild. Although it is challenging totrace every key moment, however, we can demonstrate the overall picture through a collection of ingenious and exclusive projects.
We are going to dive into the best web designs of 2015 that were highlyand justly rewarded by Designmodo team. Here’s what we have for you.
在我们向2015年挥手告别的时候,正好也是个很好的时间来回顾一下今年提出的一些很棒的设计。在这篇“最佳网页设计(和重新设计)”文章中,揭露了很多2015年的设计趋势。同时,你也可以回顾best website designs from 2014(2014年最佳网页设计)。
你准备好制定新年决定了吗?在迎接新年的同时回顾一下即将过去的异彩纷呈的事件了吗?2015年赐予了我们一些可预测的和意想不到的,原创的和奇特的事物,以及雄心勃勃的和不太长期的趋势。
2015年一些趋势创造出了一些市场机会,如:响应性、移动友好、动画。另一些像:扁平化、scrolling effects(滚动效应)已经日趋成熟。而少数如:汉堡菜单按钮或单页保持不变。而动态模式技术带给了网页storm和quickly passed平台。今年确实为有创造性的人提供了可以野蛮生长的肥沃土壤。尽管追踪每一个关键时刻是非常具有挑战性的,但是,我们可以通过一个精妙且独家的项目合集来展示全景图。
我们将要深入了解这些被Designmodo团队高度赞扬并公正评奖的2015年最棒的网页设计,下面是我们提供的内容。
Best Websites of 2015
BBQ Cultures proves that restaurant-relatedwebsites made a giant leap forward. It falls in line with current trends and pleasesvisitors with grand design and interactive features. Outstanding photos,engaging videos, fancy graphics and a slew of subtle non-static details – everytiny element makes it stand out from the crowd.
BBQ Cultures证明了餐馆相关的网页实现了一个巨大的飞跃。他凭借最新趋势开始上线,并通过宏观设计和交互特征来取悦访客。杰出的照片,引人入胜的视频,有趣的视觉图形和大量微妙的非静态细节,每一个细小的元素都让他脱颖而出。
BBQ CulturesIn Pieces is a top-notch dynamicexhibition. It was skillfully brought to life by intricate polygonal style witha sparkling of CSS and JavaScript. There are 30 species that are composed of 30pieces in an engaging and amusing way.
In Pieces是一个一流的动态展览。他通过一个很棒的CSS/JacaScript样式技术打造出复杂的多边形风格创造而出。他用一种吸引人且有趣的方式使30个小块构成了30种多边形图案。
In PiecesTrippeo demonstrates how to present anupcoming product using modern solutions. The project is still based on aclassic horizontal stripe layout, however, such factors as an interactive trip,scroll activated animations and motion do its job perfectly well, achieving apowerful impact.
Trippeo示范了怎样用modernsolutions呈现一款即将发行的产品。这个项目依然基于一个经典的水平条纹布局(a classic horizontal stripe layout),但是,像这样一个有很多影响因素的交互行为,滚动触发动画和手势都运行的很好,获得了极大的影响。
TrippeoBe More by Reebok opts for a long one-pagestructure that effectively dishes up all the information. It is a fusion ofimpressive scenes with grunge touch and powerful urban vibe and dynamic effectsthat results in an outstanding user experience.
Be More by Reebok选择了一个长单页结构有效的提供了所有的信息。这是一个有着蹩脚触摸的深刻场景、强大的城市氛围、动态响应的融合,他造就了一个杰出的用户体验。
Be More by ReebokThe DNA Project is an innovative musicexperiment that opens up a routine of the album-making process in unusual andhighly captivating fashion. Each song is broken into key points that coversounds, the story behind the track and people that were involved. The projectallows fans to get closer to the artist and his album.
The DNA Project是一个创新的音乐实验,打开了一个唱片制作流程常规中不寻常且高度迷人的时尚。每一首歌都分为包含声音、音轨背后的故事、涉及者的关键点。这个仙姑允许粉丝与艺术家和唱片亲密接触。
The DNA ProjectWith such a loud and promising slogan, thewebsite just could not help but to visually support the company’s credo. Theproject is constructed from the asymmetrical layout, multi-layered techniques,subtle motion, vivid backgrounds and little tricks. Enjoy the productive andsophisticated symbiosis.
有这么大的和有前途的标语,网站没办法不来直观地支持公司的信条。项目是由不对称的布局,多层技术,微妙的动作,生动的背景和小技巧构造而成。享受富有成效的和复杂的共生关系。
ACME ExperienceWeltrade is surrounded by an aura ofsophistication, excellence and mystery. Created by talented folks from Ukraine,this sumptuous website is driven by interactive features that take userexperience to the next level. Choose the type of a trader in Forex market andfind out what skills, characteristic traits and principles are applicable toit.
Weltrade被一个复杂的光环围绕,卓越而神秘。由乌克兰的天才们创作,这个华丽的网站由为了将用户体验提升到更高水准的交互元素驱动。在国际外汇交易市场上选择交易者类型来寻找什么技能、特征、原则是适用的。
WeltradeGeorg Jensen meets online audience with alive-action short film that puts them into a majestic atmosphere of the brand.You are welcome to view details of each scene and even save the desired itemsin the wishing list. This is an innovative way to present a new collection andfoist the goods.
Georg Jensen满足在线观众把真人短片放到一个品牌的庄严氛围中。你可以来观看每个场景的细节甚至将你想要的商品保存到愿望清单中。这是一个用来展示新收藏和使人们接受商品的创新方式。
Georg JensenTenslife is another e-store in ourcollection that fascinates with an unorthodox appearance, good use ofinteractive elements and exquisite aesthetics. It is marked by consistency instyle. The two-column layout embraces all the necessary information,demonstrates the product range and strengthens the general feeling with abeautiful photo on the right. There is a lot of stuff, but it is not messy noroverpowering.
Tenslife是另一个用非正统的外观、良好的交互元素和精致的美学吸引了我们把他加入收藏的电商。这些元素让它的风格具有一致性。两列布局包含所有必要的信息,展示了产品范围右边美丽的照片增强了总体美感。网站上有很多东西,但是它并不混乱或过剩。
TenslifeQuechua is famous for awesome lookbooksbased on a harmonious blend of static details, typography and dynamic elements.Spectacular natural scenes that accompany sections match the attitude andspirit of the brand as well as serve as great backgrounds. There are someplayful twists that grab users’ attention as well.
Quechua因基于令人称赞的基于和谐的静态细节,排版和动态元素的混合的版式而出名。壮观的自然场景伴随着匹配品牌态度和精神的部分,成为了很棒的背景图片。还有一些好玩的曲折也吸引了用户的注意力。
While websites with visual storytellingexperiences are not new, they are becoming more sophisticated. Ice and Sky is atypical representative that surprises with some enhancements. It shows a cleveruse of video, smooth transitions and stunning illustrations. The great thing isthat this educational and informative project saves its functionality acrossthe majority of popular devices.
网站使用视觉的方式讲故事已经不新颖,他们正变得更加复杂。Ice and Sky是一个典型代表以一些增强功能使人们惊讶。他展示了一个拥有平稳过渡和惊人插图的智能视频使用方式。最棒的事情是这种具有教育意义和信息化的项目的功能在大多数主流硬件设备上保存了下来。
Ice and SkyDogStudio is a multi-award winning studiowith a magnificent website. While it sticks to a classic time-proven way ofarranging content, there are details that add spice to the aesthetics. Startingfrom the use of a mask technique to exhibit portfolio pieces and ending withsmall animations that unobtrusively follow shifting between sections; the teamdefinitely knows how to get the most out of current solutions.
DogStudio是一个拥有华丽网站并获得了多项各种奖励的工作室。当它坚持使用被时间证明了的经典方式来安排内容时,它也在一些细节上加入了美学部分。通过使用一个掩模技术来展示组合项目开始并以一些悄悄在个部分之间跟着变化的小动画来结束。团队肯定知道如何充分利用当前的解决方案。
Namale has a lovely female appeal. It isskillfully centered around the collection of goods. An amazing lookbook is thedriving force that catches the eye, focuses users’ attention on products andsets the mood. This is a masterfully crafted online gallery with a soul andpassion.
Namale有个可爱的女性化吸引力。它巧妙的围绕着商品的收集。惊人的版式是吸引眼球的驱动力,把用户注意力吸引在产品上并设置气氛。这是用灵魂和激情创造的大师级在线画廊。
The website is aimed to support and promotean upcoming film. It is akin to a movie teaser, yet it is more advanced,sophisticated and enthralling. Scenes taken from the movie create theenvironment. Interactive details let users become an integral part of thestory. Sounds and music background reinforce the effect.
这个网站目的是用来支持和推广一部即将发行的电影。这有点像一个电影预告片,尽管它更加先进、精致、迷人。场景取自电影创造的环境。互动细节让用户成为故事的一部分。声音和背景音乐加强了效果。
Kingsman MovieBraastad relies on a grid structure thatputs everything in order and keeps users away from feeling confused. It has abeautiful UI with sleek components, formal typography, elegant details and astrong boxy vibe. Non-static features like smooth transitions and fancyfull-screen animations add a surprising depth of emotion and enhance userexperience.
Braastad基于一个把每件东西有序放置使用户远离困扰的网络结构。它的漂亮UI拥有井然有序的组件、正式的字体、优雅的细节和沉闷感强的氛围。非静态特性平滑过渡和花哨的全屏动画增加了惊人的情感深度,增强了用户体验。
BraastadKeep Portland Weird makes the most out of asplendidly illustrated environment that is charged with motion. The lattergives the website a dynamic look. While the project is intended to beinformative, there are playful notes that make it amusing and enthralling toexplore.
Keep Portland Weird充分利用了一个被控制运动的华丽插图环境。后者给了网站一个动态的视觉。当这个项目打算变得更加丰富时,有趣的日志文件会让探索变得有趣且迷人。
Keep Portland WeirdThe leading video platform celebrated itsjubilee with an excellent website. It invites users to take part in anintriguing, absorbing and fully interactive quiz that tests your pop-culture knowledge.There are small animations, dynamic tricks, fantastic illustrations and, ofcourse, outstanding videos.
这个领先的视频平台用完美的网站庆祝了自己的十周年年。它邀请用户参与一个有趣、吸引人并充满互动的测试来考验你的流行文化知识。
YouTube 10thAnniversaryThe project deserves the attention becauseof numerous factors. It is a fully interactive with pioneering elements and thespectacular photo-based environment. The navigation is fresh and cool. Thefeatured content is presented in a unique dynamic way.
这个项目因为很多因素值得关注。这是一个拥有开创性元素和基于壮观照片环境的充分互动。导航很新鲜炫酷,有特色的内容被一个独一无二的动态方式呈现。
Environment by SubaruThe website dedicated to multi-brand storeis an exceptional right from the beginning. It breaks away from the majority.It vividly tells a story about the company through a rich video full ofinteresting facts, and at the same time, offers more conservative users astandard structure with a content to explore. The drawback is that it worksonly on desktops; in the era of the explosive growth of mobile traffic this isa shot in the dark.
这个网站从致力于多品牌商店起步是非常正确的。它从多数中脱颖而出。它生动地讲了一个故事,关于:公司通过充满了有趣因素的一个丰富的视频,同时提供了更保守的用户一个内容探索的网页结构。缺点是它现在只能在桌面终端上运行,在这个手机流量爆炸式增长的时代,这是一个不好的尝试。
SilenzaSennheizer Reshaping Excellence
Sennheizer Reshaping Excellence goes for amind-blowing interactive experience. There is also a static version with asophisticated and exquisite design that is also worth your attention. Itbalances picturesque high-quality images and clean areas with productdescriptions.
Sennheizer Reshaping Excellence想到了一个让人大开眼界的交互体验。还有一个静态版本复杂和精致的设计,也值得你的注意。它平衡了别致的高质量图片和拥有产品描述的清洁区域。
Sennheizer Reshaping ExcellenceThis matchless website is a gallery ofvarious experiments that breathe with innovations and creative approaches. Itpushes boundaries and tests the limits of cutting-edge techniques.Nevertheless, much like the Silenza, it reveals what is hidden inside only fordesktop users with the latest versions of Chrome or Safari.
这个无与伦比的网站是个呼吸着创新与创意方法的多种实验的画廊。它推动了和测试了尖端技术的边界与限制。然而,就像Silenza一样,他只给拥有最新版本Chrome和Safari的桌面终端用户展示内容信息。
VoidSpecializing in building superfine interactive and unforgettable userexperiences, the agency has an online portfolio that is empowered withanimation patterns and subtle motion. This one-page website is includesambiguous yet eye-catching illustrations that single it out right away.
专门从事建设精细交互和印象深刻的用户体验,这个机构有一个允许使用动画模式和细小动作的在线作品集。这个单页的网站包含了模糊但是吸引眼球的插图使它脱颖而出。
LegWork StudioConclusion
Interactivity and animations are characteristic traits of website designsthat can be called the best. Developers go to the limit by performing boldexperiments with high-end techniques and pioneering solutions. Although not allof them can boast of full browser compatibility and support of all populardevices; however, they push the web forward, making it a better place.
交互性和动画效果是可以被称作最好的网站设计的特征。开发者用尖端的技术和开创性的解决方案来执行大胆的实验。尽管不是所有的都干自夸全浏览器支持和失陪所有主流设备,但是,他们推动了网站向前发展,为改变这个世界作出了贡献。
这篇文章展示了很多2015年优秀的网页设计作品,很明显,中国强调的那些网页设计前沿理念,在国外同样是前沿且吸引人的,比如:响应式开发、移动端开发、动效、单页……目前来说,经济基础决定上层建筑,欧美国家的人均收入和消费能力还是远远高于我国的,所以欧美的很多网站注重网页艺术上与技术上相结合的设计,我们的很多网站还依然以强调实用性为主,但是,随着我国互联网行业的成熟,我们也会越来越追求艺术审美、用户体验、交互动效……学习在先,拓宽视野,是互联网从业者终身学习的重点之一。
写在最后:感谢每一位读者,你们的阅读都会给我带来喜悦。如果喜欢,请麻烦大家点个赞或者分享一下,您的支持就是我持续分享的最大动力!
网友评论