Web design, web development, UI and UX: What’s the difference and which do you need? - 99designs (2022)

What’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.

Web design, web development, UI and UX: What’s the difference and which do you need? - 99designs (1)

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.
Web design, web development, UI and UX: What’s the difference and which do you need? - 99designs (2)

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 freelancerson a project-by-project basis.

(Video) Web Design vs Web Development | What's right for you?

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.

Web design, web development, UI and UX: What’s the difference and which do you need? - 99designs (3)

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.

Web design, web development, UI and UX: What’s the difference and which do you need? - 99designs (4)

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.

(Video) Using AI to Create a SICK Web Design

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 website design, see if they know what makes a good product page. Check out the best ecommerce website designers here.
  • 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.

(Video) Web Design for Beginners | FREE COURSE

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.

Web design, web development, UI and UX: What’s the difference and which do you need? - 99designs (6)

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.

Web design, web development, UI and UX: What’s the difference and which do you need? - 99designs (7)

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?”

Web design, web development, UI and UX: What’s the difference and which do you need? - 99designs (8)

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.

(Video) 5 Websites To Find Remote UI / UX Design Jobs

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?

Web design, web development, UI and UX: What’s the difference and which do you need? - 99designs (9)

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

(Video) Adobe XD to HTML CSS

  • 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.

Want to learn more about web design? Check out our article on how to create a website!

FAQs

What is the difference between UI UX design and web design? ›

Web design is the base or the foundation, UI design is the architecture, and the UX design is the electric, plumbing, and other wiring needed. Before we get into defining these terms, we can say there can be a lot of overlap between them.

Is UI UX same as Web development? ›

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.

Is web developer and UX designer the same? ›

They're each working on two separate—but related—sides of the same product. Although both skillsets are required to build a website that meets the needs of the people hoping to use it, in a practical sense a web developer and a UX designer do not work side by side, but rather one after the other.

Is UX needed for web design? ›

As I said above, UX design is typically linked to product or app design and Agile Project Management. But that doesn't exclude UX from being needed in website builds. A focus on the user is necessary everywhere, online and offline.

Should I learn UI or UX first? ›

UX design usually comes first in the product development process, followed by UI. The UX designer maps out the bare bones of the user journey; the UI designer then fills it in with visual and interactive elements.

Does UX design require coding? ›

If you are considering getting into UX/UI design, you're probably wondering the same thing. The short answer is no. UX design does not require coding.

Which is best UI UX or web development? ›

That depends on your perspective. If you're a designer, then UI is probably more important to you. If you're a developer, then UX is probably more important to you. But ultimately, both UI and UX are important to creating a great user experience.

Can a web developer be a UX designer? ›

The good news is that many of the skills you've gained as a web developer will be a great asset as a UX designer. The biggest benefit of moving from web development to UX design is the amount of overlap between the two fields.

Should I learn UI UX as a web developer? ›

Learning UI Ux is essential when making a website. Writing good code functional code is great but without UI UX, users will not have a good experience using your website or web application. Since it's an approach to development, anyone can learn about it reasonably quickly.

Does Web design require coding? ›

Most web designers need at least some knowledge of basic programming languages, such as HTML, CSS, PHP, jQuery, JavaScript and Flash. Freelancers need more coding knowledge, while web designers employed with an agency will likely work on a team that includes programmers and graphic designers.

Which is better web developer or web designer? ›

If you're drawn to the pragmatic, technical side of projects, a web developer is a sensible career option. However, if you're more interested in color theory, branding, and the creative element of building websites, a web designer is likely a more practical career choice.

Who earns more UX designer or developer? ›

Who makes more money, on average? The internet all points to UX Designers making more money.

Is web design the same as web development? ›

While a web designer might create a button, a web developer ensures that something actually happens when the button is clicked. Web developers may focus on either the front end (more visual; what the user sees) or back end of the website (more functional; how the website works) — or both.

Which is better UI or UX? ›

If you love to design the product, love to decide the overall layout, size, color animation part and present that with your creative thought process then UI is better for you. Most of the companies hire a single person for both of the UX and UI job role, so you can also choose both.

Does Web design require coding? ›

Most web designers need at least some knowledge of basic programming languages, such as HTML, CSS, PHP, jQuery, JavaScript and Flash. Freelancers need more coding knowledge, while web designers employed with an agency will likely work on a team that includes programmers and graphic designers.

Videos

1. UI / UX Design Tutorial – Wireframe, Mockup & Design in Figma
(freeCodeCamp.org)
2. Laptop Web UI Design Tutorial For Beginners
(Dev Ed)
3. TOP 5 WEBSITES EVERY WEB DESIGNER SHOULD VISIT: Mind-blowing web design | March 2020
(Flux Academy)
4. Amazing Image Accordeon JQuery | JQuery Accordion Tutorial
(Fd Web design)
5. UI in Web Design for Phones | UX Everything
(UX Everything)
6. Designing a website - Episode 1: Planning & site map!
(CharliMarieTV)

You might also like

Latest Posts

Article information

Author: Manual Maggio

Last Updated: 10/01/2022

Views: 6334

Rating: 4.9 / 5 (49 voted)

Reviews: 80% of readers found this page helpful

Author information

Name: Manual Maggio

Birthday: 1998-01-20

Address: 359 Kelvin Stream, Lake Eldonview, MT 33517-1242

Phone: +577037762465

Job: Product Hospitality Supervisor

Hobby: Gardening, Web surfing, Video gaming, Amateur radio, Flag Football, Reading, Table tennis

Introduction: My name is Manual Maggio, I am a thankful, tender, adventurous, delightful, fantastic, proud, graceful person who loves writing and wants to share my knowledge and understanding with you.