We use cookies to ensure that we give you the best experience on our website. If you continue to use this site we will assume that you agree to our cookie-policy

SEO ENQUIRY

First, we need your contact details…

SEO ENQUIRY

Which SEO services are you interested in?

SEO ENQUIRY

Anything you’d like to share with us at this stage?
A brief, technical scope, supporting documents or anything else?

SEO ENQUIRY

How soon are you looking to kick off this project?

SEO ENQUIRY

What budget guidance are you working on this project?

SEO ENQUIRY

What budget guidance are you working on this project?

THANK YOU

Thank you for getting in touch with Yellowball!

We’ve received everything and one of our team will be in touch very soon with the next steps. If your enquiry is urgent, you can call us on 020 8064 1832 – we’re open 9am – 6pm Monday to Friday.

BACK TO HOMEPAGE
YELLOWBALL LITE

Unfortunately, you don’t qualify for a bespoke project, but there is good news!

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

VISIT YELLOWBALL LITE

Step 1

of 6

WEB DESIGN ENQUIRY

First, we need your contact details…

WEB DESIGN ENQUIRY

Which web design services are you interested in?

WEB DESIGN ENQUIRY

Anything you’d like to share with us at this stage?
A brief, technical scope, supporting documents or anything else?

SEO ENQUIRY

How soon are you looking to kick off this project?

WEB DESIGN ENQUIRY

What budget guidance are you working on this project?

THANK YOU

Thank you for getting in touch with Yellowball!

We’ve received everything and one of our team will be in touch very soon with the next steps. If your enquiry is urgent, you can call us on 020 8064 1832 – we’re open 9am – 6pm Monday to Friday.

BACK TO HOMEPAGE
YELLOWBALL LITE

The end-to-end delivery of bespoke web project akin to the style and quality of our portfolio typically start from £25,000.

Based on your budget guidance, we’d recommend exploring Yellowball Lite – our flexible WordPress theme that is perfect for small businesses, startups, consultancies and charities. Learn more about Yellowball Lite and speak to one of our specialists on this dedicated site. It’s all the best from Yellowball, now fast, affordable and available anyone, anywhere.

VISIT YELLOWBALL LITE

Step 1

of 5

GRAPHIC DESIGN ENQUIRY

First, we need your contact details…

GRAPHIC DESIGN ENQUIRY

Which design services are you interested in?

GRAPHIC DESIGN ENQUIRY

Anything you’d like to share with us at this stage?
A brief, technical scope, supporting documents or anything else?

GRAPHIC DESIGN ENQUIRY

How soon are you looking to kick off this project?

GRAPHIC DESIGN ENQUIRY

What budget guidance are you working to on this project?

THANK YOU

Thank you for getting in touch with Yellowball!

We’ve received everything and one of our team will be in touch very soon with the next steps. If your enquiry is urgent, you can call us on 020 8064 1832 – we’re open 9am – 6pm Monday to Friday.

BACK TO HOMEPAGE
GRAPHIC DESIGN ENQUIRY

Most design projects at Yellowball are typically more than £500 and our agency-wide hourly rate is £145 plus VAT.

We’re probably not a good strategic fit for this project but you could try the freelancer networks at Fivver.com or upwork.com.

Step 1

of 5

PPC ENQUIRY

First, we need your contact details…

PPC ENQUIRY

Which PPC services are you interested in?

PPC ENQUIRY

Anything you’d like to share with us at this stage?
A brief, technical scope, supporting documents or anything else?

PPC ENQUIRY

How soon are you looking to kick off this project?

PPC ENQUIRY

What budget guidance are you working on this project?

PPC ENQUIRY

What budget guidance are you working on this project?

THANK YOU

Thank you for getting in touch with Yellowball!

We’ve received everything and one of our team will be in touch very soon with the next steps. If your enquiry is urgent, you can call us on 020 8064 1832 – we’re open 9am – 6pm Monday to Friday.

BACK TO HOMEPAGE
YELLOWBALL LITE

Unfortunately, you don’t qualify for a bespoke project, but there is good news!

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

VISIT YELLOWBALL LITE

Step 1

of 6

GOOGLE ANALYTICS ENQUIRY

First, we need your contact details...

GOOGLE ANALYTICS ENQUIRY

Which Google Analytics services are you interested in?

GOOGLE ANALYTICS ENQUIRY

Anything you'd like to share with us at this stage?

GOOGLE ANALYTICS ENQUIRY

How soon are you looking to kick off this project?

GOOGLE ANALYTICS ENQUIRY

What budget guidance are you working to on this project?

THANK YOU

Thank you for getting in touch with Yellowball!

We’ve received everything and one of our team will be in touch very soon with the next steps. If your enquiry is urgent, you can call us on 020 8064 1832 – we’re open 9am – 6pm Monday to Friday.

BACK TO HOMEPAGE

Step 1

of 5

Mobile Menu
Mobile Menu

Award-winning work, focussed on results

Yellowball
Web Design

Air X

Yellowball
Web Design

City & Guilds

Yellowball
Web Design

Ballet with Isabella

Yellowball
Web Design

Tomatin

SEE All PROJECTS
Nov 2018
13 MIN READ

What is the difference between UX and UI?

Nic Lapham

UX and UI are both terms that are bandied around a lot, but there is often confusion as to what the difference is. There are important differences between the two, but they are becoming increasingly inter-mingled, as it is very tricky to have one without the other. This guide will outline the key differences and some of the history and theory of UX and UI design.

The Basics

 

UI (USER INTERFACE)
UI, or User Interface, is the surface look of a website and UI designers aim to maximise the usability and efficiency of a website. They will take into consideration factors such as how the site looks, whether it is visually clean, and generally assess the overall site in terms of its visual appeal. It also includes the design and placement of fonts, and location of navigational buttons. Successfully building a user friendly UI requires a designer to think carefully about how elements like pop-ups and interstitials might affect a user’s ability to understand what a website does or how to use it.

When considering ways to improve UI, as designers we are constantly questioning whether key information is accessible on the site, or ‘is the information displayed in the clearest fashion?’. This will require a UI designer to think about how colour combinations, padding, size, positioning and much more might impede or enhance the user experience.

UX (USER EXPERIENCE)UX stands for User Experience and is a much more widely used term throughout design – unlike UI which is usually limited to web design and products with a digital user interface screen, for example a Sat Nav. UX is a term coined by Don Norman, a cognitive scientist working at Apple in 1993. He explains UX like this:

“Think through all of the stages of a product or service – from initial intentions through final reflections, from first usage to help, service, and maintenance. Make them all work together seamlessly.”

User experience, then, is defined as the end-to-end experience that anyone engaging with a product has, and the experiential response that they might have. Good UX will be pleasing, and intuitive. Lots of successful elements of UX become standardised, for example the ‘hamburger’ menu symbol has become the ubiquitous indicator for ‘click here for more’, and you might use it everyday without even thinking about it.

Generally UI is more changeable, and driven by contemporary design trends that will inform a site’s feel. It is also increasingly incorporating features to help a wider variety of users, such as those who are visually impaired or potentially an older target demographic, in which case larger call-to-actions and buttons can provide a clearer (and easier to use) UI.

UI is an important aspect of UX, but UX also encompasses more structural features like site architecture. You might have a gorgeous site that draws people to it on the sole basis of its excellent design, but if it loads slowly then that will subtract from the UX. On the other hand something like Excel certainly won’t win any beauty prizes for its interface, but it uses familiar and recognisable features which contribute to the overall experience, and therefore UX.

The History of UX Design

When the first computers came onto the market, users had to input vast amounts of code in order to run a program. This all changed in 1984, when Apple came along with the iconic Macintosh computer that promised to ‘show you why 1984 won’t be like 1984’. This was the first to use a Graphical User Interface (GUI) that they could directly interact with for the first time. With innovations like click and drag, and a ‘metaphorical desktop’ which used real life objects like folders to signify virtual objects, it aimed to be as intuitive as possible. It is a testament to its success that many of these elements are now standard across computing interfaces.

Apple have sometimes been accused of being over-zealous in their defence of certain aspects of their UI and UX, although this is partly because they are one of the foremost innovators. They even took Microsoft to court, which took 6 years of litigation, over similarities like ‘click and drag’ and ‘overlapping rectangular windows’. Unfortunately for them, they only managed to win on the ‘Mac-ness’ of Window’s Trash icon, as it was ruled that you ‘can’t own a concept’, so it ended up being a somewhat Pyrrhic victory.

Early Web Design

Standardisation is an important part of UX because people quickly become frustrated with trying to use things that are unfamiliar. This can certainly be seen in early web design, where designers had to compromise between usability and aesthetics. Many of the Web’s early sites used popping bright colours and oversized buttons, with a healthy amount of shadowing and glare. Frankly it didn’t look great.

However at a time when most people were becoming familiar with how the internet worked elements of UI had to be over-blown to make it obvious what to click on. There was also a tendency to use skeuomorphic design – design that mimics real life objects. Many sites now increasingly favour minimalism. Google is probably an extreme example, but a minimal design layout is definitely nicer to look at than the 1999-2010 iteration!

A key factor in the standardisation of UX/UI has been the integration of the internet to our daily lives. 20 years ago, there simply wasn’t the same usage of the web as there is in our modern day. As usage continues to increase it is far easier to identify trends, common denominators, and best practice. This is dictated by both users and designers, resulting in core user behaviours that must be satisfied by standardised UX/UI practices.

Modern UX design

Take a common piece of UI that can be incredibly disruptive for UX: overlays, modals, and interstitials – more commonly known as pop-ups. Almost every website in the EU now includes these because of data privacy laws which require a website to get a user’s consent before they can use their data. Check out Yellowball’s overlay below:

This is good because it does not disrupt the user’s ability to interact with a website. You probably didn’t even interact with it the first time you came on the site, but it is informative and obvious without being intrusive.

Forbes.com, on the other hand has a very disruptive approach to pop-ups:

Now of course a website as large as Forbes can survive having elements that could be considered poor UX because people will visit it in spite of this. Most of us can’t get away with this though, and have to design a website to maximise user experience.

How to create good UX

However, there are good reasons why you might want a pop-up to be slightly disruptive. Users spend longer looking at unfamiliar aspects of a site and tend to ignore what they already know. If you want to attract the attention of a prospective podcast listener or alert someone of something, it can be useful to interrupt the smoothness of their UX. You will have to risk that they might just navigate away from your page if you are being too interruptive though!

Usually if you want someone to spend time on your site, and to feel compelled to delve further into the great content that you have it’s not enough to just have a Spartan approach to design. Unless you only have a very small number of products, anything too minimal can run the risk of appearing clinical. Making sure that you present everything in a fun and eye-catching way is just as important if you want to keep a high retention and encourage click-throughs.

What are the tools for designing UI?

Programs like Sketch and Adobe XD are regularly used by UX and UI designers. These allow a designer to create a ‘wire-frame’ of a website, as well as design some of the features that will eventually be used to navigate around the site. Creating a stripped down wire-frame of your website means that you can think about how a user will navigate around different elements, so it’s very important to spend the time to get it right early on. It’s much like drawing up a floor plan before you create a 3-D rendering.

Sometimes we will design this wireframe in black and white, and build up to incorporate colour and stylistic elements so that the flow of the site is as clear as it can possibly be. Using a well trained design team can significantly reduce the cost and time, when compared with designing the full website straight away. As this will be the most simple version of the end site any problems will be magnified down the line, making this a crucial step to get right from the off.

Once a designer has worked out what will go where on a site they can then start to think about what these different elements will look like, so that it is as obvious as possible for the end user. The move to minimalism is a direct result of good UX and UI design because people have familiarised themselves with how things look. We all know instinctively that if we hover over something that we can interact with, it might change its appearance in response, for example by changing colour or size.

At this point it is practically a cliche to use Apple as an example of minimal design, but look at their website:

There are obvious buttons that are clearly labeled, only a few different elements for you to click on. The interface is clean and you either instinctively know what does what, or you can easily see how you would work it out. There are also nice pictures that are pleasing to look at, and give a clear visual indication of what they are. From a user’s perspective, once you’ve reached the homepage you can navigate to most of the pages that you might want to visit without scrolling or clicking on lots of drop-downs.

Ultimately web design has improved over the years because it has always focused on creating the best possible experience for the user. By using a mixture of cognitive science, good rules of design, and standardised practices, designers have contributed to an internet that is (mostly) an easy place to get around!

Users are sensitive to bad design, even if they aren’t fully aware of how it is affecting their experience. As part of Google’s Panda update the algorithm will also take design elements into consideration and will give preference to well designed sites when it comes to ranking. There is so much available on the internet, and without being a Forbes-level website you can struggle to retain users and cut through the noise. UX/UI is a burgeoning field, with more and more people working specifically on designing a specific page on a website like a form or an e-commerce page. Fundamentally the most important aspect to bear in mind is that UI is the overall appearance of the site, while UX is an all-encompassing approach to how someone will navigate around a site.

BACK TO ALL POSTS

Let's work together

Ready to start your next project? Call, live chat or send us a message today. We're here 9am to 6pm Monday to Friday






    I would like to receive news and information from Yellowball