Prototyping with Sketch

For our second chapter, we’ll be teaching you how to use Sketch’s Layers List feature to keep your document organized. Organization is a crucial skill for a designer to have. Many applications might seem simple enough, but you’ll often need to be designing dozens, if not hundreds of screens. Staying organized will help you to work more smoothly, particularly when you’re collaborating with other designers.

We’ll begin with showing you the Layers List’s UI so that you can learn how your document is structured in Sketch. We’ll then go over each of the hierarchical components of a Sketch document: pages, artboards, and layers. We’ll finish up by showing you how to use each of these elements together to create a useful, organized design file.

On the left hand side of you screen will always be the core organization for your file. On the top of the page you will see a + for pages in which you can add more pages. Underneath here is where all of your pages will exist. Below this you will have Artboards that will be unique to the page that you are on. Inside each artboard you have multiple layers that make up your design. You can very easily expand and contract each artboard to reveal its contents. At the very bottom of the screen you have the ability to search for a particular keyword, toggle your layers, and view the splices in your layers list. You probably will never want to hide your Layer List, but if you want to you can go to View > Show Layer List and make sure it is not checked off. For a keyboard shortcut you can do Option + Command + 1.

Inside each page you will have the ability to insert an artboard. You can think of an artboard as the canvas to your web or mobile design. When creating an artboard you will be given several templates that can jumpstart your design, such as Apple devices, Material design, Responsive web, Paper sizes, and, of course, custom. Regardless of the template that you select, you can always manipulate the sizing of it based on your project. Generally, I would proceed with the recommendations from Sketch as they are fairly accurate to start off, but if your project calls for a different dimension this is the opportunity to change it. Whatever you do, ensure you are consistent with the width of your artboards for your project. These are the actual pages of your design. Organize your artboards strategically within the canvas and be sure to create duplicates of your artboards for the various pages and states.

Each artboard contains a varying amount of layered items. These layered items can range from vector shapes and typography to icons and bitmapped images. Be sure to name your layers effectively so that you understand where things are and what elements are present. Here, you'll learn how you select a layer, how you move a layer, delete a layer, lock a layer, and why grouping is important in the layering and asset structure.

Demo how structuring a basic website would consist of and amplify all of the above in this video simulation.

You should now be able to properly set up your pages, artboards, and layers to make a well-organized Sketch file. While this might not be the most exciting skill you’ve learned as a designer, it will help you to save time and avoid confusion as you work on designing interfaces. We’ll be revisiting organization in Sketch in greater detail later on.

Next, we’ll be taking a deeper dive into one of the most important features in Sketch: the Inspector Panel, which lets you manipulate your designs with precision.

In Chapter 3, we’ll take a closer look at the Inspector Panel. Located on the far right of the interface, the Inspector Panel gives us a comprehensive set of options to mold and manage the selected layer. Understanding how to use the Inspector Panel will let you quickly and precisely edit several aspects of each object, such as transform, position, opacity, color, and much more. Using these tools correctly will let you create pixel-perfect designs.

During the chapter, we’ll break down the Inspector Panel one section at a time. We’ll start with the alignment tools, which help you to arrange each object in relation to other objects and to the design as a whole. We’ll then go over layer properties and resizing constraints, editing text fields with mousekeys and equations, making consistent and reusable designs with layer styles, and exporting your work to share with clients or collaborators.

At the top of the Inspector you can find the Alignment Options. When designing an interface it is always best practice to ensure all elements are on a grid and form some sort of relation to other assets on the same page. The first two deal with distributing objects over a similar distance for both Vertical and Horizontal. *show example*. The remaining 6 talks about how to orient objects together by: Aligning Left, Vertical, Right, Top, Horizontal, and to the bottom. Aligning works with both a group of objects, as well as aligning it to an artboard. Always ensure that when designing you utilize this tool to ensure all elements have some sort of relation to others.

Layer properties are located underneath your alignment tools. Here you are able to control the position they are related to the artboard, the size of the artboard or layer and whether it is a fixed proportion, the ability to transform a shape, and flip them both vertically and horizontally. When selecting other shapes you will get different options, just like the ability to specify a corner radius when a rectangle is selected, or the number of points that a polygon can have. When selecting specific elements of Sketch there will be another portion of the interface that comes up that controls how objects are effected when a layer or artboard is resized - whether they are fixed or not.

Some text fields are normal and boring, but Sketch's Text Fields incorporate a bit of magic in them. When you click on a text box you have a lot of options on how to change value inside of it. Holding the up and down mouse keys increases its value by one, holding Shift increases the value by 10 while holding the option button down increases or decreases it by a tenth of that size. You also have the ability to scrub your value back and forth to get very precise without the need to re-type a value. As if this wasn't enough, Sketch also always you to do basic equations such as +, -, *, or / to do quick basic math with a concrete value to use. Continue to mess with the functionality to improve your workflow and find out how granular you can get

When editing a particular layer or object you created you will want to be able to manipulate it to various degrees. The Layer Styles panel is located underneath the text fields above. Here you will be able to select your Fill, Border, Shadows, Blur, Opacity, Blending options, and attribute a group of styles to a saved "symbol". The cool thing about the Layer Styles panel is that you have the ability to select multiple styles that compliment each other.

At the bottom of your Inspector is the Export feature. This feature can also be accessed at the top bar by choosing Share > Export or Shift-Command-E. When designing an interface you will want to export portions, or all of your design so that it can be translated to development, marketing collateral, or a prototyping software. You are able to export selected layers, grouped layers, and slices in convenient extensions.

You wouldn't be able to build a house without a hammer and nails, and that principal is very similar to the Inspector Panel and creating interfaces with Sketch. Get to know the toolbelt that this powerful program has created.

The various functions of the Inspector Panel that you’ve learned how to use will act as your toolbelt as you continue to learn Sketch, giving you the ability to craft your designs to look exactly as you want them to.

Our next chapter will let you start using those tools as you learn how to create elements in Sketch, from shapes to text fields.

Now that you have a thorough understanding of the interface and essential tools of Sketch, it’s time to start creating elements. Creating and manipulating elements is at the core of design work, and setting their shape and layout precisely is one of the key factors of digital design.

We’ll start with creating shapes, which will typically form the backbone of most of your designs. Then, we’ll explore using boolean operations to create shapes by designating relationships between multiple different shapes (it’s easier than it sounds!). We’ll follow that up with a look at editing text in Sketch, and we’ll wrap up the chapter with a lesson in grouping objects.

Adding a Shape to Sketch couldn't be easier. You can either go to your top bar and click Insert > Shapes > Rectangle, or you can see the white plus button in the top lefthand corner that says insert. You will see a circular point in each of the corners. You can click and drag these points to modify the exact positioning. For example if you created a rectangle, but want it to be portrayed as a polygon instead, you can skew one of the points outwards. When you start extracting these points, it opens up the ability to have various point types which provide different affects. You can chose to have a straight point, a mirrored point, disconnected point, and an asymmetric point. The decision between one over the other is completely reliant on the application you are doing it for. You can also manipulate more than one point at a time by either clicking each point while holding down Shift, or highlighting over the points that you want to edit. After you have a defined shape, you are able to affect the Fill (solid color, linear gradient, radial gradient, Angular gradient, and pattern and noise fills. You can also effect the blending of the fill you are using. In addition to being able to select a Fill, you can also define a border for the shape. You can position the border on the inside, center, or outside of your shape - so you have the most functionality. When you scale your design, your border thickness will not scale, but remain the same. You also have the ability to convert your border to outline to counteract this.

Sometimes it is more effective to bind the relationship of two states together to get a desired shape or outcome. This is where Boolean Operations come handy. Located in the Top Bar slightly off center you will see "Union, Subtract, Intersect, and Difference". *Talk about each one of them briefly* Union: The result is a vector that is the sum of both vector's areas. Subtract: The result is a vector where the area of the top shape is removed from the one under it. Intersect: The result is a vector consisting of the parts where the original shapes overlapped. Difference: The result is a vector that is exactly the part where they didn't overlap. It's the inverse of an intersect operation. Then talk about how manipulating the ordering of the layers changes the shapes outcome. When you initiate a Boolean Operation, you can still view the outlines of both of the shapes. To create a perfect and finalized instance, simply click the "flatten" tool in the top of the screen.

Sketch uses the native font rendering of macOS and because of that, the text looks excellent and crystal clear. The benefit of this is when designing websites or applications you have the clarification that the translation will be as accurate as possible. You can insert text by clicking Insert > Text, the white plus button in the top left corner, and the easiest way is to hit "T" on your keyboard. After you have created a text element, lets style it using the Text Inspector. Here you will be able to maniuplate the Typeface, the weight, color, size, alignment, and even effect fine details like the Character style, line style, or paragraph height. When you click on the gear you will get the option for Text decoration *explain all options* if you need a numbered list or bulleted list click on List type, and if you need all of your text to be transformed. When designing and interface you are going to have a lot of various fonts, and the easiest way to organize them is to use Text Styles, which locks in all of your current settings into a universal style. Updating it one place and syncing it will update it everywhere. If you know that a typeface will not change and you want to create outlines of your text, you can do so by going to layer > convert to outlines.

Using Masks in Sketch are used to selectively show parts of other layers. Any shape can be turned into a mask, and vice versa any shape can be masked. Looking into your Layer List, you will notice that your mask will always be at the bottom, with indented lines suggesting that it has a parent mask presenting itself. If you don't want all subsequent layers to be clipped, the best way you can do this is allow the mask to be ignored. In order to do this, go to menu and chose Layer > Mask > Ignore Underlying Mask while your layer is selecting. Alternatively you can right click to get this option as well. When you double click inside of a mask you will see the ghost lines around the mask to showcase the size of the layer that is being masked.

Entirely used for keeping your file organized, Groups let us designate like elements of a component and clumping them together and treating it as one entity. While this is one parent group, you can always double click inside to see the children layers inside. To group elements together, first you must select them all and hit Command G which will group your current selection. After you do so, you can re-name the group to make the most sense of your artboard.

A Sketch document is nothing if there are no elements inside them. Explore Sketch by elaborating on the above principles and ensure your design has all of the functional pieces attached to it.

In this chapter, you learned a lot about creating elements in Sketch. You should now have a basic command of creating shapes with various tools, generating and editing text, and grouping objects. With these skills, you’re well on your way to being able to design interfaces with Sketch.

In Chapter 5, we’re going to take a closer look at organizing your Sketch file to make it easier for you and your collaborators to work with. We’ll also cover how you can make your designs consistent without too much tedium.

While we’ve already covered basic organization, a deeper understanding of how to structure your files in Sketch, and how to take advantage of that structure, will help you to create consistent designs as efficiently as possible. The skills you learn in this chapter will let you make changes to your entire document with a single action, saving you time and keeping your design uniform.

We’ll kick off the chapter by learning how to use layer styles, which will let you update an attribute (like color) on all similar layers when you update one. We’ll then learn about text styles, which let you manipulate text in a similar way. Then, we’ll go over symbols, which are very useful when you need to have several instances of the same elements in multiple places in your design (like a footer on every page of a website). After that, we’ll share our recommended naming conventions, and we’ll explain how using the layout and grid features will keep your designs precise.

Shared Layer Styles allow you to attribute specific styling to an element. For example if you know that a generic button is going to be a Blue, but don't know what shade of blue yet, attaching the fill to a Layer style will allow you to update on the fly if need be, everywhere in your document that shares that similar Layer Style. Think about Layer Styles as "locking in" a current selection of styling to be used in other areas on your UI, but still have the ability to manipulate those values everywhere. Using Layer Styles improves your workflow and efficiency.

Similar to Layer Styles, Text Styles allows you to denote a specific combination of typography into a shared group. This is important when designing applications and websites as you are wanting your design to share elements to ensure that everything is consistent. You don't want a developer to have to make 50 instances of a typeface, but instead have defined Text Styles that are used strategically throughout the design. You are able to do this by clicking "Layer > Create Shared Style". If you need to update your style at any point, click the Update button. If you need to "undo" an update push for your text style, hold down option and a rever button will appear in place of the update. Sketch makes it easy to attribute a new line of text to a Text Style, and allows you to very rapid insert a new layer using the Text Styles that have been defined.

If you thought Layer Styles and Text Styles were cool, lets take a look at what Symbols can offer. A Symbol allows you to reuse elements easily across your document's Artboards and Pages. If there are a combination of elements that look like you can use them in other location in your UI design you will want to clump them together and form a Symbol. Doing so will create an "Instance" on the individual page, and will create another page labeled "Symbols" in which will act as the "Master" to all of the other "Instances" below it. To edit a symbol go to the "Master" and manipulate the positioning of the elements. Using symbols can range anywhere from creating and reusing a navigational item, a footer, or even a button. What is even more cool about Symbols is that you can use overrides to be more custom. For example an application should always have a similar button style. After solidifying what my button would look like, I would create a symbol from it. After inserting the symbol to where I would like it and clicking on the symbol you will get more directions from the Inspector where you can post textual overrides on your symbol. If I don't want my button to say "Submit" but rather "Let's Proceed" I can override that value here. If I need to change my button style down the line not only can I do that to the "Master" symbol, but I can attach a text or layer style and nest them inside a symbol for even greater control.

As you can tell having the power to utilize these features in Sketch opens up a wide range of possibilities. What is critical at this stage is that you start your document with proper naming conventions. The basic rule to naming conventions is to allow it to be intuitive - enough for you to understand it and for another designer to hop inside your document and understand what is happening. For Layer Styles that reflect a fill color - use the color you are representing. If it is a red, call it "Red." For particular applications you can get a little more specific, just remain consistent. For Text Styles try to think about it as if you were translating this to a Front End Developer. They are used to CSS styling naming conventions such as "H1, H2, H3, H4, Input, Placeholder, etc." so try to use similar naming conventions to make the translation from design to development as seamless as possible.

When you are designing and utilizing all of the functionality that allows you to be consistent and organized, you have to use some sort of Layout structure. There are various methods to structure your Sketch file: Rules, Grid, and Layout, and is really all for personal preference, but I will be teaching you the benefits of using the Layout feature in Sketch. You can access this feature by going to "view > canvas > layout settings". Here you will see a varying selection to chose from. You must denote a total width, if your layout is offset, and the number of columns you will want to have. I recommend having at least 12 for web (explain why) and 6 for mobile (explain why). You can toggle the view of your layout by "control + l"

Right now I am going to incorporate all three organizational attributes I just talked about in practice. I am going to walk you through how you would go about creating a very basic wireframe and utilizing all components together.

Download this file and not only continue fleshing it out the layout, but attach all of the elements to the corresponding styles to make sure the file is organized properly.

Now that you’ve learned how to use Sketch’s features to keep your design files organized and consistent, try it out on your own! Download the provided file, and continue to add to it with your own ideas. Make sure to attach new elements to the appropriate styles.

In the next chapter, we’ll show you all of your options for exporting and previewing your Sketch designs.

In Chapter 6, we’re going to demonstrate each of your options for exporting your designs from Sketch into other formats. Many of your clients or other non-designer collaborators won’t have Sketch, and you’ll need to convert your designs into another file type for them to view, such as a PDF or PNG.

To start, we’ll cover your basic options for exporting your pages, artboards, and layers. Then, we’ll show you how to make certain layers exportable even when they aren’t by default. We’ll take a look at Sketch mirror, which lets you preview your design and check sizing and positioning. After that, we’ll introduce you to using InvisionApp to make an interactive prototype out of your Sketch design. We’ll finish by going over naming conventions and file optimization to make sure that your exports are organized and relatively lightweight.

To share your designs, you can either chose "Share > Export" from the top menu bar, or you can click on the export item in the toolbar. After being given this option it will scour your entire document to see what elements you can export. Doing this all in one go is fairly easy, but you can also click on an individual element, or group of layers, and click on the "Make Exportable +" button in your Inspector at the bottom. Doing so will allow you to select what size you want it rendered at, if it requires a Prefix/ Suffix, and what format. The available formats are: PNG, JPG, PDF, SVG, EPS, TIFF, and WEBP.

You can granular enough to export a singular icon, but what about exporting a group of layers, a symbol, a masked item, or even an object that has been effected by a Boolean Operation and has been pathfinded? Be sure to strategically export which layers you want. One rule that can be used for best practice is to never save out a text rich field as a bitmapped PNG or JPG.

Sketch Mirror is a tool made by sketch that allows you to visualize your design in real time to test sizing, effectiveness, and positioning.

InVision app is a prototyping software that combines your artboards as screens and allow you to put hotspots on areas to simulate navigation and interaction. If designing a multi page website, or an intricate application is something you are currently doing then I highly suggest using InVision to prototype your Sketch designs. Not only can you do this directly in Sketch, but you can update on the fly and make important strategic decisions by the feedback you receive.

Once you export your files and have named them accurately, what is the best method to optimize them for fast load render on the web? One thing that is important to understand is Sketch does not optimize your assets. Saving out a masthead image with heavy photography will result in a filesize larger than 1MB. Typically for assets on the web you want to be well under 1MB to ensure fast speed load. You can optimize your assets using a varying of techniques. You can use an alternative program to drag your newly created asset in and reduce the file size that way, or you can visit tinypng.com that will dramatically downsample your bitmap to ensure fast page load. An alternative that can also be done is exporting vectors as SVG. A Scalable Vector Graphic is actually an image that is created using an exact formula and exists in code. Exporting an icon, for example, as an SVG will allow you to scale up that tiny icon and still maintain the same proportions and "hard line" that vectors grant. Lastly, the best method to get in the habit is the following naming convention when exporting assets: type-item(-variant).format. For example a Facebook icon would be icon-facebook-blue.png.

After our last chapter, you should now be able to create a design in Sketch and export it to share your work, or any part of it, with anyone.

In Chapter 6, we’re going to bring together many of the concepts we’ve learned in the last several chapters and use them to design a mobile application interface.

Now it’s time to start putting your Sketch knowledge and skills to use by designing a mobile interface. This is the type of interface design work that professional UI/UX designers do on a daily basis, and will be excellent preparation for a career in design.

We’ll start by creating an appropriately sized artboard for you to begin designing with. Next, you’ll create a wireframe of the interface, which will act as an outline or skeleton for your final interface. Then, you’ll start fleshing out your design with layer and text styles, keeping in mind where you can reuse interface elements for similar screens. Finally, you’ll export the interface and prepare it for a development team.

Since you will be designing a mobile application, you know that the size of your real estate will not change, and that the overall layout will remain consistent. Lets go ahead and start by using Sketch's artboard templates by selecting the iPhone7. You can use material design if you are designing for android, but for demonstration purposes I will show you how to do it through an Apple device. The artboard size will be 375px width and 667px height. Remember, that although there is a fixed width, the height of a mobile screen can be much larger than 667px. Scrolling is a huge navigational piece to be aware of, treat the 667px height as a "mask" in a sense. Once I have done this, lets define the layout I will have to work within. Sets layout and talks about it. Now that we have done this, we will want to replicate this for all additional screens to ensure everything is lined up.

After understanding the user stories and the feature sets that need to go into an application and you have a basic understanding of how the layout will be, start piecing together the design in a grayscale color scheme to emphasize placement, sizing, and content. There are various ways to go about this, but I prefer creating high fidelity wireframes over a basic wireframe. Not only does this jumpstart the final design, but you can actually get context from where text should be, how much text should be there, and if relating it to an image is effective or not. The messages are directly relational to the UX of the application, so to provide as much context as possible is important.

Recognizing areas of your application that are similar will allow you to create a layout that will be adaptive to various areas of your application.

Once you have your design and it is ready to be translated to a developer, what are the next steps? Be sure that the proper naming conventions are used throughout your layers so that when you do export everything it makes sense to the development party that is bringing your design to life. Start collecting all of the Text Styles that you are using and make sure everything is consistent. If one H1 has 42px line height and another has 28px, you need to make a decision to ensure things are consistent. A cool thing about sketch is you can actually right click on an element to be able to copy the CSS. This CSS will translate directly to the development team in which they can simply copy and paste so no information is lost.

Congratulations! You just designed your first mobile interface in Sketch. The skills you’ve picked up along the way will be very important to starting a career in design, even when you’re using different programs.

For our final Chapter in this series, we’re going to use the Sketch plugin called “Craft” that will let you sync your Sketch designs with an interactive prototype in InvisionApp.

One of the most important things to remember about UI/UX design is that what you’re creating will eventually need to be a fully-functional, interactive experience. With InvisionApp, and its Sketch plugin Craft, you can make your designs interactive, giving you and your client a chance to see how the interface will look and feel without needing to have a developer actually build the application.

To get started, we’ll show you how to download and install Craft. Then, we’ll give you an overview of Craft Sync, which will automatically sync your artboards with an InvisionApp project. Next, we’ll teach you how to use Craft Library to share your InvisionApp prototype, use actual data in your prototype with Craft Data, duplicate elements with Craft Duplicate, and write directly on your prototype with Craft Freehand.

A walk through of the download process.

Craft sync allows you to login to your InVision app account and sync all of your artboards, or selective ones, to an already created project that will allow your client to test, comment, and critique your product.

How you can collaborate using the "Shared" tab and how you can generate a style guide straight from Craft.

Creating a UI without actual data can be devastating - you might interpret the sizing improperly or understand that that contextual area shouldn't belong somewhere. Using Craft Data I am able to generate both Type and Photo fields with relevant information, strip content from any website, and even import a JSON file.

If you are creating a list, or know that an element is going to be used elsewhere, using Craft's duplicate feature allows you to duplicate the content and keep the custom Data, and specify both the count and the gutter of your elements.

Freehand allows you to write on top of your design to provide that feedback for quick context to areas, improvements and suggestions. Also, with Craft Stock you have the ability to pull images directly from iStock or Getty Images. You will have to pay for the images, but to showcase what an image might look like with a copyright on top of it is important.

Congratulations on completing our course on designing with Sketch! Though there will always be more to learn, the skills you developed during these lessons should give you what you need to start designing interfaces with the industry-leading software.