The Fitness Pioneers: 2015

This artist's gallery of amusing font portraits really puts the 'face' into typeface.

Comic Sans portrait — This witty gallery sums up font personalities perfectly.

Thanks to their stylised shapes and formats, fonts are loaded with character that affect how you read them. We've already seen students describing typefaces as people, but this collection takes personification to the next level.

Designed by art director Giovanni Isnenghi, TypeFaces Vol 1 is a personal project that rearranges familiar fonts into amazingly appropriate portraits.

From a gruff Garamond profile to the widely despised Comic Sans taking an arrow to the head, these pictures find creative ways to reinvent something as recognisable as typography.

Can we expect a Wingdings portrait in the future? Explore the images below and let us know what you'd like to see.

Garamound portrait — Grumpy Garamond becomes a sulky customer

Bodoni 72 portrait — Bodoni 72's elegant serifs become a glamorous lady

Look out for Myriad Pro's antisocial behaviour

Johnston Underground portrait — Johnston Underground takes a ride on the tube

Steven Trevathan on how solid exploration and an awareness of design patterns are key to creating a great single-page application.

So you're about to create your first Ember application. Ember is a framework for creating web applications, and you chose it because of its speed, modularity, extensibility, and how easy it makes managing your codebase as it grows. Your choice in technology is super-sound, but you don't know where to begin with the design.

That's OK. I can help. Knowing your audience, the products they use, and any experiences similar to what you're creating is the foundation to designing a successful product. That knowledge will hint at the design direction you want to go in.

In this tutorial, we are going to pretend we're redesigning a farm share delivery application called 'SproutPass' (forgive me for the awful name) for web and mobile web. The business stakeholders want the app to enable users to select and request delivery of farm produce, text the delivery driver, and monitor the environmental impact of their transaction.

Meet your users

We'll begin assessing the experience by doing as deep a dive into the mind of the user as possible.

Learn who the users are, what experiences they have in purchasing farm shares, and why they do it. Follow tangents and let the answers flow naturally. This can be challenging if you're not exactly the social type (I sure didn't use to be), but it's a step you can almost never go without – and it's best to do it in person if at all possible. You don't know what you don't know, and talking to real users will lead you to discover those things very quickly.

Let's say we interviewed five users and found that they shared some major characteristics:

Economically considerate
Often miss produce pick-ups
Care about their health and the planet
Care about local businesses and farms
Started using SproutPass because produce deliveries would keep them well stocked
Found the UX confusing and didn't know how environmentally efficient deliveries were

Once we've learned who our users are, we can start to consider how the product we're redesigning might fit into their daily lives. At DockYard, we like to create journey maps that describe in an abbreviated way what a particular user is experiencing over the course of their day. This helps us envision many possible touchpoints for our application.

Let's do this for a user named Margaret. In the journey map above, we can see that Margaret has a few points in time where she worries about produce: at breakfast when she looks inside her fridge, while she's eating her lunch, and once she has returned home, near delivery time.

Mental models

Once we've identified the places in Margaret's journey where our app can help the most, we can start building a mental model: her mental image of a designed object and how it may be interfaced with. We'll start by thinking about analogous experiences to the problems we're going to solve for Margaret.

Do this by being specific when identifying a likeness that the user will interpret your product by. 'Like a desktop application' is not a useful model. 'Like a chat program' is better, as it's a comparative use of the application, rather than how the technology responds. The key is to define ways the user will come to understand the application.

Let's say Margaret uses an app to monitor her running performance, gets lifts around town with Uber, and uses Facebook Messenger to communicate with friends and family. These are some anchors you can use to base her assessment of SproutPass.

So let's spin this on a description of SproutPass. What if we say: 'SproutPass is a marketplace, connecting local farmers with eco-friendly consumers'? That describes what is happening with the app, but it doesn't provide a foundation to design for. We want something that gives some indication of how the UI might appear, and what Margaret might more readily understand. Maybe 'SproutPass is like a dispatch management service for produce delivery'. That's way better. We can now start to picture what the UI might be.

From these mental models, we may be able to derive design patterns for the app. In the case of SproutPass, maybe that's the map and car paradigm from Uber for monitoring a shipment. Perhaps there is a history of shipments, their environmental impact as compared to driving and picking it up themselves, and screen similar to a text message or email for communicating last minute notes to your driver.

Design patterns in Ember

This design focuses only on the indicators necessary for Margaret’s delivery, with simple ways to access more information

Once we've done the appropriate research required to fully understand the landscape in which we'll be sculpting our application, we can move on to the design stage. Based on the user's context, we're able to identify some design patterns we may use as a general mould for our application.

Single-page web applications have their own technical challenges and we have design patterns for dealing with those as well. Let's look at some methods you can use to confront these challenges.

Be fast...

Use SVGs or sprites where possible, compress images, minimise style sheets and JavaScript, limit your font usage (doing so will often improve your design as well), and where possible aim to reduce the total number of requests you're making to the server. In most scenarios you want to allow users to receive a fully rendered application as fast as possible, even if their connection is slow.

... but seem even faster

The skeleton shows a basic ‘ghost’ of content that will replace it. This can be entirely CSS

Skeleton UIs are a way for us to create an experience that feels faster than it actually is. We do this by creating a bare-bones version of the content to come, which is displayed to the user while the actual content loads. Skeleton UIs can take different forms, but here we'll use basic shapes that represent the content to be loaded.

This works as a confirmation of progress. When Margaret taps to message the driver, instead of sitting on a blank page until content loads, she gets a sense that the system is working. The experience will feel like it is rolling out to her.

The skeleton has been replaced with actual content. Note there is more content than represented by the skeleton

The Ember skeleton add-on enables you to experiment with creating your own skeleton UI. In the README (partly represented below) it shows how you can display fast-loading temporary images in place of the final, slow-loading image. Please note that the library relies on addEventListener andremoveEventListener, which require IE9+.

First off, you need to install the add-on:

ember install ember-skeleton

Use the component in your templates:

{{skeleton-img src="/path/to/large/image.png"tmpSrc="/path/to/small/placeholder.png"}}

The workflow is as follows:

The tmpSrc image will be loaded first
Once complete, the src image will attempt to load
If the src completes, this will be displayed
If the src does not complete successfully, the tmpSrc will remain
If an optional errorSrc is provided, that image will be displayed if src doesn't complete successfully

For more on this, take a look at the GitHub repositoryaccompanying this article. Here, you'll find advice on setting defaults, styling, deferred rendering and more. You can also see a basic example in action, with a link to toggle deferred rendering here.

Be kind, rewind

There are scenarios in which Margaret may make an error. Let's pretend she accidentally cancelled a delivery she meant to schedule. Allow Margaret to use hot keys like 'cmd+Z' and/or provide a clear undo button for her to reverse her action. Absolute accident prevention is ideal, but impossible. In the cases where users can make an error, they will.

Prepare to be offline perpetually

Internet connection is something we take for granted, and often applications are designed under the expectation that a request always has a response. Our apps need to be aware of the connection state and respond to it. Beyond that, offline mode can provide an avenue for someone with very little access to the internet in general to pull the data down in one location (where they have internet) and continue to run that app elsewhere (where they don't).

Final Thoughts

You are unlikely to nail your concept on the first try. It's important that you can test your designs continuously to ensure you're providing an application that is spot on. I recommend doing several design sprints to rapidly explore and test possibilities before burning too much time developing your app.

Words: Steven Trevathan

Steven Trevathan is Partner and creative director at DockYard. This article was originally published in issue 269 ofnet magazine.

Here's a video to go with this tutorial:

If you're a design professional, you need to take a look at our amazing Computer Arts Pro package!

We are delighted to announce the launch of Computer Arts Pro, our brand new package for creative professionals offering monthly industry insight, trends, creative inspiration and much more.

Professional designers have turned to Computer Arts for 20 years so we’ve taken it one step further to give you the essential professional pack. Join Computer Arts Pro and as a special introductory offer, you can save £30!

Get the Pro Package worth £371

What's included?

13 issues of Computer Arts in print and digital
Annual Industry Report worth £100
Discounts to industry awards including the Brand Impact Awards
Inspirational design annual worth £9.99
Special discounts from selected design industry partners
Monthly CA Pro email newsletter

Join now and save £30! Find out more

How to get that all-important relaxation time without losing work.

There's a myth about freelance life that it largely comprises lounging around in your pants watching endless box sets. But working for yourself demands the stamina and discipline of a marathon runner.

What's more, while your PAYE counterparts can sit back knowing that a payslip will magically appear in their bank account every month, you've not only got to hustle for the work and then do the work, but you even have to fight to get paid for it too.

It's exhausting just thinking about it – and yet (unsurprisingly) taking a holiday as a freelancer remains a daunting prospect. But without a rest you risk burnout, and that's the quickest way to lose your clients.

Taking time out as a freelancer is essential. Here are five ways to take holiday as a freelancer without feeling guilty...

01. Turn off out of office

If you're able to check your work email once a day, consider leaving your out-of-office off. Sometimes clients are put off by a ping-back, and will immediately commission someone else rather than risk you turning it down. With no out-of-office, it gives you the opportunity to agree with the caveat of a later start date.

02. Redirect to agent

If you have an agent and they agree, redirect your emails via them, and ask them to text you if there is a major commission. That way you know you won't miss anything big but won't have to constantly check your mail.

03. Take some work away

Unpaid time-off is hard to do financially, especially if you're just starting your career. Unless it's going to cause massive issues with your nearest and dearest, take a small amount of work on holiday with you, and limit yourself to two hours in the morning and two at night. Check any work before you send it if sangria has been involved.

04. Get creative on holiday

Going somewhere unusual – or just breaking your daily cycle – can provide plenty of ideas for self-initiated projects and an excellent opportunity to gather reference material.

If you see your holiday as part of the creative process, it's easier to be guilt-free. Let your clients or art directors know, so that they can alter their schedules so you have time to work on amends before you leave.

05. Manage your online time

The camps are split between turning everything off (emails and social media) and staying online full-time; in the end, of course, it's totally up to you what will better help you relax.

One thing's for sure: you should only ever deal with things that are absolutely necessary, and leave all other minor things for when you return back from holiday.

Tom Moran, Gary Glozier and Sion Evans of TH_NK reveal their top takeaways from the past year.

2015 is nearly over, but what have we learned? For the creatives at digital transformation agency TH_NK the answer is quite a bit, actually – and they'd like to share their newfound knowledge with the community.

So in this article, they've gathered together their biggest takeaways of the year from senior experience designer Tom Moran (1-3), design director Gary Glozier (4-6) and lead front end developer Sion Evans (7-9). We'd love to know your thoughts on the issues they raise – please feel free to share them in the comments at the bottom.

01. The Internet of Things has arrived

As a concept, we've been aware of the 'internet-of-things' for a long time; an interconnected world of devices ranging from your car to your toaster. However, 2015 really felt like the arrival of the internet-of-things with a huge range of smart, interconnected devices arriving on the market.

An internet-of-things also saw the emergence of digital algorithms actually starting to interpret the Big Data being produced to give some incredible insights, such as Google Now.

There were also interesting developments in products and apps designed to harmonise and collate a world of disconnected devices; such as NinjaBlock that uses a central gesture-based interface to control your lights, heating or even pause your movie.

02. Adaptive design has become essential

This year saw a huge increase in screen sizes, ratios and resolutions that all require design consideration from the very beginning of the scoping process.

Adaptive design requires the UX designer to approach each screen as a fresh canvas, taking into consideration the various benefits and challenges it provides; from round watch faces like the Samsung Gear 2 to 4k televisions.

03. Wearables are here

Amid a flurry of controversy and mixed reviews, the launch of the Apple Watch finally kick-started the wearable market by providing a decent innovation platform of sensors and monitors wrapped in a desirable and fashionable product. The true power of the Apple Watch is in the app community behind it and what they can do with the range of capabilities the watch provides.

One of the interesting qualities of wearables is that they render themselves obsolete with success. Lumo Lift is a wearable device to improve posture by 'teaching' the user to sit correctly. As they learn and improve the need for the wearable decreases until they no longer need it at all.

In the future there may become a split in wearable devices, those that can be designed as apps for the consolidated devices and those that are produced at low cost and are inherently designed to be discarded with time.

04. The web's never looked better

The death of web design was a hot topic and not without good reason. Mobile and responsive design frameworks by their very nature filter out unnecessary user interface components.

The result is a drift towards generic, homogenized design patterns. Off-the-shelf packages have opened up web design and made it accessible. Beautiful, functional websites are no longer the preserve of the few and that's a good thing.

We eagerly await the arrival of The Grid and are keen to see how artificial intelligence shapes digital design. A website that learns, that can continually evolve its interface to improve usability is a compelling prospect.

05. Spotify personalisation is actually good and feels human

AI helped us discover new and exotic music in 2015. We enjoyed our trial of Apple Music but Beats Radio just wasn't our thing. We soon tuned back into Spotify thanks in no small part to Discover Weekly, a service that generates a personally tailored playlist based upon our listening habits.

Discover Weekly brought the studio back to Spotify

Using algorithms that seek out playlists that feature songs you've also added, then recommending other tracks from those playlists, Spotify has enriched our listening in a surprisingly successful way. By centering on a two-hour playlist, complete with personalised cover art, we're given enough variety without too many tune-out moments.

Found them first is an application from Spotify that allows music pioneers to boast about discovering new artists. There's also been talk of an application that matches music to your heartbeat or pulse via a smartphone or watch. In terms of designing new and exciting ways to engage their audience, Spotify has had a busy year.

06. Slack is helping us to collaborate

We share a great deal of creative stimuli in the agency. With teams split across both London and Newcastle we're keen to embrace any technologies that reduce our reliance on email as a communication channel. It's therefore no surprise that Slack has proven to be an unprecedented hit.

#Creative is just one of the thirty-five strong channels that emerged within days of being installed. Our channel has become rich in links to design innovation, opinion pieces and everyday discussion. We have a channel for each client and every part of the agency is sharing and discussing ideas. Our inboxes feel a lot lighter for it too.

07. CSS3 and Material Design have made the web more beautiful

With Microsoft announcing the end of IE8 support by the start of 2016, its new browser Edge to be built around web standards, and other modern browsers expanding capabilities quicker than ever before, it finally became viable to start utilizing the latest CSS3 modules and properties.

Media queries, now a must for responsive design, allowed developers to target breakpoints, orientation and device. CSS animations and transitions, new selectors, Webfonts and layout options all helped to reduce the previous strain on front end JavaScript.

The advancement of CSS also opened the door to new design principles: enter material design. Google announced its new design language back in 2014, and adoption of the UI design philosophy is already widespread, with a host of front end frameworks available, including Google's Polymer Project, Angular Material and Materialize to name a few.

Google's Polymer is built from the ground up for modern browsers

The idea behind Material is that the elements of design have structure, edges, shadows and depth, and use animation to give users meaning and visual clues about what, and how to interact with them.

By creating design elements that users can relate to, as they would in the physical world, ones that abide by the rules of physics, use natural light and shadow, exist in space, and in relation to one another, allows an instinctive user interaction and makes the primary objective of the application instantly understandable.

08. The front end build process is now mainstream

After a couple of years in the realm of the early adopter, 2015 saw everyone jump on the front end build process bandwagon. With the expanding popularity of NodeJS, front end development became as complex and interwoven as classic back end development.

Gone were the mundane tasks that drove developers to despair – file minification and concatenation, image compression, and HTML templating, now all run seamlessly in the background. You can now create build processes to do pretty much anything.

Even Microsoft integrated Grunt, Gulp, Bower and NPM into Visual Studio. Its back end alternatives MSBuild and Nuget, although useful for server side tasks, have little to offer front end in comparison to the huge libraries of plugins and packages from NPM and Bower.

09. JavaScript MV* frameworks have accelerated the development process

For the past few years jQuery has been the most important and impactful library in web development. But 2015 saw manual DOM manipulation declining, and with it jQuery. In its place has risen the likes of AngularJS, Backbone and Ember.

Instead of writing JavaScript to find, bind, extract data and modify elements, MV frameworks tends to use templating and extends HTML attributes to bind events and display data. So the only JavaScript written is to modify the state of modules.

The likes of AngularJS are eclipsing jQuery

MV* frameworks simply help structure your code. The MV part, Model and View are always likely to be included, and allow separation between data (Model) and UI (View). The star (*) part generally defines how you handle user input and interaction, and then updates the View.

There's a number of different patterns defined (MVC, MVVC, MVP), each with their own benefits, issues, and supporters. The use of MV* pattern has seen the rise of single page apps, with Gmail and Google Docs being a couple of the best examples. They download everything in a single payload, preventing the need for any further full-page rendering.

Words: Tom Moran (1-3), Gary Glozier (4-6) and Sion Evans (7-9)

Tom Moran, Gary Glozier and Sion Evans are, respectively, senior experience designer, design director and lead front end developer at digital transformation agency TH_NK.

The Fitness Pioneers