UX Design Demystified: A Cheat Sheet for New Designers
So, you’re fascinated by UX design? It’s no surprise. This field is buzzing with excitement, attracting people from all walks of life, whether they’re in school or attending boot camp classes. But here’s the thing: what they teach you in design courses often doesn’t align with how things really work in the industry.
In this cheat sheet, we’ll cut through the fluff and focus on the core concepts of UX design that you need to know to get comfortable in the field. No more guessing or relying solely on textbook knowledge. We’ll delve into the real-world insights that will give you a solid starting point.
Typical UX/UI Flow:
1. Problem Identification
Concept: Clearly define the problem or challenge you’re aiming to solve.
Real World Example: The Product Owner typically identifies the problem or features that need attention, and experienced designers may proactively identify problems through initial UX research.
2. Research and Analysis
Concept: Conduct thorough research, including competitor analysis, best practices study, and understanding of user needs.
Real World Example: Often you won’t be given the time to do this unless you fight tooth and nail for it and try to do it on top of your allocated time for strictly design work. This industry practice needs to change.
3. Wireframing
Concept: Create low-fidelity wireframes to outline the structure and layout of the design solution.
Real World Example: Wireframes are essential for testing concepts and aligning with the Product Owner to address the problem. Consult developers to ensure feasibility within the existing framework and gather their suggestions for implementation-friendly tweaks.
4. High-Resolution Mockups
Concept: Develop a polished and detailed visual representation of the final look and feel.
Real World Example: Using design tools like Figma or Sketch, create polished mockups for different screen sizes such as Desktop and Mobile that align with branding guidelines or establish consistent design patterns.
5. Prototyping
Concept: Build interactive prototypes to simulate the user experience and gather feedback.
Real World Example: In situations where there are limited UX resources, developers often rely on guesswork when interpreting designs or rough sketches from Product Owners. Prototypes provide clarity on both the visual appearance and behavior of the design, helping bridge the communication gap. Additionally, prototypes can be used for quick usability testing purposes.
Now that we have a grasp on the fundamentals of UX, let’s dive into the steps that outline where and how to learn UX design as a beginner.
Step 1: Choose a Design Tool for UX Design and Prototyping
When it comes to UX design and prototyping, being familiar with the right design tool is crucial for efficient collaboration and a seamless workflow. Here are popular tools that cater to both aspects:
Figma
Beginner-friendly with a free version and trial. Offers design libraries, icons, and real-time collaboration.
Sketch
Powerful and Mac-only. Provides precise design capabilities and a free trial.
Adobe XD
Robust prototyping integrates with Adobe Suite. A free version, trial, and paid plans are available.
From personal experience, Figma was the easiest to learn, followed by Adobe XD and Sketch.
Step 2: Optional but Highly Useful — Learn Basic Front-End Coding (HTML, CSS, and JavaScript)
To enhance your UX design skills, gaining some familiarity with basic front-end coding is highly recommended. Learning HTML, CSS, and JavaScript will provide valuable context and enable you to better collaborate with developers. Here’s a resource to get started:
Codecademy
Codecademy offers interactive courses for learning front-end coding. They have both free options and paid plans, allowing you to progress at your own pace. By building your own designs, you’ll gain a better understanding of adapting designs from desktop to mobile screens and effectively communicate with developers in their language.
While this step is optional, it can greatly benefit your UX design sense and enable you to provide more informed feedback to developers.
Step 3: Explore Design Systems and Patterns
By familiarizing yourself with these design systems, you’ll gain insights, reference points, and industry-standard practices to elevate your UX designs.
Check out these prominent examples:
Google Material Design
Comprehensive documentation for mobile and desktop design, offering UX best practices and UI component guidance.
Apple — Human Interface Guidelines
https://developer.apple.com/design/human-interface-guidelines/
Apple’s guidelines for designing intuitive interfaces across their platforms, including iOS, macOS, and watchOS.
Step 4: Familiarize Yourself with Current UX Best Practices and Patterns
To build effective designs, it’s beneficial to leverage established research and proven patterns. Staying up-to-date with current trends is essential as best practices evolve over time. The following resources are some of my personal favorites.
Articles:
- Mockplus Blog: UX Design Patterns https://www.mockplus.com/blog/post/ux-design-patterns
- CareerFoundry Blog: Why Use UX Patterns https://careerfoundry.com/en/blog/ux-design/ux-patterns-why-use-them/
Books:
- “Don’t Make Me Think” by Steve Krug: A highly recommended book that offers valuable insights and common-sense advice for design.
Step 5: Get Familiar with the UX Industry
To understand the UX industry better, explore different resources and stay updated on industry trends. This will broaden your knowledge and vocabulary. Check out these platforms:
Medium
A popular platform with a vast array of articles covering a wide range of UX topics. It provides insights into designing patterns, collaboration, and the latest happenings in the industry.
UX Design Collective
A valuable resource that offers a collection of articles specifically focused on UX design. It covers diverse aspects of UX and provides insights into how UX works within companies.
Step 6: Find Inspiration
When looking for design inspiration, these platforms and resources can provide creative ideas and useful components:
UI Inspiration
Dribbble
Explore Dribbble to discover visually appealing design concepts and layouts. While it offers great inspiration, many designs may have a stronger focus on “Looking Good” rather than “Working Well”. “Working Well” should always come first.
Front-End Framework Component Libraries
Wrapbootstrap
Browse through Wrapbootstrap for a wide range of templates, including admin templates. This can familiarize you with common UI components that you can assemble like Lego pieces when creating your designs.
React
https://react-bootstrap.netlify.app/docs/components/accordion
A JavaScript library for building user interfaces. Referencing React’s component library can simplify the process of tweaking existing components rather than starting from scratch.
Vue.js
https://vuetifyjs.com/en/components/all/
A lightweight and easy-to-learn JavaScript framework. Vue.js offers flexibility and simplicity for constructing interactive interfaces.
Angular
https://material.angular.io/components/categories
A TypeScript-based framework developed by Google, primarily used for building large-scale web applications. Angular’s component library provides a comprehensive set of UI elements.
Step 7: Design Something!
Now it’s time to put your skills into practice with personal projects. Consider the following ideas:
- Use an app you designed with a friend or select a few existing apps to redesign. You can showcase your design process and improvements in your portfolio.
- Create a simple login and password retrieval flow to demonstrate your understanding of user flows and interactions. Highlighting smooth and engaging transitions can capture the attention of hiring managers.
Remember to enjoy the design process and let your creativity shine. These personal projects will not only allow you to showcase your skills but also provide valuable experience as you refine your craft.
Step 8: Create a Portfolio
With your completed projects and foundational knowledge of HTML and CSS, it’s time to showcase your work by creating a portfolio. Follow these steps:
- Download a portfolio template from a reliable source. For example, you can find templates at https://wrapbootstrap.com/themes/portfolios-resumes.
- Customize the template by adding your own information, projects, and designs. Ensure that your portfolio reflects your unique style and demonstrates your skills as a UX designer.
- Don’t forget to create a LinkedIn profile if you haven’t already. LinkedIn is the best for connecting with professionals and showcasing your portfolio to potential employers.
Conclusion
Congratulations on making it this far budding UX Designers! We’ve covered the essential steps and resources to kickstart your journey in the exciting world of UX design. Remember, UX design is a continuous learning process, so keep exploring, experimenting, and honing your skills.