So you want to build a website or you may already have a website built. We’re here to give you a better understanding of what you need to know when it comes to your website. Many people believe that building a robust, professional website takes adding pictures and writing content and that’s it. Well, grab a coffee, have a seat and get ready to have a better understanding of the various layers of building a website.
Into The Rabbit Hole Of Website Building
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 vs web development vs UX/UI
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
To help clear some of the confusion, below are some basic definitions:
- Web Design — A very broad category that covers everything that relates to designing the aesthetics and functionality of a website. It’s very common to have both UI and UX design, along with many other fields, included withing the web design umbrella.
- Web Development — The technical part of coding the website. And to make things a bit more confusing, web development is further divided into “front-end” and “back-end.”
- User Interface (UI) — A vital specialization of web design that deals with the controls people use to interact with a website or app. Some of which include button displays and gesture controls.
- User Experience (UX) — In today’s competitive business world, this is another specialization of web design. This one attending to user behavior and feeling when using your website or app. In general terms, it makes sure that your website or app does what it’s expected to do from a user’s point of view. If it doesn’t, the user will bounce or not use it.
None of these areas are exclusive from each other. If anything, they are intertwined and would be difficult to work in one without the other. Web design and web development are two sides of the same coin, User Interface design effects User Experience design, and web development holds them all together.
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.
Going Deeper Into The Web Design Building Rabbit Hole
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.
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.
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 Development
The way to tell the difference between Web Design and Web Development is by the use of code. Development is where things get technical, but knowing the basics will avoid some headaches and confusion.
Web development is divided into two main categories:
Front-end or “Client-side”: The code for how website 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 or “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 and sometimes integrate a database. That’s a different topic for another day, database management.
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.
User Interface (UI)
Now that we’ve explained web design and web development, the more specialized fields can be reviewed, 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.
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.
Quick Overview Of Each Field
Now, you should be able to tell apart web design and web 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. By finding your biggest obstacles from the list below, you can find the solution by looking into the corresponding field the obstacle falls under. 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
Overall
Now that you have a better understanding of web design, web development, UI design and UX design, you have a better understanding of what is needed to build a website. If you have a website, you can go over it, target any issues you find and know who to contact to have the issues fixed or addressed. Not everyone has an expert on their staff and that’s where we come in. Whether you need a website built or already have a site, our team can focus on your website while you focus on your business.
Our Marketing Team Is Here To Launch Your Business Forward
Green Monkeys Studio can help you uncover the right strategy for your business to accomplish your goals within your budget. If you want to learn more about what we can do for you, we’d love to talk. At Green Monkeys Studio, we pride ourselves in providing you the best professional services that deliver. We provide top ranking SEO marketing and digital marketing services. Need a new website or update your current one? Our design team is here for you to provide top notch web design services; delivering responsive websites that rank on Google. Reach us at (206) 445-1185 or fill out the form below.