? 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 ? https://t.co/6nUWZ6BMUv
? The most frequently asked question I get is how to choose colors for a dark theme.
I simply use darker shades for dark themes and lighter shades for light themes. Here is an example that has both dark and light elements. Every color is sampled from the swatches below it: https://t.co/WCa1SFeXse
? Deeply nested sidebar navigation can quickly become complex and overwhelming.
A great alternative is to split your layout into sections and give each section its own navigation. https://t.co/TC5JAZLjSI
? 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. https://t.co/4sq7SyVcQu
I made a thing for a Streamline + @css promo and channeled my inner @steveschoger for one of the supporting images. https://t.co/3YaszuwAEH https://t.co/1d5uk5u5Up
? 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 ? https://t.co/LXNTS01Ay0
? Ever wonder how to produce this duotone color treatment to photos as seen in apps like Spotify?
You can achieve this in Photoshop or Affinity Photo by using Gradient Maps. Looks great when applied to portraits ? https://t.co/yqTjvJTslG
? 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: https://t.co/fl5xcprVue
? 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. https://t.co/EZfWJJjBop
? For a little extra polish, add a background color to your <body> and different background color on your content wrapper to reveal a surprise splash of color when over-scroll happens. ? https://t.co/k6uCV9AyKT
? 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: https://t.co/NoL3wMtjLV
? 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 ? https://t.co/G4Zs2wLUz0
? If you want text of different sizes to *feel* like the same weight, make larger text thinner and smaller text bolder. https://t.co/kgGQJJh1EL
Today's new idea: This extended nav area where the first piece of content overlaps the background color ?? (from @Netlify)
I use this idea a lot on marketing pages but never thought to try and apply it in an application UI. https://t.co/ZDlPZShMvw
? 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: https://t.co/fh1CxDruSi
? 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. https://t.co/62otrCbtte
☝️ Also, containing photos in circles - Great way to make a bad photo look good ? https://t.co/XSFoZJIiTR
? 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. https://t.co/R6POfB2WrR
? Styling content can be difficult. Here are a few ideas that can make a big difference: https://t.co/oiAH4foGJu
? Instead of blowing up small, in-app icons for your landing page, try putting a shape behind them and giving them a background color. https://t.co/BGknNtBzZ2