User interface (UI) design

Our rigorous user interface design process places the user at the heart and carefully considers their interactions with the site. User interface designs must not only be attractive to potential users, but must also be functional and intuitive.

Putting the users first

UI design dramatically influences the usability and user experience of a website or application. If an interface is not adapted to suit its users or is overly complex, users will become frustrated in not being able to find their way around your site.

A good interface design makes it easy for users to quickly extract what they need, meaning they’ll burn less calories using your site and improve conversion. It’s pretty obvious, but we need to really understand your users, their needs and objectives for visiting your site, so we can then build the most suitable interface.

UI design process

Wireframes

We start the interface design with an architectural blueprint / wireframe, a quick and simple visual representation of the applications layout. We use lo-fi (low-fidelity) or scamps (line drawings) to get the process underway, and then work these up into hi-fi wireframes to .

Style guide

We create a style guideline of the main elements of the design, for example colours, fonts, iconography, graphical elements and any layout styles to use in the design.

UI Design

We continue to work up the wireframes using the style guide to deliver a full set of interface designs for the different templates and modules, at different viewport sizes, ie desktop, tablet and mobile.

Interaction Design

We design and plan the interactions so that might be transitions, hover states, movement, loading, fades etc. Micro-animation is a common trend that not only looks great, but can help users by providing feedback, signposting, and helping to showcase the personality of your brand.

Prototypes

We often build hi-fi prototypes so that the interface can be fully tested before going into final production, and we start to really get a feel for how the interface is going to work.

Code

The final step of the UI design is to build the interface using the latest coding standards and best practices which will likely include a combination of HTML, CSS, JQuery, Javascript, Vue.js and Angular.

The new site can now be used very easily by all members of the internal team as it is so intuitive and therefore requires minimal training. Only one or two members of the team could use the old website due to the amount of time it took to train people up! Our events team report that setting up events on the website has reduced man hours by half as it so intuitive to use.

Antonia Stratford – Head of Public Affairs and Communications, UKinbound

Thanks to Granite 5, we now have an excellent accessible and innovative platform in Vital Tech for showcasing developments and trends in assistive technology. I'm very excited for its future potential.

Darren Paskell – Technology Information Champion, Thomas Pocklington Trust

This is one of our most interesting sites, it's a great example of what can be achieved when the client is prepared to push the boundaries and we get the opportunity to dial the creativity up to 10. The site offers a fresh and unique experience and we love it.

Christian – Lead PM, Granite 5