10 Simple Ways to Make Wireframes More Useful

I wear many hats at my job and 1 of them is UX Design. I almost enjoy the puzzle work of UX more than Graphic Design but I always find that the people I work with don’t understand the usefulness of a wireframe. I found this awesome article this morning and I just had to share it out in hopes that it will highlight the importance of a well designed wireframe.

via: @steve_cable & @netmag

Here is a quick breakdown in case you don’t have time to read the whole article:

  1. Show visual priority with shading
    • the darkest shaded item should be what you want the user to do next
  2. Use real data
    • avoid Lorem Ipsum, it’s meaningless to the user
  3. Make sure everything adds up
    • if you’re designing a cart make sure the items add up to the correct amount, otherwise it may distract the user from the task
  4. Consider and describe images
    • use sketches or simply explain the types of images that the user may expect see
  5. Be careful using color
    • colored elements can draw the user’s attention and skew results
  6. Ensure that interactive elements have the appropriate affordance
    • interactive elements need to look how they work; buttons looking clickable
  7. Work in actual pixels
    • if you don’t it can cause issues when it goes to design
  8. Include a change log
    • let’s people reviewing the doc find small changes easily
  9. Avoid black lines
    • to reduce visual clutter
  10. Don’t just wave them goodbye
    • don’t just pass them off, work with your team and help interpret your ideas