Domnicana Victoria Web Design

So easy , So wonderful, so Domnicana Victoria Web Design

Month: April 2015

The designer’s guide to digital accessibility

How to create accessible designs that work across print and digital.

The notion of accessibility may bring to mind ideas of screen readers and voice control, but it’s about much more. Some impairments, for example, often go unnoticed. Take colour blindness: one in 12 suffer from the condition, so a design that uses only colour to convey information is useless to a large number of users.

Then there are those who aren’t technically blind but do have some level of visual impairment. Designing with these users in mind not only helps them, but makes your work easier on everyone’s eyes. The fact that most people can read grey text on a white background doesn’t mean it’s enjoyable to do so.

With websites, some users will have some kind of cognitive impairment. It might be permanent, such as a learning disability, or it may be a temporary impairment such as drunkenness (imagine designing for a taxi service, say) or even shock (think materials for a hospital).

Designing for these people means minimising clutter, using smart, simple copy and making user journeys easy to understand. These attributes are something that everyone appreciates.

Extension of UX design

Expert in accessibility Heydon Pickering advises that you think of accessibility as an extension of UX design. “Imagine how people with different disabilities experience the same content. It’s part of the design process, not something you ‘bolt on’ later.”

Think about how screen-reader users will experience your page as you write your markup: the order is important. “If your navigation menu is positioned at the top of the page visually, but located at the bottom of the HTML document, then the experience for keyboard users will be frustratingly different to those who can point-and-click. They will have to tab-key through all the page content just to access the menu.”

If you’re a print designer and you haven’t done much web work, it can be painful to realise that your attention to detail is lost when your designs can’t be implemented on the web exactly as you made them.

“Don’t be a slave to the tyranny of ‘pixel perfection’,” Pickering advises. “In print design, you can be exacting, but on the web it’s pointless to attempt it. Design interactions, not approximations. Users are not gallery visitors, they are participants.”

Keep things simple

Above all, try to keep things as simple as possible. “The biggest enemy of accessibility is complexity,” says Pickering. “Complexity makes interfaces inaccessible to anyone, but especially those who have content announced procedurally by assistive technologies.”

Complexity also makes things harder for those with cognitive differences, such as autism, dyslexia or ADHD. Jamie Knight, senior accessibility specialist at the BBC, breaks down the cognitive process required to do something into three parts – receiving information, processing information, and then taking actions – and then assesses how well a website enables someone to do each part.

‘Receiving information’ covers whether a person can take in the information that’s there and spot things that they can use to achieve a task, such as buttons, menus and text areas.

‘Processing information’ covers whether a person can filter out the things they don’t need to make a decision, such as adverts, links to other areas of the site and so on. The more irrelevant items there are, the harder it is to filter and decide.

‘Actioning’ refers to whether someone can form and complete a plan of action based on the decision they made in the previous step. Knight asks: “Can the user perceive the information and figure out what can be done? Can they filter the information in order to reach a decision? Can they then plan an action and complete it?”

Knight is slightly autistic himself and in this post he explains how he uses a zoom tool to exclude adverts and other clutter from his screen to help him focus, and also a screen reader for the same reason.

Colour contrast

Colour contrast is one of the most important factors determining legibility of text. Accessibility was a priority for web design agency Domain7 when it redesigned the website for Imperial College London.

Design team lead Tracey Falk explains: “While sticking with black type on white is always the safest (and recommended for primary body copy), using an online tool that will test type colour against background colours for contrast is key. You’d be surprised at what fails these contrast tests.”

Contrast also needs to be accounted for when using type overlayed on top of images. Miriam Thomas, UX designer and front-end development lead at Domain7 told us: “This continues to be a huge web trend and we’re surprised by how often readability is overlooked in this design pattern.”

“Often the solution is to neutralise and desaturate images with a dark or light overlay so text can be read. Imperial, however, had a huge library of bright imagery, so we chose to colour block backgrounds behind text on top of images to keep that vibrancy intact.”

Inaccessible branding

But what if the brand colours don’t pass contrast tests? Geri Coady, author of A Pocket Guide to Colour Accessibility, explains: “If brand colours have already been chosen and are unfortunately not accessible for whatever reason, try to find alternate ways to implement them,” is her advice.

“A logo with insufficient contrast can be supplemented with descriptive alternate text, but for text elements like body copy and headlines, try introducing a darker, contrast-compliant shade of the same colour to add to your brand palette.”

“If this creates pushback from your client, don’t be afraid to bring up the potential risk of lawsuits and lost customers from an inaccessible website. Money talks.” (Disney faced an accessibility lawsuit in 2011.)

Coady recommends Lea Verou’s contrast checker for ensuring your palette is legible, and there’s some more detail in her article on contrast checks. See also the Web Content Accessibility Guidelines.

All of the experts we spoke to agree that testing is key to making your work accessible and ironing out any problems. Test at regular intervals and include in your testing group people with cognitive differences such as Autism Spectrum or ADHD as well as those with visual and motor impairments.

3 ways to stay inspired when working in house

Alexandra Humphry-Baker considers how to stay motivated and relevant as an in-house designer.

Recently, there’s been a growing trend for companies to move from employing design agencies to building their own in-house teams. It’s time to revisit the in-house designer’s role, and the opportunities – not just the challenges – it provides.

A few months ago I was catching up with a few fellow designers when talk turned to work. Two of them worked in agencies and were recounting bitterly how they were losing jobs – not to other agencies, but to a previous client’s recently created in-house team. A little digging showed me that this was not a one-off occurrence.

Service design agency Adaptive Path was purchased by credit card company Capitol One, Teehan+Lax ‘partnered’ with Facebook, and just a few months ago design giant Lunar was bought by management consulting firm McKinsey. In the UK, banking giant Barclays recently grew its in-house team from six to 67 in just one year.

It’s understandable that companies are investing in internal design teams. They allow for a faster route to market and greater gains through institutionalising knowledge and brand expertise – two things that traditional agencies struggle to achieve. Of course, change is always uncomfortable. However, as design becomes recognised as the differentiating factor in business and gains market share, new paradigms are emerging where we, as designers on the inside, have the potential to drive change in business at a more meaningful level.

Nevertheless, much has been written on the subject of the ‘disappearing business of design’ – the essence being that internal design teams struggle to remain creative and innovative in a corporate environment. Companies with huge internal design teams, such as Twitter and Spotify, have paved the way in countering this by investing heavily in building a design-led company culture.

However, for the rest of us working on the inside without the budget for ‘war rooms’ or design laboratories, it’s crucial we find other means to keep on top of our game. Below is some advice I’ve picked up working client-side for the past few years.

01. Never stop learning

To borrow from Mike Monteiro: “Like any craftsperson, a designer is only as good as their tools”. It’s important to review them often and stay on top of what’s new. Turn repetitive jobs or boring tasks into opportunities to learn a new skill or try out a new programme.

02. Share your process

If you are part of a small design team, it’s crucial to bring other members of the company into the design process. Luckily for us, design is fun and people are naturally drawn to visuals. So the first step is to take over the walls with your works in progress. Pin up your research, wireframes, quotes from users, or anything that pulls people in and encourages ‘water cooler chat’.

You’ll be surprised what insights so-and-so from marketing has about your users if you give them a space to share them. Take this a step further by inviting them into your process by running workshops that explore an idea you are working on or that needs buy-in from other departments. Gamestorming (gamestorming.com) is a brilliant toolkit to get you started facilitating co-creation workshops within your company.

03. Fill the well

Working in-house, it’s more important than ever to stay inspired by exposing yourself to a multitude of situations. Go to galleries, join a print workshop, read fiction, do whatever you can to add to your internal library of ideas. Otherwise you’ll be left scraping the barrel and reinventing the old.

Next, get out of your comfort zone. Attend events. Better still, speak at them, because formulating and articulating what you do is the best way to bring people into your process and recreate that studio environment.

Finally, make time for side projects. Some designers build products in their spare time or run a blog. I myself opted to start a CreativeMornings chapter in my city.

Whatever you choose, immerse yourself in something outside of work, however removed from your current role. I guarantee the return on time investment will be tenfold.

Learn, build empathy for your role and keep the inspiration well topped up. These are the first steps you need to take to help you, as an in-house designer, stay inspired, motivated and relevant.

Why words are a design issue

Writer Gemma Church explains why designers and copywriters need to work together.

Designers and copywriters do not hold mutually exclusive roles. The design process needs to happen with content, not just for it. The practice of creating a page full of lorem ipsum and then just getting a copywriter to fill in the gaps does not cut it anymore.

I’ve worked as a website designer and copywriter. Many companies take a blinkered approach where each department ‘did its own thing’. Designers design websites. Writers churn out copy. Marketing department promote websites. It usually turns out a disjointed and unpleasant user experience – as well as producing a confusing and frustrating work environment.

The key factor here is effective communication. Every department has a different set of priorities and a different level of understanding. Designers discuss images, fonts and layouts. Writers worry about word choice, tone and syntax. A designer may not understand the lingo of the writer, and vice versa.

The first step is understanding each other’s worlds. If you’re a designer, take some time to read about writing styles. If you’re a writer, try to understand some of the more technical aspects of the business. There are plenty of resources out there – but just pulling up a chair and talking to your colleague is the best approach.

You need a genuine appreciation of each other’s work. A writer needs to understand how good designs can engage and persuade users. A designer needs to understand why copy can influence moods, buying habits and boost engagement.

Once this understanding is in place, all parties can work together to create a cohesive user experience. Words are key components of many pieces of design

It is important to think about copy early. It is intrinsically linked with information architecture, so it makes sense to get your copywriter involved right at the start. Key messages determine how users should flow through the website. They affect the sitemap, navigation bar, page layouts, calls to action and even button placement.

A great way to achieve this is to invest in some wireframe software that allows for real-time collaboration. A designer can create the first design draft and share it with a copywriter and marketing team. Everyone can edit the content – which should boost collaboration, improve the decision making process and cut down on those lengthy email conversations too.

When good words go bad

It can be difficult to keep a writer’s enthusiasm for the written word under wraps. I hold up my hands here and admit I can get carried away with lengthy prose instead of focusing on the most important aspect of a website – the user experience. It’s important that writers and designers undersatnd each other

Here are three bad writing practices that every designer should be aware of:

01. The wrong tone

You must take into account the tone of your website and who will be reading those words – otherwise the site can come out as a little weird and untrustworthy. Professional designs for professional companies must be matched with professional copy. Likewise, a more light hearted company can use jokey and informal language – just make sure everyone is on the same page.

02. Brevity beats longevity

Website copy needs to be clear and concise. No matter how good a piece of copy may be, large blocks of text will turn people away and distract from the design. Writers need to keep their egos in check and make sure they are producing copy that users actually want to read.

03. The headline

A good headline will grab the user’s attention. It needs to be short, to the point, engage users and state a benefit. This is an area where writers and designers often fall out – make sure you collaborate to find the right words to fit the design and ethos of a site.

One and the same

So you now understand each other’s language and priorities. That must mean designers and writers can work in a harmony, right? Wrong.

Designers will always believe the design draws in users. Writers will retain the notion that the rights words determine the user experience. Making such distinctions between design and the written word is the real misnomer – they are both sides of the same coin.

Context is everything when writing for a design project

Take another look at the top three mistakes made by writers, could any apply to designers too? Has your design ever struck the wrong chord with users? Have you put in too many images when one would do? Have you sacrificed words in a headline for a cleaner layout?

All too often, designers and writers work in their own little bubbles, with each person unaware of what the other is doing. For the copy to be of any use, the writer needs to be aware of the context in which it will appear. And the designer needs to understand that words are ultimately a design issue.

Free ebook about visual storytelling in web design

Discover how to design visual narratives into sites for better UX

The difference between good design and great design is the emotional response from the user. Web interfaces must go beyond usability to tell stories, but this requires a sharp skillset to master the visual subtleties.

The Visual Storyteller’s Guide to Web UI Design explains everything a designer needs to know to design websites with rich narrative. This book is available free to download from the prototyping app UXPin, as part of their free design library.

Subscription offer

In 68 pages, this ebook explains its advice with analyzed examples from 29 companies including Tesla, Fitbit, Microsoft, Squarespace, Foursquare, and more. It covers such topics as:

  • How to design sites to lure people into long-term engagement
  • The 3 types of storytelling imagery — iconic, symbolic, and indexical — and how to apply each to web UI design
  • How to use illustrations, mascots, rich backgrounds, and gamification to immerse users in the UX
  • How to create and execute “visual game plan” beforehand
  • Analysis of different styles of visual storytelling, and which one works best for certain projects
  • How to develop your own personal visual style
  • Interactive design techniques for web storytelling

It’s worth checking out and reads fairly quickly since it’s example-driven. Download this free ebook now.

Liked this? Try these…

  • How to use storytelling to connect with your audience
  • 12 art directors to follow on Instagram
  • Brilliant WordPress tutorial selection

Powered by WordPress & Theme by Anders Norén