 The Sketch Handbook

PREV NEXT
⏮ ⏭
Chapter 8: Going Responsive Chapter 10: Design The Category Icons
 

CHAPTER 9

The Final Breakpoint: Desktop Widescreen

Even with rise of handheld devices, desktop computers will probably not go away anytime soon. Having started small and determined the appearance on the typical tablet resolutions of 768 and 1024 pixels, let’s look at a typical desktop
computer, 1920 pixels width. As before, the first task is to duplicate the current artboard and change its width to 1920 pixels; the height should be about 5000 pixels for now. Choose something like “Article Large” for the name of the new
artboard. Again, the base for all new modifications is the vertical baseline grid and the horizontal column grid, so let’s change them to the new requirements in the Layout Settings.

With the artboard at 1920 pixels, the column grid would be far too wide if we set it to 94% of the available size like before, so I’ve decided to cap the article’s content to a maximum width of “1280px.” This gives us a Total Width of
“1202px” (“1280 × 0.94,” rounded to an even number). The rest is the same as for the other breakpoints: The layout grid should be centered, there should be no margins on the outside, and the Gutter Width should be one third of the
column width. This leads to “26px” for the former, “76px” for the latter. In case you have been using the responsive grid so far, the adaptations are even easier: unlock the “Grid” group, change the width to “1280,” center it to the art‐
board, and lock it again. That’s it!

Fig. 9.1: The required layout settings for the final breakpoint.

For a pleasant reading experience, we’ll enlarge the base font size again. We started with 16 pixels for a width of 768 pixels, 18 pixels for 1024, and we’ll end at 21 pixels for this breakpoint. By the way, this represents another value of
the typographic scale. Based on the initial size of 16 pixels, this gives us a new ratio of 21 ÷ 16 = 1.3125. This is our new “golden value” now, by which all possible elements in the article should be increased relative to the initial break‐
point of 768 pixels. For the baseline grid and its Gutter Height, we derive a value of “16px” (the initial baseline grid of “12” multiplied by the ratio “1.3125” = 15.75, rounded up). For an easier calculation, we could also take the 1024-pixel
breakpoint as a base for all of the elements, which would lead to a ratio of 21 ÷ 18 = 1.167.

The Header
This new column grid forces us to make some changes to the elements of the article again. For a good base, center both groups — the “Header” and the “Container” — to the layout grid. Be sure to hold Alt when you use the alignment
icons, so that they get centered to the artboard instead of to themselves.

The first step is to adapt the header: Grab the whole group and enter “1280c” for the width in the inspector. This will enlarge the element from the center and give us a good start, because all elements will take on the correct horizontal
position: The back link and logo will move to the outer edges of the layout grid, the title will adapt to 10 grid columns, and the category icon will remain centered. But we won’t stop here because both the category and the background
image should take on the whole artboard’s width. So, grab them, the “Image” layer, as well as the “Category” group, and set the width to “1920c.”

The horizontal axis is OK now, but the height of the image doesn’t match the ratio of 16:9 anymore. This doesn’t matter so much because it would make the header far too high anyway, so let’s take a chance and use 2.35:1 instead: Se‐
lect the “Image” layer to enter “1920/2.35” as the height. With this, we are also forced to move the category down: Either drag it to the correct place or calculate the new Y position in the inspector with “100% − (96/2).” Let’s break this
down: “100%” would move the element to the bottom of the header, and “96/2” would bring it up again by half the height of the category element.

Now for the remaining elements. First, move the logo up so that it is one grid row away from the top again. After that, bring the back link to the new base size; press Cmd + K and enter “117%” (100 × 1.167, rounded) in the Scale field.
Use Scale from left for the origin (the middle point in the left column). Enlarge the title with the same ratio, but go to the inspector instead and enter “54 * 1.167” for the size. For the line spacing, choose “80” (16 × 5). You could also make
the title span the full width of the grid, to better utilize the screen. In this case, change the Width from Auto to Fixed in the inspector, remove the line break, and enter “1202c” (the grid’s width) for the width. Finish the header by moving
the text element down so that it has a spacing of three rows from the category again.

You have 4 days le in your trial, Nicoladebenedetti. Subscribe today. See pricing options.
Fig. 9.2: The adjusted header for the 1920 breakpoint.

The Content
While parts of the header should span the entire width of the artboard, the content area is supposed to be capped to the layout grid’s width of “1202px” and centered horizontally. Let’s employ the trick from the former artboard and
adapt the whole “Container” group at once to the new base font size: Press Cmd + K and enter “117%” (100% × 1.167) in the Scale field, with the origin set to Scale from top (the middle point in the top row). Now, move the whole group
down until the page title is four rows away from the category icon and sits on the baseline grid.

With all the excess space available at 1920 pixels, I chose to adapt a few parts of the article. First, the body copy itself. If we applied it to the full width of the layout grid, the line length would be too long, so I decided to move it one grid
column in on each side, which gives us an appropriate width again. The same goes for the main title of the article and the subheadings. The easiest way is to drag the whole “Content” group to the beginning of the second grid column
while holding Shift (to keep the horizontal position) and resize it to “996px,” the width of 10 columns. You can also drag the right handle of the group to match this number of columns.

The remaining changes for the text elements are the same as before: Set up new text styles for each type and align them to the baseline grid with the same spacing as for the other breakpoints. A quick reminder: The font size of the body
copy needs to be 21 pixels now (our new base size) and have a line spacing of “32” (16 × 2). The same goes for the rest of the modifications to the artboard: I won’t go into detail but will only mention the most notable changes, because
you should already be familiar with the procedure.

The only paragraph that should stick out from the body copy left and right and still span the full layout grid’s width is the intro: Either enter “1202c” for the width or hold Alt and resize it from the center with either handle at the side of the
element. With the updated font size, the line length is a bit too wide, though; but for short text blocks like this, it doesn’t matter that much. Just be sure that it is four rows away from the title, like before.

The following element with the drop cap should already look quite good; you might only need to match the contents of the two paragraphs and the spacing to the drop cap itself. For a distinct look, I also used the outer layout grid’s line
to align both of the images. The first image should still already fill five grid columns but be moved to the left, including the adjacent paragraph. This requires you to bring the latter back to the width of six grid columns, so that it ends at
the same line with the other text. The second full-width image should look good already.

The remaining element, the quote, should fill eight grid columns, like before. After you have dragged the whole group to the left, so that the text starts at the beginning of the third grid column, resize the text layer to be eight columns
wide. Update the line height to “48” (16 × 3) and realign the quotation marks so that they are one layout grid gutter (26 pixels) away from the text. For the spacing, use the same values as before: three units from both the preceding and
following paragraphs.

Fig. 9.3: The new arrangement of the content elements.

The button at the end of the article got squished a bit with the content, so bring it back to the original width of 412 pixels, and center it to the artboard. Also, make sure that it is spaced four rows from the last paragraph.

All the Sights

The last element to take care of for the current breakpoint size is the list of related sights at the bottom. First, reposition the whole block so that it is four rows away from the button. Next, grab the dark background with a Cmd-click:
Bring it to full width by entering “1920c” in the width field. The “c” suffix will resize it from the center. The size of the title is OK; you’ll only need to change the spacing so that it is three rows away from the top. The sights that follow
should also have this distance.

Speaking of the sights, let’s make use of the available space to arrange them in a single full-width column, instead of two rows (Fig. 9.4). Like before, we need to start from the first element and delete all others, alongside the “Duplicate
control” layer. Bring it to a width of 281px, three grid columns, and use Craft to create the remaining five sights: For the vertical count, choose “1,” because we only need one row, but in the horizontal direction enter “6” with a spacing of
“26” (the gutter of the layout grid). After that, center the “Sights” group to the artboard again, but add 13px to the X position, because Craft will append a gutter width at the end.

To finish this block, drag the bottom handle of the dark background up until there’s a spacing of about three grid rows, and assign a different category to each “Sight” symbol for some variation. Also, resize the artboard so that it ends at
the block, to give it a clean look.

Fig. 9.4: The sights are arranged in a single row now.

With this last action, we’ve finished the three different breakpoints of the article. It was quite some work, but now it will be much easier to estimate how everything will look for the development phase. There are still some decisions to be
made in the code, but most of the groundwork is laid.

Adapt the App You have 4 days le in your trial, Nicoladebenedetti. Subscribe today. See pricing options.
Now that we have learned how the group-resizing feature of Sketch can help us make the article responsive, let’s apply this knowledge to the app we designed earlier. Remember that we set up a symbol for the title bar, which enables us
to reuse this element on different screens. If you slightly change some of its parts, it can be adapted easily to different screen widths.

For this, go to the “Details” page and double-click on the “Title bar” symbol to jump to it on the “Symbols” page. Select the arrow group, and set its Resizing to Pin to corner. The same goes for the “User icon” group of the avatar icon on
the right. In contrast, the title should be changed to Float in place so that it keeps its centered position.

To try out these new settings, go back with the Return to Instance link, select the artboard itself, and make it wider. Nothing will happen, but if you select the “Title bar” symbol again to adjust its width or set it to “100%” in the inspector,
you’ll notice that all of the elements adapt accordingly to the new width. Just be sure that the ratio of the symbol isn’t locked. But go back to the original width for now.

With a few extra settings, you can also make the remaining elements of this screen responsive, so that you can reuse it for the different widths of all iPhone models and Android devices (Fig. 9.5). To do so, first create a group from all ele‐
ments in the artboard, which not only is the prerequisite for this feature to work, but also lets you resize everything at once. Name it “Container.”

The first element to adapt is the pin from the logo. Select its group and set the Resizing drop-down to Float in place, which will keep it centered. Do the same for the “Collapse icon” group within the “Content.” Now, select the title text
layer, the body copy and the button symbol, so that you can change them to Resize object all at once. This setting makes sure that the spacing of the elements stays the same but that the width adapts according to the parent group.

For the navigation to work correctly, we need to set up a mask for each arrow. This ensures that these elements are capped at the outer limits of the artboard and don’t disrupt the correct resizing. Create a rectangle for the mask of the
left arrow that fully covers it and that starts at the left edge of the artboard. Switch off the fill of the mask, move it below the arrow, select both, and click on the Mask icon in the toolbar. Change the resizing to Pin to corner for this new
group, so that it stays at the left edge of the artboard. Proceed in the exactly the same manner for the right arrow.

The background image also needs a mask, but this one must have the full width and height of the artboard. Set it up in the same way as above. Unfortunately, there’s currently no other way than to let the image stretch. Every other set‐
ting produces a poor result. As an alternative, you could change to a pattern fill, but make sure to use it at a sufficient size to maintain a sharp image when it gets enlarged.

Before we can try out the new settings, we also need to change the elements of the button so that they respond to its width. Enter the symbol with a double-click, set the text to Float in place and the arrow to Pin to corner. Back at the
artboard, enlarge it to give room for the adaptation of the “Container” group. The moment you adjust its width, all other elements will change accordingly. Good work!

Fig. 9.5: The correct resizing properties for the details screen. They make sure that the elements can adapt to multiple screen widths.

After so much resizing, adapting and adjusting, we will do something completely different in the next chapter. Let’s design some icons!

You have 4 days le in your trial, Nicoladebenedetti. Subscribe today. See pricing options.
Recommended
PREV / Playlists / History / Topics / Tutorials / Settings / Get the App / Sign Out NEXT
⏮
© 2018 Safari. Terms of Service / Privacy Policy ⏭
Chapter 8: Going Responsive Chapter 10: Design The Category Icons

You have 4 days le in your trial, Nicoladebenedetti. Subscribe today. See pricing options.