UI Basics

Why and Where to Start

Being able to implement a frontend is great, but knowing how to design from scratch is even better. Sure, you might end up working with professional designers for your production work, but understanding design basics is crucial. It lets you create proof of concepts without spending money on designers, helps you have meaningful discussions about design choices, and allows you to move fast when starting a project without waiting for feedback from contractors. We’ll go through some of the basics here.

Finding Inspiration

The best way to get design ideas is to look at what others are doing. Not everyone has natural artistic talent, and that’s okay! I love browsing through Dribbble and Behance when I need inspiration for specific elements like dashboards or landing pages. For more creative and artistic web designs, check out Awwwards - they showcase the most innovative websites daily, and it’s a great way to stay on top of current trends.

When you’ve gathered some inspiration, it’s time to build your project’s identity. Think about the values you want to convey and the overall mood you’re aiming for. A great trick is to create a moodboard using tools like Figma, Notion, or Milanote. This helps you organize your ideas and maintain a consistent direction.

Quick Tip: If you’re struggling with color combinations, take a look at code editor themes. The color palettes used in themes like Catppuccin, Nord, or Dracula are carefully crafted to work well together. They’re a safe bet when you’re starting out.

Design Principles

The book “Refactoring UI” teaches us some valuable lessons about design systems. Here are the key principles to remember:

• Keep your layouts breathable by using consistent spacing
• Pick a small set of colors and reuse them consistently
• White space is your friend; don’t try to fill every pixel on the screen

The Design Process

I always start with user experience before thinking about aesthetics. Think of it as building a house - you need a solid foundation before picking out the furniture. Start by mapping out how users will move through your site or app. What pages do they need? What actions will they take? Tools like Excalidraw are perfect for this early stage because they let you focus on structure without getting caught up in visual details.

Once you’ve nailed down the user flow, move on to the visual design. Figma is my go-to tool these days - it’s powerful, flexible, and has a great community. But tools like Canva work well too, especially if you’re just getting started.

Implementation

When it comes to building your design, you’ll want to pick the right framework for your needs. I personally use Next.js for complex applications and Web3 projects because I’m comfortable with React and the developer experience is great. If you prefer Vue, Nuxt offers similar features and an equally polished developer experience. For simpler content-focused sites, Astro is fantastic - it’s lightweight and blazing fast. And if you need something lightweight and framework-agnostic, Vite is an excellent build tool that works great with React, Vue, or even vanilla JavaScript. Sometimes, for straightforward business sites, I’ll use Webflow because it lets clients make their own updates later.

For styling, you’ve got options like Tailwind CSS, Sass, or Panda CSS. Each has its strengths, but what matters most is picking one you’re comfortable with and sticking to it. Don’t get caught up in trying every new tool that comes out.

The key to good frontend development is thinking in components. Break your interface down into reusable pieces - it makes your code easier to maintain and helps keep your design consistent. You don’t need a fancy library for everything; sometimes a simple helper function does the job better.

Here are some creative designs that I personally find well crafted (these are personal opinions!):

• 🦝 Usual - Untethered, community-centric stablecoin protocol with a perfect design
• 🌱 Mangrove - Clean interface with smooth animations
• 🦋 Morpho - Set a new standard for DeFi apps
• 🐰 RabbitX - Modern and intuitive trading platform
• 🔷 Aave - Sophisticated yet approachable lending platform
• 🎨 Foundation - Elegant NFT marketplace design

Final note

Remember, the most important thing isn’t which tools you use - it’s how comfortable you are with them and how quickly they let you bring your ideas to life. Focus on mastering the basics, and the rest will follow.