1.5: Layout Design & Spacing
1.5: レイアウトデザインとスペーシング

Introduction 紹介

Welcome back! In the previous Exercise, you learned about different types of grids and how to set up a grid in Sketch, Adobe XD and Figma. In this Exercise, you’ll be learning about different layout design principles and best practices to help you with your Student Project designs. We’ll start by introducing some general guidelines on how to layout your page, based on user behavior, before looking more closely at using spacing and measurements effectively. We’ll then take a look at some key rules from the iOS Human Interface Guidelines and Material Design guidelines to consider when working on mobile app designs.
再びようこそ！前の演習では、さまざまなタイプのグリッドと、Sketch、Adobe XD、Figmaでグリッドを設定する方法について学びました。この演習では、学生プロジェクトの設計に役立つさまざまなレイアウト設計の原則とベストプラクティスについて学びます。まず、ユーザーの行動に基づいてページをレイアウトする方法に関する一般的なガイドラインをいくつか紹介してから、間隔と寸法の効果的な使用について詳しく見ていきます。次に、iOS ヒューマン インターフェイス ガイドラインとマテリアル デザイン ガイドラインから、モバイル アプリのデザインに取り組む際に考慮すべきいくつかの主要なルールを見ていきます。

In the task, you’ll get the chance to further refine your design layouts, before moving onto visual hierarchy and more UI elements in the next Exercise.
このタスクでは、次の演習で視覚的な階層とより多くの UI 要素に進む前に、デザイン レイアウトをさらに洗練する機会が得られます。

Layout Design レイアウトデザイン

Whatever you’re designing, you should always take a content-first approach. What is it that needs to be communicated on each page? What is the essential content of each page?
何をデザインするにしても、常にコンテンツファーストのアプローチを取るべきです。各ページで伝えるべきことは何でしょうか?各ページの基本的なコンテンツは何ですか?

Once that is decided, you then need to work out how best to lay out your page, which requires an understanding of how users interact with different devices. Luckily, a lot of research has already been done regarding how users interact with their screens, and how content is navigated. In this section, we’ll have a quick look at some basic layout design principles.
それが決定したら、次はページの最適なレイアウト方法を考える必要がありますが、そのためにはユーザーがさまざまなデバイスをどのように操作するかを理解する必要があります。幸いなことに、ユーザーが画面とどのように対話するか、コンテンツがどのようにナビゲートされるかについては、すでに多くの研究が行われています。このセクションでは、いくつかの基本的なレイアウト設計原則について簡単に説明します。

Your layouts consist of all the elements, big and small, that will make up every screen. As a general rule, you start out broad, with layout elements that will be part of every screen. These will provide a “frame” for everything else and you’ll know what space is always occupied and cannot be designed over. Apart from those, you can tailor each screen and work on smaller details. Let’s look at what can be included to frame every screen.
レイアウトは、すべての画面を構成する大小のすべての要素で構成されています。原則として、最初は幅広く、レイアウト要素をすべての画面の一部にします。これらは他のすべてのための「フレーム」を提供し、あなたは常に占有されていて、設計できないスペースを知るでしょう。それらとは別に、各画面を調整し、細部に取り組むことができます。すべての画面をフレームに収めるために何を含めることができるかを見てみましょう。

Video: Applying Layout in Your Design
ビデオ: デザインにレイアウトを適用する
In this video demonstration, one of our instructors will take you through:
このビデオデモでは、インストラクターの1人が以下について説明します。

1. Layout best practices; レイアウトのベストプラクティス。
2. Good and bad layout examples;
   良いレイアウトと悪いレイアウトの例。
3. Useful layout tools in Figma.
   Figmaの便利なレイアウトツール。

音を出すにはクリックしてください。

9:52

●●●

Layout & Hierarchy Principles

Applying Layout & Hierarchy

Figma Autolayout

Header and Footers ヘッダーとフッター

Generally speaking, most apps or websites you design will all have two staple components: a header and a footer. These are large elements that will be part of every screen. In the image below, headers and footers are displayed in red.
一般的に、デザインするほとんどのアプリやWebサイトには、ヘッダーとフッターという2つの主要なコンポーネントがあります。これらは、すべての画面の一部となる大きな要素です。下の画像では、ヘッダーとフッターが赤で表示されています。

Figure 1. Header and footer shown as red bars at the top and bottom with blue and gray content in the middle.
図 1.ヘッダーとフッターは上部と下部に赤いバーで表示され、中央に青と灰色のコンテンツが表示されます。

Normally on websites, you’ll find that both the header and footer house navigation elements. On the header you’ll likely find a menu, a logo, and the website’s search feature. If the website allows users to create accounts or profiles, you’ll usually find the options to do so on the top right. If the menu is pretty large and breaks down into a submenu, it will be housed in the header as well.
通常、Webサイトでは、ヘッダーとフッターの両方にナビゲーション要素が含まれていることがわかります。ヘッダーには、メニュー、ロゴ、およびWebサイトの検索機能がある可能性があります。ウェブサイトでユーザーがアカウントやプロフィールを作成できる場合、通常は右上に作成するためのオプションが表示されます。メニューがかなり大きく、サブメニューに分割されている場合は、ヘッダーにも格納されます。

Figure 2. Newsweek Footer. Newsweek’s footer
図 2.ニューズウィークフッター。ニューズウィークのフッター

On a website’s footer, you’ll normally find contact info, copyright details, career information, and further navigation links.
ウェブサイトのフッターには、通常、連絡先情報、著作権の詳細、キャリア情報、その他のナビゲーションリンクがあります。

Mobile apps aren’t as straightforward. While headers and footers will house navigation elements, what this translates to varies from app to app, according to their particular requirements. It also depends on the operating system. Headers and footers could house a menu, likely displayed as icons, like the menu options in Instagram shown in the left image below, or they could house one element that lets you access a menu hidden on the side, like the kebab menu in the Slack app shown in the right image below. We’ll take a look at mobile app layout requirements in just a moment.
モバイルアプリはそれほど単純ではありません。ヘッダーとフッターにはナビゲーション要素が格納されますが、これが何を意味するかは、特定の要件に応じてアプリごとに異なります。また、オペレーティングシステムにも依存します。ヘッダーとフッターには、下の左の画像に示すInstagramのメニューオプションのように、アイコンとして表示されるメニューを格納することも、下の右の画像に示すSlackアプリのケバブメニューのように、側面に隠れたメニューにアクセスできる1つの要素を格納することもできます。モバイルアプリのレイアウト要件については、後ほど説明します。

Figure 3. Sources: Left and right
図 3.出典:左と右

What’s important for you to keep in mind is that these large elements will be part of every screen and will not change from screen to screen. Whatever is between them can change, but headers and footers will not.
覚えておくべき重要なことは、これらの大きな要素はすべての画面の一部であり、画面ごとに変更されないということです。それらの間にあるものは何でも変更できますが、ヘッダーとフッターは変更されません。

Check out the gif below. Focus on the top of the screen and notice how it always looks the same.
以下のgifをチェックしてください。画面の上部にフォーカスして、常に同じように見えることに注目してください。

Figure 4. Source: UI8
図 4.出典:UI8

In the animation above, you can see that while the top of the screen displays different words and navigation elements relevant to what is being displayed, the basis is the same. Sometimes you’ll see a kebab menu, sometimes a hamburger menu, but the size of the “blue box” that houses these words and its position always remain the same. Note how the footer that houses four more navigation options also remains consistent on most screens. You’ll notice layout patterns such as these on every app you use.
上のアニメーションでは、画面の上部に表示されている内容に関連するさまざまな単語とナビゲーション要素が表示されていますが、基本は同じであることがわかります。ケバブのメニューやハンバーガーのメニューが表示されることもありますが、これらの単語を収納する「青いボックス」のサイズとその位置は常に同じままです。さらに 4 つのナビゲーション オプションを格納するフッターも、ほとんどの画面で一貫していることに注意してください。このようなレイアウトパターンは、使用するすべてのアプリに見られます。

It’s also important to note that headers should be static, or, on apps, should reappear after a scroll. Because headers normally contain important navigation elements, having them vanish after you scroll down is incredibly annoying and leaves users with no ability to navigate an app or website.
また、ヘッダーは静的であるべきであり、アプリではスクロール後に再表示される必要があることに注意することも重要です。通常、ヘッダーには重要なナビゲーション要素が含まれているため、下にスクロールした後にヘッダーが消えてしまうと非常に面倒で、ユーザーはアプリやWebサイトをナビゲートできなくなります。

Rule of Thirds

The rule of thirds is a design guideline based on grids, stating that any design or image can be divided into nine equal parts. These sections can stretch or adapt to work with any design as long as they remain equal.

Line intersections mark points of tension and are ideal places for design elements. Placing them on these tension points will produce more energetic and interesting compositions.

In Figure 5 , you can see the 3x3 grid with tension points indicated, and in Figure 6, you can see a web page with overlaid 3x3 grid, showing a focus on those tension points.

Figure 5. Source: Tubik Studio

Figure 6. Source: Site Inspire

The Fold

The "fold" is basically the invisible line that marks the end of what you see displayed on a screen. The phrase has its roots in the print industry: newspapers are normally folded in half because they are printed on super long newsprint paper. Back in the day, when they were the primary news outlet, anything printed above the fold would naturally garner the most attention. In the image below, everything above the fold, or what you instantly see when you open up an app or land on a website, is highlighted in a large pink overlay.

Figure 7. An example of a basic website with simple shapes, overlain with a pink box to highlight the part that is considered above the fold.

For some time, the space above the fold on screens was treated just like the space above the fold on newspapers. It was prime screen real estate. Everything important had to be placed above the fold, resulting in cluttered screens and overwhelming layouts.

Today, interactive screens, smartphones, and tablets have freed designers from much of the fold’s grip. Being able to swipe and scroll instead of having to click endlessly makes browsing fun and effortless, and users are more likely to engage with content below the fold. Content above the fold, however, still grabs most of a user’s attention. It is, after all, what they see first and what compels them to carry on. You’ll still see key headlines and new stories above the fold in online newspapers.

Figure 8. The Guardian’s online sports page, showing the part above the fold. Source: The Guardian

This doesn't mean you have to place everything important right at the top. It simply means you should carefully consider what you prioritize placing above the fold, making sure that it motivates users to dive deeper into the website or app. Content above the fold should be a gateway to the rest of the app or website, not an endpoint.

Scanning Patterns

As you begin to develop layouts and decide where you’ll place what, you’ll want to consider common scanning patterns.

Scanning patterns are common ways users look at a website. In other words, their eyes will normally go from point A to point B to point C. The two most common scanning patterns are the Z pattern and the F pattern.

Z Pattern

In Z patterns, a user’s eyes will go from left to right across the top, back down in a diagonal to the left, and then to the right again across the bottom. The invisible line their eyes follow will look like a Z, like the yellow line in the image below.

Figure 9. An example of a Z pattern in yellow, indicating the direction the eye takes. Source: Amazon

F Pattern

In F patterns, a user’s eyes will start at the top left and go right across the top. They’ll then repeat this motion a few times as they scan down the page. The invisible line their eyes follow will look like an F, like the one below.

Figure 10. A Google search results page showing the F pattern in yellow.

Use scanning patterns to your advantage, giving them careful consideration as you design. Is the layout you established reinforcing them? Is this working in your favor?

One way to evaluate scanning patterns is through eye tracking. It “follows” a user’s eye movement, detailing when and for how long they looked at a particular element. The results will look something like this.

You can find more information in these articles on marketing lessons from eye-tracking studies and the f-shaped reading pattern.

You want to design with all of this in mind to create these eye-tracking lines intentionally. In the image below, the bold text’s right edge (where it says “The End” in black) and the image are creating a line. Normally, a user’s eye would travel down along this edge as it scans.

Figure 11. A website showing aligned layout with starkly contrasting colors. Source: Notcoming

Think of these edges as the rails you sometimes use to walk down stairs. You won’t necessarily use them, but they are there to help guide you.

Spacing

More often than not, color, size, typography, imagery, and iconography are considered the key players in a visual design by actively taking up space. Space itself is generally ignored, yet it’s a crucial component of any design. Space can be used effectively to lay out your screens by framing and distinguishing design elements.

In any of your designs, you can have either positive space which is space that is being used (the space you notice; “active space”), or negative space, which is empty space (inactive space; “whitespace”). In the image below, the key areas of active space have been outlined in green. Almost everything else on the page can be considered whitespace.

Figure 12. Example of a website with photo blocks and basic navigation, with all elements outlined in green, and lots of whitespace. Source: The Calvert Journal

When working with space, you want to think about balance. Too little whitespace will lead to a cluttered design, while too much might mean your design elements feel uncoordinated and unrelated. This all ties back to the Gestalt Laws of Grouping you learned about earlier in this Achievement. Elements grouped in proximity to one another are cognitively processed as related to one another, whereas those spaced apart are not.

Additionally, surrounding important elements with whitespace can help draw attention to them, without distracting users with other design elements. In the example above, notice how you’re drawn to the large image in the middle of the page? It’s clear that size and position play a role, but also consider how the empty space that frames the image draws your attention to the image. There’s nothing else to distract you, and the contrast between a plain background and the image in the foreground helps draw your eye. We’ll dive into this in more detail in a couple of Exercises as we begin to explore visual hierarchy.

A good balance of active and inactive space is particularly important on mobile devices. Considering the smaller canvas, elements need to still be big enough for users to see and interact with. A cluttered mobile design will cause significant usability issues and be visually unappealing.

So, how can you incorporate good spacing into your own design? Space is a crucial design element in and of itself, and just like every other aspect of a design, you need to approach space with consistency, accuracy, and usability in mind.

One way to do this is to use padding between your UI elements. Padding is the space that surrounds an element in a design.

Figure 13. The same image is displayed on the left and the right, however the left image is the basic, gray wireframe while the right image is the basic wireframe with blue and pink indications of padding around each element. Source: Material Design

A minimum padding width should be applied consistently across your design. The more padding you assign to each element, the more spacious your design. Try to aim for around 8px to 20px of padding around your UI elements on a mobile device, and anything upwards of 20px for tablet and desktop devices. In the example above, you can see that Material Design recommends a padding of 16dp between the top of a card and the card’s title, and between the title and any rich media placed beneath. 8dp padding is applied to any buttons (see Action 1 and Action 2 in the image above). Keeping padding consistent enhances the aesthetics of your design, expedites your work, and makes things a lot easier for the frontend developers you’ll be working with.

Another way to achieve consistent spacing in your designs is to use a consistent gutter width. Gutters, you'll recall from the previous Exercise, are vertical or horizontal lines of empty space in a design, where no element edges should fall.

For a comprehensive look at spacing and how it affects both developers and designers, check out this article: Space in Design Systems.

Measurement in Design

It’s a common notion that creatives and numbers don’t mix; that the creative process itself can’t be quantified; that creatives are terrible mathematicians. This is all part of a old, dusty myth that needs to be shattered, pronto.

Numbers and math are actually super handy in design. Some of the characteristics of cohesive design, like proportional elements and consistent placement, rely heavily on numbers and a few basic mathematical operations to work.

Putting a little math through the measurements behind design doesn’t just make your design better, it makes designing easier. Design measurements facilitate the visualization and organization of elements—just what you need for laying out screens.

Dozens of different units of measurement are used in the design world, and vary from discipline to discipline. For your project in Sketch or Adobe XD you'll be working in pixels by default, but in digital and user interface design, you’ll commonly be coming across and using the following:

• Pixels (PX);
• Pixels or Dots Per Inch (PPI or DPI);
• Points (PT);
• Percentages (%).

Let's take a closer look at each type.

Pixels (PX)

Pixels are the basic units of images. Simply put, they are the little squares that you see when you zoom all the way in on an image. Together, they create bitmap (BMP) images (also called raster images), a rectangular mesh of cells/pixels, each containing a distinctive color.

Figure 14. A square full of pixels in varying shades of blue.

Their physical size is defined by the resolution of the screen on which they live. Lower resolutions require less pixels, making the pixels larger. Higher resolutions require more pixels, making the pixels smaller.

Pixels Per Inch (PPI) or Dots Per Inch (DPI)

Pixels per inch is a measurement of pixel density. It defines the number of pixels in a vertical or horizontal inch on a screen. In other words, 200 PPI means 200 pixels side by side in a horizontal or vertical row.

Figure 15. In this example, the left shows a vertical line of 200 PPI and the right shows a horizontal line of 200 PPI.

So, a square that is 1 inch by 1 inch would contain 40,000 pixels.

Figure 16. An example of a square full of blue pixels, annotated with the math: 200 PPI x 200 PPI = 40,000 pixels.

Sometimes, you’ll hear someone say dots per inch (DPI). This is essentially the same thing as PPI, and in digital design they can be used interchangeably. Only print makes their differences relevant.

Points (PT)

Points are primarily used for typography and are 1/72 of an inch. 72 points are roughly 1 inch. You’ll commonly use this to define type size and leading.

Percentages (%)

Percentages are a relative unit of measurement primarily used in digital design. Essentially, an element’s size is used to define the size of all others. So, if your entire layout is 100%, anything half the size would be 50%, anything that’s a quarter of the size would be 25%, and so on.

Figure 17. Bars of varying sizes, the top one marked with 100 percent and reaching across the entire image; at the bottom is the small 25 percent bar.

Using Design Guidelines

The big two tech giants—Apple and Google—have each developed design guidelines for designers and developers to follow when working on digital products for their platforms. While they mainly apply to mobile and tablet devices, they can also be applied to desktop products.

Don’t worry too much about the details of these guidelines right now, as they can be quite overwhelming. You’ll be looking at them both in more depth in Achievement 4. Do note, however, that each set of guidelines contains information on how to structure and layout a page for their respective platforms, Android and iOS, using fundamental design elements.

The guidelines tell you where each of these fundamental elements should be placed and in what sizes. So, as we’ve been looking at spacing, measurement, and layouts in this Exercise, let’s take a look at what these design authorities recommend when laying out mobile apps. As you read through, consider what will be useful for your Student Project app for this Achievement!

Material Design

When designing apps for Android devices, you’ll want to refer to Google’s Material Design guidelines, starting with the Layout section. Here, Google has provided a number of dos and don’ts regarding which elements to include on every screen, where, and key metrics for how to space UI elements on each page.

Google’s Material Design guidelines detail how to properly layout each mobile screen using baseline grids, keylines, and padding. You’ll notice that particular attention is paid to the touch targets (tappable areas) in the design, like buttons and action icons. Tappable areas tend to extend beyond the icons or button because your fingers can’t scale to a tiny area.

Figure 18. Three buttons, each one has a minimum tappable side that is 48dp, even when the button’s icon itself is smaller. Source: Material Design

Vertical and horizontal elements are defined with precise spacing increments. This means that you’ll be designing layouts for Android apps based on values set with specific measurements defined in the Material Design guidelines. For example, list items in Android apps will have a vertical spacing (height) measurement of 72dp, and screen edge margins of 16dp.

Figure 19. Inbox screens showing the precise margin, padding, and height of each list item. Source: Material Design

For now, simply use the information provided as guidelines for how to lay out a page. Don’t worry about styling just yet!

Note
Material Design measures using DP, which stands for “density-independent pixels.” Density-independent pixels, written as “dp” (pronounced "dips"), are flexible units that scale to have uniform dimensions on any screen. They’re an abstract unit that is based on the physical density of the screen. These units are relative to a 160dpi screen, so 1dp is one pixel on a 160dpi screen. The ratio of dp-to-pixel will change with the screen density, but not necessarily in direct proportion.

Sketch, Adobe XD and Figma use pixels by default. Sketch and Figma currently doesn't offer an option to measure sizes and distances in dp but you can use Avocode or Zeplin to help with that. In XD, DP is supported in the Share function in Adobe XD. Click Share in the upper right corner, select Share For Development and open the link. Select an element or a line of text in the design, and view its height and width co-ordinates. Use the dropdown list to change the measurement units to dp.

For more on DP, you can check out the Material Design guidelines.

iOS Human Interface Guidelines

When designing specifically for mobile Apple products (i.e., for iPhone and iPad apps), you’ll need to take a look at their iOS Human Interface Guidelines. Apple has similarly compiled guidelines detailing how to properly layout each mobile screen. Touch targets (tappable areas) in iOS are recommended to measure 44pt. Apple uses points (PT) rather than Android’s DP mentioned above.

Figure 20. The safe area and margins on horizontal and vertical phone screens. Source: Human Interface Guidlines

Figure 21. The 44pt click area on the bottom menu tool bar on iOS. Source: Human Interface Guidlines

Again, don’t worry too much about the intricate details and styling recommended in these guidelines: you’ll be looking at these guidelines in more detail in Achievement 4, where you’ll be working on a native app for both iOS and Android. For now, we simply wanted to introduce these guidelines as another resource used for working on screen layouts, particularly for native mobile apps: they help ensure consistency and usability, and you can use these guidelines as references when you lay out the screens for your Student Project 1.

Annotating Your Design

When handing your work off to a developer, designer or client, common UI design techniques like rollover states, transitions, parallax, and others aren’t readily understood simply by looking at the static wireframes: that’s why designers use software like Craft Suite to transfer files to InVision, or sync with Zeplin.io, to bring their design to life. But sometimes you need to include explanations in the static files, and annotations are a great way to do that.

Sketch users, to annotate your work you can draw a line (L) from outside of the Artboard that points at the button, icon, paragraph etc. that you want to provide more explanation for. Then create a text box (T) to the side of that line and describe your design decisions.

You can also download and use the Sketch Measure plugin. This plugin helps you quickly create specs for developers including HTML, CSS and of course measurements. Go to Plugins→Manage Plugins, search for ”Measure”, and then follow the steps to install. This will open a GitHub page in your browser. Click the green Clone or Download button and select Download Zip. Now, go back to Sketch and again click Plugins→Manage Plugins. Click the gear at the bottom left and select Reveal Plugins Folder. Open the zip file and drag and drop the “Sketch Measure.sketch” plugin file into the Plugins folder that was just revealed. Sketch Measure is now an active Plugin for you to use!

Adobe XD users, you can share links to your designs and make comments for other users to see. Hit the Share tab, then in the Inspector click the Create Link button. This gives you a shareable public link for your work. Click on it: here you and any collaborators can easily make and pin comments to your Artboards.

Adobe XD Tip!
If you'd prefer to make annotations on the Artboards themselves, you can use the plugin Notes and Annotations. Go to Plugins, select Discover Plugins, search for Notes and Annotations, and install it. Now, go back to Plugin, and you’ll find “Notes and Annotations” in the list. Click on it, and you’ll find a few templates. Choose one and that’s it. You’ll be able to see the template you chose on your Artboard. Use these to write anything about your designs, but if you export, or save as PDF, make sure to keep the annotations inside the Artboard.

Figma users, you can create sticky note components. You can add these components to the canvas to describe your design decisions. Sticky notes are plugins available on the Figma Community forum. Figma also has a built-in comment tool for shared files. Go to the speech bubble icon on the right hand side of the top toolbar.

Select the comment icon, and then click one of the UI elements you've designed. A dialogue box will appear, allowing you to make notes that can be easily viewed by anyone with access to your file. You can also use the comment feature on shared files, so that everyone involved can read comments, tag other user(s), and get notified about new messages.

To keep your Sketch or XD Artboards clean and organized you can group all annotation elements when you’re done and name that group “Annotations”. By doing this your notes can easily be turned on and off.

Please note that you can’t group comments in Figma. When unselected, the dialogue box shrinks to be very small helping to keep your files clean and organized.

Alternatively you can use plug-ins such as Zeplin or bring your designs into InVision where you can annotate using their comment tool.

Summary

Layout principles, measurement units, and design guidelines are the main tools you’ll use to distribute elements in a layout. They’ll ensure that every element on a screen is aligned, establishing order and clarity in your work. As you develop your layouts, you should aim to form invisible lines to guide users through your screens and to certain elements. Effectively using spacing and layout principles in your designs will make this much easier.