{"id":2974,"date":"2022-04-02T19:39:58","date_gmt":"2022-04-02T19:39:58","guid":{"rendered":"http:\/\/kaceymorrow.com\/361\/?page_id=2974"},"modified":"2022-05-05T10:08:42","modified_gmt":"2022-05-05T17:08:42","slug":"wireframes-help","status":"publish","type":"page","link":"http:\/\/kaceymorrow.com\/361\/wireframes-help\/","title":{"rendered":"Wireframes"},"content":{"rendered":"\n<p class=\"wp-block-paragraph\"><strong>PDF: <a rel=\"noreferrer noopener\" aria-label=\"How to Wireframe + Examples (opens in a new tab)\" href=\"http:\/\/kaceymorrow.com\/361\/wp-content\/uploads\/2022\/04\/Wireframing.pdf\" target=\"_blank\">How to Wireframe + Examples<\/a><\/strong><\/p>\n\n\n\n<hr class=\"wp-block-separator is-style-wide\"\/>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>How to create wireframes<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>Sketch several variations for each screen type, so you know you&#8217;ve exhausted all ideas.<ul><li>For example, try different ways of laying out information for a home screen, browse screen, profile screen and so forth.\u00a0<\/li><li>For example, do you want a list view or grid view for a set of information? Do you want icons or text or both in different places? Do you want a scroll down or a horizontal swipe gestural interface in various places? Do you want a circle shape cropping a photo or do you want a square? What is the hierarchy of information on the various screens?<\/li><li>How can you keep it cohesive across the different screens once you zero in on what organization is working best?<\/li><\/ul><\/li><li>Sketch out the basic placement of content.<ul><li>Just use different monochromatic shades of boxes for sectioning information.<\/li><li>Use lines for text.<\/li><li>For images use a box with an &#8220;X&#8221; across it.\u00a0<\/li><\/ul><\/li><li>Choose between two different wireframe types:<ul><li>You can do lo-fidelity sketch wireframes on paper, whiteboard, or Procreate.<\/li><li>or<\/li><li>You can create mid-fidelity wireframes on the computer &#8211; using whatever software you prefer. (Figma or Adobe XD is recommended since you will be using it on the next step, lo-fi prototyping)<\/li><\/ul><\/li><li>See examples of wireframe types above and look at inspiration of layout patterns to give you different ideas of how to layout various types of screens\/info.\u00a0<\/li><\/ul>\n\n\n\n<hr class=\"wp-block-separator is-style-wide\"\/>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Optional: Crazy 8s Quick Iteration Exercise<\/strong><\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong><a href=\"http:\/\/kaceymorrow.com\/361\/wp-content\/uploads\/2022\/04\/Crazy-8-Sprint-Examples.pdf\" target=\"_blank\" rel=\"noreferrer noopener\" aria-label=\"Examples of Crazy 8s (opens in a new tab)\">Examples of Crazy 8s<\/a><\/strong><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Crazy 8s is an activity where you get 8 minutes to come up with 8 different layout ideas for the same screen. The goal is to be fast in getting several variations out without worrying much about the details. At the end of 8 minutes, decide on the layouts worth exploring and moving forward with into the wireframing and prototyping tasks. <\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Steps for Crazy 8s:<\/strong><\/p>\n\n\n\n<ol class=\"wp-block-list\"><li>\u00a0Pick one screen in your product for which you want to explore several layout variations.<ul><li>For example, it could be something like a home screen, profile screen, browse screen, or checkout screen, and so on?<\/li><li>Go with the one that has the most content on it, that you can rearrange and try different layouts.\u00a0<\/li><\/ul><\/li><li>Set up your Crazy 8.<ul><li>You can either fold a piece of letter-sized paper into 8 quadrants and then draw in each quadrant and take a photo of it.<\/li><li><strong>or<\/strong><\/li><li>You can go to\u00a0<a rel=\"noreferrer noopener\" href=\"https:\/\/conceptboard.com\/blog\/crazy-8s-brainstorming-template\/\" target=\"_blank\">Conceptboard<\/a>, and click on &#8220;Use Template&#8221; button on the left side of the webpage. This will take you to a Crazy 8 digital setup that you can draw on. Once you are done, you can go to &#8220;Board&#8221; in the top menu and choose &#8220;Export board&#8221; and then &#8220;Export board as PDF.&#8221;\u00a0<\/li><\/ul><\/li><li>Set a timer to go off every minute for 8 minutes.<ul><li>You get one minute per sketch.<\/li><li>And one rectangle per sketch.\u00a0<\/li><\/ul><\/li><li>When you are done, circle your favorite(s) that you might consider moving forward with into the wireframing and prototyping tasks. <\/li><\/ol>\n\n\n\n<hr class=\"wp-block-separator is-style-wide\"\/>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Inspiration\/Resources for Layout Patterns<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\"><li><a rel=\"noreferrer noopener\" href=\"https:\/\/uxdesign.cc\/mobile-ui-13-basic-patterns-of-app-ui-design-to-know-about-d3f7c6176f13\" target=\"_blank\">13 basic mobile UI patterns&nbsp;(Links to an external site.)<\/a><\/li><li><a rel=\"noreferrer noopener\" href=\"https:\/\/iospirations.com\/ios-app-ui\" target=\"_blank\">iospirations&nbsp;(Links to an external site.)<\/a><\/li><li><a rel=\"noreferrer noopener\" href=\"https:\/\/screenlane.com\/?ref=uimovement\" target=\"_blank\">screenlane&nbsp;(Links to an external site.)<\/a><\/li><li><a rel=\"noreferrer noopener\" href=\"https:\/\/mobile-patterns.com\/search\/patterns?q=home:tag\" target=\"_blank\">mobile-patterns&nbsp;(Links to an external site.)<\/a><\/li><li><a rel=\"noreferrer noopener\" href=\"https:\/\/mobbin.design\/browse\/ios\/apps\" target=\"_blank\">mobbin&nbsp;(Links to an external site.)<\/a><\/li><li><a rel=\"noreferrer noopener\" href=\"http:\/\/ui-patterns.com\/patterns\" target=\"_blank\">ui-patterns<\/a><\/li><\/ul>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Other wireframe examples online:<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\"><li><a href=\"https:\/\/wireframes.tumblr.com\/\" target=\"_blank\" rel=\"noreferrer noopener\">I Heart Wireframes&nbsp;(Links to an external site.)<\/a><\/li><li><a href=\"http:\/\/www.wireframeshowcase.com\/\" target=\"_blank\" rel=\"noreferrer noopener\">Wireframe Showcase&nbsp;(Links to an external site.)<\/a><\/li><li><a href=\"https:\/\/www.justinmind.com\/blog\/20-inspiring-web-and-mobile-wireframe-and-prototype-examples\/\" target=\"_blank\" rel=\"noreferrer noopener\">40 Inspiring Web and Mobile App Wireframe Examples<\/a><\/li><\/ul>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>How to Turn In:<\/strong><\/p>\n\n\n\n<ol class=\"wp-block-list\"><li><strong>Wireframe sketches for various screen types in your user flow.<\/strong>&nbsp;Sketch several variations for each screen type to explore different layout ideas. You are welcome to use the Crazy 8s method. &nbsp;<\/li><li>You can use a sketchbook or whiteboard and take a high quality photo or scan of them. OR&nbsp;you can create them in a tool like Figma, Figjam, Invision Freehand, OR&nbsp;whatever software you feel most comfortable in.<\/li><\/ol>\n","protected":false},"excerpt":{"rendered":"<p>PDF: How to Wireframe + Examples How to create wireframes Sketch several variations for each screen type, so you know you&#8217;ve exhausted all ideas. For example, try different ways of laying out information for a home screen, browse screen, profile screen and so forth.\u00a0 For example, do you want a list view or grid view [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-2974","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"http:\/\/kaceymorrow.com\/361\/wp-json\/wp\/v2\/pages\/2974","targetHints":{"allow":["GET"]}}],"collection":[{"href":"http:\/\/kaceymorrow.com\/361\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"http:\/\/kaceymorrow.com\/361\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"http:\/\/kaceymorrow.com\/361\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/kaceymorrow.com\/361\/wp-json\/wp\/v2\/comments?post=2974"}],"version-history":[{"count":11,"href":"http:\/\/kaceymorrow.com\/361\/wp-json\/wp\/v2\/pages\/2974\/revisions"}],"predecessor-version":[{"id":3324,"href":"http:\/\/kaceymorrow.com\/361\/wp-json\/wp\/v2\/pages\/2974\/revisions\/3324"}],"wp:attachment":[{"href":"http:\/\/kaceymorrow.com\/361\/wp-json\/wp\/v2\/media?parent=2974"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}