IXD301 Portfolio Website- Content Wireframe

Image of Smashing Magazine article on creating content wirefrmaes for responsive design

Creating a content wireframe

This is great for getting a visual of the information hierarchy and leads to a more open discussion about what needs to be prioritised. As stated by Tom Green by creating a content wireframe rather than a regular wireframe you can make presenting work to clients more of a talking point rather than a final result. Green begins by simply listing in order of importance the information that will be present on a webpage. I have followed this by doing the same for the homepage of my portfolio website.

  • My best case studies
  • 5 following case studies
  • Contact information
  • Blog section
  • Footer
  • Header and navigation.

I then took the above information and organised it into content wireframes.

Content wireframe for mobile

Content wireframe for mobile

Content wireframe for tablet

content wireframe for tablet

Content Wireframe for Desktop

Content wireframe for desktop

This was a really interesting exercise to complete. I found it particularly helpful in pushing me to think about information hierarchy in terms of content. While I’m not sure about the unbalance the table and desktop wireframes bring to the structure of my case studies I do want to spend more time considering how to highlight my stronger case studies.

Share this post:

Leave a Reply

Your email address will not be published.