Content Strategy

Annotated Wireframe

Kristina Halvorson

Kristina Halvorson

Brain Traffic
Content Strategy

Check out a free preview of the full Content Strategy course

The "Annotated Wireframe" Lesson is part of the full, Content Strategy course featured in this preview video. Here's what you'd learn in this lesson:

Kristina reviews an annotated wireframe, which is a tool that should be used for key landing pages that flesh out main content areas.


Transcript from the "Annotated Wireframe" Lesson

>> This is an example of an annotated wireframe. I don't know if you guys have used these per se, but this is where you're specifically calling out purpose of each content component. And the hierarchy is laid out on the wireframe itself. Okay, so these are examples. This is a lot of work.

I do not recommend doing this for every single page of your site. I do strongly recommend doing this for key pages. So the homepage, all the landing pages, any other high traffic page, page that is going to lead people directly to conversion, or to get them as a lead.

All right, those are all key pages that we do wanna create either page tables or these annotated wireframes for. I really would like to encourage the designers in the room to get away from lorem ipsum, as much as possible. It's really easy to design for character counts and font sizes.

It's much more difficult to design for content substance. But that's where you're going to get quality design, that where the form follows the function. Okay, this is not to suggest that you're never going to need copy to support design requirements, because sometimes that just happens like, but what the typical thing that I see a lot of times is that every page will require a subhead, and then a sub, subhead.

And you end up just being redundant, and it's a design element that ends up just getting in people's way, for example. So where if you had designed with real content to begin with, you would have saying no, they're being redundant.

Learn Straight from the Experts Who Shape the Modern Web

  • In-depth Courses
  • Industry Leading Experts
  • Learning Paths
  • Live Interactive Workshops
Get Unlimited Access Now