Day #21: 3 minute UX tips (Wireframing in content blocks)

Day #21: 3 minute UX tips (Wireframing in content blocks)

In this article Tom Green is explaining the process of Wireframing and how using content blocks with color specifics can assist in the organization of your layout. For example, as we are developing our site we have decided to have a horizontal as well as a vertical navigation for users. I noticed that the grey wireframes were confusing for people when we had our meeting and I think for presenting whether it is for your own business or to clients adding color may help. Just basic colors though and subtle that don’t draw attention away from the overall layout. The problem here for me is then you have people being too distracted by colors, because in turn I have sat in meetings where an agency is presenting to the company, the poor designer keeps getting is interrogated about their color choice on the wire-frames. It’s a very catch 22 situation and I may try it out see how it goes and still choose to only move forward with using only shades of grey in my wire-frames. Anyway, going to give the article the benefit of the doubt and give it a try, here’s a few more items that I found interesting that the article mentioned

“The best process for content wire-framing

  • Create a content inventory of content items
  • Create a visual hierarchy of those items
  • Place the items into a content wire-frame according to hierarchy”

Content inventory

This I must be honest I didn’t know the name for, I have done this before though, I have altered companies content inventory and now in our own business I have done ours from scratch. Let me tell you it seems easy enough, but our platform is proving somewhat tricky to organize even in this very basic fashion, I don’t want this “inception” of content and forms for the users so I am trying to make it as basic as possible. As it is we shaved off the settings section when we decided to combine it with the “view my profile” section which I think makes it easier for the user, I personally hate when I get stuck trying to figure out how to change something and then must maneuver to another part of the platform to change something I was viewing on another page.

I like this statement of

“Next, use the content inventory to build a visual hierarchy. Which content is most important? Which do you want your users to notice first?”

The article has colorful examples too which help with understanding the process

“Just like all methods of design, content wireframing benefits from a mobile-first approach. Starting with the smallest screen and then working upwards means adding content blocks to an existing “full” experience.”

This really speaks volumes to me, and I think its something for me to focus on moving forward, I made the mistake of designing the desktop first for the project I’m working on and it became a nightmare when resizing for mobile. Something I had to consider was how much content would be on the desktop and how would it view on mobile, we don’t have the budget to design an app for download on mobile, so we are structuring it as responsive for now and then will hopefully move to an app once we start bringing in capital.

This article was short but informative, I already signed up for their newsletter so will probably be doing a few more posts on some of the topics mentioned on this site. Until next time

Bye for now!

Leave a Reply

Your email address will not be published. Required fields are marked *