AWIA LogoFacebookGoogle Plusicon-codingicon-computericon-designicon-drawicon-drupalicon-maintenanceicon-mapicon-wordpressLinked InTwitter

2017 is here and it's time to get out the crystal ball and predict what's coming up this year. This year will be more about evolution than revolution.

More mobile first design

Mobile first

Mobile is still growing strongly and presents some challenges to web designers. How do you make a site that works good on a mobile and on desktop?

The traditional approach has been to make the design in Photoshop and then turn that into the HTML, CSS & JS to make a website. Most Photoshop based designs start with a desktop version and then you scale it down for each design.

Mobile first design turns that around and starts for a small device and changes as the screen size scales up. This approach has been around for a number of years but has been steadily growing.

2017 will see mobile first overtake other forms of design.

More use of UI patterns

material design

UI patterns are hanve been around a while. Web pages are broken up into components that are repeated and reused. The cards used on Pinterest is a good example. Shopping sites also make good use of UI patterns. The product image is in the sampe place. The description and price each have their place.

Zurb's [Pattern Tap](Pattern Tap) is one example. Google's Material Design is another. I'm a fan of Thoughtbot's Refills library.

UI patterns help users make sense of large and complex websites. We nautually gravitate towards paterns.

More bespoke images

Dropbox example

There are many high quality stock photo libaries around with millions of images. Many sites look the similar because stock images are easy and cheap. There has been a trend away from stock images.

In a large sea of similarity, standing out from the crowd can be a good strategy.

Dropbox is a good example. They use images that have a hand drawn quality about them. When you see them, you see a "Dropbox personality".

Larger type

larger type

The standard base type size has grown over the last few years. At the start of the web, 12px and 14px were the common sizes. The web took its cues from print design. In the 1990's 640x480 was the most common screen size. Anything bigger than 14px just looked greedy.

Desktop screens are much bigger now and we also browse the web on mobile phones. Both of these have driven trends towards larger type.

Animations

Rocket

Animations can be great if used wisely. They appear everywhere. We use them in naviagation bar at the top. There is a very slight delay when mouse over or click a link.

Many of the animations I use are simple ease-in ease-out transformations. The idea is to mimic the outside world. Things don't just snap into place in real life. When you flick a switch, there is a slight delay while the contacts in the switch move. Web design is moving towards making the web experience closer to the real world.

Animations will be be used more and more to convey meaning.

More use of video

Video is everywhere these days but it is a notorious bandwidth hog. As bandwith becomes cheaper, video will rise.

More sites are taking advantage of using video for things like customer service. Videos are even making their way into background images.

More parallax

Parallax

Scrolling parallax has been slowly increasing on the web. I used it when I made the Melton District ANZACs site.

Parallax is a great way of enhancing a site but it does need to be done with subtlety. I hope it doesn't get over used like carousel sliders.

Categories

Posts

All posts