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.

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 you 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 specialties—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 the 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 the 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 control 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.