Having a beautiful web design with poor development will set you up for a lifetime of heartache. Make sure your website code loads fast, is secure, works flawlessly on all browsers and screen sizes, and is set up for the longterm. These are must-haves regardless of the Content Management System (CMS) you choose.
hat’s the difference between web design and development? And what about UI vs UX? What do these divisions mean? Why are there so many acronyms?? Don’t tech people want everything to be user friendly!?
If you’re new to getting a website designed, coming across the terminology of the tech industry can feel a lot like listening to a foreign language—except most foreign languages have rhyme and reason. But working with a web professional is something every business should do at some point; if you want a successful website, you may need a translator.
That’s what this article is for. If you’re getting your first website designed or just looking to understand the industry better, here we explain and dissect four of the most used and most troublesome terms in tech today: UI, UX, web design and web development. After reading this, you’ll not only know what each field does, but also which one you need your business to focus on most.
Let’s start off with some basic definitions to ease your initial confusion and give your some context before we dive deeper:
As you can see already, none of these areas are exclusive and there’s tons of overlap. Web design and development are just two sides of the same coin, UI design influences UX design, web development supports them all… it’s less about which fields handle which tasks, and more about how each field considers the same task from a different point-of-view.
For example, let’s look at loading times, a common problem for every website. How does each field address loading times:
In a perfect world, you would hire a specialist or team of specialists for each of these fields so you have an expert looking at your website from all angles. However, budgetary constraints often mean choosing one field over the other, or hiring freelancers on a project-by-project basis.
Occasionally you’ll find someone who claims to do it all:
Such people can be useful in a pinch, but just remember that a jack of all trades is master of none—they may know the basics of multiple fields, but they’ll likely only be an expert in one, if any.
You also want to make distinctions between websites & apps and desktop & mobile. Each worker has their own individual specialities—some developers have more experience building mobile sites; some designers stick exclusively to apps and never do websites. Again, there’s plenty of overlap, but if you’re hiring for a specific project, make sure your candidates can handle the specifics.
So which one of these specialists can help you with your particular business goals? And what should you look for when hiring them? Let’s take a deeper look at each now.
“Web design” is a bit of an archaic term, dating back to the days when a single person handled all the design aspects of a website. By modern standards, the term “web designer” can be a bit vague; today, thanks to technology and our increased understanding of the craft, we have a rainbow of subdivisions.
The subcategories of web design include both UI and UX, but also other fun acronyms like IA (information architecture, dealing with site mapping and navigation) and CRO (conversion rate optimization, fine-tuning the site’s design to increase sales, signups or other specific actions). There are dozens of these subcategories, with new ones created every day as designers try to get better jobs in a competitive market.
Generally speaking, web design relates to the visuals and functionality of a web site. It’s a field intrinsically tied to graphic design at every level, and deals with the same design principles of visual communication.
But web design is more than just graphic design. Whether working with websites or apps, designers must know functionality, technical constraints, digital trends and user expectations, which change frequently.
There’s also a degree of business know-how in web design: designers should understand digital sales tactics, such as how to place the “call-to-action” (CTA) button for eliciting sales and email signups. Site layout heavily influences user behavior, but because it’s so nuanced, some designers are better at it than others.
The web designer handles traditional graphic design concerns like color and typography along with digital concerns like choosing the best aesthetics for different screen sizes. They also require an understanding of business concepts like leading and closing to create layouts that make the call-to-action more appealing. After all, a designer’s duties sometimes include making the icons, graphics or interface buttons from scratch, which draws on expertise from all three.
As far as specific job responsibilities, the design process is mostly up to the designer, as long as they work within existing brand guidelines. Typically the process involves the designer creating prototypes of the design, and then testing those prototypes with either actual users or stakeholders, and then incorporating feedback into future designs.
Designers can also make wireframes, bare-bone layouts of a design to prepare for a prototype, or a mockup, a pixel-perfect image of what the screen will look like except without interactivity.
Once the prototype is approved, it’s sent to the developer for coding.
Web design and development are distinguished by the use of code. Development is where things get technical, but the good news is you don’t have to know what your developers are talking about as long as they do (though it’s certainly helpful to learn the basics).
Web development is divided into two main categories:
Front-end (a.k.a. client-side): The code for how web site (or app) is displayed on screen. The front-end developer is in charge of bringing the web designer’s vision to life, typically using computer languages like HTML, CSS and JavaScript. Naturally, not everything the designer planned is realistically feasible, so the front-end developer often works back-and-forth with the designer.
Back-end (a.k.a. server-side): The “front-end” pulls from a digital system of resources hosted on a server. The back-end developer manages those behind-the-scenes resources, coding the data in the database and optimizing how that data gets delivered. They use languages like PHP, Ruby, Python, Java or .Net.
Similarly, a full-stack developer is someone who can handle both front-end and back-end development. Sometimes they’re a smart option for startups who can’t afford more than one hire, but ideally you’d have a whole team of developers with diverse specializations.
Now that we’ve explained web design and development, we can discuss the more specialized fields, starting with user interface design. UIs are something everyone uses without giving much thought to—you don’t need to know the history of the hamburger icon to know that the button with three lines is your menu.
And that’s an ongoing principle in most web design fields: if their jobs are done well, you shouldn’t even notice them. This is most prevalent in UI design: with a truly intuitive interface, the user doesn’t have to think about it to use it.
If you have to actively think about how to use the controls, it’s considered bad UI design. Searching for the button you need or spending a few seconds figuring out what a button does both distract you from the overall experience of using the site. The goal of UI design is not only to provide all the controls a user could want, but also to create self-explanatory controls that users understand at a glance.
Another concern is space-management. UI designers have to find the happy medium between giving users a lot of options and conserving screen space. That’s how techniques like hover controls and pull out menus came about. It’s the duty of the UI designer to decide which controls need to present at all times and which are negligible enough to hide or disregard completely.
UI design often coincides with another field called interaction design with the abbreviation “IxD”. Interaction design specializes in all the ways a user interacts with the system, including the interface but also areas like pop-up, chat and error windows. Because interaction design emphasizes user behavior so much, it’s like a halfway point between UI and UX design.
In many ways, UX is like the field of web design from the perspective of the user. How does the web page layout affect the user? How does the UI affect the user? When you progress to the advanced stages, UX becomes far more strategic, as in, “how do we design a page to make the user want to sign up?”
As you can imagine, UX design also incorporates many other fields in web design. A lot of people talk about “UI vs UX,” but the truth is that the two work together instead of competing. In fact, there’s so much overlap that all kinds of web designers can benefit from knowing a little about UX. That’s precisely how UX became a separate discipline—hiring an individual UX specialist relieves a bunch of other responsibilities from the rest of the team.
Although it may seem superfluous at first, there’s actually a direct correlation between UX design and business goals like sales or conversions. Considering that much of human decision-making comes from emotion and gut instincts, it makes sense that optimizing the design of a web site can encourage certain behaviors and create an atmosphere more conducive to those behaviors.
For that reason, UX designers also draw a lot on graphic design principles: attracting attention with size, eliciting the right emotions with colors, creating a predictable visual flow across the screen and placing CTAs in the right spots. However, unlike traditional graphic design, UX specialists must also factor in additional concerns like interactivity and timing, making it a discipline completely separate from all others, while simultaneously interconnected to them all.
What about if you’re using a template site like WordPress, Squarespace or Wix? Do you still need a complete team? Do you need anyone extra?
Template sites follow most of the same rules, with some major exception:
Other than those exceptions, using a template site is similar to any other site. Pick your designers according to what you need most.
By now, you should be able to tell apart web design and development and you know that “UI vs UX” is not as accurate as “UI + UX.” The question is, which one should you prioritize most if you can’t hire specialists for them all?
There’s no universal answer for that one. Because these fields each deal with different areas, it all depends on your company’s unique needs. Considering your own goals and shortcomings, you may need one specialist more than the others.
To help you understand which one you need most, here’s a short list of the problems each field specializes in solving. Find your biggest obstacles below and look into the corresponding field for the solution. If you already have an existing site, conduct some user tests beforehand to see what complaints actual users have.
Web design
Web development
UI
UX
Of course, some problems can be fixed by different methods, as we explained with the example of slow loading times above. That’s why it’s important to know what aspects you want to prioritize, so that whatever solution you choose is most aligned with your priorities.
Want to learn more about web design? Check out our article on how to create a website!
Fill in the form and we will get back to you within 2 business days.
