i Click here for our COVID-19 update
phone-number phone-number email
blog

5 Essential UI Design Tips


8th January 2020

Great User Interface (UI) design is the difference between a successful site and a less successful one. Your photos can be crisp, your copy relevant; the colours can be vibrant and the design attractive. But if the site is hard to use, your visitors won’t be happy.

In other words, the design is about a lot more than just looks. Good design is about fusing form with purpose – about making things that are above all usable. A well-designed product is an easy-to-use product; aesthetics plays their part, but practicality is key.

The good news is that there are plenty of tricks up a good designer’s sleeve that will make your site not just look good … but function beautifully. Here are our five golden rules, to help inform your own UI thinking.

 

  1. Get To Know Your Users

To be able to design a good UI for your users, you need to know who your users are. It’s a good idea to analyse the data that your analytics apps collect. By doing so, you can understand your user’s goals: which pages do they head for most often, which functionality do they make the most use of? By understanding what they want to do – and how they like to do it – you’ll be able to make informed decisions when designing interfaces that suit your audience.

 

  1. Define Interface Usage

 With the growth in touch-based devices being used for browsing, it’s important to think about how you want people to use your website. People tend to use websites in two ways: directly and indirectly. Direct interactions might include tapping a button, swiping the screen, or dragging and dropping. Indirect interactions include clicking with a mouse, using keyboard shortcuts, and typing into fields. How can you be responsive to your users’ chosen means of interaction? Answering this question is critical to building a usable website.

 

  1. Set Expectations

You can calibrate your users’ responses to your website from the off: for example, let them know what will happen once they click that button before they do it. You can do this through design elements or copy. Highlight the button that corresponds to the desired action; associate a widely understood symbol with a given action – a trash can for a delete button, a plus sign to add something, or a magnifying glass for search. Write great, engaging copy that immediately cues a user and leads them to the path they want to find. Pick a colour with a relevant meaning – green for a “go” button, red for “stop”. In other words, guide your users – don’t leave them adrift.

 

  1. Anticipate Mistakes

No site is perfect, but nor is any user: mistakes will happen. Perhaps a user will visit the wrong page, click the wrong button or enter the wrong information. The key is to minimise its impact. There are two main ways to help lessen the impact of human error: prevent mistakes before they happen, or provide ways to fix them after they happen. Follow our tips above and you’ll achieve the former; by offering wayfinding and navigation tools such as breadcrumbs or back buttons, meanwhile, you’ll help your users retrace the steps – rather than start from square one – when they go wrong.

 

  1. Provide Feedback

Good UI design is a two-way process: when users interact with your site, they expect something to happen, for an action to be triggered. It’s important to give feedback to your users as they interact with your site, such as clicking on a button. All too often, digital interfaces fail to give much back, leaving us wondering whether we should reload the page – or just give up altogether. Use animation and pop-up boxes to reassure a user that all is as it should be. Hold their hand.

 

In other words, make UI central to your design process by putting the user experience first: what do they want, how can they get there easily … and how can you reassure them that they’re hitting the right buttons? That’s UI design in a nutshell – and these are our five essential UI design tips.

 

Contact Image Plus for Web Design & Development

If you need web design or development, then speak to our friendly experts. Our web developers are based in Coventry, Warwickshire and are always ready to help. Please feel free to contact us and speak to one of our website design specialists.

Contact us on 024 7683 4780 or send us an email at info@image-plus.co.uk.

 

blog

Top Four Wireframe Tools That Web Designers Should Be Using


21st August 2019

When it comes to web design, wireframes are an essential building block of a quality end product. Why? Because they are how designers begin to map out how your site will look – its layout, navigation, content areas and menus.

Think of the wireframe like your site’s skeleton – the bones over which the skin of typefaces and animations will be stretched. Producing a solid structure at the wireframe stage will ensure that everything else flows as it should – making your project more streamlined and efficient.

What is a Wireframe?

A wireframe is pretty basic at first. It will use simple shapes to “block out” various elements of your site’s pages, making clear locations, orientations and dimensions of each aspect. You and your designer will be able to agree on this layout before all the really important work of fleshing it out.

In other words, wireframing is an essential part of any design process – not a nice-to-have bonus. That means that every designer needs tools at their fingertips that make the most of wire framing. A software that enables robust laying-out of a site at this critical formative stage.

Good news: we have a shortlist of the four best ones.

 

  1. UXPin

UXPin offers incredible speed while putting together wireframes by dragging and dropping your customizations. The software also presents updated libraries for Foundation, Bootstrap, Android, and iOS. Your wireframes will be promptly transformed into high-quality mock-ups. This software is a one-stop shop for easy, but fully-functioned, wireframing.

 

  1. Moqups

Moqups software is developed to simplify the team process of developing wireframes. It allows a number of designers to collaborate on a single project, preparing site maps, storyboards, and flowcharts. If your wireframing stage has more than one person working on it – and more than a few moving parts – Moqup can be a great way to keep track.

 

  1. Axure

Axure enables you to include specific functionality with the layout of your website, and presents an interactive design. This wireframe software offers various widgets and sitemaps, meaning you can take the bare-bones basics of a wireframe and add some extras. This is particularly useful if the site you’re working on has some spritz essentials; it helps understand and situate them within the structure from day one.

 

  1. Fluid UI

Fluid UI  is unusually ecumenical: it comprises sixteen built-in libraries for Android, Windows, iOS and other operating systems, and pages can be developed by dragging the elements from these libraries. This means that designers have access to a range of options across the major platforms, meaning that their future-proof wireframe – and thus the ensuing website – is cross-compatible from the very off.

 

Don’t neglect wireframes – they are too important to skip. And these are the top four wireframe tools that designers should be using.

 

Contact Image Plus for Web Design & Development

If you need web design or development, then speak to our friendly experts. Our web developers are based in Coventry, Warwickshire and are always ready to help. Please feel free to contact us and speak to one of our website design specialists.

Contact us on 024 7683 4780 or send us an email at info@image-plus.co.uk.

 

blog

5 Mistakes to Avoid in UI Design


17th September 2018

We often focus on this blog about what you should do – the best ways to achieve success in web design. But sometimes our mistakes are our best teachers. It can be as easy to navigate the thickets of web development by knowing what to avoid as by understanding the golden threads to follow.

To that end, and following a few recent posts on the topic of user interface design, here’s the flip-side of our how-to series: the how – and what – not-tos. Avoid these five common mistakes in UI design and you’ll be just as surely on the road to success as if you have followed a list of positive rules.

 

Avoid Inconsistent designs.

Consistency in design is about ensuring that all similar actions and elements within your website look and act the same. Do all the action buttons resemble each other? Do all your links? Visually cueing the user into the function of an element in this way makes a site a lot easier to use. One of the easiest ways to remain consistent in your design is with some planning ahead of time – don’t neglect that stage.

 

Avoid Poor Choice of Colours.

Colours portray meaning, so consider your brand and audience before commitment to any colourways and every hue. You also have to keep visitors with colour-blindness in mind. Consider carefully the function of colour in your design: what impressions are you trying to evoke, and what might each colour represent within your design? Always deploy colour strategically, and never randomly.

 

Avoid Text-heavy Content.

It may sound like a paradoxi, but too much text can hide a website’s message from visitors. Copy, of course, is important – and well-written, concise and impactful text is crucial to any website. But use more visuals and less text: a picture is always worth a thousand words when it comes to digital design. In this context, don’t write for the sake of it – make every sentence count.

 

Avoid Neglecting Other Devices.

People are accessing the internet in ways more diverse than ever before. To capture more users, then, you’ll need to ensure that ones with different devices can access your website equally well. Mobile browsers have overtaken desktop browsers and it’s important to keep that in mind. Think about how your site will cope with these disparate demands – and make it responsive.

 

Don’t Ask Users To Click Too Many Times.

The more clicks that a user has to go through before making it to the final “purchase” or “sign up” button, the more sales that are going to be lost. Ensure to check the length of your forms and how many steps you put between their beginning and their end. Use simple structures and clear progress markers to keep your users engaged – and never, ever insert a click unless it’s absolutely necessary!

 

So that’s User Interface Design 101 – the negative edition. Steer clear of these five mistakes in UI design and you’ll be on your way to building a fantastic user experience.  Sometimes, avoiding the pitfalls is as important as taking the right steps.

 

Contact Image Plus for Web Design & Development

If you need web design or development, then speak to our friendly experts. Our web developers are based in Coventry, Warwickshire and are always ready to help. Please feel free to contact us and speak to one of our website design specialists.

Contact us on 024 7683 4780 or send us an email at info@image-plus.co.uk.

blog

Benefits of Good UI Design


27th August 2018

The benefits of good UI design are almost innumerable. So important is UI design to the success of a website that we might argue it is the single most important element of any web project. Forget your typography choices, your image options or your colourways. UI design is where it’s at.

But what is UI design? Put simply, it is the construction of the user interface – the UI – by which a visitor to your site navigates and interacts with your content. All elements of that interaction – from navigation bars to responsive elements, but also including how images and typography facilitate ease of use – should be included in the UI design considerations.

Of course, UI design is present in a very wide range of applications, from operating systems to aeroplane cockpits. But to focus on web UI design is to drill down quite specifically into how users engage with online material – and the ways in which designers can maximise ease of use whilst also inspiring greater adoption and return visits.

The best UI design is sleek, intuitive – and invisible. As a rule, you want your user interface to be as non-intrusive as possible: the less aware a user is of the interface, the better it is. Your focus should be on ensuring rapid access to core content – in other words to facilitating your users’ access to the information they most need. The UI shouldn’t get in the way of that; it should be the pathway, not the gate.

Let’s assume you get the UI design just right. That was a lot of work; what exactly have you got out of it all that effort? What, in fact, are the benefits of good UI design?

 

Good UI simplifies searching.

Again, UI design is about making it easy for your users to reach the content they need. A good UI will feature search functionality prominently – and ensure that results are relevant. Think about how you’ll tag your content to ensure that searching is free-flowing, not frustrating.

 

Users can navigate your website better.

We don’t always quite know exactly what we want – and search is, after all, only as good as our key phrases. That’s where effective navigation and way-finding comes in: the better your UI, the easier it will be simply to browse your website … and find the content we need intuitively.

 

Condenses interfaces for smaller screens.

These days, good UI design has to be responsive. In other words, you should ensure that your site is as usable on a smartphone screen as it is on a 40” desktop monitor. Don’t neglect the impact of less horizontal space on your design!

In short, good UI design will help your website feel seamless and intuitive – and simply provide greater convenience to your users. That, in turn, will mean they spend more time on your site – and return to it more often. And that, in the end, is the greatest benefit of good UI design.

 

Contact Image Plus for Web Design & Development

If you need web design or development, then speak to our friendly experts. Our web developers are based in Coventry, Warwickshire and are always ready to help. Please feel free to contact us and speak to one of our website design specialists.

Contact us on 024 7683 4780 or send us an email at info@image-plus.co.uk.

blog

How Do Vibrant Colours Benefit UI Design?


20th February 2018

Vibrant colours benefit UI design in more ways than you might think.

Of course, decades of the colour response theory have demonstrated how important colour can be too conditioning and shaping how a user interacts with a design – red attracts the eye better than any other hue, while blue promotes a sense of coolness and calm. But UI design has its own particular quirks which require a further understanding of how colour can act upon the eye.

For example, consider readability. Monotone designs are far easier to scan and read. Consider vibrant colours for your UI, then, because they will enable the text on your website to be quickly and easily digested … and therefore will support your messaging better than a melange of pastel shades.

 

Monotone Designs

Monotone designs user a single colour and mix in shades and tints. The bold clarity that this use of colour represents will provide an eye-catching focus on your content. Use it to direct your user’s eyes towards key calls to action and “take homes”. A website exists to communicate something to someone – monotones are an efficient and effective way of doing this.

Of course, not all sites have quite the same goals – and UI design should shape itself around a site’s strategic aims. That’s why we’d be remiss to evangelise monotones at the expense of, well, duotones. To risk contradicting myself, duotones are a particularly good choice for UI design because, where monotones offer clarity, duotones create atmosphere.

 

Duotone Designs

As the name suggests, a duotone design will make use of two contrasting colours – or two shades of the same hue. Placing colours side by side enables you to elicit responses by being careful with your juxtapositions. For example, the soft contrast will seem serious and sober, while high contrast will seem a little more dynamic, even exciting. Where the monotone lets the content speak for itself, the duotone adds a language all its own.

Of course, contrast isn’t the only weapon in your colouring arsenal. Gradients – the gradual passage of one colour into another – can produce benefits from vibrant colour from the opposite of contrast.

 

Gradients

Gradients can add a modern look to a website, offering a gentle and contemporary edge to your website which will inspire confidence but also make your site easier on the eyes. Modern gradients often use high-contrast colours and radiate their transition from various angles – not just along the vertical.

In other words, your choice isn’t just down to which colour: it’s also about how that colour is presented, and alongside which others. By making appropriate choices informed by your strategic goals, you’ll discover that vibrant colours really can benefit UI design.

 

Contact Image Plus for UI Website Design & Development

If you need web design or development, then speak to our friendly experts. Our web developers are based in Coventry, Warwickshire and are always ready to help. Please feel free to contact us and speak to one of our website design specialists.

Contact us on 024 7683 4780 or send us an email at info@image-plus.co.uk.

The latest from our blog


Jun 29

The Rise of Vertical Videos on Social Media

Vertical videos are the new must-have on social media. They will increase your views, your engagements – and your ROI. In other words, vertical videos have become the default mode... More

Jun 15

Why use Social Media Marketing for Business?

The days when it was necessary to advocate for social media marketing are surely behind us. If there is any business anywhere that now needs to be convinced that social... More