The value in a static wireframe is in the structure of a design, not the style. In this video, learn how to quickly add consistent content placeholders, duplicate them, and arrange them within a wireframe.
- [Instructor] Let's work now to start in…on our first UX deliverable, a static wireframe.…Here I am in the new document window,…and I'm going to choose mobile and an iPhone 6 document.…I'm going to give that the name Health App,…and I want to make sure that artboards are turned on.…The very first thing I want to do…is rename my artboard, Main Nav.…This will be the screen that our users can use…to access all the different parts of our application.…Now, with wireframes, the real goal is to show…the structure of a design.…
The simpler we can make the styling…of that design, the better.…I like to use shapes for that reason.…I'm going to come down and choose the rectangle tool,…or you can hit U, and I want to make sure that my fill…is set to a relatively neutral gray.…Here I've chosen 888888.…I want to make sure that my stroke is pure black…and two or three pixels wide.…I'm going to draw a shape from the top left corner…to create what will be the navigation bar…of the actual application.…
As soon as I release that, my properties window pops open.…
- 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."