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
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.
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.