Web design, web development, UI and UX: what is the difference?

What is the difference between web design and web development? And what about UI versus UX? What do these divisions mean? Why are there so many acronyms? Non-tech people want everything to be user-friendly!

If you have not designed a website before, listening to a foreign language may seem like the terminology of the technical industry, except that most foreign languages ​​rhyme and reason. But working with a web designer is something that every company should do at a given moment; if you want a successful website, you may need a translator.

If you have your first website designed or if you want to better understand the industry, we will explain what four of the most used and trickiest terms in contemporary technology are: UI, UX, web design and web development.

Wireframe of new website design, via Pexels

Let's start with some basic definitions to ease your initial confusion and to provide your context before we dive deeper:

Web design

- A broad umbrella category for everything that has to do with designing the images and the usability of a website. Both UI and UX design, along with many other fields, are included in web design.

Web development

- The technical part of creating a website, with an emphasis on code. Web development is further subdivided into 'front-end' and 'back-end', explained below.

User Interface (UI)

- A specialization of web design that deals with the controls that people use to communicate with a website or app, including button displays and motion controls.

User Experience (UX)

- Another specialization of web design, this relates to user behavior and feeling when using the site or app. UX design includes many other areas, but looks at them from the user's perspective.

As you can see, none of these areas is exclusive and there are many overlaps. 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 views the same task at a different point - view.

For example, let's look at loading times, a common problem for every website.

Web design

: if the loading of a page takes too long, there is too much content or content that is too complicated. The image files can be compressed, items can be adjusted and re-exported, and pages can be trimmed from excess content.

Web development

: To speed up content loading, we can try better file compression to reduce content file sizes, CSS sprites to save bandwidth, or a content delivery network to improve loading times in specific geographic regions.

User interface

: Controls must be as responsive as possible, so the interface must be simple enough to enable interactivity immediately.

UX

: the chance of a user “bouncing back” (leaving your site after a few moments) increases with every second of loading time, so we must first give priority to reducing the loading time on the home page and the landing page before the problem occurs throughout the site is being tackled.

In a perfect world you would hire a specialist or a team of specialists for each of these fields so that you can have an expert look at your website from all angles. However, budget constraints often mean that you choose one field over another, or that you hire freelancers on a project basis.

Occasionally you will find someone who claims to do everything:
Designers who can code can sometimes call themselves the all-in-one package, but in reality, they are more limited than two separate specialists (although this is sometimes a smart rental if you have a simple site).
UI designers have many overlapping skills with web designers, so some people will use these titles interchangeably.
UX and UI are often lumped together, since they are both sub specializations.
UX is often treated as a skill in other professions, even outside of design, such as product management.

Such people can be useful, but remember that an all-rounder is in control of nothing - they may know the basics of multiple fields, but they will probably only be an expert in one or more fields.

You also want to distinguish between websites & apps and desktop & mobile. Every employee has their own individual specialties - some developers have more experience with building mobile sites; some designers only stick to apps and never do websites. Again, there is a lot of overlap, but if you are recruiting for a specific project, make sure that your candidates can handle the details.

So which of these specialists can help you with your specific business goals? And what should you look out for when hiring them? Let us now each look deeper.

Web design

Web design “is a bit of an archaic term, dating back to the time that a person dealt with all design aspects of a website. According to modern standards, the term "web designer" can be a bit vague; today, thanks to technology and our increased understanding of the vessel, we have a rainbow of subdivisions.

The subcategories of web design include both UI and UX, but also other nice abbreviations such as IA (information architecture, dealing with site allocation and navigation) and CRO (conversion rate optimization, coordination of site design to increase sales, sign-ups or other specific actions). There are dozens of these subcategories, with new ones being created every day while designers try to get better jobs in a competitive market.

In general, web design refers to the images and functionality of a website. It is a field that is intrinsically linked to graphic design at every level and that deals with the same design principles of visual communication.

But web design is more than just graphic design. Whether it comes to working with websites or apps, designers need to know which functionality, technical limitations, digital trends, and user expectations often change.
There is also a certain amount of business know-how in web design: designers must understand digital sales tactics, such as how the "call-to-action" (CTA) button can be placed to call up sales and email registrations. The layout of the site has a major impact on user behavior , but because it is so nuanced, some designers are better at it than others.

The web designer processes traditional graphic designs, such as color and typography, together with digital points of interest, such as choosing the best aesthetics for different screen sizes. They also require insight into business concepts such as lead and close to create layouts that make the call-to-action more attractive. The duties of a web designer sometimes even consist of creating the icons, graphics or interface buttons, which is based on the expertise of all three.

Insofar as specific task responsibilities are concerned, the design process is largely up to the designer, as long as they work within the existing brand guidelines. Typically, the process involves the web designer making prototypes of the design and then testing those prototypes with actual users or stakeholders and then incorporating feedback into future designs.

Web designers can also create wireframes, bare 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 approved, the prototype is sent to the developer for coding.

What to look out for when hiring a web designerMore than anything else, you need to know what you are looking for before you can find the best web designer for you. Because of so many specializations, it is not about whether a designer is good or bad, but whether they are suitable for you.

Pay attention to their portfolio. With an emphasis on graphic design, web designers each have their own unique artistic styles.
Look for a mastery of the aspects that you value. If you have a text-heavy site, you can see how they handle typography, readability and page layout. If you are building an e-commerce store, see if they know what a good product page is.
Is their preferred software compatible with what the rest of your team uses? There are many different design software : Adobe Photoshop, Illustrator, InDesign, and Sketch, as well as prototype software such as UXPin or Balsamiq. Contact your other employees to see what your options are.

Ask your web designer about their design process and timetable. Designers all have their own methods and design cycles, so make sure you hire someone who fits your corporate culture and schedule.

Web development

Web design and development are distinguished by the use of code. Development is where things become technical, but the good news is that you don't have to know what your developers are talking about as long as they do (although it is certainly useful to learn the basics).

Web development is divided into two main categories:Front-end (client-side): the code for how the website (or app) is displayed on the screen. The front-end developer is responsible for bringing the web designer's vision to life, usually using computer languages ​​such as HTML, CSS, and JavaScript. Of course, not everything the designer has planned is realistic, so the front-end developer often works back and forth with the designer.

Back-end (server-side): the "front-end" extracts from a digital system of sources that are hosted on a server. The back-end developer manages those resources behind the scenes, encodes the data in the database and optimizes the way that data is delivered. They use languages ​​such as 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 are a smart option for startups who cannot afford more than one investment, but ideally, you would have a whole team of developers with different specializations.

What to look out for when hiring a web developerMake sure you know if they are fluent in the languages ​​you need. If you cannot see the difference, tell them what you would like to do with your site and listen to their recommendations. Although this is not mandatory, it is useful for a developer to be involved in the design process. For example, a developer can preventively tell a designer if his choices are possible, saving him time in the long term with revisions. You may want to see how well your developer works with a team because some prefer to work autonomously. Review their previous websites through a lens of functionality.

Does everything work as it should? Does a flag appear? You may not know enough about development to understand how it works, but you are sure what it is like to be a normal person using a site. User Interface (UI) - Now that we have explained web design and development, we can discuss the more specialized fields, starting with the design of the user interface.

UIs are something everyone uses without thinking about it - you don't need to know the history of the hamburger symbol to know that the three-line button is your menu This is most common in UI design: with a truly intuitive interface the user does not think about using it. If you need to think actively about using the controls, this is considered a bad UI design.

Searching for the button you need, or spending a few seconds figuring out what a button does, distracts you from the overall experience of using the site. The purpose of UI design is not only to provide all the controls that a user needs, but also to create self-explanatory controls that users understand at a glance. Another concern is space management.

UI designers must find the ideal medium to offer users many options and save screen space. That is how techniques such as float control and slide-out menus were developed. It is the task of the user interface designer to determine which controls must be present at all times and which are negligible enough to completely hide or ignore.

UI design often coincides with another field called interaction design with the abbreviation “IDX”. Interaction design specializes in all the ways in which a user communicates with the system, including the interface, but also in areas such as pop-up, chat and error windows. Because interaction design places so much emphasis on user behavior , it is about halfway between UI and UX design.

What to look for when hiring a UI designer ...The portfolio of a UI designer must tell you everything you need to know. Test your candidate's previous sites and see how easy it is. Can you find everything you need? Was the use of the site/app frustrating or easy?

More than other categories, look for work in the past in the specific type of project you are looking for. The world's best website UI designer may be bad at creating an interface for a gaming app. Hire someone who has the right experience.

User Experience (UX)

In many ways, UX appears to be in the field of web design from the user's perspective. How does the layout of the web page affect the user? How does the user interface affect the user? When you move on to the advanced stages, UX becomes much more strategic, such as in "how do we design a page so the user wants to log in?"

As you can imagine, UX design also contains many other fields in web design. Many people talk about 'UI versus UX', but the truth is that the two work together instead of competing. In fact, there is so much overlap that all kinds of web designers can benefit from a little knowledge about UX. That's exactly how UX became a separate discipline - hiring an individual UX specialist relieves a lot of other responsibilities from the rest of the team.

Although initially, it seems unnecessary, there is actually a direct correlation between UX design and business goals such as sales or conversions. Given that much of human decision-making comes from emotions and intuition , it makes sense that optimizing the design of a website can stimulate certain behaviors and create an atmosphere conducive to that behavior.

For that reason, UX designers also draw a lot of attention to graphic design principles: drawing attention with the right dimensions, evoking the right emotions with colors, creating a predictable visual flow across the screen and placing CTAs in the right places. However, unlike traditional graphic design, UX specialists must also take into account other concerns such as interactivity and timing, making it a discipline that is completely separate from all others while at the same time being connected to everything else.

What to look for when hiring a UX designer ...Just like with UI designs, you want to 'test' previous sites or apps of your candidate. Are they easy to use? Do you enjoy the experience of using their site?

If you do not have the budget to hire an individual UX designer, ask candidates in other areas about their UX expertise. These tasks can sometimes be treated as a crossover effort by different teams; a product manager or marketer can explain what they want the UX to be, and then the design team handles the visual design and implementation.

What about template sites?

What if you use a template site such as WordPress, Squarespace or Wix? Do you still need a complete team? Do you need someone extra?

>Template sites follow most of the same rules, with one important exception:
If you use a template site, you don't have to worry as much about the backend development.
Template sites usually have limited and fixed options for UI.
Make sure that candidates have experience on whatever site you host. Being good in WordPress does not necessarily translate into being good in Squarespace.
Apart from these exceptions, the use of a template site is comparable to another site. Choose your designers based on what you need the most.

Which do you need most?

In the meantime, you should be able to distinguish web design and development separately and you know that "UI versus UX" is not as accurate as "UI + UX". The question is, which should you prioritize most if you can't hire specialists for all of them?

There is no universal answer for that. Because these fields each cover different areas, it all depends on the unique needs of your company. If you are considering your own goals and shortcomings, you may need one more specialist than the others.

To help you understand which you need the most, here is a shortlist of the problems that each field has to specialize. Find your biggest obstacles below and look in the corresponding field for the solution. If you already have an existing site, do some user testing beforehand to see which complaints users actually have.

Web design

site not responding (which means the site does not look good on mobile devices)
site looks outdated
images of low quality
customers do not go to the pages you want
the time on the page is too short

Web development

bugs (site functions don't work as they should)
web security & hack prevention
too many 404 errors
too many failed DNS searches
site goes offline
certain content cannot be loaded

ONION

poor navigation
lack of customoptions lack of options for social sharing
complaints about "how do I do this" or "where can I find it"

UX

poor conversion rates (high traffic but few conversions)
high bounce rate (visitors who leave after a few seconds)users are not rounding off content (videos or blogs)
fragmented visits, ie the user leaves after one page and stays and investigates instead

Of course, some problems can be solved in different ways, as we explained with the example of slow loading times above. That is why it is important to know which aspects you want to prioritize so that the solution you choose best fits your priorities or choose the best web design company.