![]() ![]() ![]() In the case of the desktop view, we also set a middle guide (720px) and 100px padding. To create a guideline click on the ruler at 40px, at 375px and at 710px points. Then select the middle of our mobile canvas, which will be at 375px and also put a mark at the first and the last 40px, so that it will work with a horizontal 40px padding. To turn on the rulers and the basic guides, go to View > Show Rulers (⌃ R). Step 2Īfter we have the proper artboards, it’s time to set some guides so our layout has enough space and looks balanced. Tip: later we can modify the height of our artboard by changing the numbers on the inspector panel. Then click on the Mirror icon within Sketch (make sure your devices are on the same network or connected via a USB cable).įor the desktop view, I chose the Desktop HD canvas, which is 1440px wide. To activate this function, you will need the Sketch Mirror app from the App Store. Mirror is an essential part of my design workflow, because with it, I can immediately see the final result of my work in my hand. Using Sketch has a huge advantage in that it allows you to mirror your work to your iOS device in real time with Sketch Mirror, without exporting or transferring images. I set the ideal text size to 18px and defined 670px as an important number, as this will be the actual, usable width of our mobile layout.Īfter we open Sketch, let’s select the Artboard (A) option within the Insert menu.įor our mobile view, I recommend you choose the iPhone 6 dimensions, but if you have a different iPhone model, it’s better to choose that one. ![]() Note: Obviously, in some cases we need to break this rule, but it will provide us with a natural balance within our layout and typography, which is pleasing to the eye. In a moment, when we set up our typographic hierarchy and the basic elements of our layout, I’ll always refer back to these numbers. ![]() This tool is great: after we define our ideal text size and suggest an important number, it will divide and multiply these numbers by a mathematically familiar value like the golden ratio or perfect fifth. Tim Brown, Type Manager for Adobe Typekit, created a fantastic tool called Modular Scale. Setting Up the Artboardsįirst of all, I would like to write a little bit more about how I approach my layout and typography settings. On the other hand, for common UI elements such as buttons and labels, I wanted something modern, so I chose Montserrat, which is a clean and simple sans-serif font. On high resolution displays it gives the feeling of a real, printed journal. When I start a project, I always start with typography because I strongly believe that typography is the most important tool for communication designers have at their disposal.įor the body text and larger titles, I chose Merriweather, a serif font inspired by old-style book faces, which works well for telling stories and journeys. I’ve always been passionate about online storytelling with beautiful photos, so I created this concept to teach you how to follow web trends from a designer’s perspective. It would require a much deeper market analysis before we could turn it into a real, usable product. Images from Unsplash (for the hero image you can download the one I took recently)īefore we open Sketch and create a new document, I should point out that this concept is entirely theoretical.You will need the following assets in order to follow along: We will be using some basic and intermediate techniques in Sketch. We’ll use the VSCO aesthetic as inspiration and, at the end of this tutorial, you’ll have become aware of many of the most important features of Sketch.īesides these application-specific skills, you will also get a deeper understanding about setting typefaces and layout with the help of a modular scale. In this tutorial, I’ll teach you how to design a simple and sophisticated web journal application in Sketch, for both mobile and desktop. ![]()
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |