My 5 Sketch Tips

1_1QbPl2S6OlEqFZIv0e9loA.jpeg

Sketch is a powerful and extensible tool for creating beautiful design assets. Whether you’ve been using it for years or are just starting out here are a few tips and best practices that I found useful.

1. Use naming conventions.

If you’re working by yourself or working with a team, it is always good to name your layers and symbols with labels that make sense. If you’re working as part of a team you’re going to want your teammates to be able to easily identify assets in your Sketch file and if you’re working alone, you may come back to an old file for and be able to easily identify assets within that file.

2. Use text styles for headlines

You can create re-usable text styles from any text block in sketch. This allows you to store text attributes with a text element and use it anywhere in you design file. This makes creating and setting up new pages a lot faster because you aren’t wasting time customizing each and every text block with the appropriate styling.

3. Create symbols for repeating UI patterns 

Have a button or a component that you want to be able to use multiple times in the same file? Use the symbols function to easily “plug and play” these groups of layers into your design.

4. Design to a grid

Using a common or predetermined grid layout will help your developer build your layout exactly how you intended it. Larger companies use custom grid system or modified version of bootstrap. Not only will this help the developer build out your design, but it will help you keep your content organized.

5. Nesting Symbols

Nesting symbols is a great way to create repeating design patterns. Using the override functionality in Sketch you can quickly and easily mix up your icons, colors, and text, among other things. This is especially helpful when sharing design assets with multiple team members who are working on the same application.

Bonus

Use inner shadow to create a border on just one side of a vector object. If you set the blur and X-axis value to zero and set the Y-axis to 1px, you can create a 1-pixel top or bottom border on an object. This is helpful because you no longer have to wrestle with 1-pixel lines in your project getting the spacing perfect, etc.­

Sources

https://www.youtube.com/watch?v=ZCypZWzCr84

https://www.uxpin.com/studio/blog/10-best-practices-sketch/

Affordances in User Interface Design

Full-Size.jpg

Introduction

How do you know how to interact with something? When you walk up to a door that you’ve never walked through before how do you know how to open it? When you see a button, how do you know to push it? When you see a lever, how do you know to pull it? These devices were all designed to take advantages of common actionable cognitive perception called affordances.

Affordances defined

The Merriam-Webster dictionary defines affordances as “the qualities or properties of an object that define its possible uses or make clear how it can or should be used.” In interaction design there are two competing definitions of affordances that are used. One is by James Gibson and the other is by Donald Norman.

Gibson's definition of affordances

  • Action possibilities in the environment in relation to the action capabilities of an actor
  • Independent of the actor's experience, knowledge, culture, or ability to perceive
  • Existence is binary - an affordance exists or it does not exist.

Norman's definition of affordances

  • Perceived properties that may not actually exist
  • Suggestions or clues as to how to use the properties
  • Can be dependent on the experience, knowledge, or culture of the actor
  • Can make an action difficult or easy

Tying it all together

In interface design we need to take advantages of affordances. Make interfaces that people instinctively know how to use without having to be told how to use them. One criticism of the flat UI design trend is that part of interactivity is starting to be lost for the sake of an almost sterile design aesthetic. I personally miss the interactivity that is suggested with a slightly more skewmophic approach. Buttons should make me want to click on them, not just be simply a gateway to a new section of the application.

Sources

https://www.merriam-webster.com/dictionary/affordance

https://www.interaction-design.org/literature/book/the-glossary-of-human-computer-interaction/affordances

https://dribbble.com/shots/899177-Slide-Concept

Design Systems Part 2

download.jpeg

Summary of design systems

Design systems are meant to solve the problem of keeping design standards consistent across multiple platforms and teams. This post we will take a look at some design systems and correlated design methodology. If you haven't already, I would recommend reading Atomic Design by Brad Frost to familiarize yourself with modular design concepts.

What they look like

Remember that a design system is more than just an online style guide, it can encompass multiple platforms and is evolving with every new code release. The navigation within these design systems needs to be broad enough to encompass design assets at a high level but then grills down to provide a high level of detail on those assets. The design system may have articles and general design principles on the home screen then have a “guidelines” section that goes into a layer that contains components and colors. Once you get to this Second layer, you will likely have a tertiary layer of details that covers the nitty-gritty details like hex values margin and padding between components and integration patterns.

Levels of navigation:

  • High - Website, mobile apps, voice & marketing tone.
  • Medium - Components, colors, templates, navigation, logo usage.
  • Low - Hex values, margin and padding standards, heading sizes, design tokens, code snippets.

Real world Examples

 

Design system maintenance

There are two ways that you maintain a design system. One is called an overlord approach - someone whose job it is to maintain this system as a source of record and acts as a gatekeeper (not ideal). The other is to have a federation approach where each of the managers or design leads get together as often as needed and discuss changes they would like to have added to the design system. They then make concessions or agreements about UI elements until they come to a consensus.

Sources:

https://uxdesign.cc/resources-links-references-and-articles-on-design-systems-e8ab898e0ab5

https://blog.prototypr.io/how-to-build-a-design-system-86e6ee5cf201

https://www.uxpin.com/studio/blog/design-systems-abstraction-layers-model-better-understanding-implementation/

https://www.uxpin.com/create-design-system-guide

http://bradfrost.com/blog/post/atomic-web-design/

Design Systems Part 1

Screen Shot 2018-04-13 at 3.03.53 PM.png

The problem

The larger the project, the more governance is needed to keep the brand identity consistent across platforms. On smaller projects you may be able to get away with a simple static style guide to keep as a reference to the design team. This would likely identify the color pallet, header and button sizes. Since the team and application are small there isn’t much need for extensive documentation. However, for larger entities brand consistency across platform can become difficult. Multi national design teams, websites, apps, and micro sites all need to have the same on brand look & feel. To add to the confusion, code releases every few weeks that build upon the existing code base can quickly make an existing style guide out of date.

The Solution

A design system allows the design team to have a single, up to date, web based source of truth available for the entire company. For example, a designer in Monterrey building a micro site can use the same design patterns and code snippets as a designer in DC. Add to this a modular pattern library and now you have a consistent, cross platform, brand identity that needs minimal maintenance.

Design System vs. Style Guide vs. Pattern Library

A design system is a complete compilation of reusable design resources and patterns that encompass a brands’ digital identity. What sets a design system apart from a style guide is that a design system houses real “living” code along with UI toolkits and brand guidelines. Think of a design system as encompassing both a living style guide and a pattern library. A style guide is typically static in nature and provides guidelines on brand elements such as color, iconography, and typography. A pattern library is also a subset of a design system that houses design patterns available for use within a certain brand identity.

Three Tips for Starting a Responsive Design

As designers we need to account for a multitude of devices. Knowing the basics of how responsive and adaptive designs are developed helps us to communicate our static designs to the developer. This post covers 3 things to keep in mind when starting your design work.


Relative units

Instead of thinking strictly in pixel heights and widths, consider using percentages as a way to communicate relative sizes. You will likely need to sit down with a developer to work our the details, but the end result will look much better on large screens.

02_Relative-Units-vs-Static-Units-1.gif

Breakpoints & Max and Min values

Knowing your breakpoints allows you to optimize each view of your design. Think about how you want your design to scale. Does stacking items make it easier or harder for the user to navigate your site? If the design shrinks down and the proportions remain the same, do the touch points become too small for mobile users?

03_With-Breakpoints-vs-Without-Breakpoints-1.gif

Mobile or Desktop first

Depending on your audience it may make sense to start your design work at a mobile or desktop breakpoint first. I personally take a mobile also approach when designing for the web. The mobile also approach starts with a desktop design, but continually considers the design implications for the mobile experience. I have found this helpful for clients that have a hard time conceptualizing a mobile first design approach. On the other hand, if you know for a fact that the majority of users will be accessing your site on their phones, then starting your work at the mobile breakpoint will make the most sense for you.