UI Design Workflow

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 Pages 8

Find a Page… Home Courses Discovery (Research) Overview Process Table of Contents Tools UI Design Workflow Clone this wiki locally

https://github.com/pcmanikoth/ux-field-guide.wiki.git