wireframe

In the early stages of a project it can be helpful to map out as much of the experience as you can to help get everyone on the same page. Conversations and decisions often become a little more tangible when there is something to look at and point to.

Once you've got a solid list of screens or steps written out for your project and maybe even a sitemap created, you can make some great headway with this quick wireframing technique.

There are always constants between projects, such as the navigation for a website, a title, subheading, and a block of copy. Some buttons, etc. Even though the nomenclature for each component and user action may not be defined and signed off on, you can still get to work.

Watch the video below for an intro into creating these high-level (ie. abstract), placeholder components.


Download the source files here.

Read the next post in this series, "Create Presentation Ready PDFs with Artboards in Illustrator"