{"id":64638,"date":"2016-04-14T00:00:00","date_gmt":"2016-04-14T04:00:00","guid":{"rendered":"https:\/\/www.gticanada.com\/website-prototyping-concept-and-iteration\/"},"modified":"2016-04-14T00:00:00","modified_gmt":"2016-04-14T04:00:00","slug":"website-prototyping-concept-and-iteration","status":"publish","type":"post","link":"https:\/\/www.gticanada.com\/en\/blog\/website-prototyping-concept-and-iteration\/","title":{"rendered":"Website Prototyping: Concept and Iteration"},"content":{"rendered":"<p>Website prototyping has become an essential part of web development process in the last couple of years. There are now hundreds of prototyping apps and services out there to choose from. Some of them are very easy to use and allow you to have a quick prototype within an hour. Others require a bit of learning but are however providing solutions to more complex problems.<\/p>\n<p>There are 3 main benefits to prototyping in the first place:<\/p>\n<ul>\n<li>Testing the idea in the earlier stage allows to correct the direction if needed<\/li>\n<li>Promotes collaboration by making designers, UX designers and developers work together<\/li>\n<li>Helps selling an idea or a product to a client.<\/li>\n<\/ul>\n<p>In this article I will be using <strong>Axure<\/strong>, one of the most used wireframing and prototyping software. It\u2019s known to have a steeper learning curve compared to other software but it can do a lot, once you get the hang of it.<\/p>\n<p>&nbsp;<\/p>\n<h3><strong>Let\u2019s concept<\/strong><\/h3>\n<p>For the purpose of this article, I created a concept for a virtual app that lists all the nearby national parks. When developing an app, it\u2019s very important to have a clear goal of the product and create a user scenario.<\/p>\n<p>The idea of this virtual app is that it detects user\u2019s <strong>location<\/strong> and lists all the national parks <strong>nearby<\/strong>, and then you can also <strong>search<\/strong> by the <strong>activities<\/strong> you are interested in. It also allows you to save your <strong>search settings <\/strong>and your <strong>favourite destinations<\/strong>. It would be very useful for my summer!<\/p>\n<p>Before making the visual design, I made an old-fashioned-hand-drawn-wireframe. Yeah it\u2019s messy but it does the job. It doesn\u2019t have to be fancy, but never ever skip this process though! This step is essential to turn your ideas into real life application.<\/p>\n<p><img fetchpriority=\"high\" decoding=\"async\" class=\"aligncenter size-full wp-image-1581\" src=\"https:\/\/www.gticanada.com\/wp-content\/uploads\/2021\/11\/sketch.jpg\" alt=\"sketch\" width=\"1000\" height=\"588\" \/><\/p>\n<p>Wireframes allow you to quickly visualize the user interface and user flow. It\u2019s kind of like a map, in a way that it shows the relations between the pages and their content. In the wireframe, the links between all key elements should be explained.<\/p>\n<p>So in this prototype, I\u2019m making 3 pages and the menu. It lists the elements on the page and what it does when the user clicks on each element.<\/p>\n<p>First page lists all the nearby parks. When you click on one park, it will send you to the specific page of the park selected. On this second page, you can view<\/p>\n<ol>\n<li>Available activities,<\/li>\n<li>Photos<\/li>\n<li>Reviews<\/li>\n<li>Direction to the park (link to mapping app such as google maps, with the destination set to the selected national park)<\/li>\n<\/ol>\n<p>Since the scenario is all thought out, let\u2019s start making the visual elements based on this wireframe.<\/p>\n<p><strong><img decoding=\"async\" class=\"size-full wp-image-1597 alignright\" src=\"https:\/\/www.gticanada.com\/wp-content\/uploads\/2021\/11\/nomad_1.png\" alt=\"nomad_1\" width=\"603\" height=\"502\" \/><img decoding=\"async\" class=\"size-full wp-image-1598 alignright\" src=\"https:\/\/www.gticanada.com\/wp-content\/uploads\/2021\/11\/nomad_2.png\" alt=\"nomad_2\" width=\"601\" height=\"499\" \/><\/strong><\/p>\n<p>&nbsp;<\/p>\n<p>Voila! Since this article is about prototyping, I will not talk too much about design but just keep in mind that you want everything to be as <strong>simple<\/strong> and<strong> self-explanatory<\/strong> as possible. Don\u2019t try to be crazy creative when it comes to designing navigations, just make it as dummy proof as possible. <strong>People just want their apps to work without having to think further.<\/strong><\/p>\n<p>Once you got the visuals, you can import them in <strong>Axure<\/strong>, and start adding <strong>interactions<\/strong>.<\/p>\n<p>&nbsp;<\/p>\n<h3><strong>Changes ahead!<\/strong><\/h3>\n<p>In the process of making wireframes, I already changed several elements. I added the favourite star icon on the listing and individual park pages, as bookmarking their favourite parks is <strong>the main feature people want to use in this app<\/strong>. You can always google national parks and find the information online, but this app allows you to make <strong>a list of your favourite parks which can be handy<\/strong>. I also removed the login process which was present as a first screen, as you don\u2019t need users to create an account, until they wish to use the same app on other devices.<\/p>\n<p>And that is how it\u2019s supposed to go; be light weight and flexible to necessary changes. <strong>Iteration<\/strong> is one of the most important factors in UX design. The whole point of making a prototype is to actually test your ideas, and allow you to correct quickly if something you thought was a great idea turns out to be not so practical after all (happens more often than you\u2019d think).<\/p>\n<p>By prototyping, you can save a lot of time and energy. It is a lot more costly to find problems after you already started the development process, since you have to review the design and even the concept depending on the issue, than finding out a problem in the prototyping phase and correcting it right away. The truth is, prototyping is an easy and quick way to test the user workflow and design, to optimize time spent in development.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Website prototyping has become an essential part of web development process in the last couple of years. There are now [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":49789,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"site-sidebar-layout":"default","site-content-layout":"","ast-site-content-layout":"","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"categories":[223,222],"tags":[],"class_list":["post-64638","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-ecosysteme-numerique-research","category-research"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v24.5 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Website Prototyping: Concept and Iteration | GTI Canada<\/title>\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.gticanada.com\/en\/blog\/website-prototyping-concept-and-iteration\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Website Prototyping: Concept and Iteration | GTI Canada\" \/>\n<meta property=\"og:description\" content=\"Website prototyping has become an essential part of web development process in the last couple of years. There are now [&hellip;]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.gticanada.com\/en\/blog\/website-prototyping-concept-and-iteration\/\" \/>\n<meta property=\"og:site_name\" content=\"GTI Canada\" \/>\n<meta property=\"article:published_time\" content=\"2016-04-14T04:00:00+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.gticanada.com\/wp-content\/uploads\/2021\/11\/AX_1258x323-1.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1258\" \/>\n\t<meta property=\"og:image:height\" content=\"323\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"site_gti_canada\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"site_gti_canada\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"4 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/www.gticanada.com\/en\/blog\/website-prototyping-concept-and-iteration\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.gticanada.com\/en\/blog\/website-prototyping-concept-and-iteration\/\"},\"author\":{\"name\":\"site_gti_canada\",\"@id\":\"https:\/\/www.gticanada.com\/en\/#\/schema\/person\/e92e9e2bebb1051773591f91b523d27c\"},\"headline\":\"Website Prototyping: Concept and Iteration\",\"datePublished\":\"2016-04-14T04:00:00+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.gticanada.com\/en\/blog\/website-prototyping-concept-and-iteration\/\"},\"wordCount\":787,\"publisher\":{\"@id\":\"https:\/\/www.gticanada.com\/en\/#organization\"},\"image\":{\"@id\":\"https:\/\/www.gticanada.com\/en\/blog\/website-prototyping-concept-and-iteration\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.gticanada.com\/wp-content\/uploads\/2021\/11\/AX_1258x323-1.jpg\",\"articleSection\":[\"Digital Transformation Research\",\"Research\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.gticanada.com\/en\/blog\/website-prototyping-concept-and-iteration\/\",\"url\":\"https:\/\/www.gticanada.com\/en\/blog\/website-prototyping-concept-and-iteration\/\",\"name\":\"Website Prototyping: Concept and Iteration | GTI Canada\",\"isPartOf\":{\"@id\":\"https:\/\/www.gticanada.com\/en\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.gticanada.com\/en\/blog\/website-prototyping-concept-and-iteration\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.gticanada.com\/en\/blog\/website-prototyping-concept-and-iteration\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.gticanada.com\/wp-content\/uploads\/2021\/11\/AX_1258x323-1.jpg\",\"datePublished\":\"2016-04-14T04:00:00+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/www.gticanada.com\/en\/blog\/website-prototyping-concept-and-iteration\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.gticanada.com\/en\/blog\/website-prototyping-concept-and-iteration\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.gticanada.com\/en\/blog\/website-prototyping-concept-and-iteration\/#primaryimage\",\"url\":\"https:\/\/www.gticanada.com\/wp-content\/uploads\/2021\/11\/AX_1258x323-1.jpg\",\"contentUrl\":\"https:\/\/www.gticanada.com\/wp-content\/uploads\/2021\/11\/AX_1258x323-1.jpg\",\"width\":1258,\"height\":323},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.gticanada.com\/en\/blog\/website-prototyping-concept-and-iteration\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.gticanada.com\/en\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Website Prototyping: Concept and Iteration\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.gticanada.com\/en\/#website\",\"url\":\"https:\/\/www.gticanada.com\/en\/\",\"name\":\"GTI Canada\",\"description\":\"Partenaire technologique fiable et flexible depuis 35 ans, nous privil\u00e9gions le sur-mesure pour nos solutions num\u00e9riques, logicielles, TI et pour nos services g\u00e9r\u00e9s.\",\"publisher\":{\"@id\":\"https:\/\/www.gticanada.com\/en\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.gticanada.com\/en\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/www.gticanada.com\/en\/#organization\",\"name\":\"GTI Canada\",\"url\":\"https:\/\/www.gticanada.com\/en\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.gticanada.com\/en\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/www.gticanada.com\/wp-content\/uploads\/2024\/08\/english.png\",\"contentUrl\":\"https:\/\/www.gticanada.com\/wp-content\/uploads\/2024\/08\/english.png\",\"width\":771,\"height\":334,\"caption\":\"GTI Canada\"},\"image\":{\"@id\":\"https:\/\/www.gticanada.com\/en\/#\/schema\/logo\/image\/\"}},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.gticanada.com\/en\/#\/schema\/person\/e92e9e2bebb1051773591f91b523d27c\",\"name\":\"site_gti_canada\",\"sameAs\":[\"https:\/\/www.gticanada.com\"],\"url\":\"https:\/\/www.gticanada.com\/en\/blogue\/author\/site_gti_canada\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Website Prototyping: Concept and Iteration | GTI Canada","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.gticanada.com\/en\/blog\/website-prototyping-concept-and-iteration\/","og_locale":"en_US","og_type":"article","og_title":"Website Prototyping: Concept and Iteration | GTI Canada","og_description":"Website prototyping has become an essential part of web development process in the last couple of years. There are now [&hellip;]","og_url":"https:\/\/www.gticanada.com\/en\/blog\/website-prototyping-concept-and-iteration\/","og_site_name":"GTI Canada","article_published_time":"2016-04-14T04:00:00+00:00","og_image":[{"width":1258,"height":323,"url":"https:\/\/www.gticanada.com\/wp-content\/uploads\/2021\/11\/AX_1258x323-1.jpg","type":"image\/jpeg"}],"author":"site_gti_canada","twitter_card":"summary_large_image","twitter_misc":{"Written by":"site_gti_canada","Est. reading time":"4 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.gticanada.com\/en\/blog\/website-prototyping-concept-and-iteration\/#article","isPartOf":{"@id":"https:\/\/www.gticanada.com\/en\/blog\/website-prototyping-concept-and-iteration\/"},"author":{"name":"site_gti_canada","@id":"https:\/\/www.gticanada.com\/en\/#\/schema\/person\/e92e9e2bebb1051773591f91b523d27c"},"headline":"Website Prototyping: Concept and Iteration","datePublished":"2016-04-14T04:00:00+00:00","mainEntityOfPage":{"@id":"https:\/\/www.gticanada.com\/en\/blog\/website-prototyping-concept-and-iteration\/"},"wordCount":787,"publisher":{"@id":"https:\/\/www.gticanada.com\/en\/#organization"},"image":{"@id":"https:\/\/www.gticanada.com\/en\/blog\/website-prototyping-concept-and-iteration\/#primaryimage"},"thumbnailUrl":"https:\/\/www.gticanada.com\/wp-content\/uploads\/2021\/11\/AX_1258x323-1.jpg","articleSection":["Digital Transformation Research","Research"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/www.gticanada.com\/en\/blog\/website-prototyping-concept-and-iteration\/","url":"https:\/\/www.gticanada.com\/en\/blog\/website-prototyping-concept-and-iteration\/","name":"Website Prototyping: Concept and Iteration | GTI Canada","isPartOf":{"@id":"https:\/\/www.gticanada.com\/en\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.gticanada.com\/en\/blog\/website-prototyping-concept-and-iteration\/#primaryimage"},"image":{"@id":"https:\/\/www.gticanada.com\/en\/blog\/website-prototyping-concept-and-iteration\/#primaryimage"},"thumbnailUrl":"https:\/\/www.gticanada.com\/wp-content\/uploads\/2021\/11\/AX_1258x323-1.jpg","datePublished":"2016-04-14T04:00:00+00:00","breadcrumb":{"@id":"https:\/\/www.gticanada.com\/en\/blog\/website-prototyping-concept-and-iteration\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.gticanada.com\/en\/blog\/website-prototyping-concept-and-iteration\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.gticanada.com\/en\/blog\/website-prototyping-concept-and-iteration\/#primaryimage","url":"https:\/\/www.gticanada.com\/wp-content\/uploads\/2021\/11\/AX_1258x323-1.jpg","contentUrl":"https:\/\/www.gticanada.com\/wp-content\/uploads\/2021\/11\/AX_1258x323-1.jpg","width":1258,"height":323},{"@type":"BreadcrumbList","@id":"https:\/\/www.gticanada.com\/en\/blog\/website-prototyping-concept-and-iteration\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.gticanada.com\/en\/"},{"@type":"ListItem","position":2,"name":"Website Prototyping: Concept and Iteration"}]},{"@type":"WebSite","@id":"https:\/\/www.gticanada.com\/en\/#website","url":"https:\/\/www.gticanada.com\/en\/","name":"GTI Canada","description":"Partenaire technologique fiable et flexible depuis 35 ans, nous privil\u00e9gions le sur-mesure pour nos solutions num\u00e9riques, logicielles, TI et pour nos services g\u00e9r\u00e9s.","publisher":{"@id":"https:\/\/www.gticanada.com\/en\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.gticanada.com\/en\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.gticanada.com\/en\/#organization","name":"GTI Canada","url":"https:\/\/www.gticanada.com\/en\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.gticanada.com\/en\/#\/schema\/logo\/image\/","url":"https:\/\/www.gticanada.com\/wp-content\/uploads\/2024\/08\/english.png","contentUrl":"https:\/\/www.gticanada.com\/wp-content\/uploads\/2024\/08\/english.png","width":771,"height":334,"caption":"GTI Canada"},"image":{"@id":"https:\/\/www.gticanada.com\/en\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":"https:\/\/www.gticanada.com\/en\/#\/schema\/person\/e92e9e2bebb1051773591f91b523d27c","name":"site_gti_canada","sameAs":["https:\/\/www.gticanada.com"],"url":"https:\/\/www.gticanada.com\/en\/blogue\/author\/site_gti_canada\/"}]}},"_links":{"self":[{"href":"https:\/\/www.gticanada.com\/en\/wp-json\/wp\/v2\/posts\/64638","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.gticanada.com\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.gticanada.com\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.gticanada.com\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.gticanada.com\/en\/wp-json\/wp\/v2\/comments?post=64638"}],"version-history":[{"count":0,"href":"https:\/\/www.gticanada.com\/en\/wp-json\/wp\/v2\/posts\/64638\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.gticanada.com\/en\/wp-json\/wp\/v2\/media\/49789"}],"wp:attachment":[{"href":"https:\/\/www.gticanada.com\/en\/wp-json\/wp\/v2\/media?parent=64638"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.gticanada.com\/en\/wp-json\/wp\/v2\/categories?post=64638"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.gticanada.com\/en\/wp-json\/wp\/v2\/tags?post=64638"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}