{"id":1940,"date":"2013-03-12T10:29:27","date_gmt":"2013-03-12T14:59:27","guid":{"rendered":"http:\/\/www.danielpradilla.info\/blog\/?p=1940"},"modified":"2015-04-07T16:51:09","modified_gmt":"2015-04-07T21:21:09","slug":"app-website-wireframe","status":"publish","type":"post","link":"https:\/\/www.danielpradilla.info\/blog\/app-website-wireframe\/","title":{"rendered":"How to make an app or website skeleton"},"content":{"rendered":"<figure id=\"attachment_1633\" aria-describedby=\"caption-attachment-1633\" style=\"width: 300px\" class=\"wp-caption aligncenter\"><a href=\"http:\/\/www.guuui.com\/issues\/02_07.php\"><img loading=\"lazy\" decoding=\"async\" data-attachment-id=\"1633\" data-permalink=\"https:\/\/www.danielpradilla.info\/blog\/como-hacer-esqueleto-de-una-aplicacion-una-pagina-web\/screen-shot-2011-04-18-at-11-48-38-am\/\" data-orig-file=\"https:\/\/www.danielpradilla.info\/blog\/wp-content\/uploads\/2011\/04\/Screen-shot-2011-04-18-at-11.48.38-AM.png\" data-orig-size=\"758,622\" data-comments-opened=\"1\" data-image-meta=\"{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;}\" data-image-title=\"esqueleto de un sitio web\" data-image-description=\"\" data-image-caption=\"&lt;p&gt;esqueleto de un sitio web&lt;\/p&gt;\n\" data-medium-file=\"https:\/\/www.danielpradilla.info\/blog\/wp-content\/uploads\/2011\/04\/Screen-shot-2011-04-18-at-11.48.38-AM-300x246.png\" data-large-file=\"https:\/\/www.danielpradilla.info\/blog\/wp-content\/uploads\/2011\/04\/Screen-shot-2011-04-18-at-11.48.38-AM.png\" class=\"size-medium wp-image-1633\" title=\"esqueleto de un sitio web\" alt=\"\" src=\"http:\/\/www.danielpradilla.info\/blog\/wp-content\/uploads\/2011\/04\/Screen-shot-2011-04-18-at-11.48.38-AM-300x246.png\" width=\"300\" height=\"246\" srcset=\"https:\/\/www.danielpradilla.info\/blog\/wp-content\/uploads\/2011\/04\/Screen-shot-2011-04-18-at-11.48.38-AM-300x246.png 300w, https:\/\/www.danielpradilla.info\/blog\/wp-content\/uploads\/2011\/04\/Screen-shot-2011-04-18-at-11.48.38-AM.png 758w\" sizes=\"auto, (max-width: 300px) 100vw, 300px\" \/><\/a><figcaption id=\"caption-attachment-1633\" class=\"wp-caption-text\">website wireframe<\/figcaption><\/figure>\n<ol>\n<li>The client requests a new design<\/li>\n<li>You discuss what the new design should include.\n<ul>\n<li>Best case scenario: you prepare a specifications document that no one reads.<\/li>\n<\/ul>\n<\/li>\n<li>You do your best effort<\/li>\n<li>The client suggests \u00e2\u20ac\u0153minor changes\u00e2\u20ac\u009d.<\/li>\n<li>You both realize that some contents and key design pieces are missing<\/li>\n<li>You lose 3 months of your life.<\/li>\n<\/ol>\n<p>If this has ever happened to you, by now you should know \u00e2\u20ac\u201cor not\u00e2\u20ac\u201c that creating a skeleton or wireframe is one of the first steps for designing a webpage or app.<\/p>\n<p>Most wireframes don&#8217;t include graphic elements because the goal is <b>to provide the client with an idea of the structure and hierarchy<\/b> in order to identify the contents (text, data, images) that are missing and the potential problem areas.<\/p>\n<p>Furthermore, a skeleton allows you <b>to identify and mark design \u00e2\u20ac\u0153areas\u00e2\u20ac\u009d.<\/b>\u00a0 This way, phrases such as \u00e2\u20ac\u0153remember to send me the text that goes under the image located between the video and the form\u00e2\u20ac\u009d, becomes \u00a0\u00e2\u20ac\u0153remember to send me the text that goes on A7\u00e2\u20ac\u009d.<br \/>\n&#8212;<\/p>\n<h2>Tools for wireframing<\/h2>\n<p>I use <a href=\"http:\/\/www.omnigroup.com\/products\/omnigraffle\/\" target=\"_blank\">Omnigraffle for mac<\/a>\u00a0along with the excellent <a href=\"http:\/\/konigi.com\/tools\/omnigraffle-wireframe-stencils\" target=\"_blank\">Konigi templates<\/a>. Just to give you an idea of what you can do with both, check out this video:<\/p>\n<p><span class=\"embed-youtube\" style=\"text-align:center; display: block;\"><iframe loading=\"lazy\" class=\"youtube-player\" width=\"750\" height=\"422\" src=\"https:\/\/www.youtube.com\/embed\/QSxF-pISj1w?version=3&#038;rel=1&#038;showsearch=0&#038;showinfo=1&#038;iv_load_policy=1&#038;fs=1&#038;hl=en-US&#038;autohide=2&#038;wmode=transparent\" allowfullscreen=\"true\" style=\"border:0;\" sandbox=\"allow-scripts allow-same-origin allow-popups allow-presentation allow-popups-to-escape-sandbox\"><\/iframe><\/span><\/p>\n<p>The user-interface expert, Henrik Olsen, has an <a href=\"http:\/\/www.guuui.com\/issues\/02_07.php\" target=\"_blank\">excellent template for Visio<\/a>\u00a0in his site. This template offers the additional benefit of having a sketch mode where elements appear as if drawn by hand.<\/p>\n<p>According to Aaron Travis, another user-interface expert, offering <a href=\"http:\/\/www.boxesandarrows.com\/view\/sketchy-wireframes\" target=\"_blank\">computer-generated sketches<\/a>, <b>decreases the barriers for client participation while \u00e2\u20ac\u0153softening\u00e2\u20ac\u009d the criticism and decreasing the tension<\/b>. By offering a hand-drawn diagram, all involved parties can understand that it&#8217;s a work in progress and that this is the time to suggest changes.<\/p>\n<figure id=\"attachment_1635\" aria-describedby=\"caption-attachment-1635\" style=\"width: 300px\" class=\"wp-caption aligncenter\"><a href=\"http:\/\/www.boxesandarrows.com\/view\/sketchy-wireframes\"><img loading=\"lazy\" decoding=\"async\" data-attachment-id=\"1635\" data-permalink=\"https:\/\/www.danielpradilla.info\/blog\/como-hacer-esqueleto-de-una-aplicacion-una-pagina-web\/2_comparison\/\" data-orig-file=\"https:\/\/www.danielpradilla.info\/blog\/wp-content\/uploads\/2011\/04\/2_Comparison.gif\" data-orig-size=\"700,588\" data-comments-opened=\"1\" data-image-meta=\"{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;}\" data-image-title=\"esqueleto tradicional vs. sketch\" data-image-description=\"\" data-image-caption=\"\" data-medium-file=\"https:\/\/www.danielpradilla.info\/blog\/wp-content\/uploads\/2011\/04\/2_Comparison-300x252.gif\" data-large-file=\"https:\/\/www.danielpradilla.info\/blog\/wp-content\/uploads\/2011\/04\/2_Comparison.gif\" class=\"size-medium wp-image-1635\" title=\"esqueleto tradicional vs. sketch\" alt=\"\" src=\"http:\/\/www.danielpradilla.info\/blog\/wp-content\/uploads\/2011\/04\/2_Comparison-300x252.gif\" width=\"300\" height=\"252\" srcset=\"https:\/\/www.danielpradilla.info\/blog\/wp-content\/uploads\/2011\/04\/2_Comparison-300x252.gif 300w, https:\/\/www.danielpradilla.info\/blog\/wp-content\/uploads\/2011\/04\/2_Comparison.gif 700w\" sizes=\"auto, (max-width: 300px) 100vw, 300px\" \/><\/a><figcaption id=\"caption-attachment-1635\" class=\"wp-caption-text\">traditional wireframe vs. &#8220;sketchy&#8221;<\/figcaption><\/figure>\n<p style=\"text-align: left;\">And this leads me to the tool that I&#8217;ve been trying for the last few days (and partly the reason for this post):\u00a0<a href=\"http:\/\/balsamiq.com\/\" target=\"_blank\">Balsamiq Mockups<\/a>:\u00a0a web wireframing app that works on PC, Mac and Linux.<\/p>\n<p><span class=\"embed-youtube\" style=\"text-align:center; display: block;\"><iframe loading=\"lazy\" class=\"youtube-player\" width=\"750\" height=\"422\" src=\"https:\/\/www.youtube.com\/embed\/70hfU7_95Gw?version=3&#038;rel=1&#038;showsearch=0&#038;showinfo=1&#038;iv_load_policy=1&#038;fs=1&#038;hl=en-US&#038;autohide=2&#038;wmode=transparent\" allowfullscreen=\"true\" style=\"border:0;\" sandbox=\"allow-scripts allow-same-origin allow-popups allow-presentation allow-popups-to-escape-sandbox\"><\/iframe><\/span><\/p>\n<p>Mockups is integrated with Dropbox\u00a0so <b>you can share progress with your clients while reviewing minor changes and during long distance meetings<\/b>.<\/p>\n<p>Also, take a look at their website, the small and reliable company image is very well done and the slogan is one of the most honest slogans I&#8217;ve read in a long time:<\/p>\n<blockquote>\n<p style=\"text-align: left;\"><strong>Balsamiq<\/strong>\u00a0is a small group of\u00a0passionate<br \/>\nindividuals\u00a0who believe work should be\u00a0fun<br \/>\nand that\u00a0life&#8217;s too short for bad software.<\/p>\n<\/blockquote>\n<p>(None of that &#8220;we&#8217;re a leading company in blah blah blah&#8221;)<\/p>\n<p style=\"text-align: left;\">&#8212;<\/p>\n<p>&nbsp;<\/p>\n<h2><b>However, the wireframe is not everything you need to be happy<\/b><\/h2>\n<p>Every project needs some sort of guide. When you analyze the skeleton with a client, it&#8217;s important that you agree on not discussing the graphic elements, instead that <b>you&#8217;ll talk about the structure, hierarchy and requirements.<\/b><\/p>\n<p><a href=\"http:\/\/themetaq.com\/articles\/wireframe-is-worth-a-thousand-spreadsheets-wireframing-101\" target=\"_blank\">Susan Snipes makes an excellent summary<\/a>\u00a0of what each group (clients, designers and developers) should look for in a skeleton. For instance, if it&#8217;s a website, <b>you should encourage the client to ask the following questions<\/b>:<\/p>\n<ol>\n<li>What content is missing? What content doesn&#8217;t need to be on the page?<\/li>\n<li>Are the most important features clearly visible and easy to spot on the page? (Tip: On first glance of a page, what is the first thing you see?)<\/li>\n<li>Do you know what you can do on specific pages?<\/li>\n<li>Do you know where you are on the site? Can you figure out how to get to another page of your choice?<\/li>\n<li>Is it clear how to do your key actions (such as contact the company, or download a product manual)?<\/li>\n<\/ol>\n<p>Once you&#8217;ve all agreed with the structure, you can discuss the graphic part, making sure you don&#8217;t reach the extremes\u00a0<a href=\"http:\/\/theoatmeal.com\/comics\/design_changes\" target=\"_blank\">of this The Oatmeal strip<\/a>:<br \/>\n<a href=\"http:\/\/theoatmeal.com\/comics\/design_changes\"><img loading=\"lazy\" decoding=\"async\" data-attachment-id=\"1634\" data-permalink=\"https:\/\/www.danielpradilla.info\/blog\/como-hacer-esqueleto-de-una-aplicacion-una-pagina-web\/attachment\/12\/\" data-orig-file=\"https:\/\/www.danielpradilla.info\/blog\/wp-content\/uploads\/2011\/04\/12.png\" data-orig-size=\"479,751\" data-comments-opened=\"1\" data-image-meta=\"{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;}\" data-image-title=\"12\" data-image-description=\"\" data-image-caption=\"\" data-medium-file=\"https:\/\/www.danielpradilla.info\/blog\/wp-content\/uploads\/2011\/04\/12-191x300.png\" data-large-file=\"https:\/\/www.danielpradilla.info\/blog\/wp-content\/uploads\/2011\/04\/12.png\" class=\"aligncenter size-full wp-image-1634\" title=\"12\" alt=\"\" src=\"http:\/\/www.danielpradilla.info\/blog\/wp-content\/uploads\/2011\/04\/12.png\" width=\"479\" height=\"751\" srcset=\"https:\/\/www.danielpradilla.info\/blog\/wp-content\/uploads\/2011\/04\/12.png 479w, https:\/\/www.danielpradilla.info\/blog\/wp-content\/uploads\/2011\/04\/12-191x300.png 191w\" sizes=\"auto, (max-width: 479px) 100vw, 479px\" \/><\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>The client requests a new design You discuss what the new design should include. Best case scenario: you prepare a specifications document that no one reads. You do your best effort The client suggests \u00e2\u20ac\u0153minor changes\u00e2\u20ac\u009d. You both realize that some contents and key design pieces are missing You lose 3 months of your life.&hellip; <a class=\"more-link\" href=\"https:\/\/www.danielpradilla.info\/blog\/app-website-wireframe\/\">Continue reading <span class=\"screen-reader-text\">How to make an app or website skeleton<\/span><\/a><\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"jetpack_post_was_ever_published":false,"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[172,331],"tags":[],"class_list":["post-1940","post","type-post","status-publish","format-standard","hentry","category-projectmanagement-en","category-software-development-en-en","entry"],"aioseo_notices":[],"jetpack_featured_media_url":"","jetpack_shortlink":"https:\/\/wp.me\/p1tlzy-vi","jetpack_sharing_enabled":true,"jetpack-related-posts":[{"id":1913,"url":"https:\/\/www.danielpradilla.info\/blog\/how-to-organize-yourself-find-time-to-work-and-be-happy-in-the-process\/","url_meta":{"origin":1940,"position":0},"title":"How to organize yourself, find time to work and be happy in the process","author":"Daniel Pradilla","date":"04\/02\/2013","format":false,"excerpt":"This article belongs to the\u00a0telecommuting and geographical independence\u00a0series. It doesn't matter what your job is about, the routine is the same every day and it starts early in the morning: emails, news, events, requests and if you use a computer to work, the situation is even worse: Twitter, Facebook and\u2026","rel":"","context":"In &quot;Lifestyle&quot;","block_context":{"text":"Lifestyle","link":"https:\/\/www.danielpradilla.info\/blog\/category\/lifestyle\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/www.afinidades.org\/wp-content\/uploads\/2010\/12\/to-do-list-nothing1.jpeg?resize=350%2C200","width":350,"height":200},"classes":[]},{"id":1893,"url":"https:\/\/www.danielpradilla.info\/blog\/nterface-design\/","url_meta":{"origin":1940,"position":1},"title":"Stop punishing your users and learn some design fundamentals","author":"Daniel Pradilla","date":"14\/01\/2013","format":false,"excerpt":"One thing that never ceases to amaze me is how bad in-house enterprise applications look and behave: clashing color combinations, buttons that don't respond to clicks, messy forms, elements that look like links but aren't, inconsistent non-standard controls, no user feedback whatsoever, ugly reports, you know the drill. It's even\u2026","rel":"","context":"In &quot;Best of&quot;","block_context":{"text":"Best of","link":"https:\/\/www.danielpradilla.info\/blog\/category\/bestof\/"},"img":{"alt_text":"usability_testing","src":"https:\/\/i0.wp.com\/www.danielpradilla.info\/blog\/wp-content\/uploads\/2013\/01\/usability_testing.jpeg?resize=350%2C200","width":350,"height":200},"classes":[]},{"id":1995,"url":"https:\/\/www.danielpradilla.info\/blog\/lotus-notes-8-mountain-lion-mavericks\/","url_meta":{"origin":1940,"position":2},"title":"How to install Lotus Notes 8.x on Mountain Lion and Mavericks","author":"Daniel Pradilla","date":"09\/09\/2013","format":false,"excerpt":"Have you tried installing the Lotus Notes 8.x client on your Mac with Mountain Lion or Mavericks, and failed? Claudio has an easy-to-follow solution for you. \u00a0","rel":"","context":"In &quot;Lifestyle&quot;","block_context":{"text":"Lifestyle","link":"https:\/\/www.danielpradilla.info\/blog\/category\/lifestyle\/"},"img":{"alt_text":"LN-error-msg","src":"https:\/\/i0.wp.com\/www.danielpradilla.info\/blog\/wp-content\/uploads\/2013\/09\/LN-error-msg.jpg?resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/www.danielpradilla.info\/blog\/wp-content\/uploads\/2013\/09\/LN-error-msg.jpg?resize=350%2C200 1x, https:\/\/i0.wp.com\/www.danielpradilla.info\/blog\/wp-content\/uploads\/2013\/09\/LN-error-msg.jpg?resize=525%2C300 1.5x"},"classes":[]},{"id":1833,"url":"https:\/\/www.danielpradilla.info\/blog\/market-yourself-in-15-seconds\/","url_meta":{"origin":1940,"position":3},"title":"How to market yourself in 15 seconds","author":"Daniel Pradilla","date":"12\/12\/2012","format":false,"excerpt":"How to Market Yourself in 15 Seconds Almost all of the \u00e2\u20ac\u0153productive\u00e2\u20ac\u009d things I've done in my life (software, books, web sites, literary events), have resulted from a referral. Someone referred me, gave out my number or email. In other words, my marketing efforts are poor to nil. For this,\u2026","rel":"","context":"In &quot;Best of&quot;","block_context":{"text":"Best of","link":"https:\/\/www.danielpradilla.info\/blog\/category\/bestof\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/www.danielpradilla.info\/blog\/wp-content\/uploads\/2010\/10\/15-Second-Cover.jpg?resize=350%2C200","width":350,"height":200},"classes":[]},{"id":2242,"url":"https:\/\/www.danielpradilla.info\/blog\/getting-ip-location-information-with-angular-7\/","url_meta":{"origin":1940,"position":4},"title":"Getting IP location information with Angular 7","author":"Daniel Pradilla","date":"01\/11\/2018","format":false,"excerpt":"Using Angular Maps Components and a new service called ipapi, you will be able to quickly put together something that will allow you to get IP information from a client and put it on a map. Angular Maps Components is really great, and the setup with ipapi is a no-brainer\u2026","rel":"","context":"In &quot;Software Dev.&quot;","block_context":{"text":"Software Dev.","link":"https:\/\/www.danielpradilla.info\/blog\/category\/software-development-en-en\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/www.danielpradilla.info\/blog\/wp-content\/uploads\/2018\/11\/ipapi.jpg?resize=350%2C200&ssl=1","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/www.danielpradilla.info\/blog\/wp-content\/uploads\/2018\/11\/ipapi.jpg?resize=350%2C200&ssl=1 1x, https:\/\/i0.wp.com\/www.danielpradilla.info\/blog\/wp-content\/uploads\/2018\/11\/ipapi.jpg?resize=525%2C300&ssl=1 1.5x, https:\/\/i0.wp.com\/www.danielpradilla.info\/blog\/wp-content\/uploads\/2018\/11\/ipapi.jpg?resize=700%2C400&ssl=1 2x"},"classes":[]},{"id":2300,"url":"https:\/\/www.danielpradilla.info\/blog\/uploading-and-downloading-documents-from-amazon-s3-using-bash\/","url_meta":{"origin":1940,"position":5},"title":"Uploading and downloading documents from Amazon S3 using bash","author":"Daniel Pradilla","date":"12\/12\/2018","format":false,"excerpt":"You need to upload a file to S3 and cannot install new packages in the server, nor the s3 client tools. You only have bash, openssl and sed. Go. I found and adapted a script by\u00a0Viktor Szakats, that creates all the proper headers expected by the latest AWS API. I\u2026","rel":"","context":"In &quot;Software Dev.&quot;","block_context":{"text":"Software Dev.","link":"https:\/\/www.danielpradilla.info\/blog\/category\/software-development-en-en\/"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]}],"_links":{"self":[{"href":"https:\/\/www.danielpradilla.info\/blog\/wp-json\/wp\/v2\/posts\/1940","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.danielpradilla.info\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.danielpradilla.info\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.danielpradilla.info\/blog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/www.danielpradilla.info\/blog\/wp-json\/wp\/v2\/comments?post=1940"}],"version-history":[{"count":0,"href":"https:\/\/www.danielpradilla.info\/blog\/wp-json\/wp\/v2\/posts\/1940\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.danielpradilla.info\/blog\/wp-json\/wp\/v2\/media?parent=1940"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.danielpradilla.info\/blog\/wp-json\/wp\/v2\/categories?post=1940"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.danielpradilla.info\/blog\/wp-json\/wp\/v2\/tags?post=1940"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}