Website UI/UX Guidelines

Typography

Hierarchy

One of the most important techniques for effectively communicating content is the use of typographic hierarchy.

Choose from well-known sources, Sans-Serif or Serif are safe choices.

Choose a typeface that works well in various sizes.

Text Sizing

Text Alignement

Font Scale & Line Height

Photosynthesis was inspired by the pentatonic scale and natural law to define 10 different font sizes and corresponding line heights.

Font Color

To achieve barrier-free design, we follow the WCAG standard, which maintains an AAA level of contrast ratio, i.e. 7:1 or more between body text, title, and background color.

Line Spacing

  • Line spacing is the vertical distance between lines of text.
  • Aim for about 140%-180% for optimal readability and accessibility.
  • Limit line length to 70–80 characters.
  • Font size should be minimum 14pt. The bigger the screen the bigger the text.
  • Small fonts need more spacing.

Color and contrast

Consider making body text on-screen dark gray rather than black. Screens have more severe contrast than paper, and thus are more tiring to read at full contrast.

Set the line-spacing

To make a block of text easier to read, set the line spacing to 120–145% of the point size.

White space between the headers and the body text

Use a line-length of 45–90 characters

The optimal length of a line for a single column page is 45–90 characters. The ideal width of a text block is 66 characters.

Iconography

Angles

Stick to 45-degree angles. If your design dictates that you must break this rule, try to do so in halves (22.5 degrees, 11.25, etc.) or in multiples of 15 degrees.

Basic shapes

Specific keylines are present for certain shapes: circle, square, rectangle, orthogonals, and diagonals. These basic shapes help unify Google system icons and regulate their placement on the icon grid.

Geometry

Preset standards have been determined for specific keylines: the circle, square, rectangle, orthogonals, and diagonals. These universal and simple elements have been developed to unify Google system icons and systemize their placement on the icon grid.

Stroke Weight

Use a consistent stroke width of 2dp, including curves, angles, and both interior and exterior strokes.

Complex Icons

Always keep a simple, flat style. Icons should not have a sense of depth nor a large amount of detail. If necessary, optical corrections should use the geometric forms on which all other icons are based, without skewing or distorting those shapes.

Icon Sizing

System icons are displayed as 24 x 24 dp. Create icons for viewing at 100% scale for pixel-perfect accuracy.

Dense layouts

On desktop, when the mouse and keyboard are the primary input methods, measurements may be scaled down to 20dp.

Layout

Icon content should remain inside of the live area, which is the region of an image that is unlikely to be hidden from view (such as when sidebars appear upon scrolling).

If additional visual weight is needed, content may extend into the padding between the live area and the trim area (the complete size of a graphic). No parts of the icon should extend outside of the trim area.

Color

The color of the icon should be consistent the color of the surrounding copy, unless the icon is being used to express state (in which case it should be colored accordingly).

Space

Adequate space should surround system icons to allow legibility and touch. Icons of 24dp can use a touch target of 48dp.

Dos

  • Recognizable
  • Embrace simplicity. (Find a single element that captures the essence of your app and express that element in a simple, unique shape. Add details cautiously)
  • Provide a single focus point. Design an icon with a single, centered point that immediately captures attention and clearly identifies your app.

Don’ts

  • Don’t use delicate, thin stroke weights.
  • Don’t use gestural or loose organic shapes.
  • Don’t place the icon on a coordinate that isn’t “on pixel”.

Layout

Grid systems for web designers to use are everywhere on the Internet. The king of the grids has been deemed “The 960 Grid”. The 960 Grid has the following structure:

  • Total width 960px.
  • 12 columns maximum, 60px each wide.
  • Each column has 10px left & right margin. In turn, this makes 20px of gutter space on the edges.
  • Total content area is 940px.
  • Responsive layout grid
  • The Photosynthesis layout grid is made up of three elements: columns, gutters, and margins.

The heatmaps

You can use the set of heatmaps to help you positioning your content inside the page, or to make design decisions based on screen ergonomy.

Example of 12 column grid

Shadow

UI Shadow color

The shadow color should be similar to either

  • The background-color (blue shadow on blue background)
  • The element’s color (red shadow behind a red object)

Lower the color opacity

Lowering the color opacity on the shadow to around 20-30.

Elevation

Elevation in Material Design: z-depth = 1 is very close to the ground, z-depth = 5 is far away from the ground. 

Changing elevation

Components can change elevation in response to user input or system events. When this happens, components move to preset dynamic elevation offsets, which are the default elevations components move to when not resting.

Upon user input, the element can increase its present elevation to 4dp.

Components

  • Selection controls
  • Radio buttons
  • Checkboxes
  • Switches



Tooltips

Timing

Display the tooltip for 1.5 seconds. If the user takes another action before that time ends, the tooltip will disappear.

Keep them short. The macOS Human Interface Guidelines4 suggest a maximum of 60-75 characters.

Minimum font size 12

Snackbars

In wide layouts, snackbars can be left-aligned or center-aligned if they are consistently placed on the same spot at the bottom of the screen.

  • Single-line snackbar height: 48 dp tall
  • Minimum width: 288 dp
  • Maximum width: 568 dp
  • 2 dp rounded corner
  • Text: 14 px
  • Action button: 14 px, all-caps text

Text fields