[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"cms-page:\u002Fblog\u002Fturn-sketch-design-prototype-minutes":3},{"date":4,"date_gmt":4,"content":5,"sticky":7,"format":8,"categories":9,"collections":11,"coauthors":12,"class_list":14,"acf":23,"head_links":320,"breadcrumbs":321,"reading_minutes":133,"category":329,"head":331},"2018-03-20T17:22:30",{"rendered":6},"\u003Ch2 id=\"how-to-easily-get-a-prototype-for-your-sketch-design-up-and-running\">How to easily get a prototype for your Sketch design up and running\u003C\u002Fh2>\n\u003Ch3 id=\"what-is-sketch\">What is Sketch?\u003C\u002Fh3>\n\u003Cp>Sketch is a professional design tool for Mac that utilises a fully vector-based workflow. Its simple layout, features and plugins make it a very capable replacement to other design tools like Photoshop. Here at Impression, we use it for creating UI, mobile, web, icon and wireframe design. \u003C\u002Fp>\n\u003Ch3 id=\"the-new-prototyping-update\">The new Prototyping update\u003C\u002Fh3>\n\u003Cp>To many Sketch advocates across the web, the latest update has proven to be one of the most memorable to date. Prototyping has long been a sought-after feature in the much loved design tool, and the latest installment has yet to disappoint the expanding fan base currently here at Impression.\u003C\u002Fp>\n\u003Cp>Filling the grey areas between design and development have sometimes proven difficult up until this point. Static designs often fall short of expectations when trying to imagine the details of how a website, app or project is going to interact. That’s where prototyping steps in!\u003C\u002Fp>\n\u003Cp>With a few quick tricks, that static collection of artboards can start to take shape and become a simple and effective way to showcase an interactive demo to clients and colleagues alike.\u003C\u002Fp>\n\u003Ch3 id=\"getting-started\">Getting started\u003C\u002Fh3>\n\u003Cp>To get started with prototyping, I’ve created a very simple Sketch file, with a basic structure, that we will use as the foundations of our prototype – go ahead and \u003Ca rel=\"noreferrer noopener\" href=\"https:\u002F\u002Fstatic.impression.co.uk\u002F2018\u002F03\u002Fsketch-prototype.zip\">take a look\u003C\u002Fa>. Yup, nothing too fancy, but setting up your structure correctly is the key to creating a fast prototype, with the help of artboards and symbols.\u003C\u002Fp>\n\u003Ch3 id=\"artboards-symbols\">Artboards & Symbols\u003C\u002Fh3>\n\u003Cp>The best approach to most designs in Sketch is to use Artboards & Symbols, and prototyping is no different. In prototyping, Artboards act as pages, and the power of symbols can be used to instantly create the same links across all artboards, just like you would refresh a symbol currently. In order to ensure a flexible working prototype, getting your Sketch designs set up in this structure will ensure a swift and easily adaptable prototype.\u003C\u002Fp>\n\u003Ch3 id=\"setup\">Setup\u003C\u002Fh3>\n\u003Cp>The magic of Sketch prototyping is within links and hotspots. Before we get stuck in, I recommend customising your Sketch toolbar to better put to use these new tools. As you’ve probably noticed, a few new icons have appeared in the top right corner of your GUI, looking something like this.\u003C\u002Fp>\n\u003Cp>\u003Cimg loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-3670 alignleft\" src=\"https:\u002F\u002Fimages.impression.co.uk\u002F2021\u002F05\u002FKru7zE0C-sketch1.png?auto=compress%2Cformat&q=90\" alt=\"\" width=\"210\" height=\"62\" \u002F>\u003C\u002Fp>\n\u003Cp> \u003C\u002Fp>\n\u003Cp> \u003C\u002Fp>\n\u003Cp> \u003C\u002Fp>\n\u003Cp>We will look more closely at Preview and Cloud later, but for now, let’s concentrate on adding all the required tools to our toolbar. To do so, right click in the space either side of these icons, and select ‘Customise Toolbar’. In the drop down that follows, find and drag the two tools ‘Show Prototyping’ and ‘Hotspot’ to sit alongside the others, like so:\u003C\u002Fp>\n\u003Cp>\u003Cimg loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-3671 alignleft\" src=\"https:\u002F\u002Fimages.impression.co.uk\u002F2021\u002F05\u002FWzcBtIx6-sketch2.png?auto=compress%2Cformat&q=90\" alt=\"\" width=\"247\" height=\"59\" \u002F>\u003C\u002Fp>\n\u003Cp> \u003C\u002Fp>\n\u003Cp> \u003C\u002Fp>\n\u003Cp> \u003C\u002Fp>\n\u003Cp>Now that we have all our tools in place, lets start linking our artboards.\u003C\u002Fp>\n\u003Ch3 id=\"linking-hotspots\">Linking & Hotspots\u003C\u002Fh3>\n\u003Cp>In the Sketch file, navigate to the Symbols page, and select the Navigation symbol, in here, we will start creating our links and hotspots.\u003C\u002Fp>\n\u003Cp>To quickly summarise, both linking and hotspots navigate to a new artboard, but only hotspots can be overruled outside of the symbol view. If you are looking to create a link that always navigates to the same artboard e.g. about text always goes to about page, then ‘linking’ is the ideal solution. However, if you are looking to potentially override that link, on different artboards, then hotspots will allow this. One example could be changing the Contact Us button destination, depending on what artboard you are currently on.\u003C\u002Fp>\n\u003Ch4 id=\"linking\">Linking\u003C\u002Fh4>\n\u003Cp>To set up a direct link, highlight the element you are adding the link to, and either click on the link icon, or in the right panel, click the plus icon next to the ‘Prototyping’ block.\u003C\u002Fp>\n\u003Cp>\u003Cimg loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-3672 alignleft\" src=\"https:\u002F\u002Fimages.impression.co.uk\u002F2021\u002F05\u002FJpv9kaZ4-sketch3.png?auto=compress%2Cformat&q=90\" alt=\"\" width=\"212\" height=\"34\" \u002F>\u003C\u002Fp>\n\u003Cp> \u003C\u002Fp>\n\u003Cp> \u003C\u002Fp>\n\u003Cp>Once clicked, a new sub block ‘Target’ will appear, navigate in the dropdown and select your destination artboard, like so:\u003C\u002Fp>\n\u003Cp> \u003C\u002Fp>\n\u003Cp>\u003Cimg loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-3673 alignleft\" src=\"https:\u002F\u002Fimages.impression.co.uk\u002F2021\u002F05\u002FLLl7lI8f-sketch4.png?auto=compress%2Cformat&q=90\" alt=\"\" width=\"254\" height=\"170\" \u002F>\u003C\u002Fp>\n\u003Cp> \u003C\u002Fp>\n\u003Cp> \u003C\u002Fp>\n\u003Cp> \u003C\u002Fp>\n\u003Cp> \u003C\u002Fp>\n\u003Cp> \u003C\u002Fp>\n\u003Cp> \u003C\u002Fp>\n\u003Cp>Once activated, navigate back to your page view, highlight your navigation symbol, and you should see an arrow showcasing which artboard your link will take you too, like so:\u003C\u002Fp>\n\u003Cp>\u003Cimg loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-3674\" src=\"https:\u002F\u002Fimages.impression.co.uk\u002F2021\u002F05\u002F5Hu6AthV-sketch5.png?auto=compress%2Cformat&q=90\" alt=\"\" width=\"1604\" height=\"754\" \u002F>\u003C\u002Fp>\n\u003Cp> \u003C\u002Fp>\n\u003Cp>Apply this to your logo, and other two links, and we’ve almost got a fully working navigation in place.\u003C\u002Fp>\n\u003Ch4 id=\"hotspots\">Hotspots\u003C\u002Fh4>\n\u003Cp>For hotspots, click on the contact us button inside the navigation. You may notice this button is a symbol inside a symbol, but not to worry, this will allow us to use the button across the Sketch file and always give us the option to override the prototype link. Double-click the button, and it will focus on the independent symbol, now click the hotspot icon in the top right, hover over the button (you should see the link symbol) and click. You should notice an orange border around the button, and in your left panel, a new ‘hotspot’ element inside your button symbol.\u003C\u002Fp>\n\u003Cp>\u003Cimg loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-3675 alignleft\" src=\"https:\u002F\u002Fimages.impression.co.uk\u002F2021\u002F05\u002F9jo3zUdW-sketch6.png?auto=compress%2Cformat&q=90\" alt=\"\" width=\"588\" height=\"278\" \u002F>\u003C\u002Fp>\n\u003Cp> \u003C\u002Fp>\n\u003Cp> \u003C\u002Fp>\n\u003Cp> \u003C\u002Fp>\n\u003Cp> \u003C\u002Fp>\n\u003Cp> \u003C\u002Fp>\n\u003Cp> \u003C\u002Fp>\n\u003Cp> \u003C\u002Fp>\n\u003Cp> \u003C\u002Fp>\n\u003Cp>You can assign the target just like linking (in the right-hand panel under target). Now navigate back to your page view, and click on the Navigation symbol, and if you look to the right, you should see the option under override to change the contact us hotspot, pretty cool ay?\u003C\u002Fp>\n\u003Cp>\u003Cimg loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-3676 alignleft\" src=\"https:\u002F\u002Fimages.impression.co.uk\u002F2021\u002F05\u002FkU1vglTx-sketch7.png?auto=compress%2Cformat&q=90\" alt=\"\" width=\"428\" height=\"266\" \u002F>\u003C\u002Fp>\n\u003Cp> \u003C\u002Fp>\n\u003Cp> \u003C\u002Fp>\n\u003Cp> \u003C\u002Fp>\n\u003Cp> \u003C\u002Fp>\n\u003Cp> \u003C\u002Fp>\n\u003Cp> \u003C\u002Fp>\n\u003Cp> \u003C\u002Fp>\n\u003Cp> \u003C\u002Fp>\n\u003Cp>If you decide not to override the contact us hotspot, then the predefined target in the symbols area will be used, so you only need to use the override when necessary.\u003C\u002Fp>\n\u003Ch4 id=\"quick-tip-link-colours\">Quick tip – link colours\u003C\u002Fh4>\n\u003Cp>It’s worth noting, that you can always update the link colours in your Sketch preferences, just in case you have a colour clash in you design, or don’t like orange.\u003C\u002Fp>\n\u003Cp>\u003Cimg loading=\"lazy\" decoding=\"async\" class=\" wp-image-3677 alignleft\" src=\"https:\u002F\u002Fimages.impression.co.uk\u002F2021\u002F05\u002FlDxBd3r6-sketch8.png?auto=compress%2Cformat&q=90\" alt=\"\" width=\"406\" height=\"281\" \u002F>\u003C\u002Fp>\n\u003Cp> \u003C\u002Fp>\n\u003Cp> \u003C\u002Fp>\n\u003Cp> \u003C\u002Fp>\n\u003Cp> \u003C\u002Fp>\n\u003Cp> \u003C\u002Fp>\n\u003Cp> \u003C\u002Fp>\n\u003Cp> \u003C\u002Fp>\n\u003Cp> \u003C\u002Fp>\n\u003Ch3 id=\"prototyping\">Prototyping\u003C\u002Fh3>\n\u003Cp>Now it’s time to take a look at the links in action, once you’re happy with your links and hot spots, click on the preview icon!\u003C\u002Fp>\n\u003Cp>Clicking anywhere in the preview box will give you a flashing indicator of the links, and there is also the ability to resize the preview box if you are presenting the prototype, or want a better idea of the scale.\u003C\u002Fp>\n\u003Ch3 id=\"quick-tip-flagging-your-starter-page\">Quick tip – Flagging your starter page\u003C\u002Fh3>\n\u003Cp>The flag icon next to the select drop down is a great way to indicate which of the Artboards in your prototype is your home page. Once selected, every time you open the prototype, this Artboard will be the first page. This will also set the home page when sharing the prototype in the cloud!\u003C\u002Fp>\n\u003Cp>\u003Cimg loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-3678 alignleft\" src=\"https:\u002F\u002Fimages.impression.co.uk\u002F2021\u002F05\u002F4Wha1JPn-sketch9.png?auto=compress%2Cformat&q=90\" alt=\"\" width=\"406\" height=\"74\" \u002F>\u003C\u002Fp>\n\u003Cp> \u003C\u002Fp>\n\u003Cp> \u003C\u002Fp>\n\u003Cp> \u003C\u002Fp>\n\u003Ch4 id=\"animations\">Animations\u003C\u002Fh4>\n\u003Cp>You may have noticed underneath the target area on the right panel the option to add animations between your Artboards.\u003C\u002Fp>\n\u003Cp>\u003Cimg loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-3679 alignleft\" src=\"https:\u002F\u002Fimages.impression.co.uk\u002F2021\u002F05\u002FYFgUl30y-sketch10.png?auto=compress%2Cformat&q=90\" alt=\"\" width=\"424\" height=\"196\" \u002F>\u003C\u002Fp>\n\u003Cp> \u003C\u002Fp>\n\u003Cp> \u003C\u002Fp>\n\u003Cp> \u003C\u002Fp>\n\u003Cp> \u003C\u002Fp>\n\u003Cp> \u003C\u002Fp>\n\u003Cp> \u003C\u002Fp>\n\u003Cp>Using animations is a great way to add more life to your prototype, however, at the moment these are definitely more tailored towards app prototypes, and don’t offer much flexibility if demonstrating a website design. That being said, I expect this list to grow in future updates of Sketch, and if you intend to slide across your content, then fire away!\u003C\u002Fp>\n\u003Ch3 id=\"sharing-your-prototype-the-cloud\">Sharing your prototype & the Cloud\u003C\u002Fh3>\n\u003Cp>I must admit, Sketch have outdone themselves with the free sharing and cloud feature. Once you’re happy with your prototype, click on the Cloud icon, sign up with an account, and upload your designs to the cloud.\u003C\u002Fp>\n\u003Cp>The dashboard on the cloud is pretty self explanatory, with prototypes, Artboards and symbols available to view in order. Sketch figures out the flagged page from earlier, and gives us the option to open the prototype straight away.\u003C\u002Fp>\n\u003Ch4 id=\"comments-sharing\">Comments & Sharing\u003C\u002Fh4>\n\u003Cp>If you are looking to get feedback on your prototype or designs, or want to share the prototype on a public link, click on the cog icon in the top right corner of your cloud dashboard.\u003C\u002Fp>\n\u003Cp>\u003Cimg loading=\"lazy\" decoding=\"async\" class=\" wp-image-3680 alignleft\" src=\"https:\u002F\u002Fimages.impression.co.uk\u002F2021\u002F05\u002FJMBL64Oy-sketch11.png?auto=compress%2Cformat&q=90\" alt=\"\" width=\"369\" height=\"310\" \u002F>\u003C\u002Fp>\n\u003Cp> \u003C\u002Fp>\n\u003Cp> \u003C\u002Fp>\n\u003Cp> \u003C\u002Fp>\n\u003Cp> \u003C\u002Fp>\n\u003Cp> \u003C\u002Fp>\n\u003Cp> \u003C\u002Fp>\n\u003Cp> \u003C\u002Fp>\n\u003Cp> \u003C\u002Fp>\n\u003Cp> \u003C\u002Fp>\n\u003Cp>Here, you can enable comments (which will appear once viewing a design by clicking the bottom right icon), and create a public link for your designs for sharing. You can, of course, keep the designs private, and give access via email, to those lucky few.\u003C\u002Fp>\n\u003Ch3 id=\"quick-tip-share-your-prototype-via-url\">Quick tip – Share your prototype via URL\u003C\u002Fh3>\n\u003Cp>If you are looking to share a direct link to your prototype, without the user having to navigate in Sketch cloud, adding ‘play’ or grabbing the URL in prototype mode and enabling a public share link will work, e.g.\u003C\u002Fp>\n\u003Cp>\u003Ccode>sketch.cloud\u002Fs\u002F1abc2\u002Fall\u002Fwebsite\u002Fhome\u002F\u003C\u002Fcode>\u003C\u002Fp>\n\u003Cp>\u003Ccode>sketch.cloud\u002Fs\u002F1abc2\u002Fall\u002Fwebsite\u002Fhome\u002Fplay\u003C\u002Fcode>\u003C\u002Fp>\n\u003Ch3 id=\"summary\">Summary\u003C\u002Fh3>\n\u003Cp>So there you have it, a pretty straight forward way of creating a prototype of your designs using Sketch cloud! With some extended customisation on your designs, you could create a working prototype that demonstrates transitions between all areas of your Artboards.\u003C\u002Fp>\n\u003Ch4 id=\"features-for-the-future\">Features for the future\u003C\u002Fh4>\n\u003Cp>I think we can all agree that this prototype feature is very useful, and acts as a great foundation to build on for future prototyping. However, here’s just a few features I would love to see in future versions, that could make a massive difference when showcasing to colleagues and clients.\u003C\u002Fp>\n\u003Cul>\n\u003Cli style=\"font-weight: 400\">More animations: Having the ability to fade, would be invaluable.\u003C\u002Fli>\n\u003Cli style=\"font-weight: 400\">Hover states: Although complex, I do feel being able to add hover states to show elements such as a drop-down would be an incredibly useful addition.\u003C\u002Fli>\n\u003Cli style=\"font-weight: 400\">Limited cloud view: At the moment, I am yet to see an option to hide symbols and Artboards on Sketch cloud, which could cause issues when sharing your designs.\u003C\u002Fli>\n\u003C\u002Ful>\n\u003Cp>\u003Cstrong>Got any thoughts on Sketch prototyping? Let me know!\u003C\u002Fstrong>\u003C\u002Fp>\n",false,"standard",[10],37,[],[13],135,[15,16,17,18,19,20,21,22],"post-3669","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-web",{"page_content_modules":24,"hero":129},[25,91],{"acf_fc_layout":26,"reduced":27,"top_overlap":-1,"bottom_underlap":-1,"disable_observer":27,"title":28,"content":6,"authors":29},"blog_post_content",true,"Turn your Sketch design into a Prototype in minutes",[30],{"id":31,"path":32,"display_name":33,"job_title":34,"description":35,"avatar_url":36,"acf":37},33,"\u002Fabout\u002Four-team\u002Fimpression-team\u002F","Team Impression","","This post may have been written by a past member of the Impression team, or be a collaboration of us all. We hope you like it!","https:\u002F\u002Fimages.impression.co.uk\u002F2021\u002F11\u002FImpression-Icon.jpg?auto=compress&fit=crop&fm=jpg&h=150&q=80&w=150&bg=CFE6F9",{"job_title":34,"full_bio":34,"specialist_service_links":7,"photo":38},{"ID":39,"id":39,"title":40,"filename":41,"filesize":42,"url":43,"link":44,"alt":34,"author":45,"description":34,"caption":34,"name":46,"status":47,"uploaded_to":42,"date":48,"modified":48,"menu_order":42,"mime_type":49,"type":50,"subtype":51,"icon":52,"width":53,"height":53,"sizes":54},12476,"Impression-Icon","Impression-Icon.jpg",0,"https:\u002F\u002Fimages.impression.co.uk\u002F2021\u002F11\u002FImpression-Icon.jpg?auto=compress%2Cformat&q=90","\u002Fimpression-icon\u002F","12","impression-icon","inherit","2021-11-02 16:49:21","image\u002Fjpeg","image","jpeg","\u002Fwp\u002Fwp-includes\u002Fimages\u002Fmedia\u002Fdefault.png",500,{"thumbnail":55,"thumbnail-width":56,"thumbnail-height":56,"medium":57,"medium-width":58,"medium-height":58,"medium_large":59,"medium_large-width":60,"medium_large-height":60,"large":61,"large-width":62,"large-height":63,"1536x1536":64,"1536x1536-width":65,"1536x1536-height":65,"2048x2048":66,"2048x2048-width":67,"2048x2048-height":67,"post-thumbnail":68,"post-thumbnail-width":69,"post-thumbnail-height":70,"12_col":71,"12_col-width":72,"12_col-height":73,"default_landscape":74,"default_landscape-width":75,"default_landscape-height":76,"default_portrait":77,"default_portrait-width":76,"default_portrait-height":75,"6_col_and_margin_short":78,"6_col_and_margin_short-width":69,"6_col_and_margin_short-height":73,"11_col_and_margin":79,"11_col_and_margin-width":80,"11_col_and_margin-height":73,"9_col_rectangle":81,"9_col_rectangle-width":82,"9_col_rectangle-height":83,"11_col":84,"11_col-width":85,"11_col-height":73,"staff_image_696_600":86,"staff_image_696_600-width":87,"staff_image_696_600-height":76,"rectangular_thumbnail":88,"rectangular_thumbnail-width":89,"rectangular_thumbnail-height":90},"https:\u002F\u002Fimages.impression.co.uk\u002F2021\u002F11\u002FImpression-Icon.jpg?auto=compress%2Cformat&fit=crop&h=640&q=90&w=640","640","https:\u002F\u002Fimages.impression.co.uk\u002F2021\u002F11\u002FImpression-Icon.jpg?auto=compress%2Cformat&fit=scale&h=200&q=90&w=200",200,"https:\u002F\u002Fimages.impression.co.uk\u002F2021\u002F11\u002FImpression-Icon.jpg?auto=compress%2Cformat&fit=scale&h=768&q=90&w=768",768,"https:\u002F\u002Fimages.impression.co.uk\u002F2021\u002F11\u002FImpression-Icon.jpg?auto=compress%2Cformat&fit=crop&h=1000&q=90&w=1892","1892","1000","https:\u002F\u002Fimages.impression.co.uk\u002F2021\u002F11\u002FImpression-Icon.jpg?auto=compress%2Cformat&fit=scale&h=1536&q=90&w=1536",1536,"https:\u002F\u002Fimages.impression.co.uk\u002F2021\u002F11\u002FImpression-Icon.jpg?auto=compress%2Cformat&fit=scale&h=2048&q=90&w=2048",2048,"https:\u002F\u002Fimages.impression.co.uk\u002F2021\u002F11\u002FImpression-Icon.jpg?auto=compress%2Cformat&fit=crop&h=1180&q=90&w=1860",1860,1180,"https:\u002F\u002Fimages.impression.co.uk\u002F2021\u002F11\u002FImpression-Icon.jpg?auto=compress%2Cformat&fit=crop&h=870&q=90&w=2880",2880,870,"https:\u002F\u002Fimages.impression.co.uk\u002F2021\u002F11\u002FImpression-Icon.jpg?auto=compress%2Cformat&fit=crop&h=600&q=90&w=800",800,600,"https:\u002F\u002Fimages.impression.co.uk\u002F2021\u002F11\u002FImpression-Icon.jpg?auto=compress%2Cformat&fit=crop&h=800&q=90&w=600","https:\u002F\u002Fimages.impression.co.uk\u002F2021\u002F11\u002FImpression-Icon.jpg?auto=compress%2Cformat&fit=crop&h=870&q=90&w=1860","https:\u002F\u002Fimages.impression.co.uk\u002F2021\u002F11\u002FImpression-Icon.jpg?auto=compress%2Cformat&fit=crop&h=870&q=90&w=3080",3080,"https:\u002F\u002Fimages.impression.co.uk\u002F2021\u002F11\u002FImpression-Icon.jpg?auto=compress%2Cformat&fit=crop&h=1400&q=90&w=2150",2150,1400,"https:\u002F\u002Fimages.impression.co.uk\u002F2021\u002F11\u002FImpression-Icon.jpg?auto=compress%2Cformat&fit=crop&h=870&q=90&w=2640",2640,"https:\u002F\u002Fimages.impression.co.uk\u002F2021\u002F11\u002FImpression-Icon.jpg?auto=compress%2Cformat&fit=crop&h=600&q=90&w=696",696,"https:\u002F\u002Fimages.impression.co.uk\u002F2021\u002F11\u002FImpression-Icon.jpg?auto=compress%2Cformat&fit=crop&h=300&q=90&w=750",750,300,{"acf_fc_layout":92,"reduced":27,"top_overlap":93,"bottom_underlap":93,"disable_observer":-1,"heading":94,"cta_text":95,"cta_link":96,"items":97},"related_module","small","See more posts","See all articles","\u002Fblog\u002F",[98,110,119],{"type_key":16,"title":99,"excerpt":100,"to":101,"postedAt":102,"readingTime":103,"image":104,"authors":105,"category":107},"Conquering the fear of HTML coding","\u003Cp>This post has been written by Alex Bennett. Alex is a final year English student from the University of Nottingham and is currently part of a 10-week placement with Impression. The prospect of learning to code can be daunting. There are loads of different languages that all do different things in different ways, and the […]\u003C\u002Fp>\n","\u002Fblog\u002Fconquering-the-fear-of-html-coding\u002F","2022-02-07T16:48:24",4,"https:\u002F\u002Fimages.impression.co.uk\u002F2021\u002F07\u002FR0FY9Cp6-050720211625512429_christopher-gower-291246-unsplash-scaled.jpg?auto=compress%2Cformat&fit=crop&h=640&q=90&w=640",[106],{"name":33,"image":36},{"to":108,"name":109},"\u002Fblog\u002Fcategory\u002Fweb\u002F","Web",{"type_key":16,"title":111,"excerpt":112,"to":113,"postedAt":114,"readingTime":103,"image":115,"authors":116,"category":118},"Best Sketch plugins for 2018","\u003Cp>Discover the best Sketch plugins, where and how you can get them, and how to make the most of them. What is Sketch? Sketch is a professional design tool for Mac that utilises a fully vector-based workflow. Its simple layout, features and plugins make it a very capable replacement to other design tools like Photoshop. […]\u003C\u002Fp>\n","\u002Fblog\u002Fbest-sketch-plugins-2018\u002F","2022-02-07T16:48:28","https:\u002F\u002Fimages.impression.co.uk\u002F2021\u002F07\u002Fo5LExbve-050720211625518164_Sketch-blog-post-bg.jpg?auto=compress%2Cformat&fit=crop&h=640&q=90&w=640",[117],{"name":33,"image":36},{"to":108,"name":109},{"type_key":16,"title":120,"excerpt":121,"to":122,"postedAt":123,"readingTime":124,"image":125,"authors":126,"category":128},"Why There’s Never Been a Better Time to Invest in Your Business Website","\u003Cp>While a new website might seem like a hefty commitment, recent updates from Google and trends toward a more technically-advanced web approach mean that we suggest there’s never been a better time to review your online presence and invest in making it the best it can be. Here, we explain what you should be reviewing […]\u003C\u002Fp>\n","\u002Fblog\u002Fweb-2018-theres-never-better-time-invest-business-website\u002F","2022-02-07T16:48:30",17,"https:\u002F\u002Fimages.impression.co.uk\u002F2021\u002F07\u002FQ77g1pcS-050720211625519452_business-websites.jpeg?auto=compress%2Cformat&fit=crop&h=640&q=90&w=640",[127],{"name":33,"image":36},{"to":108,"name":109},{"type":130,"style":131,"heading":28,"date":4,"updatedAt":132,"reading_minutes":133,"image":134,"imageAlt":28,"categories":135,"collections":319},"blog-post","light","2022-02-07T16:48:32",8,"https:\u002F\u002Fimages.impression.co.uk\u002F2021\u002F07\u002F5KHK7KHH-050720211625521001_Sketch-blog-post-bg.jpg?auto=compress%2Cformat&fit=crop&h=1180&q=90&w=1860",[136],{"id":10,"count":137,"description":138,"link":108,"name":109,"slug":139,"taxonomy":140,"parent":42,"meta":141,"acf":142,"head_links":143,"resource_count":42,"yoast_title":144,"yoast_meta":145,"yoast_json_ld":189,"_links":287,"path":108},38,"The way your website is designed and developed has a huge effect on the user experience and likelihood of conversion.\r\n\r\nImpression is an award winning digital agency which delivers results-focused, data driven web projects for a wide range of clients. Our in-house team of designers and web developers works closely with our marketing team to produce \u003Cem>performance websites\u003C\u002Fem> which don't just look great, they perform well across all channels, including search, too.\r\n\r\nCheck out our latest tips, advice, guides and insights into the world of web development now.","web","category",[],{"hidden":27,"sub_title_override":34,"title_override":34},[],"Web Development Blog | Tips, Advice & Guides | Impression",[146,148,151,154,157,160,163,165,167,169,172,175,178,181,183,186],{"property":147,"content":144},"title",{"property":149,"content":150},"description","Keeping up to date with the latest web design & dev trends, strategies, and industry movements can be difficult. Browse our latest web development blogs!",{"name":152,"content":153},"robots","index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1",{"property":155,"content":156},"canonical","https:\u002F\u002Fadmin.impressiondigital.com\u002Fblog\u002Fcategory\u002Fweb\u002F",{"name":158,"content":159},"og:locale","en-GB",{"property":161,"content":162},"og:type","article",{"property":164,"content":144},"og:title",{"property":166,"content":150},"og:description",{"property":168,"content":156},"og:url",{"property":170,"content":171},"og:site_name","Impression",{"property":173,"content":174},"og:image","https:\u002F\u002Fimages.impression.co.uk\u002F2021\u002F06\u002FABFPXguH-Opengraph-BLUE.jpg?auto=compress%2Cformat&q=90",{"property":176,"content":177},"og:image:width",1200,{"property":179,"content":180},"og:image:height",630,{"property":182,"content":49},"og:image:type",{"property":184,"content":185},"twitter:card","summary_large_image",{"property":187,"content":188},"twitter:site","@impressiontalk",{"@context":190,"@graph":191},"https:\u002F\u002Fschema.org",[192,200,210,220],{"@type":193,"@id":194,"url":194,"name":144,"isPartOf":195,"description":150,"breadcrumb":197,"inLanguage":199},"CollectionPage","https:\u002F\u002Fwww.impressiondigital.com\u002Fblog\u002Fcategory\u002Fweb\u002F",{"@id":196},"https:\u002F\u002Fwww.impressiondigital.com\u002F#website",{"@id":198},"https:\u002F\u002Fwww.impressiondigital.com\u002Fblog\u002Fcategory\u002Fweb\u002F#breadcrumb","en",{"@type":201,"@id":198,"itemListElement":202},"BreadcrumbList",[203,208],{"@type":204,"position":205,"name":206,"item":207},"ListItem",1,"Home","https:\u002F\u002Fwww.impressiondigital.com\u002F",{"@type":204,"position":209,"name":109},2,{"@type":211,"@id":196,"url":207,"name":171,"description":34,"publisher":212,"inLanguage":159,"potentialAction":214},"WebSite",{"@id":213},"https:\u002F\u002Fwww.impressiondigital.com\u002F#organization",{"@type":215,"target":216,"query-input":219},"SearchAction",{"@type":217,"urlTemplate":218},"EntryPoint","https:\u002F\u002Fwww.impressiondigital.com\u002Fsearch?q={search_term_string}","required name=search_term_string",{"@type":221,"@id":213,"name":171,"url":207,"logo":222,"image":228,"sameAs":229,"@context":233,"email":234,"foundingDate":235,"legalName":236,"vatID":237,"description":238,"telephone":239,"address":240,"location":247,"areaServed":280},"Organization",{"@type":223,"inLanguage":159,"@id":224,"url":225,"contentUrl":225,"width":226,"height":227,"caption":171},"ImageObject","https:\u002F\u002Fwww.impressiondigital.com\u002F#\u002Fschema\u002Flogo\u002Fimage\u002F","https:\u002F\u002Fcdn.impression.co.uk\u002F2021\u002F06\u002FA5LuTDrq-Impression_Wordmark.png",920,176,"https:\u002F\u002Fcdn.impression.co.uk\u002F2021\u002F04\u002FFAVxDeOS-Nottingham.jpg",[230,231,232],"https:\u002F\u002Fwww.linkedin.com\u002Fcompany\u002Fimpression-digital-limited","https:\u002F\u002Fwww.facebook.com\u002Fimpression\u002F","https:\u002F\u002Fwww.instagram.com\u002Fimpressiontalk\u002F","https:\u002F\u002Fwww.schema.org\u002F","hello@impressiondigital.com","2012-11-07","Impression Digital Limited","GB186363774","Impression is an award-winning digital marketing agency based in the UK and USA. We offer SEO agency, PPC agency, Digital PR agency and Analytics services to companies of all sizes across the UK, North America, Europe and beyond. Get in touch with us if you think we can work together.","01158 242 212",{"@type":241,"streetAddress":242,"addressLocality":243,"addressRegion":244,"postalCode":245,"addressCountry":246},"PostalAddress","Fothergill House, 16 King Street","Nottingham","Nottinghamshire","NG1 2AS","United Kingdom",[248,257,269],{"@type":249,"name":250,"geo":251,"address":255,"photo":228,"telephone":256},"Place","Impression Digital - Nottingham",{"@type":252,"latitude":253,"longitude":254},"GeoCoordinates","52.95501401025914","-1.1494887460285232",{"@type":241,"streetAddress":242,"addressLocality":243,"addressRegion":244,"postalCode":245,"addressCountry":246},"+44 01158 242 212",{"@type":249,"name":258,"geo":259,"address":262,"photo":267,"telephone":268},"Impression Digital - London",{"@type":252,"latitude":260,"longitude":261},"51.50237208377361","-0.09229841534284115",{"@type":241,"streetAddress":263,"addressLocality":264,"addressRegion":265,"postalCode":266,"addressCountry":246},"201 Borough High St","Southwark","London","SE1 1JA","https:\u002F\u002Fcdn.impression.co.uk\u002F2021\u002F04\u002FwD0pPVWz-London.jpg","+44 020 7112 8148",{"@type":249,"name":270,"geo":271,"address":274},"Impression Digital - New York",{"@type":252,"latitude":272,"longitude":273},"40.726722746949","-74.00527778220652",{"@type":241,"streetAddress":275,"addressLocality":276,"addressRegion":277,"postalCode":278,"addressCountry":279},"160 Varick St","New York","NY","10013","USA",[281,284,286],{"@type":282,"name":283},"Country","Worldwide",{"@type":282,"name":285},"GBR",{"@type":282,"name":279},{"self":288,"collection":298,"about":301,"wp:post_type":304,"curies":315},[289],{"href":290,"targetHints":291},"\u002Fwp-json\u002Fwp\u002Fv2\u002Fcategories\u002F37",{"allow":292},[293,294,295,296,297],"GET","POST","PUT","PATCH","DELETE",[299],{"href":300},"\u002Fwp-json\u002Fwp\u002Fv2\u002Fcategories",[302],{"href":303},"\u002Fwp-json\u002Fwp\u002Fv2\u002Ftaxonomies\u002Fcategory",[305,307,309,311,313],{"href":306},"\u002Fwp-json\u002Fwp\u002Fv2\u002Fposts?categories=37",{"href":308},"\u002Fwp-json\u002Fwp\u002Fv2\u002Fwhite_papers?categories=37",{"href":310},"\u002Fwp-json\u002Fwp\u002Fv2\u002Ftools?categories=37",{"href":312},"\u002Fwp-json\u002Fwp\u002Fv2\u002Fwebinars?categories=37",{"href":314},"\u002Fwp-json\u002Fwp\u002Fv2\u002Fevents?categories=37",[316],{"name":317,"href":318,"templated":27},"wp","https:\u002F\u002Fapi.w.org\u002F{rel}",[],[],[322,324,326,327],{"path":323,"name":206},"\u002F",{"path":96,"name":325},"Blog",{"path":108,"name":109},{"path":328,"name":28},null,[330],{"id":10,"name":109,"path":108},{"title":332,"script":333,"meta":407,"link":435},"Turn your Sketch design into a Prototype in minutes - Impression",[334],{"type":335,"key":336,"innerHTML":337},"application\u002Fld+json","yoast-json-ld",{"@context":190,"@graph":338},[339,362,369,370,378,382,400],{"@type":340,"@id":341,"isPartOf":342,"author":344,"headline":28,"datePublished":346,"dateModified":347,"mainEntityOfPage":348,"wordCount":349,"commentCount":42,"publisher":350,"image":352,"thumbnailUrl":354,"articleSection":355,"inLanguage":159,"potentialAction":356},"Article","https:\u002F\u002Fwww.impressiondigital.com\u002Fblog\u002Fturn-sketch-design-prototype-minutes\u002F#article",{"@id":343},"https:\u002F\u002Fwww.impressiondigital.com\u002Fblog\u002Fturn-sketch-design-prototype-minutes\u002F",{"name":33,"@id":345},"https:\u002F\u002Fadmin.impressiondigital.com\u002F#\u002Fschema\u002Fperson\u002F401562873f414eb98c8fb548c6a15fb6","2018-03-20T17:22:30+00:00","2022-02-07T16:48:32+00:00",{"@id":343},1578,{"@id":351},"https:\u002F\u002Fadmin.impressiondigital.com\u002F#organization",{"@id":353},"https:\u002F\u002Fwww.impressiondigital.com\u002Fblog\u002Fturn-sketch-design-prototype-minutes\u002F#primaryimage","https:\u002F\u002Fimages.impression.co.uk\u002F2021\u002F07\u002F5KHK7KHH-050720211625521001_Sketch-blog-post-bg.jpg?auto=compress%2Cformat&q=90",[109],[357],{"@type":358,"name":359,"target":360},"CommentAction","Comment",[361],"https:\u002F\u002Fwww.impressiondigital.com\u002Fblog\u002Fturn-sketch-design-prototype-minutes\u002F#respond",{"@type":363,"@id":343,"url":343,"name":332,"isPartOf":364,"primaryImageOfPage":365,"image":366,"thumbnailUrl":354,"datePublished":346,"dateModified":347,"breadcrumb":367,"inLanguage":199},"WebPage",{"@id":196},{"@id":353},{"@id":353},{"@id":368},"https:\u002F\u002Fwww.impressiondigital.com\u002Fblog\u002Fturn-sketch-design-prototype-minutes\u002F#breadcrumb",{"@type":223,"inLanguage":159,"@id":353,"url":354,"contentUrl":354,"width":177,"height":76},{"@type":201,"@id":368,"itemListElement":371},[372,373,375,377],{"@type":204,"position":205,"name":206,"item":207},{"@type":204,"position":209,"name":325,"item":374},"https:\u002F\u002Fwww.impressiondigital.com\u002Fblog\u002F",{"@type":204,"position":376,"name":109,"item":194},3,{"@type":204,"position":103,"name":28},{"@type":211,"@id":196,"url":207,"name":171,"description":34,"publisher":379,"inLanguage":159,"potentialAction":380},{"@id":213},{"@type":215,"target":381,"query-input":219},{"@type":217,"urlTemplate":218},{"@type":221,"@id":213,"name":171,"url":207,"logo":383,"image":228,"sameAs":384,"@context":233,"email":234,"foundingDate":235,"legalName":236,"vatID":237,"description":238,"telephone":239,"address":385,"location":386,"areaServed":396},{"@type":223,"inLanguage":159,"@id":224,"url":225,"contentUrl":225,"width":226,"height":227,"caption":171},[230,231,232],{"@type":241,"streetAddress":242,"addressLocality":243,"addressRegion":244,"postalCode":245,"addressCountry":246},[387,390,393],{"@type":249,"name":250,"geo":388,"address":389,"photo":228,"telephone":256},{"@type":252,"latitude":253,"longitude":254},{"@type":241,"streetAddress":242,"addressLocality":243,"addressRegion":244,"postalCode":245,"addressCountry":246},{"@type":249,"name":258,"geo":391,"address":392,"photo":267,"telephone":268},{"@type":252,"latitude":260,"longitude":261},{"@type":241,"streetAddress":263,"addressLocality":264,"addressRegion":265,"postalCode":266,"addressCountry":246},{"@type":249,"name":270,"geo":394,"address":395},{"@type":252,"latitude":272,"longitude":273},{"@type":241,"streetAddress":275,"addressLocality":276,"addressRegion":277,"postalCode":278,"addressCountry":279},[397,398,399],{"@type":282,"name":283},{"@type":282,"name":285},{"@type":282,"name":279},{"@type":401,"@id":402,"name":33,"image":403,"description":35,"url":406},"Person","https:\u002F\u002Fwww.impressiondigital.com\u002F#\u002Fschema\u002Fperson\u002F401562873f414eb98c8fb548c6a15fb6",{"@type":223,"inLanguage":159,"@id":404,"url":405,"contentUrl":405,"caption":33},"https:\u002F\u002Fimages.impression.co.uk\u002F2021\u002F11\u002FImpression-Icon.jpg?auto=compress&fit=fit&fm=jpg&h=96&q=90&w=96124cc556989aa8a89f2f74da512d68e4","https:\u002F\u002Fimages.impression.co.uk\u002F2021\u002F11\u002FImpression-Icon.jpg?auto=compress&fit=fit&fm=jpg&h=96&q=90&w=96","https:\u002F\u002Fwww.impressiondigital.com\u002Fabout\u002Four-team\u002Fimpression-team\u002F",[408,409,411,412,413,415,416,417,420,422,424,426,427,428,429,431,432,434],{"name":152,"content":153},{"property":158,"content":410},"en_GB",{"property":161,"content":162},{"property":164,"content":332},{"property":166,"content":414},"How to easily get a prototype for your Sketch design up and running What is Sketch? Sketch is a professional design tool for Mac that utilises a fully vector-based workflow. Its simple layout, features and plugins make it a very capable replacement to other design tools like Photoshop. Here at Impression, we use it for […]",{"property":168,"content":343},{"property":170,"content":171},{"property":418,"content":419},"article:publisher","https:\u002F\u002Fwww.facebook.com\u002Fimpression",{"property":421,"content":346},"article:published_time",{"property":423,"content":347},"article:modified_time",{"property":173,"content":425},"https:\u002F\u002Fimages.impression.co.uk\u002F2021\u002F07\u002F5KHK7KHH-050720211625521001_Sketch-blog-post-bg.jpg?auto=compress%2Cformat",{"property":176,"content":177},{"property":179,"content":76},{"property":182,"content":49},{"name":430,"content":33},"author",{"name":184,"content":185},{"name":433,"content":188},"twitter:creator",{"name":187,"content":188},[]]