Last update at 24 · 07 · by milo

‧‧‧ One of 7754

Guide to ui design focus on specific topic areas such as glogic structure including visual aesthetic. UI Style Guides are a design and development tool that brings cohesion to a digital user interface and its experience.

Typography

Typography is the most common interface design element, defining usability typefaces used in a product. Instructions for Titles, Subtitles, Headings (H1, H2, H3), Body Text, and Captions are mandatory.

Example

a Heading & Text

Playfair Display

Playfair lends itself to the late 18th century, period, and while it is not a revival of any particular design, it takes influence from the designs of John Baskerville and from ‘Scotch Roman’ designs.

Aa - Heading

Open Sans

Open Sans is a sans-serif typeface designed by Steve Matteson and commissioned by Google. According to Google, it was developed with an "upright stress, open forms and a neutral, yet friendly appearance" and is "optimized for legibility across print, web, and mobile interfaces."

The Open Sans font is currently the default typeface for Mozilla software. Like Roboto, Open Sans is considered a “humanist font,” as it was developed using oval shapes and stroke variations that give it a more human, familiar feel.
The Open Sans font consists of 10 styles: 300, 300italic, regular, italic, 600, 600italic, 700, 700italic, 800, 800italic and 7 charsets: greek-ext, cyrillic, vietnamese, greek, latin, cyrillic-ext, latin-ext.
This free typeface was designed with an upright stress, open forms and a neutral, yet friendly appearance. It was optimized for print, web, and mobile interfaces, and is incredibly legible.

Arial

Arial is a neo-grotesque typeface: a design based on the influence of nineteenth-century sans-serifs, but made more regular and even to be more suited to continuous body text and to form a cohesive family of fonts.

Arial, sometimes marketed or displayed in software as Arial MT, is a sans-serif typeface and set of computer fonts. The Arial typeface was designed in 1982, by Robin Nicholas and Patricia Saunders, for Monotype Typography.
The Arial typeface comprises many styles: Regular, Italic, Medium, Medium Italic, Bold, Bold Italic, Black, Black Italic, Extra Bold, Extra Bold Italic, Light, Light Italic, Narrow, Narrow Italic, Narrow Bold, Narrow Bold Italic, Condensed, Light Condensed, Bold Condensed, and Extra Bold Condensed.
Arial contains more humanist characteristics than many of its predecessors and as such is more in tune with the mood of the last decades of the twentieth century. The overall treatment of curves is softer and fuller than in most industrial style sans serif faces.

Color Palette

UI Style Guide references brand identity guidelines, include a secondary scheme of lighter accent color.

Example

b Color scheme

hex #d84800 is composed of 84.7% red, 28.2% green and 0% blue. In a CMYK color space, it is composed of 0% cyan, 66.7% magenta, 100% yellow and 15.3% black.
Hue angle is 20 degrees, a saturation of 100% and a lightness of 42.4%.
#d84800 color hex is obtained by blending #ff9000 with #b10000.

#d84800 color description : Strong orange.

c Color Conversion

The hexadecimal color #d84800 has RGB values of R:216, G:72, B:0 and CMYK values of C:0, M:0.67, Y:1, K:0.15.
Its decimal value is 14174208.

Hex tripletd84800#d84800
RGB Decimal216, 72, 0rgb(216,72,0)
RGB Percent84.7, 28.2, 0rgb(84.7%,28.2%,0%)
CMYK0, 67, 100, 15
HSL20°, 100, 42.4hsl(20,100%,42.4%)
HSV (or HSB)20°, 100, 84.7
Web Safecc3300#cc3300
CIE-LAB50.964, 54.192, 61.82
XYZ30.638, 19.237, 2.1
xyY0.589, 0.37, 19.237
CIE-LCH50.964, 82.21, 48.762
CIE-LUV50.964, 118.371, 42.12
Hunter-Lab43.86, 47.932, 27.864
Binary11011000, 01001000, 00000000

guide to ui design

Designing often necessitates considering the aesthetic, functional, economic and sociopolitical dimensions of both the design object and design process. It may involve considerable research, thought, modeling, interactive adjustment, and re-design.

Design

Home DesignGuide to ui design