Recommended Agency

text controls: text only | A A A

Annette is at #winwithoutpitching today with @Bristol_Media and @blairenns, will be an interesting afternoon, posted 2 months ago

RSS feed icon What is RSS?

blog.

articles tagged with: web-design


Displaying articles 1 - 10 of 24 in total

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

Jenny Corfield
Jenny

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/




10 Web design trends to watch for in 2014

10 Web design trends to watch for in 2014

Trawl the web for long enough and you'll begin to notice patterns occurring, it becomes clear what is growing popular in the world of web design. Here are 10 design trends that I spotted and have a sneaky feeling we'll be seeing much more of in the coming year…


1. Flat design - OK, so this has been popular for much of 2013 but it's still going strong! Flat design removes all unnecessary elements so the content is the main focus - providing the best user experience. Initially, flat design developed as a solution to simplify Web layouts so that they were optimised across different devices but it's not just popular for practical reasons anymore. I can't get enough of this simple, clean style.

2. Grid-Style Layouts - Page elements are scattered to look like a grid. One familiar example of this would be the Facebook timeline. The grid-style provides a solid visual and structural balance. This sophisticated layout structure gives more flexibility and improves the visual experience of visitors as they can follow the consistency of the page much more easily.

3. Endless scrolling - The good thing is, browsing on our mobiles has gotten us used to it. Scrolling through a website is faster and easier than having to click through links upon links to get where we need to be. It's not content-cluttered either as new design techniques means all information is organised and formatted in such a way that it’s easy to digest. The layout often changes as you scroll, creating sections resulting in the user forgetting they're looking at one long page.

4. Simple Colour Schemes - I have a feeling there will be a lot more websites using only one or two colours. A new trend seems to be to use one bright and clean background colour, such as red, orange or teal, and to include images or black or white text over it. This creates a seriously minimalist and user-friendly effect.

5. Video - Instead of the usual written piece about what the company do, businesses are beginning to opt for short videos. This is most likely due to the fact that videos are easy to produce and share on your site as well as on social media. They also appeal to the short attention span many of us have adopted these days, we want everything now! Videos are an effective way of communicating with an audience and having an impact.

6. Fun with fonts - Designers are once again enjoying 'playing' with typography. Fonts seem to be getting bigger (and in my humble opinion, better!) and siting amongst a variety of others. Also, responsive typography should become a bigger part of responsive web design.

7. Mobile-First Design - Here, a higher priority is placed on the mobile experience which then becomes the foundation of the entire layout. The idea is to first mock-up how the website should look as a responsive layout on smaller screens. To make this work 'fancy' design considered unnecessary excess is removed and we are left with the bare essentials.

8. Mega-Navigation Menus - These menus that expand to hold large blocks of content and links, and can often contain product images seem to be particularly popular with e-commerce or news websites. If done well, this type of navigation can be extremely effective, they allow the user fast access to information located deep within the site.

9. Expanding search bars - Building semi-hidden or expanding search bars into your layout is definitely growing in popularity. When the user clicks a magnifying glass icon or clicks into the bar itself, the search bar expands wider allowing for more text input. This can be seen in a lot of responsive layouts.

10. Parallax Scrolling - That nifty technique that lets background images move slower than foreground images to make visuals appear more dynamic certainly makes for an interesting browsing experience. Handle with care though as too much of it can have quite the opposite effect!


As a designer here at Focus I am super excited about applying some of these trends to our work. Throughout the year I'll be looking out for emerging trends so that I can see you back here in 2015 with a whole new list! 

Jordana Jeffrey
Jordana

Created on Thursday January 16 2014 11:04 AM


Tags: website mobile-internet web-design internet userexperience ux web 2014


Comments [0]








What's to come in 2013? Design predictions..

What's to come in 2013? Design predictions..

As a web designer, I owe my career to the internet and it's popularity but if I don't keep up with the ever growing market it holds then there could be trouble. It's down to me to ensure I stay ahead of the game by continually updating and streamlining my work to keep it relevant.
To do this I have to consider how web design might change. What may be popular in the future? which novelties are fading out?

A lot has changed in terms of web design over the past few years and as we wave goodbye to January (yes, already!) and delve deeper in to 2013 this growth is almost certain to continue.

Reasons behind change are varied but it is safe to say that developments in technology are one of them. WIth this in mind, here are just a few things that I think may remain or become popular in this new year..

Responsive design
O.K, so that was an obvious one but it has been said that just after next year over 50% of web traffic will come from a mobile device. It is becoming as important to please your mobile visitors as it is to please traditional web browsers.

Minimalism
Clean and efficient design doesn't look set to be disappearing anytime soon. People can't seem to get enough of the clarity it brings.

Big buttons
Expect large buttons now that touch screen has pretty much taken over, well, for commercial users at least. I know I'm not the only one using my mobile device to catch up on social networking on the way to work!

Larger images
Mobile devices are getting far better at loading big sites quickly so the web will no doubt see more and more large and high definition images. Also, resolutions continue to increase so smaller images simply don't look as good as they used to.

Engaging visitors
Social media and creating discussion are both becoming even more important. In order to keep up their profiles businesses are embracing various techniques across design, SEO, email marketing and social media.

I don't have a crystal ball but it's good to gather an idea on what lies ahead if we want to improve user experience. Just one year can bring a lot of change, especially in technology. So, it's important to us to always keep on top of it as it can shape the way we design, test and market our websites.

Jordana Jeffrey
Jordana

Created on Monday February 04 2013 09:30 AM


Tags: web-design internet responsive


Comments [0]