Preskoči na sadržaj

🔥 Design Tips

Uživo

A collection of design tips that I've been working on with @adamwathan.

A collection of design tips that I've been working on with @adamwathan.

  1. 12. lip 2017.

    🔥 Pure grey text always looks "off" on a colored background. A quick fix is to saturate your text with a bit of the background hue.

    Poništi
  2. 16. kol 2017.

    🔥 Too many borders can make a design look really busy. Here's a few ideas that are a bit more subtle:

    Poništi
  3. 8. lip 2017.

    If I am using icons that have more weight than the text, I typically make the icons slightly lighter than the text for inactive states 👌🏼

    Poništi
  4. 7. lip 2017.

    🔥 Using a generic icon like an arrow or a checkmark instead of the standard bullet is a great way to add visual interest to unordered lists.

    Poništi
  5. 6. lip 2017.

    🔥 Adding a hint of color (4 to 6px) to the top of your hero is a simple trick to bring more liveliness to your design.

    Poništi
  6. 31. srp 2017.

    🔥 Overlapping elements on a page is a great way to create depth and encourage users to scroll

    Poništi
  7. 7. ruj 2017.

    🔥 This two-column form layout is great for organizing long forms and filling wider screens without using awkward long form fields.

    Prikaži ovu nit
    Poništi
  8. 19. ruj 2017.

    🔥 Font size isn't always the best way to emphasize or de-emphasize text, try using color and font weight instead:

    Poništi
  9. 16. stu 2017.

    🔥 Instead of blowing up small, in-app icons for your landing page, try putting a shape behind them and giving them a background color.

    Prikaži ovu nit
    Poništi
  10. 27. velj 2018.

    🔥 Using the same line-height for all text is a very subtle but common mistake. 1.5 may work great for body copy, but as text gets larger, your line-height should get tighter.

    Poništi
  11. 27. ruj 2017.

    🔥 Designing nice tables can be tough, but here's a few ideas that can make a big difference:

    Poništi
  12. 20. lip 2017.

    🔥 Giving your box shadows a slight, vertical offset helps to make them look more natural.

    Poništi
  13. 14. pro 2017.

    🔥 Styling content can be difficult. Here are a few ideas that can make a big difference:

    Prikaži ovu nit
    Poništi
  14. 16. sij 2018.

    🔥 Dropdowns can be more than just a boring list of links. They're just boxes, you can do anything you want with them! For example, this two-column layout is great when you want to add supporting text:

    Prikaži ovu nit
    Poništi
  15. 19. ožu 2018.

    🔥 "Grey" doesn't have to mean Grey™. Try saturating your greys with a bit of blue or brown for a cooler or warmer feel.

    Poništi
  16. 28. ožu 2018.

    🔥 If you want text of different sizes to *feel* like the same weight, make larger text thinner and smaller text bolder.

    Poništi
  17. 4. tra 2018.

    🔥 Overlapping images is a great way to add depth to an interface and make it look more “designed”. Use a border that matches the background color to create distinction and keep things looking clean 👌

    Prikaži ovu nit
    Poništi
  18. 9. svi 2018.

    🔥 Recently had the pleasure of designing the pricing section of ’s Advanced Vue Component Design course. Here are a few visual design ideas I considered to give it some extra polish 💅

    Prikaži ovu nit
    Poništi
  19. 17. svi 2018.

    🔥 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:

    Prikaži ovu nit
    Poništi
  20. 1. kol 2018.

    🔥 Get creative with radio button interfaces — don’t be limited by the typical list-of-options approach. For example, using selectable cards gives you the freedom to present the options in a more exciting way:

    Poništi
  21. 16. kol 2018.

    🔥 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:

    Poništi
  22. 27. ruj 2018.

    🔥 Achieving an accessible contrast ratio is very difficult when using white text on a colored background. Using dark colored text on a soft colored background is much easier to make accessible, and usually looks better to boot 👌

    Prikaži ovu nit
    Poništi
  23. 2. stu 2018.

    🔥 Blank states don't just have to be the empty version of the regular filled state. By thinking of them as a separate UI, you can design them in a way that is more exciting and more helpful to someone getting started.

    Prikaži ovu nit
    Poništi
  24. 19. stu 2018.

    🔥 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.

    Poništi
  25. 1. tra 2019.

    🔥 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 🥳

    Prikaži ovu nit
    Poništi
  26. 16. srp 2019.

    🔥 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.

    Prikaži ovu nit
    Poništi
  27. 10. ruj 2019.

    🔥 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:

    Prikaži ovu nit
    Poništi
  28. 21. lis 2019.

    🔥 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.

    Prikaži ovu nit
    Poništi
  29. 10. pro 2019.

    🔥 One small design detail that new designers often overlook is letter-spacing. Tricks like making headlines slightly condensed or giving small uppercase text a bit more space can go a long way towards giving a design that final level of polish.

    Prikaži ovu nit
    Poništi
  30. 31. sij

    🔥 When things get closer they cover more of what’s behind them, which means they shouldn’t be perfectly aligned with things in the background. We can emulate this in UI design by slightly offsetting elevated elements so they extend beyond the edges of the elements they conceal.

    Prikaži ovu nit
    Poništi
  31. 11. pro 2018.

    🔥 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 👉🏻

    Poništi