Resources
The field of UX is and will always challenging and exciting.
I recall a time when web and application design was categorized as either front-end or back-end.
Front-end then morphed into development and design.
Design can be further broken down into User Interface and User Experience.
Then there are Design Systems which I've found to be another specialized subset that straddle BOTH design and development. UX is constantly evolving and as a person who loves to grow and perfect my craft - here are a few resources that I draw from and refer back to.
Vibe Coding Tools
Vibe coding is an AI-assisted software development practice that centers on using natural language prompts to generate, refine, and debug code. Coined by AI researcher Andrej Karpathy, the term describes a workflow where the programmer's role shifts from writing code line-by-line to guiding an AI assistant in a conversational and iterative process. The core idea is to "fully give in to the vibes, embrace exponentials, and forget that the code even exists," allowing for rapid prototyping and a focus on the desired outcome rather than the technical implementation details.
-
v0: A tool for rapid UI/UX prototyping that can visualize and experiment with layouts early in the development process.
-
Bolt: A flexible tool that integrates with other services like Stripe and GitHub, allowing for complex, multi-service applications.
Atomic Design with Design Tokens
The atomic design methodology was coined by Brad Frost back in 2013. Inspired by chemistry, Brand proposed a mental module and a hierarchical system of ordering UI elements and components.
This methodology comprises six distinct stages (with the 6th stage added about six years later when Salesforce’s Lighting design system introduced design tokens), all working together to create more deliberate and hierarchically design systems.
80+ Web Accessibility Resources
& Tools
This collection of 80 web accessibility resources ⇣ is aimed at anyone interested in learning how to design, develop and test inclusive and accessible websites, apps, and online documents. Because making the web accessible ensures equal access to the roughly 1 billion
Design Systems
A design system is a set of standards to manage design at scale by reducing redundancy while creating a shared language and visual consistency across different pages and channels.
Design (and development) work can be created and replicated quickly and at scale.
It alleviates strain on design resources to focus on larger, more complex problems.
It creates a unified language within and between crossfunctional teams.
It creates visual consistency across products, channels, and (potentially siloed) departments.
It can serve as an educational tool and reference for junior-level designers and content contributors.
Design Systems for Figma
A collection of Design Systems for Figma from all over the globe 🌎 backed by code.
Author : Jordan Hughes | Untitled UI
Design Systems Crash Course
Listen up - these videos are literally everything you need to know to become well-versed in creating Design Systems. Block your calendar, grab a cup of coffee and let's fill that big beautiful brain of yours!
Test your UX Knowledge
Five Stages of Design Thinking—and Why They Matter
01 The Empathize Stage
Like any good process, Design Thinking starts with questions. A lot of questions. Who is using the app? What are they hoping to achieve from it? And, most importantly, what is going wrong, and why are they frustrated with the current user experience. Being able to empathize with the user on the good and the bad will help you hone in on what’s working (so you can do more of that) and what’s causing users the most headaches and why. Often this stage is done through observation of, and interviews with, the actual users of the app.
02 The Define Stage
It’s time to put all those answers to work. The goal here is to look at the observations through the lens of the overall business goals (see, we haven’t forgotten!) and define the most concrete and important issues for the users. In essence, it’s about framing the most pressing challenges in the context of what both the business and users expect from the app.
03 The Ideate StageThis is the fun part and the part that really anyone in the company can be part of. Now that the main issues have been identified, it’s time to come up with as many solutions as possible. It’s here that you think big and aren’t afraid to change your minds or contradict yourselves. At the end of the session, it’s time to pick the winners from the group. The criteria for a winner will vary by project, but overall you can ask yourself a couple of questions to help guide your decision.Which solution best benefits the user?Which one meets our business goals?What is the most viable from both a development and go-to-market standpoint? The answers to these questions should help you narrow in on the solution that will best fit your, and your users’, needs.
4. Putting Ideas into Action – The Prototype & Development StageIt’s time for the virtual rubber to hit the digital road and see how that solution fares in the wild. It’s here, or a digital product agency, will first create a quick and dirty prototype to get a gut check on what works and what needs some tweaks. Employing an inexpensive, scaled-down version of the product/features and asking users to take a turn trying them out helps you narrow in on what’s doing the job, what isn’t, and why.
5. The Testing Stage
Finally, it’s time to send those prototypes through the wringer. You’ll break them in as many ways as possible and figure out everything that can go wrong. This is the redefine stage where you see the wreckage of solutions laid out in front of you, and learn from them.Then, it’s iteration time. Taking all that you learned from what went wrong, you head back to The Prototype and Development stage. Change this, fine-tune that, get rid of that feature altogether—and then you test, and test, and test again.Design Thinking is a practical way to solve problems. At once fixed and fluid, it provides the structure needed to build brilliant digital products and the flexibility to respond to last-minute changes. It’s a process and one that takes time to get running smoothly.
Author: Angie Taylor | Big Nerd Ranch