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!
Created on Thursday January 16 2014 11:04 AM
Working with our friends at Pace, we've got a new responsive site live in super-quick time for the friendly folk at Woodland Court.
Part of BrunelCare, Woodland Court is a new retirement living choice, situated in a quiet area of Downend. The Woodland Court team needed a website that they could keep up to date, particularly with apartments that come up for sale.
Already having an established relationship with Pace meant that when they suggested we work in partnership to develop the website, Woodland Court were only to happy to go ahead. The new site features a Content Management System, so the Woodland team can update the majority of their pages themselves. There are also lightbox features, enabling users to view lots of (professionally-taken) photos of the apartments and surroundings. An editable slideshow means promotions and events can be shown quickly and easily.
More specifically, a customised 'Apartments' module means the team can list new apartments, add downloads and images, and mark them as 'sold'.
With accessibility features and fully responsive build, the site is ready to roll for 2014! Take a look here.
Fancy knowing more about mobile, responsive or any other features in this article? Then please do get in touch!
Created on Wednesday December 18 2013 09:31 AM
World Usability Day 2013 at the M Shed this year had a host of great talks from usability professionals and enthusiasts from around the world. One talk really caught my attention and that was "BBC Olympics: An Accessibility Study" by Alistair Duggin the lead front-end developer at Money Advice Service. The talk looked back on the BBC Olympics website and the huge task taken on by the BBC to cover the Olympics in the digital age They wanted to make 24 HD live streams, over 2500 hours worth of video coverage as well as huge amounts of stats and data available world wide to a massive audience across mobile, tablet, PC and connected TV.
By the end of the project there had been 37 million UK browses, 66% of the adult population had visited the website as well as having 57 million global browses with 111 million video requests across all available platforms. These numbers were not the only difficulties of the project, the team at the BBC had an immovable deadline of a huge profile event and were working with teams of mixed knowledge in terms of accessibility. On top of this for added pressure the Australian olympics had been sued for being inaccessible.
So the team had one page for each of the 10,000 athletes, 205 countries, 36 sports, 304 medal winning events and 30 venues that they had to make usable and accessible for people with a range of visual, auditory, motor and cognitive abilities. This is where I was really surprised by the talk, I was expecting a full range of teams running huge usability studies and endless testing to make sure everything was perfect deploying more resources than is possible in a normal sized project. In reality the methodology and practices followed by Alistair and his team were reusable on any scale and in fact should be used on all web projects. It is not spending a lot of time changing designs and code to make it accessible, if you have accessibility in the back of your head when creating websites then you should only have to do it one time.
These are all the kind of coding practices that we can all follow on our websites but not necessarily something we check as often as how a page looks in IE7 or displays on a mobile device. I learned a lot from Alistair's talk, especially coming from the view point of a front end developer it showed me how important accessibility is for users, we should not be thinking about making it better for a minority of users but instead creating universal accessibility. He also talked about having a website that is one hundred percent accessible as not being realistic and that we need to prioritise in real world projects but that accessibility does not have to compromise design or ingenuity in websites.
Created on Monday December 09 2013 10:00 AM
Last week I took part in the first webinar of the #TwitterAcademy series "How to grow your business with Twitter". This was a short session which I was able to fit into my day, at 30mins tops. Keeping it short also meant keeping focused!
I thought it was a good, easy to digest session. Yes, it was a bit 'back to basics', but even so there was some really useful pointers to take to get you back to having a strategy, however simple, and sticking to it.
In summary, these are the key points which I'm taking away and aiming to refine not just our Tweeting, but also our clients approach to Twitter. It's simplistic stuff, but I think we can all agree we can make some improvements to the way we use social media.
- Look at what the big boys are doing - the example in the Webinar was Pret, showing their timely Tweets over the lunchtime period, and answering questions and Tweets quickly and in good humour.
- Follow your competitors. That's obvious!
- Retweeting other accounts tweets can be a simple but effective strategic move - mentioning their @ handle in your tweet suddenly has the potential to reach many more recipients.
- Reply to followers questions and comments - again, this helps to reach new recipients, but also gives an opportunity to show some personality and character to your brand on Twitter.
- Use #hashtags - see what's trending, or what's topical in your market, and use that hashtag. Anyone researching or looking at that subject matter might just come across your Tweet.
- Use the Advanced Search https://twitter.com/search-advanced feature on Twitter. Search for keywords and look at conversations that relate to your product or service, or as importantly your customer base - then tailor your Tweets accordingly.
- Use links, pictures, proverbs, news... something other than just your 140 characters!
- Providing value + achieving your Business goals + entertaining = the ideal Tweet. Remember why you're doing this, but have some fun at the same time..
If you'd like an informal chat about Social Media, or need some help planning your activity, please get in touch!
Created on Wednesday November 27 2013 04:18 PM
Last month saw us launch a new web site on behalf of the Parent Partnership team at Bath and North East Somerset Council.
Connecting Families is a new programme designed to help families with multiple complex needs in the BathNES region - and is part of the Government's Troubled Families Initiative, which aims to change the lives of 120,000 families by 2015.
The web site provides users with access to a database of support groups and organisations who offer help, guidance and advice. The database is categorised into easy-to-follow scenarios and topics that are relevant to individual family members - so it's clear where everyone can find the information most appropriate to them.
Additionally the site has built using underlying responsive tech - with the layout of each page changing based on the device being used to view it; whether it's a desktop, laptop, tablet or mobile smartphone. We include a responsive layout with all our new web site projects - helping provide engaging user experiences across all devices.
To see the new web site please see:
Created on Friday November 22 2013 10:00 PM
Recently myself and another previous student of UWE returned to the User Experience module of the new Digital Media degree to talk in one of the first lectures of the year. We were asked by Praminda and Paul, lecturers at UWE we were previously students for, to do an introduction to User Experience and to try and talk about what we had learned in our first years as graduates. My partner in crime was Richard Foggin who is working at True Digital, we sat down before hand to try and work out what we would have wanted to learn about User Experience in our introductory lectures and what insights we could give as students who had been there before.
It was a hard decision to either talk about primarily what they would need as students of that module to pass, or what they would need as young professionals going out into digital and web work. User experience is such a vital part of our industry that it is almost certainly going to be part of their job in some way no matter what specialisation the students decide to go into. Rich and I decided that we would give an introduction to ourselves, the subject and what it meant to us but that we would need to get practical in order to give the students a real taste for UX work.
We decided to run the students through a practical that Rich and I had taken part in during a talk at UX Bristol by John Waterworth. We had the students design mini user interviews picking subjects they had an interest in and then took it in turns to be the interviewer and facilitator / note-taker. This was to give the students a feeling for all of the skills required to gain insights and collect requirements from user interviews. I think at the end of this process we had probably learned more than the students, I had not fully understood how hard it would be to run a workshop, keep everyone on track and making sure they got the most out of their time there.
We finished off our talk a bit exhausted with our collection of cheat-sheet / hacks for student life, little techniques and lessons we wanted to pass back as previous students to try and make it easier being a student! It was definitely a real experience going back to UWE, brushing up on our public speaking skills and really surprising just how much information you have that you want to share, it isn't until you start planning your time you realise the extent of the user experience subject. I would definitely recommend to any other professionals to go back to their universities and offer their services, it is a lot of fun and could be a good excuse to meet up with old university friends to work on something together.
Created on Friday October 25 2013 01:19 PM
Speed on the web is as important as ever, with figures showing that better performing websites get more business, and that performance may also have an effect on SEO rankings.
Recently, we've been asked by several clients to measure how their site performs, and what could be done to speed it up.
For the first client (a multi-national blue-chip insurance company), they primarily wanted to know how many users their system could support - how many users could use the site in an hour, say?
The first thing we needed here was a program to simulate being a real user. PhantomJS is an excellent tool here, because behind the scenes it's basically the same browser as Google Chrome, but there's no visible front-end - we can "drive" it automatically and measure the results.
So, we produced a PhantomJS script that hit the website, logged in, and performed the operations our client wanted testing. (Measuring all the times as it went.)
We then produced a large queue of those scripts to run, and fired up a whole bunch of Rackspace Cloud servers, and told them to share the queue of jobs - this is to simulate concurrent users, which is very difficult to emulate with a single computer.
We ramped up the simultaneous servers gradually, and found the spot at which we'd hit a limit - meaning that the system couldn't deal with more simultaneous users than we were throwing at it.
Armed with these numbers, we could then dive a little deeper into the figures at certain points of the process, and find some likely candidates for the stages that were specifically slowing things down.
The tools we have available for this kind of work these days are frankly excellent - without PhantomJS (or something similar), our tests would have been significantly less "real", as it wouldn't have used real-life browsers to do the testing. And without Rackspace Cloud, I dread to think of the work involved in actually firing up that many physical servers to perform the tests!
Next time, I'll talk more about what happens next - how web pages can be made faster.
In the meantime, please don't hesitate to get in touch with us if you'd like us to performance-test your website!
Created on Tuesday September 17 2013 01:45 PM
Yesterday our good friends at MS Ireland launched their 2013 MS READaTHON campaign. It's Ireland's largest and longest-running sponsored read for young people, and this year once again it's supported by a fun Focus microsite!
Featuring moving robots, the site has stacks of information for kids, teens, teachers and librarians about how to sign up for this year's campaign. MSI were keen to ensure the site had a balance between informing young people about MS, and providing fun and engaging ways to get involved.
The site also features a video embedded in the site, ensuring schools who block videos-streaming sites such as YouTube still get to view the video and find out what it's like to have a family member with MS.
The Comms team at MSI have lots of control over the site, and are able to update much of the content themselves. They also have prizes to be won, games to play and other ways to get involved.
Head over to the site now - we'd love to hear what you think!
Created on Tuesday September 10 2013 11:54 AM
'Big Wecil' has been the affectionate name throughout the summer for one of our larger and more complex projects - which gets it's first serious airing tomorrow (Wednesday 11th September) at Disability Somerset - the south west's leading independent living exhibition.
We're not going to give too much away at this stage, but it's a hugely exciting and innovative way for adults who require social care to plan their care and manage their personal budgets - all in line with the ongoing requirements from government for more personal choice and decision making.
'Big Wecil' has been designed from scratch to work across all platforms and devices, such as iPads and iPhones, includes lots of features to enhance accessibility, and throughout the project there's been a real focus on system usability. The software looks set to provide a truly collaborative environment for professionals such as GPs, social workers and health visitors.
With the BBC and other news outlets at tomorrow's exhibition, we're looking forward to revealing a little more about the project - meanwhile as we might be on telly, we need to go and check our hair.....
Created on Tuesday September 10 2013 11:36 AM
We've going through a bit of an upgrade period here at Focus towers. The web framework we use for all our websites is Ruby on Rails, and version 4.0 has just been released.
Major "point" upgrades, when systems go from v3.x to v4.0 are always an exciting, and yet challenging time. Normally major upgrades have exciting new features that we want to use, but the downside is they often require other code or libraries to be upgraded to work correctly.
Ruby on Rails v4.0 requires Ruby 1.9, dropping support for the older Ruby 1.8 series, which means servers running 1.8 need to be upgraded in order to use Rails 4. However, Rails 4 also supports the also-new Ruby 2.0, which brings performance optimisations and other nice language improvements to the table.
The best approach would seem to be to install multiple versions of Ruby on some of our servers, making them able to serve sites both old and new.
This is thankfully easily achievable - IF we upgrade Phusion Passenger, which serves our Rails sites on our production server to v4.0, which is the first version to support multiple Ruby versions at the same time!
So, we find ourselves wanting to upgrade to Rails 4.0, Ruby 2.0 and Phusion Passenger 4.0 at the same time in order to achieve what we want! It's an exciting time, but also one that involves a lot of testing!
Version numbers aside, you may be wondering what the point of these upgrades is. It's generally true that a website created in Rails 4 can't (from a user viewpoint) really achieve anything that fundamentally a website in Rails 3 (or even 2, or 1) can. (There are a few specific exceptions, but I'll leave these for now!)
Rails 4 brings the developers some nice additional tools to the table, meaning we can write code in simpler, better and more consistent ways. This helps us write code quicker and reduces the possibility of making any errors.
The main customer-facing improvement, however, is probably performance - Rails 4 gives us some great tools (such as "turbo links" and "russian doll caching", believe it or not!) to make your websites run faster for your users.
Everyone is clamouring for more speed on websites these days - figures show that faster websites convert customers better (and generate more revenue), and Google is factoring load speed into it's ranking - meaning faster websites could rank better in the natural listings.
Therefore, it's great for everyone that we're getting an even better set of tools for making your websites run faster.
If you'd like to know more about any of our technologies, or would like to talk to us about website performance, please do get in touch!
Created on Wednesday August 14 2013 12:17 PM
- January 2014 (1)
- December 2013 (2)
- November 2013 (2)
- October 2013 (1)
- September 2013 (3)
- August 2013 (2)
- July 2013 (4)
- June 2013 (2)
- April 2013 (1)
- March 2013 (2)
- February 2013 (5)
- January 2013 (5)
- December 2012 (2)
- November 2012 (3)
- October 2012 (1)
- September 2012 (2)
- August 2012 (2)
- June 2012 (1)
- May 2012 (5)
- April 2012 (4)
Bristol: 0117 949 8008