Well, I’m not a web designer, not even a designer. Everything I’m about to share here comes from a frontend developer who uses Neovim as their main editor, so proceed at your own risk!
Over the past few months, I had the chance to put into practice many of the things I've already learned voluntarily about user experience and user interface topics. Beyond that, I got to explore tools like Figma and Adobe XD, create prototypes from scratch, and share some of the knowledge and results with my developer coworkers.
Because of that, I decided to compile and share all the sources and references I used during this period, along with some other nitpicks that might be relevant for those who want to dive into this topic but aren’t sure how much or where to start:
To read:
- 📖 UI Design for Developers
- 📖 Principles of User Interface Design
- 📖 What is UX Design?
- 📖 Laws of UX is a collection of best practices that designers can consider when building user interfaces
- 📖 What Is UI Design? Definition, Tips, Best Practices
- 📖 What is Color Theory?
- 📖 What Is Typography, and Why Is It Important? [2023 Guide]
To follow:
- 👤 Guilherme Rodz
- 👤 Igor Bedesqui
- 👤 Matt
- 👤 Sarah Drasner
- 👤 Adam Wathan
To buy:
- 💰 Complete Web & Mobile Designer: UI/UX, Figma, +more
- 💰 Figma UI UX Design Advanced
- 💰 Principles of UX/UI Design
- 💰 Figma Course
To watch:
- 🎬 UI Design Tutorial For Beginners
- 🎬 UX Design vs UI Design - What's The Difference? (2023)
- 🎬 How to design a mobile app tutorial - a step by step guide
- 🎬 Figma Tutorial: Setup a Responsive Grid Layout for UI & Web Design (IN 11 MINUTES)
To inspire:
To search:
- 🔎 Behance
- 🔎 Dribble
- 🔎 Mobbin
- 🔎 Design Spells
- 🔎 Refero
To reflect on:
- 💭 I know that there isn’t always enough time to think about prototypes, and creating proof-of-concepts often becomes the first option. However, sketching out even your POC can be a great exercise to test basic knowledge, regardless of the chosen tool. It will also serve as a “discussion board” for you and other developers, giving you something visual to discuss about.
- 💭 Being comfortable with basic (really basic) concepts can help you understand what the design team is communicating and vice versa—it can help you expressing your ideas more effectively.
- 💭 When dabbling in design, consistency in colours, typography, and spacing can transform an amateur design into something professional. Establishing a basic design system, even if it’s minimal, helps to ensure that your projects remain visually cohesive, which ultimately benefits the user experience.
Conclusion
I’m aware that beyond everything mentioned here, there are dozens of books, resources, and content that are also significantly important. However, as I mentioned earlier, these were my starting points, and I hope some of them can serve as yours as well.
Cheers!