Are they the same?
You’ve very possibly heard these two common initials with web design: UI and UX. It’s a common question I am often asked. Are they the same thing? Are they different? Is one more important than the other? If you were to ask UI and UX to explain their relationship to one another, their reply would be “We go together like Ramma lamma lamma ka dinga da dinga dong.” You’ll be singing that song all day now 🙂
When it comes to website design, UI and UX are very much a needed tag team that’s everything for any website.
User Interface
Let’s first talk about UI – the User Interface. The UI includes looking at things in your web design like:
- font families
- colors
- image selection
- general layout
- font sizes
- other visual aesthetics of the site
Tasks such as choosing a color pallet, designing interactive elements buttons, and general page layout all fall under the umbrella term of User Interface.
Since this is the visual components of the site, it can’t be taken lightly by any web designer. These elements are what will pull a user into the site and keep them engaged and active, not the website. You can have the greatest content ever written for a website (award quality content), but if the UI is not well thought out and designed, the user is never going to read that content.
There are several things that a quality web designer must keep in mind when setting up a UI for a website. As much as we’d love getting to use any color in the spectrum, we need to pick colors that fit the overall brand and message of the client. If a client has a bright and cheery brand, we aren’t about to design a dark and dreary website, no matter how great it might look.
Back in the wild wild west days of web design, we had 8 fonts to choose from. Today, with tools like Google Fonts, we can work with an endless supply of fonts. Several fonts work great on the web, while others simply don’t make the grade. Being able to match fonts and colors to a website design (that match and reflect a client’s brand) is one of the key roles of a web designer.
User Experience
When it comes to the UX – the User Experiences – it’s all about the overall functionality of the website for the users. It involves researching the client, their goals, the SEO matrix, and defining the path to success for the website. When focusing on UX for a website, we’re often look at things like website layout, ease of navigation, testing for performance, SEO keywords to focus on, and more.
It’s in the role of the UX developer to also “test” the website at all different screen sizes to ensure that the site is mobile friendly. Since most websites get most of their traffic from mobile devices, this step warrants as much attention as possible. It’s often the UX developer who will provide insight as to what sections of a website show up first, second, last, or on a different page altogether.
It’s also in the UX where the web developers on the project must ensure that everything on the site is working flawlessly. Whether it’s the:
- Internal page links
- Google Analytics tracking
- Custom programing
- Contact form submissions
- Overall CSS
- WordPress plugins installed and setup
- Several other behind the scenes type things
The UX is all about making sure the user experience is perfect.
They truly are everything together
Having amazing UI but horrible UX will lead to disaster. Your website can look amazing, but if nothing works it won’t match the needs of the client. Having the greatest UX but horrible UI will get you no further, either. The website could be the most functionally perfect site, but if users won’t engage with it then you’ve missed the opportunity to connect.
The two truly do go together. Too much of one, not enough of the other, will lead to ruin and a failed site. Finding the balance between the two is the key. Because of that, the UI designer and UX developer must work in perfect tandem much like a world class tag team.
Without both great UI and UX, a site is sure to fail. Put the two together, and the site will be just like ramma lamma lamma ka dinga da dinga dong.
