{"id":16802,"date":"2019-01-07T10:30:14","date_gmt":"2019-01-07T10:30:14","guid":{"rendered":"https:\/\/marvel7077.wpengine.com\/?p=16802"},"modified":"2019-01-07T10:30:26","modified_gmt":"2019-01-07T10:30:26","slug":"designing-scratch-blank-canvas","status":"publish","type":"post","link":"https:\/\/marvelapp.com\/blog\/designing-scratch-blank-canvas\/","title":{"rendered":"Designing From Scratch: A Blank\u00a0Canvas"},"content":{"rendered":"<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\"><strong class=\"c-slate lineHeight-l fontSize-l fontWeight-5 breakPointM-fontSize-xl breakPointM-lineHeight-xl\"><em>A blank canvas. it might as well be the devil himself.<\/em><\/strong><em> Complete nothingness. And it\u2019s not just on that page in front of you; it surrounds you and swallows you whole. There\u2019s only nothing, and it\u2019s everywhere. Ultimate freedom. No guidelines, no boundaries.<\/em><\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\"><em>\u2026 so, where do you start?!<\/em><\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\"><a class=\"link link--blue fontWeight-4\"href=\"https:\/\/marvel7077.wpengine.com\/wp-content\/uploads\/2019\/01\/1kD0J5VUJbLn8lQJp93sIKA.png\"><img decoding=\"async\" class=\"aligncenter size-full wp-image-6580\" src=\"https:\/\/marvel7077.wpengine.com\/wp-content\/uploads\/2019\/01\/1kD0J5VUJbLn8lQJp93sIKA.png\" title=\"\" alt=\"\" \/><\/a><\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\"><\/p>\n<h2 class=\"pageWrap pageWrap--s marginTop-xl marginBottom-l c-black lineHeight-xl fontSize-xl fontWeight-5 breakPointM-lineHeight-xxl breakPointM-fontSize-xxl\" style=\"margin-left: auto; margin-right: auto;\">1 ) Requirements<\/h2>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">The indexing of the requirements of your project can take many forms. And the amount of effort going into this phase is determined by the available resources and the scope of the project. <strong class=\"c-slate lineHeight-l fontSize-l fontWeight-5 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">It\u2019s vital to set a goal at the start of your process, even if this goal is a target in motion.<\/strong><\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">Examples of how to kick things off:<\/p>\n<ul class=\"pageWrap pageWrap--s list list--unordered marginBottom-l lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">\n<li>\n<strong class=\"c-slate lineHeight-l fontSize-l fontWeight-5 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">A quick chat with your aunt,<\/strong> about how she wants to put photos of her floofy poodle pup thing online<\/li>\n<li>\n<strong class=\"c-slate lineHeight-l fontSize-l fontWeight-5 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">A workshop with a group of engineers,<\/strong> to outline the data they want to exchange between two power plants<\/li>\n<li>\n<strong class=\"c-slate lineHeight-l fontSize-l fontWeight-5 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">A shower-thought,<\/strong> followed by a boring commute spent pondering the next move for your awesome little side-project<\/li>\n<\/ul>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">The point here isn\u2019t that you should always have a documented scope of the problem, because sometimes a general idea or direction is good enough.<\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\"><a class=\"link link--blue fontWeight-4\"href=\"https:\/\/marvel7077.wpengine.com\/wp-content\/uploads\/2019\/01\/1aXv25na2P0faIWT4raRqWA.png\"><img decoding=\"async\" class=\"aligncenter size-full wp-image-6580\" src=\"https:\/\/marvel7077.wpengine.com\/wp-content\/uploads\/2019\/01\/1aXv25na2P0faIWT4raRqWA.png\" title=\"\" alt=\"\" \/><\/a><\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\"><\/p>\n<h2 class=\"pageWrap pageWrap--s marginTop-xl marginBottom-l c-black lineHeight-xl fontSize-xl fontWeight-5 breakPointM-lineHeight-xxl breakPointM-fontSize-xxl\" style=\"margin-left: auto; margin-right: auto;\">2 )\u00a0Research<\/h2>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">As with the previous step, research can take many shapes. Sometimes you\u2019ll spend 5 minutes, sometimes you\u2019ll spend 5 weeks.<\/p>\n<ul class=\"pageWrap pageWrap--s list list--unordered marginBottom-l lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">\n<li>\n<strong class=\"c-slate lineHeight-l fontSize-l fontWeight-5 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">Hit up Google Images or Dribbble,<\/strong> <a class=\"link link--blue fontWeight-4\"href=\"https:\/\/www.google.com\/search?tbm=isch&q=dropdown+ui+flat&spell=1&sa=X&ved=0ahUKEwiR15P8h-LeAhUPiHAKHYTQBLsQBQhKKAA&biw=1920&bih=938&dpr=1\">with a loose<\/a> <a class=\"link link--blue fontWeight-4\"href=\"https:\/\/dribbble.com\/search?q=dropdown\">search term<\/a>\n<\/li>\n<li>\n<strong class=\"c-slate lineHeight-l fontSize-l fontWeight-5 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">Join <\/strong><a class=\"link link--blue fontWeight-4\"href=\"https:\/\/uniteddesigners.chat\/\"><strong class=\"c-slate lineHeight-l fontSize-l fontWeight-5 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">some<\/strong><\/a><strong class=\"c-slate lineHeight-l fontSize-l fontWeight-5 breakPointM-fontSize-xl breakPointM-lineHeight-xl\"> <\/strong><a class=\"link link--blue fontWeight-4\"href=\"https:\/\/ux.stackexchange.com\/\"><strong class=\"c-slate lineHeight-l fontSize-l fontWeight-5 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">online<\/strong><\/a><strong class=\"c-slate lineHeight-l fontSize-l fontWeight-5 breakPointM-fontSize-xl breakPointM-lineHeight-xl\"> <\/strong><a class=\"link link--blue fontWeight-4\"href=\"https:\/\/www.designernews.co\/\"><strong class=\"c-slate lineHeight-l fontSize-l fontWeight-5 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">communities<\/strong><\/a><strong class=\"c-slate lineHeight-l fontSize-l fontWeight-5 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">,<\/strong> to talk about solutions to your UX problem<\/li>\n<li>\n<strong class=\"c-slate lineHeight-l fontSize-l fontWeight-5 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">Engage your colleagues on the Marketing and UX teams,<\/strong> to have them investigate the wants and needs of your app\u2019s target audience<\/li>\n<\/ul>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">You really just want to <strong class=\"c-slate lineHeight-l fontSize-l fontWeight-5 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">see how others solve the issues that are currently in front of you.<\/strong> Or related issues. Or perhaps you\u2019ve got some solutions in mind already, in which case it might be a good idea to see how others executed those solutions!<\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\"><a class=\"link link--blue fontWeight-4\"href=\"https:\/\/marvel7077.wpengine.com\/wp-content\/uploads\/2019\/01\/1yv05ayj0hIedcRxzR8uClA.png\"><img decoding=\"async\" class=\"aligncenter size-full wp-image-6580\" src=\"https:\/\/marvel7077.wpengine.com\/wp-content\/uploads\/2019\/01\/1yv05ayj0hIedcRxzR8uClA.png\" title=\"\" alt=\"\" \/><\/a><\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\"><\/p>\n<h2 class=\"pageWrap pageWrap--s marginTop-xl marginBottom-l c-black lineHeight-xl fontSize-xl fontWeight-5 breakPointM-lineHeight-xxl breakPointM-fontSize-xxl\" style=\"margin-left: auto; margin-right: auto;\">Pause.<\/h2>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\"><a class=\"link link--blue fontWeight-4\"href=\"https:\/\/www.youtube.com\/watch?v=Pb5oIIPO62g\">John Cleese talks about creativity requiring time<\/a>. <em>(And time!)<\/em> Relax. Sit down and watch some Netflix. Go for a walk with your better half. Interact with some strangers. Play some basketball. Have a cuppa with that one friend that doesn\u2019t stop talking. Practice the harmonica.<strong class=\"c-slate lineHeight-l fontSize-l fontWeight-5 breakPointM-fontSize-xl breakPointM-lineHeight-xl\"> Look. Feel. Experience stuff.<\/strong><\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">Did you know that if I use the word <em>whimsical<\/em>, you\u2019re likely to find yourself using it soon as well? That\u2019s how human brains work. They\u2019re not random. They connect pieces of information together and turn them into new ideas. And <strong class=\"c-slate lineHeight-l fontSize-l fontWeight-5 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">the more recent you\u2019ve been exposed to a thought or pattern, the more likely you are to reach for it as a solution.<\/strong><\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">This is why you pause after doing your research and setting your goal. <strong class=\"c-slate lineHeight-l fontSize-l fontWeight-5 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">Keep your project loosely in the back of your mind, and puzzle pieces will start falling into place around you, <em>whimsically<\/em>.<em> <\/em><\/strong><em>(\u2026 I\u2019m on a mission here.)<\/em><\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">Pausing actually doesn\u2019t need to be step 3. It can be useful at any point where you\u2019re mentally roadblocked.<\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\"><a class=\"link link--blue fontWeight-4\"href=\"https:\/\/marvel7077.wpengine.com\/wp-content\/uploads\/2019\/01\/1oaQogWvMbFYIiHV6RATc6w.png\"><img decoding=\"async\" class=\"aligncenter size-full wp-image-6580\" src=\"https:\/\/marvel7077.wpengine.com\/wp-content\/uploads\/2019\/01\/1oaQogWvMbFYIiHV6RATc6w.png\" title=\"\" alt=\"\" \/><\/a><\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\"><\/p>\n<h2 class=\"pageWrap pageWrap--s marginTop-xl marginBottom-l c-black lineHeight-xl fontSize-xl fontWeight-5 breakPointM-lineHeight-xxl breakPointM-fontSize-xxl\" style=\"margin-left: auto; margin-right: auto;\">3 ) Constraints<\/h2>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">Pencil to paper. Not literally. Unless that\u2019s your jam. Feel free to use a marker and a post-it note instead. Or a whiteboard. Or PhotoShop, Sketch, Balsamiq, a box of LEGOs\u2026 whatever makes you comfortable.<\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\"><strong class=\"c-slate lineHeight-l fontSize-l fontWeight-5 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">This part is about constraints.<\/strong> The scariest part about a blank canvas, is the fact that there\u2019s nothing holding you back. Creating your first boundaries will give you something to work with(in), a bearing or at least a direction.<\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">Because <strong class=\"c-slate lineHeight-l fontSize-l fontWeight-5 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">the first design you\u2019re creating is nothing more than a rectangle. <\/strong>Affectionately name it <em>\u201cmy lil\u2019 view-port\u201d<\/em>.<\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\"><strong class=\"c-slate lineHeight-l fontSize-l fontWeight-5 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">This little rectangle just created your first set of limitations. <\/strong>Your ball-park. It confines you to an area, but it also gives you the goal-posts you can lean on.<\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\"><a class=\"link link--blue fontWeight-4\"href=\"https:\/\/marvel7077.wpengine.com\/wp-content\/uploads\/2019\/01\/1ASc_MPaQ2RDQUdhmpz0pNA.png\"><img decoding=\"async\" class=\"aligncenter size-full wp-image-6580\" src=\"https:\/\/marvel7077.wpengine.com\/wp-content\/uploads\/2019\/01\/1ASc_MPaQ2RDQUdhmpz0pNA.png\" title=\"\" alt=\"\" \/><\/a><\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\"><\/p>\n<h2 class=\"pageWrap pageWrap--s marginTop-xl marginBottom-l c-black lineHeight-xl fontSize-xl fontWeight-5 breakPointM-lineHeight-xxl breakPointM-fontSize-xxl\" style=\"margin-left: auto; margin-right: auto;\">4 ) Define\u00a0context<\/h2>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\"><strong class=\"c-slate lineHeight-l fontSize-l fontWeight-5 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">With any type of interface, look at the big picture first, the context.<\/strong> Get the overall lines in place. As an example, let\u2019s look at Google Maps, which perfectly illustrates the point.<\/p>\n<ul class=\"pageWrap pageWrap--s list list--unordered marginBottom-l lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">\n<li>When you zoom out on a Google Maps, <a class=\"link link--blue fontWeight-4\"href=\"https:\/\/www.google.com.au\/maps\/@6.3681756,-34.7543449,18334161m\/data=!3m1!1e3\">you see the planet<\/a>\n<\/li>\n<li>Zoom in a bit. <a class=\"link link--blue fontWeight-4\"href=\"https:\/\/www.google.com.au\/maps\/@45.9750222,12.2102,4581701m\/data=!3m1!1e3\">There\u2019s some countries<\/a>\n<\/li>\n<li>More zooming \u2014 <a class=\"link link--blue fontWeight-4\"href=\"https:\/\/www.google.com.au\/maps\/@52.294864,5.1640374,1252m\/data=!3m1!1e3\">the city of Naarden and its streets<\/a>\n<\/li>\n<li>\u2026 and suddenly, we can <a class=\"link link--blue fontWeight-4\"href=\"https:\/\/www.google.com.au\/maps\/@52.2969487,5.1634937,3a,75y,248.43h,70.98t\/data=!3m6!1e1!3m4!1sZ4aielgMud7oZbWZn43zxA!2e0!7i16384!8i8192\">count the cobbles<\/a>!<\/li>\n<\/ul>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">This works with your design as well. Take your view-port, and start populating it with rectangles. Think big first. <strong class=\"c-slate lineHeight-l fontSize-l fontWeight-5 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">What does your content look like when viewed from space?<\/strong><\/p>\n<ul class=\"pageWrap pageWrap--s list list--unordered marginBottom-l lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">\n<li>\n<strong class=\"c-slate lineHeight-l fontSize-l fontWeight-5 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">What portions of your home page<\/strong> will be dedicated to your primary product, your slogan and your mission statement?<\/li>\n<li>What are <strong class=\"c-slate lineHeight-l fontSize-l fontWeight-5 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">the most convenient ways to browse your music videos<\/strong>? Do you show a list of titles, a list of categories and\/or filtering options? Or just a search bar?<\/li>\n<li>What is the<strong class=\"c-slate lineHeight-l fontSize-l fontWeight-5 breakPointM-fontSize-xl breakPointM-lineHeight-xl\"> order of sections on your one-page-checkout?<\/strong> Shipping details first? Or payment details? Credit card at the top?<\/li>\n<\/ul>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">Even when you\u2019re designing a tiny widget, you can still apply this philosophy. <strong class=\"c-slate lineHeight-l fontSize-l fontWeight-5 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">Think big first. Draw large squares. Fill out the details later.<\/strong><\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\"><a class=\"link link--blue fontWeight-4\"href=\"https:\/\/marvel7077.wpengine.com\/wp-content\/uploads\/2019\/01\/1tY1uHxYICb9h6nJVRwaE2w.png\"><img decoding=\"async\" class=\"aligncenter size-full wp-image-6580\" src=\"https:\/\/marvel7077.wpengine.com\/wp-content\/uploads\/2019\/01\/1tY1uHxYICb9h6nJVRwaE2w.png\" title=\"\" alt=\"\" \/><\/a><\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\"><\/p>\n<h2 class=\"pageWrap pageWrap--s marginTop-xl marginBottom-l c-black lineHeight-xl fontSize-xl fontWeight-5 breakPointM-lineHeight-xxl breakPointM-fontSize-xxl\" style=\"margin-left: auto; margin-right: auto;\">5 ) Detailing<\/h2>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">You\u2019ve done the groundwork by digging the road and flattening the surface. Now it\u2019s time to put in the cobble-stones. One by one.<\/p>\n<ul class=\"pageWrap pageWrap--s list list--unordered marginBottom-l lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">\n<li>\n<strong class=\"c-slate lineHeight-l fontSize-l fontWeight-5 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">Draw a button. And its twelve states.<\/strong> Active, inactive, pre-purchase, post-purchase, post-completion, re-available, re-purchase, pre-re-completion, etc.<\/li>\n<li>\n<strong class=\"c-slate lineHeight-l fontSize-l fontWeight-5 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">Draw a search bar. And its search hinting.<\/strong> Some arrows to show how it animates as you type. Preemptively show the number of search results.<\/li>\n<li>\n<strong class=\"c-slate lineHeight-l fontSize-l fontWeight-5 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">Draw a cog. And the drop-down shown when you click it.<\/strong> Think about the wording of each item. Add a small badge and icon for updates.<\/li>\n<\/ul>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">This really is where your canvas starts filling up. It\u2019s all about ironing out the details, getting <strong class=\"c-slate lineHeight-l fontSize-l fontWeight-5 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">closer and closer to showing the most granular, raw form of your content.<\/strong><\/p>\n<h2 class=\"pageWrap pageWrap--s marginTop-xl marginBottom-l c-black lineHeight-xl fontSize-xl fontWeight-5 breakPointM-lineHeight-xxl breakPointM-fontSize-xxl\" style=\"margin-left: auto; margin-right: auto;\">Too long, didn\u2019t\u00a0read:<\/h2>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">If you\u2019re scared of a blank canvas, set a simple process for yourself to start filling it up.<\/p>\n<ol class=\"pageWrap pageWrap--s list list--ordered marginBottom-l lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">\n<li>\n<strong class=\"c-slate lineHeight-l fontSize-l fontWeight-5 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">Requirements<\/strong> \u2014 scope out your task<\/li>\n<li>\n<strong class=\"c-slate lineHeight-l fontSize-l fontWeight-5 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">Research<\/strong> \u2014 research solutions<\/li>\n<li>\n<strong class=\"c-slate lineHeight-l fontSize-l fontWeight-5 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">Constraints<\/strong> \u2014<strong class=\"c-slate lineHeight-l fontSize-l fontWeight-5 breakPointM-fontSize-xl breakPointM-lineHeight-xl\"> <\/strong>set simple boundaries<\/li>\n<li>\n<strong class=\"c-slate lineHeight-l fontSize-l fontWeight-5 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">Define context<\/strong> \u2014 view from a distance<\/li>\n<li>\n<strong class=\"c-slate lineHeight-l fontSize-l fontWeight-5 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">Detailing<\/strong> \u2014 sweat the small stuff<\/li>\n<\/ol>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\"><strong class=\"c-slate lineHeight-l fontSize-l fontWeight-5 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">\u2026 and don\u2019t forget to take your time where you can.<\/strong> Sit with the problem you\u2019re trying to solve and look for solutions anywhere and everywhere. The more time you get to spend with a problem, the more likely you are to solve it in an ingenious, illuminated and previously inconceivable way.<\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">Do the above and you\u2019ll find:<\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\"><strong class=\"c-slate lineHeight-l fontSize-l fontWeight-5 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">\u2026 a blank canvas is only scary with a blank mind!<\/strong><\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\"><em>This article was originally published on <a class=\"link link--blue fontWeight-4\"href=\"https:\/\/medium.com\/8px-magazine\/designing-from-scratch-a-blank-canvas-625a6f1291af\">Dirk's Medium page<\/a>. <\/em><\/p>\n","protected":false},"excerpt":{"rendered":"<p>A blank canvas. it might as well be the devil himself. Complete nothingness. And it\u2019s not just on that page in front of you; it surrounds you and swallows you whole. There\u2019s only nothing, and it\u2019s everywhere. Ultimate freedom. No guidelines, no boundaries. \u2026 so, where do you start?! 1 ) Requirements The indexing of the requirements of your project&#8230; <a class=\"link link--blue fontWeight-4\" href=\"https:\/\/marvelapp.com\/blog\/designing-scratch-blank-canvas\/\">Read More &#65515;<\/a><\/p>\n","protected":false},"author":274,"featured_media":16803,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[11],"tags":[],"class_list":["post-16802","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-viewpoint"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v15.5 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/marvelapp.com\/blog\/designing-scratch-blank-canvas\/\" \/>\n<meta property=\"og:locale\" content=\"en_GB\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Designing From Scratch: A Blank\u00a0Canvas | Marvel Blog\" \/>\n<meta property=\"og:description\" content=\"A blank canvas. it might as well be the devil himself. Complete nothingness. And it\u2019s not just on that page in front of you; it surrounds you and swallows you whole. There\u2019s only nothing, and it\u2019s everywhere. Ultimate freedom. No guidelines, no boundaries. \u2026 so, where do you start?! 1 ) Requirements The indexing of the requirements of your project... Read More &#65515;\" \/>\n<meta property=\"og:url\" content=\"https:\/\/marvelapp.com\/blog\/designing-scratch-blank-canvas\/\" \/>\n<meta property=\"og:site_name\" content=\"Marvel Blog\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/marvelapp\" \/>\n<meta property=\"article:published_time\" content=\"2019-01-07T10:30:14+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2019-01-07T10:30:26+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/marvelapp.com\/wp-content\/uploads\/2019\/01\/1ynfimNJE0zOlXnqJdnKYnQ.png\" \/>\n\t<meta property=\"og:image:width\" content=\"3000\" \/>\n\t<meta property=\"og:image:height\" content=\"1500\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@marvelapp\" \/>\n<meta name=\"twitter:site\" content=\"@marvelapp\" \/>\n<meta name=\"twitter:label1\" content=\"Est. reading time\">\n\t<meta name=\"twitter:data1\" content=\"4 minutes\">\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Organization\",\"@id\":\"https:\/\/marvelapp.com\/blog\/#organization\",\"name\":\"Marvel\",\"url\":\"https:\/\/marvelapp.com\/blog\/\",\"sameAs\":[\"https:\/\/www.facebook.com\/marvelapp\",\"https:\/\/www.instagram.com\/marvelapp\/\",\"https:\/\/www.linkedin.com\/company\/marvel-app\/\",\"https:\/\/twitter.com\/marvelapp\"],\"logo\":{\"@type\":\"ImageObject\",\"@id\":\"https:\/\/marvelapp.com\/blog\/#logo\",\"inLanguage\":\"en-GB\",\"url\":\"https:\/\/marvelapp.com\/wp-content\/uploads\/2018\/06\/Logo-Light.png\",\"width\":1605,\"height\":1130,\"caption\":\"Marvel\"},\"image\":{\"@id\":\"https:\/\/marvelapp.com\/blog\/#logo\"}},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/marvelapp.com\/blog\/#website\",\"url\":\"https:\/\/marvelapp.com\/blog\/\",\"name\":\"Marvel Blog\",\"description\":\"Ideas and words on user experience, design, collaboration and more\",\"publisher\":{\"@id\":\"https:\/\/marvelapp.com\/blog\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":\"https:\/\/marvelapp.com\/blog\/?s={search_term_string}\",\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-GB\"},{\"@type\":\"ImageObject\",\"@id\":\"https:\/\/marvelapp.com\/blog\/designing-scratch-blank-canvas\/#primaryimage\",\"inLanguage\":\"en-GB\",\"url\":\"https:\/\/marvelapp.com\/wp-content\/uploads\/2019\/01\/1ynfimNJE0zOlXnqJdnKYnQ.png\",\"width\":\"3000\",\"height\":\"1500\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/marvelapp.com\/blog\/designing-scratch-blank-canvas\/#webpage\",\"url\":\"https:\/\/marvelapp.com\/blog\/designing-scratch-blank-canvas\/\",\"name\":\"Designing From Scratch: A Blank\\u00a0Canvas | Marvel Blog\",\"isPartOf\":{\"@id\":\"https:\/\/marvelapp.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/marvelapp.com\/blog\/designing-scratch-blank-canvas\/#primaryimage\"},\"datePublished\":\"2019-01-07T10:30:14+00:00\",\"dateModified\":\"2019-01-07T10:30:26+00:00\",\"inLanguage\":\"en-GB\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/marvelapp.com\/blog\/designing-scratch-blank-canvas\/\"]}]},{\"@type\":\"Article\",\"@id\":\"https:\/\/marvelapp.com\/blog\/designing-scratch-blank-canvas\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/marvelapp.com\/blog\/designing-scratch-blank-canvas\/#webpage\"},\"author\":{\"@id\":\"https:\/\/marvelapp.com\/blog\/#\/schema\/person\/d655edd0ec5c217d867132aaa5a3b808\"},\"headline\":\"Designing From Scratch: A Blank\\u00a0Canvas\",\"datePublished\":\"2019-01-07T10:30:14+00:00\",\"dateModified\":\"2019-01-07T10:30:26+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/marvelapp.com\/blog\/designing-scratch-blank-canvas\/#webpage\"},\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/marvelapp.com\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/marvelapp.com\/blog\/designing-scratch-blank-canvas\/#primaryimage\"},\"articleSection\":\"Viewpoint\",\"inLanguage\":\"en-GB\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/marvelapp.com\/blog\/designing-scratch-blank-canvas\/#respond\"]}]},{\"@type\":\"Person\",\"@id\":\"https:\/\/marvelapp.com\/blog\/#\/schema\/person\/d655edd0ec5c217d867132aaa5a3b808\",\"name\":\"Dirk van Boxtel\",\"image\":{\"@type\":\"ImageObject\",\"@id\":\"https:\/\/marvelapp.com\/blog\/#personlogo\",\"inLanguage\":\"en-GB\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/ef6dd792490dc2d617b541ca65bb692b5a80aa437a7845953531d1e29607a926?s=96&d=mm&r=g\",\"caption\":\"Dirk van Boxtel\"},\"description\":\"I\\u2019m the nervously twitching nerd in the corner, guarding his collection of geek toys. Comedy is my true love. UX, UI and basketball make my life less quirky. Medium &amp; Twitter.\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","_links":{"self":[{"href":"https:\/\/marvelapp.com\/blog\/wp-json\/wp\/v2\/posts\/16802","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/marvelapp.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/marvelapp.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/marvelapp.com\/blog\/wp-json\/wp\/v2\/users\/274"}],"replies":[{"embeddable":true,"href":"https:\/\/marvelapp.com\/blog\/wp-json\/wp\/v2\/comments?post=16802"}],"version-history":[{"count":0,"href":"https:\/\/marvelapp.com\/blog\/wp-json\/wp\/v2\/posts\/16802\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/marvelapp.com\/blog\/wp-json\/wp\/v2\/media\/16803"}],"wp:attachment":[{"href":"https:\/\/marvelapp.com\/blog\/wp-json\/wp\/v2\/media?parent=16802"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/marvelapp.com\/blog\/wp-json\/wp\/v2\/categories?post=16802"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/marvelapp.com\/blog\/wp-json\/wp\/v2\/tags?post=16802"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}