tw - rl

steveschoger🔥 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.

Steve Schoger

@steveschoger

🔥 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.

My Notes:

Select to add to your #gallery:

🔥 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.

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:

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:

My Notes:

Select to add to your #gallery:

🔥 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:

steveschoger🔥 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.

Steve Schoger

@steveschoger

🔥 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.

My Notes:

Select to add to your #gallery:

🔥 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.

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 🥳

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 🥳

My Notes:

Select to add to your #gallery:

🔥 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 🥳

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.

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.

My Notes:

Select to add to your #gallery:

🔥 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.

steveschoger🔥 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.

Steve Schoger

@steveschoger

🔥 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.

My Notes:

Select to add to your #gallery:

🔥 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.

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 👌

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 👌

My Notes:

Select to add to your #gallery:

🔥 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 👌

steveschoger🔥 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:

Steve Schoger

@steveschoger

🔥 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:

My Notes:

Select to add to your #gallery:

🔥 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:

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:

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:

My Notes:

Select to add to your #gallery:

🔥 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:

steveschoger🔥 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:

Steve Schoger

@steveschoger

🔥 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:

My Notes:

Select to add to your #gallery:

🔥 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:

steveschoger🔥 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 💅

Steve Schoger

@steveschoger

🔥 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 💅

My Notes:

Select to add to your #gallery:

🔥 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 💅

steveschoger🔥 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 👌

Steve Schoger

@steveschoger

🔥 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 👌

My Notes:

Select to add to your #gallery:

🔥 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 👌

steveschoger🔥 If you want text of different sizes to *feel* like the same weight, make larger text thinner and smaller text bolder.

Steve Schoger

@steveschoger

🔥 If you want text of different sizes to *feel* like the same weight, make larger text thinner and smaller text bolder.

My Notes:

Select to add to your #gallery:

🔥 If you want text of different sizes to *feel* like the same weight, make larger text thinner and smaller text bolder.

steveschoger🔥 "Grey" doesn't have to mean Grey™. Try saturating your greys with a bit of blue or brown for a cooler or warmer feel.

Steve Schoger

@steveschoger

🔥 “Grey” doesn’t have to mean Grey™. Try saturating your greys with a bit of blue or brown for a cooler or warmer feel.

My Notes:

Select to add to your #gallery:

🔥 “Grey” doesn’t have to mean Grey™. Try saturating your greys with a bit of blue or brown for a cooler or warmer feel.

steveschoger🔥 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.

Steve Schoger

@steveschoger

🔥 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.

My Notes:

Select to add to your #gallery:

🔥 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.

steveschoger🔥 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:

Steve Schoger

@steveschoger

🔥 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:

My Notes:

Select to add to your #gallery:

🔥 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:

steveschoger🔥 Styling content can be difficult. Here are a few ideas that can make a big difference:

Steve Schoger

@steveschoger

🔥 Styling content can be difficult. Here are a few ideas that can make a big difference:

My Notes:

Select to add to your #gallery:

🔥 Styling content can be difficult. Here are a few ideas that can make a big difference:

steveschoger🔥 Instead of blowing up small, in-app icons for your landing page, try putting a shape behind them and giving them a background color.

Steve Schoger

@steveschoger

🔥 Instead of blowing up small, in-app icons for your landing page, try putting a shape behind them and giving them a background color.

My Notes:

Select to add to your #gallery:

🔥 Instead of blowing up small, in-app icons for your landing page, try putting a shape behind them and giving them a background color.

steveschoger🔥 Designing nice tables can be tough, but here's a few ideas that can make a big difference:

Steve Schoger

@steveschoger

🔥 Designing nice tables can be tough, but here’s a few ideas that can make a big difference:

My Notes:

Select to add to your #gallery:

🔥 Designing nice tables can be tough, but here’s a few ideas that can make a big difference:

steveschoger🔥 Font size isn't always the best way to emphasize or de-emphasize text, try using color and font weight instead:

Steve Schoger

@steveschoger

🔥 Font size isn’t always the best way to emphasize or de-emphasize text, try using color and font weight instead:

My Notes:

Select to add to your #gallery:

🔥 Font size isn’t always the best way to emphasize or de-emphasize text, try using color and font weight instead:

steveschoger🔥 This two-column form layout is great for organizing long forms and filling wider screens without using awkward long form fields.

Steve Schoger

@steveschoger

🔥 This two-column form layout is great for organizing long forms and filling wider screens without using awkward long form fields.

My Notes:

Select to add to your #gallery:

🔥 This two-column form layout is great for organizing long forms and filling wider screens without using awkward long form fields.

steveschoger🔥 Too many borders can make a design look really busy. Here's a few ideas that are a bit more subtle:

Steve Schoger

@steveschoger

🔥 Too many borders can make a design look really busy. Here’s a few ideas that are a bit more subtle:

My Notes:

Select to add to your #gallery:

🔥 Too many borders can make a design look really busy. Here’s a few ideas that are a bit more subtle:

steveschoger🔥 Overlapping elements on a page is a great way to create depth and encourage users to scroll

Steve Schoger

@steveschoger

🔥 Overlapping elements on a page is a great way to create depth and encourage users to scroll

My Notes:

Select to add to your #gallery:

🔥 Overlapping elements on a page is a great way to create depth and encourage users to scroll

steveschoger🔥 Giving your box shadows a slight, vertical offset helps to make them look more natural.

Steve Schoger

@steveschoger

🔥 Giving your box shadows a slight, vertical offset helps to make them look more natural.

My Notes:

Select to add to your #gallery:

🔥 Giving your box shadows a slight, vertical offset helps to make them look more natural.

steveschoger🔥 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.

Steve Schoger

@steveschoger

🔥 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.

My Notes:

Select to add to your #gallery:

🔥 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.