🔥 Design Tips
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.
-
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.pic.twitter.com/eKxW4jSSs8
Hvala. Twitter će to iskoristiti za poboljšanje vaše vremenske crte. PoništiPoništi -
Too many borders can make a design look really busy. Here's a few ideas that are a bit more subtle:pic.twitter.com/JEIrjAS5YL
Hvala. Twitter će to iskoristiti za poboljšanje vaše vremenske crte. PoništiPoništi -
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
pic.twitter.com/nlqB3Q2uNg
Hvala. Twitter će to iskoristiti za poboljšanje vaše vremenske crte. PoništiPoništi -
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.pic.twitter.com/hE5BEKEpqh
Hvala. Twitter će to iskoristiti za poboljšanje vaše vremenske crte. PoništiPoništi -
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.pic.twitter.com/cdwzjRh5NN
Hvala. Twitter će to iskoristiti za poboljšanje vaše vremenske crte. PoništiPoništi -
Overlapping elements on a page is a great way to create depth and encourage users to scrollpic.twitter.com/kD9gGUDH5y
Hvala. Twitter će to iskoristiti za poboljšanje vaše vremenske crte. PoništiPoništi -
This two-column form layout is great for organizing long forms and filling wider screens without using awkward long form fields.pic.twitter.com/KbErS8hJHM
Prikaži ovu nitHvala. Twitter će to iskoristiti za poboljšanje vaše vremenske crte. PoništiPoništi -
Font size isn't always the best way to emphasize or de-emphasize text, try using color and font weight instead:pic.twitter.com/KCtZNrtfkd
Hvala. Twitter će to iskoristiti za poboljšanje vaše vremenske crte. PoništiPoništi -
Instead of blowing up small, in-app icons for your landing page, try putting a shape behind them and giving them a background color.pic.twitter.com/BGknNtBzZ2
Prikaži ovu nitHvala. Twitter će to iskoristiti za poboljšanje vaše vremenske crte. PoništiPoništi -
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.pic.twitter.com/v6GQczpoM8
Hvala. Twitter će to iskoristiti za poboljšanje vaše vremenske crte. PoništiPoništi -
Designing nice tables can be tough, but here's a few ideas that can make a big difference:pic.twitter.com/Q1qcF1hIG6
Hvala. Twitter će to iskoristiti za poboljšanje vaše vremenske crte. PoništiPoništi -
Giving your box shadows a slight, vertical offset helps to make them look more natural.pic.twitter.com/WcPsK8yFwu
Hvala. Twitter će to iskoristiti za poboljšanje vaše vremenske crte. PoništiPoništi -
Styling content can be difficult. Here are a few ideas that can make a big difference:pic.twitter.com/oiAH4foGJu
Prikaži ovu nitHvala. Twitter će to iskoristiti za poboljšanje vaše vremenske crte. PoništiPoništi -
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:pic.twitter.com/fh1CxDruSi
Prikaži ovu nitHvala. Twitter će to iskoristiti za poboljšanje vaše vremenske crte. PoništiPoništi -
"Grey" doesn't have to mean Grey™. Try saturating your greys with a bit of blue or brown for a cooler or warmer feel.pic.twitter.com/ToAMPLfDd1
Hvala. Twitter će to iskoristiti za poboljšanje vaše vremenske crte. PoništiPoništi -
If you want text of different sizes to *feel* like the same weight, make larger text thinner and smaller text bolder.pic.twitter.com/kgGQJJh1EL
Hvala. Twitter će to iskoristiti za poboljšanje vaše vremenske crte. PoništiPoništi -
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
pic.twitter.com/G4Zs2wLUz0
Prikaži ovu nitHvala. Twitter će to iskoristiti za poboljšanje vaše vremenske crte. PoništiPoništi -
Recently had the pleasure of designing the pricing section of @adamwathan’s Advanced Vue Component Design course. Here are a few visual design ideas I considered to give it some extra polish
pic.twitter.com/6wMnUTVbJg
Prikaži ovu nitHvala. Twitter će to iskoristiti za poboljšanje vaše vremenske crte. PoništiPoništi -
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:pic.twitter.com/NoL3wMtjLV
Prikaži ovu nitHvala. Twitter će to iskoristiti za poboljšanje vaše vremenske crte. PoništiPoništi -
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:pic.twitter.com/fl5xcprVue
Hvala. Twitter će to iskoristiti za poboljšanje vaše vremenske crte. PoništiPoništi -
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:pic.twitter.com/fuzVRAHK0k
Hvala. Twitter će to iskoristiti za poboljšanje vaše vremenske crte. PoništiPoništi -
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
pic.twitter.com/LXNTS01Ay0
Prikaži ovu nitHvala. Twitter će to iskoristiti za poboljšanje vaše vremenske crte. PoništiPoništi -
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.pic.twitter.com/vuTyhlNt9k
Prikaži ovu nitHvala. Twitter će to iskoristiti za poboljšanje vaše vremenske crte. PoništiPoništi -
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.pic.twitter.com/4sq7SyVcQu
Hvala. Twitter će to iskoristiti za poboljšanje vaše vremenske crte. PoništiPoništi -
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
pic.twitter.com/6nUWZ6BMUv
Prikaži ovu nitHvala. Twitter će to iskoristiti za poboljšanje vaše vremenske crte. PoništiPoništi -
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.pic.twitter.com/RNxgIppDmn
Prikaži ovu nitHvala. Twitter će to iskoristiti za poboljšanje vaše vremenske crte. PoništiPoništi -
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:pic.twitter.com/URoBGyC1LE
Prikaži ovu nitHvala. Twitter će to iskoristiti za poboljšanje vaše vremenske crte. PoništiPoništi -
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.pic.twitter.com/Sq7Tx8CAts
Prikaži ovu nitHvala. Twitter će to iskoristiti za poboljšanje vaše vremenske crte. PoništiPoništi -
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.pic.twitter.com/9Ed60pNf4p
Prikaži ovu nitHvala. Twitter će to iskoristiti za poboljšanje vaše vremenske crte. PoništiPoništi -
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.pic.twitter.com/0TfVzOl6f7
Prikaži ovu nitHvala. Twitter će to iskoristiti za poboljšanje vaše vremenske crte. PoništiPoništi -
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
https://refactoringui.com/book/ Hvala. Twitter će to iskoristiti za poboljšanje vaše vremenske crte. PoništiPoništi