5 best app design practices in Sketch for super fast workflow.

Sketch has been evolving ever since it emerged in the digital design industry. I had been using photoshop extensively for almost a decade before i made the shift to sketch for UI/UX and boy, it was a delightful experience. It’s fast! Really fast! Here are my top 5 best app design practices that lets me go flash in Sketch:

1. The Grid

Grid, by far is the most essential and indispensable tool used in UI/UX design which is often or mistakenly ignored by budding designers.

Baseline grid : Grid block size-8 , thick line every 3 blocks.

How do grids help?

1. Grids help in maintaining overall consistency and positioning ui elements effortlessly while utilizing minimum time as opposed to when not using one.
2. With great grids, comes great responsibility. Grids help you define layout rules for spacing and margin. These rules helps you make quick decisions and maintain consistency. Users dig consistency!
3. An effective grid can drastically improve your iconography and the speed with which you design them. I use a grid block size of 2 px (for 2px stroke icons on 1x screen density) and thick lines every 3 block.

my grid settings for icon design

2. Nested Symbols

A veteran designer would say, symbols are what smart objects are to photoshop. But sketch symbols are actually smarter. You can go crazy by nesting symbols. A symbol within a symbol which forms a part of another symbol that again is a symbol in itself. This inception of symbols forms a design system that somewhat resembles atomic design, formulated by Brad Frost.

Atomic design introduces a methodology for thinking of our UIs as thoughtful hierarchies, discusses the qualities of effective pattern libraries, and showcases techniques to transform your team’s design and development workflow. Get the book here

Nested symbols aka the inception of symbols

This is just one tiny idea to show how flexible you can get with nested symbols

The above example shows an events-card with date & timings, title and a call to action button. The text would be easy to manage, but the buttons could have different colors or styles in different scenarios. But having a nested button allows me to go flexible and i can even add an icon beside the button which could be toggled between other icons or none.

Important : The override alternates would only appear for the same sized symbols. Eg. if you have a symbol of 24x24 px, the override will only allow you to toggle within all 24x24 px symbols in your document.

If you want to go nuts over nesting, check this out.

3. My curated imagery folder

We, as designers know, the kind of impact imagery leaves in a user's mind. Bad or irrelevant imagery is what lorem ipsum is to typography. Nobody likes to read redundant Lorem Ipsums in your designs. So, next time when you are done watching cat videos on internet, take some time to collect good images for your next projects.

I use invision craft for dummy text and my static images folder for imagery. Also, make copywriting, a practice while designing any digital product. The world has had enough of our Lorem ipsums and sunset landscapes.

4. Styled text

Like symbols, the text styles are great time savers and ensures consistency. Text styles should me made a common practice, especially for web design. As a front-end developer, you know how important those heading tags (H1, H2, H3) are, in terms of seo and marketing as well.

5. Smart design

Effort is important, but knowing where to make an effort, makes all the difference.

Get lazy

I kept the best and by far the most important aspect for the last. When you design, get lazy! Because, when you get lazy, you think like a consumer. Why would you design intermediate screens when you can simply combine them in one. Take this example for uploading pictures from gallery or camera:

This is better. No toggles, no irritating popups. Right information at the right time.

Minimum actions per screen

Perfection is achieved, not when there is nothing more to add, but when there is nothing left to take away.

Users have a tendency to focus one thing at a time. Long story cut short : avoid using multiple actions on a card, not more than two actions on a title bar, make everything obvious because obvious always wins. Achieving minimalism is fast, only if you know what you are doing.

conclusion

Hard work fetches you results, smart work leads to success. Make your choice. Take time to think on your next project. Spend days on research, analyze the target audience, think contextually and that shall allow you to spend as little time as possible on actual design. Peace out!