Steve Schoger design tips

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

Continuing work on the Refactoring UI component gallery this week. Here's sneak peak at some of the layout ideas for pricing pages pic.twitter.com/QDmdM6KgJl

Been working on the Refactoring UI component gallery all week There's going to be a *ton* of examples to browse through when looking for ideas. Here's a few examples of sign-in forms I put together today:pic.twitter.com/Knn7Xmf9M7

Working on some documentation as we speak. Here are a few ideas:pic.twitter.com/4k1KhGj616

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

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

 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

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

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

 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

"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

 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

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

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

Here's another small example that I'll be using for my @LaraconOnline talk. Getting really excited about this. I've been working on this talk on and off, evenings/weekends for over 2 months.pic.twitter.com/oMHDCNYnz1

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

Also, containing photos in circles - Great way to make a bad photo look good pic.twitter.com/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.pic.twitter.com/R6POfB2WrR

This year at @LaraconOnline I will be talking about the "Little Details of UI Design". I'll be refactoring the design below, sharing *every* step along the way, with lots of hawt tips that you can apply to your own designs Tickets are available at http://www.laracon.net pic.twitter.com/yV2zoLL5gW

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

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

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

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

Be sure to check the focus state on these pic.twitter.com/kAnAvc1vUq

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

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

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

On mobile, I would keep everything in one column and let size, contrast and space do the work to create hierarchy.pic.twitter.com/nQGrDusdw6

This also provides a great space for inline helper text.pic.twitter.com/VsmspFRvtM

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

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

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

My general "safe" rule for picking gradient colours is to pick 2 hues within a 100° of each other.pic.twitter.com/FXMk9iWpgA

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

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

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

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

Great tips on digital typography from @steveschoger: http://www.steveschoger.com/2017/07/19/6-tips-that-will-improve-your-typography-on-your-ui/ …pic.twitter.com/nZhHzBSki4

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

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

Facebook is a good example of how using a dark/desaturated, matching hue for text/components can make a site feel more “glued” together:pic.twitter.com/NEO7lFMs2c

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

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

This technique is great for making buttons, charts and backgrounds “pop” more on the page.pic.twitter.com/41U3Fnqe56

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

Here's an example of how much more "designed" something can look just by being thoughtful about font size, weight, contrast and spacing:pic.twitter.com/gAaZghN22u

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

But be careful when doing it on complex backgrounds as it may give it a "ghost" effect pic.twitter.com/q2iYDoOBuX

Alternatively, as @moealmaw mentioned, you can lower the opacity on the text for a similar effect.pic.twitter.com/2LmkOef0BF

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

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

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

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 love Stripe's visual design as much as everyone else. But every time I see a non-Stripe site with a skewed background I cringe a little bit (SadIy, I've been guilty of this too). BTW, incase you didn't notice, the skewed background mimics Stripe's logo:pic.twitter.com/E203QnKSkN

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 pic.twitter.com/yqTjvJTslG

Ever run into annoying CSS layout bugs that are really hard to troubleshoot? (WHY IS THERE A HORIZONTAL SCROLLBAR WHERE IS THIS COMING FROM?!?) Throw this style into your dev tools to quickly see the boundaries of every element without affecting the layout:pic.twitter.com/Qwc2Ic2fV5

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