Style, Type, Tools and Trends: The Future of Digital Design

Digital Design

<img alt=”” src=“https://digitalskillsglobal.com/uploads/general/alan-dargan-website-blog.jpg” style=“float:right” />Blog post by Alan Dargan, Digital Design Curriculum Lead on the <a href=”/bsc-honours/”>BSc (Honours) Degree in Digital Technology, Design and Innovation</a> and <a href=“https://digitalskillsglobal.com/international-bsc-degree/”> BSc Degree in Digital Technology and Design</a>.

<h2>Style</h2>

First up, it’s important to say that slavishly following trends will result in a design with a short shelf life; how much you want to pay attention to and use trends may depend on how long the design is going to be around. If you’re looking to design an identity which needs to endure longer than a year or two then it’s wise to think further than what’s current.

In terms of graphic design styles, retro, while still in, has shifted from the late 19th century / early 20th century ‘handcrafted’ look (a reaction to the industrial age echoed in our own anxieties about technology ) to an <a href=“http://designspiration.net/search/saves/?q=80s” target=“_blank”>80’s po-mo style</a> with heavy use of geometric and polygonal shapes and a brighter, <a href=“http://www.pantone.com/pages/fcr/?season=spring&year=2016&pid=11” target=“_blank”>vivid colour palette</a> departing from the more muted pastels we’ve seen in the last few years.

We’ve seen those decorative polygons used as background effects as well as the use of the low-poly effect, essentially a mesh of polygons used in 3D rendering software. It’s a cool looking effect that takes a good bit of work to do (until someone comes up with a filter that does a good job quickly after which it will be everywhere and we’ll all get sick of it).

Web typography has exploded in the last few years and there’s a general understanding and appreciation of type that was unthinkable just a few short years ago. Most people will be able tell you the difference between a serif and sans serif  and even make a Comic Sans joke. That  awareness translates into higher expectations from the readers/viewers/users who will use the products we are designing.

Because screen resolution has improved so much and because of whatever is in the air are seeing more use of<a href=“http://www.webopedia.com/TERM/S/serif.html”> serif</a> fonts. For years it was considered that <a href=“http://www.webopedia.com/TERM/S/sans_serif.html” target=“_blank”>sans serifs</a> were easier to read on screen and possibly because old, CRT screens that were so poor in quality that there was some truth in this but now serifs are enjoying a renaissance not because screens are better but because of the personality that extra ornamentation exudes.

What’s interesting too is a growing tide of type customisation tools allowing designers to customise strokes and serifs to suit their needs and taste. Adobe’s Project Faces and <a href=“https://www.prototypo.io/” target=“_blank”>Prototypo </a>look set to make typographers of us all however competent we’ll be is another story.

The fact that terms like Flat Design and skeuomorphism are commonly known now just goes to show how engaged the public are with design parlance. ‘Flat’ really came to prominence around 2011 with Microsoft’s ‘Metro’ style for Windows 8. It took its cue from the Swiss Style of the 1950’s which based itself around precision and simplicity and removing unnecessary, decorative design elements.

In terms of interface design ‘Flat’ design’s purpose was to remove the superfluous features like shadows, reflections and textures which often overwhelmed an interface.

Apple’s iOS 7 was a necessary aesthetic overhaul which dispensed with effects that were applied in the first place to help users navigate the novelty of, up to then, unfamiliar multi-touch interfaces. So gone were the fake notepad and stitching effects making way for a more austere, no nonsense aesthetic that placed the functionality up front.

This Year Zero approach, was necessary but as interfaces become increasingly complex does the Flat look give the user enough obvious cues to guide them through using an interface?

Usability experts, the<a href=“https://www.nngroup.com/articles/flat-design/” target=“_blank”> Nielsen Norman Group</a>, criticise Flat as being confusing for end users<a href=“https://www.google.com/design/spec/material-design/introduction.html” target=“_blank”>. Google’s Material Design</a>, on the other hand (what they term Flat 2.0) does an excellent job at balancing usability and ‘flat’ aesthetics. Google are all over Apple in terms of design these days and with Material Design have codified their design language with a system that while prescriptive is accessible to designers and non-designers alike.

<h2>Atomic Design</h2>

As static print design metaphors become increasingly less relevant to responsive workflows so comes a shift towards more modular design. This enables the creation of larger design projects from smaller components.

Brad Frost’s  <a href=“http://bradfrost.com/blog/post/atomic-web-design” target=“_blank”>‘Atomic Design’</a> is just one of these design systems where small elements  construct larger components ensuring an an entire system built with consistency - from individual ‘atoms’ and molecules, to templates, and onto pages.

<h2>Microinteractions</h2>

According to Dan Saffer  – the small details are the difference between a product you tolerate and one you love. He should know; <a href=“http://microinteractions.com/about-the-book/” target=“_blank”>he wrote a book about it</a>. Microinteractions are when designers sweat the small stuff. Remember your first iPhone? When you were listening to music and a call came in? Rather than the call abruptly stopping the music the music faded out quickly and then the the phone rang. This is a good example of a microinteraction – the rules around a phone call interrupting your music listening were considered and put in place. It makes the shift in context pleasant rather than aggravating.

Take the Nest thermostat – the screen is off most of the time (presumably to increase its life) and only fades up when you approach it – I don’t necessarily have to hit a button to view the temperature in the room; it just displays when I need it to. These subtle interactions delight and inform the sentiment of the overall user experience.

That said there is a balance between delight and gimmicky. The challenge is to find the balance between what’s pleasant the first time and what can get in the way the 10th or 100th time.

<h2>Animation</h2>

We’re also going to see an increase in the explosion of web animation. After Flash we saw a decline in the amount of animation on the web as no single tool seems to have taken its place despite worthy contenders like <a href=“http://tumult.com/hype/” target=“_blank”>Hype</a> and <a href=“https://www.google.com/webdesigner/” target=“_blank”>Google’s free Web Designer.</a>

I would say that the time is ripe for one application to become the go to animation tool for those who don’t like the idea of keyframing in CSS.  That said, hopefully we won’t see a wholesale return to interminable preloaders and pointless animations which annoyed so many during the Flash era.

<h2>Tools</h2>

Talking about tools it’s interesting to see how much of an inroad<a href=“https://www.sketchapp.com/” target=“_blank”> Sketch</a> is making in UI design and how s<a href=“http://tools.subtraction.com/” target=“_blank”>ignificant a market share</a> it is stealing from Adobe. There are a generation of designers who may never consider using Photoshop or Illustrator and that must be a worry for some at the San Jose software giant.

How can we become better designers?

I would say it’s important to look around. One of the downsides of being a designer is that it’s difficult to switch off and not be constantly aware of design in your environment. I’ve heard the same from video editors who watch movies constantly thinking about cuts and shot choices. It’s good – it means that you’re visually aware in a way that maybe you weren’t equipped to be before; it also means that you’re constantly analysing and learning but it can also make you tedious company for others who may not care as much or at all about this stuff.

It’s important to consider the components of why you think a design works or doesn’t – is it the colour choices or the typefaces combinations or could it be the layout? This is better than just liking it because it’s pretty or it’s cool or hating it because you ‘it just does!’.

‘Intuitive’ is one of those misleading terms that hides multitudes. Try to dig into why something works well.  For something to feel ‘intuitive’ a lot of thought has gone into it every detail. Try to ask yourself why does it feel intuitive? What does it do well?

We get our participants to write rationale documents when submitting design work. This helps them articulate design decisions rather than putting it down to gut or taste. Even if it started with that it’s important to be able to explain why you came to those decisions and why they work in this context because often “I think it just works” may not be enough when you are trying to make the case for your design decisions.

Don’t just read design blogs. Try to have interests, read about more than just design, look at the wider world, and see what’s happening beyond your screen.

Interesting people to follow via their blogs and Twitter

<ul>
 <li><a href=“http://www.lukew.com/” target=“_blank”>Luke Wroblewski</a></li>
 <li><a href=“https://blog.intercom.io/how-we-design-at-intercom/” target=“_blank”>Intercom Design</a></li>
 <li><a href=“https://www.nngroup.com/” target=“_blank”>Nielsen Norman Group</a></li>
 <li><a href=“http://www.usertesting.com/blog/” target=“_blank”>User Testing</a></li>
 <li><a href=“http://bradfrost.com/blog/post/atomic-web-design” target=“_blank”>Brad Frost, atomic design</a></li>
</ul>

Events / conferences

<ul>
 <li><a href=“http://www.iloveoffset.com/” target=“_blank”>Offset 2016</a></li>
 <li><a href=“http://interaction16.ixda.org/” target=“_blank”>Interaction 16</a></li>
 <li><a href=“http://aneventapart.com/event/nashville-2016” target=“_blank”>An Event Apart 2016: Nashville</a></li>
</ul>

Blog post by Alan Dargan, Digital Design Curriculum Lead on the <a href=”/bsc-honours/”> BSc (Honours) Degree in Digital Technology, Design and Innovation</a> and<a href=“https://digitalskillsglobal.com/international-bsc-degree/”> BSc Degree in Digital Technology and Design</a>.

More Information