View
2
Download
0
Category
Preview:
Citation preview
Interactions Are Micro
The Internet of Things
Material Is the New Flat Responsive Takes Over
Hero Images Getting Bigger
Video in the Background
SVGs and the Vector World
LATEST TRENDS
2/26/2015 6
Responsive, Responsive, Responsive, and Adaptive
Responsive Takes Over
Adaptive and responsive design are both
approaches to optimize content across different
devices and resolutions.
• Responsive stands out due to the fluid nature and
consistent content across all viewports.
• Adaptive detects devices or sizes and provides
appropriate content and layout.
http://blog.froont.com/9-basic-principles-of-responsive-web-design/
2/26/2015 7
Why Is Responsive Winning? Responsive Takes Over
Responsive is overtaking other approaches thanks to it’s flexible nature.
Separate Mobile Site:
• These were an easy approach when there was just the iPhone to consider.
• Mobile sites are extremely difficult to maintain support for all devices or screen sizes.
• Separate mobile sites often means needing two instances of content.
Adaptive Design:
• This approach is sometimes associated with different content depending on screen size as well.
• Adaptive Design focuses on certain sizes or devices which doesn’t “future-proof” a site.
2/26/2015 8
Let’s See The Differences Responsive Takes Over
Sometimes it’s easiest to just to see them in action:
Separate Mobile Site:
• http://www.amazon.com, http://m.packers.com/
Responsive Design:
• http://www.microsoft.com/, http://www.roccommerce.com
Adaptive Design:
• http://www.screamingfrog.co.uk/
2/26/2015 9
Notes to Keep in Mind Responsive Takes Over
The mobile world isn’t something you can disregard anymore. But even with its
expansive presence, here are some things to be aware of.
“Mobile” devices are outnumbering PCs but most users own both:
• A “mobile up” mentality is good to have because if it works in small screens it will work in large.
• Page loads are more important than ever with people viewing on the go. However, any increase in
speed for mobile will help your desktop user experience as well.
App usage still dominates “mobile” users’ time:
• Super users of sites enjoy a catered experience that apps provide
2/26/2015 11
Hero Image Use Continues to Grow Hero Images Just Got Bigger
With responsive there is a lot of focus on the small screen but it also extends as
large as you want to go. With the most common screen size at 1366x768 hero
imagery is getting larger.
• Though file sizes of one large image can be high, having only one request can sometimes take less
time than multiple slideshow images.
• Split half/half imagery is popular now since there is so much screen size available
• Scrolling isn’t a hassle to the end user if the experience of scrolling is enjoyable.
• Parallax has matured and storytelling single page sites are more popular than ever.
2/26/2015 12
The Increased Size of Hero Images Hero Images Just Got Bigger
Let’s review some examples of the various uses
and styles of hero images.
Storytelling / Parallax / Split Imagery:
• http://www.namcoentertainment.com
• http://www.soletrader.co.uk/
• http://www.worldbook.com/
2/26/2015 14
Movement Is in and Everywhere Animations Everywhere
With IE8, 9, and 10 no longer being supported by 2016 and Microsoft cutting XP
support, older browsers are being phased out…
Older browsers dwindling further and further means modern HTML5 tools can flourish more and more.
• Video tag support currently needs Flash based fallbacks for older browser like IE8
• Canvas can be used to act like Flash without needing to make the same thing for IE8
CSS3 support in all modern browsers allows us to break out of the world of static:
• CSS3 animations and transforms were once a progressive enhancement but soon will be normal.
• If you are wanting to spruce up a site you might start with these CSS options
2/26/2015 15
Video Isn’t out of the Woods Yet Trends That Keep On Trending
We can now use video with ease and the world is awesome!
Well… not quite.
The mobile world throws a major wrench in the end experience of video as design
• Devices won’t autoplay any video and you can probably guess why: data.
• Video has a placeholder image option but not all devices show the content in the same way
• Many devices don’t play videos inline but instead take you to the native video player
2/26/2015 16
Alternatives to the Rescue Trends That Keep On Trending
All of our hopes you just brought up were immediately crushed in the last slide.
Well… not quite.
GIFs are old but are actually getting a bit of a revival:
• GIF format allows for animation like video but is supported by all browsers and devices
• Cinemagraphs have been gaining popularity at some cost of page load depending on size
Video is really just many images playing in a sequence and Javascript alternatives can help:
• For short animations we can utilize Javascript to create a faux video by switching images.
• The reason video doesn’t autoplay on mobile is the same reason you want to be careful here: data.
2/26/2015 17
Animations in Action Animations Everywhere
Videos are being used for more than just content:
• https://www.paypal.com/
GIFs and cinemagraphs can bring life to a page:
• http://www.pfisterfaucets.com/innovations/slate
• http://lowdi.com/
JS Animations are able to be shown on all devices:
• http://www.naccaphoto.com/
CSS3 Transforms and animations give a nice touch:
• http://www.chicagoautoshow.com
2/26/2015 19
Refresher on the World of Vector SVGs and the Vector World
With IE8 moving out of the picture SVG (scalable vector graphics) are supported
universally. In the world of responsive this is big news.
SVGs allow creative work to be brought into sites that normal images can’t:
• With HD and Retina going into more devices you don’t have to worry about pixilation since SVGs
are resolution independent.
• Infographics have accessible content without any extra work since all of the text, layouts, etc. are
built with the same language base as HTML. (No need for alt tags and image maps)
• Animations and interactions can be done using the same tools for websites now (CSS/Javascript)
2/26/2015 20
What the Vector World Looks Like SVGs and the Vector World
If you can make it in Adobe Illustrator it can
be an SVG. Infographics, icons, etc. can all
be exported and worked into a site.
Charts, information, statistics, and much
more can be shown in high resolution
across all devices regardless of pixel
density.
2/26/2015 22
Skeuomorphism Meets Flat Material is the New Flat
Flat UI can sometimes go too far at the cost of usability. Google released it’s own
design take on Flat and added a bit of skeuomorphism back in.
Shadows, layers, and paper like feel is in:
• Cards or box layouts have grown even more popular
• Shadows can be a really subtle way of distinguishing between layers of content
Menus are sliding in from everywhere:
• Drawers and side rail menus are more popular since mobile is overtaking the web
• Hamburger menu icons are commonly recognized now so even desktops can have hidden menus.
2/26/2015 23
Google is just the start Material is the New Flat
Going 100% flat had drawbacks so you will see
many sites incorporating a bit more into them. Early
on you’ll see it mostly for apps.
• Google Apps and Web Apps like Gmail
• http://super-demo.herokuapp.com/
• http://www.hacu.org/
2/26/2015 25
Microinteractions Interactions Are Micro
It’s a more recent buzz word and good core concept. It has also been around for a
long time.
Wait so what is it?
• The term was coined by Dan Saffer in 2013 and it applies to every product including websites.
• Microinteractions are moments that revolve around one main task or use case.
Okay, so what does that really mean?
• Think about specific tasks you do every day and focus on how the tools you use make it easier.
• Imagine what search was like on Google before autocomplete and suggestions.
2/26/2015 26
This is a trend? Interactions Are Micro
The trend is more on the awareness and dedication to making really good UX and
not just focusing on the big picture.
• Thanks to all of newer CSS, HTML, and Javascript tools available, many sites are starting to make
the process of using their sites enjoyable.
• The amount of websites out there is past the billion mark. The amount of apps available to users of
Android or iPhone are over a million.
• Many sites are adding in personality to make themselves stand out.
• AE Strategy team works with clients everyday to determine best experiences on the big and small
details.
2/26/2015 27
Easy to Use Sites With Personality Material is the New Flat
Some sites go through every aspect of their site
and make a beautiful end product, but you can
also start small and focus on one micro aspect
at a time.
• http://www.weathertech.com
• http://www.tripomatic.com/404
2/26/2015 29
Everything is Connected The Internet of Things
With connected devices going beyond just phones, stores, homes, and even your
fashion can talk with the web. The Internet of Things is here.
Like with most of these new trends, the core concept is a bit older.
• Kevin Ashton coined the phrase probably as far back as 1999 with introduction of RFID tags.
• The concept is boiled down to computers creating, reading, and sending information without human
interaction.
Is this a design trend or just a technology trend?
• More things are having potential interactivity with the web which means more to design for
• App development for all of these devices are growing to meet needs
2/26/2015 30
The Internet of Things The Internet of Things
Examples of interactions of devices that needed to be designed
and accounted for:
• iBeacon proximity usage such as at the Chicago Auto
Show
• Watches with syncing from phones/apps can get
notifications. How these notifications look need
designing. (Apple vs Google vs Samsung on approach)
• If you are getting data usage from iBeacon, watches, etc.
you might want to give users a visual representation on
related sites.
THANK YOU!
Q U E S T I O N S ?
C O N T AC T Y O U R AC C O U N T M AN A G E R O R E M AI L :
S T R AT E G Y I N F O @ A M E R I C AN E A G L E . C O M
# AE W E B F O R U M
Recommended