DESIGN SYSTEM MANAGEMENT CREATION - HOW WE GOT THERE
GRID
As designers, it’s important to consider how your artwork translates at viewport sizes other than the artboard.
VERTICAL SPACING
Thoughtful vertical pacing sets a visual rhythm for elements on a screen and controls the flow of information presented to users. We recommend using a base-2 exponential scale to define vertical pacing.
DSM
Defines design and development principles for the DISH enterprise. It contains reusable elements for design and development for digital assets and acts as a holistic repository for things DISH Design knows. The decisions presented here have not been made casually. It's built to be inclusive, efficient, and transparent.
An efficient experience emphasizes simplicity to minimize noise and reduce learning fatigue. Efficiency applies to all aspects of UX design including typography, color, and interaction. Elegance is the balance between monotony and noise.
EFFICIENCY OF COLOR
Use color deliberately to maximize impact. Overuse of a color can lead to user fatigue and confusion.
TYPOGRAPHY
EfficiencyStrive for the minimum amount of styles or weights for your design while maintaining elegance and clarity.
INCLUSIVITY
As designers and developers, we are gatekeepers for products and content. It is our responsibility to use our creative, political, and interpersonal influence to demand equitable representation and treatment for all. Likely the most common tactic to creating an inclusive experience is using imagery to equitably represent a variety of types of people.
DSM - CHALLENGES
Once the primary pieces of the DSM were laid out. we started to create a library of components to be reused on different page layouts. The challenge we faced was to create a simple library that could also answer the needs of both account pages and marketing pages.
WEBSITE REDESIGN PROCESS
IDEATE, DESIGN & REFINE
● Define user needs
● Create paper prototypes
● Develop site map
● Create wireframes
● Early testing of concepts/decisions
● Translate low fidelity wireframes into high fidelity, clickable prototypes
● Incorporating a company or product’s brand into the visual elements
● Strategize the product’s interactive animations
● Iterating to enhance the look & feel of the product
● Iterate on designs
● Collect stakeholder & user feedback
● Focus groups
PROTOTYPING
● Allows for deeper exploration into the desired interaction patterns
● Provides clear vision around branding and tone
● Creates a means to communicate various paths through our ideal app experience
Transition from Concepts to Designs
● Feedback & iteration
TEST & IMPLEMENT
● Dev handoff
● Site QA
● Baseline usability testing
● Iterate on designs based on testing
