UX (user experience) and UI (user interface) designers work closely together. Sometimes these roles are separate and held by two different professionals who are in close communication, and other times the same person will have both roles.
The analogy of an iceberg is often used to describe the difference between UX and UI.
UX is everything below the surface, from conducting design research and usability testing to sketching wireframes and creating prototyping. UI is everything above the surface including the colors, typography, and imagery. UX is the behind-the-scenes, while UI is what you see on stage.
Depending on the type of projects you're designing, "Product Designer" is another job title you may encounter that integrates aspects of UI and UX.
Should designers know how to code?
Print and web design are different. While many of the same fundamental principles of graphic design apply (remember the course Communicating Your Ideas Through Storytelling and Design), principles need to be adapted depending on the medium for which you are designing. Just as a print designer needs to have an understanding of printing processes, a UI designer should understand the world in which their designs will end up.
At a minimum, a UI designer should have a basic understanding of code because it helps to have an understanding of what you're designing for (platform, device, screen size, etc.) as well as some of the technical limitations. In gaining an understanding of code—including basic HTML and CSS—you'll gain empathy for the developers, have a better working relationship with them, and be able to speak the same language. Having a basic understanding of code is also something many employers are looking for.
The design process
The design process isn't linear. It can get messy. It's iterative and always changing. One thing's for sure: it's rarely boring! From technological developments to growing team sizes and changing dynamics, there's a lot to keep you on your toes.
Strong communication and collaboration are crucial to the success of a project. They'll also help ensure a project moves smoothly and more efficiently.
Let's review the process up until this point:
Start with design and user research: how can you design for users you don't fully understand? Empathy helps us understand the people we're designing for! UX is a User-centered design after all.
Ideate: come up with lots of ideas before determining which one is the strongest.
Prototype: How do your sketches and wireframes work within a user flow or context?
Testing: did you test your product on actual users? If not, how do you know the design is effective?
At some point between prototyping and testing, it's a good idea to start thinking about how your product is going to look and feel. You can stick with hand-drawn sketches for a while, but at some point, it's time to move on. This is where UI comes into play!
Software for designing digital interfaces
The software can vary a bit depending on where you work or on your own preferences. As you meet working professionals, ask them which software they use. Here's a breakdown of some pros and cons to keep in mind:
Sketch
Pro: Currently the most popular software for UX/UI designers. Lower up-front cost, and you're not required to pay for updates.
Con: Mac only software.
Good to know: Sketch files are typically taken into InVision in order to make them into clickable prototypes. (InVision is good for communicating with teams and getting feedback).
AdobeXD
Pro: Easy to use if familiar with other Adobe software. Integrates interactive prototyping tool into the design tool. The AdobeXD Starter Kit is free to use!
Con: A full license is only available through Creative Cloud subscription (more expensive).
Figma
Pro: Available on Windows. Like Sketch, but with prototyping functionality. Good for version control and collaboration.
Con: Less common in professional environments.
InVision Studio
Pro: Works like Sketch and has prototyping and animations built in.
Con: Newest on the marketplace.
Note: InVision is very popular for prototyping. Often designers will take Sketch files into InVision in order to create and share their clickable prototypes.
OmniGraffle
Pro: Best for precision graphics.
Con: Mac only.
Axure
Pro: Range of features.
Con: Less common in start-up style workplaces.
You may find yourself working in an office which uses a software you're less familiar with as part of their workplace. Other times you'll get stuck trying to figure out how to do something that you know should be easy. Don't be afraid to look for YouTube tutorials to help you out. The good news is that with UX/UI, the software all functions fairly similarly. If you know one, you can figure out the others more easily.
Throughout this course, we'll be exploring key themes around UI and product design. In part 2 we'll go into more specifics around visual design. It's tempting to dive right into the computer, but building a solid knowledge base will make you a stronger designer and save you time. The goal is to design smarter! 🤓
Let's Recap!
UX is everything around the experience, while UI is the part which is visible.
The line between UX and UI designers is not always easily defined and often depends on the company you're working for.
It is helpful to have a basic understanding of code as a designer so you have a better understanding of the medium for which you're designing. It is also useful for collaborating and communicating with developers.
Software and tools are constantly being updated, so do your best to keep updated with the latest releases.
