Little UI Details

Adding a subtle shadow to white text when on a bright background not only makes it more legible but helps it 'pop' more.pic.twitter.com/p9rudeFxvP

Make your gradients appear more vibrant by adjusting the hue by a few degrees (10º or 20º max) in either direction.pic.twitter.com/Op8Wrme3V4

Really love the hover state on Stripe's website. 1px shift up with the increased drop shadow spread. Details like this go a long way pic.twitter.com/bC7y6pji23

Giving your box shadows a slight, vertical offset helps to make them look more natural.pic.twitter.com/WcPsK8yFwu

Aligning text is an easy way to clean up your design and make your content much more scannable.pic.twitter.com/KhUT5l0kW1

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

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

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

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

This trick also works great on modals and, in some cases, panels. Using a 2 color gradient also adds a nice touch pic.twitter.com/4EVxntQoq5

A technique I've been using lately on panels to distinguish the titles instead of a keyline is using subtle contrast:pic.twitter.com/RWOcPZR8Xh

Along with size and weight, using color and contrast is a great way to create typographic hierarchy.pic.twitter.com/TkIMj39Urj

If in doubt, 16px font with 1.5 line height is pretty good safe for body copy.pic.twitter.com/s2opWaBT0l

Quick tip: All-caps can sometimes be difficult to read. Consider using letter-spacing to give your text a little more room to breathepic.twitter.com/FCQk0vrZE9

I like when my rounded corners are pixel perfect so I usually draw circles on a grid and connect them rather than relying on Sketch's radiuspic.twitter.com/epPy7JcEre

How to make a stylish map with no graphic design skills pic.twitter.com/CluMrSpSSX

Keylines are not only great for dividing content but also making disconnected content feel more connected.pic.twitter.com/Hdx8gTJbJf

Using multiples to define your spacing is a great way to achieve vertical rhythm and provides a formula to justify your choicespic.twitter.com/0MCNFaZVrS

Desaturated photo + bold color + blend-mode: multiply. Great for hero banners and creating high contrast for text.pic.twitter.com/1BqHw5oyKL

Overlapping elements on a page is a great way to create depth and encourage users to scrollpic.twitter.com/kD9gGUDH5y

A subtle link for negative secondary actions often works better than a big bold button. (Just make sure you have a confirmation step!)pic.twitter.com/lqjBovKA1z

It's all about creating hierarchy. You want your primary button to stand out much more than your secondary/danger actions.pic.twitter.com/H3pPzWt7fo

Sometimes you may want to use the "danger" colour for a primary action like if you're confirming the high severity action:pic.twitter.com/rFoIH0Qi1c

I also use this technique on secondary button outlines. Helps the button text stand out a little more:pic.twitter.com/Gz4PFO3scd

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

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

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

Designing nice tables can be tough, but here's a few ideas that can make a big difference:pic.twitter.com/Q1qcF1hIG6

Little details go a long way when styling UI components. Here are a few different ways to style inputs:pic.twitter.com/1D2AYDwi1f

Little details go a long way when styling UI components. Here are a few different ways to style buttons:pic.twitter.com/rsbtaZ1Peh

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

Need to put together a quick landing page for a new idea? Here are some tips for making it look professional without hiring a designer:pic.twitter.com/eD9WQuGycP

Styling content can be difficult. Here are a few ideas that can make a big difference:pic.twitter.com/oiAH4foGJu

Shoutout to this great #UX: @withspectrum tells you which third party account you used to sign in with previously. Great feature @mxstbrpic.twitter.com/cqEkB4ASMf

Working with images that clash with each other? Try desaturating them to greyscale or colorizing them all with a single color to make them a little more cohesive.pic.twitter.com/R6POfB2WrR

Also, containing photos in circles - Great way to make a bad photo look good pic.twitter.com/XSFoZJIiTR

A trick designers often use to make things look a bit more interesting is to let images bleed out the edge of a container, ignoring any padding.pic.twitter.com/62otrCbtte

Whenever I see a piece of beautiful UI I really love, I always ask myself: "What about this design would I have never thought to try?" I've picked up *so* many useful design tricks this way. Today it's this inverted color treatment on all of the dropdowns in Things 3 pic.twitter.com/gZEnf89eKp

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

I always appreciate when a site styles the selection background and text color. I think it really shows that whoever developed it cares about the details Here's a few examples from @framer, @messagebird and @smashingmagpic.twitter.com/j3wLsYftSH

This “eyebrow” title treatment is not only great for clarifying your message, but it also makes a boring headline + body pattern look more interesting.pic.twitter.com/1DHFpuZCcC

This small, uppercase text treatment also works great for headings for link lists like this vertical navigation or footer site mappic.twitter.com/5Jw6f1srqT

 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

"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

 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

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

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

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

 If you're tired of using outline styles for secondary buttons, a soft solid background based on the text color can be a great alternative.pic.twitter.com/EZfWJJjBop

Incorporating a “visual gimmick” in to your brand/website is a great to create a consistent tone and establish a visual identity. Whether it’s a visual element taken from the logo or something simple like this example from Algolia:pic.twitter.com/UhQXIOq24o

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

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

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