{"id":12199,"date":"2016-02-10T21:39:27","date_gmt":"2016-02-11T05:39:27","guid":{"rendered":"https:\/\/www.uxpin.com\/studio\/?p=12199"},"modified":"2020-04-22T06:37:10","modified_gmt":"2020-04-22T13:37:10","slug":"3-minute-ux-tips-wireframe-in-content-blocks","status":"publish","type":"post","link":"https:\/\/www.uxpin.com\/studio\/ux-design\/3-minute-ux-tips-wireframe-in-content-blocks\/","title":{"rendered":"3-Minute UX Tips: Wireframe in Content Blocks"},"content":{"rendered":"

Want to get more out of your wireframing? <\/span><\/p>\n

Using content blocks before more specific layouts helps you organize your thoughts and prioritize important elements.<\/span><\/p>\n

Even more basic than boxes and arrows, content blocks allow you designate broader screen areas for certain types of content before making more advanced layout decisions. <\/span><\/p>\n

Content blocks work especially well for responsive design since it helps you visualize space constraints from the start. <\/span><\/p>\n

In the free Guide to Interactive Wireframing<\/span>, Professor Tom Green explains the best process for content wireframing:<\/span><\/p>\n

    \n
  1. Create a content inventory of content items<\/span><\/li>\n
  2. Create a visual hierarchy from those items<\/span><\/li>\n
  3. Place the items into a content wireframe according to hierarchy.<\/span><\/li>\n<\/ol>\n

    Content inventories<\/b> are a handy document in the early design process. They list what content you want\/have, organized by page. <\/span>You can visit Maadmob for a downloadable template<\/span><\/a>.\\<\/span><\/p>\n

    \"image03\"<\/p>\n

    Photo credit:<\/span><\/i> Maadmob<\/span><\/i><\/a><\/p>\n

    Next, use the content inventory to build a visual hierarchy. Which content is most important? Which do you want your users to notice first? <\/span><\/p>\n

    A helpful trick is to color-code types of content<\/span> in content blocks. <\/span><\/p>\n

    For example, you can assign all navigation menus and icons as red, and mark them as red content blocks in the wireframes. This is useful for responsive design: if you put the wireframes of different viewports together, you can see at a glance how consistent the views will be.<\/span><\/p>\n

    \"image01\"<\/p>\n

    Photo credit: <\/span><\/i>UXPin<\/span><\/i><\/a><\/p>\n

    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 \u201cfull\u201d experience.<\/span><\/p>\n

    \"image02\"<\/p>\n

    Photo credit: <\/span><\/i>UXPin<\/span><\/i><\/a><\/p>\n

    Consider content wireframing as an early starter step. As we all know, content is king, and this method of wireframing embodies that. Anything else is building content around secondary designs. <\/span><\/p>\n

    To learn more about content-first wireframing \u2014 including step-by-step instructions\u00a0and expert techniques\u00a0\u2014 <\/span>get the free Guide to Interactive Wireframing<\/a>\u00a0written by design professor Tom Green<\/span>.<\/span><\/p>\n

    \"\"<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"

    Quick tips for wireframing around content and responsive design. <\/p>\n","protected":false},"author":9,"featured_media":12200,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[18,8,6,7],"tags":[],"class_list":["post-12199","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-process","category-prototyping","category-ux-design","category-web-design"],"yoast_title":"","yoast_metadesc":"Quick tips for wireframing around content and responsive design.","acf":[],"yoast_head":"\n3-Minute UX Tips: Wireframe in Content Blocks | UXPin<\/title>\n<meta name=\"description\" content=\"Quick tips for wireframing around content and responsive design.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.uxpin.com\/studio\/ux-design\/3-minute-ux-tips-wireframe-in-content-blocks\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"3-Minute UX Tips: Wireframe in Content Blocks\" \/>\n<meta property=\"og:description\" content=\"Quick tips for wireframing around content and responsive design.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.uxpin.com\/studio\/ux-design\/3-minute-ux-tips-wireframe-in-content-blocks\/\" \/>\n<meta property=\"og:site_name\" content=\"Studio by UXPin\" \/>\n<meta property=\"article:published_time\" content=\"2016-02-11T05:39:27+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2020-04-22T13:37:10+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2016\/02\/image001.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1418\" \/>\n\t<meta property=\"og:image:height\" content=\"950\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Jerry Cao\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Jerry Cao\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"2 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/ux-design\\\/3-minute-ux-tips-wireframe-in-content-blocks\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/ux-design\\\/3-minute-ux-tips-wireframe-in-content-blocks\\\/\"},\"author\":{\"name\":\"Jerry Cao\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/#\\\/schema\\\/person\\\/e58da1b4c401eb288436977eb9810a18\"},\"headline\":\"3-Minute UX Tips: Wireframe in Content Blocks\",\"datePublished\":\"2016-02-11T05:39:27+00:00\",\"dateModified\":\"2020-04-22T13:37:10+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/ux-design\\\/3-minute-ux-tips-wireframe-in-content-blocks\\\/\"},\"wordCount\":325,\"image\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/ux-design\\\/3-minute-ux-tips-wireframe-in-content-blocks\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/wp-content\\\/uploads\\\/2016\\\/02\\\/image001.jpg\",\"articleSection\":[\"Process\",\"Prototyping\",\"UX Design\",\"Web Design\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/ux-design\\\/3-minute-ux-tips-wireframe-in-content-blocks\\\/\",\"url\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/ux-design\\\/3-minute-ux-tips-wireframe-in-content-blocks\\\/\",\"name\":\"3-Minute UX Tips: Wireframe in Content Blocks | UXPin\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/ux-design\\\/3-minute-ux-tips-wireframe-in-content-blocks\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/ux-design\\\/3-minute-ux-tips-wireframe-in-content-blocks\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/wp-content\\\/uploads\\\/2016\\\/02\\\/image001.jpg\",\"datePublished\":\"2016-02-11T05:39:27+00:00\",\"dateModified\":\"2020-04-22T13:37:10+00:00\",\"author\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/#\\\/schema\\\/person\\\/e58da1b4c401eb288436977eb9810a18\"},\"description\":\"Quick tips for wireframing around content and responsive design.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/ux-design\\\/3-minute-ux-tips-wireframe-in-content-blocks\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/ux-design\\\/3-minute-ux-tips-wireframe-in-content-blocks\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/ux-design\\\/3-minute-ux-tips-wireframe-in-content-blocks\\\/#primaryimage\",\"url\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/wp-content\\\/uploads\\\/2016\\\/02\\\/image001.jpg\",\"contentUrl\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/wp-content\\\/uploads\\\/2016\\\/02\\\/image001.jpg\",\"width\":1418,\"height\":950,\"caption\":\"image001\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/ux-design\\\/3-minute-ux-tips-wireframe-in-content-blocks\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"3-Minute UX Tips: Wireframe in Content Blocks\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/#website\",\"url\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/\",\"name\":\"Studio by UXPin\",\"description\":\"\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/#\\\/schema\\\/person\\\/e58da1b4c401eb288436977eb9810a18\",\"name\":\"Jerry Cao\",\"description\":\"Jerry Cao is a content strategist at UXPin where he gets to put his overly active imagination to paper every day. In a past life, he developed content strategies for clients at Brafton and worked in traditional advertising at DDB San Francisco. In his spare time he enjoys playing electric guitar, watching foreign horror films, and expanding his knowledge of random facts. Follow him on Twitter.\",\"sameAs\":[\"http:\\\/\\\/uxpin.com\"],\"url\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/author\\\/jerrycao\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"3-Minute UX Tips: Wireframe in Content Blocks | UXPin","description":"Quick tips for wireframing around content and responsive design.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.uxpin.com\/studio\/ux-design\/3-minute-ux-tips-wireframe-in-content-blocks\/","og_locale":"en_US","og_type":"article","og_title":"3-Minute UX Tips: Wireframe in Content Blocks","og_description":"Quick tips for wireframing around content and responsive design.","og_url":"https:\/\/www.uxpin.com\/studio\/ux-design\/3-minute-ux-tips-wireframe-in-content-blocks\/","og_site_name":"Studio by UXPin","article_published_time":"2016-02-11T05:39:27+00:00","article_modified_time":"2020-04-22T13:37:10+00:00","og_image":[{"width":1418,"height":950,"url":"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2016\/02\/image001.jpg","type":"image\/jpeg"}],"author":"Jerry Cao","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Jerry Cao","Est. reading time":"2 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.uxpin.com\/studio\/ux-design\/3-minute-ux-tips-wireframe-in-content-blocks\/#article","isPartOf":{"@id":"https:\/\/www.uxpin.com\/studio\/ux-design\/3-minute-ux-tips-wireframe-in-content-blocks\/"},"author":{"name":"Jerry Cao","@id":"https:\/\/www.uxpin.com\/studio\/#\/schema\/person\/e58da1b4c401eb288436977eb9810a18"},"headline":"3-Minute UX Tips: Wireframe in Content Blocks","datePublished":"2016-02-11T05:39:27+00:00","dateModified":"2020-04-22T13:37:10+00:00","mainEntityOfPage":{"@id":"https:\/\/www.uxpin.com\/studio\/ux-design\/3-minute-ux-tips-wireframe-in-content-blocks\/"},"wordCount":325,"image":{"@id":"https:\/\/www.uxpin.com\/studio\/ux-design\/3-minute-ux-tips-wireframe-in-content-blocks\/#primaryimage"},"thumbnailUrl":"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2016\/02\/image001.jpg","articleSection":["Process","Prototyping","UX Design","Web Design"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/www.uxpin.com\/studio\/ux-design\/3-minute-ux-tips-wireframe-in-content-blocks\/","url":"https:\/\/www.uxpin.com\/studio\/ux-design\/3-minute-ux-tips-wireframe-in-content-blocks\/","name":"3-Minute UX Tips: Wireframe in Content Blocks | UXPin","isPartOf":{"@id":"https:\/\/www.uxpin.com\/studio\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.uxpin.com\/studio\/ux-design\/3-minute-ux-tips-wireframe-in-content-blocks\/#primaryimage"},"image":{"@id":"https:\/\/www.uxpin.com\/studio\/ux-design\/3-minute-ux-tips-wireframe-in-content-blocks\/#primaryimage"},"thumbnailUrl":"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2016\/02\/image001.jpg","datePublished":"2016-02-11T05:39:27+00:00","dateModified":"2020-04-22T13:37:10+00:00","author":{"@id":"https:\/\/www.uxpin.com\/studio\/#\/schema\/person\/e58da1b4c401eb288436977eb9810a18"},"description":"Quick tips for wireframing around content and responsive design.","breadcrumb":{"@id":"https:\/\/www.uxpin.com\/studio\/ux-design\/3-minute-ux-tips-wireframe-in-content-blocks\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.uxpin.com\/studio\/ux-design\/3-minute-ux-tips-wireframe-in-content-blocks\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.uxpin.com\/studio\/ux-design\/3-minute-ux-tips-wireframe-in-content-blocks\/#primaryimage","url":"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2016\/02\/image001.jpg","contentUrl":"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2016\/02\/image001.jpg","width":1418,"height":950,"caption":"image001"},{"@type":"BreadcrumbList","@id":"https:\/\/www.uxpin.com\/studio\/ux-design\/3-minute-ux-tips-wireframe-in-content-blocks\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.uxpin.com\/studio\/"},{"@type":"ListItem","position":2,"name":"3-Minute UX Tips: Wireframe in Content Blocks"}]},{"@type":"WebSite","@id":"https:\/\/www.uxpin.com\/studio\/#website","url":"https:\/\/www.uxpin.com\/studio\/","name":"Studio by UXPin","description":"","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.uxpin.com\/studio\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/www.uxpin.com\/studio\/#\/schema\/person\/e58da1b4c401eb288436977eb9810a18","name":"Jerry Cao","description":"Jerry Cao is a content strategist at UXPin where he gets to put his overly active imagination to paper every day. In a past life, he developed content strategies for clients at Brafton and worked in traditional advertising at DDB San Francisco. In his spare time he enjoys playing electric guitar, watching foreign horror films, and expanding his knowledge of random facts. Follow him on Twitter.","sameAs":["http:\/\/uxpin.com"],"url":"https:\/\/www.uxpin.com\/studio\/author\/jerrycao\/"}]}},"_links":{"self":[{"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/posts\/12199","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/users\/9"}],"replies":[{"embeddable":true,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/comments?post=12199"}],"version-history":[{"count":0,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/posts\/12199\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/media\/12200"}],"wp:attachment":[{"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/media?parent=12199"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/categories?post=12199"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/tags?post=12199"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}