Addy Osmani @addyosmani
How Spotify makes text on images more readable: a CSS linear-gradient overlay. More common these days, but still an effective technique for better color contrast. https://t.co/tZDlwLRx3G
{ Design snippets }
Sid @siddharthkp
🔥Design tip for developers A good way to make your interface look “designed” is to use a consistent space scale It's not art, it's science* 🧮 https://t.co/vBVY7ojBnI
Steve Schoger @steveschoger
🔥 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. https://t.co/9Ed60pNf4p
Adam Wathan @adamwathan
🔥 Because Unsplash is powered by imgix under the hood, you can apply lots of image transformations directly in the URL! For example, here I've colorized an image by desaturating it, adding a colored overlay, and multiplying the overlay with the image, all using query params: https://t.co/4GNUB9mt9f
Steve Schoger @steveschoger
My favourite visual design trick at the moment: Reduced opacity on overlapping elements. It's subtle but it's a nice touch that looks great on marketing page sections like this testimonial 😍 https://t.co/5l7N0709Fm
Marketing Examples @GoodMarketingHQ
🔥 3 easy ways to improve an email modal: 1) Explain *why* people should sign up 2) Add social proof 3) Replace “Subscribe“ with a value-based CTA https://t.co/B4qKtZrW6Y
Steve Schoger @steveschoger
🔥 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: https://t.co/URoBGyC1LE
Marketing Examples @GoodMarketingHQ
🔥 3 tricks to persuade people to buy the higher tier package 1) Create a hierarchy 2) Offer a more compelling discount 3) Use tier names to set expectations https://t.co/u80Jp5Dbjs
Steve Schoger @steveschoger
I think the most important thing to consider when positioning buttons is consistency. If you think one button should be be right aligned, then right align ALL of the buttons on your application. Same for left alignment. https://t.co/pWWvm3Pa6G
Steve Schoger @steveschoger
My preference to right alignment comes when workflow buttons (next/previous/cancel) are introduced. Typically, their place in the hierarchy would look like this: - “Next” as the primary action - “Previous” as the secondary action - and “Cancel” as the tertiary action https://t.co/wYnhSZwgV8
Steve Schoger @steveschoger
No matter what side you choose, I would always put the primary action on the outer side. This feels more visually balanced to me. https://t.co/ONNCjlDZiE
Steve Schoger @steveschoger
When you have a next/previous button, it feels weird (in the Western world) when the the next button (primary action) is on the left. So I always align the button grouping on the right so the “Next” button is on the right outer side. https://t.co/hx5Ketpezf
Steve Schoger @steveschoger
? 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
Steve Schoger @steveschoger
? 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
Steve Schoger @steveschoger
? 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
Steve Schoger @steveschoger
? 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
MDS @mds
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
Steve Schoger @steveschoger
? 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
Steve Schoger @steveschoger
? 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
Steve Schoger @steveschoger
? 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
