-
Notifications
You must be signed in to change notification settings - Fork 0
UI Design Workflow
Gordon325 edited this page Nov 29, 2018
·
2 revisions
Advanced User Interface (UI) Design is the application of: Concepts, Processes, and the tools to create a canonical Design System.
- Typogprahy
- Color
- Grid
- Content
- Design Systems
- Version Control
- Lo-to-Hi Fidelity Prototypes
- Prototype Previewing
- Developer Handoff
- Optimizations
- UI Components following Atomic Design
- Style Guide
- Grids
- Collaboration
- Iteration
- Handoff
- A version history, not a duplicate-backup
- A safe place for experimentation
- Collaboration for team members
- GitHub.com service
- Kactus.io app
- Sketch apps community of users and plugin contributors are what set it apart
- Use Sketch plugin manager
- Craft plugin for
- Sketch plugins repository
Note, UI Libraries are not Design System
- Portable and module Libraries of Sketch
- A canonical source of truth for design teams
- Keeps the UI-elements separate from it’s application
- Determine pixel density for your primary computer
- http://density.brdrck.me/
- Work in 1x regardless of primary computer
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.
- Version Control
- Your Plugins of Choice
- Craft
- Image Optimization
- Libraries
- Designing at 1x
- 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
- https://www.sketchappsources.com/
- https://sketchrepo.com/
- https://sketchapphub.com/
- https://sketch.fordesignrs.com/
- 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
- Customize toolbar
- Set as Default Style
- Always paste above. Select layer. Paste.
- Use Resizing Constraints
- Detach Symbols for variations
- CMD+UP 1px, CMD+SH+UP 10px
- Use Data plugins, better yet make JSON file
- Grayscale colored assets
Methods for evaluating Designs (as a noun) while, designing (as a verb).
- Make many, many variations
- Test on Device
- Add real content