请选择 进入手机版 | 继续访问电脑版

产品设计

    今日:18| 主题:19117
收藏本版 (1)
软件产品、PC、移动、网站、平台的开发、策划等内容。

[其他] Essential design trends, December 2016

[复制链接]
电脑学堂 发表于 2016-11-29 01:26:50
254 3

立即注册CoLaBug.com会员,免费获得投稿人的专业资料,享用更多功能,玩转个人品牌!

您需要 登录 才可以下载或查看,没有帐号?立即注册

x

Essential design trends, December 2016

Essential design trends, December 2016-1-产品设计-experience,designers,something,elements,yourself

  Do you ever find yourself noticing that a certain design element just keeps popping up? Even those tiny details that look somewhat insignificant can be indicators of design trends. That is particularly true with the elements in this month’s roundup.
  Each of these trends—white edges framing a web design, cinemagraphs and tiny loading animations—are seemingly simple details that enhance the visual experience for users.
  Here’s what’s trending in design this month:
  1) White edges

  More web designs are using white edges or framing around the perimeter of the design in the web browser. It’s a new twist on an old idea when more websites were built to certain sizes and framing was used for odd browser widths.
  It’s something that faded as more designers opted for responsive, full-width designs.
  The new twist with framing is interesting and is a nice way to create a canvas for the design. Most of the sites using this trend include a white—common, but not mandatory—edge around the design. It’s a few pixels wide and is commonly placed around three or four sides of the design. (Some are opting to leave the frame off the bottom of the design to encourage scrolling.)
  The nice thing about the white edge is that the design is clean with white lines that can help bring focus to strong color choices, draw the eye from the edge of the screen to other light elements (such as text boxes or calls to action) and edging can help create a background canvas for parallax scrolling or other animated effects.
   Camden Town Brewery does this exceptionally well. The white framing fills in between elements of the design to create depth and focus for the user. White separation sets apart each new content section on the screen and contributes to overall organization of the design. (Plus, white accents really bring out the strong red and black color palette to keep the combination from feeling too overwhelming.)
   

Essential design trends, December 2016

Essential design trends, December 2016-2-产品设计-experience,designers,something,elements,yourself

   

Essential design trends, December 2016

Essential design trends, December 2016-3-产品设计-experience,designers,something,elements,yourself

   

Essential design trends, December 2016

Essential design trends, December 2016-4-产品设计-experience,designers,something,elements,yourself

  2) Cinemagraphs

  Cinemagraphs are photos with an element of motion in them. It can be anything from a photo of a person that blinks their eyes to the subtle cloud movement in the sky where nothing else moves. While the most common uses of the design trend still seem to be in advertisements and social media, web designers are beginning to incorporate this “live photo” technique as well.
  It works because users are intrigued by movement. It’s effective for many of the same reasons video is a good option to grab a user’s attention. Movement and action is engaging. It’s interesting. It feels real.
  When it comes to working with cinemagraphs, the bonus is that you can create a design with motion but without some of the high production that comes with a video project.
   The trick to making cinemagraphs work is to root the motion in reality. Even if the scene is more imagined, such as Monochrome Paris , the laws of physics should apply to movement on the screen. Water should flow downstream, for example, gravity should be a force in how movement occurs.
  The motion also needs to be simple and subtle. Too much movement, and a video might be a better option. What draws users into a cinemagraph is that element of surprise. What looks like a still photo in a hero image actually has something happening in it. That little divot will help draw people in, keep them engaged with the design longer and hopefully result in a website conversion.
   

Essential design trends, December 2016

Essential design trends, December 2016-5-产品设计-experience,designers,something,elements,yourself

   

Essential design trends, December 2016

Essential design trends, December 2016-6-产品设计-experience,designers,something,elements,yourself

   

Essential design trends, December 2016

Essential design trends, December 2016-7-产品设计-experience,designers,something,elements,yourself

  3) Tiny Loading Animations

  Load times are a big deal. But you can’t always account for the speed of the network a user is on; that’s where tiny loading animations can become a big deal.
  What’s different about the tiny loading animation trend is that it’s a sometimes you see it, sometimes you don’t design element. Either way the design team has taken special care to ensure that every user comes to the website with a positive experience.
  These tiny animations are identifiable by the fact that they aren’t really a part of the user experience that counts toward the overall website goal. They are a simple, small element that catches your attention for a quick second while the primary site design is served up.
  The cool thing about the trend is that these tiny loading animations really are tiny, from the size of the visual itself to the action on the screen, there’s not a lot to see, but what is there is absolutely delightful.
  Here are three great examples:
  
       
  • Hannah Purmort’s loading animation is a single moving stroke in the opposite color combination of the main screen. The stroke is carried through the design in the scroll effect as well.   
  • Susa Ventures features a small icon with a tiny load bar. This one grabs your attention because the tiny gorilla is visually interesting and makes you curious about the website’s content.   
  • FPG  uses a sketch that appears to be drawn on the screen as the rest of the homepage loads. The only cue that it’s actually a loading animation is that the rest of the screen is much more elaborate once loaded with running video and even more sketches. The effect is seamless and is over almost before the user realizes that it has started.  
   

Essential design trends, December 2016

Essential design trends, December 2016-8-产品设计-experience,designers,something,elements,yourself

   

Essential design trends, December 2016

Essential design trends, December 2016-9-产品设计-experience,designers,something,elements,yourself

   

Essential design trends, December 2016

Essential design trends, December 2016-10-产品设计-experience,designers,something,elements,yourself

  Conclusion

  Details are at the heart of every good design. It’s important to remember that designing (and accounting for) things that not every user will notice is important. That’s how each of these trends connect—through small design elements that aren’t an obvious part of the overall aesthetic.
  Those tiny elements might be the thing that really sets your website apart for a user. It might be the element of delight that brings someone back to your design. Details can be the differentiator between success and failure.
   What trends are you loving (or hating) right now? I’d love to see some of the websites that you are fascinated with. Drop me a link on Twitter ; I’d love to hear from you.



上一篇:6 Innovative Apps That Upped Their UX Game This November
下一篇:Designers react to the Just Eat rebrand
yy刷单兼职 发表于 2016-11-29 08:47:10
在哪里跌倒就在哪里躺下!
回复 支持 反对

使用道具 举报

风格迥异 发表于 2016-12-17 17:40:28
看帖要回,回帖才健康,在踩踩,楼主辛苦了!
回复 支持 反对

使用道具 举报

另一种晚安 发表于 2016-12-20 12:58:20
有钱,就是任性,没钱,认命!
回复 支持 反对

使用道具 举报

*滑动验证:
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

我要投稿

推荐阅读


回页顶回复上一篇下一篇回列表
手机版/CoLaBug.com ( 粤ICP备05003221号 | 文网文[2010]257号 )

© 2001-2017 Comsenz Inc. Design: Dean. DiscuzFans.

返回顶部 返回列表