One of the most effective ways to learn about something is to get stuck in practically. That’s certainly the thinking behind How To Draw Type and Influence People, the latest book by Type Tasting founder Sarah Hyndman.
Published by Lawrence King, this fun and informative book encourages readers to experiment with typefaces to gain a greater understanding into how they affect our everyday lives.
10 new free fonts for 2017
Just think about it: typography is everywhere and it evokes an emotional response even before you’ve read the words. You’ve probably encountered a range of typefaces before you even landed on this article, and each one is designed to achieve a specific goal.
As part of her mission to make typography fun and engaging for everybody, Hyndman’s book is an accessible read that both general readers and seasoned graphic designers can enjoy.
Taking readers on a whistle-stop tour of typography terms, the book covers the basics of families, serifs, letterforms and more. You’ll even learn the difference between fonts and typefaces, so you’ll earn a place in the good books of your more pedantic design friends.
Backed up with a visual type glossary, the activity book is an invaluable resource for those who want to learn about typefaces and even create their own.
And getting creative is at the heart of How to Draw Type and Influence People. Each chapter is filled with exercises that invite you to pick up a pen or pencil and have a go at designing your own typeface. Throughout the course of the book, readers will have a go at creating typefaces to communicate a tone of voice, a sense of rebellion, and even a smell.
Running at 128 pages, this beautifully illustrated landscape book is almost too stylish to vandalise with your own haphazard scribblings. But if you want to get the most out of it, you’re going to have to take the plunge.
Topped off with a further reading list of useful books and websites (including the one you’re on now – blush), How to Draw Type and Influence People could well be the most fun way to take a step into the world of typography. If this sounds like the book for you, Hyndman is launching it tonight at the Tate Modern Terrace Bookshop from 6pm, or you can buy it here.
At Generate New York on 28 April, Pamela Pavliscak will give a talk, grounded in the latest research, that will look at current examples of emotion AI and present guidelines to design for emotional intelligence. Don’t miss it and get your ticket today!
The statistics say that there are more people who own smartphones than use a toothbrush, most people are using their tablets while watching TV, and many are showrooming while shopping in a store. A lot of what we know about people and their mobile devices comes from high-level data, but these stats tell us very little about what people actually do on mobile sites and apps.
Analytics capture behaviour, but stay on the surface. Surveys get at some of the feelings people take away from a site after using it. The only way to gain insights to make the experience better is by doing slow work of watching it unfold and asking the right questions.
Like a lot of consulting firms, Change Sciences leads research on mobile sites and apps all the time in the lab, online and in the wild. These studies tend to be small: usually about 20 people per study. We also run larger online studies that are observational at the core, and these studies tap about 100 people. To get more (and better) data about the mobile user’s experience, we have to aggregate. That is, we bring together all of the data from all of our mobile studies to look for patterns and trends. The data here represents 500 people.
Here are top 10 things we’ve learned about the mobile experience; bear them in mind if you want to know how to create an app that’ll get people’s attention.
01. People rely on mostly three gestures
People use three gestures for almost everything; they don’t want to spend a lot of time trying out new ways of interacting. They just use what works on other sites or apps.
Scroll: The most frequently used gesture is scrolling. 94 per cent of people use this gesture more than three times in a session of 10 minutes or longer. It is familiar from desktop use. And it is a gesture that is not closely tied to a visual cue, like tap or swipe.
Swipe: Swipe (77 per cent) is well used and understood. People will try it at the top of a screen, whether arrows are present or not. Further down, they are less likely to do it unless there is a visual cue.
Tap: Tap (72 per cent) is used often too, but people are not tap-happy. On desktop, we see people click and click trying to make a link or button go. On mobile, that is not the case. Tap is not equivalent to a click.
Pinch to zoom: People know how to pinch to zoom, but use it less frequently. Because people mostly need to zoom on mobile sites that aren’t responsive or mobile optimised, they will often look for a link to a bigger (mobile-optimised) version of the site. If it involves zooming in and moving the screen from left to right, people will try another way about 70 per cent of the time.
Omit needless gestures. Rely on the big three listed here, and make all other gestures secondary. Try animated cues, but keep them minimal because animation is often ignored.
02. People will go to great lengths to avoid typing
We hear a few complaints about fat fingers, and many more about how other apps make it easier, or how annoying it is that a company would require so much information. People don’t blame themselves; they blame the site or app.
Social login: Most people will try workarounds. While roughly half of the people who participate in our research say they don’t like – or want – to make use of social login for various reasons, close to 80 per cent will do it just to avoid the extra typing.
Cut and Paste: Very few people try to cut and paste: it is more awkward to do so than to type. Even when people try to, their success rate is low and frustration is high.
Portrait modes: People don’t make it easy on themselves when it comes to typing: 90 per cent don’t use landscape mode, making it just that much harder to type.
Strive for typing zero. Or, any shortcut is a good shortcut. Remember usernames and passwords, personal information like addresses or phone numbers, and previous interactions that required typing. Pre-filling with typical responses can help. Most importantly, really consider the necessity of each data entry field.
Mobile wallet is likely to succeed in no small part because it minimises typing. And people long for a day when they don’t have to remember so many passwords.
03. Icons are mostly confusing
Very few icons are crystal clear. There are simply too many for people to keep track of – and to make matters worse, they are not always used consistently from site to site, or app to app.
The clear: Among the best-understood icons are the triangle for play (92 per cent) and the X for close (90 per cent). Most people don’t have to think about these icons for two reasons: they see them on every site they use and they are used consistently to indicate only one thing. Even if placement or visual treatment varies slightly, people still understand it.
The unclear: Compare this with the search icon (80 per cent). Most people interpret the magnifying glass as search, but some are still not sure – depending on the context, it could also mean zoom. Other icons score even lower for clarity, however. Favourite (63 per cent) is indicated by a heart or star, but this could equally mean either Like or Save. Settings (57 per cent) and locate (35 per cent) are other icons that we’ve been tracking. These are not well understood because they don’t appear as frequently, are not used as often, and are not always used consistently across sites or apps.
The hamburger: The hamburger menu is still not well understood. When we tested sites or apps that used the hamburger a year ago, the reaction was something like: “I’ve been noticing that doodad on sites, but thought it might just be part of the design.” Over the past year we have seen hamburger awareness rising, but people may only stumble upon the menu accidentally or after using the site or app for a significant period of time.
Make sure you use icons in a way that’s consistent with other top sites and apps, especially ones familiar to your users. A/B test treatment, placement, and words that appear with icons. Track everything you test over time, because behaviours are bound to change.
04. People have an aversion to bottom navigation
This finding, at first glance, seems to run counter to the current best practice of putting navigation at the bottom for one-handed use. Whether people have an easier time using it with one hand or not, they don’t think to look at the bottom or, more often, just choose to ignore it. “I know that there are options on the bottom, but if I have to look there it is too late.” It is the navigation of last resort.
For now, essential options should be either on the main screen or in the navigation at the top of the page.
05. Sound is the unsung hero
78 per cent of people who participate in our in-person studies leave their ringer on and their sound turned up. It may be surprising that sounds elicit a lot of positive comments.
Confirmation: People like the closure they get when they hear a message being sent, or an action is finalised, like moving a file to a directory or money from one account to another.
Delight: People give apps one try, so a clever message or a fun sound can tip conversion. Part of the reason people like to pull to refresh is the resulting sound.
Sounds cues are a missed opportunity. Few sites or apps are using them effectively.
06. We’re not very good at multitasking
Of course, research shows that we don’t really multitask at all. We switch from one thing to the next. On mobile, this is even more pronounced.
Time out: People get distracted very easily, with notifications taking priority over all else: “If I leave to look at a notification, odds are I will never make it back.” Remembering may be overrated. More often than not, people just move on and don’t pick up where they left off.
Focus on making each screen a self-contained unit. Timing out after two to five minutes is a good rule of thumb and certainly something to test.
07. The lack of back
On desktop, people rely heavily on the back button. This behaviour carries over to mobile, but is not supported nearly as well. So people try workarounds to back up.
Home button: 78 per cent use the home button to start over in an app or on a site. People do it despite its futility.
Arrows: Only 45 per cent use the arrow at the bottom in the mobile web browser. This may be part of bottom navigation aversion.
People love the convenience of going back, rather than having to learn how to navigate a site or app. At minimum there has to be a way to go home. For now, the hamburger menu may not suffice. An arrow that is always visible, or a button at the top, are viable options to test.
08. Multi-screen is backwards
Mobile is still considered as the second screen, with bigger screens assumed to be people’s main focus. Our research shows that the opposite is true.
Mobile-first: In our research, attention is focused on the screen in the hand 60 per cent of the time and not the one further away, whether that’s desktop or TV. There are just a few exceptions to this; for instance, using mobile at work as a second, unrestricted screen.
Thinking of mobile as the foreground and not the background is a new way of seeing the experience. It makes a strong case for not stripping away content or features.
09. People appreciate a little magic
Clearly, people expect their phones to know everything about them – store all their personal information, know their location and recognise their voice. As a result of people focusing on the results, rather than the nuts and bolts of how their devices work, mobile can seem magical.
Camera: People are still surprised by things that seem impossible, like scanning a cheque using the phone’s camera. “How can this even work? I’ve got to tell my friends about this.”
Geolocation: Location awareness is another feature that often produces a feeling of wonder. It is a tricky balancing act to keep it from seeming a little too all-knowing though.
Accelerometer: Apps that track movement, or the lack of it, are losing their aura of magic. People are more focused on the data that results from use, and on comparing or sharing, than on how it was tracked.
That one unexpected surprise is what often converts. Apps can leverage more of a phone’s capabilities, but unexpected moments on a mobile site can convert, too.
10. People expect mobile to be better than desktop
“Mobile is better – less hype, less ads, less junk to get in the way.” Expectations for the mobile experience are high and defection is commonplace. Around 40 per cent of users will opt for a different website if the one they’re visiting is not mobile friendly, and 57 per cent won’t recommend a poorly designed mobile site.
Make the experience about that one special thing. This needn’t mean a pared-back experience, but a tightly focused one.
Mobile is not merely about more screens – mobile is a set of behaviours. And the patterns of those behaviours are constantly in motion.
The things people do today are not necessarily the same ones they will be doing next month or next year. The only way to really understand how people interact with mobile – and how they feel about it – is to continue to observe and track.
This article originally appeared in net magazine issue 255 (July 2014).
Pamela Pavliscak will discuss emotion-sensing technology and what it means for how we design at Generate New York next week. If you can’t make it to New York, there’s also a Generate in San Francisco on 9 June, featuring a talk by Huge’s Sophie Kleber, who will evaluate current examples of emotional computing, and introduce frameworks that can help us design for emotional intelligence.
This month our packaging pros delivered big time. From one-of-a-kind brews and blazing hot sauce to kinesiology tape and even a pilates ring, our design community created stand-out packaging and label designs for some seriously awesome products. Check out our top contenders and vote for your favorite below! 1. Barrel Aged “Self Deprecation” Strange Ale…
Rachel Nabors will give a talk about the web in motion at Generate San Francisco on 9 June, which will also feature presentation by Steve Souders, Stephanie Rewis, Aaron Gustafson, Josh Brewer and 9 other great speakers. Get your ticket today.
These days, we’re all used to seeing show-stopping animated and 3D movies. Technology has come a long way in recent decades, but, to this day, some parts of animation production remains unchanged.
Let’s go back to the first time anyone had attempted to create a feature-length animated film. The cosy team dynamics that worked so well for creating Mickey Mouse shorts would not scale for Snow White and the Seven Dwarfs. The Walt Disney Studios needed a way to coordinate many teams in order to tackle the massive undertaking.
It was a simple idea: dissect the story into its component scenes, illustrate them roughly on paper or cards, pin those cards on large cork boards, then distribute those boards to the teams every morning. The story department could steer the project, and the production artists would never be able to wander too far down any dead ends.
Storyboards brought what we now call agile development to studio animation. Since Snow White, they’ve become a production staple of film, interaction design and game design. Now, with animation entering the toolsets of web designers and developers everywhere, it seems that storyboards might become this industry’s new best friend, too.
Storyboards for the web
When it comes to animating user interfaces on a project, communication between designers and developers tends to break down if they aren’t working side by side. In companies where animation deliverables are ‘thrown over the fence’ to developers, sometimes designs are handed down as animated GIFs or videos with little else to guide the developers when recreating them.
Storyboards can help designers and developers communicate this very visual topic using its lowest common denominators: words and pictures. They require very little training to make and read, and you can create and edit them without the need for specialised software.
Storyboards are great for sketching out quick UI animation ideas during a team meeting and gathering immediate feedback. For rapid prototyping teams, wireframes can be a great way to document the patterns used, so successful patterns can be applied consistently as the project continues. And as design artefacts, they fit perfectly with style guides and design systems for documenting reusable animation patterns.
A perfect match
On their own, wireframes can help break down communication barriers between developers and designers by giving them a common, collaborative medium. But they are even more powerful when coupled with video and prototypes.
Often motion designers create and polish animations in a program that’s not designed for web development, like After Effects or Keynote. Indeed, it makes sense to experiment with animations using visual tools. But alone, video is a poor deliverable for developers. A developer might spend hours trying to recreate a subtle bounce effect that could have taken seconds if they had only known the easing value used by the designer in their animation program.
Delivering storyboards alongside videos lets developers know exactly what steps to follow to recreate an animation. This is less intimidating than having to make many inferences (which might also frustrate their coworkers). The difference between a cubic and quintic curve is nigh-on impossible for a harried developer to spot in a 500 millisecond GIF. But for a sharp-eyed designer, the difference in production is glaring.
The storyboarding process
Modern storyboards at the office are quite a bit smaller than the large corkboards of the 1930s; they look more like a comic book page than a billboard. Just like a comic page, each panel illustrates and details a different snapshot in time. Underneath each panel is text detailing what’s happening, how and why.
In web design, each of those panels could contain a screenshot, a wireframe, even a sketched microinteraction, supported by notes expanding on what interactions trigger the animations, and over what period of time they occur.
Storyboards can be as macro or as micro, as polished or as rough, as you please. Do what makes sense for you and your team. I have created storyboards with index cards, Photoshop, and even Keynote. It’s important to pick tools that everyone on your team can use and read. Often that ends up being pencils and paper!
For UI animation, storyboarding should start alongside wireframing; right after user research and information architecture. If your workflow is more vigorous, you might start storyboarding alongside design. As long as you’re thinking about animation early, you will be in good shape.
Code your colours
In addition to the black and grey of wireframing, storyboarding benefits from reserving two special colours to indicate action and animation. I use blue and orange respectively, partly because they are discernible for people with various kinds of colour blindness. Blue subconsciously registers as an actionable ‘link’ colour, and orange is very active and stands out. Use these colours to indicate what user interactions cause which things to animate.
Get those digits
A picture is worth a thousand words, but in animation the right numbers can be worth even more. Be sure to include the duration of each part of the animation. Even adverbs like ‘quickly’ or ‘slowly’ will help paint a mental picture for those that need to implement the animations.
Spell out what properties are being changed: from colour and opacity to width or height. Use descriptive words like fade, shrink, slide, expand. Phrases like pop, bounce and swoosh have more subjective values, often affecting more than one property. Does a ‘pop’ involve expansion and contraction as well as a rise and fall? Save these words for naming your animation patterns once they emerge.
Stipulate the animation’s exact easing. This value is supremely helpful to the people implementing the storyboard later on.
Number Each Panel
Numbering a storyboard’s panels is a best practice sometimes discarded by cinema, but invaluable in web design. Starting from 1, they tell readers which way the action flows. Storyboards could come in vertical or horizontal layouts, and numbers quickly reinforce which mental model everyone should be using. Numbered panels allow quick feedback (for example, ‘What about instead of panel 16, we use a nice fade?’), and let you index what animations and interactions happen and reference them accordingly.
Additionally, numerical panels let you add branching logic to your interactions or show several alternatives. For example, you could group several options for the fourth panel under 4a, 4b, 4c.
Use your words!
When adding notes to your storyboard, always detail why the animation is happening. Be sure you can justify the animation with sound reason. You may have to defend the animation to others, and if you can’t explain why it’s important to yourself, perhaps it’s unnecessary for your users.
In my A List Apart post Animation at Work, I list six different ways you can use animation to underscore relationships and hierarchy. Can you use two of these words to explain your animation?
Each panel (or pair of panels for complex interactions) of your storyboard should demonstrate the following:
What event or user interaction causes which things to animate
How said things animate
Why the animation improves the interaction
Often this breaks down into two panels:
A clear indication of the trigger for the animations (‘When the user clicks the button…’)
A description of the changes that follow (‘…the button fades away to reveal…’)
Colour-code your words, too, with interaction words (like clicked, hover and focus) being underlined or written in your designated interaction colour, and descriptive works (shrink, bounce, fade) using your animation colour.
Bringing storyboards to work
The most common challenge we face when bringing animation to our projects is building a strong rapport with the people who design or code them. The second most common challenge is not standardising those animations we do implement. Both of these lead to inconsistent animation that gives our creations a sloppy, half-finished feel.
Storyboards address both of these challenges: communication and documentation. As such, they are powerful not just for their technical depth, but also for their ability to bring people closer together on a project. This is the spirit in which we must embrace storyboards: not as a tool to dictate but as a conversation to join.
This article was originally published in issue 276 (February 2016) of net magazine.
If you can’t catch Rachel Nabors at Generate San Francisco on 9 June, there’s also a , which will see a rare appearance of top web animator Chris Gannon. Early bird tickets are on sale now.
If you want to find out more about usability testing, there are still a few places left for Bearded’s introductory workshop on the topic at Generate New York on 27 April.
Usability testing is by far the most widely used usability evaluation method. Nonetheless, it’s often conducted with poor or unsystematic methodology and so doesn’t always live up to its full potential. This article presents five controversial beliefs about usability testing and discusses if they are myths or if there is some useful truth to them. The discussion leads to practical advice on how to conduct better, faster and cheaper usability tests.
I have listed the beliefs in the table below. Before you read on, I suggest that you pause and deliberate. Please mark your opinion about each of these beliefs. Which are correct, and which are myths?
The Comparative Usability Evaluation (CUE) studies
The results reported in this article are based on Comparative Usability Evaluation studies and the author’s experience from conducting quality assurance of professional, commercial usability tests.
In a Comparative Usability Evaluation study, teams of experienced usability professionals independently and simultaneously conduct a usability study using their preferred usability evaluation method (most often usability testing or expert review). Their anonymous test reports are distributed to all participants, compared and discussed at a one-day workshop. Websites that we’ve tested include Hotmail.com, Avis.com and the website for the Hotel Pennsylvania in New York.
The first CUE study took place in 1998. Until now, nine CUE studies have taken place with more than 120 participating usability professionals. The number of participating teams has grown from four in CUE-1 to 35 in CUE-9.
The key purpose of the CUE studies is to determine whether results of usability tests are reproducible. Another purpose is to cast light on how usability professionals actually carry out user evaluations. After the first studies clearly showed that usability test results are not reproducible, we started to investigate why and what could be done to make results more similar.
More information about the CUE studies is available at DialogDesign.
01. Five users are enough to catch 85% of the usability problems in practically any product
Myth. The CUE studies consistently show that the number of usability problems in most real-world websites is huge. Most CUE studies found more than 200 different usability problems for a single state-of-the-art website. About half of them were rated serious or critical. Few teams reported more than 50 problems simply because they knew that reporting more than 50 problems is unusable. Many teams tested eight or more users and reported 30 or fewer problems – just a fraction of the actual number of problems.
Even in CUE studies with 15 or more participating teams, about 60 per cent of the problems were uniquely reported. Chances are that if we had deployed 100 or even 1,000 professional teams to test a website, the number of usability problems found would have increased from 200 problems to perhaps 1,000 or more.
So when you conduct a usability evaluation of a non-trivial website or product, most likely you will only find and report the tip of the iceberg – some 30 random problems out of hundreds. Even though you can’t find or report all problems, usability testing is still highly useful and worthwhile, as I will explain later in this article.
This myth is hard to defeat, partly because the usability guru Jakob Nielsen kept promoting it until a few years ago. His website still says it, at least indirectly, in the graph:
I agree with Jakob that you only need to test with five users. But the correct reason is that five users are enough to drive a useful iterative cycle. In other words, once you have conducted five test sessions, stop testing and correct the serious problems you have found. Then conduct additional test sessions if time and money permit.
Never claim that testing will reveal all usability problems in a non-trivial product.
02. The main goal of a usability test is to discover usability problems
Myth. The primary reason for conducting usability tests should be to raise awareness among stakeholders, programmers and designers that serious usability problems exist in their own product. Some development teams believe that usability problems only exist in other people’s products.
Of course, we also conduct usability tests to discover usability problems so they can be corrected. But usability testing is an expensive way of finding usability problems, so finding problems should not be the only purpose for conducting a usability test.
Use usability tests to motivate your co-workers to take action to prevent usability problems.
03. Usability tests provide results that are more reliable than those from expert reviews
Myth. The CUE-4, 5 and 6 studies compared results from usability tests of a website to results from expert reviews of the same website. The studies clearly showed that there were no significant differences in result quality. Actually, results from expert reviews were slightly better and cheaper to obtain than usability test results.
It’s a myth that usability testing is the gold standard against which all other methods should be compared. The CUE studies have shown that usability tests overlook problems, even serious or critical ones, just like all other usability evaluation methods. There are several reasons why usability tests are not perfect. One of them is that they’re often conducted with poor or unsystematic methodology. Another one is that the test tasks often do not adequately cover all important user tasks. A third reason is that test participants frequently are not representative.
This CUE result only applies for reviews conducted by true usability experts. It takes many years (some say 10 or more) and hundreds of usability tests to gain the experience and humility necessary to conduct fully valid expert reviews.
In an immature organisation, inconvenient expert review results may be brushed aside by the question, “These problems are your opinion. In my opinion, users would not have any difficulties with this. Why are your opinions better than mine?” Usability tests are much better than expert reviews in convincing skeptical stakeholders about usability problems. It’s easy to question opinions. It’s hard to observe one representative user after the other fail a task completely without admitting there are serious usability problems.
Expert reviews are valuable, but they are also politically challenging.
04. Positive comments in a usability test report are useless because they are not actionable
Myth. Do you appreciate occasional compliments about your work? Sure you do. That’s why usability test reports should contain a balanced list of both positive findings and problems. Usability test reports most often tell inconvenient truths. Substantial, positive findings serve at least two purposes: they prevent features that users actually like from being removed and they make it easier to accept the problems. Remember: even developers have feelings.
At least 25 per cent of the comments in a usability test report should be positive.
05. Usability testing can be conducted by anyone
Correct. Anyone can sit with a user and ask the user to carry out some tasks on a product. So, in principle, anyone can do usability testing.
But quality usability testing that delivers reliable results is different. Quality usability testing requires skills like empathy and curiosity. It requires profound knowledge of recruiting, creating good test tasks, moderating test sessions, coming up with great recommendations for solving usability problems, communicating test results well, and more. The CUE studies have shown that not every usability professional masters these skills.
We need to focus more on quality in usability testing.
Better, faster, cheaper!
Project managers tell me that, just like everyone else, usability evaluators need to improve their efficiency. My suggestions are:
Today, a usability test should be considered an industrial process. Gone are the days when a usability test was a work of art and beyond criticism. Industrial processes are controlled by strict rules that are written down, reviewed and observed.
Strict rules enable quality assessment of our work. As responsible professionals we should welcome this.
Test with between four and six test participants. More test participants are a waste of time since it’s an elusive goal to find ‘all’ problems – or even all critical problems.
Focus on essential results. Write short reports that can be released quickly, ideally within 24 hours after the final test session.
You can’t control what you don’t measure. Measure cost and productivity of your usability tests. Keep a timesheet so you always know exactly how much a usability test cost your company. Compare your productivity and quality with your peers.
It’s hardly ever cost-justified to have two or more specialists working on a usability test. You could argue that a usability specialist may overlook important problems that a co-worker would notice, but the CUE studies show that, even if you deploy 10 experienced usability specialists, important problems will be overlooked.
Consider carefully whether an expensive usability lab is cost justified when two ordinary meeting rooms with inexpensive TV equipment will make it possible to observe usability tests equally well.
Consider remote or even unattended usability testing to reduce costs. Recent CUE studies indicate that these methods work almost as well as traditional usability testing.
Prevention is better than cure
My personal experience is that about half of the problems I find from usability testing are violations of simple usability heuristics that we’ve known for more than 20 years such as ‘Speak the users’ language’, ‘Provide feedback’ and ‘Write constructive and comprehensible error messages’.
Usability tests are expensive. They are an inefficient way of discovering usability problems. Many of the problems uncovered by a usability test should never have occurred in the first place – they should’ve been prevented by the designers’ or programmers’ knowledge of basic usability rules.
The main lesson from myth two is: use usability tests to motivate your co-workers to take action to prevent usability problems. In other words, consider designers and programmers as the primary users of your usability test results. Let’s use usability testing to motivate our primary users to learn about common usability pitfalls. Let’s focus on preventing problems rather than curing them.
This article was first published on 27 Feb 2013. Main image used courtesy of Smart Chicago Collaborative via Flickr under the Creative Commons License.
There are still a few places left for Bearded’s Introduction to Usability Testing at Generate New York on 27 April. If you buy a combined workshop and conference pass, you will save $125! Get your ticket now!
A technology company logo has to convey your brand; not just what you make now, but what the future holds for your business. You might make a dating app today, a foodie app tomorrow and a mobile game after that. Your startup’s logo has to encompass all of your ambitions and philosophy. A product logo,…
Photo editing software Photoshop – a key part of Adobe’s Creative Cloud – is a popular choice among designers, which is is evident from the hundreds of Photoshop tutorials and resources around. But sometimes too much choice can be confusing, so we’ve picked some top sites that will really help you get to grips with the image editing software.
Adobe, the company that makes Photoshop, is the obvious first port of call for information on it, especially for beginners. You’ll find some great tutorials for beginners and a ton of excellent videos.
Formerly known as Digital Tutors, Pluralsight has an extensive range of tutorials to help you learn, master and discover the creative possibilities of Photoshop. A subscription is required to access the majority of the training, but you can also sign up for a free demo account, where you’ll find a number of free Photoshop tutorials at your disposal.
03. Adobe KnowHow
Adobe KnowHow promises an immersive and personalised learning experience across a range of its tools, including Photoshop. You can mark up or add notes to the videos as you watch them, making it even easier to master that new skill. You can also jump to cue points created by your annotations to review both your notes and the associated video content, so you’ll be up to date all of the time. Some course are available for free.
Pixel2life is a huge tutorial search engine on the internet, which caters for graphic designers and programmers. It has an extensive section on Photoshop training with literally thousands of tutorials to choose from. The site also features a really useful sidebar of sub-categories to help you find lessons in the effects you want to achieve.
05. Photoshop Essentials
If you’re a newbie to Photoshop, then head over to Photoshop Essentials, which has easy to follow, step-by-step style training. It offers lessons on everything from Photoshop basics to photo editing and retouching, text effects and more – and it’s all written with beginners in mind. The site is clean, tidy and easy to navigate. It also has helpful sidebars highlighting the latest and most popular tutorials.
06. Photoshop tutorials on DeviantArt
There’s a brilliant range of Photoshop tutorials on online art community DeviantArt. Divided into seven different categories, including a beginner and web design section, it is easy to find the specific tutorials you’re after. This site isn’t just for people wanting to learn though – you can submit tutorials too. See the site for terms and conditions.
Phlearn is a fantastic, free online resource offering lots of high quality photography and Photoshop instruction. Owner and creative director Aaron Nace also aims to make the training interesting and dynamic, keeping the viewer’s attention by throwing in the occasional joke or singing and dancing on screen. Informative and entertaining: what more could you want?
Envatotuts+ is a blog that offers some of the best Photoshop tutorials around. The site has an extensive library of tutorials covering many different areas, including 3D, illustration and text effects to name but a few.
Tutorial9 is a fantastic resource for Photoshop tutorials, all of which are entirely free. There are currently 30 pages of training available so you are sure to find something of interest here. There is also a search option so you can filter your options to find the newest tutorials submitted by either Tutorial9 itself or submitted by other users.
10. PS Hero
PS Hero is a brilliant Photoshop resource run by Hero – a surfer, photographer and graphic designer based in Southern California. With a large selection of free tutorials, this site offers training in the areas of graphic design, photo and text effects. It also features an inspiration gallery and goodies section where you can take advantage of free PSD files, custom shapes and more.
If you haven’t got to know Lynda Weinman and Bruce Heavin’s extensive tutorial video library then you should. Lynda doesn’t deal exclusively with Photoshop but the site offers a wealth of training in the software for the beginner to intermediate user. Some of the training is free but to access the majority of it you will need to subscribe to the site.
12. PSD Learning
PSD Learning started back in 2008. It is owned and edited by designer Ross Aitken, who has an avid interest in computer graphics and shares his knowledge through easy to follow tutorials. It has a clean layout and is organised into different categories for easy navigation. Learn everything from Photoshop scripting to creating a dramatic movie poster here.
Like this? Read these!
Discover the best photo editing apps for iOS and Android
Automate effects with these amazing Photoshop actions
In need of some free retro fonts for your design projects?
Retro fonts have an awesome appearance and are usually fonts that have returned back from the past. They were the main fonts of the time in posters, movies and all other artwork. Designers have recreated these fonts and tried to spruce up there appearance to use in modern art.
There are a number of different free retro font providers on the internet, where you can download these for your projects.
Some of the best are:
The fonts you can grab from these websites are usually free for personal use but may have restrictions on use in commercial.
Whenever I start a new painting I always use a complementary colour palette (i.e opposite colours on the colour wheel), specifically reds and greens. I find there is a tremendous range of colour to be found in such a simple palette.
I built on this technique while teaching, as I wanted to give my students a simple approach to creating a portrait.
Capture natural light in your paintings
I paint in gouache, and use round brushes in sizes 2, 4, 6 and 10. The important thing with these brushes is to ensure they have a sharp point, so it’s easy to paint details. The point of a brush is like the point of a pencil. Talking of which, it’s essential to start your painting with a pencil drawing using a strong reference, like a photo – you will need it throughout the painting process.
I usually paint on cold-press illustration board. I apply a thin layer of acrylic gesso to the surface as well as the back – this creates a more stable surface and allows paint to be removed at any stage. Some student painters are terrified of making mistakes, so knowing you can lift the paint off is reassuring.
01. Get the drawing right
Make sure you have a strong drawing to work from. Use a hard pencil, such as an F or 2H. If you use a soft pencil like 2B or 4B, you will wash the drawing away with your first application of paint. You want your pencil-work to be bold, as you will be looking for the drawing as you continue to layer the paint.
02. Lay the initial colour
Using a palette of reds and greens, I put down transparent layers of paint. Starting with a large brush (no 10), I broadly lay down the initial colour. I’m looking to create a flesh colour for the face, which in this case is a mix of Cadmium Red and Oxide of Chromium (green). I’m working to a mid-value base.
03. Let the layers dry
Gouache dries quickly, so I let each layer dry before applying the next. It’s a good idea to apply each layer as directly as you can – if you scrub the brush repeatedly over an area, you will only pick up the paint from the first layer. Having said that, the ability to pick up the paint will come in handy at a later stage…
04. Add in the mouth, eyes and nose
I continue to increase the values as I go, getting darker and darker. Using a smaller brush (the no 2) I start to fill in the smaller details of the eyes, mouth and nose. It’s important to hold onto the drawing at every step. You need to see the face smiling back at you as you go.
05. Increase the depth of colour
As I darken the value of the hair around the face, it enables me to increase the depth of the values of the skin tones. Once again, I am building the entire painting as I go, not concentrating on a single area. As you see here, the painting could be considered finished, even at this stage.
06. Get your whites right
I’m still pushing the dark values of the hair around the face, as well as defining the curls. I’ve also darkened the whites of the eyes, which is an important observation to make. The whites of the eyes are never actually white. Note that the teeth also change in value as they recede into the mouth.
07. Soften the edges
Here I’m working of softening some transitions. I’m putting a mid value in the background and softening the hair into it. The eye automatically jumps to areas of high contrast and sharp edges. The main focal point of this painting is the centred eye, as you see here – it’s the area of both the highest contrast and the sharpest edges. Hair should always be painted as softly as possible. I soften the transition as the hair meets both the face and the background.
08. Lift out highlights
I’m now starting to look at the hair more closely, picking out the highlights. This is achieved by painting water onto the areas I want to lighten, then dabbing it with a paper towel. This is where the gesso surface comes into its own, as it means you can lift paint to create highlights or correct paint that might have gone too dark.
As I continue, I work on the nose, keeping the paint a little pinker with a touch of Bengal Rose. No matter what your reference might suggest, paint the nostrils with a warm red hue – the nose, eyelids and mouth all contain blood vessels close to the surface that should always appear warm in colour.
09. Add in the darkest areas
I’m putting in the darkest parts of the hair and face now – it’s the final push in terms of values. I look for the darker tones on the side of the face and around the mouth, trying to capture each little change in value that I see. This will increase the depth around the eyes. I pick up the details of the eyelashes and also the hoop earring. I use opaque white paint to capture the highlights.
10. The finishing touches
I lighten the right cheek by lifting the paint – brushing with water and dabbing at it with a paper towel, as before. This last stage is all about softening transitions and working final details. Some of the harder edges that happen with the initial paint washes can be softened by using a damp brush and blending.
It can be hard to know when a painting is finished, I have often been accused of missing good stopping places. Some paintings I leave loose, while others I render until the cows come home. Ultimately it’s your choice.
This articles was originally published in Paint & Draw magazine issue 4. Buy it here.
Your school needs a logo. And let’s face it, as adorable as it would be to have one of your kindergarteners draw one for you, you’re probably better off getting a professional design. But where to begin? When it comes to education logos, there are so many options—from mascots to wordmarks to simple acronyms—each conveying their…