Digital Mockups: Design Patterns, Accessibility, Responsive Design, Visual Design, UI

Written By Editors Unbuilt Labs

by Marvin Cheung, Head of Research and Strategy

If you recall Brad Frost’s Atomic Design Methodology, this is when all the pieces come together. Each industry has their own set of UX conventions. These are tried, tested, and effective methods to get things done. Make sure to research them thoroughly before creating a design system of your own.

There are two Design Patterns you should be familiar with. They are Google’s Material Design Guideline and Apple’s Human Interface Guideline. The simple thing to do would be to familiarize yourself with the graphics, starting with Google’s Material Design Guideline. IBM’s Carbon Design System is also worth mentioning. There is no need to memorize every detail and number, but you might be asked to double check the final interface and identify any anomalies even if you are not a UX Designer. Pay special attention to the accessibility section of the two guides. Especially if you are designing for the Web, make sure to have a basic understanding of responsive design principles. 

It is entirely possible to build a branded design system by changing the fonts, colors, corners, and drop shadows of the Design Patterns. As far as tools are concerned, we generally recommend using Figma because it allows for online collaboration and is free for a limited number of users. However, Sketch, Adobe XD, Illustrator, Photoshop, Invision, are also some of the common tools that UX Designers use to put mockups together. To animate interfaces, designers typically use Adobe After Effects and Facebook’s Origami Studio. Stay tuned for Branding and Identity: Design 101.

Happy creating!

Recommended readings: 

Editors Unbuilt Labs
Previous

An Introduction to Effective Business Research
Next

Zero-based Thinking: User Stories, Storyboarding, Wireframing, Paper Prototyping