Creating New Files & Designing on a Grid System

Topics Covered in This Sketch Tutorial:

Creating a New File, Inserting Artboards, Setting up a Layout Grid, Creating Colored Backgrounds for Text, Importing Text

Exercise Preview

Exercise Overview

Professional designers rely on grid systems as the backbone of effective layout design. These invisible frameworks provide the structural foundation that creates visual hierarchy, maintains consistency, and ensures content alignment across different screen sizes. When designers and web developers use matching grid systems, it creates a seamless handoff from design to development, reducing friction and improving project timelines.

Grid systems become essential when designing responsive websites that must perform flawlessly across mobile phones, tablets, and desktop displays. Rather than guessing at proportions and spacing, grids provide a mathematical foundation that streamlines both the design process and subsequent development work. This systematic approach not only accelerates your workflow but also produces more polished, professional results.

In this comprehensive exercise, you'll master the fundamentals of grid-based design in Sketch. You'll start by creating a new file and establishing a custom grid system, then progress to implementing Bootstrap's industry-standard grid framework to build a clean, two-column layout that's ready for development.

Creating a Blank New Sketch File

1. Launch Sketch to begin your project.

   NOTE: This tutorial has been tested with Sketch 83.2 on macOS Big Sur. While Sketch maintains excellent backward and forward compatibility, interface elements may appear slightly different in other versions. Sketch's interface received significant updates for macOS Big Sur, so older systems will display a different visual style—we'll highlight key differences as they arise.

2. Choose File > New (or hit Cmd–N) to create a fresh document.

3. macOS Big Sur users only: The default toolbar shows icons without labels, which can slow down your workflow. To improve usability, right–click (or Control–click) anywhere on the toolbar and select Icon and Text. This displays both icons and descriptive labels for faster navigation.

4. Every Sketch project starts with artboards—think of these as individual canvases for different screen sizes or page layouts. In the toolbar, click the Insert button and select Artboard.

   NOTE: Both the Insert button and Insert menu provide access to the same tools—use whichever feels more intuitive for your workflow.

5. The Inspector panel on the right contains preset templates organized by category. From the dropdown menu at the top, select Apple Devices to access mobile-optimized dimensions.
6. Click on iPhone 13 to create your first artboard. This represents the most common mobile viewport in current use.
7. Add a second artboard by clicking the Insert button and choosing Artboard again.
8. In the Inspector, select iPad 10.2" to create a tablet-sized canvas.
9. For faster workflow, use Sketch's keyboard shortcut: press the A key to instantly create another artboard.
10. Switch to desktop layouts by selecting Responsive Web from the presets menu in the Inspector.
11. Click on Desktop to add your third artboard.
12. The default desktop preset is too narrow for modern web design. Keep the artboard selected—if you've clicked elsewhere, reselect it by clicking Desktop in the sidebar.

13. In the Inspector, change the W (Width) value to 1280 and press Return to apply the change.

    NOTE: Sketch uses pixels for all measurements, which aligns perfectly with web and UI design standards. The 1280-pixel width represents a common breakpoint for small desktop displays and provides an ideal canvas for responsive design work.

Setting up a Layout Grid to Design on

Now that your artboards are established, it's time to implement the grid system that will guide your design decisions and ensure pixel-perfect alignment.

1. Ensure the Desktop artboard remains selected. You can select it either by clicking directly on the canvas or choosing it from the sidebar.
2. Focus on your desktop layout by choosing View > Zoom To > Selection, which fills your screen with the selected artboard.

3. Activate the layout grid with View > Canvas > Show Layout. This reveals the underlying grid structure that will guide your design placement.

   Professional web development relies heavily on established grid frameworks. Bootstrap's 12-column system has become the industry standard, powering millions of websites worldwide. When your design grid matches the developer's framework, it eliminates guesswork and reduces revision cycles. For comprehensive documentation on Bootstrap's grid system, visit getbootstrap.com/docs/4.5/layout/grid

4. Customize your grid to match Bootstrap's desktop specifications by choosing View > Canvas > Layout Settings.

   TIP: In macOS Big Sur, you can also click the zoom percentage in the toolbar, or click the View button in earlier macOS versions, then select Layout Settings.

5. Verify that Columns is checked to display vertical guides.
6. Ensure Rows is NOT checked, as we'll focus on column-based layout for this exercise.

7. Set the Total Width to 1140px to match Bootstrap's content container.

   Bootstrap Grid Integration

   For professional workflow, match your design grid to the developer's grid system. Bootstrap's 12-column grid is widely used and easily divisible into 2, 3, or 4 column layouts.

Starting a Simple Layout

Rather than rebuilding grid systems from scratch, professional workflows rely on templates and starting points that accelerate project initiation. We've prepared a multi-device template that demonstrates industry best practices.

1. Hide or minimize Sketch to access the Finder.
2. Navigate to Class Files > Sketch Class and select Bootstrap 4 Grid Template—Phone, Tablet, Desktop.sketch.
3. Press Cmd–D to duplicate the template file.
4. Rename the duplicate to yourname-About Page.sketch
5. Since this project focuses on New York City content, drag the file into the NYC folder for better organization.
6. Open your new file by navigating into the NYC folder and double-clicking yourname-About Page.sketch.
7. Get an overview of your workspace with View > Zoom To > Fit Canvas, which displays all three artboards simultaneously.

8. Notice the professional setup: individual artboards configured with Bootstrap's responsive grid system for phone, tablet, and desktop viewports.

   This template was created by Dan Rodney, a Noble Desktop instructor and recognized expert in design systems. His complete Bootstrap 4 grid resources, including extended templates with all five responsive breakpoints, are available at danrodney.com/blog/sketch-bootstrap4-grid. For comprehensive information about Bootstrap's responsive breakpoints and their applications, see the detailed sidebar at the end of this exercise.

9. Create visual cohesion by establishing a consistent background color across all artboards. In the sidebar, click the Phone artboard to select it.
10. Hold Shift and click the Desktop artboard to select all three artboards simultaneously.
11. In the Inspector, check the Background color option to enable custom backgrounds.
12. Click the color selector box to open Sketch's color picker.
13. Enter 77aadd in the Hex field and press Return to apply this professional blue tone.
14. Close the color picker by pressing Esc or clicking outside the dialog.
15. Deselect all artboards by clicking on empty canvas space or in the sidebar's blank area.
16. Focus on desktop-first design by selecting the Desktop artboard in the sidebar.

17. Zoom to your working artboard with View > Zoom To > Selection.

Designing Colored Backgrounds for Text

Professional web layouts typically feature distinct content areas with subtle background treatments that improve readability and visual hierarchy. You'll create a two-column layout: a primary content area and a complementary sidebar.

1. Activate both essential visual guides for precise layout work:

   • If the shaded layout columns aren't visible, choose View > Canvas > Show Layout (or press CTRL–L).
   • If red guides aren't visible between columns, choose View > Canvas > Show Rulers (or press Control–R).

2. Understanding the relationship between content and backgrounds is crucial for professional layouts. Text and images align precisely with column edges, while background elements extend to the midpoint between columns. This template includes red guides marking these midpoints, which represent the optimal boundaries for background elements.

   Bootstrap's 30-pixel gutters create 15 pixels of natural padding on each side of every column. This spacing ensures your text never feels cramped against background edges, creating the breathing room essential for readable, professional layouts.

3. Temporarily hide the layout columns to focus on background creation: choose View > Canvas > Show Layout (or press CTRL–L).
4. Create your first background element by clicking the Insert button and selecting Shape > Rectangle.

5. Starting from the rightmost red guide, draw a rectangle spanning exactly 3 columns as shown below. The vertical positioning can be approximate—focus on getting the horizontal span correct.

   

6. Remove the default border by unchecking the Color checkbox under Borders in the Inspector.
7. Click the color box under Fills to access the color picker.
8. Select white and press Esc to close the picker.
9. Create visual subtlety by setting the Opacity to 50% and pressing Return. This semi-transparent treatment provides distinction without overwhelming the design.
10. Double-click Rectangle in the sidebar and rename it to sidebar bg for better layer organization.
11. Create the main content background by clicking Insert and selecting Shape > Rectangle.

12. Draw a rectangle from the sidebar's edge to the leftmost red guide, matching the sidebar's height. This creates the main content area spanning the remaining 9 columns:

    

13. Remove the border by unchecking Color under Borders in the Inspector.
14. Set the fill to solid white under Fills, then press Esc to close the color picker.
15. Rename this layer to main col bg for clear identification.

16. Save your progress with File > Save.

Importing & Styling Text

With your background structure established, it's time to add content that demonstrates how professional typography works within grid-based layouts.

1. Simplify your view by pressing CTRL–R to hide the ruler guides.
2. Reveal the layout columns with CTRL–L to guide your text placement.
3. Add your first text element by clicking Insert and choosing Text.
4. Click anywhere within the main column's white background. Precise placement isn't critical yet—you'll refine positioning in the next steps.

5. Configure professional typography settings in the Inspector:

   Typeface:	Arial (double–click to close the font menu)
   Weight:	Regular
   Size:	16
   Color:	Click the color swatch and choose Black
   Character:	Keep the default auto value. If another value appears, delete it.
   Line:	Maintain the default grayed-out value, which automatically scales with type size.
   Paragraph:	0
   Alignment:	Left

   NOTE: All measurements use pixels, the standard unit for digital design. The Line setting corresponds to CSS's line-height property, or leading in traditional print design.

6. Prepare for text box manipulation by clicking outside the text, then clicking the text box again to reveal resize handles.
7. Position the text box by dragging its left edge to align with the first column's left boundary.

8. Expand the text box to fill the main content area by dragging the right resize handle until it snaps to the last column's right edge, as demonstrated below:

   

9. Access the prepared content by switching to Finder.
10. Navigate to Class Files > Sketch Class > NYC and open NYC text—main.txt.
11. Select all content with Cmd–A, then copy it using Cmd–C.
12. Close the text file and return to your Sketch project.
13. Double-click the text box to highlight its placeholder content.
14. Select all existing text with Cmd–A.
15. Paste the new content with Cmd–V. The text box automatically adjusts its height to accommodate the full content.
16. Press Esc to select the entire text box rather than individual text.
17. Improve readability by setting Line spacing to 28 in the Inspector.

18. Add paragraph separation by setting Paragraph spacing to 14.

    NOTE: Paragraph spacing creates space below each paragraph, equivalent to CSS's margin-bottom property.

19. Create the sidebar content by clicking Insert and selecting Text.
20. Click anywhere within the sidebar area to place the second text box.
21. Notice Sketch's intelligent defaults: most text formatting carries over from your previous text box, maintaining consistency.
22. Adjust the Line spacing to match your main text: 28.
23. Align the sidebar text box with the main column by dragging it vertically to match the main text's top edge.

24. Position the text box horizontally to align with the leftmost sidebar column (the grid's 10th column), then resize it to span all three sidebar columns:

    

25. Return to Finder to access the sidebar content.
26. Open NYC text—sidebar.txt from the Class Files > Sketch Class > NYC folder.
27. Select all content with Cmd–A.
28. Copy the text using Cmd–C.
29. Close the file and return to your Sketch project.
30. With the sidebar text box selected (showing resize handles), press Return to edit the text content.
31. Paste the sidebar content with Cmd–V.
32. Hide the grid columns using CTRL–L for a cleaner view of your final layout.
33. Deselect all elements by clicking on empty artboard space.
34. Preview your design at actual browser size with View > Zoom To > Actual Size. This 100% view shows exactly how users will experience your layout.

35. Save your completed work with File > Save.