A great book for the back-end engineer who struggles with styling their applications.

Starting from scratch

• Start with a feature, not a layout.

• Easiest way to find yourself frustrated and stuck when working on a new design is to start by trying to “design the app”.

• App is a collection of features. Trying to design before we’ve designed a few feature means that we don’t even have information needed to make the decisions!

• Start with piece of functionality instead.

• Start with feature such as “searching for a flight”

• Your interface will then need…
• A field for departure city, field for return date, field for destination city, button to perform the search.

Details Come Later

• when designing feature, don’t get hung up on low level decisions. Typefaces, icons, shadows etc.

• Use the Thick sharpie design trick.

• Design in gray scale. You’re forced to use spacing, contrast and size to do all the heavy lifting

• Don’t design too much !

• Don’t need to over design everything before implementation

Work in Cycles

• Design a simple feature -> once you’re happy with it -> implement it and make real -> iterate.

• When designing new feature, expect it to be hard to build.

• For example, comments with attachments. If extremely difficult to implement, better off just leaving it out for now (only including primitive comments) instead of giving up on comments all together.

How to choose a design personality?

• Font choice
• Elegant / Classic look = serif typeface [freight text]
• Playful look, use a rounded sans serif font [proxima soft etc]

• Plainer look = neutral sans serif [freight sans]

• Color
• Blue is safe and familiar
• Gold might say expensive and sophisticated

• Pink is a bit more fun and not so serious

• Border Radius
• Small border radius = boring
• Large border radius = playful !

• No border radius = serious and formal

• Language
• Less personal tone = more formal
• casual tone = more friendly

Limit Your Choices

Define ahead of time

• Choose a set of 8-10 different shades ahead of time

Designing by process of elimination

• Pick best option, take a guess at what one will look best. Then choose left right, and repeat.

Have a system for everything!

• Such as font size, font weight, line height, box shadows, borders etc etc etc

Hierarchy is everything

• Visual hierarchy is important: refers to how important the elements in an interface appear to one another

Size isn’t everything

• Don’t rely on font size to control hierarchy. Can lead to content too large and secondary content too small.

• Use font color or font weight instead.

• Making primary element bold, lets you use more reasonable font size. And helps communicate importance.

• Softer color for supporting text instead of tiny font size is better.

Tips

• Stick to two or three colours.
• A dark color for primary content (like heading of an article)
• A grey for secondary content (like the date an article was published)
• A lighter grey for tertiary content (maybe copyright notice in footer)

Two font weights:

• A normal font weight (400 or 500 depending on font) for most text.
• A heavier font weight ( 600 or 700) for text you want to emphasise.

• Don’t use less than 400 font weight. Instead use lighter font colour.

• DON’T use grey text on coloured backgrounds.

• Grey on white is reduced contrast effect. Making text closer to background colour is what creates the heirachy.

• Approach for this is to pick a new colour based on background colour, adjust hsv until it looks right to you

Emphasise by demphasizing

• If elements not standing out enough. De-emphasis the other elements instead. By giving inactive items a softer colour.

Labels are a last resort

• Combine labels and values if neccessary

• 12 left in stock is better than In Stock: 12

• 3 Bedrooms is better than bedrooms: 3

• Dashboards are okay to use labels, but add the label and treat as supporting content. Label is for clarity, data is what matters.

Balance Weight and Contrast

• Bold text more emphasised because takes up more surface area.

• When you put icon next to text, the icon can feel emphasised.

• To balance, lower the contrast of the icon by giving it a softer colour.

Actions and Colour

• primary actions should be obvious: solid, high contrast background colours work great secondary actions should be clear but not prominent. Outline styles or lower contrast backgrounds.

• Tertiary actions should be discoverable but unobtrusive. Styling like links is best here.

• Destructive actions follow same styling guides.

Layout and Spacing

• White space always added to a design. If looks too cramped, add margin or white space.

• Best approach. Give too much white space then remove. Instead of no white space and then adding.

• More obvious when to remove white space instead of adding it.

Establish a spacing and sizing system

• Make sure no two values in your sizing scale are ever closer than about 25% to each other.

• 16px good number to start with.

Using that as baseline for scale:

• 4, 8, 12, 16, 24, 32, 48, 64, 96, 128, 192, 256, 384, 512, 640, 768

• Need to add some space under an element? Grab a value from your scale. Not quite enough? Use the next value.

Grids are over rated

• Don’t use percentages to size something unless you want it to scale too

Designing Text

• 12, 14, 16, 18, 20, 24, 30, 36, 48, 60, 72px

• Resort to OS font stack:
• apple-system, Segoe UI, Roboto, Noto Sans, Ubuntu, Cantarell, Helvetica Neue

Keep Line length in check

• Make your paragraphs wide enough to fit between 45 and 75 characters per line

• If you’ve got links in your interface that are really ancillary and not part of the main path a user takes through the application, consider adding an underline or changing the color only on hover.

Align with readibility in mind

• If something is longer than two or three lines, it will almost always look better left-aligned.

• If you’ve got a few blocks of text you want to center but one of them is a bit too long, the easiest fix is to rewrite the content and make it shorter

Working With Color

• Use HSL
• Hue - the position on colour wheel
• S - saturation - 0% saturation is grey, 100% is the hue
• L - 0% black, 50% is hue, 100% is white

More colors than you think

• Need lots of colours to build something realistic.

• Greys: Text, background, panels, form controls - almost everything in an interface is grey.

Primary Colours

• One, MAYBE two primary colours. Used for primary actions, active navigation elements etc. (5-10) shades for this.

Accent Colours

• Few accent colours to highlight new feature. Such as teal, yellow, pink etc.

• Different accent for semantic states, red for destructive action.

• Yellow for warning message, green to highlight trend. Etc

How do you define colour palette ?

• The base color in the middle that your lighter or darker shades will be based on

• Rule of thumb: pick a shade that would work well as a button background

• Finding the edges: darkest shade used for text, while lightest shade be used for background of element

Accessible doesn’t mean ugly

• To meet contrast ratios… flipping the contrast. Instead of using light text on a dark colored background, use dark colored text on a light colored background:

Creating Depth

• Small shadows with a tight blur radius make an element feel only slightly raised off of the background, while larger shadows with a higher blur radius make an element feel much closer to the user.

• Closer something feels to a user, the more it will attract their focus.

• Smaller shadow, something like a button you want user to notice.

• Medium shadow, things like drop downs , elements that need to sit further above rest of UI.

• Large shadows, great for modal dialogs , where you really want to capture users attention.

Using two shadows?

• First shadow is larger and softer, with considerable offset and large blur radius. Simulates shadow cast by object behind a direct light source.

• Second shadow is tighter and darker, with less vert offset and smaller blur radius. Simulates the shadowed area underneath an object. Where ambient light struggles to reach.

Overlap elements to create layers

• Instead of containing a card entirely within another element, offset so it crosses the transition between two different backgrounds.

• Make an element taller than its parent, so it overlaps on both sides.

Working with images

Bad photos ruin design !!!!

• For good photos, professional photographer, or stock images (use unsplash etc)

• Don’t use placeholder images, and expect to be able to take some with smartphone and replace them later.

• Conflicting text on hero image? Add an overlay to help with standing out. Otherwise directly edit the contrast of image.

• Colourise image manually: 1) Lower image contrast, to balance it out a bit 2) Desaturate image , to remove colour 3) Add solid fill, using “multiply” blend mode

Everything has an intended size

• Don’t scale up icons beyond their intended size, instead use icon and draw box or border around to makeup the size.

• Don’t scale screenshots:

• Consider taking just a partial screenshot, so you can display it in less space without needing to scale it down

Control user uploads

• User Pics, center their images inside fixed containers, cropping out anything that doesn’t fit.

• CSS by making the image a background image, and setting the background-size property to cover.

• User pics bleed into background?
• Add subtle inner box shadow

Finishing Touches

• Replace bullet points with icons

• Add colour with accent borders
• Decorate your backgrounds

• Use gradient, two hues, no more than 30 degrees apart

• Don’t overlook empty States!

• If you’re designing something that depends on user-generated content, the empty state should be a priority, not an afterthought.

• Try incorporating an image or illustration to grab the user’s attention, and demphasizing the call-to-action to encourage them to take the next step.

Think outside the box

• Selectable row of cards instead of radio buttons

Leveling Up

• Look for decisions in designs that you wouldn’t have thought of.

• Rebuild your favourite interfaces, from scratch without looking at developer tools.

• When you’re trying to figure out why your version looks different than the original, you’ll discover tricks like “reduce your line height for headings”,“add letter-spacing to uppercase text”, or “combine multiple shadows” all on your own.