Pinned
I put together a one hour video on how I've been using Claude Code as my primary design tool.
Packed with tons of 🔥 design tips.
00:00
Steve Schoger
7,890 posts
Steve Schoger
@steveschoger
Designer @tailwindlabs
- 🔥 Don't be afraid to "think outside the database" — your UI doesn't need to map one-to-one with your data's fields and values. Here are a few ideas you can use to present "field: value" data in a more interesting way:
- 🔥 When implementing dark mode, don’t throw away the visual cues in the light version by naively inverting the color scheme. Close elements should still be lighter and distant elements should still be darker – even in a dark UI.
- 🔥 When making a design responsive, don't stop at simply making things fit on smaller screens – look for ways to borrow usability patterns from native mobile apps, too. For example, anchoring modals to the bottom of the screen instead of the center, making them easier to reach.
- 🔥 Too many borders can make a design look really busy. Here's a few ideas that are a bit more subtle:
- 🔥 If you're working with images that sometimes bleed into the background, try using a subtle inner shadow to create some distinction instead of a border. Borders will often clash with the image, while most people will barely realize the shadow is even there.
- 🔥 One way to make a boring form look more interesting is to draw inspiration from how the output of the form is designed. Here are a few ways you can reuse your existing design decisions to make a form more exciting:
- 🔥 Get creative with table design — table cells can contain more than simple unstyled text. Here are a few ways to make tables look more interesting:
- 🔥 When designing a chart, using a variety of colors might seem like a good idea at first but it can make it a lot harder for people with color blindness to interpret the data. Instead, try using multiple shades of the same hue — it's more accessible and looks better too 🥳
- This is my son, Freddie, who we brought into the world early this morning 🥰
- 🔥 Be conservative with how you use brand colors in your designs — you’d be surprised how little color you need to make your designs feel colorful.
- 💡 Looking for mobile menu ideas for your next project? Here's a simple visual reference that demonstrates some of my favorite patterns 👉
00:00 - When designing an app, I find it really helpful to have a few reference examples to help validate UI/UX pattern ideas. Here are a few of my favourites that I have bookmarked. Any other apps I should check out?
- 🔥 Excited to announce that Refactoring UI is now available! It's everything we know about designing for the web, packed into a single comprehensive resource. Get it during the launch for up to 40% off 👉🏻
