What’s the difference between web design and development? 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.
The ABCs of IT
Let’s start off with some basic definitions to ease your initial confusion and give your some context before we dive deeper:
- Web design — A broad umbrella category for everything that relates to designing the visuals and usability of a website. Both UI and UX design, along with many other fields, are included under web design.
- Web development — The technical part of making a website, focusing on code. Web development is further divided into “front-end” and “back-end,” explained below.
- User Interface (UI) — A specialization of web design that deals with the controls people use to interact with a website or app, including button displays and gesture controls.
- User Experience (UX) — Another specialization of web design, this one dealing with user behavior and feeling when using the site or app. UX design encapsulates many other areas, but views them from the perspective of the user.
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:
- Web design: If a page takes too long to load, there’s either too much content or content that’s too complex. The image files can be compressed, assets can be adjusted & re-exported and pages can be trimmed of excess content.
- Web development: To make content load faster, we can try better file compression to reduce the file sizes of the content, CSS sprites to save bandwidth or a content delivery network to improve loading times in specific geographical regions.
- UI: Controls must be as responsive as possible, so the interface must be simple enough that interactivity is instantaneous.
- UX: The likelihood a user will “bounce” (leave your site after just a few moments) increases with every second of loading time, so we should prioritize reducing the load time on the home and landing pages first before addressing the problem site-wide.
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:
- Designers who can code sometimes label themselves as the all-in-one package, but in reality they’re more limited than two separate specialists (though sometimes this might be a smart hire if you have a simple site).
- UI designers have many overlapping skills with web designers, so some people will use those titles interchangeably.
- UX and UI are often lumped together, considering they’re both sub-specializations.
- UX is often treated as a skill in other professions, even outside of design, such as a product management.
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
—
“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.
What to look for when hiring a web designer…
- More than anything, you need to know what you want before you can find the best web designer for you. Because of so many specializations, it’s not about whether a designer is good or bad, but whether they’re a good fit for you.
- Pay attention to their portfolio. With the emphasis on graphic design, web designers each have their own unique artistic styles.
- Look for a mastery of the aspects you value. If you have a text-heavy site, see how they handle typography, readability and page layout. If you’re building an ecommerce store, see if they know what makes a good product page.
- Is their preferred software compatible with what the rest of your team uses? There’s a lot of different design software—Adobe Photoshop, Illustrator, InDesign and Sketch, as well as prototyping software like UXPin or Balsamiq. Check with your other staff to see what your options are.
- Ask your designer about their design process and its time frame. Designers all have their own methods and design cycles, so double-check that you’re hiring someone that fits your company culture as well as its schedule.
Web development
—
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.
What to look for when hiring a web developer…
- Be sure to see if they’re fluent in the languages you need. If you can’t tell the difference, tell them what you’d like to do with your site and listen to their recommendation.
- Although not required, it’s helpful for a developer to be involved with the design process. For example, a developer could preemptively tell a designer if their choices are possible, saving time on revisions in the long-run. You may want to look into how well your developer works with a team, since some prefer to work autonomously.
- Review their previous websites through a lens of functionality. Does everything work as it should? Any flags pop up? You may not know enough about development to understand how it works, but you certainly know what it’s like to be a normal person using a site.
User interface (UI)
—
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.
What to look for when hiring a UI designer…
- A UI designer’s portfolio should tell you everything you need to know. Test drive your candidate’s previous sites and see how easy it is. Can you find everything you need? Was using the site/app frustrating or easy?
- More-so than other categories, look for past work in the specific type of project you’re hiring for. The world’s best website UI designer might be awful at making an interface for a gaming app. Hire someone who has the right experience.
User experience (UX)
—
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 to look for when hiring a UX designer…
- Just like with UI designs, you want to “test drive” previous sites or apps from your candidate. Are they easy to use? Are you enjoying the experience of using their site?
- If you don’t have the budget to hire a separate UX designer, ask candidates in other fields about their UX expertise. These duties can sometimes be handled as a crossover effort from different teams; a product manager or marketer can explain what they want the UX to be, and then the design team handle the visual design and implementation.
What about template sites?
—
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:
- If you’re using a template site, you don’t need to worry as much about backend development.
- Template sites usually have limited and fixed options for UI.
- Make sure candidates have experience in whichever site you’re hosting yours on. Being good at WordPress doesn’t necessarily translate to being good at Squarespace.
Other than those exceptions, using a template site is similar to any other site. Pick your designers according to what you need most.
Which one do 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
- site isn’t responsive (meaning the site doesn’t look good on mobile devices)
- site looks outdated
- low quality graphics
- customers aren’t going to the pages you want them to
- time on page is too short
Web development
- bugs (site functions not working as they should)
- web security & hack prevention
- too many 404 errors
- too many failed DNS lookups
- site goes offline
- certain content fails to load
UI
- poor navigation
- lack of customization options
- lack of social sharing options
- complaints about “how do I do this” or “where can I find that”
UX
- poor conversion rates (lots of traffic but few conversions)
- high bounce rate (visitors leaving after a few seconds)
- users are not finishing content (videos or blogs)
- fragmented visits, i.e., user leaves after one page and instead of staying and exploring
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.
