MAZDA DIGITAL LIBRARY
CONCEPT :
The concept was to develop a responsive template system within Adobe XD to standardize components leveraged on mazdausa.com.
DEVELOPMENT :
The development was initiated by establishing an atomic system of foundational elements used throughout the digital experience. Components were prioritized and a framework was determined based on needs established by the digital team.
EXECUTION :
The execution culminated in a live document within Adobe XD that contains responsive templates, specs, and links to additional development resources.
fig. 1
fig. 2
fig. 3
fig. 4
Foundational elements were assessed and documented for colors (fig. 1), character styles (fig. 2), CTA styles (fig. 3), icons (fig. 4), and more.
fig. 5
Templates were created with component variations and instructions to build responsive designs within Adobe XD (fig. 5).
fig. 6
Template information (fig. 6) for specs, copy, elements, development, and links to live examples were built for each of the components.
fig. 7
Additional standard page templates (fig. 7) were built to break down commonly reoccurring component structures with links to each component type.