Introduction to Metro Design Principle: Pride in Craftsmanship

1. Introduction to Metro Design Principle: Pride in Craftsmanship

2. This presentation covers: • The connection between Swiss design and Metro design principles • An overview of how typography is central to Metro • Type choices in Metro • The relationship between type choices and grid layout • Layout guidelines • Creating the Metro silhouette

3. The origins of Swiss design The Swiss design style emerged in the field of graphic design in the mid-twentieth century. One of the key principles of the style was that by removing extraneous illustration and other elements, the designer could create a universal graphic expression through grid-based design. Specific techniques include: • An emphasis on typography and specifically the rules of legibility and readability such as limited typefaces, line length, word and letter spacing, and more • An emphasis on strong geometric shapes for artwork or illustrations • A strong preference for sans-serif typefaces particularly Helvetica and AkzidenzGrotesk

4. An examples of the Swiss style of design Beethoven poster by Josef Müller-Brockmann, 1955

6. The connection between the Swiss style and the Metro style Metro design borrows an emphasis on reduction, cleanliness, readability, and simple visuals from the Swiss style. In the “real world,” a transportation system needs to be clearly and immediately understood by as many people as possible. In the “digital world” navigation is just as important. People who use applications do not want to spend time learning how to use the application; they are more interested in the destination than how to get there!

7. The role of typography in Metro style applications In the age of digital type, there are literally thousands of choices when it comes to fonts. Although this may seem freeing on one hand, it can also be a burden if you are not an experienced designer. The various characteristics of a typeface include aspects such as x-height, ascenders, and descenders. These details are not as important if you are not a designer, however it is important to understand that all of the properties of a typeface add up to its “character.”

8. Recommended font usage • Use Segoe UI (the primary Windows typeface) for User Interface elements such as buttons and date pickers. • Use Calibri for text that the user both reads and writes such as e-mail and chat. • Use Cambria for larger blocks of text such as an article. Segoe UI (42pt) Calibri (42 pt) Cambria (42pt)

9. Consistency of type sizes is key Use a consistent set of font-families and font-sizes. Metro-style applications need to work on many different size screens and devices and the grid layout works best with certain combinations of fonts, font-sizes, and font-weights. For example, Segoe UI has a well-established type-ramp.

10. Establishing hierarchy through type size Metro-style applications rely on a lack of chrome (extraneous user interface). This means that typography takes on a larger role. With only four sizes of type you can convey hierarchical information. For example, when each font is proportionally larger than the previous, the user’s eye can easily identify the difference and by extension the importance of the text.

11. Establishing hierarchy through type size

12. The Metro grid begins with units and sub-units

13. Designing on the grid using proportions

14. Layout guidelines for groups of objects Whenever you need to divide the largest group of content into sub sections you should make sure the padding is 10px. In fact, if you always make sure that padding between items is always in multiples of 5px sub-units, you will be in good shape.

15. Padding: multiples of 5px sub-units

16. The Metro silhouette

17. The Metro silhouette improves usability From a usability perspective, the Metro silhouette is very important because it provides a visual anchor for the user. For example, when a user installs a new Metro app, they do not have learn how to use the navigation because all Metro style apps share these common navigation “signposts” and the user can simply focus on what is important: the content. The Metro silhouette is readily identifiable even with two totally different grid layouts. The consistent top, left, and bottom margins form a ‘C’ shaped silhouette that identifies them visually as Metro style apps.

18. Grid layouts encourage creativity At first glance, the structure of grid layouts seem restrictive and could lead to boring, repetitive layouts. However, grid layouts have been a part of the designer’s toolbox for many years and have proven to encourage creativity by providing a freedom of layout within certain reliable guidelines. Within any given grid layout, you can organize and experiment with elements such as color, size, imagery, white space and other aspects of graphical layout and make the design truly yours.

19. Grid layouts encourage creativity

20. Grid layouts encourage creativity

21. Summary This module covered: • The connection between Swiss design and Metro design principles • An overview of how typography is central to Metro • Type choices in Metro • The relationship between type choices and grid layout • Layout guidelines • Creating the Metro silhouette