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!
Created on Tuesday January 12 2016 11:02 AM
Making websites accessible for people with disabilities is an integral part of high quality websites (in some cases, it's a legal requirement!).
As a designer at Focus, that's a big responsibility. It's easy to get overwhelmed by all the things to consider when designing for accessibility. I'm an active member of the web accessibility community in Bristol and often attend presentations that can get very technical and propel me far from the safety of my design knowledge. It's at this point that I call on a skill I've had my whole life: empathy. An important thing to remember is that accessibility is about understanding people and the barriers that they face.
Many of the barriers people with disabilities are faced with, also effect people using mobile devices when interacting with web content. Some examples of this include the fact that mobile phone users will struggle if a website's navigation requires the use of a mouse. Similarly, desktop computer users with a motor disability will have a hard time using a website if they can't use a mouse.
Some shared experiences are comparable to temporary disability; If you need to use your mobile to access a website when you're at a concert, the noise that surrounds you likely means you are experiencing the website similar to how a deaf person would. Equally you may struggle reading small text as those with low vision do with most text. The iPhone is less than 10% of a typical desktop screen. 'Fat fingers' denying you all accuracy could equate to difficulties faced by those with hand tremors. A 40 pixel finger is big on a small target! Mobile is disabling for everyone.
There are guidelines to help you keep accessibility in mind, such as the BBC's mobile accessibility guidelines http://www.bbc.co.uk/guidelines/futuremedia/accessibility/mobile and of course Web Content Accessibility Guidelines (WCAG) 2.0 http://www.w3.org/TR/WCAG20/
Getting your own experience of accessibility helps you to put yourself in the shoes of others and keep accessibility in mind when building and testing your website.
So next time you wonder whether a design feature is accessible and immediately rely on tools such as a colour contrast checker, first consider disabilities of all levels and the struggles faced by others and maybe even yourself . Surely I'm not the only one who's complained of 'fat fingers'?
Created on Thursday December 24 2015 10:24 AM
After a record breaking year, the Focus team deserve a bit of time to put their feet up.....
So our office is closing from 12pm on Christmas Eve and will remain closed until 9am on Monday January 4th 2016.
We are running our emergency support email address:
This email address should only be used for business critical emergencies and whilst we can't guarantee any response times, we'll do our best to monitor incoming emails.
All that's left is to wish everyone a very Merry Christmas from the entire Focus team, we look forward to catching up in the new year.
Created on Wednesday December 23 2015 12:27 PM
Apart from Noddy Holder, nothing shouts "Christmas" like an end of year review; so when Jordana asked if I preferred the 'snowman' or 'reindeer' themed version of the Focus logo, I knew it was time to start looking back over the last twelve months.
The headlines make impressive reading. The Focus team has expanded; we have welcomed lots of new clients on board; our work for local authorities has gained significant national recognition; and our accountant is very happy, as 2015 has seen revenue up approximately 60% on the previous year. It's been a record breaking year for Focus in many ways; and by far our most successful trading year since we started in a small kitchen in Redland in 1996.
Success has come quickly and we are open and honest enough to admit there has been the odd hiccup. We have certainly learned some lessons along the way.
Jenny, Stefano and Jon have all joined the team during the year. Jenny has raised our profile within local government and led our presentations and workshops at the NAFIS 2015 Conference in London. With his years of web development experience, Stefano has bought a measured and calm presence to the studio and I'm sure Jon won't mind me describing him as akin to a Jack Russell - whipping through work and nipping at our heels for more.
It's been fantastic to welcome lots of new clients to Focus. We've built new software for Alive Activities, who do great work to improve the lives of older people in care. We've launched a new web site for KDVI - global suppliers of management and leadership coaching - and there's lots more work with the KDVI team lined up next year. We've been busy automating processes and improving communication 'behind the scenes' at Barriers Direct which has helped them achieve their most successful trading year in history. And with our good friends at the Watershed we launched Rife Guide - Bristol's newest guide to events and activities for young people.
We have also had the opportunity to see the impact that our work has had. In the summer we met parents and young people at the launch of the SEND Local Offer for the London Boroughs of Kingston and Richmond, where as well as chomping through several ice creams we met the SEND Champions, a group of young people who have been contributing videos, blogs and other content for the site. October saw Annette and Simon make the trip north to help Hartlepool Borough Council officially launch Hartlepool Now, a web site based around duties from The Care Act 2014. The Borough Council's Chief Executive Gill Alexander said the web site 'put Hartlepool far ahead of other local authorities' when it came to information and advice around social care.
October also saw the Department of Education note our work for the SEND Local Offer as a 'benchmark'. Cue lots of high fives in the office that day.
We passed our annual ISO audit with thumbs raised and flying colours. Our only 'area for improvement' noted centered around MD Simon's induction documentation - a week on the naughty step for him followed.
All in all it's been frantic, a little edge of seat at times, but great fun and the team at Focus should really grab a moment to step forward on the stage, and take a quick bow.
And so what's next? 2016 is going to be based around two key phrases for us: innovation and impact. It's going to be worth keeping an eye out for and we're looking forward to getting stuck in.
In the meantime, a massive thank you to all our clients for their continued support and custom, we hope you all have a restful break over the festive period and look forward to putting the world to rights in 2016.
Merry Christmas to everyone from the entire team at Focus.
Created on Tuesday December 22 2015 03:24 PM
We are chuffed to shout a big, if slightly delayed, hello to Jon Wait, who joined the technical team at Focus in October.
Jon graduated from UWE with first class honours in Multimedia Computing and brings a solid background in a wide range of web technologies including HTML5, CSS3, SASS, JQuery and Responsive Design.
He's already got stuck into several projects including new sites for Bristol Balloons, BrunelCare and Hartlepool Borough Council.
Jon's interests away from the office include exploring the Far East and its language and culture.
Created on Tuesday December 15 2015 12:54 PM
I sit, staring at a screen more blank than my expression. Sometimes it can be so hard to write a blog, let alone write one that's accessible to people with disabilities. When doing so, there are many things to consider, for example Screenreader compatibility. Below is a list of things to keep in mind that may help you.
(So that you don't abandon my blog to instead watch a YouTube cat playing the piano, I've kept it brief, plus we all love a bullet point, right?)
- Use real text not text within graphics.
- Choose simple, easy to read, sans serif fonts such as Arial.
- Limit number of fonts.
- Ensure sufficient contrast between the text and the background.
- Avoid small font sizes (less than 12pt).
- Limit the use of font variations such as bold, italics, and ALL CAPITAL LETTERS.
- Underlining is best kept for hyperlinks.
- Numbers: Use symbols (1,2,3), not words.
- Avoid jargon.
- Avoid too much information on one page/blog.
- Bullet points should be used to break up information (avoid numbered lists).
- Abbreviations and acronyms should be avoided if possible. If not possible, first refer to it in full with the acronym in brackets for example ‘Web Content Accessibility Guidelines (WCAG)’
- Always check spelling and grammar before publishing.
- Don’t use 'eg / ie', write ‘for example / specifically’.
- Don’t use '&', write ‘and’.
And a few final points:
- Images should be used as much as possible.
- Blogs should have meaningful titles that help users identify the page in search results.
- Avoid using ‘click here’. Ideally the purpose of a link is clear, even when the link is viewed on its own.
For those of you who aren't by now listening to the sweet sound of paws on a piano. Here are some links to my other blogs about accessibility that may also be of help:
Created on Wednesday November 11 2015 10:53 AM
It's interesting to see that Amazon have opened their first 'bricks and mortar' store in University Village, Seattle - a clear departure for an organisation previously critised for helping to end the presence of many bookstores at cost to local communities.
Data plays a huge role in the way the new store operates, with Amazon tapping in to their countless sources of product and customer data which as you'd expect, allows them to do things a little differently. Books are presented on shelves based on customer ratings ("all books on this shelf are rated 4.5 and above") which means titles that are little known, but well loved, get just the same exposure as more recognised books and authors.
There's also shelves for 'most recommend cookbooks' and 'best books for 6 to 12 year olds' and customer reviews are placed on cards directly below each book.
Amazon have also made the decision to lay all books out 'cover facing', rather than stacked with only their spine showing. Whilst this obviously reduces the number of books that can be displayed, Amazon feel it's more important to give each book as much and as equal exposure as they can.
Another advantage Amazon will have is utilising their huge selling power on unsold stock, something that high street bookstores have consistently struggled with.
And more stores? An Amazon spokesperson said "We hope this is not our only one. But we’ll see."
It may be another step on the marketing juggernaut that is Amazon, but it's interesting to see how data from the web experience is being used in the physical world.
Created on Thursday November 05 2015 09:04 AM
Monday 19th October saw Simon and Annette travel north to join Hartlepool Borough Council for the launch of Hartlepool Now, a new web site created by the team at Focus that helps the local authority meet new information duties from The Care Act 2014.
Taking place at Hartlepool College of Further Education, the launch event was a great success. Attendees had a number of workshops to choose from including a run through of the web site itself, a demonstration of the new online Equipment Finder and a chance to see The Ricochet Project from local charity Incontrolable, which lends tablets to disabled people in the community and provides basic training in using them.
Following the workshops, Hartlepool Now was officially launched by council Chief Executive Gill Alexander, who stated that the new web site "helped Hartlepool set a new standard for publishing clear information and advice".
Our branded cupcakes went down a treat as well.
A massive thanks to the project team at Hartlepool for inviting us to the launch, it was great to be part of the event and hear the positive feedback the web site is already receiving.
Created on Friday October 23 2015 11:36 AM
Rife Guide is a dynamic online platform where young people can keep up to date with what’s happening in Bristol and get involved in a wide range of activities. Part of Bristol City Council's pioneering online virtual youth service and created by Focus in partnership with Watershed, Rife Guide is managed by a team of talented young journalists, content creators and editors who know what’s important to Bristol’s young people.
Rife Guide includes a calendar of events and activities in Bristol as well as information and advice on important issues such as housing, drugs and sexual health. What’s more, visitors can create a login that will give them access to a portal of content that is appropriate to them - events and services are suited to their age and preferences and then pushed to them every time they log in, without the need to search.
As well as being a hub for young people, Rife Guide is also a platform where local businesses, organisations and providers can promote their services - they too can create a login and upload the details of their organisation or event which is then moderated by the Rife team before being published to the website.
Annette Ryske of Focus says the involvement of young people at all stages of the project has been crucial in it's success:
"Consultation was key. From the very beginning, we worked closely with Watershed on a series of workshops and engagement sessions with both service providers and target users. This involved visiting local schools, youth groups, clubs and children in local authority care. Our work with providers led the development of systems for publishing their information quickly and efficiently."
"Working with young people showed us that the majority of their internet use was via mobile, they were using social media to share content and the content itself should consist of less text and be rich in images and video."
Now that Rife Guide is live, ongoing engagement with young people is more important than ever, and we are already planning new content and features based on feedback from users.
Created on Friday October 23 2015 09:39 AM
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 appealnig 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!
Created on Tuesday October 20 2015 10:48 AM
- January 2016 (1)
- December 2015 (4)
- November 2015 (2)
- October 2015 (4)
- September 2015 (1)
- August 2015 (2)
- July 2015 (1)
- June 2015 (1)
- April 2015 (3)
- March 2015 (3)
- February 2015 (3)
- January 2015 (1)
- December 2014 (4)
- October 2014 (3)
- September 2014 (3)
- August 2014 (1)
- June 2014 (1)
- May 2014 (2)
- April 2014 (2)
Bristol: 0117 949 8008