Recommended Agency

text controls: text only | A A A

Sorry, our twitter status is currently unavailable, posted 23 minutes ago

RSS feed icon What is RSS?

blog.

articles tagged with: web-design


Displaying articles 1 - 10 of 26 in total

The importance of tone of voice in design

The importance of tone of voice in design

When I’ve said something mildly amusing, my sister has a really confusing habit of stating “That was funny” - but with a poker straight face! We’re Scottish so I recognise sarcasm when I hear it, and that’s not it. She means it, but in not teaming it with a laugh, the moment is completely lost while I sit frowning trying to figure out what just happened.

With written web and app content you only have words to work with. No facial expressions, no audible tone, no laughs (!) so you are relying purely on language to create a tone of voice to represent the personality of your brand or service. A tough task but when done well it can be really powerful.

Multiple studies have shown that tone of voice is measurably influential. From this alone users make assumptions around trust and competence, which in turn affects their loyalty to you.

 

Pick me, pick me!

Your tone of voice can be the sole reason a user chooses you over anyone else.

Informal, relaxed language is perceived as friendlier and more trustworthy, making users more likely to recommend your brand. You may be surprised to find this applies to more serious industries too, like banking. When writing for web it helps to picture how a face to face interaction would be perceived. Less stern people are more approachable and you believe they are representing themselves honestly. A formal voice may come across as intimidating so users can struggle to interact with the brand or relate to it.

I’m not suggesting you need to be a comedian, cracking jokes in every paragraph. If this ran throughout, users would start to question professionalism. Injections of humour now and then are successful as they provide a momentary lift.

 

Consistency is key

Consistent language with a tone that matches your brand’s other elements persuades users to believe in the service and the intelligence behind it. It gets the message across much more clearly and convincingly too.

Now for the science bit… human beings seek to create a well-founded image of whoever we are communicating with. When we can’t do this we become confused and suspicious which in turn puts us off pursuing a relationship with them.

So there’s no use having a site showcasing an exciting new service available and supporting it with language that’s uninspiring and flat. They may not realise why but it is unlikely to ‘sit right’ with the user and they’ll move on. Much like how I felt about my sister’s response (not that I then proceeded to source an alternative sister).

 

Seal the deal

Design a voice and tone that will give your brand a likeable personality that is consistent, genuine, reliable and compelling.

Consider the user’s emotional needs at the time of visiting your website or app and alter your language to suit. Really consider why they might be on there in the first place. Tone can be used to reassure them that they are in good hands and what you have to offer will help them to achieve exactly what they set out to do.

It is a good idea to create a well-defined voice and tone and outline this within a guide. You can then arm those providing written content with it. That way your brand will speak in a consistent and well-recognised voice whether this be on your website, social media or newsletter.

 

Jordana Jeffrey
Jordana

Created on Wednesday September 11 2019 12:05 AM


Tags: web-design tone voice


Comments [0]








Being Content with Content

Being Content with Content

You’ve built the website, the client loves it and the early stages of testing are looking promising, there’s just one problem – you don’t have any real content.

The word ‘content’ can be daunting and overarching. There’s an entire website/app/platform and somebody needs to fill it with engaging, witty, relevant words and images that will bring users from far and wide. No pressure then.

What is content?

Content can be used as a catchall term but at its core it is information – pages, events, blogs, videos, illustrations, graphs, photos can all be described as ‘content’.

Without it, most websites would be a series of shapes and colours that didn’t communicate anything.

Staring into the abyss

Timing is crucial. Get the content as early as you can. If the site is replacing an old one and the client already has content, fantastic, ask them to send it to you as soon as they can. This is mutually beneficial as it can be used to influence the design and they can see it in situ to get a feel for how the finished site will look.

Whether you have content already, or you’re starting from scratch, the first step to dealing with the content behemoth is to break it down. Break it into small, manageable steps and then break it down again. Figure out what type of information you need for each page type, and what format it needs to be in. Then make a list of the minimum amount of content you need to launch.

For instance, if your new website has events, news and cms pages you may need a minimum of 3 upcoming events, 3 news stories and 17 specific pages of information.

 

Bridging the divide

Now that you know what you need, you need to know who is responsible for creating it. If you’re working from the ground up, you may need to assign content. Perhaps you, as the digital agency will be writing some of the support documents, such as a list of cookies used and the client is doing the rest? Maybe the client has the words but they need some help with the images? Maybe they have it all in hand.

Figure out what is being created, or sourced by who and keep track as your content folder starts to fill.

Writer’s Block

You may be met with resistance ‘I’m not a writer’, ‘I don’t know what I want to say’, ‘There’s too much to do in the time frame’. If you’ve worked out the minimum amount of content you need and who’s creating it, all that’s left is to know what you want to communicate and who you want to communicate it to.

If you have a page of fact sheets, maybe a bulleted list of links is the way to go? If you’re reporting on a recent workshop, perhaps a captioned video with a small amount of text underneath.

Being content

The most important thing is to factor it in. It’s all too easy to spend hours building a beautiful backend, throw yourself into absolutely nailing the CSS and then discover that there’s nothing to fill the page but 3 stock images and some well-placed lorem ipsum.

Don’t be complacent about content – you want users to come to your website for the content and stay for the excellent UI.

Frances Smolinski
Frances

Created on Wednesday June 26 2019 08:00 AM


Tags: website web-design content contentstrategy


Comments [0]








7 ways to maximise online donations

7 ways to maximise online donations

When I was asked to write an article about UX for the Fundraiser – the publication from Charity Choice providing practical advice and insight to the third sector – I wondered how on earth I was going to take such a huge topic turn it into something bite size.

UX and UI are expansive subjects, so rather than try to cram them into a side of A4, I decided instead to compile a list that would hopefully get the readers to try out some simple UX testing methods for themselves. 

For charities, encouraging visitors to donate and to keep donating is paramount, and ultimately good UX = more conversions which means more donations. Good UX really is as important for charities as it is for ecommerce.

The list is by no means exhaustive, but hopefully it will inspire some readers from the third sector to think more about UX, to utalise its potential and to try out some simple UX tests for themselves.

7 ways to maximise online donations

Created on Thursday September 22 2016 01:23 PM


Tags: website charity technology web-design userexperience ux usability


Comments [0]








2016 Design Predictions

2016 Design Predictions

Whenever I stop by to see my parents, I am reminded of how far I've come (and I don't mean geographically). There is a framed school project piece of mine that hangs proudly on their wall. I remember feeling that was well deserved at the time. Now though, I'm convinced it gets worse with each visit but even that doesn't date as quickly as websites can. It's frightening how fast web design moves, but with that comes a continuos flow of new and exciting trends and techniques to take on.

There are many factors that can change in web design; technology, user behaviour and other creative fields that can influence the web such as graphic design and fashion.

- Responsive Web Design (RWD)
It is so popular right now and will no doubt continue to be throughout the year. It serves the same HTML code to all devices and uses CSS to alter how the page appears on the device. It is also what Google recommends to build mobile-friendly websites. Many of the trend predictions featured in this list are most suited to RWD.

- Increase in UI Patterns
We've seen a lot of similar looking websites lately which many blame on RWD and the rise of WordPress. Take the hamburger menu for example, it has been criticised for being everywhere but this is also why it is so easily recognised by users. UI patterns are there to guide users through the experience, making it easy to navigate and the hamburger menu does just that. I think we'll see designers working hard this year to be the one to come up with the next popular UI pattern. This will no doubt result in a lot of visually inspiring attempts.

- Memorable Typography
We are no longer limited to a few system fonts. Services like Google Fonts and Typekit make custom fonts readily available and easy to use on the web. Expect adventurous experimentation with type to make a strong statement in design.

- Material Design: dramatic alternative to Flat Design
Like flat design except it uses shadow effects and the concepts of movement and depth in order to create designs that appear more realistic to the user. Material Design creates clean, modernistic design that focuses on UX.


- Flat Design with a Twist
It has been around for a while now but it looks set to stay for 2016 with a few differences to keep things interesting. A little like material design long shadows will bring more depth to flat designs. Vibrant colour schemes. Simple typography and ghost buttons will allow for functionality without distracting from the UX. Minimalism will reduce the number of elements and create a raw, tidy UI.

- HD Visual Assets
HD background images and videos on websites could well grow even stronger in 2016 due to increased bandwidth, wide browser support of HTML5 video, and ways to serve high resolution graphical assets selectively to devices with retina screens.

- Striking Custom Iconography and Illustrations
.jpg and .png files can result in a pixelated look on retina displays, which spoils the aesthetics of a website. Now though, there is wider browser support for Scalable Vector Graphics (SVG) and easily implemented icon fonts. The outcome? more web designs showcasing colourful custom illustrations SVG icons that remain crisp and engaging at any screen resolution.


Thinking of it now, my 'work of art' has gradually been demoted from hallway masterpiece to bathroom backdrop. Perhaps even a mother's love isn't strong enough to ignore the fact that design moves on quickly and unless you don't mind your hard work being tucked away, it's best to keep up!

 

Jordana Jeffrey
Jordana

Created on Tuesday January 12 2016 11:02 AM


Tags: website technology new-year web-design designtrends 2016


Comments [0]








Accessible Colours and Web Design

Accessible Colours and Web Design

For some it's driving fast cars, for others it's a risky bungee jump, for me I get plenty of excitement from discovering handy tools like this accessible colour palette generator! colorsafe.co
Stay with me, I'll get a life right after I tell you why this is worth shouting about...

Colour is super important in web design. It's not only used to make the website visually appealing but also to increase it's usability and accessibility.

What we must remember is not to assign too much meaning to colour in web design as this is of no use to users who cannot view the colour as you intend them to. That’s why when designing a website you should ensure that the information conveyed with colour is also provided through another means.

We must also ensure there is sufficient color contrast for all content. The goal is to make sure that all visual designs meet the minimum color-contrast ratio for normal and large text on a background. There is a lot to consider but this colour palette generator does much of the thinking for you. It is based on WCAG Guidelines of text and background contrast ratios.

You simply set up the canvas and text by entering a background color and the styling of your text. Then accessible text colours are generated with WCAG Guidelines recommended contrast ratios. Ready for you to simply pick your favourite!

 

Jordana Jeffrey
Jordana

Created on Tuesday October 20 2015 10:48 AM


Tags: web-design usability web onlinetool


Comments [0]








Accessibility at the BBC

Accessibility at the BBC

Thankfully the sweatband and spandex was entirely optional when accepting my role as 'Accessibility Champion' for Focus.
I attempted to earn that title by heading along to a well delivered talk from Ian Pouncey - the BBC's Senior Accessibility Specialist (pictured). I had to start somewhere and rumour has it the BBC just might know what they're talking about!

With genuine enthusiasm, Ian talked us through how accessibility is embedded in to the process of delivering websites and applications at the BBC, covering standards, training, philosophy, and organisation.

They've got great training available at the BBC but unfortunately for those of us outside of the 'circle' it's all in-house. I was hoping some of you superbly knowledgable readers might know of any courses available to the public that are similar to these that the BBC have for their team:

- Accessibility for web developers (on-line course, 2 hours)
- Introduction to screen readers (1 day course)

In return I give you my discovery; web aim's colour contrast checker http://webaim.org/resources/contrastchecker/ - da daaaa! It's amazing, simply select the colours you wish to combine and they'll let you know whether they pass or fail accessibility standards.

But back to the BBC, I was surprised to hear that their accessibility team only consists of three members. That didn't make me furrow my brow as much as this did though: 'The BBC are exempt from the accessibility law… providing they exceed the requirements'. I'll leave you alone for a minute with that one!

For a while now there has been an awareness of accessibility and even an understanding of how it works, but many are still unsure as to why it is so important to consider accessibility right from the start of the design process.
These words from Tony Hall (BBC DIrector, 2013) answer that quite simply: "Everybody deserves the best" - we should all remember that. Everybody deserves the same level of consideration. I must confess there was a time when I felt making a website accessible would negatively affect the visual appeal of my design but there is no reason why the two can't go together. Yes, it makes it more challenging but that's all part of the fun and even the ultimate world-saving Champion 'Superman!' came up against a little Kryptonite now and then.

With great power comes great responsibility! Maybe I'm letting this whole 'Champion' thing get to my head but seriously Ian strongly advises companies to nominate a Champion and stressed the importance of such a role. This includes networking, extending reach and spreading knowledge within the company. It's not just for developers and you don't have to be an expert already.

Muhammad Ali started training at the age of 12 to become one of the greatest heavyweights in sport's history. I'm about 20 years late for that kind of a start but I can still be a champion in the accessibility ring!

Jordana Jeffrey
Jordana

Created on Friday February 27 2015 11:31 AM


Tags: web-design focus disability onlinetool


Comments [0]








Accessibility & The Web

Accessibility & The Web

Sure, I was hungry but I wasn't just there for the sandwiches. When I heard Accessible Bristol was hosting an event for anyone interested in the web and accessibility, I saw it as an opportunity to ensure our clients get what they want. Here at Focus we work with a lot of local authorities and for websites such as theirs, accessibility is key.

I was keen to hear from one of the most recognisable and respected people in the web accessibility industry; Steve Faulkner (pictured). An enthusiastic man who has dedicated 15 years to web accessibility. In 2001 he started his career with vision Australia. Today he has kept his accent and is Principal Accessibility Engineer at The Paciello Group as well as being co-editor of the W3C HTML5 specification, and a contributor to other specifications including Accessible Rich Internet Applications (ARIA).

Sitting excitedly in the front row I was pleasantly surprised when the casually dressed, relaxed man sat amongst us took to the stage. This immediately likeable character delivered a highly knowledgeable presentation and although it was very much focused at developers rather than designers such as myself, I still felt included despite being somewhat outnumbered by the 'techies' in the audience.

Steve went through an alphabet themed slideshow; A is for ARIA, B is for Button, C is for Canvas and so on (view slides). Admittedly it was like learning a new language but I always strive to be a better designer, and if learning 'techie talk' and understanding ways I can work more in sync with the development team will help towards that, then count me in.

Once the sandwiches were scoffed and the slideshow slowed to a stop, it was question time. I plucked up the courage to ask a design focused question and felt all eyes on me, then a few more of us admitted to being in the design 'camp' and conversation started to flow. Talk ranged from not knowing where to begin with a blank canvas, to a woman with dyslexia and dyspraxia expressing her frustration when surfing the net.

When it all came to an end, the message that stood out for me as a designer was this;
“Think about accessibility first and foremost, because if you get it right for disabled people, you get it right for everyone.”

If you would like to know more about accessibility, Steve recommended the website http://webaim.org. On there you can find a simple checklist that presents Webaim's recommendations for implementing HTML-related principles and techniques: http://webaim.org/standards/wcag/checklist

You can keep up to date with all Steve has to share by following him over on Twitter @stevefaulkner

Jordana Jeffrey
Jordana

Created on Wednesday January 28 2015 12:09 AM


Tags: web-development accessibility web-design userexperience disability


Comments [0]








Web Testing on real phones & tablets

Web Testing on real phones & tablets

There are so many ways a website can be rendered on screen. Not only is there a huge variety of phone shapes and sizes but all of these can have multiple browsers (e.g. Chrome, Firefox, Safari, Opera and Internet Explorer). Then there's the fact that they can display in landscape or portrait mode. Users aren’t using a mouse but are instead using their fingers (some with 'digits' a little less delicate than others!).

It’s difficult for us developers and designers at web design agencies to predict just how our latest website might look online. There are of course websites that are meant to emulate how it will look but they're not always accurate.

This is where Open Device Lab steps in to make life that little bit easier. We headed over to their offices at Aardman to test one of the responsive website designs we're currently working on. We were able to test it on multiple popular devices from the iPad to a Blackberry. In doing this we could avoid the on-line emulators, we didn't have to pester friends with a different phone to ours to "borrow it for a second".
At ODL we could use a pretty handy piece of kit called 'Ghostlab'. Ghostlab synchronises browser testing. It scrolls, clicks, reloads and form inputs across all connected clients. So what you're testing is not the simple page load, but the full user experience. We also had the option to abandon that and fiddle with each device individually which is good for spotting usability issues that could possibly go unnoticed otherwise.

ODL Bristol are sponsored by the digital marketing agency 'Noisy Little Monkey', these guys made us feel super welcome and we were comfortable knowing we had coffee and support at hand (if required). More importantly, we left feeling we had done a thorough job of testing for our client.

So what did this cost us?... absolutely nothing. We're not sure if that's ever due to change but at the moment so long as you book ahead, you're welcome to pay them a visit. A the moment this gem feels like our little secret but you know what we're like at Focus, we promise to keep you guys updated with all things digital and this is definitely worth 'whispering' about.

Jordana Jeffrey
Jordana

Created on Monday December 01 2014 04:42 PM


Tags: website technology web-development mobile-internet web-design ux responsive


Comments [0]








It's play time!

It's play time!

The BIG launch! The new-look "Go Places to Play" is here - an online park finder that makes it easy for you and your family to enjoy fun and exciting play opportunities in and around Bristol.

We've recently redesigned goplacestoplay.org.uk for Bristol City Council so that it not only looks better than before but it works better. "Go Places to Play" is now even more intelligent so that you can find parks and play areas far more quickly and efficiently. We understand that you live busy lives and need information at your fingertips - wherever you may be. The site is now responsive so it is easy to use on smartphones, tablets and laptops. This means you can quickly  find your nearest park when you're out and about. You can click on map points to get further information about the park or site you are interested in, or you can use the postcode search to bring up sites in your area.

The online calendar means you can search for local events that suit your requirements and interests. You'll be provided with results if you search using a relevant keyword, or you can find something more specific using the handy advanced search which allows you to search by event type, location and distance from your chosen postcode.

There are also some great ideas for play featuring tips and suggestions from our Play friends and partners - a particularly good resource for the school holidays. Plus, our brand new FAQs section answers many of the common questions we get asked.

As before the option is there to register as an event organiser which means you can upload your own events to feature on the events calendar. Once approved you will see them published.

People like to feel as though they are a part of a website and the 'community' that use it. Interaction is key so if you find something you like on Go Places to Play you can "Share with a friend". Regular news updates also ensure that everybody is on top of all that's going on. It's a site that seems to have people talking, if you want to be a part of the excitement please like the Go Places to Play Facebook page here: https://www.facebook.com/goplacestoplaybristol or better still, go and check out the site to see for yourself!




Sneak preview just for you!

Sneak preview just for you!

We can't contain our excitement, we simply have to share with you what's bubbling away in the studio!

Improvements are being made to our current online park finder "Go Places To Play" - a website that forms a part of Bristol City Council's campaign to encourage children to play outdoors.

We don't want to give the game away but here are a few snippets of what to expect.

Mobile friendly - We've added more functionality that is based on your current location i.e. your closest park is. It is also a mobile first build; usually mobile sites are designed as a result of a desktop design that is scaled down. Not this site. We've started with the mobile design and scaled up! The build is responsive; meaning you get an optimised view on desktop, tablet and mobile.

User friendly - Much easier to navigate the site. You're guided through it and it is clear to see all it can do and how it can benefit you.

Age appeal - Adults often view the site with their children in mind. The site is much less childlike and now appeals to a wider age range so that it is great for parents to navigate, but still has a family, child-related feel.

Search to suit you - We want people to be able to find personalised information based on where they are and what they like to do rather than just general information.

We've put some serious effort in to not only making the site look good but in making it a useful tool that you feel you can go to and rely on. It's not yet a finished product but we can't wait until it is and you'll be the first to know about it!

If you would like to see the online park finder as it is now, please go to http://goplacestoplay.org.uk/