A static wireframe isn't limited to the content that goes into each individual artboard. In this video, learn how annotating your artboards can help you create a flowchart for your design.
- [Instructor] Because wireframes are designed…to communicate structure,…it's not always possible…to put all of the design information…into the artboards themselves.…Here, I have a slightly more fleshed-out version…of the wireframe we've been working with,…though I've spaced the artboards apart a bit…to give myself some room to work with.…I'd like to create an area where I can keep annotations…on how all of these screens behave and how they interact.…To do that, I'm going to click in the Layers panel…but not on any of the artboards themselves.…
Making sure that none of the artboards are selected,…I'm going to click Create new group.…And I'm going to rename that Annotations.…Now I'm going to create a new layer inside.…And the first thing that I want to create is a flowchart.…This is a basic diagram that shows me…how all of these screens interact…and how we get from one to the next.…Because I'm just doing this at a wireframe level,…I'm going to do this very quickly.…I want to use the brush tool.…I'm going to use 25 pixels at 100% hardness.…
- Creating a document with artboards
- Using grids, guides, and guide layouts
- Adding placeholders and text
- Using ligature fonts for icons
- Using layer comps to display states
- Using Adobe Preview CC
- Exporting artboards for review
- Exporting assets for use in InVision
- Working with user interface kits
- Extracting CSS values from a design
Skill Level Intermediate
Q: This course was updated on 11/14/2017. What changed?
A: New videos were added that cover how to use user interface kits to create pixel-perfect designs.
Q: This course was updated on 07/10/2018. What changed?
A: We added one video, "Mobile preview on Adobe XD."