Overview

Advanced User Interface (UI) Design is the application of: Concepts, Processes, and the tools to create a canonical Design System.

Concepts

• Typogprahy
• Color
• Grid
• Content
• Design Systems

Process

• Version Control
• Lo-to-Hi Fidelity Prototypes
• Prototype Previewing
• Developer Handoff
• Optimizations

Design Systems

• UI Components following Atomic Design
• Style Guide
• Grids
• Collaboration
• Iteration
• Handoff

Version Control

Overview

• A version history, not a duplicate-backup
• A safe place for experimentation
• Collaboration for team members

Tools

• GitHub.com service
• Kactus.io app

Plugins

Overview

• Sketch apps community of users and plugin contributors are what set it apart
• Use Sketch plugin manager

Craft by InVision

• Craft plugin for

Find A Favorite

• Sketch plugins repository

UI Libraries

Note, UI Libraries are not Design System

Overview

• Portable and module Libraries of Sketch
• A canonical source of truth for design teams
• Keeps the UI-elements separate from it’s application

UI Libraries

• Jans Losert UI 

Pixel Density & Aspect Ratios

Pixel Density

• Determine pixel density for your primary computer
  • http://density.brdrck.me/
  • Work in 1x regardless of primary computer

Aspect Ratio

• https://www.sebastien-gabriel.com/designers-guide-to-dpi/

Sketch App Checklist

https://www.sketchappsources.com/

Overview

Sketch app changes yearly. It’s important to have a checklist and reminders of things in place to optimize workflow. This list is fluid and should be continually updated.

Checklist

• Version Control
• Your Plugins of Choice
  • Craft
  • Image Optimization
• Libraries
• Designing at 1x

Reminders from UX 1 & UX 2

• Use basic math operators
• Hold OPT, then select for dimensions
• Grid via Craft plugin or Sketch app
• Use Grid Settings
• Extend Art Boards way, way down
• Resize to Fit Art Boards for icons, UI elements, etc.
• Guides and Rules
• Customize Toolbar
• CRT+P for pixel grid
• File > Reduce File Size each day

Resources

• https://www.sketchappsources.com/
• https://sketchrepo.com/
• https://sketchapphub.com/
• https://sketch.fordesignrs.com/

Icons

Sketch Icon Libraries

• Sketch Resources: Icons

UI Fonts

Reference

• UI Type Goes Unoticed
• Pick Right Font

Grayscale Wireframing

Overview

• Various shades of gray distract from the wireframe’s function, user attention, call-to-action, and UI depths
• Derivative of “block”, “monochrome”, “lo-fidelity”, or “colored” wireframes
• Med-to-High fidelity: Typeface choices, specific dimensions contains actual content, prototyped interactions and user-flows

Defaults

• Customize toolbar
• Set as Default Style

Layouts

• Always paste above. Select layer. Paste.
• Use Resizing Constraints
• Detach Symbols for variations
• CMD+UP 1px, CMD+SH+UP 10px

Medium-to-High Fidelity

• Use Data plugins, better yet make JSON file
• Grayscale colored assets

Iterative Evaluation

Methods for evaluating Designs (as a noun) while, designing (as a verb).

Methods

• Make many, many variations
• Test on Device
• Add real content