When you think of UX/UI, you probably think of artists, designers, and maybe even project managers, but you rarely think of web developers. The truth is that most UX/UI design nowadays revolves around web-first interfaces. The vast majority of the work produced by UX/UI designers is eventually implemented by web developers, so it’s important to understand how these two components work together to create the products that we consume everyday.
What is UX/UI Design?
As you probably know, UX stands for “User Experience” and UI stands for “User Interface.” Both are crucial aspects to creating a product that people want to use. Generally, a single person can serve as both the UX designer and the UI designer, which is why we usually use the term “UX/UI design.”
In today’s world, a product’s graphical interface is an integral part of the user experience, so it makes sense that one person can serve both functions. And, it might surprise you to learn that a UX/UI Designer not only plays two roles, but is also usually working with multiple different software development teams at once. But that makes sense: it usually takes longer to develop software than it does to decide on how that software should look. More on how web developers and UX/UI designers interact later---for now, let’s learn more about what it means to be a UX/UI designer.
UI Design
We know it’s called UX/UI design and not UI/UX design, but we think the concept is easier to understand if we start by explaining what UI Design is. Here goes: UI Design is the more specific term and deals exclusively with the overall look of a design. A UI designer focuses on how individual elements of the user interface look and function. The goal of a UI designer is to create a product that looks attractive and that is both interactive and easy-to-use.
UX Design
UX Design is the more broad term and deals with not only how a product looks, but also how it feels to a user. A UX designer is tasked with making products (not individual UI elements) that are accessible and feel enjoyable to its users. Furthermore, a UX designer should make sure that all of the UI elements in a product work together to form a seamless experience that keeps users coming back.
One concept you’ll often hear associated with UX Design is the idea of a “user journey.” A UX designer should be able to map out how a customer uses a product from beginning to end in order to build an experience that is always frictionless and intuitive. This means not just knowing the UI inside-and-out, but also being aware of what a user expects from a product and how the user can achieve their goals.
What is Web Development?
If you’re like us, then you use the web every single day! The internet is this massive collection of websites that provide us with goods and services, fact and fiction, and entertainment and education. Yet, most of us don’t really know how all that gets created. Today, let’s learn a little bit about what it means to be a web developer.
What is a website?
Yes, we know you know what a website is, but do you know what it's made of? Or how it works? In the most basic sense, web development is the creation of websites. To give you a quick rundown, there are two kinds of websites: static and dynamic. Static websites are websites that don’t change unless a web developer modifies the source files and “re-deploys” the website. This means that a static website will be the same for every user that visits it, always. A dynamic website, on the other hand, is a website that users can interact with and they may be able to do things such as add comments or change the content; there’s no guarantee that the website will serve the same content for any user that visits it.
Now that we have a basic understanding of what a website is, it’s time for us to become more familiar with what a web developer does. In general there are two categories of web development: front-end and back-end. Let’s dive in!
What is front-end web development?
Front-end web development deals directly with the parts of a website with which a user might interact. Front-end web developers create graphical user interfaces (GUI) primarily using HTML, CSS, and JavaScript. Though it’s possible to write your client-side logic in a language that’s not JavaScript, it’s very unlikely that the browser used by the everyday people navigating to your website can understand any other language. For compatibility reasons (and because modern JavaScript is incredibly easy to use), the overwhelming majority of front-end developers call JavaScript their language of choice.
Speaking of easy, many simple websites may feature only a front-end and be nothing more than a collection of pages with some navigation (this is what we referred to as a static website earlier). Unless you need to store state or do some more intense computation on a server, it’s perfectly acceptable (some would even say advisable) that your website consists entirely of a front-end. But that doesn’t mean that a back-end isn’t an important part of web development.
What is back-end web development?
Back-end web development deals with everything a user doesn’t interact with directly: databases, servers, business logic, and creating APIs. Though less visible than the front-end, most large and enterprise-level websites depend on the backend to provide the front-end with the data it needs to create an exciting experience for its users.
What is full-stack web development?
You’re a smart cookie, so you could probably guess this one! Full-stack web development combines front-end and back-end web development to create a website from end-to-end. A full-stack web developer is someone who is skilled in both creating GUIs as well as APIs and is comfortable writing code on any component of a website.
Bonus: what is infrastructure engineering?
Similar to a back-end engineer, only a large, complicated product needs infrastructure engineers. They help design, build, and coordinate the environment(s) needed to build, run, and deploy the front-end and back-end of a product. For most modern websites, whatever hosting platform is being used takes care of all the infrastructure and the developer never has to worry about it.
What’s the Difference Between Web Development and UX/UI Design?
A whole lot! While both web developers and UX/UI designers play a part in creating software products, their roles are quite different. UX/UI designers are tasked with designing a user experience that is intuitive, interactive, and that people will want to use. A web developer is tasked with implementing the experience thought up by the UX/UI designers. They both have to make many decisions as part of their jobs, but UX/UI designers are meant to answer the big picture questions and web developers create solutions that enable the user experience to come to life.
How do UX/UI Designers and Web Developers Work Together?
There are three roles in a software development team: Product Managers, UX/UI Designers, and Web Developers. These three roles work together to create a product---but who decides what the product should be? That’s where the stakeholders come in. In this section, we’re going to describe how UX/UI designers and web developers work together by breaking down how a software product is made. Let’s get started.
Step 1: Determining Minimum Viable Product (MVP)
First things first: somebody needs to have an idea for a product. Assuming that’s done, the next step is to get funding in order to hire a team to build out that idea. The people funding a product are what we call the key stakeholders. In the very beginning of a product’s lifecycle, the key stakeholders and product managers get together to gather requirements for what the minimum viable product (MVP) is for this idea.
Step 2: Idea Validation
In this step, the product managers, UX/UI designers, and web developers come together to discuss the feasibility of meeting the MVP. The product managers and UX/UI designers work closely to create the visual design for the product and the web developers provide input regarding how much time and effort it would take to build the product out. In this stage, the team might also identify potential competitors and determine how best to position the product in the market.
Step 3: Prototype
Here, the product managers, UX/UI designers, and web developers work closely to determine which features are essential to the user experience and how users might interact with different aspects of the website. The two work together to decide what kinds of UI elements might work best for which features and how to create a product that is able to be used on devices of different sizes and with different input interfaces. After all, a design that makes sense for a phone screen might not make much sense for a desktop computer. Furthermore, the UX/UI designers and web developers also work closely to determine how to make the best user experience in the least amount of time---which means making compromises on both sides.
Step 4: Software Development
By this step, the UX/UI design is finalized and the web developers are busy working. Their goal is to create the specified product in the least amount of time and with the maximum amount of features. If at any point the web developers realize that something they thought was feasible turns out to not be, they reach out to the product manager who then works with the UX/UI designers and web developers to re-design a more appropriate solution (back to step 3).
Step 5: Testing
If all goes well, the software team is able to create the product exactly how the UX/UI designers imagined it. Those in the industry refer to this event as a miracle. Once the software is “dev complete,” the product managers organize a round of user testing. Potential users (and stakeholders) are brought in to try out the product and make sure it works as expected. If any bugs are found, the web developers are called back in to get those fixed as soon as possible.
Step 6: Launch
If the testing goes well, the product is then ready for a product launch. Depending on how big or small a product is, the product managers and stakeholders might decide on whether to have a “soft launch” or a “hard launch,” which are two terms to describe the scale of the product launch.
Recap
So, how do UX/UI designers and web developers work together? They’re both essential to the software product lifecycle and work together to determine what features a product can have. The UX/UI designers usually take care of why a feature is important while web developers are in charge of determining how a feature can be implemented.
Where do we go from here?
Now that you know all about what it means to be a UX/UI designer or a web developer, aren’t you excited about the possibility of becoming one? Ironhack provides a number of exciting (and potentially lucrative) bootcamps designed to transform your skills and abilities in as little as 9 weeks!
There are bootcamps available for just about anybody, whether you want to become a UX/UI designer, a web developer, or even a data analyst. We’re sure you’ll find something that’ll help you grow in your career. Come poke around our website to see which course is the best fit for you. We can’t wait to see you in class!
