Secret ingredients to quality software

SSW Foursquare

Rules to Better Designers - 4 Rules

  1. Do you know where to keep your design files?

    Design files should never be stored in Azure DevOps (was VSTS/TFS) or any other development file system.

    Designer Source Control TFS
    Figure: Bad example – Azure DevOps (was VSTS/TFS) takes too long to set up and too slow to use

    Designer Source Control DropBox
    Figure: Good Example – Dropbox or OneDrive

    Teamsfiles
    Figure: Good Example – OneDrive and Teams

    Google Drive and Dropbox don’t work in China, so SSW prefers to use OneDrive.

    For developers, see Do you know where to keep your files?

  2. There are a few options when it comes to the best software for product design (the creation of mockups and prototypes in particular). The most popular are:

    • Adobe XD
    • Figma
    • Sketch (recommended)

    Sketch is the design tool of choice as it’s faster, lighter, and comes with a long list of plugins that add extra functionality, automation, and synergy with other tools in a designer’s arsenal. Clickable prototypes can be saved to the cloud and accessed in any web browser by designers and clients alike.

    Warning: Sketch is available only on MacOS

    Figure: Sketch is an awesome lightweight design tool

    The goal of any designer is to develop the best UI and develop the best user experience possible, and you want the best tool to help achieve this acrossweb and mobile applications. Sketch allows universal changes using a library of symbols, text, and layer styles.

    Note: One software doesn't alwasys replace the others! Sketch does not include the print design and photo editing features of Adobe Photoshop and other software also used by designers. Photoshop is the industry standard in raster (pixel-based) graphics editing, photography, and digital art. Adobe Illustrator, on the other hand, is the standard vector-based design tool used for print design, logos,icons, and more. All of these tools are important parts of a designer's kit!

  3. When it comes to design work, Abstract is considered the best tool for sharing and version control over GitHub and other similar tools because it displays changes visually. It easily synergises with Sketch and Zeplin to form a useful software ecosystem and streamlined workflow for designers. The result is a system that allows designers to collaborate without overwriting each other’s work while easily tracking the changes made.

    Warning: Abstract is available only on MacOS

    abstract screen
    Figure: Abstract includes all the tools for smooth collaboration

    Using Abstract version control makes it easy for designers to work together, clearly displays which version of a project is the latest andshows who has created or edited elements.

    Follow these steps to contribute to a project in Abstract:

    1. Open a project in Abstract
    2. Create a new branch and give that branch a name that reflects the work you’re doing.
      Abstract Step2
      Figure: New Branch button
    3. Click “Edit in Sketch”.
      Abstract Step3
      Figure: Click to open the project in Sketch
    4. Make and save your changes in Sketch.
    5. Commit your changes to Abstract.
      Abstract Step5
      Figure: The 'Commit Changes' popup bar and button
    6. When you're all done, merge your branch.
      Abstract Step6
      Figure: The 'Merge Branch' button

    Warning: While you can open a Sketch file by selecting “Open Untracked”, this will not save your changes in Abstract - meaning you won’t be able to collaborate with others and your changes could be lost.

  4. Zeplin provides designers with an organised workspace where they can publish their work and allow the entire team to collaborate on a project.

    This software allows developers to view mockups with selectable elements – even displaying snippets of HTML and CSS that can be pasted right into a projector simply used as a helpful reference point. Users can also leave comments and notes on mockups to serve as reminders or points of feedback.

    Using the Zeplin plugin for Sketch, designers can easily export not only their mockups but any important symbols and assets they created or included.With Zeplin styleguides developers have easy access to a library of the colours and reusable design elements of any given project.

    Figure: Zeplin helps developers deliver on the promise of a design

We open source. Powered by GitHub