Creating a Design Workflow in Sketch

Creating a Design Workflow in Sketch

When it comes to user interface (UI) creation, you want a simple, powerful collaborative tool to make the design process smooth and intuitive.

Many UI and UX (user experience) professionals choose to create Sketch design workflows because it can handle everything from prototyping, through working effectively within design teams, to handing off finished files to clients.  Its extensive capabilities can also be extended with many third-party plugins.

To learn how to better use this essential software for workflow design, read this guide.

  • Before you start: What’s Sketch?
  • How to use Sketch for UX design
  • Top tips for using Sketch
  • Plugins that enhance design workflow
  • Before you start: What is Sketch?

    Sketch provides everything you need for doing UI design, especially in a collaborative team environment. It consists of a powerful native macOS editor that balances privacy and sharing capabilities, allowing you to choose who can see your work and when. And it’s more built for UI purposes than a general graphics program—such as Adobe Photoshop.

    Its features include the following.

    • Responsive design capabilities (easily viewed across different computer systems and devices, including Mac and Windows computers and different tablets and smartphones)
    • Easily reused components
    • Simple design-prototype-to-developer handoff
    • Lots of available plugins
    • Strong community support
    • Many text, color, and theme choices

    Knowing how to use Sketch properly can improve your design workflow and help you function more effectively in a larger team. If you are a freelance UX or UI designer, having experience designing in Sketch can help make you an attractive resource to many potential clients.

    If you are a web developer, then familiarity with Sketch can complement your existing skills in content management systems (CMS), such as Magento and WordPress, which could be used in creating and updating e-commerce sites.

    How to use Sketch for UX design

    Using Sketch, product designers can develop all their UX elements for a project, including wireframes, and then hand off the design to the next person in the creative team, all within the same program. The workflow process can include a number of steps. Follow our examples below.

    1. Creating an artboard

    You can create an artboard—a fixed frame—on your Sketch Canvas by choosing “Insert > Artboard.”

    Creating an artboard

    2. Customize the artboard’s size and specifications

    You have the choice of either clicking and dragging on the Canvas to create an artboard of a custom size, or you can select one from the artboard templates in the Inspector.

    To resize the artboard, you can click and drag on the selection handles that you see around it. Inspector also allows you to edit its dimensions.

    If you want to determine or change an Artboard’s orientation, select it on the Canvas or from the Layer List, and then choose the horizontal or vertical icon beside its dimensions in the Inspector to start manipulating its direction.

    Customize artboard

    3. Add shapes

    You can add different pre-made shapes in Sketch by clicking the “Insert” button on the toolbar or from the Insert menu item via the menu bar. After choosing the Shape option, select the type of shape you wish to use for your design.

    You can also use the pencil tool from the insert menu to draw shapes. When you’re done drawing your shape, Sketch will automatically smooth curves and simplify the path you’ve made.

    Add shapes

    4. Insert text

    To add text, choose “Insert > Text” via the toolbar or menu bar, or you can press T and click anywhere on your Canvas and begin typing. If you want to bring in rich text with styling from another app, then choose “Edit > Paste > Paste as Rich Text.”

    Insert text

    5. Define colors, weight, font, and opacity of the text

    The text menu bar gives you options for basic text styles, resizing up or down fonts, making ordered and unordered lists, doing upper and lowercase transformations, and kerning, ligatures, and baseline.

    Simply choose a layer in Canvas to see formatting options and properties for text in Inspector, including font, weight, size, and color. You can adjust the opacity of a layer of text using a slider in Inspector or directly entering the values for the opacity percentage.

    Define colors

    6. Add images

    Sketch allows you to insert different image formats from a variety of sources, as well as to add image files and bitmap images. To add an image to your Sketch project, drag it straight from the Finder or Desktop, or choose “Insert > Image.” To replace an image, select “Layer > Image > Replace” or drag and drop it onto an existing image layer.

    The program has a variety of bitmap image-editing design tools. Choose an image on your Canvas and double-click it to enter editing mode, with choices for inverting, cropping, and filling.

    Add images

    Top tips for using Sketch

    To improve your wireframing, prototyping, and design system building in Sketch, here are seven tips.

    Build components in Sketch.

    In the ideation and wireframing stage in Sketch, it’s a good practice to first create your artboard and construct the page with simple shapes, defining the outline of the different components. If you plan to use a component on more than one artboard, you can turn it into an easy-to-access symbol by clicking on it and choosing “Create Symbol.”

    Top tips 1

    Use a grid and guides.

    A grid system can help you define and align your wireframe. Use “View > Canvas > Show Rulers” to show the rulers. Click on these rulers on the left and above your artboard to make guides that will help you create consistent designs, which is important as you share your work with a team.

    Top tips 2

    Use colors sensibly.

    Keep the color scheme simple; too many will be a distraction. Highlight important items, such as a call to action (CTA) button with strong colors to help create a visual hierarchy and draw attention to them. For efficiency’s sake, as you work, try grouping colors into primary, secondary, and tertiary colors.

    Top tips 3

    Use icons to add context.

    When used skillfully, icons can provide context for more involved components, such as tables, labels, and buttons. Icons are often useful for encouraging viewers' actions. A calendar icon, for example, could prompt a visitor to sign up for a company’s demo appointment.

    Top tips 4

    Add animations in Sketch.

    Adding animations to your prototype design is a great way to really bring it to life. Using the software’s prototyping function, you can use animated interactions to preview your designs and navigate among different artboards.

    Top tips 5

    Use Sketch Cloud.

    You can use Sketch Cloud to share all your pages and artboards in one place, letting collaborators view, comment, and download Sketch files. Pages and artboards are displayed according to their structure in Sketch. A shared link can also be employed for user testing of the design.

    Top tips 6

    Create a strong visual hierarchy.

    To ensure a design is compelling for viewers, it must have a strong visual hierarchy. Sketch enables designers to work on the most important, universal components first—including typography and color—and then work their way down to smaller, less essential components, such as buttons.

    Top tips 7

    Plugins that enhance design workflow


    Third-party plugins help extend the functionality of Sketch for professional designers, enabling them to do everything from managing libraries of assets to finding better ways to collaborate. Plugins that can help enhance your design workflow include the following.

    Abstract. As your team grows, Abstract helps you to scale your user flow. It provides superior version control and file management for Sketch. It makes finding the latest version of files easy, so you don’t waste time searching through Dropbox or Google Drive.

    Abstract

    Cluse. Cluse pairs seamlessly with Sketch, enabling you to speedily test and adjust the color contrast of your designs without using any outside resources. The comprehensive color contrast plugin ensures that Sketch products are WCAG 2.0 accessible.

    Cluse

    Sketch Runner Pro. This program enables you to perform actions faster in Sketch using keyboard shortcuts, saving you time and speeding up the design process.

    Sketch Runner Pro

    Sketch Flat Export. Without having to alter your Sketch symbol nesting or naming conventions, the Flat Export plugin enables you to export your symbols and layers with easy-to-manage file names into one folder.

    Sketch Flat Export

    uiLogos. This plugin offers a collection of logo designs that UI creators can place in their mockups of layouts and presentations. As well as popular brand logos, it includes the flags of 194 countries.

    uilogos</div><p>‍</p><p>New plugins for Sketch are being made available all the time, providing new capabilities for the program. Check the <a href=Sketch plugin site for hundreds of new choices created by the developer community.

    Use your skills as a UX designer

    Are you looking for work as a UX freelance designer? Some best practices include acquiring the right skills and certifications, building a diversified portfolio, always networking, and constantly learning (including taking tutorials). One of the best things you can learn is to use Upwork to upload your work and credentials to connect with potential clients worldwide.

    Leveraging our resources and reach, you can get access to some of the best user design jobs on the market. Just developing a single productive contact through the Upwork network could be all you need to move your career forward.

    It’s easy to sign up now and start sketching up a bright future for your UI career.

    Upwork is not affiliated with and does not sponsor or endorse any of the tools or services discussed in this article. These tools and services are provided only as potential options, and each reader and company should take the time needed to adequately analyze and determine the tools or services that would best fit their specific needs and situation.

    Heading

    asdassdsad
    Projects related to this article:
    No items found.

    Author Spotlight

    Creating a Design Workflow in Sketch
    The Upwork Team

    Upwork is the world’s work marketplace that connects businesses with independent talent from across the globe. We serve everyone from one-person startups to large, Fortune 100 enterprises with a powerful, trust-driven platform that enables companies and talent to work together in new ways that unlock their potential.

    Get This Article as a PDF

    For easy printing, reading, and sharing.

    Download PDF

    Latest articles

    X Icon
    Hide