Go back to the main page

Teaching a design team Adobe XD

Newcom the Company

NewCom is a company that manages a collection of online magazines. They employ designers that have decades of print experience but aren't as proficient with current digital design tools and practises. I came on to jump start their adventure and begin the transition into successful web design with Adobe XD.

See Newcom's website

Week by Week

The plan was to bring 5 designers up and ready to work collaboratively with Adobe XD. The goal was to have everyone proficient enough to begin developing design systems for each of their brands. Their prototyping experiences were varied with some students already developing for the web and others requiring an introduction to the beloved <div>. Throughout the entire process, we stuck to the mantra of "Designing for Development."

Week

Learning Outcome

Homework

1

Overview of Adobe XD | Setting up a Collaborative Document

Create and share your private workspace with Kevin, a partner, and developer.

2

Wireframing 1 | Design Systems | Colour/Character Styles| Development

Start a landing page wireframe while creating character styles. Update link.

3

Wireframing 2 | Intro to Components | Design for Development

Create Navbar and footer for site and make them components, organize components, Share wireframe to development for feedback

4

Components 2 | Sharing across projects

Import a new component from the shared library, create complex component and share, change components using overrides.

5

Wireframe 3 | Designing for CMS/Responsive Resizing

Create breakpoints for your design at tablet and mobile sizes. Introduce the responsive resize feature.

6

Design 1 |  Repeat Grids VS Groups | Google Sheets

Create a grouping ove information (dates, headings, descriptions) and manipulate it using different approaches Import Data

7

Design 2 | Designing for Development, CMS, WP

Thinking like a developer

8

Plugins Expanded | Accessibility, Lottie, UI Faces, Vizzy Charts, Icons... more

Customize your XD Experience and start using third party tools

9

Prototyping Condensed

We have been already been using the prototype tab as we design, not let's create a working prototype for the site.

10

Final Share for development

Mark everything for export. Explain components, Add video/animations.

Advanced Collaboration with XD

Here is a trimmed Loom video where I began the discussion of how to use google sheet plugin to streamline collaboration with a marketing team or copy writer. Every week was saved as an HD video posted online and shared with the group so that they could re-watch all lessons.