Practical UI Details

As Steve Schoger, designer and author of Refactoring UI, puts it, "Making [website] components look well designed can be broken down into a few discrete choices". Defining a color scheme, sizing system, and more for common components will save you time and standardize your output. Sometimes the difference between something looking "off" and looking "right" can be subtle, and together these details make a design feel great. Many of the following examples come from tweets by Schoger.

• Color icons slightly lighter than labels

  If you have icons next to labels, you can color them slightly lighter than the text that goes with them. This will make the most important info (the label) stand out.

  • US Dollar
  • Euro
  • Pound
  • Yen

• Add a subtle shadow to white text on a bright background

  If you need to use a bright background color with white text you can give the text a nice subtle shadow to make it more readable. Here we use text-shadow: 0 1px 2px rgba(0,0,0,0.2);

  Orders

  $128,421.01

  Total revenue

  4,181 sales

• Shift buttons .5 px for a nice hover effect

  In addition to this effect, you can increase the size of the element's shadow to give the effect of "lifting up". This is an effect used by Stripe.

  Create Account Contact Sales

• Floating button

  Here's another example of an element that Stripe uses. The box-shadow on these buttons is complex, which adds nicely to the effect: 4px 4px 16px 4px rgba(0, 0, 0, 0.2);

  See more posts

  Four loko raclette hashtag, pickled narwhal slow-carb subway tile vice unicorn selfies kogi 8-bit lattes.

• Give your box shadow a slight vertical offset

  This will give cards, boxes, or any other element a more natural on the page.

  128,421.01

  Total revenue

  4,181 sales

  1,009.84

  Yesterday

  936 sales

  108.22

  In the last hour

  4 sales

• Align icons and headers neatly

  If text is aligned properly (e.g. on the same line as the icons, or images), the text will be much easier for the user to read.

  Databases

  Lorem ipsum dolor sit amet consectetur adipisicing elit. Laboriosam deserunt ex ea debitis natus assumenda repellat, culpa veniam, pariatur.

  Servers

  Lorem ipsum dolor sit amet consectetur adipisicing elit. Laboriosam deserunt ex ea debitis natus assumenda repellat, culpa veniam, pariatur, alias dolore illo amet.

  Proxies

  Lorem ipsum dolor sit amet consectetur adipisicing elit. Laboriosam deserunt ex ea debitis natus assumenda repellat, culpa veniam, pariatur, alias dolore illo amet.

  Security

  Lorem ipsum dolor sit amet consectetur adipisicing elit. Laboriosam deserunt ex ea debitis natus assumenda.

• Pure grey text can look "off" on a colored background

  Instead of using grey text, saturate your text with the same hue as the background, or use rgba with a lowered opacity to make the color of the text blend with the background.

  Discover more

  Lorem ipsum dolor sit amet consectetur adipisicing elit. Odit molestiae nihil iusto mollitia amet provident, expedita dolorum facilis porro! Hic laboriosam.

  Notify Me

• Use an icon instead of the standard bullet in unordered lists

  Using icons such as arrows or checkmarks will give more life to otherwise boring unordered lists.

  Lorem, ipsum dolor sit amet consectetur adipisicing elit. Aperiam ad, excepturi quia molestias quisquam sit unde omnis a voluptate blanditiis accusantium! Voluptas itaque laborum, accusamus dicta nobis harum. Earum, a?

  Lorem ipsum dolor
  Consectetur adipisicing
  Dicta nobis harum
  Voluptas itaque laborum
  Accusamus dicta
  Excepturi quia molestias

• Use a hint of color at the top of your hero

  This can bring liveliness to your design, complementing the accent color of your website. 4px - 6px is enough.

  JChill

  • Home
  • Tour
  • Pricing

  Log In Sign Up

  Infrastructure success seed money interaction design

  Backing sales product management angel investor social media business model canvas network effects startup stealth.

  Sign Up Now

  for a 30 day trial

• Add a gradient border to modals or panels

  Similar to the last tip, this will also work great in modals or panels. You can even use a two color gradient to make it look even better.

  Congrats! The changes are successful.

  Thanks for submitting the changes, you'll see them live in between 5-10 minutes. To undo the changes, just hit the back button.

  Need more? View advanced settings.

  Accept

• Adjust hue for nice gradients

  When you use a gradient, in a button for example, change the hue to give a more "vivid" look.

  Get In Touch Get Involved

• Use contrast between two adjacent boxes instead of a line

  Using two slightly contrasted colors instead of using a line will be more pleasing to the eye and look more clean.

  Are you sure you want to delete the post?

  If you delete the post you'll never be able to see it again. Alternatively, you can do a back-up of it and then delete. To do this, head back to the post and look for the "Create Backup" button. Then click delete again.

  Delete Cancel

• Use color and weight to create typographic hierarchy

  Not only using weight is enough, when you use color you have a well defined hierarchy between the title and the descrpition.

  1

  Lorem ipsum dolor.

  Lorem ipsum dolor, sit amet consectetur adipisicing elit. Similique quos, veniam, accusamus quo error fuga perspiciatis.

  2

  Lorem ipsum dolor.

  Lorem ipsum dolor, sit amet consectetur adipisicing elit. Similique quos, veniam, accusamus quo error fuga perspiciatis.

  3

  Lorem ipsum dolor.

  Lorem ipsum dolor, sit amet consectetur adipisicing elit. Similique quos, veniam, accusamus quo error fuga perspiciatis.

• When in doubt, 16px font size with 1.5 line height looks nice for body text

  Also, you can use a dark shade of gray instead of black to ease the look for the user (instead of using high contrast black and white).

  Lorem ipsum dolor sit amet consectetur adipisicing elit. Cumque distinctio itaque quas necessitatibus excepturi ut corporis inventore fugiat amet, exercitationem accusantium repellendus, ex incidunt quia mollitia eligendi doloribus! Sit, voluptatibus.

• Increase your letter spacing in all-caps text

  This will give the text some space to breath and will make it easier to read for the user. The first line below uses letter-spacing: 1.3px;, the rest letter-spacing: -0.03px;

  Lorem ipsum dolor sit amet.

  Increase your exposure.

  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rerum expedita rem qui, ullam voluptatibus aut quas, quo explicabo esse quidem voluptas similique, eius velit maxime. Ipsam ab aliquam distinctio rerum!

• Use keylines to group similar content together

  This will make the content appear connected, and it will be easier for the user to understand it.

  Lorem ipsum dolor sit amet consectetur, adipisicing elit. Repellat minus dignissimos magnam natus ratione.

  Sign up for our newsletter

  Subscribe

• Create a great hero banner with blend-mode: multiply

  Using blend-mode with a desaturated photo and a background color gives a nice contrast to your hero banner with white text.

  NextBigThing

  • Work
  • Services
  • Team
  • Contact

  Your ideas are bigger than you think

  Lorem, ipsum dolor sit amet consectetur adipisicing elit. Iste debitis labore aspernatur ullam rerum, architecto hic quasi.

  Learn more See the work

• Overlap elements to create depth

  This will also encourage users to scroll and reveal the rest of the content.

  Coming Soon

  Next Big Thing

  Lorem ipsum dolor sit, amet consectetur adipisicing elit. Maxime in recusandae corrupti molestiae ab nulla perspiciatis iusto. Atque vitae.

  Lorem ipsum dolor, sit amet consectetur. Desereunt earum dolores error iusto velit possimus natus.

  Notify Me!

  Are you ready for the Next Big Thing?

  Lorem ipsum dolor sit amet consectetur adipisicing elit. Sint cupiditate impedit accusamus beatae neque maxime in molestiae a ratione sed provident doloribus suscipit, saepe modi consequatur cumque et quas autem.

• Create hierarchy for your buttons

  Your primary action button should stand out more than secondary/danger buttons.

  Cancel Previous Next

• Don't use bold color for negative action if it's not the main action

  This may confuse the users, instead use a subtle gray or light color.

  Cancel Update

• However, use red if you are confirming a high severity action

  If you don't use a color like red for confirming a high severity action, a user may think there's no danger in it.

  Drop all tables?

  Cancel Drop 'em

• Make the border of buttons lighter than the text

  This will make them stand out.

  Submit a talk

• Instead of borders, use background colors

  Too many borders can make a piece of UI look busy. Instead, use background colors to visually separate elements and use increased spacing between rows.

  Contacts

  Tighten Co.

  Team

  Taylor Otwell.

  Member

  Adam Whatan.

  Member

  Duke Street Studio Inc.

  Team

  Jeffrey Way

  Member

  Cancel Invite

• Simple breadcrumbs

  Nice and legible navigation element.