microsoft web Framework

The purpose of creating a standard Microsoft web framework is to create a cohesive design system that is functional, useful, and valuable to customers. The design system, featured for use on getmwf.com, informs how our technology looks and feels across all consumer-facing websites.

I helped design foundational components as well as robust modules. Considerations were interactive states, layout, options, responsive story, accessibility, and cross-Microsoft usage.

PROBLEM
Users may find our sites inconsistent and difficult to find what they are looking for. Microsoft websites vary greatly in usability, interface, and overall visual design and architecture.

CONCEPT
A consistent and cohesive design system that includes a common web framework and components will help unify Microsoft’s web properties and make the site easier for the user to navigate and find great products.


EXPECTED RESULT
Any future changes to common components or styles can be done within the code so all affected elements are universally changed. All Microsoft sites will be unified while retaining its own brand identity.

The framework and assets are available publicly for agency use at getmwf.com, the Microsoft design language Web Framework website.

 

 


design system

Design System for Microsoft web properties

(Please click to see enlarged images.)


Microsoft Web Framework Design tenets

The design system informs how our technology looks and feels across all consumer-facing websites

RESPONSIVE STORY

The responsive story shows how the components resize and/or stack across the viewports. Components shown include the header, hero, content-placements, features, mosaics, product placements, and banner.

 

UI Components

item placements

Item placements: content-types

Item placements: examples