Sorry

This feed does not validate.

In addition, interoperability with the widest range of feed readers could be improved by implementing the following recommendations.

Source: http://rss1.smashingmagazine.com/feed/

  1. <?xml version="1.0" encoding="utf-8" standalone="yes" ?>
  2. <rss version="2.0" xmlns:content="http://purl.org/rss/1.0/modules/content/">
  3.  <channel>
  4.    <title>Articles on Smashing Magazine — For Web Designers And Developers</title>
  5.    <link>https://www.smashingmagazine.com/articles/</link>
  6.    <description>Recent content in Articles on Smashing Magazine — For Web Designers And Developers</description>
  7.    <generator>Hugo -- gohugo.io</generator>
  8.    <language>en-us</language>
  9.    <lastBuildDate>Mon, 23 Jul 2018 11:42:51 +0000</lastBuildDate>
  10.    
  11.      <item>
  12.        
  13.          
  14.          <author>Rachel Andrew</author>
  15.        
  16.        <title>Text Editing Tips And Tricks Roundup</title>
  17.        <link>https://www.smashingmagazine.com/2018/07/text-editing-tips-tricks/</link>
  18.        <pubDate>Mon, 23 Jul 2018 13:30:35 +0200</pubDate>
  19.        <guid>https://www.smashingmagazine.com/2018/07/text-editing-tips-tricks/</guid>
  20.        <description>We asked the Smashing Community for their favorite text editing tricks, shortcuts, and features that save them time. Here’s a roundup of what we’ve found quite useful along with a couple of other suggestions you may find handy.
  21. Favourite Keyboard Shortcuts Many of you have favorite keyboard shortcuts. Some of these will be editor or operating system specific, although in many cases you’ll be able to find a similar shortcut with the tools you are using.</description>
  22.        <content:encoded><![CDATA[
  23.          <html>
  24.            <head>
  25.              <meta charset="utf-8">
  26.              <link rel="canonical" href="https://www.smashingmagazine.com/2018/07/text-editing-tips-tricks/" />
  27.              <title>Text Editing Tips And Tricks Roundup</title>
  28.            </head>
  29.            <body>
  30.              <article>
  31.                <header>
  32.                  <h1>Text Editing Tips And Tricks Roundup</h1>
  33.                  
  34.                    
  35.                    <address>Rachel Andrew</address>
  36.                  
  37.                  <time datetime="2018-07-23T13:30:35&#43;02:00" class="op-published">2018-07-23T13:30:35+02:00</time>
  38.                  <time datetime="2018-07-23T11:42:51&#43;00:00" class="op-modified">2018-07-23T11:42:51+00:00</time>
  39.                </header>
  40.                
  41.  
  42. <p><a href="https://twitter.com/smashingmag/status/1016214282290245632">We asked the Smashing Community</a> for their favorite text editing tricks, shortcuts, and features that save them time. Here’s a roundup of what we’ve found quite useful along with a couple of other suggestions you may find handy.</p>
  43.  
  44. <h3 id="favourite-keyboard-shortcuts">Favourite Keyboard Shortcuts</h3>
  45.  
  46. <p>Many of you have favorite keyboard shortcuts. Some of these will be editor or operating system specific, although in many cases you’ll be able to find a similar shortcut with the tools you are using. I’ve rounded up a few from the community below.</p>
  47.  
  48. <p>Ste Grainer shared <a href="https://twitter.com/stegrainer/status/1016263441634484224">a tip about the movement and selection shortcuts</a>:</p>
  49.  
  50. <blockquote>The basic movement/selection shortcuts that many don’t know about:<br /><br />Hold <kbd>Cmd</kbd> + <kbd>Arrow Key</kbd> to move to the beginning/end of a line or top/bottom of a document.<br /><br />Hold <kbd>Opt</kbd> + <kbd>Arrow Key</kbd> to move word to word horizontally and block to block vertically.<br /><br />Shift to select while doing those.</blockquote>
  51.  
  52. <p>From <a href="https://twitter.com/ThisIsJoFrank/status/1020609515115474944">Jo Frank</a>:</p>
  53.  
  54. <blockquote>Select all occurences of current selection (<kbd>Ctrl</kbd> + <kbd>SHIFT</kbd> + <kbd>L</kbd> in VSCode) and duplicate line/selection which I set up as <kbd>Ctrl</kbd> + <kbd>D</kbd>.</blockquote>
  55.  
  56. <p><a href="https://twitter.com/loriskumo/status/1016215865291935744">Loris Gillet</a> shared a few favorite shortcuts for hopping around or deleting text:</p>
  57.  
  58. <blockquote><kbd>⌥</kbd> + <kbd>forward/back arrows</kbd> allows to jump to the next word instead of the next letter<br /><kbd>⌥</kbd> + <kbd>up/down arrows</kbd> allows to jump to the beginning/end of the paragraph<br /><kbd>⌥</kbd> + <kbd>Backspace</kbd> deletes the whole word instead of letters by letters.</p></blockquote>
  59.  
  60. <p>Many of the suggested tips came from web developers &mdash; tips for the editors they used most frequently. We also received suggestions for Android Studio from <a href="https://twitter.com/mahernabeell/status/1016234135772368896">Maher Nabeel</a>:</p>
  61.  
  62. <blockquote>In Android Studio:<br />
  63. <ul>
  64. <li><kbd>Ctrl</kbd> + <kbd>D</kbd> &mdash; Duplicate line</li>
  65. <li><kbd>Ctrl</kbd> + <kbd>Y</kbd> &mdash; Delete line</li>
  66. <li><kbd>Ctrl</kbd> + <kbd>W</kbd> &mdash; Select block</li>
  67. <li><kbd>Ctrl</kbd> + <kbd>O</kbd> &mdash; Override methods</li>
  68. <li><kbd>Ctrl</kbd> + <kbd>ALT</kbd> + <kbd>L</kbd> &mdash; Reformat code</li>
  69. </ul></blockquote>
  70.  
  71.  
  72.  
  73. <aside class="product-panel product-panel__tilted product-panel--book" data-audience="non-subscriber">
  74.    <div class="container product-panel--book__container">
  75.      <div class="panel__description panel__description--book">
  76.    <p>Getting workflow <em>just</em> right ain’t an easy task. So are proper estimates. Or alignment among different departments. That’s why we’ve set up <strong>“this-is-how-I-work”-sessions</strong> — with smart cookies sharing what works well for them. A part of the <a href="http://smashed.by/workflowpanelmembership">Smashing Membership</a>, of course.</p>
  77.      <a href="http://smashed.by/workflowpanelmembership" class="btn btn--green btn--large">
  78.        Explore features&nbsp;→
  79.      </a>
  80.      </div>
  81.      <div class="panel__image panel__image--book">
  82.        <a href="http://smashed.by/workflowpanelmembership" class="books__book__image">
  83.        <div class="books__book__img">
  84.          <img src="https://www.smashingmagazine.com/images/smashing-cat/smashing-tv-box-cat.svg" alt="Smashing TV, with live sessions for professional designers and developers." width="310" height="400">
  85.        </div>
  86.      </a>
  87.      </div>
  88.    </div>
  89.  </aside>
  90.  
  91.  
  92.  
  93.  
  94. <h3 id="editor-shortcut-cheatsheets">Editor Shortcut Cheatsheets</h3>
  95.  
  96. <p>As we can see from the tips already posted, learning the keyboard shortcuts for your editor saves a lot of time. It is always worth taking a look at what is available for your editor, as learning a few of these shortcuts can save a lot of typing over the course of a day writing code.</p>
  97.  
  98. <p>On Twitter, <a href="https://twitter.com/tobomedia">Tobin Saunders</a> recommended the <a href="https://gist.github.com/chrissimpkins/5bf5686bae86b8129bee">Atom Editor Cheat Sheet</a> which is a detailed list of shortcuts for Atom. I also took a look at what was available for other frequently used editors.</p>
  99.  
  100. <h4 id="visual-studio-code">Visual Studio Code</h4>
  101.  
  102. <p>The VS Code website has a number of downloadable cheatsheets in PDF format, if you find it useful to keep a cheatsheet printed out on your desk.</p>
  103.  
  104. <ul>
  105. <li><a href="https://code.visualstudio.com/shortcuts/keyboard-shortcuts-windows.pdf">Windows</a></li>
  106. <li><a href="https://code.visualstudio.com/shortcuts/keyboard-shortcuts-macos.pdf">Mac</a></li>
  107. <li><a href="https://code.visualstudio.com/shortcuts/keyboard-shortcuts-linux.pdf">Linux</a></li>
  108. </ul>
  109.  
  110. <p><a href="https://twitter.com/codebycoffee">Joel Reis</a> noted that if you are switching to VS Code from Sublime Text, Atom, Vim or Visual Studio, then you can <a href="https://code.visualstudio.com/docs/getstarted/keybindings#_keymap-extensions">download the keymap extensions</a>. This means that you can maintain the keyboard shortcuts from your previous editor. This tip was also noted on Smashing Magazine earlier this year when Burke Holland shared with us some of the things that you might be surprised to find that VS Code can do, in his article “<a href="/2018/01/visual-studio-code/">Visual Studio Code Can Do That?</a>”</p>
  111.  
  112. <h4 id="sublime-text">Sublime Text</h4>
  113.  
  114. <p>A good selection of Sublime Text 3 shortcuts for Windows, Mac, and Linux can be found <a href="https://www.weebpal.com/blog/sublime-text-editor-keyboard-shortcut-cheatsheet-win-osx-and-linux">here</a>.</p>
  115.  
  116. <p>We also have an article here on Smashing Magazine in which Jai Panda shares some of his favorite <a href="/2016/06/shortcuts-and-tips-for-improving-your-productivity-with-sublime-text/">Sublime Text Tips and Tricks</a>.</p>
  117.  
  118. <h3 id="customizing-your-environment">Customizing Your Environment</h3>
  119.  
  120. <p>Our keyboards and default computer settings are designed more for typing text than typing code. Some commenters have made changes to their defaults in order to make it faster to type the things they most often need to type.</p>
  121.  
  122. <p><a href="https://twitter.com/desugaring/status/1016217160304082944">Alex Semenikhine</a> made this suggestion:</p>
  123.  
  124. <blockquote>I minimize the number of times I have to hold <kbd>Shift</kbd> and press a button. If I make brackets (<code>(</code> <code>)</code>) far more often than I use <code>9</code> and <code>0</code>, I customize the keyboard to reflect that, my <kbd>9</kbd> is <code>(</code> and <kbd>Shift</kbd> + <kbd>9</kbd> is <code>9</code>, etc.</blockquote>
  125.  
  126. <p><a href="https://twitter.com/PaulvdDool/status/1016574822736977920">Paul van den Tool</a> sets his ‘Key Repeat’ and ‘Delay Until Repeat’ to their highest setting in order that his cursor just “flies across the screen when using the arrows.”</p>
  127.  
  128. <p><a href="https://twitter.com/jaronbarends/status/1016245803680223237">Jarón Barends</a> told us how he, “created <kbd>Alt</kbd> + <kbd>;</kbd> as a shortcut to insert a semicolon at the end of a current line.”</p>
  129.  
  130. <h3 id="using-emmet">Using Emmet</h3>
  131.  
  132. <p>A number of people mentioned the text expansion system of <a href="https://emmet.io/">Emmet</a>. If you hand-code a lot of HTML and CSS then Emmet can save you a great deal of typing time. When writing HTML, Emmet abbreviations will be familiar to anyone who understands CSS. For example, if you want to create an unordered list inside a <code>div</code> element, you could use the following:</p>
  133.  
  134. <pre><code class="language-html">div&#x3E;ul&#x3E;li
  135. </code></pre>
  136.  
  137. <p>Which would then turn into:</p>
  138.  
  139. <pre><code class="language-html">&#x3C;div&#x3E;
  140.  &#x3C;ul&#x3E;
  141.    &#x3C;li&#x3E;&#x3C;/li&#x3E;
  142.  &#x3C;/ul&#x3E;
  143. &#x3C;/div&#x3E;
  144. </code></pre>
  145.  
  146. <p>The abbreviation is exactly the selector that would select the <code>li</code> in CSS. A <code>div</code> with a <code>ul</code> as a direct child, and a <code>li</code> as a direct child of the <code>ul</code>. Take a look at the <a href="https://docs.emmet.io/cheat-sheet/">Emmet Cheat Sheet</a> for more examples.</p>
  147.  
  148. <p>Emmet is built into VS Code and <a href="https://emmet.io/download/">is available as a plugin</a> for many other editors.</p>
  149.  
  150. <div class="sponsors__wide-place"></div>
  151.  
  152.  
  153.  
  154.  
  155. <h3 id="use-a-clipboard-manager">Use A Clipboard Manager</h3>
  156.  
  157. <p><a href="https://twitter.com/ErikVerb">Erik Verbeek</a> suggests using a clipboard manager so that you can grab copied code from the history. He suggests using <a href="http://www.clipmenu.com/">ClipMenu</a> for OS X, which sadly seems to be discontinued.</p>
  158.  
  159. <p>Similar tools include:</p>
  160.  
  161. <ul>
  162. <li><a href="https://itunes.apple.com/us/app/copyclip-clipboard-history-manager/id595191960?mt=12">CopyClip</a> for MacOS</li>
  163. <li><a href="https://itunes.apple.com/in/app/pastebot/id1179623856">PasteBot</a> for MacOS</li>
  164. <li><a href="https://ditto-cp.sourceforge.io/">Ditto</a> for Windows</li>
  165. <li><a href="http://1clipboard.io/">1Clipboard</a> Windows and MacOS (currently in Beta)</li>
  166. </ul>
  167.  
  168. <p>Many editors also include a clipboard history for copy and paste actions within the editor. On Twitter, <a href="https://twitter.com/codevoodoo">@codevoodoo</a> noted that Webstorm had such a feature. There is a <a href="https://marketplace.visualstudio.com/items?itemName=Anjali.clipboard-history">Clipboard History extension for VS Code</a> and <a href="https://atom.io/packages/clipboard-history">a package for Atom</a>; Sublime Text has this built in, as this <a href="https://wesbos.com/sublime-text-clipboard-history/">tutorial on the Sublime Text Clipboard History explains</a>.</p>
  169.  
  170. <h3 id="a-collection-of-recommended-tools">A Collection Of Recommended Tools</h3>
  171.  
  172. <p>There were a few specific tools recommended in the comments, so here is a roundup of useful tools you may not have heard of.</p>
  173.  
  174. <h4 id="vim">Vim</h4>
  175.  
  176. <p>People who like Vim, really really like Vim. It certainly comes with a learning curve, however, if you are very keen on optimizing your keyboard editing then the time invested is likely to be worth it. As <a href="https://twitter.com/JessTelford/status/1020628236542152705">Jess Telford points out</a>, you can do things like type <code>13k</code> to move the cursor 13 lines up.</p>
  177.  
  178. <p>Take a look at the <a href="https://vim.rtorr.com/">Vim Cheat Sheet</a> for a list of commands. You can use Vim emulation in many other editors. The key mapping mentioned earlier for VS Code include mappings for Vim, and there is <a href="https://github.com/t9md/atom-vim-mode-plus">a plugin available for Atom</a> as well.</p>
  179.  
  180. <h4 id="prettier">Prettier</h4>
  181.  
  182. <p><a href="https://prettier.io/">Prettier</a> is an open-source <em>opinionated</em> code formatting tool. Using Prettier ensures that all code is formatted to a consistent style. This is incredibly helpful when working in a team as it means that a consistent style is enforced, without anyone really needing to think about it.</p>
  183.  
  184. <p><a href="https://prettier.io/docs/en/editors.html">There are downloads available for several editors</a>, in order that you can use Prettier within whichever environment you chose.</p>
  185.  
  186. <h4 id="autohotkey">AutoHotkey</h4>
  187.  
  188. <p>I had not heard of the tool <a href="https://autohotkey.com/">AutoHotkey</a> until <a href="https://twitter.com/Hobbesenero/status/1016241767581184005">this suggestion from @Hobbesenero</a>. AutoHotkey is an automation scripting language for Windows. Using the scripting language you can create shortcuts for common tasks, for example, to insert a template.</p>
  189.  
  190. <h4 id="converting-text-formats-with-pandoc">Converting Text Formats With Pandoc</h4>
  191.  
  192. <p>One of my favorite tools is <a href="https://pandoc.org/">Pandoc</a>. I use Pandoc when I need to convert one text format to another. One of the really useful things Pandoc can do is turn HTML or Markdown into EPUB format. I frequently do this in order to turn a set of notes into a file I can read using iBooks on my iPad. I do this in order to have an easily accessible set of notes for my workshops or to turn lengthy documentation into an easy to read offline format to read on an airplane.</p>
  193.  
  194. <p>Pandoc can convert from and to many different file formats. In addition to creating quick EPUB files, I also use it to convert copy from Word documents to Markdown or other useful formats. This can be very useful if you get some messy copy from a client that needs to be converted to enter into a CMS.</p>
  195.  
  196. <div class="sponsors__wide-place"></div>
  197.  
  198.  
  199.  
  200.  
  201. <h4 id="textexpander-and-typinator">TextExpander And Typinator</h4>
  202.  
  203. <p><a href="https://textexpander.com/features/">TextExpander</a> is available for MacOS and Windows and is a tool that helps you create snippets which can be inserted using keyboard shortcuts or common abbreviations. TextExpander was recommended by <a href="https://twitter.com/andersnoren/status/1020606391789203456">Anders Norén</a>. If you prefer a solution that isn’t a subscription service then you might like to give <a href="http://www.ergonis.com/products/typinator/">Typinator</a> a try.</p>
  204.  
  205. <p>These text expansion tools can be useful outside of writing code. If you often find yourself typing the same information in answer to emails or support requests, creating a shortcut to insert that text can quickly pay dividends in terms of time saved.</p>
  206.  
  207. <h4 id="textwasher">Textwasher</h4>
  208.  
  209. <p>Recommended on Facebook by Dennis Germundal, <a href="http://textwasher.com/">Textwasher</a> is a very simple tool for cleaning any formatting from text.</p>
  210.  
  211. <h3 id="add-your-suggestions-in-the-comments">Add Your Suggestions In The Comments</h3>
  212.  
  213. <p>There are a vast number of ways to enhance productivity in the tools we use every day, and it is also incredibly easy to completely overlook them. I hope that among these suggestions there will be something for you to try out. Or perhaps this will be a prompt for you to dig a little deeper into the documentation for your editors and other tools. I have certainly been inspired to do so.</p>
  214.  
  215. <p>If you missed the tweet and have some great tips to share, then add them to the comments. We’d love to hear them!</p>
  216.  
  217. <div class="signature">
  218.  <img src="https://www.smashingmagazine.com/images/logo/logo--red.png" alt="Smashing Editorial">
  219.  <span>(il)</span>
  220. </div>
  221.  
  222.  
  223.              </article>
  224.            </body>
  225.          </html>
  226.        ]]></content:encoded>
  227.      </item>
  228.    
  229.      <item>
  230.        
  231.          
  232.          <author>The Smashing Editorial</author>
  233.        
  234.        <title>Webfonts And Performance: SmashingConf Videos</title>
  235.        <link>https://www.smashingmagazine.com/2018/07/smashingconf-videos-web-fonts-performance/</link>
  236.        <pubDate>Fri, 20 Jul 2018 14:35:35 +0200</pubDate>
  237.        <guid>https://www.smashingmagazine.com/2018/07/smashingconf-videos-web-fonts-performance/</guid>
  238.        <description>Webfonts are difficult to get right. An often overlooked and disruptive piece of web performance, webfonts can slow down your site and leave your visitors confused and agitated. No one wants agitated visitors.
  239. Webfonts Are ▢▢▢ Rocket Science Recorded at our special web performance themed SmashingConf in London, Zach Leatherman demystifies webfonts in order that we can avoid font-related performance issues. He takes us through a detailed guide to best practices when using webfonts, so you can use beautiful fonts without sacrificing performance.</description>
  240.        <content:encoded><![CDATA[
  241.          <html>
  242.            <head>
  243.              <meta charset="utf-8">
  244.              <link rel="canonical" href="https://www.smashingmagazine.com/2018/07/smashingconf-videos-web-fonts-performance/" />
  245.              <title>Webfonts And Performance: SmashingConf Videos</title>
  246.            </head>
  247.            <body>
  248.              <article>
  249.                <header>
  250.                  <h1>Webfonts And Performance: SmashingConf Videos</h1>
  251.                  
  252.                    
  253.                    <address>The Smashing Editorial</address>
  254.                  
  255.                  <time datetime="2018-07-20T14:35:35&#43;02:00" class="op-published">2018-07-20T14:35:35+02:00</time>
  256.                  <time datetime="2018-07-23T11:42:51&#43;00:00" class="op-modified">2018-07-23T11:42:51+00:00</time>
  257.                </header>
  258.                
  259.  
  260. <p>Webfonts are difficult to get right. An often overlooked and disruptive piece of web performance, webfonts can slow down your site and leave your visitors confused and agitated. No one wants agitated visitors.</p>
  261.  
  262. <h3 id="webfonts-are-rocket-science">Webfonts Are ▢▢▢ Rocket Science</h3>
  263.  
  264. <p>Recorded at our special web performance themed <a href="https://smashingconf.com/london-2018/">SmashingConf in London</a>, <strong>Zach Leatherman demystifies webfonts</strong> in order that we can avoid font-related performance issues. He takes us through a detailed guide to best practices when using webfonts, so you can use beautiful fonts without sacrificing performance. If you have ever asked, “<strong>What is the best way to load webfonts?</strong>” then you need to hear this talk. Zach breaks down the various approaches in a straightforward way, so you should feel able to make the best decisions for your own use of webfonts.</p>
  265.  
  266. <figure class="video-container"><iframe data-src="https://player.vimeo.com/video/254727749" width="600" height="480" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe></figure>
  267.  
  268. <p>In addition to this video, you can take a look at Zach’s “<a href="https://www.zachleat.com/web/comprehensive-webfonts/#font-face">Comprehensive Guide To Font Loading Strategies</a>,” and subscribe to his newsletter <a href="https://www.fontspeed.io/">fontspeed.io</a>.</p>
  269.  
  270. <h3 id="fontastic-web-performance">Fontastic Web Performance</h3>
  271.  
  272. <p>Another great introduction to font loading was made by Monica Dinculescu at <a href="https://smashingconf.com/barcelona-2017/">SmashingConf Barcelona</a>. She spoke about which new platform features are here to help us deliver pretty (but also!) fast experiences to everyone.</p>
  273.  
  274. <figure class="video-container"><iframe data-src="https://player.vimeo.com/video/241111413" width="600" height="480" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe></figure>
  275.  
  276. <p>In her talk, Monica also mentions the following resources &mdash; in addition to Zach’s work:</p>
  277.  
  278. <ul>
  279. <li>“<a href="https://helenvholmes.com/writing/type-is-your-right">Type is Your Right</a>,” by Helen Holmes</li>
  280. <li>“<a href="https://jakearchibald.com/2014/minimising-font-downloads/">Minimising Font Downloads</a>,” by Jake Archibald</li>
  281. <li><a href="https://www.typewithpride.com/">Type With Pride</a></li>
  282. <li><a href="https://www.axis-praxis.org/">Axis Praxis</a></li>
  283. <li><a href="http://fontastic.me/">Fontastic</a></li>
  284. </ul>
  285.  
  286. <p>We also find Monca’s <a href="https://meowni.ca/font-style-matcher/">Font Style Matcher</a> tool really useful, helping you find a font that matches your webfont closely to prevent a jarring shift between the sizes.</p>
  287.  
  288. <p>Enjoyed listening to these talks? There are many more  <a href="https://vimeo.com/search?q=smashingconf">SmashingConf videos on Vimeo</a>, and we’re getting ready for the upcoming <a href="https://smashingconf.com/ny-2018/">SmashingConf in New York</a> &mdash; see you there? ;-)</p>
  289.  
  290.  
  291.  
  292. <aside class="product-panel product-panel__tilted product-panel--book" data-audience="non-subscriber">
  293.    <div class="container product-panel--book__container">
  294.      <div class="panel__description panel__description--book">
  295.    <p>With so much happening on the web, what should we really pay attention to? At <a href="https://smashingconf.com/ny-2018/">SmashingConf New York 2018</a> 🇺🇸 we’ll explore everything from PWAs, font loading best practices, web performance and eCommerce UX optimization, to refactoring CSS, design workflows and convincing your clients. With Sarah Drasner, Dan Mall, Sara Soueidan, Jason Grigsby, and <a href="http://smashed.by/confpanelspeakers">many other speakers</a>. Oct <span class="small-caps">23–24</span>.</p>
  296.      <a href="http://smashed.by/confpanelspeakers" class="btn btn--green btn--large">
  297.        Check the speakers&nbsp;→
  298.      </a>
  299.      </div>
  300.      <div class="panel__image panel__image--book">
  301.        <a href="http://smashed.by/confpanelspeakers" class="books__book__image">
  302.        <div class="books__book__img">
  303.          <img src="https://res.cloudinary.com/indysigner/image/upload/v1529498640/sarah-drasner-opt_kaxhos.png" alt="SmashingConf New York 2018, with Dan Mall, Sara Soueidan, Sarah Drasner and many others." width="310" height="400">
  304.        </div>
  305.      </a>
  306.      </div>
  307.    </div>
  308.  </aside>
  309.  
  310.  
  311.  
  312.  
  313. <div class="signature">
  314.  <img src="https://www.smashingmagazine.com/images/logo/logo--red.png" alt="Smashing Editorial">
  315.  <span>(ra, il)</span>
  316. </div>
  317.  
  318.  
  319.              </article>
  320.            </body>
  321.          </html>
  322.        ]]></content:encoded>
  323.      </item>
  324.    
  325.      <item>
  326.        
  327.          
  328.          <author>The Smashing Editorial</author>
  329.        
  330.        <title>Animating SVG Files With SVGator</title>
  331.        <link>https://www.smashingmagazine.com/2018/07/animating-svg-files-svgator/</link>
  332.        <pubDate>Thu, 19 Jul 2018 14:00:00 +0200</pubDate>
  333.        <guid>https://www.smashingmagazine.com/2018/07/animating-svg-files-svgator/</guid>
  334.        <description>(This article is kindly sponsored by SVGator.) Animated SVG files have become very popular. They are entirely scalable (because they are vectors), small and 100% code-based, which allows for so many transformations and tweaks. This, however, comes at a price: the steep learning curve for complete beginners.
  335. SVGator pledges to solve this problem, making it really easy for anyone to make simple animations using a familiar interface. It’s a web-based animation app that lets you import, animate and export SVG animations, and it eliminates the need for beginners to learn to code.</description>
  336.        <content:encoded><![CDATA[
  337.          <html>
  338.            <head>
  339.              <meta charset="utf-8">
  340.              <link rel="canonical" href="https://www.smashingmagazine.com/2018/07/animating-svg-files-svgator/" />
  341.              <title>Animating SVG Files With SVGator</title>
  342.            </head>
  343.            <body>
  344.              <article>
  345.                <header>
  346.                  <h1>Animating SVG Files With SVGator</h1>
  347.                  
  348.                    
  349.                    <address>The Smashing Editorial</address>
  350.                  
  351.                  <time datetime="2018-07-19T14:00:00&#43;02:00" class="op-published">2018-07-19T14:00:00+02:00</time>
  352.                  <time datetime="2018-07-23T11:42:51&#43;00:00" class="op-modified">2018-07-23T11:42:51+00:00</time>
  353.                </header>
  354.                
  355.  
  356. <p>(<em>This article is kindly sponsored by SVGator</em>.) Animated SVG files have become very popular. They are entirely scalable (because they are vectors), small and 100% code-based, which allows for so many transformations and tweaks. This, however, comes at a price: the steep learning curve for complete beginners.</p>
  357.  
  358. <p>SVGator pledges to solve this problem, making it really easy for anyone to make simple animations using a familiar interface. It’s a web-based animation app that lets you import, animate and export SVG animations, and it eliminates the need for beginners to learn to code. We tried it, and we really loved it.</p>
  359.  
  360. <h3 id="start-using-the-app">Start Using The App</h3>
  361.  
  362. <p>Head over to <a href="https://www.svgator.com">https://www.svgator.com</a> to start using the app. The sign-up process is pretty straightforward (figures 1 to 3): Click “Animate now”, then “Create account”, fill in your details, and you’re good to go.</p>
  363.  
  364.  
  365.  
  366.  
  367.  
  368.  
  369.  
  370.  
  371.  
  372.  
  373.  
  374. <figure >
  375. <a href="https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/32e93fc0-0aa4-441d-9f3d-c37b18307fc8/svgator-fig1.png">
  376. <img
  377. srcset="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_400/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/32e93fc0-0aa4-441d-9f3d-c37b18307fc8/svgator-fig1.png 400w,
  378.        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_800/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/32e93fc0-0aa4-441d-9f3d-c37b18307fc8/svgator-fig1.png 800w,
  379.        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_1200/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/32e93fc0-0aa4-441d-9f3d-c37b18307fc8/svgator-fig1.png 1200w,
  380.        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_1600/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/32e93fc0-0aa4-441d-9f3d-c37b18307fc8/svgator-fig1.png 1600w,
  381.        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_2000/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/32e93fc0-0aa4-441d-9f3d-c37b18307fc8/svgator-fig1.png 2000w"
  382. src="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_400/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/32e93fc0-0aa4-441d-9f3d-c37b18307fc8/svgator-fig1.png"
  383. sizes="100vw"
  384. alt="Figure 1"
  385. />
  386. </a>
  387.  
  389. <figcaption class="op-vertical-bottom">
  390. Fig. 1 - click “Animate now”. (<a href='https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/32e93fc0-0aa4-441d-9f3d-c37b18307fc8/svgator-fig1.png'>Large preview</a>)
  391. </figcaption>
  393. </figure>
  394.  
  395.  
  396.  
  397.  
  398.  
  399.  
  400.  
  401.  
  402.  
  403.  
  404.  
  405.  
  406. <figure >
  407. <a href="https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/c3479083-ff0c-4c56-ad6a-be16e5d39125/svgator-fig2.png">
  408. <img
  409. srcset="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_400/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/c3479083-ff0c-4c56-ad6a-be16e5d39125/svgator-fig2.png 400w,
  410.        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_800/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/c3479083-ff0c-4c56-ad6a-be16e5d39125/svgator-fig2.png 800w,
  411.        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_1200/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/c3479083-ff0c-4c56-ad6a-be16e5d39125/svgator-fig2.png 1200w,
  412.        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_1600/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/c3479083-ff0c-4c56-ad6a-be16e5d39125/svgator-fig2.png 1600w,
  413.        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_2000/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/c3479083-ff0c-4c56-ad6a-be16e5d39125/svgator-fig2.png 2000w"
  414. src="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_400/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/c3479083-ff0c-4c56-ad6a-be16e5d39125/svgator-fig2.png"
  415. sizes="100vw"
  416. alt="Figure 2"
  417. />
  418. </a>
  419.  
  421. <figcaption class="op-vertical-bottom">
  422. Fig. 2 - Click 'Create account'. (<a href='https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/c3479083-ff0c-4c56-ad6a-be16e5d39125/svgator-fig2.png'>Large preview</a>)
  423. </figcaption>
  425. </figure>
  426.  
  427.  
  428.  
  429.  
  430.  
  431.  
  432.  
  433.  
  434.  
  435.  
  436.  
  437.  
  438. <figure >
  439. <a href="https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/3259438d-f737-4f84-b29c-05c465a7a5a5/svgator-fig3.png">
  440. <img
  441. srcset="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_400/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/3259438d-f737-4f84-b29c-05c465a7a5a5/svgator-fig3.png 400w,
  442.        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_800/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/3259438d-f737-4f84-b29c-05c465a7a5a5/svgator-fig3.png 800w,
  443.        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_1200/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/3259438d-f737-4f84-b29c-05c465a7a5a5/svgator-fig3.png 1200w,
  444.        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_1600/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/3259438d-f737-4f84-b29c-05c465a7a5a5/svgator-fig3.png 1600w,
  445.        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_2000/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/3259438d-f737-4f84-b29c-05c465a7a5a5/svgator-fig3.png 2000w"
  446. src="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_400/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/3259438d-f737-4f84-b29c-05c465a7a5a5/svgator-fig3.png"
  447. sizes="100vw"
  448. alt="Figure 3"
  449. />
  450. </a>
  451.  
  453. <figcaption class="op-vertical-bottom">
  454. Fig 3. - Enter your details. (<a href='https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/3259438d-f737-4f84-b29c-05c465a7a5a5/svgator-fig3.png'>Large preview</a>)
  455. </figcaption>
  457. </figure>
  458.  
  459.  
  460. <p>You’ll be taken directly to the sample “Stopwatch” project, which let’s you explore SVGator’s features. If you can’t find your way within the app, there’s a neat tutorial (figure 4) that will guide you in how to start using it: Import a static SVG, add elements to the timeline, and add animators to elements and keyframes to animate the four currently available properties (scale, opacity, position and rotation).</p>
  461.  
  462. <p>If you&rsquo;ve ever used an animation app, the user interface of SVGator should feel pretty familiar to you, and everything will probably feel in its right place. You only add elements that you’ll animate, which keeps the timeline clean and easy to scan.</p>
  463.  
  464.  
  465.  
  466.  
  467.  
  468.  
  469.  
  470.  
  471.  
  472.  
  473.  
  474. <figure >
  475. <a href="https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/4641c5a2-c1db-41c0-b409-8b7e89ae512f/svgator-fig4.png">
  476. <img
  477. srcset="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_400/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/4641c5a2-c1db-41c0-b409-8b7e89ae512f/svgator-fig4.png 400w,
  478.        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_800/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/4641c5a2-c1db-41c0-b409-8b7e89ae512f/svgator-fig4.png 800w,
  479.        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_1200/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/4641c5a2-c1db-41c0-b409-8b7e89ae512f/svgator-fig4.png 1200w,
  480.        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_1600/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/4641c5a2-c1db-41c0-b409-8b7e89ae512f/svgator-fig4.png 1600w,
  481.        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_2000/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/4641c5a2-c1db-41c0-b409-8b7e89ae512f/svgator-fig4.png 2000w"
  482. src="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_400/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/4641c5a2-c1db-41c0-b409-8b7e89ae512f/svgator-fig4.png"
  483. sizes="100vw"
  484. alt="Figure 4"
  485. />
  486. </a>
  487.  
  489. <figcaption class="op-vertical-bottom">
  490. Fig. 4 - Tutorial. (<a href='https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/4641c5a2-c1db-41c0-b409-8b7e89ae512f/svgator-fig4.png'>Large preview</a>)
  491. </figcaption>
  493. </figure>
  494.  
  495.  
  496. <p>The starter animated clock project does a great job of introducing you to SVGator. You can always come back to it and use it as a reference.</p>
  497.  
  498. <p>Now that we have the basics out of the way, let’s jump into making our own animations!</p>
  499.  
  500. <h3 id="what-we-ll-make">What We’ll Make</h3>
  501.  
  502. <p>Check out this simple envelope icon we designed in Sketch (figure 5). It starts off closed, then it opens, and a letter pops up, followed by its contents. Then, the letter jumps out of the envelope and scales up to show the green checkbox.</p>
  503.  
  504. <figure><a href="https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/8988cffe-15c3-45f1-9fec-e2c3d24c79d7/svgator-fig5.gif"><img src="https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/8988cffe-15c3-45f1-9fec-e2c3d24c79d7/svgator-fig5.gif" width=“516" height="516" alt="Figure 5" /></a><figcaption>Fig.5 - The whole animation. (<a href="https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/8988cffe-15c3-45f1-9fec-e2c3d24c79d7/svgator-fig5.gif">Large preview</a>)
  505. </figcaption></figure>
  506.  
  507. <p>Here’s a summary of the process:</p>
  508.  
  509. <ul>
  510. <li>We’ll begin by making a simple storyboard to visualize our icon in its different states. While we’re at it, we’ll constantly sync up with SVGator and import elements of the icon in order to ensure that everything works as expected.</li>
  511. <li>Then, we’ll create a master copy of the icon, which will include every single element that we’ll need, and export it to SVGator. We might need to modify this master copy a lot throughout the process.</li>
  512. <li>Next, we’ll do the whole animation in a single SVGator project and export it, making sure it works as expected.</li>
  513. <li>Finally, we’ll include the icon in a simple precoded newsletter form to see how it looks in a real web environment. We’ll also see it resize for smaller resolutions.</li>
  514. <li>You can download everything <a href="http://files.smashingmagazine.com/svgator-demo.zip">here</a>.</li>
  515. </ul>
  516.  
  517. <p>Let’s get started!</p>
  518.  
  519. <h3 id="part-1-create-and-export-an-icon-from-sketch">Part 1: Create And Export An Icon From Sketch</h3>
  520.  
  521. <ul>
  522. <li>There are some differences between designing a simple SVG icon and designing an SVG icon that you plan to animate later. For starters, it’s important to note that it should be made up of fairly simple shapes, and you should plan your animations around simple transitions based on manipulating <strong>only</strong> the following: scale, rotation, position and opacity. These are the only four properties that SVGator currently let’s you animate, so if you’ve drafted something more complex, you won’t be able to do it.</li>
  523. </ul>
  524.  
  525. <h4 id="make-a-simple-storyboard-to-save-time">Make A Simple Storyboard To Save Time</h4>
  526.  
  527. <p><a href="https://en.wikipedia.org/wiki/Storyboard">Storyboarding</a> lets you visualize all of your transitions before you actually import them in SVGator. It also makes it easy to test transformations before committing to making the whole animation. It often happens that you’ll discover an issue with the illustration that should have been done differently in Sketch, and so you have to go back in and change it. Then, you need to reimport the whole file in SVGator and start with the animations from scratch. Because you wouldn’t want to do this every single time, storyboarding helps by forcing you to plan things in advance.</p>
  528.  
  529.  
  530.  
  531.  
  532.  
  533.  
  534.  
  535.  
  536.  
  537.  
  538.  
  539. <figure class="article__image break-out">
  540. <a href="https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/3f740811-ec18-4fae-a3bf-93c0441e93d4/svgator-fig6.png">
  541. <img
  542. srcset="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_400/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/3f740811-ec18-4fae-a3bf-93c0441e93d4/svgator-fig6.png 400w,
  543.        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_800/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/3f740811-ec18-4fae-a3bf-93c0441e93d4/svgator-fig6.png 800w,
  544.        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_1200/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/3f740811-ec18-4fae-a3bf-93c0441e93d4/svgator-fig6.png 1200w,
  545.        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_1600/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/3f740811-ec18-4fae-a3bf-93c0441e93d4/svgator-fig6.png 1600w,
  546.        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_2000/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/3f740811-ec18-4fae-a3bf-93c0441e93d4/svgator-fig6.png 2000w"
  547. src="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_400/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/3f740811-ec18-4fae-a3bf-93c0441e93d4/svgator-fig6.png"
  548. sizes="100vw"
  549. alt="Figure 6"
  550. />
  551. </a>
  552.  
  554. <figcaption class="op-vertical-bottom">
  555. Fig. 6 - Storyboard. (<a href='https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/3f740811-ec18-4fae-a3bf-93c0441e93d4/svgator-fig6.png'>Large preview</a>)
  556. </figcaption>
  558. </figure>
  559.  
  560.  
  561. <p>For example, I initially planned for the envelope to stay more towards the bottom of the screen, but after importing it to SVGator and playing with the closing and opening, it was clear that it needs to stay in the middle while closed and slightly down when opened — a detail that was omitted in the static images.</p>
  562.  
  563. <p><strong>Tip:</strong> <em>Check out the storyboard in the Sketch file → Artboard “storyboard”</em>.</p>
  564.  
  565. <h4 id="layer-naming-and-organization">Layer Naming And Organization</h4>
  566.  
  567. <p>If you name your layers in Sketch, it will work as expected, and all names you’ve assigned in Sketch will be transferred to your project in SVGator. But if you use SVGO Compressor or a similar plugin to make the SVG files smaller, the names will <strong>disappear</strong>, and SVGator will replace them with ones based on the HTML tag, and you’ll end up with something similar to what’s shown in figure 7.</p>
  568.  
  569. <p><strong>Tip:</strong> <em>If you’re already using SVGO Compressor for other SVGs and don’t want to disable it, just drag and drop the file from the export preview area in Sketch to your desired location (figure 8). This will circumvent SVGO Compressor and export the SVG as is!</em></p>
  570.  
  571.  
  572.  
  573.  
  574.  
  575.  
  576.  
  577.  
  578.  
  579.  
  580.  
  581. <figure >
  582. <a href="https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/a441bcb5-0a4d-4f67-9b18-28d5bc2e49c8/svgator-fig7.png">
  583. <img
  584. srcset="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_400/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/a441bcb5-0a4d-4f67-9b18-28d5bc2e49c8/svgator-fig7.png 400w,
  585.        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_800/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/a441bcb5-0a4d-4f67-9b18-28d5bc2e49c8/svgator-fig7.png 800w,
  586.        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_1200/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/a441bcb5-0a4d-4f67-9b18-28d5bc2e49c8/svgator-fig7.png 1200w,
  587.        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_1600/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/a441bcb5-0a4d-4f67-9b18-28d5bc2e49c8/svgator-fig7.png 1600w,
  588.        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_2000/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/a441bcb5-0a4d-4f67-9b18-28d5bc2e49c8/svgator-fig7.png 2000w"
  589. src="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_400/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/a441bcb5-0a4d-4f67-9b18-28d5bc2e49c8/svgator-fig7.png"
  590. sizes="100vw"
  591. alt="Figure 7"
  592. />
  593. </a>
  594.  
  596. <figcaption class="op-vertical-bottom">
  597. Fig. 7 - By using SVGO compressor, you’ll lose the names of your layers in SVGator. (<a href='https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/a441bcb5-0a4d-4f67-9b18-28d5bc2e49c8/svgator-fig7.png'>Large preview</a>)
  598. </figcaption>
  600. </figure>
  601.  
  602.  
  603. <figure><a href="https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/358e72d1-d06e-4ab7-b52e-2462704ff86c/svgator-fig8.gif"><img src="https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/358e72d1-d06e-4ab7-b52e-2462704ff86c/svgator-fig8.gif" width=“741" height="438" alt="Figure 8" /></a><figcaption>Fig. 8 - Dragging and dropping the file from the export preview area in Sketch circumvents use of SVGO Compressor. (<a href="https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/358e72d1-d06e-4ab7-b52e-2462704ff86c/svgator-fig8.gif">Large preview</a>)
  604. </figcaption></figure>
  605.  
  606. <p>Using groups is great, too, because the app recognizes them, and you can even simultaneously animate a layer and its parent group, adding a bit more complexity.</p>
  607.  
  608. <p>We haven’t encountered any limitation on the number of layers used, but then again, our icon is pretty simple.</p>
  609.  
  610. <h4 id="preparing-the-icon-for-animation">Preparing The Icon for Animation</h4>
  611.  
  612. <p>Now that we have the idea in a storyboard and we’ve prepared the master file, let’s export it in a way that we can make sense of in SVGator. Be sure to double-check the layer hierarchy. Think of how a certain layer will interact with another and where it should be placed in the Layers panel. In figure 9, you’ll see we’ve selected “top_opened” — that’s the opened top flap of the envelope. It should stand behind the white sheet of paper. And vice versa, “top_closed” is the closed flap of the envelope, and it should stay on top of everything; that’s why it’s the first layer in our “content” group.</p>
  613.  
  614. <p><strong>Tip:</strong> <em>You might be wondering why the whole top flap is made of two layers. It’s because we can’t rotate shapes or really transform them in 3D space using SVGator. We’re emulating this by squashing the first layer and then stretching the second one, thus creating the illusion of a 3D transformation</em>.</p>
  615.  
  616.  
  617.  
  618.  
  619.  
  620.  
  621.  
  622.  
  623.  
  624.  
  625.  
  626. <figure >
  627. <a href="https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/df7abb68-ae05-494b-a35b-c0bfdd693c35/svgator-fig9.png">
  628. <img
  629. srcset="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_400/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/df7abb68-ae05-494b-a35b-c0bfdd693c35/svgator-fig9.png 400w,
  630.        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_800/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/df7abb68-ae05-494b-a35b-c0bfdd693c35/svgator-fig9.png 800w,
  631.        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_1200/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/df7abb68-ae05-494b-a35b-c0bfdd693c35/svgator-fig9.png 1200w,
  632.        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_1600/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/df7abb68-ae05-494b-a35b-c0bfdd693c35/svgator-fig9.png 1600w,
  633.        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_2000/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/df7abb68-ae05-494b-a35b-c0bfdd693c35/svgator-fig9.png 2000w"
  634. src="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_400/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/df7abb68-ae05-494b-a35b-c0bfdd693c35/svgator-fig9.png"
  635. sizes="100vw"
  636. alt="Figure 9"
  637. />
  638. </a>
  639.  
  641. <figcaption class="op-vertical-bottom">
  642. Fig.9 - Top flap’s “fake 3D” opening effect. (<a href='https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/df7abb68-ae05-494b-a35b-c0bfdd693c35/svgator-fig9.png'>Large preview</a>)
  643. </figcaption>
  645. </figure>
  646.  
  647.  
  648.  
  649.  
  650.  
  651.  
  652.  
  653.  
  654.  
  655.  
  656.  
  657.  
  658. <figure >
  659. <a href="https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/d6954b37-1959-4390-9bf0-7a1bfa115af2/svgator-fig10.png">
  660. <img
  661. srcset="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_400/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/d6954b37-1959-4390-9bf0-7a1bfa115af2/svgator-fig10.png 400w,
  662.        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_800/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/d6954b37-1959-4390-9bf0-7a1bfa115af2/svgator-fig10.png 800w,
  663.        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_1200/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/d6954b37-1959-4390-9bf0-7a1bfa115af2/svgator-fig10.png 1200w,
  664.        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_1600/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/d6954b37-1959-4390-9bf0-7a1bfa115af2/svgator-fig10.png 1600w,
  665.        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_2000/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/d6954b37-1959-4390-9bf0-7a1bfa115af2/svgator-fig10.png 2000w"
  666. src="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_400/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/d6954b37-1959-4390-9bf0-7a1bfa115af2/svgator-fig10.png"
  667. sizes="100vw"
  668. alt="Figure 10"
  669. />
  670. </a>
  671.  
  673. <figcaption class="op-vertical-bottom">
  674. Fig.10 - Letter scaling “fake 3D” effect. (<a href='https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/d6954b37-1959-4390-9bf0-7a1bfa115af2/svgator-fig10.png'>Large preview</a>)
  675. </figcaption>
  677. </figure>
  678.  
  679.  
  680. <p>If you look at our storyboard, the original idea was to have the sheet jump out of the envelope and scale up to eventually hide it. We’re going to achieve that by pushing the original sheet up, while having another hidden sheet (“sheet_top”) in front of the envelope (figure 10). The moment they meet at the topmost point, they’ll switch, and the front sheet will fall in front of the envelope. That’s a visual illusion, too — we can’t really move the sheet in z-space, so that’s one way to emulate it.</p>
  681.  
  682. <p>Taking all of this into account, we can now export the icon. It’s practically a single SVG that contains all of the elements we’ll need, stacked on top of each other in a useful way.</p>
  683.  
  684. <p><strong>Tip:</strong> <em>Be sure to have all elements marked visible (not hidden) before exporting. You can look at the file we’ve used as the export in the Sketch file → Artboard “export”</em>.</p>
  685.  
  686. <h3 id="part-2-animating-the-icon">Part 2: Animating The Icon</h3>
  687.  
  688. <p>Open SVGator and click “Import new” to start a new project (figure 11):</p>
  689.  
  690.  
  691.  
  692.  
  693.  
  694.  
  695.  
  696.  
  697.  
  698.  
  699.  
  700. <figure >
  701. <a href="https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/51182df9-b18a-4ffd-ad19-d2fe630c8480/svgator-fig11.png">
  702. <img
  703. srcset="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_400/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/51182df9-b18a-4ffd-ad19-d2fe630c8480/svgator-fig11.png 400w,
  704.        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_800/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/51182df9-b18a-4ffd-ad19-d2fe630c8480/svgator-fig11.png 800w,
  705.        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_1200/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/51182df9-b18a-4ffd-ad19-d2fe630c8480/svgator-fig11.png 1200w,
  706.        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_1600/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/51182df9-b18a-4ffd-ad19-d2fe630c8480/svgator-fig11.png 1600w,
  707.        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_2000/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/51182df9-b18a-4ffd-ad19-d2fe630c8480/svgator-fig11.png 2000w"
  708. src="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_400/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/51182df9-b18a-4ffd-ad19-d2fe630c8480/svgator-fig11.png"
  709. sizes="100vw"
  710. alt="Figure 11"
  711. />
  712. </a>
  713.  
  715. <figcaption class="op-vertical-bottom">
  716. Fig.11 - Starting a brand new project. (<a href='https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/51182df9-b18a-4ffd-ad19-d2fe630c8480/svgator-fig11.png'>Large preview</a>)
  717. </figcaption>
  719. </figure>
  720.  
  721.  
  722.  
  723.  
  724.  
  725.  
  726.  
  727.  
  728.  
  729.  
  730.  
  731.  
  732. <figure >
  733. <a href="https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/39ad0886-5784-442f-818a-e5adfb6ae7b4/svgator-fig12.png">
  734. <img
  735. srcset="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_400/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/39ad0886-5784-442f-818a-e5adfb6ae7b4/svgator-fig12.png 400w,
  736.        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_800/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/39ad0886-5784-442f-818a-e5adfb6ae7b4/svgator-fig12.png 800w,
  737.        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_1200/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/39ad0886-5784-442f-818a-e5adfb6ae7b4/svgator-fig12.png 1200w,
  738.        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_1600/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/39ad0886-5784-442f-818a-e5adfb6ae7b4/svgator-fig12.png 1600w,
  739.        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_2000/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/39ad0886-5784-442f-818a-e5adfb6ae7b4/svgator-fig12.png 2000w"
  740. src="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_400/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/39ad0886-5784-442f-818a-e5adfb6ae7b4/svgator-fig12.png"
  741. sizes="100vw"
  742. alt="Figure 12"
  743. />
  744. </a>
  745.  
  747. <figcaption class="op-vertical-bottom">
  748. Fig.12 - How the file looks initially. (<a href='https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/39ad0886-5784-442f-818a-e5adfb6ae7b4/svgator-fig12.png'>Large preview</a>)
  749. </figcaption>
  751. </figure>
  752.  
  753.  
  754. <p>If you’ve done everything correctly, you should see something like figure 12 and the short clip below (clip 1): all layers stacked on top of each other and ready for use. If, by chance, you don’t see everything, go back into Sketch and double-check that all layers are visible.</p>
  755.  
  756. <figure class="video-container"><iframe data-src="https://player.vimeo.com/video/280163400" width="600" height="480" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe></figure>
  757.  
  758. <h4 id="animating-the-opening-of-the-envelope">Animating The Opening Of The Envelope</h4>
  759.  
  760. <p>We’ll start by importing some elements in the timeline. The way SVGator functions is that you’ll start with an empty timeline. You choose which elements to add from the “Elements” dropdown. You’ll have to manually check them using the eye icon to see which is the layer you’re looking for. Alternatively, you can click directly on the element on the screen, which will do the same.</p>
  761.  
  762. <figure class="video-container"><iframe data-src="https://player.vimeo.com/video/280163872" width="600" height="480" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe></figure>
  763.  
  764. <p>We’re going to work on steps 1 and 2 from the storyboard, specifically on the flap’s opening. Let’s disable the layers we don’t need for now; we’ll come back to them later (see clip 1 to see how to do that). We should be left with just the basic envelope, which means you should disable the following layers: “sheet_top_content”, “sheet_top_bgr” and “sheet_bottom_bgr”.</p>
  765.  
  766. <p>Then, click on “top_opened”, and click the plus icon to the left, or double-click the element to add it to the timeline. Do the same for “top_closed”. Now you should have both layers in the timeline (figure 13).</p>
  767.  
  768. <p><strong>Tip:</strong> <em>If you want to fast-forward through the whole process, check out clip 2 (the actions might not be in the same order as described below)</em>.</p>
  769.  
  770.  
  771.  
  772.  
  773.  
  774.  
  775.  
  776.  
  777.  
  778.  
  779.  
  780. <figure >
  781. <a href="https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/f7de026f-1d78-44ce-a216-bf3fc1a019f4/svgator-fig13.png">
  782. <img
  783. srcset="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_400/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/f7de026f-1d78-44ce-a216-bf3fc1a019f4/svgator-fig13.png 400w,
  784.        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_800/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/f7de026f-1d78-44ce-a216-bf3fc1a019f4/svgator-fig13.png 800w,
  785.        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_1200/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/f7de026f-1d78-44ce-a216-bf3fc1a019f4/svgator-fig13.png 1200w,
  786.        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_1600/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/f7de026f-1d78-44ce-a216-bf3fc1a019f4/svgator-fig13.png 1600w,
  787.        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_2000/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/f7de026f-1d78-44ce-a216-bf3fc1a019f4/svgator-fig13.png 2000w"
  788. src="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_400/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/f7de026f-1d78-44ce-a216-bf3fc1a019f4/svgator-fig13.png"
  789. sizes="100vw"
  790. alt="Figure 13"
  791. />
  792. </a>
  793.  
  795. <figcaption class="op-vertical-bottom">
  796. Fig. 13 - Both parts of the flap on the timeline. (<a href='https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/f7de026f-1d78-44ce-a216-bf3fc1a019f4/svgator-fig13.png'>Large preview</a>)
  797. </figcaption>
  799. </figure>
  800.  
  801.  
  802. <ul>
  803. <li>Click on “top_closed” in the timeline and then on the “Animators” dropdown. Add a Scale animator.</li>
  804. <li>Add a Scale animator for “top_opened”, too.</li>
  805. <li>Then, click on the little target icon next to the layer name in the timeline. This is the transform-origin property, and it lets you set a pivot point for the element’s transformation. Let’s pick top-center for “top_closed”, because we going to shrink it upwards (figure 14), and then bottom-center for “top_opened”.</li>
  806. <li>Now, with “top_closed” selected, click on the plus sign on the Scale property to add a keyframe to the timeline. A yellow diamond shape will appear in the timeline. Let’s move to 0.4s and click the plus sign again (figure 15). That second keyframe will be our final point of transformation, when the flap has already opened. So, let’s make its Scale 100% 0%, leaving the first keyframe as 100% 100%.</li>
  807. <li>Turn on Ease-in for “top_closed” by clicking the little target icon next to the layer name (figure 16).</li>
  808. <li>While on 0.4s, add an Opacity keyframe for “top_closed” by double-clicking Opacity in the “Animators” menu and then clicking the plus sign next to the Opacity property in the timeline. Change it to 0%.</li>
  809. <li>Go a few frames back, and add 100% for Opacity. We’re doing that to avoid glitching in the top flap part.</li>
  810. </ul>
  811.  
  812. <p><strong>Tip:</strong> <em>Easing will make the motion look more natural, and because we’re designing an animation that emulates the movement of a single element, it’s natural to ease-in the beginning and ease-out the ending of the animation</em>.</p>
  813.  
  814.  
  815.  
  816.  
  817.  
  818.  
  819.  
  820.  
  821.  
  822.  
  823.  
  824. <figure >
  825. <a href="https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/39112432-68e8-4aaa-93c2-76e5b4e02cba/svgator-fig14.png">
  826. <img
  827. srcset="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_400/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/39112432-68e8-4aaa-93c2-76e5b4e02cba/svgator-fig14.png 400w,
  828.        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_800/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/39112432-68e8-4aaa-93c2-76e5b4e02cba/svgator-fig14.png 800w,
  829.        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_1200/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/39112432-68e8-4aaa-93c2-76e5b4e02cba/svgator-fig14.png 1200w,
  830.        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_1600/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/39112432-68e8-4aaa-93c2-76e5b4e02cba/svgator-fig14.png 1600w,
  831.        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_2000/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/39112432-68e8-4aaa-93c2-76e5b4e02cba/svgator-fig14.png 2000w"
  832. src="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_400/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/39112432-68e8-4aaa-93c2-76e5b4e02cba/svgator-fig14.png"
  833. sizes="100vw"
  834. alt="Figure 14"
  835. />
  836. </a>
  837.  
  839. <figcaption class="op-vertical-bottom">
  840. fig. 14 (<a href='https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/39112432-68e8-4aaa-93c2-76e5b4e02cba/svgator-fig14.png'>Large preview</a>)
  841. </figcaption>
  843. </figure>
  844.  
  845.  
  846.  
  847.  
  848.  
  849.  
  850.  
  851.  
  852.  
  853.  
  854.  
  855.  
  856. <figure >
  857. <a href="https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/fec4fe83-5f35-4461-863e-2784a7c6e994/svgator-fig15.png">
  858. <img
  859. srcset="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_400/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/fec4fe83-5f35-4461-863e-2784a7c6e994/svgator-fig15.png 400w,
  860.        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_800/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/fec4fe83-5f35-4461-863e-2784a7c6e994/svgator-fig15.png 800w,
  861.        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_1200/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/fec4fe83-5f35-4461-863e-2784a7c6e994/svgator-fig15.png 1200w,
  862.        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_1600/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/fec4fe83-5f35-4461-863e-2784a7c6e994/svgator-fig15.png 1600w,
  863.        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_2000/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/fec4fe83-5f35-4461-863e-2784a7c6e994/svgator-fig15.png 2000w"
  864. src="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_400/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/fec4fe83-5f35-4461-863e-2784a7c6e994/svgator-fig15.png"
  865. sizes="100vw"
  866. alt="Figure 15"
  867. />
  868. </a>
  869.  
  871. <figcaption class="op-vertical-bottom">
  872. fig. 15 (<a href='https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/fec4fe83-5f35-4461-863e-2784a7c6e994/svgator-fig15.png'>Large preview</a>)
  873. </figcaption>
  875. </figure>
  876.  
  877.  
  878.  
  879.  
  880.  
  881.  
  882.  
  883.  
  884.  
  885.  
  886.  
  887.  
  888. <figure >
  889. <a href="https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/8882eaa4-6081-4e41-a41b-23960dcc9f4d/svgator-fig16.png">
  890. <img
  891. srcset="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_400/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/8882eaa4-6081-4e41-a41b-23960dcc9f4d/svgator-fig16.png 400w,
  892.        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_800/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/8882eaa4-6081-4e41-a41b-23960dcc9f4d/svgator-fig16.png 800w,
  893.        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_1200/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/8882eaa4-6081-4e41-a41b-23960dcc9f4d/svgator-fig16.png 1200w,
  894.        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_1600/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/8882eaa4-6081-4e41-a41b-23960dcc9f4d/svgator-fig16.png 1600w,
  895.        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_2000/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/8882eaa4-6081-4e41-a41b-23960dcc9f4d/svgator-fig16.png 2000w"
  896. src="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_400/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/8882eaa4-6081-4e41-a41b-23960dcc9f4d/svgator-fig16.png"
  897. sizes="100vw"
  898. alt="Figure 16"
  899. />
  900. </a>
  901.  
  903. <figcaption class="op-vertical-bottom">
  904. fig. 16 (<a href='https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/8882eaa4-6081-4e41-a41b-23960dcc9f4d/svgator-fig16.png'>Large preview</a>)
  905. </figcaption>
  907. </figure>
  908.  
  909.  
  910. <p>Now, let’s deal with the “top_opened” part, the ending of the animation. As we noted earlier, we’re doing this in two parts to emulate a 3D opening of the flap.</p>
  911.  
  912. <ul>
  913. <li>Grab the “top_opened” layer in the timeline, go to 0.4s in the timeline, and add a Scale keyframe, then another keyframe at 0.8s<em>.</em> Make the Scale at 0.4s be 100% 0% and let the 0.8s Scale value remain 100% 100%.</li>
  914. <li>Turn on Ease-out. Hit play to preview the animation.</li>
  915. </ul>
  916.  
  917. <p>Looks cool, but now the whole envelope needs to move down so that it fits within the circled background. Find a group called just “g” in the Elements, and add a Position animator to it. Add a position keyframe to 0.2s and then to 0.8s. Change the 0.8s value to 0 35. Add Ease-in-out for a smooth animation. And that’s it! We have successfully animated the envelope open and even made it move a bit downwards.</p>
  918.  
  919. <h4 id="adding-complexity-the-letter-pops-up">Adding Complexity: The Letter Pops Up</h4>
  920.  
  921. <p>Opening envelope is neat, but we can make it more interesting by introducing a sheet of paper. To do so, we’ll need to reveal the sheet layer, which we called “sheet_bottom_bgr”.</p>
  922.  
  923. <ul>
  924. <li>Click on the eye icon next to “sheet_bottom_bgr” in the “Elements” menu to make it visible. Add it to the timeline (double-click on it).</li>
  925. <li>Now, go somewhere in the middle of the animation — for example, 0.5s — and add a Position keyframe. Add another one after 0.4s. Select the first keyframe and offset the layer by 140 pixels on the y-axis (0 140).</li>
  926. <li>Add an Ease-in-out effect. Now we have a bit more interesting animation.</li>
  927. </ul>
  928.  
  929. <p><strong>Tip:</strong> <em>If you prefer to watch this in a video, check out clip 3 below</em>.</p>
  930.  
  931. <figure class="video-container"><iframe data-src="https://player.vimeo.com/video/280166780" width="600" height="480" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe></figure>
  932.  
  933. <h4 id="even-more-complexity-animating-the-scaling-of-the-letter">Even More Complexity: Animating the Scaling of the Letter</h4>
  934.  
  935. <p>To take it further, let’s animate the letter popping out of the envelope, and let’s reveal some lines of text “written” in the letter. To do that, we’ll have to modify the previous animation a bit. (If you want to fast-forward, you could just watch the screencast and repeat it.)</p>
  936.  
  937. <figure class="video-container"><iframe data-src="https://player.vimeo.com/video/280167092" width="600" height="480" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe></figure>
  938.  
  939. <ul>
  940. <li>Start by moving the last Position keyframe of “sheet_bottom_bgr” from 0.9s to 1.1s, and change it to 0 -190. What we’re doing with this is taking the sheet out of the envelope, so that we can quickly swap it with the other sheet we’ve already prepared.</li>
  941. <li>Go to 1.1s, turn on “sheet_top_content” and “sheet_top_bgr” and add them to the timeline with Position keyframes for both of 0 -190.</li>
  942. <li>Add keyframes at 1.5s and make them 0 40.</li>
  943. <li>Enable Ease-out for both.</li>
  944. </ul>
  945.  
  946. <p>This is the front sheet’s movement, and it should look like what you see in figure 17.</p>
  947.  
  948. <figure><a href="https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/62f19460-4bac-45d2-89c9-1359506557b3/svgator-fig17.gif"><img src="https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/62f19460-4bac-45d2-89c9-1359506557b3/svgator-fig17.gif" width=“546" height="516" alt="Figure 17" /></a><figcaption>Fig. 17 - The front sheet. (<a href="https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/62f19460-4bac-45d2-89c9-1359506557b3/svgator-fig17.gif">Large preview</a>)
  949. </figcaption></figure>
  950.  
  951. <p>Now let’s fix the back sheet. It should disappear once the front shows up, and the front sheet should only appear after that.</p>
  952.  
  953. <ul>
  954. <li>Go to 1.1s, and select “sheet_bottom_bgr”. Add an Opacity animator and a keyframe. Set it to 0%.</li>
  955. <li>Move one frame backwards and set another Opacity keyframe, making it 100%.</li>
  956. </ul>
  957.  
  958. <p>Let’s make the respective changes to the front sheet, too:</p>
  959.  
  960. <ul>
  961. <li>Go to 1.1s, select “sheet_top_bgr” and add an Opacity keyframe of 100%.</li>
  962. <li>Move a frame back, and make the opacity 0%.</li>
  963. </ul>
  964.  
  965. <p>You should see something like figure 18 below. We can spot two problems here:</p>
  966.  
  967. <ul>
  968. <li>The content is displayed on top of the envelope before the transition happens.</li>
  969. <li>There’s a glitch when swapping the back and the front sheet.</li>
  970. </ul>
  971.  
  972. <figure><a href="https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/56f9d3b7-0032-4caf-839c-81127380d301/svgator-fig18.gif"><img src="https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/56f9d3b7-0032-4caf-839c-81127380d301/svgator-fig18.gif" width=518" height="536" alt="Figure 18" /></a><figcaption>Fig. 18 - Problems with the front content and glitching. (<a href="https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/56f9d3b7-0032-4caf-839c-81127380d301/svgator-fig18.gif">Large preview</a>)
  973. </figcaption></figure>
  974.  
  975. <p>Let’s fix the first issue. Let’s hide the content and the checkbox and show it after the front sheet has appeared.</p>
  976.  
  977. <ul>
  978. <li>Go to 1.5s, select “sheet_top_content” and add an Opacity keyframe of 100%.</li>
  979. <li>Go a frame backwards and set another Opacity keyframe to 0%.</li>
  980. <li>Now, we’ll make it a bit more interesting by animating each layer within the front content.
  981.  
  982. <ul>
  983. <li>Go to 1.5s and search for the contents of “sheet_top_content” in the Elements menu.</li>
  984. <li>Add Opacity keyframes for all three layers within “sheet_top_content”.</li>
  985. <li>Make the Opacity for all three layers 0%.</li>
  986. <li>Move to 1.7s and set it to 100% for all three layers.</li>
  987. <li>Stay on 1.7s and select Combined-shape<em>,</em> and add a Rotate keyframe.</li>
  988. <li>Go to 1.5s and set the rotation to -45deg.</li>
  989. <li>Add Ease-in-out for the rotation.</li>
  990. </ul></li>
  991. </ul>
  992.  
  993. <p>The second issue is a glitch that happens because our back sheet disappears too early.</p>
  994.  
  995. <ul>
  996. <li>Go to 1.1s, select “sheet_bottom_bgr” and shift its Opacity keyframes by one frame forward. Here’s what you should be looking at (figure 19):</li>
  997. </ul>
  998.  
  999. <figure><a href="https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/93ae7d6d-62db-402c-b2fb-5c03107503ec/svgator-fig19.gif"><img src="https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/93ae7d6d-62db-402c-b2fb-5c03107503ec/svgator-fig19.gif" width=“484" height="514" alt="Figure 19" /></a><figcaption>Fig. 19 - Fixed glitch and content’s appearance. (<a href="https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/93ae7d6d-62db-402c-b2fb-5c03107503ec/svgator-fig19.gif">Large preview</a>)
  1000. </figcaption></figure>
  1001.  
  1002. <p>To make it more appealing, let’s scale the front sheet and content when it pops out of the envelope. We could scale the whole “top_sheet_content”, but that might result in some misalignments in some browsers. It’s best to scale each of its child layers on its own.</p>
  1003.  
  1004. <ul>
  1005. <li>Go to 1.1s, select &ldquo;sheet_top_bgr” and add a Scale keyframe.
  1006.  
  1007. <ul>
  1008. <li>Do the same for Combined-Shape, “line_top” and &ldquo;line_bottom”.</li>
  1009. </ul></li>
  1010. <li>Go to 1.5s and add another Scale keyframe with values of 120% 120%.
  1011.  
  1012. <ul>
  1013. <li>Do the same for Combined-Shape, “line_top” and “line_bottom”.</li>
  1014. </ul></li>
  1015. <li>Enable Ease-in-out.</li>
  1016. <li>Because we scaled it, we need to decrease the amount that the whole front sheet moves down. Go to 1.5s, select “sheet_top_content” and “sheet_top_bgr”, and change their position from 0 40 to 0 20.
  1017. <br /></li>
  1018. </ul>
  1019.  
  1020. <p><strong>Tip:</strong> <em>It’s OK to scale content in SVG because it’s all vector-based, so you won’t lose any quality</em>.</p>
  1021.  
  1022. <p>Here’s what it should look like now (figure 20):</p>
  1023.  
  1024. <figure><a href="https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/6fb65399-7c27-49cd-802e-3b10aed90e7c/svgator-fig20.gif"><img src="https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/6fb65399-7c27-49cd-802e-3b10aed90e7c/svgator-fig20.gif" width=“502" height="524" alt="Figure 20" /></a><figcaption>Fig. 20 - Scaled sheet. (<a href="https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/6fb65399-7c27-49cd-802e-3b10aed90e7c/svgator-fig20.gif">Large preview</a>)
  1025. </figcaption></figure>
  1026.  
  1027. <p>All good, but the whole animation needs to loop back to the first frame. That’s because we want to reuse it. Our idea is to have the front sheet slide down and the envelope close and turn to its original position.</p>
  1028.  
  1029. <ul>
  1030. <li>Go to 2.8s, select “sheet_top_bgr” and add Position keyframes.
  1031.  
  1032. <ul>
  1033. <li>Do the same for &ldquo;sheet_top_content”.</li>
  1034. </ul></li>
  1035. <li>We need to add more time, because the default timeline is 3s. Click on the cog icon in the bottom-left corner above the timeline, change the duration to 00:04:50 (figure 21), and press “Enter”. We’ve now extended the timeline.</li>
  1036. <li>Move to 3.6s, add another pair of Position keyframes, and make their values 0 360. Change the easing for both layers’ Position to Ease-in-out.</li>
  1037. </ul>
  1038.  
  1039.  
  1040.  
  1041.  
  1042.  
  1043.  
  1044.  
  1045.  
  1046.  
  1047.  
  1048.  
  1049. <figure >
  1050. <a href="https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/92d0f992-d735-46e1-8a60-9b7e0fff76ae/svgator-fig21.png">
  1051. <img
  1052. srcset="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_400/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/92d0f992-d735-46e1-8a60-9b7e0fff76ae/svgator-fig21.png 400w,
  1053.        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_800/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/92d0f992-d735-46e1-8a60-9b7e0fff76ae/svgator-fig21.png 800w,
  1054.        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_1200/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/92d0f992-d735-46e1-8a60-9b7e0fff76ae/svgator-fig21.png 1200w,
  1055.        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_1600/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/92d0f992-d735-46e1-8a60-9b7e0fff76ae/svgator-fig21.png 1600w,
  1056.        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_2000/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/92d0f992-d735-46e1-8a60-9b7e0fff76ae/svgator-fig21.png 2000w"
  1057. src="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_400/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/92d0f992-d735-46e1-8a60-9b7e0fff76ae/svgator-fig21.png"
  1058. sizes="100vw"
  1059. alt="Figure 21"
  1060. />
  1061. </a>
  1062.  
  1064. <figcaption class="op-vertical-bottom">
  1065. Fig. 21 (<a href='https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/92d0f992-d735-46e1-8a60-9b7e0fff76ae/svgator-fig21.png'>Large preview</a>)
  1066. </figcaption>
  1068. </figure>
  1069.  
  1070.  
  1071. <ul>
  1072. <li>At 1.3s, select “top_closed” and “top_opened”, and add Scale keyframes.</li>
  1073. <li>Add two more at 1.5s. For the second keyframes, “top_closed” should have 100% 100% and “top_opened” 100% 0%. We’ve successfully closed the flap behind the scaled sheet.</li>
  1074. <li>Now, all we have to do is move the envelope back to the center and make sure the top flap shows up again. Go to 3s and add a Position keyframe for “g”. Add another one at 3.4s, and make it 0 0. Go to 2.8s, and add an Opacity 0% keyframe for “top_closed”. Then, move to 3s and change the opacity to 100%.</li>
  1075. </ul>
  1076.  
  1077. <p>Congratulations! We have animated the whole icon. Here’s what it should look like (figure 22):</p>
  1078.  
  1079. <figure><a href="https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/07553943-f7ac-4aa2-9060-91e51ed20c69/svgator-fig22.gif"><img src="https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/07553943-f7ac-4aa2-9060-91e51ed20c69/svgator-fig22.gif" width=494" height="514" alt="Figure 22" /></a><figcaption>Fig. 22 - Finished animation. (<a href="https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/07553943-f7ac-4aa2-9060-91e51ed20c69/svgator-fig22.gif">Large preview</a>)
  1080. </figcaption></figure>
  1081.  
  1082. <h3 id="part-3-implementing-the-exported-animation-in-a-real-web-environment">Part 3: Implementing The Exported Animation In A Real Web Environment</h3>
  1083.  
  1084. <p>Let’s place the icon in a real environment. We’ve coded a simple newsletter form and included the icon there. You can export the icon from SVGator by clicking “Export SVG”.</p>
  1085.  
  1086. <figure><a href="https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/6080beb0-d068-40ca-8d24-cfb6114e627e/svgator-fig23.gif"><img src="https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/6080beb0-d068-40ca-8d24-cfb6114e627e/svgator-fig23.gif" width=“888" height="218" alt="Figure 23" /></a><figcaption>Fig. 23 - Simple newsletter form. (<a href="https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/6080beb0-d068-40ca-8d24-cfb6114e627e/svgator-fig23.gif">Large preview</a>)
  1087. </figcaption></figure>
  1088.  
  1089. <p>After you click “Subscribe”, a thank-you message is displayed, and the icon animation starts.</p>
  1090.  
  1091. <p>It works by having two SVG icons: The first one is a static one with just the first frame of the animation included, and the second is the animated one. You can find the static icon in the Sketch file → Artboard “export static”. We’ve included it as an inline SVG element within the code. We’ve also included the animated SVG inline, but hidden it by default. You can check out the code in the <a href="http://files.smashingmagazine.com/svgator-demo.zip">download</a>. When “Subscribe” receives a click, we hide the static SVG and show the animated one, which automatically starts.</p>
  1092.  
  1093. <p>A minor adjustment we made in the static SVG was to replace this line:</p>
  1094.  
  1095. <pre class="break-out"><code class="language-html">&lt;rect id="sheet_mask" fill="#E6E7EB" fill-rule="evenodd" x="0" y="162" width="384" height="131">&lt;/rect></code></pre>
  1096.  
  1097. <p>&hellip; with this:</p>
  1098.  
  1099. <pre class="break-out"><code class="language-html">&lt;rect id="sheet_mask" fill-rule="evenodd" x="0" y="162" width="384" height="131">&lt;/rect></code></pre>
  1100.  
  1101. <p>This will remove the gray rectangle that is displayed incorrectly on top of all elements.</p>
  1102.  
  1103. <p>This example also shows just how good SVGs are in responsive design: If you make the window smaller, the layout will rearrange, and the icon will enlarge with no loss of quality whatsoever.</p>
  1104.  
  1105. <figure><a href="https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/96cee428-79ca-4103-9457-57280d99720b/svgator-fig24.gif"><img src="https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/96cee428-79ca-4103-9457-57280d99720b/svgator-fig24.gif" width=“536" height="384" alt="Figure 24" /></a><figcaption>Fig. 24 - Responsive view. (<a href="https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/96cee428-79ca-4103-9457-57280d99720b/svgator-fig24.gif">Large preview</a>)
  1106. </figcaption></figure>
  1107.  
  1108. <p><strong>Tip:</strong> <em>When we made the icon smaller, we found that it takes too much time for the sheet to get out of the canvas, so we had to go back and edit that particular timing a bit to make it shorter. We moved the last Position keyframes of “sheet_top_bgr” and “sheet_top_content” to 3.2s to make the movement faster</em>.</p>
  1109.  
  1110. <p>If you want, you can tweak the animation even after you’ve exported it, but it’s much easier to do this in SVGator, where you’ll have the convenient UI.</p>
  1111.  
  1112.  
  1113.  
  1114.  
  1115.  
  1116.  
  1117.  
  1118.  
  1119.  
  1120.  
  1121.  
  1122. <figure >
  1123. <a href="https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/916b21d5-4407-443b-bd3c-538d6a43d8f3/svgator-fig25.png">
  1124. <img
  1125. srcset="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_400/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/916b21d5-4407-443b-bd3c-538d6a43d8f3/svgator-fig25.png 400w,
  1126.        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_800/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/916b21d5-4407-443b-bd3c-538d6a43d8f3/svgator-fig25.png 800w,
  1127.        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_1200/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/916b21d5-4407-443b-bd3c-538d6a43d8f3/svgator-fig25.png 1200w,
  1128.        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_1600/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/916b21d5-4407-443b-bd3c-538d6a43d8f3/svgator-fig25.png 1600w,
  1129.        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_2000/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/916b21d5-4407-443b-bd3c-538d6a43d8f3/svgator-fig25.png 2000w"
  1130. src="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_400/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/916b21d5-4407-443b-bd3c-538d6a43d8f3/svgator-fig25.png"
  1131. sizes="100vw"
  1132. alt="Figure 25"
  1133. />
  1134. </a>
  1135.  
  1137. <figcaption class="op-vertical-bottom">
  1138. Fig. 25 - SVGator does the heavy lifting and calculations for you. (<a href='https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/916b21d5-4407-443b-bd3c-538d6a43d8f3/svgator-fig25.png'>Large preview</a>)
  1139. </figcaption>
  1141. </figure>
  1142.  
  1143.  
  1144. <h3 id="conclusion">Conclusion</h3>
  1145.  
  1146. <p>We’re pretty excited by tools such as SVGator, which really speed up the process when you’re making simple SVG animations. It’s easy to use and you can get a great-looking animation in no time.</p>
  1147.  
  1148. <ul>
  1149. <li>It’s not as powerful as Adobe After Effects, but it’s a lot more adaptive, and it exports everything in code, ready to use on the web. Comparing it to After Effects is apples and oranges, because both tools are so different.</li>
  1150. <li>When <strong>using SVGator for rapid explorations</strong>, beginners will see greater value in it, but that doesn’t mean that it’s targeted at them only. Advanced users can use the tool to brainstorm or quickly explore ideas without having to use a more complex tool. Because SVGator generates code, you can take it from there and customize anything the way you like. The only drawback is that the whole animation is placed within one timeline, which means that it’s basically one CSS animation, and everything happening inside has a different amount of delay before it fires up. This means you can’t currently fire events at certain steps of the animation, because everything is all-in-one CSS.</li>
  1151. <li>Comparing it to vanilla code is not fair either, because SVGator’s main purpose is to make SVG animation easier and faster. It’s clear that you can achieve more if you code the whole thing from scratch, but how much time would that take you?</li>
  1152. <li>One of SVGator’s strongest advantages is that it’s very beginner-friendly. Anyone can start using it, and the learning curve is close to none if you have experience with at least some design or animation software.</li>
  1153. <li>All users get a seven-day free trial once they create an account. All features are included, and once the trial is over, they can still download the animations from their &ldquo;My projects&rdquo; section. You can subscribe to the app monthly ($18 per month), quarterly ($45 per quarter) or annually ($144 per year).</li>
  1154. </ul>
  1155.  
  1156. <h4 id="further-reading-about-svgator">Further Reading About SVGator</h4>
  1157.  
  1158. <ul>
  1159. <li><a href="https://www.youtube.com/watch?v=EBghzfllGjw">How To Animate SVG Using SVGator</a> (video)</li>
  1160. <li><a href="https://twitter.com/SVGatorApp">SVGator’s Twitter</a> (contains many mini-tutorials and frequent updates about the app)</li>
  1161. <li><a href="https://www.svgator.com/faq">SVGator FAQ</a></li>
  1162. </ul>
  1163.  
  1164. <h4 id="further-reading-about-svg-animation-using-code">Further Reading About SVG Animation Using Code</h4>
  1165.  
  1166. <ul>
  1167. <li>“<a href="https://medium.com/@aniboaz/animate-svg-4fa7dd00e860">How I Stopped Worrying And Learned To Animate SVG</a>,” Boaz Lederer, Medium</li>
  1168. <li>“<a href="https://codyhouse.co/gem/animate-svg-icons-with-css-and-snap">How To Optimize SVG Code And Animate An SVG Icon Using CSS And Snap.svg Library</a>,” CodyHouse</li>
  1169. <li>“<a href="https://blog.prototypr.io/css-animations-for-non-developers-part-2-svgs-1f6713104764">CSS Animations For Non-Developers Part 2 — SVGs</a>,” Nicholas Kramer, Prototypr</li>
  1170. <li>“<a href="https://medium.com/@LewisMenelaws/how-to-create-beautiful-svg-animations-easily-610eb2690ac3">How to Create Beautiful SVG Animations Easily</a>,” Lewis Menelaws, Medium</li>
  1171. </ul>
  1172.  
  1173. <p><em>A special thanks to <a href="https://www.smashingmagazine.com/author/boyan-kostov/">Boyan Kostov</a> for helping us with this article &mdash; we appreciate your time and effort!</em></p>
  1174.  
  1175. <div class="signature">
  1176.  <img src="https://www.smashingmagazine.com/images/logo/logo--red.png" alt="Smashing Editorial">
  1177.  <span>(ms, mb, ra, al, yk, il)</span>
  1178. </div>
  1179.  
  1180.  
  1181.              </article>
  1182.            </body>
  1183.          </html>
  1184.        ]]></content:encoded>
  1185.      </item>
  1186.    
  1187.      <item>
  1188.        
  1189.          
  1190.          <author>Myriam Jessier &amp; Stéphanie Walter</author>
  1191.        
  1192.        <title>Linkbuilding: The Citizen’s Field Guide</title>
  1193.        <link>https://www.smashingmagazine.com/2018/07/linkbuilding-the-citizens-field-guide/</link>
  1194.        <pubDate>Wed, 18 Jul 2018 14:00:07 +0200</pubDate>
  1195.        <guid>https://www.smashingmagazine.com/2018/07/linkbuilding-the-citizens-field-guide/</guid>
  1196.        <description>Before buying followers on Instagram was a common practice, before Russian trolls made fake news an Olympic sport, we had linkbuilding. Today, we still have linkbuilding, its just that you haven&#39;t noticed it &amp;mdash; or have you?
  1197. Welcome, to the Twilight Zone, dear folks. You are about to go through a linkbuilding crash course. This will help you preserve your website, detect potential problems in content or consider why you keep receiving strange emails from strangers wanting to get their links all over your content.</description>
  1198.        <content:encoded><![CDATA[
  1199.          <html>
  1200.            <head>
  1201.              <meta charset="utf-8">
  1202.              <link rel="canonical" href="https://www.smashingmagazine.com/2018/07/linkbuilding-the-citizens-field-guide/" />
  1203.              <title>Linkbuilding: The Citizen’s Field Guide</title>
  1204.            </head>
  1205.            <body>
  1206.              <article>
  1207.                <header>
  1208.                  <h1>Linkbuilding: The Citizen’s Field Guide</h1>
  1209.                  
  1210.                    
  1211.                    <address>Myriam Jessier &amp; Stéphanie Walter</address>
  1212.                  
  1213.                  <time datetime="2018-07-18T14:00:07&#43;02:00" class="op-published">2018-07-18T14:00:07+02:00</time>
  1214.                  <time datetime="2018-07-23T11:42:51&#43;00:00" class="op-modified">2018-07-23T11:42:51+00:00</time>
  1215.                </header>
  1216.                <p>Before buying followers on Instagram was a common practice, before Russian trolls made fake news an Olympic sport, we had linkbuilding. Today, we <em>still</em> have linkbuilding, its just that you haven't noticed it &mdash; or have you?</p>
  1217.  
  1218. <p>Welcome, to the Twilight Zone, dear folks. You are about to go through a linkbuilding crash course. This will help you preserve your website, detect potential problems in content or consider why you keep receiving strange emails from strangers wanting to get their links all over your content.</p>
  1219.  
  1220. <figure><a href="https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/d8d5e61f-9264-4a43-bb2a-df9703a7a910/05-linkbuilding-the-citizen-s-field-guide.gif"><img src="https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/d8d5e61f-9264-4a43-bb2a-df9703a7a910/05-linkbuilding-the-citizen-s-field-guide.gif" width="360" height="261" alt="Rod Serling in the Twilight Zone TV series." /></a><figcaption>Rod Serling in the Twilight Zone TV series.</figcaption></figure>
  1221.  
  1222. <p><strong>Note</strong>: <em>If you are a website owner, a marketer, a blogger, a social media specialist or a regular user of the internet (and everything else in between)...you should take the time to read this!</em></p>
  1223.  
  1224. <h3>What Is Linkbuilding?</h3>
  1225.  
  1226. <blockquote>Links are basically a popularity contest. Linkbuilding is the process of gaining links to your online content in order to boost your visibility in search engines.</blockquote>
  1227.  
  1228. <p>Through links, search engines can analyze popularity but also other vital metrics such as authority, spam, trust. Google uses links to establish which websites are popular with users, are trusted by users or are seen as spam by users.</p>
  1229.  
  1230.  
  1231.  
  1232.  <aside class="product-panel product-panel__tilted product-panel--book" data-audience="non-subscriber">
  1233.    <div class="container product-panel--book__container">
  1234.      <div class="panel__description panel__description--book">
  1235.    <p>Getting the process <em>just</em> right ain't an easy task. That's why we've set up <strong>'this-is-how-I-work'-sessions</strong> — with smart cookies sharing what works really well for them. A part of the <a href="http://smashed.by/casestudypanelmembership">Smashing Membership</a>, of course.</p>
  1236.      <a href="http://smashed.by/casestudypanelmembership" class="btn btn--green btn--large">
  1237.        Explore features&nbsp;→
  1238.      </a>
  1239.      </div>
  1240.      <div class="panel__image panel__image--book">
  1241.        <a href="http://smashed.by/casestudypanelmembership" class="books__book__image">
  1242.        <div class="books__book__img">
  1243.          <img src="https://www.smashingmagazine.com/images/smashing-cat/cat-scubadiving-panel.svg" alt="Smashing TV, with live sessions for professional designers and developers." width="310" height="400">
  1244.        </div>
  1245.      </a>
  1246.      </div>
  1247.    </div>
  1248.  </aside>
  1249.  
  1250.  
  1251.  
  1252.  
  1253. <h3>Key Signals That Influence The Value Of a Link</h3>
  1254.  
  1255. <p>You have the stock exchange, and then you have the link exchange. All links are not created equal. Some of you may get flooded with spammy requests while others are reading this article wondering why they've never heard of linkbuilding. Some websites are more valuable and thus more targeted than others by linkbuilding attempts. Here are some key metrics that help establish the value of a link:</p>
  1256.  
  1257. <h4>Global Popularity</h4>
  1258.  
  1259. <p>The more popular a website is, the more a link from that site will have value. Wikipedia or Huffington Post have a lot of websites pointing to them which is a signal for search engines that these websites are probably important or at least very popular. Here is an example of linkbuilders trying to sell links on well-known publications that may not be aware their platform is used to peddle paid links.</p>
  1260.  
  1261.  
  1262.  
  1263.  
  1264.  
  1265.  
  1266.  
  1267.  
  1268.  
  1269.  
  1270.  
  1271. <figure class="article__image break-out">
  1273. <img
  1274. srcset="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_400/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/fd0739a7-68d2-4127-9771-6fc809966160/03-linkbuilding-the-citizen-s-field-guide.png 400w,
  1275.        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_800/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/fd0739a7-68d2-4127-9771-6fc809966160/03-linkbuilding-the-citizen-s-field-guide.png 800w,
  1276.        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_1200/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/fd0739a7-68d2-4127-9771-6fc809966160/03-linkbuilding-the-citizen-s-field-guide.png 1200w,
  1277.        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_1600/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/fd0739a7-68d2-4127-9771-6fc809966160/03-linkbuilding-the-citizen-s-field-guide.png 1600w,
  1278.        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_2000/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/fd0739a7-68d2-4127-9771-6fc809966160/03-linkbuilding-the-citizen-s-field-guide.png 2000w"
  1279. src="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_400/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/fd0739a7-68d2-4127-9771-6fc809966160/03-linkbuilding-the-citizen-s-field-guide.png"
  1280. sizes="100vw"
  1281. alt=""
  1282. />
  1284.  
  1286. <figcaption class="op-vertical-bottom">
  1287. <a href='https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/fd0739a7-68d2-4127-9771-6fc809966160/03-linkbuilding-the-citizen-s-field-guide.png'>Large preview</a>
  1288. </figcaption>
  1290. </figure>
  1291.  
  1292.  
  1293. <h4>Topical Or Local Popularity</h4>
  1294.  
  1295. <p>Links that are topic-specific and highly related to your subject matter are worth more than links from general or off-topic sites. A link from a dog training business pointing to an SEO training website (like the one I run) will have less value than if Smashing Magazine (a website recognized for its topical authority on the web) will. Which means that placing a link on "SEO training website" would have been an amazing opportunity for me.</p>
  1296.  
  1297. <h4>Placement In The Page</h4>
  1298.  
  1299. <p class="c-pre-sidenote--left">If a link is "editorially placed", meaning that it looks like something the author placed in the content naturally, then Google will give it more credibility. If the link is something someone with a shady profile shared in the comments, the impact won't be the same. The position of a link within a page is important. Most linkbuilders will always negotiate for a link at the beginning or in the middle of your main content. Links in footers and sidebars do not have the same value.<sup>1</sup</p><p class="c-sidenote c-sidenote--right"><sup>1</sup> “<a href="https://backlinko.com/link-building#chapter5">The Skinny On Black Hat Link Building</a>,” Link Building For SEO: The Definitive Guide (2018 Update), Backlinko</p>
  1300.  
  1301. <h4>Types Of Links Matter</h4>
  1302.  
  1303. <p>A text link tends to have more weight than an image link. Furthermore, most people forget to provide an ALT attribute for their images, which means that Google will have a hard time getting context regarding the link placed on the image. Links can also be placed in iframes.</p>
  1304.  
  1305. <h4>Anchor Text</h4>
  1306.  
  1307. <p>You know what would be an even better anchor than "SEO training website" for me? I would love to also push a local signal on top of a topical one with "SEO training in Montreal" Why is that better than placing a link on a random word like "platypus"? Well, because one of the strongest signals used by search engines is anchor text. What is anchor text? Anchor Text is the visible, clickable text in a hyperlink. For most of us, it's the blue text that's underlined, like the ones you see below. As you can see, Smashing Magazine has made it a mission to explain <a href="https://www.smashingmagazine.com/2012/06/links-should-never-say-click-here/">why links should never say "Click Here"</a>.</p>
  1308.  
  1309.  
  1310.  
  1311.  
  1312.  
  1313.  
  1314.  
  1315.  
  1316.  
  1317.  
  1318.  
  1319. <figure class="article__image break-out">
  1321. <img
  1322. srcset="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_400/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/0f0306bf-f6da-4383-82b5-960f32d55dee/04-linkbuilding-the-citizen-s-field-guide.jpg 400w,
  1323.        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_800/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/0f0306bf-f6da-4383-82b5-960f32d55dee/04-linkbuilding-the-citizen-s-field-guide.jpg 800w,
  1324.        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_1200/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/0f0306bf-f6da-4383-82b5-960f32d55dee/04-linkbuilding-the-citizen-s-field-guide.jpg 1200w,
  1325.        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_1600/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/0f0306bf-f6da-4383-82b5-960f32d55dee/04-linkbuilding-the-citizen-s-field-guide.jpg 1600w,
  1326.        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_2000/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/0f0306bf-f6da-4383-82b5-960f32d55dee/04-linkbuilding-the-citizen-s-field-guide.jpg 2000w"
  1327. src="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_400/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/0f0306bf-f6da-4383-82b5-960f32d55dee/04-linkbuilding-the-citizen-s-field-guide.jpg"
  1328. sizes="100vw"
  1329. alt=""
  1330. />
  1332.  
  1334. <figcaption class="op-vertical-bottom">
  1335. <a href='https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/0f0306bf-f6da-4383-82b5-960f32d55dee/04-linkbuilding-the-citizen-s-field-guide.jpg'>Large preview</a>
  1336. </figcaption>
  1338. </figure>
  1339.  
  1340.  
  1341. <h4>Trust Score</h4>
  1342.  
  1343. <p>The internet is made up of a lot of spam. In order to stay relevant to users, search engines use systems that analyze link profiles and provide a trust score. Earning links from websites with a high Trust metric can boost your own scoring metric and impact your organic visibility. That's why most SEO experts will favor non-profit organizations, universities or government websites. Those websites benefit from great Trust Score normally. I call the trust factor a trust score because each SEO tool has its own nomenclature (TrustRank, TrustFlow, etc.). This is the Trust Score of Smashing Magazine:</p>
  1344.  
  1345.  
  1346.  
  1347.  
  1348.  
  1349.  
  1350.  
  1351.  
  1352.  
  1353.  
  1354.  
  1355. <figure class="article__image break-out">
  1357. <img
  1358. srcset="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_400/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/e509d4c2-889e-444a-a21d-9892289467aa/majestic-seo-trust-flow-of-smashing-magazine.png 400w,
  1359.        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_800/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/e509d4c2-889e-444a-a21d-9892289467aa/majestic-seo-trust-flow-of-smashing-magazine.png 800w,
  1360.        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_1200/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/e509d4c2-889e-444a-a21d-9892289467aa/majestic-seo-trust-flow-of-smashing-magazine.png 1200w,
  1361.        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_1600/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/e509d4c2-889e-444a-a21d-9892289467aa/majestic-seo-trust-flow-of-smashing-magazine.png 1600w,
  1362.        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_2000/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/e509d4c2-889e-444a-a21d-9892289467aa/majestic-seo-trust-flow-of-smashing-magazine.png 2000w"
  1363. src="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_400/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/e509d4c2-889e-444a-a21d-9892289467aa/majestic-seo-trust-flow-of-smashing-magazine.png"
  1364. sizes="100vw"
  1365. alt=""
  1366. />
  1368.  
  1370. <figcaption class="op-vertical-bottom">
  1371. <a href='https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/e509d4c2-889e-444a-a21d-9892289467aa/majestic-seo-trust-flow-of-smashing-magazine.png'>Large preview</a>
  1372. </figcaption>
  1374. </figure>
  1375.  
  1376.  
  1377. <p>So of course, you can imagine that this makes Smashing Magazine a very desirable website to have a link on. This leads to hilarious situations like this comical email by a link builder trying to buy a link from me:</p>
  1378.  
  1379.  
  1380.  
  1381.  
  1382.  
  1383.  
  1384.  
  1385.  
  1386.  
  1387.  
  1388.  
  1389. <figure class="article__image break-out">
  1391. <img
  1392. srcset="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_400/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/56dc6b81-4b75-4213-a8fe-abd4286fd9d9/05-linkbuilding-the-citizen-s-field-guide.png 400w,
  1393.        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_800/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/56dc6b81-4b75-4213-a8fe-abd4286fd9d9/05-linkbuilding-the-citizen-s-field-guide.png 800w,
  1394.        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_1200/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/56dc6b81-4b75-4213-a8fe-abd4286fd9d9/05-linkbuilding-the-citizen-s-field-guide.png 1200w,
  1395.        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_1600/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/56dc6b81-4b75-4213-a8fe-abd4286fd9d9/05-linkbuilding-the-citizen-s-field-guide.png 1600w,
  1396.        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_2000/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/56dc6b81-4b75-4213-a8fe-abd4286fd9d9/05-linkbuilding-the-citizen-s-field-guide.png 2000w"
  1397. src="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_400/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/56dc6b81-4b75-4213-a8fe-abd4286fd9d9/05-linkbuilding-the-citizen-s-field-guide.png"
  1398. sizes="100vw"
  1399. alt=""
  1400. />
  1402.  
  1404. <figcaption class="op-vertical-bottom">
  1405. <a href='https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/56dc6b81-4b75-4213-a8fe-abd4286fd9d9/05-linkbuilding-the-citizen-s-field-guide.png'>Large preview</a>
  1406. </figcaption>
  1408. </figure>
  1409.  
  1410.  
  1411. <h4>Link Neighborhood</h4>
  1412.  
  1413. <p>The notion of a "link neighborhood" means that if a website is spammy and links to another website, Google will be suspicious that the other website is spammy as well. This is important because sometimes, websites are targeted by negative SEO attacks. One of the quickest ways to sabotage a competitor's organic visibility is to have a lot of spammy websites pointing to its website. This is where the notion of link neighborhood becomes incredibly important.</p>
  1414.  
  1415. <h4>Freshness And Pertinence</h4>
  1416.  
  1417. <p>Link signals tend to decay over time. That's why it's important to keep earning new links over time. This helps establish the pertinence of a website. But you have to be careful: If you keep earning links from hype websites that aren't necessarily trustworthy, your website could be seen as pertinent but not trustworthy. It's a fine balance between authority and pertinence.</p>
  1418.  
  1419. <h4>Social Sharing</h4>
  1420.  
  1421. <p>Search engines treat socially shared links differently than any other type of link. The SEO community is still debating how strong of a signal social links are.</p>
  1422.  
  1423. <h4>The Importance Of A Link</h4>
  1424.  
  1425. <p>Getting a link from a website that is considered a reputable and expert source of information is a highly valuable asset. Let's use this article to do some good and give a link to someone in Web that deserves it. Meet Nicolas Steenhout, a <a href="https://a11yrules.com/">great accessibility consultant in Montreal</a> doing great work. Bonjour Monsieur! I hope this link helps give your work more visibility!</p>
  1426.  
  1427. <h3>Common Linkbuilding Tactics</h3>
  1428.  
  1429. <p>Here is a quick recap of what happens to some of us on a daily basis:</p>
  1430.  
  1431. <ul>
  1432. <li>We receive some type of communication trying to get us to put things on our websites for strange reasons we don't understand.</li>
  1433. <li>Someone requests or demands, depending on how combative their writing style is, that we guest blog for free on platforms that we do not know, trust or like.</li>
  1434. <li>We get folks peddling SEO services. They use scare tactics to push you to pay them for their services.</li>
  1435. <li>Websites get hacked for links...or worse.</li>
  1436. </ul>
  1437.  
  1438. <p>Here are some of common linkbuilding tactics you should be aware of:</p>
  1439.  
  1440. <ul>
  1441. <li><strong>Broken linkbuilding</strong><br />If you notice a broken link in a quality website, you can email the owner and say what page the link is on and what could be a solid resource to replace the current webpage that's no longer available. Of course, the replacement you offer just so happens to be from your own website that you want to rank in search engines.</li>
  1442. <li><strong>Comment spam linkbuilding</strong><br />There is a reason why strange spammy comments keep trying to peddle certain products or websites - it's called linkbuilding.</li>
  1443. <li><strong>Negative SEO</strong><br />If you can't be first because you are the best, then buy a bunch of links to make your competitors go down in Google. That's basically what negative SEO is. Here is a <a href="https://www.myriamjessier.com/blog/nseo-stephanie-walter/">real life case of negative SEO</a> if you want to see how this can happen to any type of website owner, not just big startups or famous people.</li>
  1444. <li><strong>Sponsored content linkbuilding</strong><br />I have had many bloggers complain to me because they had been duped by agencies "buying" a sponsored article for a year on their blog. They discovered later on that what the company actually bought was a link that they could control.</li>
  1445. <li><strong>Hacking websites</strong><br />Oftentimes, websites will get hacked for SEO purposes. Because if you can't rank honestly, then parasite good websites to rank no matter what! That's the philosophy of some ruthless search engine optimization specialists. If you gain access to a website, you can place any link where you want, for as long as you want. As a website owner, it's important that you <strong>secure your website</strong> and make sure nothing strange is going on in your content. Want to see what a hacked website can look like? I recently had a case where a very legitimate website in the IT sector was hacked to host and promote a discount NBA jersey store. This is the what the website looks like:
  1446.  
  1447.  
  1448.  
  1449.  
  1450.  
  1451.  
  1452.  
  1453.  
  1454.  
  1455.  
  1456.  
  1457. <figure class="article__image break-out">
  1459. <img
  1460. srcset="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_400/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/91028a3f-141f-443f-8d87-702e6f0e2e25/ma-carriere-techno-home.png 400w,
  1461.        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_800/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/91028a3f-141f-443f-8d87-702e6f0e2e25/ma-carriere-techno-home.png 800w,
  1462.        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_1200/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/91028a3f-141f-443f-8d87-702e6f0e2e25/ma-carriere-techno-home.png 1200w,
  1463.        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_1600/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/91028a3f-141f-443f-8d87-702e6f0e2e25/ma-carriere-techno-home.png 1600w,
  1464.        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_2000/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/91028a3f-141f-443f-8d87-702e6f0e2e25/ma-carriere-techno-home.png 2000w"
  1465. src="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_400/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/91028a3f-141f-443f-8d87-702e6f0e2e25/ma-carriere-techno-home.png"
  1466. sizes="100vw"
  1467. alt=""
  1468. />
  1470.  
  1472. <figcaption class="op-vertical-bottom">
  1473. <a href='https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/91028a3f-141f-443f-8d87-702e6f0e2e25/ma-carriere-techno-home.png'>Large preview</a>
  1474. </figcaption>
  1476. </figure>
  1477.  
  1478.  
  1479. However, what they were not aware of was that the website had been hacked. Upon analyzing their incoming links, it was clear that this IT focused website was known for "cheap NBA jerseys" and "wholesale NBA jerseys" than anything else. I wondered why, and found a lot of pages were receiving links:
  1480.  
  1481.  
  1482.  
  1483.  
  1484.  
  1485.  
  1486.  
  1487.  
  1488.  
  1489.  
  1490.  
  1491. <figure class="article__image break-out">
  1493. <img
  1494. srcset="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_400/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/d90a4329-026d-4bd1-b62d-31194f67e770/jerseys.png 400w,
  1495.        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_800/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/d90a4329-026d-4bd1-b62d-31194f67e770/jerseys.png 800w,
  1496.        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_1200/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/d90a4329-026d-4bd1-b62d-31194f67e770/jerseys.png 1200w,
  1497.        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_1600/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/d90a4329-026d-4bd1-b62d-31194f67e770/jerseys.png 1600w,
  1498.        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_2000/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/d90a4329-026d-4bd1-b62d-31194f67e770/jerseys.png 2000w"
  1499. src="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_400/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/d90a4329-026d-4bd1-b62d-31194f67e770/jerseys.png"
  1500. sizes="100vw"
  1501. alt=""
  1502. />
  1504.  
  1506. <figcaption class="op-vertical-bottom">
  1507. <a href='https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/d90a4329-026d-4bd1-b62d-31194f67e770/jerseys.png'>Large preview</a>
  1508. </figcaption>
  1510. </figure>
  1511.  
  1512.  
  1513. The wonderful developer team cleaned up the damage and made sure to patch any security breach they found. However, this specific hacker thrives in websites that have been hacked and are full of malware such as this one:
  1514.  
  1515.  
  1516.  
  1517.  
  1518.  
  1519.  
  1520.  
  1521.  
  1522.  
  1523.  
  1524.  
  1525. <figure class="article__image break-out">
  1527. <img
  1528. srcset="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_400/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/3dfdc8c0-d8b3-4db0-91be-48aa0cfa87ff/ecommerce-nba-jersey-hack.png 400w,
  1529.        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_800/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/3dfdc8c0-d8b3-4db0-91be-48aa0cfa87ff/ecommerce-nba-jersey-hack.png 800w,
  1530.        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_1200/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/3dfdc8c0-d8b3-4db0-91be-48aa0cfa87ff/ecommerce-nba-jersey-hack.png 1200w,
  1531.        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_1600/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/3dfdc8c0-d8b3-4db0-91be-48aa0cfa87ff/ecommerce-nba-jersey-hack.png 1600w,
  1532.        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_2000/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/3dfdc8c0-d8b3-4db0-91be-48aa0cfa87ff/ecommerce-nba-jersey-hack.png 2000w"
  1533. src="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_400/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/3dfdc8c0-d8b3-4db0-91be-48aa0cfa87ff/ecommerce-nba-jersey-hack.png"
  1534. sizes="100vw"
  1535. alt=""
  1536. />
  1538.  
  1540. <figcaption class="op-vertical-bottom">
  1541. <a href='https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/3dfdc8c0-d8b3-4db0-91be-48aa0cfa87ff/ecommerce-nba-jersey-hack.png'>Large preview</a>
  1542. </figcaption>
  1544. </figure>
  1545. </li>
  1546. <li><strong>Link outreach</strong><br />If you get bombarded with emails asking you to review a product or add a link in your blog article, chances are that you have been targeted during a link outreach campaign. You can always decline or simply not answer this unsolicited email. On the flipside of the coin, if you get offers to place your links in some highly regarded publications, know that this is an offer the person is making you to place your links on certain website.</li>
  1547. <li><strong>Guest blogging</strong><br />If someone asks you to create an article on their platform, the often want free quality content with your notoriety to promote it in order to garner links. If on the other hand, someone offers you free content for your website, chances are that it is for linkbuilding purposes.</li>
  1548. <li><strong>PBN</strong><br />A <strong>P</strong>rivate <strong>B</strong>log <strong>N</strong>etwork is a network of websites with great SEO metrics used to build links to a main website in order to help it rank higher in search engines. It means that someone usually ranks multiple websites high in Google in order to use them to place links that will boost the visibility of a chosen site. Google does not appreciate PBN efforts or link exchange efforts and routinely penalizes networks of websites.</li>
  1549. <li><strong>Creating awesome content</strong><br />There are many linkbuilding tactics that push for the creation of tools, content or other types of media that is so good, so useful and so relevant that they will naturally garner links from other website owners. We won't detail them here but they usually work well because they provide something <strong>useful that deserves to be shared with others!</strong></li>
  1550. </ul>
  1551.  
  1552. <div class="sponsors__wide-place"></div>
  1553.  
  1554.  
  1555.  
  1556.  
  1557. <h3>The Hidden Survival Guide To Linkbuilding</h3>
  1558.  
  1559. <p>Read this part if you are a website owner, a UX, a customer, a visitor, a blogger, my friend Igor (hi Igor, please read this!) or anyone else using search engines regularly to find information. Let's get started by giving you access to the <a href="https://support.google.com/webmasters/answer/35769?hl=en">official Google guidelines</a> on the matter. Website guidelines vary from search engine to search engine. You can check each search engine's guidelines but oftentimes, the broader concepts of what qualifies as a good website in terms of SEO are the same.</p>
  1560.  
  1561. <h4>The Ugly Truth: Not All Linkbuilding Is Bad</h4>
  1562.  
  1563. <p>Google clearly disagrees with paying for links or selling links. However, keep this in mind: not all linkbuilding efforts are bad. Earlier in this article, I gave a shout out to a friend of mine because I know that it will help give his website some visibility in search engines. Offering a link is a way to show your support for a product, an article, a tool, a website, a person. It is a vote of confidence in their favor. If you go out of your way to do it, technically, that counts as linkbuilding. Linkbuilding is also a way to make money. Some website owners may leverage linkbuilding to earn money despite legal regulations and Google's guidelines.</p>
  1564.  
  1565. <h4>If You See Something, Say Something!</h4>
  1566.  
  1567. <p>You can signal bad links and anything strange going on that may be related to a hack, malware or even paid links to Google. You can <a href="https://support.google.com/webmasters/answer/93713?hl=en">report bad links</a> very easily. If you want to review the entire list of what constitutes a bad practices in Google's eyes, you can head on over to this <a href="https://support.google.com/webmasters/topic/6001971?hl=en&ref_topic=6001981">official documentation</a>.</p>
  1568.  
  1569. <h4>Make It Clear If You Accept Or Refuse Linkbuilding Offers</h4>
  1570.  
  1571. <p>If you are a blogger, make sure you are aware of your rights and responsibilities when it comes to linkbuilding efforts. Make sure to update your key pages to reflect your linkbuilding policy. This could be done in the about page, the services page if you offer services or the contact page.</p>
  1572.  
  1573. <p>Take the time to specify if you accept of refuse commercial or affiliate links in the content of a guest blog post for example. This will also help avoid nasty linkbuilding surprises in the future.</p>
  1574.  
  1575. <h4>Nofollow: You Can Have Sponsored Content And Still Respect The Guidelines!</h4>
  1576.  
  1577. <p>So what do you do if you realize that someone is using your website to place a link? Well, if this is something that was done legally, you can fix the situation by placing an attribute on your link that will signal to search engine bots not to follow the link. A nofollow link is a way to make sure that links from sponsored posts are not going against Google's guidelines. This type of link cancels the linkbuilding benefits as Google gives them no love because the nofollow tag in the code signals "do not take this link into account." Website owners and administrators should <a href="https://support.google.com/webmasters/answer/96569?hl=en">know how to make a link</a> into a nofollow link as it can be done quickly and easily.</p>
  1578.  
  1579. <p>This is what a nofollow link looks like in the code:</p>
  1580.  
  1581.  
  1582.  
  1583.  
  1584.  
  1585.  
  1586.  
  1587.  
  1588.  
  1589.  
  1590.  
  1591. <figure class="article__image break-out">
  1592. <a href="https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/7786efc2-2498-4310-98e0-49bdbc7bfa5d/nofollow-link-in-wikipedia.png">
  1593. <img
  1594. srcset="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_400/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/7786efc2-2498-4310-98e0-49bdbc7bfa5d/nofollow-link-in-wikipedia.png 400w,
  1595.        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_800/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/7786efc2-2498-4310-98e0-49bdbc7bfa5d/nofollow-link-in-wikipedia.png 800w,
  1596.        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_1200/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/7786efc2-2498-4310-98e0-49bdbc7bfa5d/nofollow-link-in-wikipedia.png 1200w,
  1597.        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_1600/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/7786efc2-2498-4310-98e0-49bdbc7bfa5d/nofollow-link-in-wikipedia.png 1600w,
  1598.        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_2000/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/7786efc2-2498-4310-98e0-49bdbc7bfa5d/nofollow-link-in-wikipedia.png 2000w"
  1599. src="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_400/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/7786efc2-2498-4310-98e0-49bdbc7bfa5d/nofollow-link-in-wikipedia.png"
  1600. sizes="100vw"
  1601. alt=""
  1602. />
  1603. </a>
  1604.  
  1606. <figcaption class="op-vertical-bottom">
  1607. <a href='https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/7786efc2-2498-4310-98e0-49bdbc7bfa5d/nofollow-link-in-wikipedia.png'>Large preview</a>
  1608. </figcaption>
  1610. </figure>
  1611.  
  1612.  
  1613. <p>So, what do you do if you are asked for a link in exchange for a review?</p>
  1614.  
  1615. <p>This is the most common way most bloggers are approached in order to get links placed on their websites. Here are some guidelines for bloggers that <a href="https://webmasters.googleblog.com/2016/03/best-practices-for-bloggers-reviewing.html">receive free products in exchange for reviews</a>.</p>
  1616.  
  1617. <p>If you think your website is hacked for links, you must first secure your website and do a security audit. The second step would entail cleaning up the links and the third step includes submitting a <a href="https://support.google.com/webmasters/answer/2648487?hl=en">disavow file</a> to Google that signals any shady domains that may be pointing to you because of hacker activity.</p>
  1618.  
  1619. <h4>Red Flag #1 : You Start Seeing Your Organic Traffic Go Down</h4>
  1620.  
  1621. <p>If you haven't changed anything and you see your organic traffic go down, make sure it's not a link issue. You could have suffered an attack. We recommend you use the Google Search Console tool available to all website owners and administrators. You must validate that you own the website and then, you will be able to receive an alert if Google detects something is very wrong with your website. Careful, if something is wrong with your website, it could mean a penalty and cause a substantial organic traffic drop. To know more about the types of penalties and alerts Google Search Console provides, you can <a href="https://www.myriamjessier.com/blog/5-types-of-google-penalties/">read an article on this topic</a> or check the official documentation.</p>
  1622.  
  1623. <h4>Red Flag #2: Downloading A Premium Theme Or Plugin For Free</h4>
  1624.  
  1625. <p>This is a very underhanded technique to obtain links. Some individuals will pay for a premium theme or plugin or software and offer it for free on torrent websites or forums where free or hacked versions of premium products are made available. When someone downloads the theme and uses it on a website, the doctored version of theme is used to place links in the website. Oftentimes, the owners never notice that their website is hosting parasite links.</p>
  1626.  
  1627. <h4>Red Flag #3: You Start Getting Strange Feedback About Your Website Or See Strange Content Appear</h4>
  1628.  
  1629. <p>If your readers, customers, visitors or even Google Search Console start telling you about strange content or links showing up on your website, this means that it's time for an SEO audit and a security audit to assess the damage done to your website. Something tells me that Schneiters Gold did not plan on ever offering the BEST Online Viagra OFFERS...</p>
  1630.  
  1631.  
  1632.  
  1633.  
  1634.  
  1635.  
  1636.  
  1637.  
  1638.  
  1639.  
  1640.  
  1641. <figure class="article__image break-out">
  1642. <a href="https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/f3d5bb5b-f20f-4c68-b4de-379ab6fa2121/viagra-phama-hack.png">
  1643. <img
  1644. srcset="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_400/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/f3d5bb5b-f20f-4c68-b4de-379ab6fa2121/viagra-phama-hack.png 400w,
  1645.        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_800/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/f3d5bb5b-f20f-4c68-b4de-379ab6fa2121/viagra-phama-hack.png 800w,
  1646.        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_1200/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/f3d5bb5b-f20f-4c68-b4de-379ab6fa2121/viagra-phama-hack.png 1200w,
  1647.        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_1600/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/f3d5bb5b-f20f-4c68-b4de-379ab6fa2121/viagra-phama-hack.png 1600w,
  1648.        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_2000/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/f3d5bb5b-f20f-4c68-b4de-379ab6fa2121/viagra-phama-hack.png 2000w"
  1649. src="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_400/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/f3d5bb5b-f20f-4c68-b4de-379ab6fa2121/viagra-phama-hack.png"
  1650. sizes="100vw"
  1651. alt=""
  1652. />
  1653. </a>
  1654.  
  1656. <figcaption class="op-vertical-bottom">
  1657. <a href='https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/f3d5bb5b-f20f-4c68-b4de-379ab6fa2121/viagra-phama-hack.png'>Large preview</a>
  1658. </figcaption>
  1660. </figure>
  1661.  
  1662.  
  1663. <h4>Red Flag #4: You Get A Google Search Console Warning</h4>
  1664.  
  1665. <p>If you get an email from the Google Search Console team telling you about some spam issues or other problems that cause you to break their guidelines, you should investigate immediately the source of the problem and fix the issue fast or you could risk a penalty.</p>
  1666.  
  1667. <h4>Red Flag #5: The Link Looks Like It Could Be A Hidden Affiliate Link Or A Redirect</h4>
  1668.  
  1669. <p>Always check the links before placing them. Click the links and see where they lead. You could be provided a link that looks like a high-quality content but instead, it points to a spammy page.</p>
  1670.  
  1671. <p>Make sure to ask if a link is an affiliate link. Affiliate links are links that contain information that helps track a sale back to the person who promoted the product. These affiliate partners get a cut each sale that is attributed to them. Companies like Amazon and Forever21 among others have affiliate programs. You do not want someone promoting a product purely for money and you do not want to lose the trust of search engines and human visitors.</p>
  1672.  
  1673. <div class="sponsors__wide-place"></div>
  1674.  
  1675.  
  1676.  
  1677.  
  1678. <h3>Advice For Linkbuilders, Growth Hackers And Anyone Looking to Gain More Visibility In Search Engines</h3>
  1679.  
  1680. <h5>Vet a website before getting in touch</h5>
  1681.  
  1682. <p>Go ahead, click on the link and check out the website before you do anything else. Otherwise, you will end up contacting your competitors, unrelated blogs, spammy websites, etc.</p>
  1683.  
  1684. <h5>Read the advertising page</h5>
  1685.  
  1686. <p>Most websites have a page, it can be the contact, advertise or about page, that lists the specs and guidelines to collaborate with the websites. Respect what's written on there! Do not bother folks that clearly said they do not want to be contacted for links. <strong>No, you are not the one that will make them change their minds. Yes, we're sure.</strong></p>
  1687.  
  1688. <h5>Avoid metric blindness</h5>
  1689.  
  1690. <p>My very good friend Igor, proud owner of Igor.io, gets contacted all the time by linkbuilding companies. Why? Because their website was once upon a time (before they removed their incredible archive of technical articles) had incredible metrics. For reference, Igor has a fully responsive, accessible website and it looks like this:</p>
  1691.  
  1692.  
  1693.  
  1694.  
  1695.  
  1696.  
  1697.  
  1698.  
  1699.  
  1700.  
  1701.  
  1702. <figure >
  1703. <a href="https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/ea85d880-49ae-44a3-aafd-f97f1692d8ed/06-linkbuilding-igors-weblog.png">
  1704. <img
  1705. srcset="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_400/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/ea85d880-49ae-44a3-aafd-f97f1692d8ed/06-linkbuilding-igors-weblog.png 400w,
  1706.        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_800/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/ea85d880-49ae-44a3-aafd-f97f1692d8ed/06-linkbuilding-igors-weblog.png 800w,
  1707.        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_1200/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/ea85d880-49ae-44a3-aafd-f97f1692d8ed/06-linkbuilding-igors-weblog.png 1200w,
  1708.        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_1600/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/ea85d880-49ae-44a3-aafd-f97f1692d8ed/06-linkbuilding-igors-weblog.png 1600w,
  1709.        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_2000/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/ea85d880-49ae-44a3-aafd-f97f1692d8ed/06-linkbuilding-igors-weblog.png 2000w"
  1710. src="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_400/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/ea85d880-49ae-44a3-aafd-f97f1692d8ed/06-linkbuilding-igors-weblog.png"
  1711. sizes="100vw"
  1712. alt="igor.io"
  1713. />
  1714. </a>
  1715.  
  1717. <figcaption class="op-vertical-bottom">
  1718. <a href='https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/ea85d880-49ae-44a3-aafd-f97f1692d8ed/06-linkbuilding-igors-weblog.png'>Large preview</a>
  1719. </figcaption>
  1721. </figure>
  1722.  
  1723.  
  1724. <p>But Igor's weblog's metrics look like this (and they looked even more enticing to SEOs the last time I checked):</p>
  1725.  
  1726.  
  1727.  
  1728.  
  1729.  
  1730.  
  1731.  
  1732.  
  1733.  
  1734.  
  1735.  
  1736. <figure class="article__image break-out">
  1737. <a href="https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/0f325993-4f1a-4187-b64e-6bcd789ff04f/07-linkbuilding-the-citizen-s-field-guide.png">
  1738. <img
  1739. srcset="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_400/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/0f325993-4f1a-4187-b64e-6bcd789ff04f/07-linkbuilding-the-citizen-s-field-guide.png 400w,
  1740.        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_800/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/0f325993-4f1a-4187-b64e-6bcd789ff04f/07-linkbuilding-the-citizen-s-field-guide.png 800w,
  1741.        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_1200/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/0f325993-4f1a-4187-b64e-6bcd789ff04f/07-linkbuilding-the-citizen-s-field-guide.png 1200w,
  1742.        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_1600/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/0f325993-4f1a-4187-b64e-6bcd789ff04f/07-linkbuilding-the-citizen-s-field-guide.png 1600w,
  1743.        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_2000/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/0f325993-4f1a-4187-b64e-6bcd789ff04f/07-linkbuilding-the-citizen-s-field-guide.png 2000w"
  1744. src="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_400/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/0f325993-4f1a-4187-b64e-6bcd789ff04f/07-linkbuilding-the-citizen-s-field-guide.png"
  1745. sizes="100vw"
  1746. alt=""
  1747. />
  1748. </a>
  1749.  
  1751. <figcaption class="op-vertical-bottom">
  1752. <a href='https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/0f325993-4f1a-4187-b64e-6bcd789ff04f/07-linkbuilding-the-citizen-s-field-guide.png'>Large preview</a>
  1753. </figcaption>
  1755. </figure>
  1756.  
  1757.  
  1758. <p>This meant that a lot of companies wanted to contact the owner of a website that had more than 1000 high-quality websites referring to it. But if they had bothered to check out Igor's website, they would have seen that nothing was on there. Back in the days, this website just read: <em>igor's weblog</em> and the archive was hidden in the code. You had to know where to look for it... or you would find it very easily if you happened to be a bot. That's why the metrics were the so high: only a bot and those in the know would discover and share Igor's content.</p>
  1759.  
  1760. <h5>Know who you are talking to</h5>
  1761.  
  1762. <p>I get emails telling me to ask my boss if the company can place a link on my website. Now, quick reminder, if you go on myriamjessier.com and contact me, the person with an email that contains the words myriam + jessier, chances are that you are talking to the owner herself, right? Which leads me to another point: write my name correctly please and do not address me as sir, or dear, or dear sir. This is a common issue that Stéphanie Walter has as half of the Internet doesn't seem to know <a href="https://the-pastry-box-project.net/stephanie-walter/2018-february-12">how to spell her name</a>.</p>
  1763.  
  1764.  
  1765.  
  1766.  
  1767.  
  1768.  
  1769.  
  1770.  
  1771.  
  1772.  
  1773.  
  1774. <figure >
  1775. <a href="https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/9fab39de-e602-4a32-a646-177ac33c6957/08-linkbuilding-the-citizen-s-field-guide.png">
  1776. <img
  1777. srcset="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_400/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/9fab39de-e602-4a32-a646-177ac33c6957/08-linkbuilding-the-citizen-s-field-guide.png 400w,
  1778.        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_800/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/9fab39de-e602-4a32-a646-177ac33c6957/08-linkbuilding-the-citizen-s-field-guide.png 800w,
  1779.        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_1200/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/9fab39de-e602-4a32-a646-177ac33c6957/08-linkbuilding-the-citizen-s-field-guide.png 1200w,
  1780.        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_1600/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/9fab39de-e602-4a32-a646-177ac33c6957/08-linkbuilding-the-citizen-s-field-guide.png 1600w,
  1781.        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_2000/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/9fab39de-e602-4a32-a646-177ac33c6957/08-linkbuilding-the-citizen-s-field-guide.png 2000w"
  1782. src="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_400/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/9fab39de-e602-4a32-a646-177ac33c6957/08-linkbuilding-the-citizen-s-field-guide.png"
  1783. sizes="100vw"
  1784. alt=""
  1785. />
  1786. </a>
  1787.  
  1789. <figcaption class="op-vertical-bottom">
  1790. <a href='https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/9fab39de-e602-4a32-a646-177ac33c6957/08-linkbuilding-the-citizen-s-field-guide.png'>Large preview</a>
  1791. </figcaption>
  1793. </figure>
  1794.  
  1795.  
  1796. <h5>Not knowing or ignoring legal guidelines and Google's guidelines</h5>
  1797.  
  1798. <p>If you do not disclose why you are asking for a link and that there could be a risk to a website selling you a link, then you are not being transparent.</p>
  1799.  
  1800. <h5>Bonus Tip</h5>
  1801.  
  1802. <p>Don't reach out to experts who do what you do for a living. I receive linkbuilding offers (buying and selling) from other search engine optimization "specialists" all the time. If you found me on the web and are offering to sell me links because my website <em>isn't visible enough</em>, then maybe, just maybe, my SEO efforts are working no?</p>
  1803.  
  1804. <h3>Conclusion</h3>
  1805.  
  1806. <p>We hope that you learned a few things about linkbuilding. Here is a quick recap:</p>
  1807.  
  1808. <ul>
  1809. <li>There's money in the <a href="https://www.quora.com/What-is-the-origin-of-the-quote-Theres-always-money-in-the-banana-stand">banana stand</a> and in linkbuilding.</li>
  1810. <li>Not all links are equal, key metrics are : authority, freshness, placement, relevancy.</li>
  1811. <li>People will go to extremes to get links so if a “great deal” is offered to you, look for the hidden link in there!</li>
  1812. <li>Secure your website to avoid SEO problems. If you make it hard work for hackers, they will often give up and move on to an easier prey.</li>
  1813. <li>If you want to help someone out, make sure you give them a link with a good anchor! It really helps!</li>
  1814. </ul>
  1815.  
  1816. <div class="signature">
  1817.  <img src="https://www.smashingmagazine.com/images/logo/logo--red.png" alt="Smashing Editorial">
  1818.  <span>(ra, yk, il)</span>
  1819. </div>
  1820.  
  1821.  
  1822.              </article>
  1823.            </body>
  1824.          </html>
  1825.        ]]></content:encoded>
  1826.      </item>
  1827.    
  1828.      <item>
  1829.        
  1830.          
  1831.          <author>Lyndon Cerejo</author>
  1832.        
  1833.        <title>So You Want to Persuade Users? Make Things Simple!</title>
  1834.        <link>https://www.smashingmagazine.com/2018/07/persuasion-user-experience-design/</link>
  1835.        <pubDate>Tue, 17 Jul 2018 16:15:38 +0200</pubDate>
  1836.        <guid>https://www.smashingmagazine.com/2018/07/persuasion-user-experience-design/</guid>
  1837.        <description>(This article is kindly sponsored by Adobe.) The persuasive design toolbox is filled with powerful tools based on psychology. These tools range from Cialdini’s set of six principles of persuasion to ten times that number of Persuasive Patterns. Presented with all these methods, it can be tempting to use all of them to cover all possible bases, using a shotgun approach, hoping that one will resonate with your target users.</description>
  1838.        <content:encoded><![CDATA[
  1839.          <html>
  1840.            <head>
  1841.              <meta charset="utf-8">
  1842.              <link rel="canonical" href="https://www.smashingmagazine.com/2018/07/persuasion-user-experience-design/" />
  1843.              <title>So You Want to Persuade Users? Make Things Simple!</title>
  1844.            </head>
  1845.            <body>
  1846.              <article>
  1847.                <header>
  1848.                  <h1>So You Want to Persuade Users? Make Things Simple!</h1>
  1849.                  
  1850.                    
  1851.                    <address>Lyndon Cerejo</address>
  1852.                  
  1853.                  <time datetime="2018-07-17T16:15:38&#43;02:00" class="op-published">2018-07-17T16:15:38+02:00</time>
  1854.                  <time datetime="2018-07-23T11:42:51&#43;00:00" class="op-modified">2018-07-23T11:42:51+00:00</time>
  1855.                </header>
  1856.                
  1857.  
  1858. <p><p>(<em>This article is kindly sponsored by Adobe</em>.) The persuasive design toolbox is filled with powerful tools based on psychology. These tools range from Cialdini’s set of six principles of persuasion to <a href="https://shop.ui-patterns.com/product/persuasive-patterns-card-deck/">ten times that number of Persuasive Patterns</a>. Presented with all these methods, it can be tempting to use all of them to cover all possible bases, using a shotgun approach, hoping that one will resonate with your target users.</p>
  1859.  
  1860. <p>However, applying persuasion principles and patterns in a haphazard manner just ends up being persuasive design clutter. Like user experience design, designing for everyone is designing for no one. Randomly thrown together persuasive techniques will also make users feel manipulated, not in control, making them abandon the site or experience. The key to persuading your users is to keep it simple: using focused persuasive techniques and tactics that will work for your users.</p>
  1861.  
  1862. <h3 id="persuasion-funnel">Persuasion Funnel</h3>
  1863.  
  1864. <p><a href="https://en.wikipedia.org/wiki/AIDA_(marketing)">AIDA</a> is an acronym used in marketing and advertising to describe the stages that a customer goes through in the purchase process. The stages of <strong>A</strong>ttention, <strong>I</strong>nterest, <strong>D</strong>esire and <strong>A</strong>ction, generically follow a series of cognitive (thinking) and affective (feeling) stages culminating in a behavioral (doing e.g. purchase or trial) stage. This should sound familiar since this is what we do through design, especially persuasive design.</p>
  1865.  
  1866. <p>When it comes to persuasive design, users go through a few stages between Awareness and Action, and the design should guide them from one stage to the next. I don’t have a clever acronym for it (yet), but the stages the design has to take the users through are:</p>
  1867.  
  1868. <ul>
  1869. <li>Awareness</li>
  1870. <li>Relevant</li>
  1871. <li>Credible</li>
  1872. <li>Usable</li>
  1873. <li>Desirable</li>
  1874. <li>Persuasive</li>
  1875. <li>Action</li>
  1876. </ul>
  1877.  
  1878.  
  1879.  
  1880.  
  1881.  
  1882.  
  1883.  
  1884.  
  1885.  
  1886.  
  1887.  
  1888. <figure >
  1889. <a href="https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/5b6a1e88-7419-4c7a-8095-627d7fb667e5/awareness-action-funnel-large.png">
  1890. <img
  1891. srcset="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_400/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/5b6a1e88-7419-4c7a-8095-627d7fb667e5/awareness-action-funnel-large.png 400w,
  1892.        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_800/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/5b6a1e88-7419-4c7a-8095-627d7fb667e5/awareness-action-funnel-large.png 800w,
  1893.        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_1200/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/5b6a1e88-7419-4c7a-8095-627d7fb667e5/awareness-action-funnel-large.png 1200w,
  1894.        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_1600/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/5b6a1e88-7419-4c7a-8095-627d7fb667e5/awareness-action-funnel-large.png 1600w,
  1895.        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_2000/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/5b6a1e88-7419-4c7a-8095-627d7fb667e5/awareness-action-funnel-large.png 2000w"
  1896. src="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_400/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/5b6a1e88-7419-4c7a-8095-627d7fb667e5/awareness-action-funnel-large.png"
  1897. sizes="100vw"
  1898. alt=""
  1899. />
  1900. </a>
  1901.  
  1903. <figcaption class="op-vertical-bottom">
  1904. (<a href='https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/5b6a1e88-7419-4c7a-8095-627d7fb667e5/awareness-action-funnel-large.png'>Large preview</a>)
  1905. </figcaption>
  1907. </figure>
  1908.  
  1909.  
  1910. <p>When users are contemplating an action (like booking a hotel room), they have to be aware of your site, app, or experience. Once they begin their journey on your site, they quickly evaluate the experience and either proceed to the next step or leave and go elsewhere. With fewer users continuing to subsequent stages, the number of users at each stage begins to resemble the shape of a funnel as shown above.</p>
  1911.  
  1912. <p>Let’s peek inside what could be going on in hypothetical users’ minds as they go through the experience of booking a hotel room for New Year’s Eve in Times Square, and some of the reasons they may drop off in each stage.</p>
  1913.  
  1914. <h4 id="awareness">Awareness</h4>
  1915.  
  1916. <blockquote>“Hmmm… Where do I start? Hotel chains promise the lowest rate if we book directly with them, but I won’t be able to see other hotel options around Times Square. Hotel… Maybe I should try an online travel agency like Trivago (looks like the <a href="https://nutmegcreative.com/blog/meet-trivago-guy-tim-williams/">Trivago guy</a> / <a href="https://www.theguardian.com/travel/2017/aug/28/trivago-girl-gabrielle-miller">Trivago girl</a> advertising works!) to find a wider range of hotels. I’m going to also quickly Google it to see if there are other options.”</blockquote>
  1917.  
  1918. <p>Users have to be aware of your site, app or experience to use it &mdash; Duh!</p>
  1919.  
  1920. <h4 id="relevant">Relevant</h4>
  1921.  
  1922. <blockquote>“I found HotelTonight on Google. It looks like a great way to get rooms last minute, but not this far in advance &mdash; it’s not relevant to me.”</blockquote>
  1923.  
  1924. <p>If your experience is not relevant to the task they are trying to accomplish, users will leave and try elsewhere. If your products or services are relevant, but not findable by the user, work on your navigation, search, and content layout to ensure your products and services are visible. Everything does not have to be one click away, but if the user gets the <a href="https://www.nngroup.com/articles/wrong-information-scent-costs-sales/">scent of information</a>, or cues that make them think they are on the right path, they will follow the trail to that information.</p>
  1925.  
  1926. <h4 id="credible">Credible</h4>
  1927.  
  1928. <blockquote>“This design looks like it hasn’t been updated since the [GeoCities era](http://www.arngren.net/).<br /><br />&mdash; Warning bells go off in head &mdash;<br /><br />I’m out of here.”</blockquote>
  1929.  
  1930. <p>Users are aware of many of the risks available online and look for trust indicators including a known brand and domain, secure site, professional design, real-world contact information and third-party certificates or badges. Incorporate these elements to create a comfort level for the user.</p>
  1931.  
  1932. <h4 id="usable">Usable</h4>
  1933.  
  1934. <blockquote>“I can’t figure out where things are in the navigation, and the search results had hundreds of unhelpful results. The homepage has nice big images, but that meant I had to scroll before I could see any real content.”</blockquote>
  1935.  
  1936. <p>Usability is surprisingly still an issue with many sites. Follow User Experience best practices during design, and test with users to validate that the design is usable.</p>
  1937.  
  1938. <h4 id="desirable">Desirable</h4>
  1939.  
  1940. <blockquote>“This reminds me of Craigslist &mdash; it is usable, but the design does not make me want to stay and use it. I’ll try that other hotel website that provides an immersive, interactive experience as I search for hotels.”</blockquote>
  1941.  
  1942. <p>As much as we like to believe it, users’ decisions are not always rational, and very often driven by emotion, and we can address that through design. Usability is about making it work well; this is about making it beautiful as well.</p>
  1943.  
  1944. <p>In his book <a href="https://amzn.to/2txzH9i">Emotional Design</a>, Don Norman explains: &ldquo;Attractive things do work better &mdash; their attractiveness produces positive emotions, causing mental processes to be more creative, more tolerant of minor difficulties.&rdquo; Don talks about the three different aspects of design: visceral, behavioral, and reflective. Visceral design is about appearance, behavioral about the pleasure and effectiveness of use, and reflective design involves the rationalization and intellectualization of a product.</p>
  1945.  
  1946. <h4 id="persuasive">Persuasive</h4>
  1947.  
  1948. <blockquote>“Oh, Wow! That’s a long list of hotels, with plenty of availability for New Year’s Eve. There’s no real reason to book now. I’ll just come back to book after Thanksgiving…”</blockquote>
  1949.  
  1950. <p>The user was interested, able, and willing, but the design did not motivate him to take intended action. Use relevant persuasion techniques that apply to your user to move them toward the desired action.</p>
  1951.  
  1952.  
  1953.  
  1954.  
  1955.  
  1956.  
  1957.  
  1958.  
  1959.  
  1960.  
  1961.  
  1962. <figure class="article__image break-out">
  1963. <a href="https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/dd063f00-f552-4af0-b18d-3bb852053f6e/persuasive-methods-travelocity-example-large.png">
  1964. <img
  1965. srcset="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_400/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/dd063f00-f552-4af0-b18d-3bb852053f6e/persuasive-methods-travelocity-example-large.png 400w,
  1966.        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_800/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/dd063f00-f552-4af0-b18d-3bb852053f6e/persuasive-methods-travelocity-example-large.png 800w,
  1967.        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_1200/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/dd063f00-f552-4af0-b18d-3bb852053f6e/persuasive-methods-travelocity-example-large.png 1200w,
  1968.        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_1600/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/dd063f00-f552-4af0-b18d-3bb852053f6e/persuasive-methods-travelocity-example-large.png 1600w,
  1969.        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_2000/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/dd063f00-f552-4af0-b18d-3bb852053f6e/persuasive-methods-travelocity-example-large.png 2000w"
  1970. src="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_400/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/dd063f00-f552-4af0-b18d-3bb852053f6e/persuasive-methods-travelocity-example-large.png"
  1971. sizes="100vw"
  1972. alt="Examples of persuasive methods while shopping on Travelocity for a hotel room for New Year’s Eve."
  1973. />
  1974. </a>
  1975.  
  1977. <figcaption class="op-vertical-bottom">
  1978. Examples of persuasive methods while shopping on Travelocity for a hotel room for New Year’s Eve. (<a href='https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/dd063f00-f552-4af0-b18d-3bb852053f6e/persuasive-methods-travelocity-example-large.png'>Large preview</a>)
  1979. </figcaption>
  1981. </figure>
  1982.  
  1983.  
  1984. <h4 id="action">Action</h4>
  1985.  
  1986. <blockquote>“Oh, Wow! 65% of hotels are already booked in this area for New Year’s Eve. I better make a reservation now. <Scanning the results list, like the screenshot above>. This looks like a nice hotel, and it also offers free cancellation - I’m reserving it now!”</blockquote>
  1987.  
  1988. <p>The user who made it to this stage was interested, able, and willing, and the design nudged him to take intended action of making a reservation before leaving the site.</p>
  1989.  
  1990. <p>Persuasion is not about applying all available principles and patterns to your designs, but systematically identifying how you can address users’ barriers and motivators during each step of the journey, and guiding your users through the funnel to take the desired action.</p>
  1991.  
  1992. <h3 id="the-kiss-approach">The KISS Approach</h3>
  1993.  
  1994. <p>Most of us are familiar with the acronym <a href="https://en.wikipedia.org/wiki/KISS_principle">KISS</a>: &ldquo;Keep It Simple, Stupid,&rdquo; a principle advocating simplicity as a key goal in design by avoiding unnecessary complexity. Let’s borrow that acronym for a 4-step approach to persuasive design.</p>
  1995.  
  1996. <h4 id="k-now-the-right-behavior-to-target"><strong>K</strong>now The Right Behavior To Target</h4>
  1997.  
  1998. <p>The first step is knowing the behavior you would like to target, and identifying the simplest action that can lead to that behavior change. Take the example of term life insurance companies who, to put it very bluntly, stand to benefit if their policyholders are healthy and don’t die while the policy is active. While those companies have a long-term ambitious goal of helping their policyholders lead healthy lives (mutually beneficial), that could be broken down into a simpler target behavior of walking 10,000 steps daily. This behavior is simple to understand, achieve, measure, and contributes to the long-term goal of healthier policyholders.</p>
  1999.  
  2000. <p>One such insurance company is offering new policyholders the latest Apple Watch for a low initial down payment ($25). The ongoing monthly payments can be waived each month that the policyholder leads an active lifestyle and exercises regularly (e.g. walks about 10,000 steps a day). About half the people who participated have <a href="https://www.cnbc.com/2017/10/23/apple-watches-offered-to-all-john-hancock-life-insurance-customers.html">achieved monthly goals</a>, despite <a href="https://gizmodo.com/when-an-insurer-sells-you-an-apple-watch-for-25-how-m-1819912738">potential privacy implications</a>.</p>
  2001.  
  2002.  
  2003.  
  2004.  
  2005.  
  2006.  
  2007.  
  2008.  
  2009.  
  2010.  
  2011.  
  2012. <figure >
  2013. <a href="https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/8eea2ad6-9d3e-4b7c-add7-f5edfdd81bf9/life-insurance-apple-watch-offer-large.png">
  2014. <img
  2015. srcset="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_400/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/8eea2ad6-9d3e-4b7c-add7-f5edfdd81bf9/life-insurance-apple-watch-offer-large.png 400w,
  2016.        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_800/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/8eea2ad6-9d3e-4b7c-add7-f5edfdd81bf9/life-insurance-apple-watch-offer-large.png 800w,
  2017.        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_1200/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/8eea2ad6-9d3e-4b7c-add7-f5edfdd81bf9/life-insurance-apple-watch-offer-large.png 1200w,
  2018.        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_1600/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/8eea2ad6-9d3e-4b7c-add7-f5edfdd81bf9/life-insurance-apple-watch-offer-large.png 1600w,
  2019.        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_2000/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/8eea2ad6-9d3e-4b7c-add7-f5edfdd81bf9/life-insurance-apple-watch-offer-large.png 2000w"
  2020. src="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_400/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/8eea2ad6-9d3e-4b7c-add7-f5edfdd81bf9/life-insurance-apple-watch-offer-large.png"
  2021. sizes="100vw"
  2022. alt="John Hancock Term Life Insurance Apple Watch offer targets walking about 10,000 steps a day."
  2023. />
  2024. </a>
  2025.  
  2027. <figcaption class="op-vertical-bottom">
  2028. John Hancock Term Life Insurance Apple Watch offer targets walking about 10,000 steps a day. (<a href='https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/8eea2ad6-9d3e-4b7c-add7-f5edfdd81bf9/life-insurance-apple-watch-offer-large.png'>Large preview</a>)
  2029. </figcaption>
  2031. </figure>
  2032.  
  2033.  
  2034. <h4 id="i-dentify-barriers-and-motivators"><strong>I</strong>dentify Barriers And Motivators</h4>
  2035.  
  2036. <p>User research for persuasive design digs below the surface thinking level to the feeling level, and moves beyond the rational to the emotional level, as shown below. <a href="https://www.smashingmagazine.com/2018/06/how-to-get-to-know-your-users/">Getting to know your users at a deeper level</a> will help you use psychology to focus your design to get users to engage in the target behavior identified above. User interviews that focus on users’ feelings and emotions are used to uncover barriers and motivators they consciously or subconsciously face while trying to achieve the target behavior. This helps us identify which blocks we need to weaken, and which motivators we should strengthen, through persuasive design techniques and tactics.</p>
  2037.  
  2038.  
  2039.  
  2040.  
  2041.  
  2042.  
  2043.  
  2044.  
  2045.  
  2046.  
  2047.  
  2048. <figure >
  2049. <a href="https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/eb2e9399-310e-497d-a2ff-8e4be0e78854/tip-of-the-iceberg-user-research-large.jpg">
  2050. <img
  2051. srcset="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_400/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/eb2e9399-310e-497d-a2ff-8e4be0e78854/tip-of-the-iceberg-user-research-large.jpg 400w,
  2052.        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_800/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/eb2e9399-310e-497d-a2ff-8e4be0e78854/tip-of-the-iceberg-user-research-large.jpg 800w,
  2053.        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_1200/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/eb2e9399-310e-497d-a2ff-8e4be0e78854/tip-of-the-iceberg-user-research-large.jpg 1200w,
  2054.        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_1600/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/eb2e9399-310e-497d-a2ff-8e4be0e78854/tip-of-the-iceberg-user-research-large.jpg 1600w,
  2055.        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_2000/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/eb2e9399-310e-497d-a2ff-8e4be0e78854/tip-of-the-iceberg-user-research-large.jpg 2000w"
  2056. src="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_400/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/eb2e9399-310e-497d-a2ff-8e4be0e78854/tip-of-the-iceberg-user-research-large.jpg"
  2057. sizes="100vw"
  2058. alt="Tip of the iceberg user research diagram"
  2059. />
  2060. </a>
  2061.  
  2063. <figcaption class="op-vertical-bottom">
  2064. (<a href='https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/eb2e9399-310e-497d-a2ff-8e4be0e78854/tip-of-the-iceberg-user-research-large.jpg'>Large preview</a>)
  2065. </figcaption>
  2067. </figure>
  2068.  
  2069.  
  2070. <h4 id="s-implify-the-experience"><strong>S</strong>implify The Experience</h4>
  2071.  
  2072. <p>Simplify the design experience of the first stages of the funnel, as users go through the mental verifications of relevancy, credibility, and usability of the experience. This includes making it easy for the user to find what they are looking for, credibility indicators like professional design, contact information, and third-party certificates or badges, as well as addressing usability issues. As Steve Krug put it very succinctly: &ldquo;<a href="https://amzn.to/2MoAh0D">Don’t Make Me Think</a>&rdquo;.</p>
  2073.  
  2074. <h4 id="s-elect-appropriate-triggers"><strong>S</strong>elect Appropriate Triggers</h4>
  2075.  
  2076. <p>Users who have made it this far in the process are interested in something you have to offer. As a designer, you have to nudge them to take the desired action. A good starting point is Robert Cialdini’s, <a href="https://www.influenceatwork.com/principles-of-persuasion/">six key principles of persuasion</a>:</p>
  2077.  
  2078. <ol>
  2079. <li><strong>Reciprocity</strong><br />
  2080. People are obliged to give something back in exchange for receiving something.</li>
  2081. <li><strong>Scarcity</strong><br />
  2082. People want more of those things they can have less of.</li>
  2083. <li><strong>Authority</strong><br />
  2084. People follow the lead of credible, knowledgeable experts.</li>
  2085. <li><strong>Consistency</strong><br />
  2086. People like to be consistent with the things they have previously said or done.</li>
  2087. <li><strong>Liking</strong><br />
  2088. People prefer to say yes to those that they like.</li>
  2089. <li><strong>Consensus (Social Proof)</strong><br />
  2090. Especially when they are uncertain, people will look to the actions and behaviors of others to determine their own.</li>
  2091. </ol>
  2092.  
  2093. <p>These principles can be applied through dozens of different persuasive design patterns and methods, some of which have been previously published on Smashing Magazine (<a href="https://www.smashingmagazine.com/2015/10/beyond-usability-designing-with-persuasive-patterns">patterns</a>, <a href="https://www.smashingmagazine.com/2010/11/persuasion-triggers-in-web-design/">triggers</a>), or in the books listed in the resources at the end. As you may notice, many persuasive patterns are related to UI patterns, because part of persuasion is reducing friction and simplifying what the user needs to do at any given point in time. For example, the persuasive pattern of <a href="http://ui-patterns.com/patterns/Limited-choice">Limited Choice</a> can be realized through UI Pattern of <a href="http://ui-patterns.com/patterns/ProgressiveDisclosure">Progressive Disclosure</a>.</p>
  2094.  
  2095. <p>Given that there are dozens of patterns and methods (depending on where you look), it is important to selectively use methods that will resonate with your users. Applying all design patterns in the hope of some working will result in persuasion clutter and overwhelm the user, possibly driving them away from your site.</p>
  2096.  
  2097. <h3 id="examining-persuasion">Examining Persuasion</h3>
  2098.  
  2099. <p>Let’s take a closer look at the earlier example of the term life insurance through the eyes of someone who is motivated (shopping for life insurance) and has the ability (to pay monthly life insurance cost). Like me, let’s assume that this user was made aware of this through a sponsored post on Facebook. During the stages of awareness and relevance, there are a few persuasive triggers as shown below that make the user click &ldquo;Learn More&rdquo;.</p>
  2100.  
  2101.  
  2102.  
  2103.  
  2104.  
  2105.  
  2106.  
  2107.  
  2108.  
  2109.  
  2110.  
  2111. <figure class="article__image break-out">
  2112. <a href="https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/3a5f0222-720d-421c-bb7e-2f99c88cd96e/jh-facebook-post-persuasion-large.png">
  2113. <img
  2114. srcset="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_400/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/3a5f0222-720d-421c-bb7e-2f99c88cd96e/jh-facebook-post-persuasion-large.png 400w,
  2115.        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_800/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/3a5f0222-720d-421c-bb7e-2f99c88cd96e/jh-facebook-post-persuasion-large.png 800w,
  2116.        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_1200/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/3a5f0222-720d-421c-bb7e-2f99c88cd96e/jh-facebook-post-persuasion-large.png 1200w,
  2117.        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_1600/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/3a5f0222-720d-421c-bb7e-2f99c88cd96e/jh-facebook-post-persuasion-large.png 1600w,
  2118.        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_2000/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/3a5f0222-720d-421c-bb7e-2f99c88cd96e/jh-facebook-post-persuasion-large.png 2000w"
  2119. src="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_400/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/3a5f0222-720d-421c-bb7e-2f99c88cd96e/jh-facebook-post-persuasion-large.png"
  2120. sizes="100vw"
  2121. alt="facebook"
  2122. />
  2123. </a>
  2124.  
  2126. <figcaption class="op-vertical-bottom">
  2127. (<a href='https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/3a5f0222-720d-421c-bb7e-2f99c88cd96e/jh-facebook-post-persuasion-large.png'>Large preview</a>)
  2128. </figcaption>
  2130. </figure>
  2131.  
  2132.  
  2133. <p>Clicking the &ldquo;Learn More&rdquo; button takes the user to a landing page that we will examine in sections for a persuasive flow:</p>
  2134.  
  2135.  
  2136.  
  2137.  
  2138.  
  2139.  
  2140.  
  2141.  
  2142.  
  2143.  
  2144.  
  2145. <figure >
  2146. <a href="https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/0521424b-45b4-4978-978f-aeba231d4e4b/jh-landing-persuasion-1of2-large.png">
  2147. <img
  2148. srcset="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_400/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/0521424b-45b4-4978-978f-aeba231d4e4b/jh-landing-persuasion-1of2-large.png 400w,
  2149.        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_800/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/0521424b-45b4-4978-978f-aeba231d4e4b/jh-landing-persuasion-1of2-large.png 800w,
  2150.        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_1200/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/0521424b-45b4-4978-978f-aeba231d4e4b/jh-landing-persuasion-1of2-large.png 1200w,
  2151.        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_1600/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/0521424b-45b4-4978-978f-aeba231d4e4b/jh-landing-persuasion-1of2-large.png 1600w,
  2152.        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_2000/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/0521424b-45b4-4978-978f-aeba231d4e4b/jh-landing-persuasion-1of2-large.png 2000w"
  2153. src="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_400/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/0521424b-45b4-4978-978f-aeba231d4e4b/jh-landing-persuasion-1of2-large.png"
  2154. sizes="100vw"
  2155. alt=""
  2156. />
  2157. </a>
  2158.  
  2160. <figcaption class="op-vertical-bottom">
  2161. (<a href='https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/0521424b-45b4-4978-978f-aeba231d4e4b/jh-landing-persuasion-1of2-large.png'>Large preview</a>)
  2162. </figcaption>
  2164. </figure>
  2165.  
  2166.  
  2167. <p>The user’s primary motivation in shopping for term life insurance is: &ldquo;Protect Family,&rdquo; and a big barrier is “High Cost.”</p>
  2168.  
  2169. <ol>
  2170. <li><strong>Reputable Name (Credibility)</strong><br />Even if you’ve not heard of this company, John Hancock is a famous person and the term used as a synonym in the United States for one's signature. The company reinforces it’s longevity later on the page.</li>
  2171. <li><strong>Toll-free Number (Credibility)</strong><br />Established and legitimate organization.</li>
  2172. <li><strong>Message Framing</strong><br />Live healthy, is also reinforced by the image of a family enjoying outdoors.<br /><blockquote>“This life insurance product will help me live longer, lead a happy life like them, and protect my family in case something happens, and won’t cost much.”</blockquote></li>
  2173. <li><strong>People Like Me & Association</strong><br />This family looks like mine (or the family next door) &mdash; I can see myself in this wide-open field (visceral and reflective triggers).</li>
  2174. <li><strong>Extrinsic Reward</strong><br />An Apple watch for $25 &mdash; that’s a bonus here!</li>
  2175. <li><strong>Visual Cueing</strong><br />The person in focus (stereotypical breadwinner) has his gaze directly focused at the form below, leading the user to the next step.</li>
  2176. <li><strong>Foot In The Door</strong><br />This quote won’t cost anything &mdash; zip, <em>nada</em>.</li>
  2177. <li><strong>Computer As A Social Actor</strong><br />The information takes a conversational tone and format, not the usual form in rows and columns. The information seems reasonable to generate a quote.</li>
  2178. <li><strong>Commitment & Consistency</strong><br />By filling this quick, easy, and free form, chances are that the user will act consistently and proceed when it comes to the next step (application), unless there’s another barrier (price, benefits, etc.)
  2179.  
  2180.  
  2181.  
  2182.  
  2183.  
  2184.  
  2185.  
  2186.  
  2187.  
  2188.  
  2189.  
  2190. <figure >
  2191. <a href="https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/6dc361e3-b860-4715-a4ac-395cf5961c61/jh-landing-persuasion-2of2-large.png">
  2192. <img
  2193. srcset="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_400/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/6dc361e3-b860-4715-a4ac-395cf5961c61/jh-landing-persuasion-2of2-large.png 400w,
  2194.        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_800/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/6dc361e3-b860-4715-a4ac-395cf5961c61/jh-landing-persuasion-2of2-large.png 800w,
  2195.        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_1200/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/6dc361e3-b860-4715-a4ac-395cf5961c61/jh-landing-persuasion-2of2-large.png 1200w,
  2196.        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_1600/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/6dc361e3-b860-4715-a4ac-395cf5961c61/jh-landing-persuasion-2of2-large.png 1600w,
  2197.        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_2000/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/6dc361e3-b860-4715-a4ac-395cf5961c61/jh-landing-persuasion-2of2-large.png 2000w"
  2198. src="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_400/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/6dc361e3-b860-4715-a4ac-395cf5961c61/jh-landing-persuasion-2of2-large.png"
  2199. sizes="100vw"
  2200. alt=""
  2201. />
  2202. </a>
  2203.  
  2205. <figcaption class="op-vertical-bottom">
  2206. (<a href='https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/6dc361e3-b860-4715-a4ac-395cf5961c61/jh-landing-persuasion-2of2-large.png'>Large preview</a>)
  2207. </figcaption>
  2209. </figure>
  2210.  
  2211. </li>
  2212. <li><strong>Control</strong><br />The user has a choice of devices.</li>
  2213. <li><strong>Extrinsic Rewards</strong><br />More rewards to be earned.</li>
  2214. <li><strong>Control</strong><br />The user controls how much they pay (the more active, the less you’ll pay). Also, in case the user does is not active, the cost is framed as just $13 (for a month).</li>
  2215. <li><strong>Credibility</strong><br />The company reinforces longevity and protector of America.</li>
  2216. <li><strong>Authority</strong><br />Licensed Coverage Coach (not just a sales agent).</li>
  2217. <li><strong>Flow</strong><br />One way to keep users in the flow and not get distracted is by disabling the social media links (which could raise the question: why display them?).</li>
  2218. </ol>
  2219.  
  2220. <p>That took longer to dissect and read than it does in real life, where most of this is processed consciously and subconsciously in a few seconds, often with a glance or two.</p>
  2221.  
  2222. <p>Apart from the methods establishing credibility, the persuasive methods are used to strengthen the primary motivator of &ldquo;Protect Family&rdquo; (get insurance, extrinsic reward will help me live longer for my family), and weaken the barrier of “High Cost” (low monthly cost, additional savings, no ongoing watch payments). Note how they work together and don’t conflict or clutter the experience.</p>
  2223.  
  2224. <h3 id="conclusion">Conclusion</h3>
  2225.  
  2226. <p>Persuasion is all around us, in our everyday lives. As designers, we can use <a href="https://www.smashingmagazine.com/2018/06/ethics-of-persuasion/">ethical</a> persuasive design methods to get users to take some action. With plenty of persuasive methods available, we have to be selective about what we use. We can use the KISS approach to keep it simple:</p>
  2227.  
  2228. <ul>
  2229. <li><strong>K</strong>now the right behavior to target</li>
  2230. <li><strong>I</strong>dentify barriers and motivators</li>
  2231. <li><strong>S</strong>implify the experience</li>
  2232. <li><strong>S</strong>elect appropriate triggers</li>
  2233. </ul>
  2234.  
  2235. <p>KISS also reminds us to <strong>K</strong>eep <strong>I</strong>t <strong>S</strong>imple &amp; <strong>S</strong>traightforward, by selecting a simple target behavior, simplifying the experience for the user, and by applying persuasive techniques that will lead to the target behavior without overwhelming the user.</p>
  2236.  
  2237. <h4 id="further-reading">Further Reading</h4>
  2238.  
  2239. <ul>
  2240. <li>“<a href="https://amzn.to/2KiLwam">Neuro Web Design: What Makes Them Click?</a>,” Susan Weinschenk</li>
  2241. <li>“<a href="https://amzn.to/2K5XM1Z">Design for the Mind: Seven Psychological Principles of Persuasive Design</a>,” Victor S. Yocco</li>
  2242. <li>“<a href="https://amzn.to/2tpXvwA">Influence: The Psychology of Persuasion</a>, by Robert B. Cialdini</li>
  2243. <li>“<a href="https://amzn.to/2txyRJK">Persuasive Technology: Using Computers to Change What We Think and Do</a>,” B.J. Fogg</li>
  2244. <li>“<a href="http://ui-patterns.com/patterns">Persuasive Design Patterns</a> (scroll down the page),” UI-Patterns</li>
  2245. <li>“<a href="https://shop.ui-patterns.com/product/persuasive-patterns-card-deck/">Persuasive Patterns Card Deck</a>,” UI-Patterns</li>
  2246. </ul>
  2247.  
  2248. <p><em>This article is part of the UX design series sponsored by Adobe. Adobe XD tool is made for a <a href="https://adobe.ly/2kAN84i">fast and fluid UX design process</a>, as it lets you go from idea to prototype faster. Design, prototype, and share — all in one app. You can check out more inspiring projects created with <a href="https://www.behance.net/galleries/adobe/5/XD">Adobe XD on Behance</a>, and also <a href="https://adobe.ly/2yKueO8">sign up for the Adobe experience design newsletter</a> to stay updated and informed on the latest trends and insights for UX/UI design.</em></p>
  2249.  
  2250.  
  2251.  
  2252.  
  2253. <div class="signature">
  2254.  <img src="https://www.smashingmagazine.com/images/logo/logo--red.png" alt="Smashing Editorial">
  2255.  <span>(yk, il)</span>
  2256. </div>
  2257.  
  2258.  
  2259.              </article>
  2260.            </body>
  2261.          </html>
  2262.        ]]></content:encoded>
  2263.      </item>
  2264.    
  2265.      <item>
  2266.        
  2267.          
  2268.          <author>Oliver Williams</author>
  2269.        
  2270.        <title>The Holy Grail Of Reusable Components: Custom Elements, Shadow DOM, And NPM</title>
  2271.        <link>https://www.smashingmagazine.com/2018/07/reusable-components-custom-elements-shadow-dom-npm/</link>
  2272.        <pubDate>Mon, 16 Jul 2018 13:30:58 +0200</pubDate>
  2273.        <guid>https://www.smashingmagazine.com/2018/07/reusable-components-custom-elements-shadow-dom-npm/</guid>
  2274.        <description>For even the simplest of components, the cost in human-labour may have been significant. UX teams do usability testing. An array of stakeholders have to sign off on the design.
  2275. Developers conduct AB tests, accessibility audits, unit tests and cross-browser checks. Once you’ve solved a problem, you don’t want to repeat that effort. By building a reusable component library (rather than building everything from scratch), we can continuously utilize past efforts and avoid revisiting already solved design and development challenges.</description>
  2276.        <content:encoded><![CDATA[
  2277.          <html>
  2278.            <head>
  2279.              <meta charset="utf-8">
  2280.              <link rel="canonical" href="https://www.smashingmagazine.com/2018/07/reusable-components-custom-elements-shadow-dom-npm/" />
  2281.              <title>The Holy Grail Of Reusable Components: Custom Elements, Shadow DOM, And NPM</title>
  2282.            </head>
  2283.            <body>
  2284.              <article>
  2285.                <header>
  2286.                  <h1>The Holy Grail Of Reusable Components: Custom Elements, Shadow DOM, And NPM</h1>
  2287.                  
  2288.                    
  2289.                    <address>Oliver Williams</address>
  2290.                  
  2291.                  <time datetime="2018-07-16T13:30:58&#43;02:00" class="op-published">2018-07-16T13:30:58+02:00</time>
  2292.                  <time datetime="2018-07-23T11:42:51&#43;00:00" class="op-modified">2018-07-23T11:42:51+00:00</time>
  2293.                </header>
  2294.                <p>For even the simplest of components, the cost in human-labour may have been significant. UX teams do usability testing. An array of stakeholders have to sign off on the design.</p>
  2295.  
  2296. <p>Developers conduct AB tests, accessibility audits, unit tests and cross-browser checks. Once you’ve solved a problem, <em>you don’t want to repeat that effort</em>. By building a reusable component library (rather than building everything from scratch), we can continuously utilize past efforts and avoid revisiting already solved design and development challenges.</p>
  2297.  
  2298.  
  2299.  
  2300.  
  2301.  
  2302.  
  2303.  
  2304.  
  2305.  
  2306.  
  2307.  
  2308. <figure >
  2309. <a href="https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/fd61c2a7-6c87-42c0-864c-624bc0e0403f/materialcomponents.png">
  2310. <img
  2311. srcset="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_400/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/fd61c2a7-6c87-42c0-864c-624bc0e0403f/materialcomponents.png 400w,
  2312.        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_800/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/fd61c2a7-6c87-42c0-864c-624bc0e0403f/materialcomponents.png 800w,
  2313.        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_1200/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/fd61c2a7-6c87-42c0-864c-624bc0e0403f/materialcomponents.png 1200w,
  2314.        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_1600/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/fd61c2a7-6c87-42c0-864c-624bc0e0403f/materialcomponents.png 1600w,
  2315.        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_2000/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/fd61c2a7-6c87-42c0-864c-624bc0e0403f/materialcomponents.png 2000w"
  2316. src="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_400/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/fd61c2a7-6c87-42c0-864c-624bc0e0403f/materialcomponents.png"
  2317. sizes="100vw"
  2318. alt="A screenshot of Google’s material components website – showing various components."
  2319. />
  2320. </a>
  2321.  
  2323. <figcaption class="op-vertical-bottom">
  2324. <a href='https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/fd61c2a7-6c87-42c0-864c-624bc0e0403f/materialcomponents.png'>Large preview</a>
  2325. </figcaption>
  2327. </figure>
  2328.  
  2329.  
  2330. <p>Building an arsenal of components is particularly useful for companies such as Google that own a considerable portfolio of websites all sharing a common brand. By codifying their UI into composable widgets, larger companies can both speed up development time and achieve consistency of both visual and user-interaction design across projects. There’s been a rise in interest in style guides and pattern libraries over the last several years. Given multiple developers and designers spread over multiple teams, large companies seek to attain consistency. We can do better than simple color swatches. <strong>What we need is easily distributable code</strong>.</p>
  2331.  
  2332. <h4>Sharing And Reusing Code</h4>
  2333.  
  2334. <p>Manually copy-and-pasting code is effortless. Keeping that code up-to-date, however, is a maintenance nightmare. Many developers, therefore, rely on a package manager to reuse code across projects. Despite its name, the Node Package Manager has become the unrivalled platform for <em>front-end</em> package management. There are currently over 700,000 packages in the NPM registry and <em>billions</em> of packages are downloaded every month. Any folder with a package.json file can be uploaded to NPM as a shareable package. While NPM is primarily associated with JavaScript, a package can include CSS and markup. NPM makes it easy to reuse and, importantly, <em>update</em> code. Rather than needing to amend code in myriad places, you change the code only in the package.</p>
  2335.  
  2336.  
  2337.  
  2338. <aside class="product-panel product-panel__tilted product-panel--book" data-audience="non-subscriber">
  2339.    <div class="container product-panel--book__container">
  2340.      <div class="panel__description panel__description--book">
  2341.    <p>Getting workflow <em>just</em> right ain’t an easy task. So are proper estimates. Or alignment among different departments. That’s why we’ve set up <strong>“this-is-how-I-work”-sessions</strong> — with smart cookies sharing what works well for them. A part of the <a href="http://smashed.by/workflowpanelmembership">Smashing Membership</a>, of course.</p>
  2342.      <a href="http://smashed.by/workflowpanelmembership" class="btn btn--green btn--large">
  2343.        Explore features&nbsp;→
  2344.      </a>
  2345.      </div>
  2346.      <div class="panel__image panel__image--book">
  2347.        <a href="http://smashed.by/workflowpanelmembership" class="books__book__image">
  2348.        <div class="books__book__img">
  2349.          <img src="https://www.smashingmagazine.com/images/smashing-cat/smashing-tv-box-cat.svg" alt="Smashing TV, with live sessions for professional designers and developers." width="310" height="400">
  2350.        </div>
  2351.      </a>
  2352.      </div>
  2353.    </div>
  2354.  </aside>
  2355.  
  2356.  
  2357.  
  2358.  
  2359. <h4>The Markup Problem</h4>
  2360.  
  2361. <p>Sass and Javascript are easily portable with the use of import statements. Templating languages give HTML the same ability &mdash; templates can import other fragments of HTML in the form of partials. You can write the markup for your footer, for example, just once, then include it in other templates. To say there exists a multiplicity of templating languages would be an understatement. Tying yourself to <em>just one</em> severely limits the potential reusability of your code. The alternative is to copy-and-paste markup and to use NPM only for styles and javascript.</p>
  2362.  
  2363. <p>This is the approach taken by the Financial Times with their <a href="http://origami.ft.com"><em>Origami</em></a> component library. In her talk “<a href="https://www.youtube.com/watch?v=LAVNOQroZYA">Can't You Just Make It More like Bootstrap?</a>” Alice Bartlett concluded “there is no good way to let people include templates in their projects”. Speaking about his experience of maintaining a component library at Lonely Planet, <a href="https://www.ianfeather.co.uk/a-maintainable-style-guide/">Ian Feather reiterated the problems with this approach:</a></p>
  2364.  
  2365. <blockquote>“Once they copy that code they are essentially cutting a version which needs to be maintained indefinitely. When they copied the markup for a working component it had an implicit link to a snapshot of the CSS at that point. If you then update the template or refactor the CSS, you need to update all versions of the template scattered around your site.”</blockquote>
  2366.  
  2367. <h4>A Solution: Web Components</h4>
  2368.  
  2369. <p>Web components solve this problem by defining markup in JavaScript. The author of a component is free to alter markup, CSS, and Javascript. The consumer of the component can benefit from these upgrades without needing to trawl through a project altering code by hand. Syncing with the latest changes project-wide can be achieved with a terse <code>npm update</code> via terminal. Only the name of the component and its API need to stay consistent.</p>
  2370.  
  2371. <p>Installing a web component is as simple as typing <code>npm install component-name</code> into a terminal. The Javascript can be included with an import statement:</p>
  2372.  
  2373. <pre><code class="language-css">&lt;script type="module"&gt;
  2374. import './node_modules/component-name/index.js';
  2375. &lt;/script&gt;
  2376. </code></pre>
  2377.  
  2378. <p>Then you can use the component anywhere in your markup. Here is a simple example component that copies text to the clipboard.</p>
  2379.  
  2380. <p data-height="500"
  2381.   data-theme-id="light"
  2382.   data-slug-hash="KemvbM"
  2383.   data-user="cssgrid"
  2384.   data-default-tab="result"
  2385.   class='codepen'>See the Pen <a href="https://codepen.io/cssgrid/pen/KemvbM/">Simple web component demo</a> by CSS GRID (<a href="https://codepen.io/cssgrid">@cssgrid</a>) on <a href="https://codepen.io">CodePen</a>.</p>
  2386.  
  2387.  
  2388. <p>A component-centric approach to front-end development has become ubiquitous, ushered in by Facebook’s React framework. Inevitably, given the pervasiveness of frameworks in modern front-end workflows, a number of companies have built component libraries using their framework of choice. Those components are reusable only within that particular framework.</p>
  2389.  
  2390.  
  2391.  
  2392.  
  2393.  
  2394.  
  2395.  
  2396.  
  2397.  
  2398.  
  2399.  
  2400. <figure >
  2401. <a href="https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/d5cdd3ce-b918-405b-b709-0b6a9a60f5eb/reactonly.png">
  2402. <img
  2403. srcset="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_400/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/d5cdd3ce-b918-405b-b709-0b6a9a60f5eb/reactonly.png 400w,
  2404.        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_800/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/d5cdd3ce-b918-405b-b709-0b6a9a60f5eb/reactonly.png 800w,
  2405.        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_1200/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/d5cdd3ce-b918-405b-b709-0b6a9a60f5eb/reactonly.png 1200w,
  2406.        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_1600/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/d5cdd3ce-b918-405b-b709-0b6a9a60f5eb/reactonly.png 1600w,
  2407.        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_2000/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/d5cdd3ce-b918-405b-b709-0b6a9a60f5eb/reactonly.png 2000w"
  2408. src="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_400/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/d5cdd3ce-b918-405b-b709-0b6a9a60f5eb/reactonly.png"
  2409. sizes="100vw"
  2410. alt="A component from IBM’s Carbon Design System"
  2411. />
  2412. </a>
  2413.  
  2415. <figcaption class="op-vertical-bottom">
  2416. A component from IBM’s Carbon Design System. For use in React applications only. Other significant examples of component libraries built in React include <a href='http://atlaskit.atlassian.com/packages'>Atlaskit</a> from Atlassian and <a href='https://polaris.shopify.com/components/get-started/'>Polaris</a> from Shopify. (<a href='https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/d5cdd3ce-b918-405b-b709-0b6a9a60f5eb/reactonly.png'>Large preview</a>)
  2417. </figcaption>
  2419. </figure>
  2420.  
  2421.  
  2422. <p>It’s rare for a sizeable company to have a uniform front-end and replatorming from one framework to another isn’t uncommon. Frameworks come and go. To enable the maximum amount of potential reuse across projects, we need components that are <em>framework agnostic</em>.</p>
  2423.  
  2424.  
  2425.  
  2426.  
  2427.  
  2428.  
  2429.  
  2430.  
  2431.  
  2432.  
  2433.  
  2434. <figure >
  2435. <a href="https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/3cb17761-cd4a-4de8-aa1c-518eef1a6281/fragmented.png">
  2436. <img
  2437. srcset="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_400/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/3cb17761-cd4a-4de8-aa1c-518eef1a6281/fragmented.png 400w,
  2438.        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_800/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/3cb17761-cd4a-4de8-aa1c-518eef1a6281/fragmented.png 800w,
  2439.        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_1200/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/3cb17761-cd4a-4de8-aa1c-518eef1a6281/fragmented.png 1200w,
  2440.        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_1600/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/3cb17761-cd4a-4de8-aa1c-518eef1a6281/fragmented.png 1600w,
  2441.        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_2000/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/3cb17761-cd4a-4de8-aa1c-518eef1a6281/fragmented.png 2000w"
  2442. src="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_400/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/3cb17761-cd4a-4de8-aa1c-518eef1a6281/fragmented.png"
  2443. sizes="100vw"
  2444. alt="A screenshot from npmjs.com showing components that do that same thing built exclusively for particular javascript frameworks."
  2445. />
  2446. </a>
  2447.  
  2449. <figcaption class="op-vertical-bottom">
  2450. Searching for components via <a href='https://www.npmjs.com'>npmjs.com</a> reveals a fragmented Javascript ecosystem. (<a href='https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/3cb17761-cd4a-4de8-aa1c-518eef1a6281/fragmented.png'>Large preview</a>)
  2451. </figcaption>
  2453. </figure>
  2454.  
  2455.  
  2456.  
  2457.  
  2458.  
  2459.  
  2460.  
  2461.  
  2462.  
  2463.  
  2464.  
  2465.  
  2466. <figure >
  2467. <a href="https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/f9d9a4a9-4ee2-4982-ac18-e3f3257bbe16/frameworkgraph.png">
  2468. <img
  2469. srcset="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_400/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/f9d9a4a9-4ee2-4982-ac18-e3f3257bbe16/frameworkgraph.png 400w,
  2470.        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_800/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/f9d9a4a9-4ee2-4982-ac18-e3f3257bbe16/frameworkgraph.png 800w,
  2471.        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_1200/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/f9d9a4a9-4ee2-4982-ac18-e3f3257bbe16/frameworkgraph.png 1200w,
  2472.        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_1600/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/f9d9a4a9-4ee2-4982-ac18-e3f3257bbe16/frameworkgraph.png 1600w,
  2473.        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_2000/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/f9d9a4a9-4ee2-4982-ac18-e3f3257bbe16/frameworkgraph.png 2000w"
  2474. src="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_400/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/f9d9a4a9-4ee2-4982-ac18-e3f3257bbe16/frameworkgraph.png"
  2475. sizes="100vw"
  2476. alt="A graph charting the popularity of frameworks over time. Ember, Knockout and Backbone have plunged in popularity, replaced by newer offerings."
  2477. />
  2478. </a>
  2479.  
  2481. <figcaption class="op-vertical-bottom">
  2482. The ever-changing popularity of frameworks over time. (<a href='https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/f9d9a4a9-4ee2-4982-ac18-e3f3257bbe16/frameworkgraph.png'>Large preview</a>)
  2483. </figcaption>
  2485. </figure>
  2486.  
  2487.  
  2488. <blockquote>“I have built web applications using: Dojo, Mootools, Prototype, jQuery, Backbone, Thorax, and React over the years...I would love to have been able to bring that killer Dojo component that I slaved over with me to my React app of today.”<br /><br />&mdash; <a href="https://medium.com/ben-and-dion/web-components-building-web-tools-for-future-dion-1d0e731c96d2">Dion Almaer</a>, Director of Engineering, Google</blockquote>
  2489.  
  2490. <p>When we talk about a web component, we are talking about the combination of a custom element with shadow DOM. Custom Elements and shadow DOM are part of both the W3C DOM specification and the WHATWG DOM Standard &mdash; <em>meaning web components are a web standard</em>. Custom elements and shadow DOM are <em>finally</em> set to achieve cross-browser support this year. By using a standard part of the native web platform, we ensure that our components can survive the fast-moving cycle of front-end restructuring and architectural rethinks. Web components can be used with any templating language and any front-end framework &mdash; they’re truly cross-compatible and interoperable. They can be used everywhere from a Wordpress blog to a single page application.</p>
  2491.  
  2492.  
  2493.  
  2494.  
  2495.  
  2496.  
  2497.  
  2498.  
  2499.  
  2500.  
  2501.  
  2502. <figure >
  2503. <a href="https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/8727121e-eefc-44b8-8ef4-1b64f3bbb432/frameworkcompat.png">
  2504. <img
  2505. srcset="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_400/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/8727121e-eefc-44b8-8ef4-1b64f3bbb432/frameworkcompat.png 400w,
  2506.        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_800/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/8727121e-eefc-44b8-8ef4-1b64f3bbb432/frameworkcompat.png 800w,
  2507.        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_1200/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/8727121e-eefc-44b8-8ef4-1b64f3bbb432/frameworkcompat.png 1200w,
  2508.        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_1600/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/8727121e-eefc-44b8-8ef4-1b64f3bbb432/frameworkcompat.png 1600w,
  2509.        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_2000/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/8727121e-eefc-44b8-8ef4-1b64f3bbb432/frameworkcompat.png 2000w"
  2510. src="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_400/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/8727121e-eefc-44b8-8ef4-1b64f3bbb432/frameworkcompat.png"
  2511. sizes="100vw"
  2512. alt="The Custom Elements Everywhere project by Rob Dodson documents the interoperability of web components with various client-side Javascript frameworks."
  2513. />
  2514. </a>
  2515.  
  2517. <figcaption class="op-vertical-bottom">
  2518. The <a href='https://custom-elements-everywhere.com/'>Custom Elements Everywhere</a> project by Rob Dodson documents the interoperability of web components with various client-side Javascript frameworks. React, the outlier here, will hopefully resolve these issues with React 17. (<a href='https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/8727121e-eefc-44b8-8ef4-1b64f3bbb432/frameworkcompat.png'>Large preview</a>)
  2519. </figcaption>
  2521. </figure>
  2522.  
  2523.  
  2524. <h3>Making A Web Component</h3>
  2525.  
  2526. <h4>Defining A Custom Element</h4>
  2527.  
  2528. <p>It's always been possible to make up tag-names and have their content appear on the page.</p>
  2529.  
  2530. <pre><code class="language-html">&lt;made-up-tag&gt;Hello World!&lt;/made-up-tag&gt;</code></pre>
  2531.  
  2532. <p>HTML is designed to be fault tolerant. The above will render, even though it’s not a valid HTML element. There’s never been a good reason to do this &mdash; deviating from standardized tags has traditionally been a bad practice. By defining a new tag using the custom element API, however, we can augment HTML with reusable elements that have built-in functionality. Creating a custom element is much like creating a component in React &mdash; but here were extending <code>HTMLElement</code>.</p>
  2533.  
  2534. <pre><code class="language-css">class ExpandableBox extends HTMLElement {
  2535.      constructor() {
  2536.        super()
  2537.      }
  2538.    }
  2539. </code></pre>
  2540.  
  2541. <p>A parameter-less call to <code>super()</code> must be the first statement in the constructor. The constructor should be used to set up initial state and default values and to set up any event listeners.  A new custom element needs to be defined with a name for its HTML tag and the elements corresponding class:</p>
  2542.  
  2543. <pre><code class="language-css">customElements.define('expandable-box', ExpandableBox)</code></pre>
  2544.  
  2545. <p>It’s a convention to capitalize class names. The syntax of the HTML tag is, however, more than a convention. What if browsers wanted to implement a new HTML element and they wanted to call it expandable-box? To prevent naming collisions, no new standardized HTML tags will include a dash. By contrast, the names of custom elements <em>have to</em> include a dash.</p>
  2546.  
  2547. <pre><code class="language-css">customElements.define('whatever', Whatever) // invalid
  2548. customElements.define('what-ever', Whatever) // valid
  2549. </code></pre>
  2550.  
  2551. <div class="sponsors__wide-place"></div>
  2552.  
  2553.  
  2554.  
  2555.  
  2556. <h4>Custom Element Lifecycle</h4>
  2557.  
  2558. <p>The API offers four custom element <em>reactions</em> &mdash; functions that can be defined within the class that will automatically be called in response to certain events in the lifecycle of a custom element.</p>
  2559.  
  2560. <p><strong>connectedCallback</strong> is run when the custom element is added to the DOM.</p>
  2561.  
  2562. <pre><code class="language-css">connectedCallback() {
  2563.    console.log("custom element is on the page!")
  2564. }
  2565. </code></pre>
  2566.  
  2567. <p>This includes adding an element with Javascript:</p>
  2568.  
  2569. <pre><code class="language-javascript">document.body.appendChild(document.createElement("expandable-box")) //“custom element is on the page”</code></pre>
  2570.  
  2571. <p>as well as simply including the element within the page with a HTML tag:</p>
  2572.  
  2573. <pre><code class="language-html">&lt;expandable-box&gt;&lt;/expandable-box&gt; // "custom element is on the page"</code></pre>
  2574.  
  2575. <p>Any work that involves fetching resources or rendering should be in here.</p>
  2576.  
  2577. <p><strong>disconnectedCallback</strong> is run when the custom element is removed from the DOM.</p>
  2578.  
  2579. <pre><code class="language-javascript">disconnectedCallback() {
  2580.    console.log("element has been removed")
  2581. }
  2582. document.querySelector("expandable-box").remove() //"element has been removed"
  2583. </code></pre>
  2584.  
  2585. <p><code>adoptedCallback</code> is run when the custom element is adopted into a new document. You probably don’t need to worry about this one too often.</p>
  2586.  
  2587. <p><code>attributeChangedCallback</code> is run when an attribute is added, changed, or removed. It can be used to listen for changes to both standardized native attributes like <em>disabled</em> or <em>src</em>, as well as any custom ones we make up. This is one of the most powerful aspects of custom elements as it enables the creation of a user-friendly API.</p>
  2588.  
  2589. <h4>Custom Element Attributes</h4>
  2590.  
  2591. <p>There are a great many HTML attributes. So that the browser doesn’t waste time calling our <code>attributeChangedCallback</code> when <em>any</em> attribute is changed, we need to provide a list of the attribute changes we want to listen for. For this example, we’re only interested in one.</p>
  2592.  
  2593. <pre><code class="language-javascript">static get observedAttributes() {
  2594.            return ['expanded']
  2595.        }
  2596. </code></pre>
  2597.  
  2598. <p>So now our <code>attributeChangedCallback</code> will only be called when we change the value of the expanded attribute on the custom element, as it’s the only attribute we’ve listed.</p>
  2599.  
  2600. <p>HTML attributes can have corresponding values (think <em>href, src, alt, value</em> etc) while others are either true or false (e.g. <em>disabled, selected, required</em>). For an attribute with a corresponding value, we would include the following within the custom element’s class definition.</p>
  2601.  
  2602. <pre><code class="language-javascript">get yourCustomAttributeName() {
  2603.  return this.getAttribute('yourCustomAttributeName');
  2604. }
  2605. set yourCustomAttributeName(newValue) {
  2606.  this.setAttribute('yourCustomAttributeName', newValue);
  2607. }
  2608. </code></pre>
  2609.  
  2610. <p>For our example element, the attribute will either be true or false, so defining the getter and setter is a little different.</p>
  2611.  
  2612. <pre><code class="language-javascript">get expanded() {
  2613.  return this.hasAttribute('expanded')
  2614. }
  2615.        
  2616. // the second argument for setAttribute is mandatory, so we’ll use an empty string
  2617. set expanded(val) {
  2618.  if (val) {
  2619.    this.setAttribute('expanded', '');
  2620.  }
  2621.  else {
  2622.    this.removeAttribute('expanded')
  2623.  }
  2624. }
  2625. </code></pre>
  2626.  
  2627. <p>Now that the boilerplate has been dealt with, we can make use of <code>attributeChangedCallback</code>.</p>
  2628.  
  2629. <pre><code class="language-javascript">attributeChangedCallback(name, oldval, newval) {
  2630.  console.log(`the ${name} attribute has changed from ${oldval} to ${newval}!!`);
  2631.  // do something every time the attribute changes
  2632. }
  2633. </code></pre>
  2634.  
  2635. <p>Traditionally, configuring a Javascript component would have involved passing arguments to an <code>init</code> function. By utilising the <code>attributeChangedCallback</code>, its possible to make a custom element that’s configurable just with markup.</p>
  2636.  
  2637. <p>Shadow DOM and custom elements can be used separately, and you may find custom elements useful all by themselves. Unlike shadow DOM, they <em>can</em> be polyfilled. However, the two specs work well in conjunction.</p>
  2638.  
  2639. <div class="sponsors__wide-place"></div>
  2640.  
  2641.  
  2642.  
  2643.  
  2644. <h4>Attaching Markup And Styles With Shadow DOM</h4>
  2645.  
  2646. <p>So far, we’ve handled the <em>behavior</em> of a custom element. In regard to markup and styles, however, our custom element is equivalent to an empty unstyled <code>&lt;span></code>. To encapsulate HTML and CSS as part of the component, we need to attach a shadow DOM. It’s best to do this within the constructor function.</p>
  2647.  
  2648. <pre class="break-out"><code class="language-javascript">class FancyComponent extends HTMLElement {
  2649.        constructor() {
  2650.            super()
  2651.            var shadowRoot = this.attachShadow({mode: 'open'})
  2652.            shadowRoot.innerHTML = `&lt;h2>hello world!&lt;/h2>`
  2653.            }
  2654. </code></pre>
  2655.  
  2656. <p>Don’t worry about understanding what the mode means &mdash; its boilerplate you have to include, but you’ll pretty much <em>always</em> want <code>open</code>. This simple example component will just render the text “hello world”. Like most other HTML elements, a custom element can have children &mdash; but not by default. So far the above custom element we’ve defined won’t render any children to the screen. To display any content between the tags, we need to make use of a <code>slot</code> element.</p>
  2657.  
  2658. <pre><code class="language-html">shadowRoot.innerHTML = `
  2659. &lt;h2&gt;hello world!&lt;/h2&gt;
  2660. &lt;slot&gt;&lt;/slot&gt;
  2661. `
  2662. </code></pre>
  2663.  
  2664. <p>We can use a style tag to apply some CSS to the component.</p>
  2665.  
  2666. <pre><code class="language-css">shadowRoot.innerHTML =
  2667. `&lt;style&gt;
  2668. p {
  2669. color: red;
  2670. }
  2671. &lt;/style&gt;
  2672. &lt;h2&gt;hello world!&lt;/h2&gt;
  2673. &lt;slot&gt;some default content&lt;/slot&gt;`
  2674. </code></pre>
  2675.  
  2676. <p>These styles will only apply to the component, so we are free to make use of element selectors without the styles affecting anything else of the page. This simplifies writing CSS, making naming conventions like BEM unnecessary.</p>
  2677.  
  2678. <h4>Publishing A Component On NPM</h4>
  2679.  
  2680. <p>NPM packages are published via the command line. Open a terminal window and move into a directory that you would like to turn into a reusable package. Then type the following commands into the terminal:</p>
  2681.  
  2682. <ol>
  2683. <li>If your project doesn’t already have a <a href="https://docs.npmjs.com/files/package.json">package.json</a>, <code>npm init</code> will walk you through generating one.</li>
  2684. <li><code>npm adduser</code> links your machine to your NPM account. If you don’t have a preexisting account, it will create a new one for you.</li>
  2685. <li><code>npm publish</code></li>
  2686. </ol>
  2687.  
  2688.  
  2689.  
  2690.  
  2691.  
  2692.  
  2693.  
  2694.  
  2695.  
  2696.  
  2697.  
  2698. <figure >
  2699. <a href="https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/b594f06b-c102-49bd-9463-3caf5d742be7/terminal.png">
  2700. <img
  2701. srcset="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_400/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/b594f06b-c102-49bd-9463-3caf5d742be7/terminal.png 400w,
  2702.        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_800/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/b594f06b-c102-49bd-9463-3caf5d742be7/terminal.png 800w,
  2703.        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_1200/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/b594f06b-c102-49bd-9463-3caf5d742be7/terminal.png 1200w,
  2704.        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_1600/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/b594f06b-c102-49bd-9463-3caf5d742be7/terminal.png 1600w,
  2705.        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_2000/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/b594f06b-c102-49bd-9463-3caf5d742be7/terminal.png 2000w"
  2706. src="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_400/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/b594f06b-c102-49bd-9463-3caf5d742be7/terminal.png"
  2707. sizes="100vw"
  2708. alt="NPM packages are published via the command line"
  2709. />
  2710. </a>
  2711.  
  2713. <figcaption class="op-vertical-bottom">
  2714. <a href='https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/b594f06b-c102-49bd-9463-3caf5d742be7/terminal.png'>Large preview</a>
  2715. </figcaption>
  2717. </figure>
  2718.  
  2719.  
  2720. <p>If all’s gone well, you now have a component in the NPM registry, ready to be installed and used in your own projects &mdash; and shared with the world.</p>
  2721.  
  2722.  
  2723.  
  2724.  
  2725.  
  2726.  
  2727.  
  2728.  
  2729.  
  2730.  
  2731.  
  2732. <figure >
  2733. <a href="https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/ff9b48c4-72c9-49ae-829e-28e3611f322a/npm.png">
  2734. <img
  2735. srcset="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_400/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/ff9b48c4-72c9-49ae-829e-28e3611f322a/npm.png 400w,
  2736.        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_800/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/ff9b48c4-72c9-49ae-829e-28e3611f322a/npm.png 800w,
  2737.        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_1200/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/ff9b48c4-72c9-49ae-829e-28e3611f322a/npm.png 1200w,
  2738.        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_1600/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/ff9b48c4-72c9-49ae-829e-28e3611f322a/npm.png 1600w,
  2739.        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_2000/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/ff9b48c4-72c9-49ae-829e-28e3611f322a/npm.png 2000w"
  2740. src="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_400/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/ff9b48c4-72c9-49ae-829e-28e3611f322a/npm.png"
  2741. sizes="100vw"
  2742. alt="An example of a component in the NPM registry, ready to be installed and used in your own projects."
  2743. />
  2744. </a>
  2745.  
  2747. <figcaption class="op-vertical-bottom">
  2748. <a href='https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/ff9b48c4-72c9-49ae-829e-28e3611f322a/npm.png'>Large preview</a>
  2749. </figcaption>
  2751. </figure>
  2752.  
  2753.  
  2754. <p>The web components API isn’t perfect. Custom elements are currently unable to <a href="https://github.com/w3c/webcomponents/issues/187">include data in form submissions</a>. The progressive enhancement story isn’t great. Dealing with <a href="https://github.com/WICG/aom/blob/gh-pages/explainer.md#use-case-1-setting-non-reflected-default-accessibility-properties-for-web-components">accessibility isn’t as easy as it should be</a>.</p>
  2755.  
  2756. <p>Although originally announced in 2011, browser support still isn’t universal. Firefox support is due later this year. Nevertheless, some high-profile websites (like Youtube) are already making use of them. Despite their current shortcomings, for <em>universally</em> shareable components they’re the singular option and in the future we can expect <a href="https://github.com/w3c/webcomponents/blob/gh-pages/proposals/Template-Instantiation.md">exciting additions</a> to what they have to offer.</p>
  2757.  
  2758. <div class="signature">
  2759.  <img src="https://www.smashingmagazine.com/images/logo/logo--red.png" alt="Smashing Editorial">
  2760.  <span>(il, ra, yk)</span>
  2761. </div>
  2762.  
  2763.  
  2764.              </article>
  2765.            </body>
  2766.          </html>
  2767.        ]]></content:encoded>
  2768.      </item>
  2769.    
  2770.      <item>
  2771.        
  2772.          
  2773.          <author>Anselm Hannemann</author>
  2774.        
  2775.        <title>Monthly Web Development Update 7/2018: Practical Accessibility, Design Mistakes, And Feature Control</title>
  2776.        <link>https://www.smashingmagazine.com/2018/07/monthly-web-development-update-7-2018/</link>
  2777.        <pubDate>Fri, 13 Jul 2018 14:20:17 +0200</pubDate>
  2778.        <guid>https://www.smashingmagazine.com/2018/07/monthly-web-development-update-7-2018/</guid>
  2779.        <description>The web continues to amaze me. With all its variety and different changes to the platform, it’s hard to see a straight pattern &amp;mdash; if there even is (just) one. But it’s wonderful to see what is being changed, which features are added to the platform, which ones get deprecated, and how browsers implement more and more technology to protect the user from malicious website attacks. It’s interesting to see that these security features nowadays are getting as much attention as a feature for developers; this shows the importance of privacy and security and how unstable and insecure the web was in the past.</description>
  2780.        <content:encoded><![CDATA[
  2781.          <html>
  2782.            <head>
  2783.              <meta charset="utf-8">
  2784.              <link rel="canonical" href="https://www.smashingmagazine.com/2018/07/monthly-web-development-update-7-2018/" />
  2785.              <title>Monthly Web Development Update 7/2018: Practical Accessibility, Design Mistakes, And Feature Control</title>
  2786.            </head>
  2787.            <body>
  2788.              <article>
  2789.                <header>
  2790.                  <h1>Monthly Web Development Update 7/2018: Practical Accessibility, Design Mistakes, And Feature Control</h1>
  2791.                  
  2792.                    
  2793.                    <address>Anselm Hannemann</address>
  2794.                  
  2795.                  <time datetime="2018-07-13T14:20:17&#43;02:00" class="op-published">2018-07-13T14:20:17+02:00</time>
  2796.                  <time datetime="2018-07-23T11:42:51&#43;00:00" class="op-modified">2018-07-23T11:42:51+00:00</time>
  2797.                </header>
  2798.                <p>The web continues to amaze me. With all its variety and different changes to the platform, it’s hard to see a straight pattern &mdash; if there even is (just) one. But it’s wonderful to see what is being changed, which features are added to the platform, which ones get deprecated, and how browsers implement more and more technology to protect the user from malicious website attacks. It’s interesting to see that these security features nowadays are getting as much attention as a feature for developers; this shows <strong>the importance of privacy and security</strong> and how unstable and insecure the web was in the past. </p>
  2799.  
  2800. <p>But the best thing about all of this is that it shows how important it is to stick to the things that people give us. Instead of implementing our own solutions for everything, it’s often much better to re-use an existing system. Not only is it safer to rely on, but also less work while more inclusive to extend a native DOM element with a custom element (instead of writing our own custom element from scratch). If we think about whether we should build our own version of SSL or use an existing software for this, why would we build a clickable element based on nothing instead of altering the behavior of an <code>a</code> or <code>button</code> element? And why would we check for resource host validation on our own, if the browser already gives us an API for that? This week’s articles are all dedicated to these topics.</p>
  2801.  
  2802. <p>Another thing that has been stuck in my head is Andrea Giammarchi’s article, “<a href="https://medium.com/@WebReflection/a-bloatless-web-d4f811c7991b">A Bloatless Web</a>,” in which he describes how we blindly use Babel as developers when we write JavaScript to be able to write modern ECMAScript. But we usually don’t realize that transpiling all of our modern code in modern browsers isn’t the most efficient way. I’m glad that Andrea offers some ideas on how we can improve that situation and improve our web apps’ performance. Wouldn’t it be amazing to just serve a third of the bundle size by not transpiling the code anymore for each and every browser?</p>
  2803.  
  2804. <h3>News</h3>
  2805.  
  2806. <ul>
  2807. <li>Site Isolation effectively makes it harder for untrusted websites to access or steal information from your accounts on other websites. <a href="https://developers.google.com/web/updates/2018/07/site-isolation">Chrome 67 is now shipping with it</a> and Cross-Origin Read Blocking (CORB) will no longer load, e.g. a JSON file as image. But even further, these changes mean that full-page layout is no longer guaranteed to be synchronous. This new feature affects you if you read out calculated sizes from an element in JavaScript or use <code>unload</code> event listeners.  Ensure that you know about this and check if your sites still work as expected.</li>
  2808. <li>By now, we know a bit about Content Security Policies — a feature that lets developers limit the load of certain resources by hostnames. But browser vendors have come up with something new now: Feature Policy. This allows web developers to selectively enable, disable, or modify the behavior of certain APIs and web features in the browser. It’s like CSP but instead of controlling security, it controls features and <a href="https://developers.google.com/web/updates/2018/06/feature-policy">Eric Bidelman wrote an introduction to Feature Policy</a> explaining everything.</li>
  2809. <li>The Brave browser team shows their latest feature to protect their users’ privacy: <a href="https://brave.com/tor-tabs-beta/">Tabs that connect via the Tor network</a>.</li>
  2810. </ul>
  2811.  
  2812.  
  2813.  
  2814. <aside class="product-panel product-panel__tilted product-panel--book" data-audience="non-subscriber">
  2815.    <div class="container product-panel--book__container">
  2816.      <div class="panel__description panel__description--book">
  2817.    <p>With so much happening on the web, what should we really pay attention to? At <a href="https://smashingconf.com/ny-2018/">SmashingConf New York 2018</a> 🇺🇸 we’ll explore everything from PWAs, font loading best practices, web performance and eCommerce UX optimization, to refactoring CSS, design workflows and convincing your clients. With Sarah Drasner, Dan Mall, Sara Soueidan, Jason Grigsby, and <a href="http://smashed.by/confpanelspeakers">many other speakers</a>. Oct <span class="small-caps">23–24</span>.</p>
  2818.      <a href="http://smashed.by/confpanelspeakers" class="btn btn--green btn--large">
  2819.        Check the speakers&nbsp;→
  2820.      </a>
  2821.      </div>
  2822.      <div class="panel__image panel__image--book">
  2823.        <a href="http://smashed.by/confpanelspeakers" class="books__book__image">
  2824.        <div class="books__book__img">
  2825.          <img src="https://res.cloudinary.com/indysigner/image/upload/v1529498640/sarah-drasner-opt_kaxhos.png" alt="SmashingConf New York 2018, with Dan Mall, Sara Soueidan, Sarah Drasner and many others." width="310" height="400">
  2826.        </div>
  2827.      </a>
  2828.      </div>
  2829.    </div>
  2830.  </aside>
  2831.  
  2832.  
  2833.  
  2834.  
  2835. <h3>Generic</h3>
  2836.  
  2837. <ul>
  2838. <li>Anton Sten asks if <a href="https://www.antonsten.com/values/">Tech Sector Values are Broken?</a> Analyzing the marketing strategies by Apple, Microsoft, Google, Amazon but also small other companies and how we can do really purposeful work and stick to our values instead of treating them as marketing-material that we don’t need to respect or stick to.</li>
  2839. <li>Now that the technology sector of the world is rapidly transforming all of the world’s things into digital things, many have called for more ethics in our field. That is in many instances quite a vague goal, so let’s apply it to one part of digital: front-end development. <a href="https://hiddedevries.nl/en/blog/2018-07-05-what-kind-of-ethics-do-front-end-developers-need">How can we be more ethical as front-end developers, what kinds of things can we do</a>? Hidde de Vries wrote an article about that.</li>
  2840. </ul>
  2841.  
  2842. <h3>Security</h3>
  2843.  
  2844. <ul>
  2845. <li>Ticketmaster’s customer data has been compromised and as it seems, <a href="https://www.itwire.com/security/83416-uk-researcher-says-one-line-of-code-caused-ticketmaster-breach.html">it’s due to a customized single line of code that includes a third-party script</a>.</li>
  2846. </ul>
  2847.  
  2848. <h3>UI/UX</h3>
  2849.  
  2850. <ul>
  2851. <li>Eugen Eşanu shows <a href="https://uxplanet.org/10-small-design-mistakes-we-still-make-1cd5f60bc708">ten small design mistakes we still make</a> and what we can do instead to make our design more user-friendly.</li>
  2852. </ul>
  2853.  
  2854.  
  2855.  
  2856.  
  2857.  
  2858.  
  2859.  
  2860.  
  2861.  
  2862.  
  2863.  
  2864. <figure >
  2865. <a href="https://uxplanet.org/10-small-design-mistakes-we-still-make-1cd5f60bc708">
  2866. <img
  2867. srcset="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_400/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/b9c093b8-ed81-46f8-8dfc-758c3a591bb1/what-we-design.png 400w,
  2868.        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_800/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/b9c093b8-ed81-46f8-8dfc-758c3a591bb1/what-we-design.png 800w,
  2869.        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_1200/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/b9c093b8-ed81-46f8-8dfc-758c3a591bb1/what-we-design.png 1200w,
  2870.        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_1600/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/b9c093b8-ed81-46f8-8dfc-758c3a591bb1/what-we-design.png 1600w,
  2871.        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_2000/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/b9c093b8-ed81-46f8-8dfc-758c3a591bb1/what-we-design.png 2000w"
  2872. src="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_400/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/b9c093b8-ed81-46f8-8dfc-758c3a591bb1/what-we-design.png"
  2873. sizes="100vw"
  2874. alt="what we design vs. what a user needs"
  2875. />
  2876. </a>
  2877.  
  2879. <figcaption class="op-vertical-bottom">
  2880. Users do not have time to read more than necessary, and yet designers still tend to put a lot of text because they think people need to know that. (<a href='https://uxplanet.org/10-small-design-mistakes-we-still-make-1cd5f60bc708'>Image source</a>)
  2881. </figcaption>
  2883. </figure>
  2884.  
  2885.  
  2886. <h3>Privacy</h3>
  2887.  
  2888. <ul>
  2889. <li>This is an interesting report about <a href="https://www.businessinsider.de/google-allows-app-developers-to-read-peoples-gmails-report-2018-7">how Google allows outside app developers to read people’s Google emails</a> when they grant permission during app authorization. The issue with that is that there is no way to easily prevent that and it might have quite some impact if you use Gmail for your company as it might affect privacy policies and is under subject of GDPR.</li>
  2890. </ul>
  2891.  
  2892. <h3>Web Performance</h3>
  2893.  
  2894. <ul>
  2895. <li>Max Böck on how we can build <a href="https://mxb.at/blog/connection-aware-components/">components that react to the actual device connection speed</a> using the Network Information API. And despite it’s currently only available in Chrome and Samsung Internet browsers, it’s worth trying it out and maybe already serve it to these users.</li>
  2896. <li>From time to time, we can still read articles mentioning the importance of optimizing CSS selectors in order to improve performance. This originates in research done several years ago but Ivan Čurić researched this again <a href="https://www.sitepoint.com/optimizing-css-id-selectors-and-other-myths/">and found out it doesn’t matter</a>.</li>
  2897. </ul>
  2898.  
  2899. <h3>Accessibility</h3>
  2900.  
  2901. <ul>
  2902. <li>Microsoft’s developer team shares a <a href="https://www.youtube.com/playlist?list=PLtSVUgxIo6KqBBGqNdPQG64f-hTs1YxFM">video playlist about practical accessibility</a>, including how to optimize presentations or language for inclusion or how to build a proper “skip navigation” functionality on your website.</li>
  2903. <li>Sara Novak shares how she managed to show empathy by <a href="https://blog.prototypr.io/going-colorblind-an-experiment-in-empathy-and-accessibility-98b7003737ca">experimenting with going colorblind</a> to understand how other people experience the world differently.</li>
  2904. <li>The Developer Tools of Firefox now have an <em>Accessibility Inspector</em> mode. <a href="https://developer.mozilla.org/en-US/docs/Tools/Accessibility_inspector#Accessing_the_accessibility_inspector">Here’s how to activate it and how to use it</a>.</li>
  2905. </ul>
  2906.  
  2907.  
  2908.  
  2909.  
  2910.  
  2911.  
  2912.  
  2913.  
  2914.  
  2915.  
  2916.  
  2917. <figure >
  2918. <a href="https://blog.prototypr.io/going-colorblind-an-experiment-in-empathy-and-accessibility-98b7003737ca">
  2919. <img
  2920. srcset="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_400/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/c524a3a0-3a7a-49ef-81b5-5219a7b37b9e/form-with-color-based-indicators.jpg 400w,
  2921.        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_800/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/c524a3a0-3a7a-49ef-81b5-5219a7b37b9e/form-with-color-based-indicators.jpg 800w,
  2922.        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_1200/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/c524a3a0-3a7a-49ef-81b5-5219a7b37b9e/form-with-color-based-indicators.jpg 1200w,
  2923.        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_1600/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/c524a3a0-3a7a-49ef-81b5-5219a7b37b9e/form-with-color-based-indicators.jpg 1600w,
  2924.        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_2000/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/c524a3a0-3a7a-49ef-81b5-5219a7b37b9e/form-with-color-based-indicators.jpg 2000w"
  2925. src="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_400/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/c524a3a0-3a7a-49ef-81b5-5219a7b37b9e/form-with-color-based-indicators.jpg"
  2926. sizes="100vw"
  2927. alt="A form with color-based indicators"
  2928. />
  2929. </a>
  2930.  
  2932. <figcaption class="op-vertical-bottom">
  2933. In her article, Sara Novak explains why it's important not to rely on color alone as an indicator. Symbols and error message can be much more helpful to users. (The image above shows a form with color-based indicators. Left: How a person with normal vision sees a form with color-based indicators. Right: How a deuteranomalous person sees the same form.) (<a href='https://blog.prototypr.io/going-colorblind-an-experiment-in-empathy-and-accessibility-98b7003737ca'>Image source</a>)
  2934. </figcaption>
  2936. </figure>
  2937.  
  2938.  
  2939. <h3>JavaScript</h3>
  2940.  
  2941. <ul>
  2942. <li>Leon Revill show us how we can <a href="https://blog.revillweb.com/extending-native-dom-elements-with-web-components-233350c8e86a">extend existing native DOM elements with Web Components</a>. This is extremely helpful and useful as we can not only save a lot of time by using prebuilt templates for custom elements but also get all the optimizations and defaults (semantics, accessibility, browser functionality) for free and still can build our own behavior on top of it. At the very least, <a href="https://caniuse.com/#feat=custom-elementsv1">if we could use Custom Elements at all</a>, but that’s a different story.</li>
  2943. <li>Gerardo Rodriguez shows how we can easily fail to optimize websites for performance with Service Workers and the Fetch API and how this can result in a quota exception in browsers. Luckily, he found out the reason of this and by setting the proper CORS headers, Gerardo finally <a href="https://cloudfour.com/thinks/when-7-kb-equals-7-mb/">solved the mystery of single-cached opaque responses</a> and tells us how to avoid the issues.</li>
  2944. <li>Filepond is a nice open-source JavaScript file uploader. Rik Schennink <a href="https://itnext.io/filepond-frontend-trickery-a3073c934c77">shares the challenges faced building it</a>.</li>
  2945. <li>Andrea Giammarchi about <a href="https://medium.com/@WebReflection/a-bloatless-web-d4f811c7991b">the problem of bundling JavaScript with Babel and why transpiling code isn’t the best solution anymore</a>. Instead, we should think about how to serve different bundles depending on the browser support to decrease the bundle size and improve performance.</li>
  2946. <li>Justin Fuller shares <a href="https://medium.freecodecamp.org/here-are-three-upcoming-changes-to-javascript-that-youll-love-387bce1bfb0b">three great new features coming to JavaScript soon</a> that will help us write code that is easier to understand, such as operational chaining, nullish coalescing, or the pipeline operator.</li>
  2947. <li>Addy Osmani and Mathias Bynens wrote a primer introduction on <a href="https://developers.google.com/web/fundamentals/primers/modules">how we can use JavaScript modules on the web today</a>.</li>
  2948. </ul>
  2949.  
  2950. <div class="sponsors__wide-place"></div>
  2951.  
  2952.  
  2953.  
  2954.  
  2955. <h3>CSS</h3>
  2956.  
  2957. <ul>
  2958. <li>An article series that covers how we can <a href="https://css-tricks.com/css-grid-in-ie-faking-an-auto-placement-grid-with-gaps/">fake an auto-placement grid with gaps in Internet Explorer</a>.</li>
  2959. <li>CSS Grid is nice, but I often hear that people can’t use it because IE11 doesn’t support it well. But that’s not exactly true as IE11 has a prior version of CSS Grid available that we can easily transpile with autoprefixer. Daniel Tonon explains the <a href="https://css-tricks.com/css-grid-in-ie-debunking-common-ie-grid-misconceptions/">CSS Grid differences and which features we can and cannot use</a> and <a href="https://css-tricks.com/css-grid-in-ie-css-grid-and-the-new-autoprefixer/">will continue with even more tips</a>.</li>
  2960. <li>For many people, CSS Grid is still very new, and it’s very capable and helps us solve a lot of problems when creating grid-based layouts in CSS. But in the current version, there are a couple of things that are still not possible. <a href="https://www.smashingmagazine.com/2018/07/css-grid-2/">CSS Grid level 2 will bring us sub-grids</a> and Rachel Andrew explains what you need that for.</li>
  2961. <li>Is CSS-in-JS good? Is it just bad? Why we constantly fall into the trap of arguing when there are no clear winners and <a href="https://foobartel.com/articles/css-in-js-kindness-and-evolution">how we can do better</a> by acknowledging evolution and seeing things in context.</li>
  2962. </ul>
  2963.  
  2964. <h3>Work & Life</h3>
  2965.  
  2966. <ul>
  2967. <li>Why <a href="https://helloanselm.com/writings/build-to-last">the concept of patience and the strive to build something to last should gain more attention in business</a>. Some thoughts that came into my mind when reading another article and it seems many people like the idea behind this.</li>
  2968. <li><a href="https://ethanmarcotte.com/wrote/just-work/">Ethan Marcotte on how he approaches to choose clients</a> and why he thinks it’s important to only choose clients that you can ethically support. But this also shows how difficult this can be sometimes, as recent discussions about Microsoft’s business cooperations with legal entities show.</li>
  2969. </ul>
  2970.  
  2971. <div class="signature">
  2972.  <img src="https://www.smashingmagazine.com/images/logo/logo--red.png" alt="Smashing Editorial">
  2973.  <span>(il)</span>
  2974. </div>
  2975.  
  2976.  
  2977.              </article>
  2978.            </body>
  2979.          </html>
  2980.        ]]></content:encoded>
  2981.      </item>
  2982.    
  2983.      <item>
  2984.        
  2985.          
  2986.          <author>Isabel Aracama</author>
  2987.        
  2988.        <title>How To Create A Flat Vector Illustration In Affinity Designer</title>
  2989.        <link>https://www.smashingmagazine.com/2018/07/flat-vector-illustration-affinity-designer/</link>
  2990.        <pubDate>Wed, 11 Jul 2018 20:00:02 +0200</pubDate>
  2991.        <guid>https://www.smashingmagazine.com/2018/07/flat-vector-illustration-affinity-designer/</guid>
  2992.        <description>(This is a sponsored post.) If you are in the design world, chances are that you’ve already heard about Affinity Designer, a vector graphics editor for Apple’s macOS and Microsoft Windows.
  2993. It was July 2015 when Serif Europe launched the amazing software that many designers and illustrators like me are using now as their main tool for professional work. Unlike some other packages, its price is really affordable, there’s no subscription model and, as mentioned already, it’s available for both Macs and PCs.</description>
  2994.        <content:encoded><![CDATA[
  2995.          <html>
  2996.            <head>
  2997.              <meta charset="utf-8">
  2998.              <link rel="canonical" href="https://www.smashingmagazine.com/2018/07/flat-vector-illustration-affinity-designer/" />
  2999.              <title>How To Create A Flat Vector Illustration In Affinity Designer</title>
  3000.            </head>
  3001.            <body>
  3002.              <article>
  3003.                <header>
  3004.                  <h1>How To Create A Flat Vector Illustration In Affinity Designer</h1>
  3005.                  
  3006.                    
  3007.                    <address>Isabel Aracama</address>
  3008.                  
  3009.                  <time datetime="2018-07-11T20:00:02&#43;02:00" class="op-published">2018-07-11T20:00:02+02:00</time>
  3010.                  <time datetime="2018-07-23T11:42:51&#43;00:00" class="op-modified">2018-07-23T11:42:51+00:00</time>
  3011.                </header>
  3012.                <p>(<em>This is a sponsored post</em>.) If you are in the design world, chances are that you’ve already heard about <a href="https://affinity.serif.com/en-gb/designer/">Affinity Designer</a>, a vector graphics editor for Apple’s macOS and Microsoft Windows.</p>
  3013.  
  3014. <p>It was July 2015 when Serif Europe launched the amazing software that many designers and illustrators like me are using now as their main tool for professional work. Unlike some other packages, its price is really affordable, there’s no subscription model and, as mentioned already, it’s available for both Macs and PCs.</p>
  3015.  
  3016. <p>In this article, I would like to walk you through just some of its <strong>very user-friendly main tools and features</strong> as an introduction to the software and to show you how we can create a nice flat vector illustration of a Volkswagen Beetle. The illustration will scale up to whatever resolution and size needed because no bitmaps will be used.</p>
  3017.  
  3018. <p><strong>Note</strong>: <em>As of today, July 11, <a href="https://affinity.serif.com/designer/ipad">Affinity Designer is also available for the iPad</a>. Although the iPad app’s features and functionality almost completely match the desktop version of Affinity Designer, it relies much more on using the touch screen (and the Apple Pencil) and because of that, you may expect to find some differences in the workflows.</em></p>
  3019.  
  3020.  
  3021.  
  3022.  
  3023.  
  3024.  
  3025.  
  3026.  
  3027.  
  3028.  
  3029.  
  3030. <figure >
  3031. <a href="https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/5ee149b8-782c-49f4-9f36-3a8d1a5ba33f/finished-beetle.png">
  3032. <img
  3033. srcset="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_400/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/5ee149b8-782c-49f4-9f36-3a8d1a5ba33f/finished-beetle.png 400w,
  3034.        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_800/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/5ee149b8-782c-49f4-9f36-3a8d1a5ba33f/finished-beetle.png 800w,
  3035.        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_1200/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/5ee149b8-782c-49f4-9f36-3a8d1a5ba33f/finished-beetle.png 1200w,
  3036.        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_1600/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/5ee149b8-782c-49f4-9f36-3a8d1a5ba33f/finished-beetle.png 1600w,
  3037.        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_2000/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/5ee149b8-782c-49f4-9f36-3a8d1a5ba33f/finished-beetle.png 2000w"
  3038. src="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_400/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/5ee149b8-782c-49f4-9f36-3a8d1a5ba33f/finished-beetle.png"
  3039. sizes="100vw"
  3040. alt="Final image that we’ll be creating in this tutorial."
  3041. />
  3042. </a>
  3043.  
  3045. <figcaption class="op-vertical-bottom">
  3046. Final image that we’ll be creating in this tutorial. (<a href='https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/5ee149b8-782c-49f4-9f36-3a8d1a5ba33f/finished-beetle.png'>View large version</a>)
  3047. </figcaption>
  3049. </figure>
  3050.  
  3051.  
  3052. <p>I will also explain some of the <strong>decisions</strong> I take and <strong>methods</strong> I follow as I work. You know the old saying, “All roads lead to Rome”? In this case, many roads will take us where we’d like to get to, but some are better than others.</p>
  3053.  
  3054. <p>We will see how to work with the Pen tool to trace the main car outline, how to break curves and segments, how to convert objects into curves, and how to use the wonderful Corner tool. We will also, among other things, learn how to use the Gradient tool, what is a “Smart copy”, how to import a color palette from an image that we can use as a reference for our artwork, how to use masks, and how to create a halftone pattern. Of course, along the way, you will also learn some helpful keyboard shortcuts and commands.</p>
  3055.  
  3056. <p><strong>Note:</strong> <em>Affinity Designer has three work environments, referred to as “personas”. By default, Affinity Designer is set to the draw persona. To switch from the draw persona to the pixel persona or to the export persona, you have to click on one of the three icons located in the top-left corner of the main window. You can start working in the draw persona and switch to the pixel persona at any time, when you need to combine vectors and bitmaps.</em></p>
  3057.  
  3058. <figure><a href="https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/ee665268-a281-4165-8aff-421cb80ed105/3-personas.png"><img src="https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/ee665268-a281-4165-8aff-421cb80ed105/3-personas.png" width="466" height="222" alt="The three work environments: draw persona (leftmost icon), bitmap persona (middle icon) and export persona (rightmost icon)." /></a><figcaption>The three work environments: draw persona (leftmost icon), bitmap persona (middle icon) and export persona (rightmost icon). (<a href="https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/ee665268-a281-4165-8aff-421cb80ed105/3-personas.png">View large version</a>)</figcaption></figure>
  3059.  
  3060. <h3>Introduction: The Flat Design Era</h3>
  3061.  
  3062. <p>In recent years, we’ve seen the rise of <a href="https://en.wikipedia.org/wiki/Flat_design">"flat design"</a>, in contrast to what is known as skeuomorphic representation in design.</p>
  3063.  
  3064. <p>To put it simply, flat design gets rid of the metaphors that skeuomorphic design uses to communicate with users, and we’ve seen these metaphors in design, especially in user interface design, for years. Apple had some of the best examples of skeuomorphism in its early iOS and app designs, and today it is widely used in many industries, such as music software and video games. With Microsoft’s (with <a href="https://en.wikipedia.org/wiki/Metro_(design_language)">Metro</a>) and later Google’s <a href="https://material.io/guidelines/">material design</a> and Apple’s iOS 7, mobile apps, user interfaces and most systems and OS’ have moved away from skeuomorphism, using it or elements of it as mere enhancements to a new design language (including gradients and shadows). As you can imagine, illustrations on these systems were also affected by the new design currents, and illustrators and designers started creating artwork that would be consistent with the new times and needs. A whole new world of flat icons, flat infographics and flat illustrations opened in front of our eyes.</p>
  3065.  
  3066.  
  3067.  
  3068.  
  3069.  
  3070.  
  3071.  
  3072.  
  3073.  
  3074.  
  3075.  
  3076. <figure >
  3077. <a href="https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/5db1b06b-fef6-4587-9fc7-4969801f3c58/iphone-home-screen.png">
  3078. <img
  3079. srcset="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_400/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/5db1b06b-fef6-4587-9fc7-4969801f3c58/iphone-home-screen.png 400w,
  3080.        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_800/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/5db1b06b-fef6-4587-9fc7-4969801f3c58/iphone-home-screen.png 800w,
  3081.        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_1200/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/5db1b06b-fef6-4587-9fc7-4969801f3c58/iphone-home-screen.png 1200w,
  3082.        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_1600/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/5db1b06b-fef6-4587-9fc7-4969801f3c58/iphone-home-screen.png 1600w,
  3083.        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_2000/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/5db1b06b-fef6-4587-9fc7-4969801f3c58/iphone-home-screen.png 2000w"
  3084. src="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_400/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/5db1b06b-fef6-4587-9fc7-4969801f3c58/iphone-home-screen.png"
  3085. sizes="100vw"
  3086. alt="iPhone’s home screen (iOS 6 versus iOS 7)."
  3087. />
  3088. </a>
  3089.  
  3091. <figcaption class="op-vertical-bottom">
  3092. iPhone’s home screen (iOS 6 versus iOS 7). (<a href='https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/5db1b06b-fef6-4587-9fc7-4969801f3c58/iphone-home-screen.png'>View large version</a>)
  3093. </figcaption>
  3095. </figure>
  3096.  
  3097.  
  3098.  
  3099.  
  3100.  
  3101.  
  3102.  
  3103.  
  3104.  
  3105.  
  3106.  
  3107.  
  3108. <figure >
  3109. <a href="https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/de0b8fed-374c-4cd9-a437-4b2afb182557/01-how-to-create-a-flat-vector-illustration-in-affinity-designe.png">
  3110. <img
  3111. srcset="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_400/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/de0b8fed-374c-4cd9-a437-4b2afb182557/01-how-to-create-a-flat-vector-illustration-in-affinity-designe.png 400w,
  3112.        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_800/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/de0b8fed-374c-4cd9-a437-4b2afb182557/01-how-to-create-a-flat-vector-illustration-in-affinity-designe.png 800w,
  3113.        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_1200/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/de0b8fed-374c-4cd9-a437-4b2afb182557/01-how-to-create-a-flat-vector-illustration-in-affinity-designe.png 1200w,
  3114.        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_1600/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/de0b8fed-374c-4cd9-a437-4b2afb182557/01-how-to-create-a-flat-vector-illustration-in-affinity-designe.png 1600w,
  3115.        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_2000/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/de0b8fed-374c-4cd9-a437-4b2afb182557/01-how-to-create-a-flat-vector-illustration-in-affinity-designe.png 2000w"
  3116. src="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_400/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/de0b8fed-374c-4cd9-a437-4b2afb182557/01-how-to-create-a-flat-vector-illustration-in-affinity-designe.png"
  3117. sizes="100vw"
  3118. alt=""
  3119. />
  3120. </a>
  3121.  
  3123. <figcaption class="op-vertical-bottom">
  3124. (<a href='https://dribbble.com/shots/3296825-Holocards/attachments/711099'>Image source</a>) (<a href='https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/de0b8fed-374c-4cd9-a437-4b2afb182557/01-how-to-create-a-flat-vector-illustration-in-affinity-designe.png'>View large version</a>)
  3125. </figcaption>
  3127. </figure>
  3128.  
  3129.  
  3130.  
  3131.  
  3132.  
  3133.  
  3134.  
  3135.  
  3136.  
  3137.  
  3138.  
  3139.  
  3140. <figure >
  3141. <a href="https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/c51eee35-db64-4981-9dc4-f87ecdb3ccff/02-how-to-create-a-flat-vector-illustration-in-affinity-designe.png">
  3142. <img
  3143. srcset="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_400/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/c51eee35-db64-4981-9dc4-f87ecdb3ccff/02-how-to-create-a-flat-vector-illustration-in-affinity-designe.png 400w,
  3144.        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_800/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/c51eee35-db64-4981-9dc4-f87ecdb3ccff/02-how-to-create-a-flat-vector-illustration-in-affinity-designe.png 800w,
  3145.        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_1200/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/c51eee35-db64-4981-9dc4-f87ecdb3ccff/02-how-to-create-a-flat-vector-illustration-in-affinity-designe.png 1200w,
  3146.        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_1600/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/c51eee35-db64-4981-9dc4-f87ecdb3ccff/02-how-to-create-a-flat-vector-illustration-in-affinity-designe.png 1600w,
  3147.        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_2000/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/c51eee35-db64-4981-9dc4-f87ecdb3ccff/02-how-to-create-a-flat-vector-illustration-in-affinity-designe.png 2000w"
  3148. src="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_400/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/c51eee35-db64-4981-9dc4-f87ecdb3ccff/02-how-to-create-a-flat-vector-illustration-in-affinity-designe.png"
  3149. sizes="100vw"
  3150. alt=""
  3151. />
  3152. </a>
  3153.  
  3155. <figcaption class="op-vertical-bottom">
  3156. (<a href='https://dribbble.com/shots/2350717-The-second-part'>Image source</a>) (<a href='https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/c51eee35-db64-4981-9dc4-f87ecdb3ccff/02-how-to-create-a-flat-vector-illustration-in-affinity-designe.png'>View large version</a>)
  3157. </figcaption>
  3159. </figure>
  3160.  
  3161.  
  3162.  
  3163.  
  3164.  
  3165.  
  3166.  
  3167.  
  3168.  
  3169.  
  3170.  
  3171.  
  3172. <figure >
  3173. <a href="https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/6f8d4735-0573-48bf-8785-fd5c18d2446d/03-how-to-create-a-flat-vector-illustration-in-affinity-designe.png">
  3174. <img
  3175. srcset="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_400/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/6f8d4735-0573-48bf-8785-fd5c18d2446d/03-how-to-create-a-flat-vector-illustration-in-affinity-designe.png 400w,
  3176.        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_800/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/6f8d4735-0573-48bf-8785-fd5c18d2446d/03-how-to-create-a-flat-vector-illustration-in-affinity-designe.png 800w,
  3177.        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_1200/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/6f8d4735-0573-48bf-8785-fd5c18d2446d/03-how-to-create-a-flat-vector-illustration-in-affinity-designe.png 1200w,
  3178.        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_1600/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/6f8d4735-0573-48bf-8785-fd5c18d2446d/03-how-to-create-a-flat-vector-illustration-in-affinity-designe.png 1600w,
  3179.        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_2000/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/6f8d4735-0573-48bf-8785-fd5c18d2446d/03-how-to-create-a-flat-vector-illustration-in-affinity-designe.png 2000w"
  3180. src="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_400/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/6f8d4735-0573-48bf-8785-fd5c18d2446d/03-how-to-create-a-flat-vector-illustration-in-affinity-designe.png"
  3181. sizes="100vw"
  3182. alt=""
  3183. />
  3184. </a>
  3185.  
  3187. <figcaption class="op-vertical-bottom">
  3188. (<a href='https://dribbble.com/shots/1036448-Flat-Design-Icons-Set-Vol1'>Image source</a>) (<a href='https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/6f8d4735-0573-48bf-8785-fd5c18d2446d/03-how-to-create-a-flat-vector-illustration-in-affinity-designe.png'>View large version</a>)
  3189. </figcaption>
  3191. </figure>
  3192.  
  3193.  
  3194.  
  3195.  
  3196.  
  3197.  
  3198.  
  3199.  
  3200.  
  3201.  
  3202.  
  3203.  
  3204. <figure >
  3205. <a href="https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/7a2f6aff-9a59-4b78-875a-967c1aa34d08/04-how-to-create-a-flat-vector-illustration-in-affinity-designe.png">
  3206. <img
  3207. srcset="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_400/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/7a2f6aff-9a59-4b78-875a-967c1aa34d08/04-how-to-create-a-flat-vector-illustration-in-affinity-designe.png 400w,
  3208.        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_800/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/7a2f6aff-9a59-4b78-875a-967c1aa34d08/04-how-to-create-a-flat-vector-illustration-in-affinity-designe.png 800w,
  3209.        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_1200/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/7a2f6aff-9a59-4b78-875a-967c1aa34d08/04-how-to-create-a-flat-vector-illustration-in-affinity-designe.png 1200w,
  3210.        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_1600/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/7a2f6aff-9a59-4b78-875a-967c1aa34d08/04-how-to-create-a-flat-vector-illustration-in-affinity-designe.png 1600w,
  3211.        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_2000/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/7a2f6aff-9a59-4b78-875a-967c1aa34d08/04-how-to-create-a-flat-vector-illustration-in-affinity-designe.png 2000w"
  3212. src="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_400/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/7a2f6aff-9a59-4b78-875a-967c1aa34d08/04-how-to-create-a-flat-vector-illustration-in-affinity-designe.png"
  3213. sizes="100vw"
  3214. alt=""
  3215. />
  3216. </a>
  3217.  
  3219. <figcaption class="op-vertical-bottom">
  3220. (<a href='https://dribbble.com/shots/2495305-Infographic/attachments/490101'>Image source</a>) (<a href='https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/7a2f6aff-9a59-4b78-875a-967c1aa34d08/04-how-to-create-a-flat-vector-illustration-in-affinity-designe.png'>View large version</a>)
  3221. </figcaption>
  3223. </figure>
  3224.  
  3225.  
  3226. <h3>Let’s Draw A Flat Illustration!</h3>
  3227.  
  3228. <p>I am providing the source file for this work over <a href="http://provide.smashingmagazine.com/IsabelAracama_Beetle_source-file.zip">here</a>, so you can use it to explore it and to better follow along as we design it. If you do not yet have a copy of Affinity Designer, you can <a href="https://affinity.serif.com/en-gb/signup/trial/designer/">download a trial</a>.</p>
  3229.  
  3230. <h4>1. Canvas Settings</h4>
  3231.  
  3232. <p>Open Affinity Designer, and create a new document by clicking <kbd>Cmd</kbd> + <kbd>N</kbd> (Mac) or <kbd>Ctrl</kbd> + <kbd>N</kbd> (Windows). Alternatively, you can go to “Menu” &rarr; “File” &rarr; “New”. Be sure not to check the “Create Artboard” box.</p>
  3233.  
  3234. <p>Set the type to “Web”, which will automatically set the field DPI to 72. It should be understood now as PPI, but we won’t dive into the details here. If you want to learn more on the topic, check the following two resources:</p>
  3235.  
  3236. <ul>
  3237. <li>“<a href="https://forum.affinity.serif.com/index.php?/topic/25774-its-ppi-not-dpi/">
  3238. It’s PPI not DPI</a>,” Forums, Affinity</li>
  3239.  
  3240. <li>“<a href="https://en.99designs.es/blog/tips/ppi-vs-dpi-whats-the-difference/">PPI vs. DPI: What’s the Difference?</a>,” Alex Bigman, 99designs</li>
  3241. </ul>
  3242.  
  3243. <p>Also, remember that you can change this setting at any time. The vectors’ quality won’t be affected by scaling them.</p>
  3244.  
  3245. <p>Set the size to 2000 &#215; 1300 pixels, and click “OK”.</p>
  3246.  
  3247. <p>Our white canvas is now set, but before we start, I’d suggest you first save this file and give it a name. So, go to “File” &rarr; “Save”, and name it “Beetle”.</p>
  3248.  
  3249. <h4>2. Importing A Color Palette From An Image</h4>
  3250.  
  3251. <p>One of the things I use a lot in Affinity Designer is its ability to <strong>import the colors</strong> contained in an image and creating a palette from them.</p>
  3252.  
  3253. <p>Let’s see how this is done.</p>
  3254.  
  3255. <p>For the illustration I want to draw, I thought of warm colors, like in a sunset, so I searched Google with this query: “warm colors yellows oranges reds palette”. From all the images it found, I chose one that I liked and copied it into Affinity Designer in my recently created canvas. (You can copy and paste the image to the canvas directly from the browser.)</p>
  3256.  
  3257. <p>If the Swatches panel isn’t open yet, use menu “View” &rarr; “Studio” &rarr; “Swatches”. Click the menu in the top-right corner of the panel, and select the option “Create Palette From Document”, and then click on “As Document Palette”. Click “OK” and you’ll see the colors contained in the image form a new palette in the Swatches panel. The default name for it will be “Palette” if you still haven’t saved your file with a name. In case you have, the name of this palette will be the same as your document, but if you want to rename it, simply go to the menu on the right in the Swatches panel again and select the option “Rename Palette”.</p>
  3258.  
  3259. <p>I will call it “Beetle Palette”.</p>
  3260.  
  3261.  
  3262.  
  3263.  
  3264.  
  3265.  
  3266.  
  3267.  
  3268.  
  3269.  
  3270.  
  3271. <figure class="article__image break-out">
  3272. <a href="https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/586785ca-7203-45ff-907c-b0a3302cc670/01-doc-palette.png">
  3273. <img
  3274. srcset="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_400/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/586785ca-7203-45ff-907c-b0a3302cc670/01-doc-palette.png 400w,
  3275.        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_800/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/586785ca-7203-45ff-907c-b0a3302cc670/01-doc-palette.png 800w,
  3276.        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_1200/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/586785ca-7203-45ff-907c-b0a3302cc670/01-doc-palette.png 1200w,
  3277.        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_1600/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/586785ca-7203-45ff-907c-b0a3302cc670/01-doc-palette.png 1600w,
  3278.        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_2000/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/586785ca-7203-45ff-907c-b0a3302cc670/01-doc-palette.png 2000w"
  3279. src="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_400/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/586785ca-7203-45ff-907c-b0a3302cc670/01-doc-palette.png"
  3280. sizes="100vw"
  3281. alt="Creating a palette from an image."
  3282. />
  3283. </a>
  3284.  
  3286. <figcaption class="op-vertical-bottom">
  3287. Creating a palette from an image. (<a href='https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/586785ca-7203-45ff-907c-b0a3302cc670/01-doc-palette.png'>View large version</a>)
  3288. </figcaption>
  3290. </figure>
  3291.  
  3292.  
  3293. <p>We can now get rid of that reference image, or simply hide it in the Layers panel. We will be using this palette as a guide to create our artwork with harmonious colors.</p>
  3294.  
  3295. <p><strong>Interface:</strong> Before we continue, I will present a quick overview of the main sections of the user interface in Affinity Designer, and the names of some of the most used tools.</p>
  3296.  
  3297.  
  3298.  
  3299.  
  3300.  
  3301.  
  3302.  
  3303.  
  3304.  
  3305.  
  3306.  
  3307. <figure class="article__image break-out">
  3308. <a href="https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/dfe876e7-8485-4ff6-b88e-5c5087d1dc6b/main-parts-ui.png">
  3309. <img
  3310. srcset="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_400/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/dfe876e7-8485-4ff6-b88e-5c5087d1dc6b/main-parts-ui.png 400w,
  3311.        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_800/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/dfe876e7-8485-4ff6-b88e-5c5087d1dc6b/main-parts-ui.png 800w,
  3312.        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_1200/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/dfe876e7-8485-4ff6-b88e-5c5087d1dc6b/main-parts-ui.png 1200w,
  3313.        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_1600/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/dfe876e7-8485-4ff6-b88e-5c5087d1dc6b/main-parts-ui.png 1600w,
  3314.        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_2000/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/dfe876e7-8485-4ff6-b88e-5c5087d1dc6b/main-parts-ui.png 2000w"
  3315. src="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_400/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/dfe876e7-8485-4ff6-b88e-5c5087d1dc6b/main-parts-ui.png"
  3316. sizes="100vw"
  3317. alt="Main areas of the UI in Affinity Designer when using the draw persona."
  3318. />
  3319. </a>
  3320.  
  3322. <figcaption class="op-vertical-bottom">
  3323. Main areas of the UI in Affinity Designer when using the draw persona. (<a href='https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/6797bca1-d782-447c-b84a-2b81483a5e12/05-how-to-create-a-flat-vector-illustration-in-affinity-designe.png'>View large version</a>)
  3324. </figcaption>
  3326. </figure>
  3327.  
  3328.  
  3329.  
  3330.  
  3331.  
  3332.  
  3333.  
  3334.  
  3335.  
  3336.  
  3337.  
  3338.  
  3339. <figure class="article__image break-out">
  3340. <a href="https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/8f6a1f3a-4bec-4e39-9599-a2e151eb32cd/tools-tooltips-draw-persona.png">
  3341. <img
  3342. srcset="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_400/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/8f6a1f3a-4bec-4e39-9599-a2e151eb32cd/tools-tooltips-draw-persona.png 400w,
  3343.        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_800/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/8f6a1f3a-4bec-4e39-9599-a2e151eb32cd/tools-tooltips-draw-persona.png 800w,
  3344.        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_1200/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/8f6a1f3a-4bec-4e39-9599-a2e151eb32cd/tools-tooltips-draw-persona.png 1200w,
  3345.        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_1600/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/8f6a1f3a-4bec-4e39-9599-a2e151eb32cd/tools-tooltips-draw-persona.png 1600w,
  3346.        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_2000/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/8f6a1f3a-4bec-4e39-9599-a2e151eb32cd/tools-tooltips-draw-persona.png 2000w"
  3347. src="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_400/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/8f6a1f3a-4bec-4e39-9599-a2e151eb32cd/tools-tooltips-draw-persona.png"
  3348. sizes="100vw"
  3349. alt="Tools for the (default) draw persona in Affinity Designer."
  3350. />
  3351. </a>
  3352.  
  3354. <figcaption class="op-vertical-bottom">
  3355. Tools for the (default) draw persona in Affinity Designer. (<a href='https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/8f6a1f3a-4bec-4e39-9599-a2e151eb32cd/tools-tooltips-draw-persona.png'>View large version</a>)
  3356. </figcaption>
  3358. </figure>
  3359.  
  3360.  
  3361. <h4>3. Creating The Background With The Gradient Tool</h4>
  3362.  
  3363. <p>The next thing is to create a background. For this, go to the tools displayed on the left side, and select the Rectangle tool. Drag it along the canvas, making sure to give it an initial random fill color so that you can see it. The fill color chip is located in the top toolbar.</p>
  3364.  
  3365.  
  3366.  
  3367.  
  3368.  
  3369.  
  3370.  
  3371.  
  3372.  
  3373.  
  3374.  
  3375. <figure class="article__image break-out">
  3376. <a href="https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/116a8b28-97b7-4020-8cbb-62a6da16474b/02-background-color.png">
  3377. <img
  3378. srcset="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_400/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/116a8b28-97b7-4020-8cbb-62a6da16474b/02-background-color.png 400w,
  3379.        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_800/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/116a8b28-97b7-4020-8cbb-62a6da16474b/02-background-color.png 800w,
  3380.        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_1200/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/116a8b28-97b7-4020-8cbb-62a6da16474b/02-background-color.png 1200w,
  3381.        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_1600/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/116a8b28-97b7-4020-8cbb-62a6da16474b/02-background-color.png 1600w,
  3382.        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_2000/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/116a8b28-97b7-4020-8cbb-62a6da16474b/02-background-color.png 2000w"
  3383. src="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_400/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/116a8b28-97b7-4020-8cbb-62a6da16474b/02-background-color.png"
  3384. sizes="100vw"
  3385. alt="Click the Rectangle tool and drag it along the canvas. Fill it with a random color."
  3386. />
  3387. </a>
  3388.  
  3390. <figcaption class="op-vertical-bottom">
  3391. Click the Rectangle tool and drag it along the canvas. Fill it with a random color. (<a href='https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/116a8b28-97b7-4020-8cbb-62a6da16474b/02-background-color.png'>View large version</a>)
  3392. </figcaption>
  3394. </figure>
  3395.  
  3396.  
  3397. <p>Next, select the Fill tool (the color wheel icon, or press <kbd>G</kbd> on the keyboard), and in the top Context toolbar, select the type: “Linear”.</p>
  3398.  
  3399.  
  3400.  
  3401.  
  3402.  
  3403.  
  3404.  
  3405.  
  3406.  
  3407.  
  3408.  
  3409. <figure class="article__image break-out">
  3410. <a href="https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/955fcebc-41c6-4bdd-9d6e-ad48ccf3521e/03-linear-gradient.png">
  3411. <img
  3412. srcset="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_400/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/955fcebc-41c6-4bdd-9d6e-ad48ccf3521e/03-linear-gradient.png 400w,
  3413.        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_800/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/955fcebc-41c6-4bdd-9d6e-ad48ccf3521e/03-linear-gradient.png 800w,
  3414.        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_1200/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/955fcebc-41c6-4bdd-9d6e-ad48ccf3521e/03-linear-gradient.png 1200w,
  3415.        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_1600/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/955fcebc-41c6-4bdd-9d6e-ad48ccf3521e/03-linear-gradient.png 1600w,
  3416.        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_2000/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/955fcebc-41c6-4bdd-9d6e-ad48ccf3521e/03-linear-gradient.png 2000w"
  3417. src="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_400/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/955fcebc-41c6-4bdd-9d6e-ad48ccf3521e/03-linear-gradient.png"
  3418. sizes="100vw"
  3419. alt="Select “Linear” from the Fill tool’s contextual menu."
  3420. />
  3421. </a>
  3422.  
  3424. <figcaption class="op-vertical-bottom">
  3425. Select “Linear” from the Fill tool’s contextual menu. (<a href='https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/955fcebc-41c6-4bdd-9d6e-ad48ccf3521e/03-linear-gradient.png'>View large version</a>)
  3426. </figcaption>
  3428. </figure>
  3429.  
  3430.  
  3431. <p>We have several options here: “None” removes the fill color, “Solid” applies one solid color, and all of the rest are different types of gradients.</p>
  3432.  
  3433. <p>To straighten the gradient and make it vertical, place your cursor over one of the ends and pull. When you are near the vertical line, press <kbd>Shift</kbd>: This will make it perfectly vertical and perpendicular to the base of the canvas.</p>
  3434.  
  3435. <figure><a href="https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/bcbf8dd4-c4a6-48a9-b544-df83b27721cc/gradient-shift.gif"><img src="https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/bcbf8dd4-c4a6-48a9-b544-df83b27721cc/gradient-shift.gif" width="800" height="500" alt="To straighten a linear gradient, pull from one end, and then press the Shift key to make it perfectly vertical." /></a><figcaption>To straighten a linear gradient, pull from one end, and then press the Shift key to make it perfectly vertical. (<a href="https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/bcbf8dd4-c4a6-48a9-b544-df83b27721cc/gradient-shift.gif">View large version</a>)</figcaption></figure>
  3436.  
  3437. <p>Next, in the Context toolbar, click on the color chip, and you’ll see a dialog that corresponds exactly with the gradient we just applied. Click now on the color chip, and an additional dialog will open.</p>
  3438.  
  3439. <p>In the combo, click on the “Color” tab, and then select “RGB Hex Sliders”; in the field marked with a <strong>#</strong>, input the value: <code>FE8876</code>. Press “OK”. You’ll see now how the gradient has been updated to the new color. Repeat this action with the other color stop in the gradient dialog, and input this value: <code>E1C372</code>.</p>
  3440.  
  3441. <p>You should now have something like this:</p>
  3442.  
  3443.  
  3444.  
  3445.  
  3446.  
  3447.  
  3448.  
  3449.  
  3450.  
  3451.  
  3452.  
  3453. <figure class="article__image break-out">
  3454. <a href="https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/cac8348c-a33d-454e-896d-3b8454ce646e/05-gradient-finished.png">
  3455. <img
  3456. srcset="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_400/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/cac8348c-a33d-454e-896d-3b8454ce646e/05-gradient-finished.png 400w,
  3457.        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_800/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/cac8348c-a33d-454e-896d-3b8454ce646e/05-gradient-finished.png 800w,
  3458.        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_1200/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/cac8348c-a33d-454e-896d-3b8454ce646e/05-gradient-finished.png 1200w,
  3459.        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_1600/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/cac8348c-a33d-454e-896d-3b8454ce646e/05-gradient-finished.png 1600w,
  3460.        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_2000/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/cac8348c-a33d-454e-896d-3b8454ce646e/05-gradient-finished.png 2000w"
  3461. src="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_400/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/cac8348c-a33d-454e-896d-3b8454ce646e/05-gradient-finished.png"
  3462. sizes="100vw"
  3463. alt="Setting gradient colors."
  3464. />
  3465. </a>
  3466.  
  3468. <figcaption class="op-vertical-bottom">
  3469. Setting gradient colors (<a href='https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/cac8348c-a33d-454e-896d-3b8454ce646e/05-gradient-finished.png'>View large version</a>)
  3470. </figcaption>
  3472. </figure>
  3473.  
  3474.  
  3475. <p>Let’s go to the Layers panel and rename the layer to “Background”. Double-click on it to rename it, and then lock it (by clicking on the little lock icon in the top-right corner).</p>
  3476.  
  3477. <h4>4. Drawing The Car Outline With The Pen Tool</h4>
  3478.  
  3479. <p>The next thing we need to do is look for an image that will serve as our reference to draw the outline of the car. I searched Google for “Volkswagen Beetle side view”. From the images I found, I selected one of a green Beetle and copied and pasted it into my document. (Remember to lock the layer with the reference image, so that it doesn’t move accidentally.)</p>
  3480.  
  3481. <p>Next, in the side toolbar, select the Pen tool (or press <kbd>P</kbd>), zoom in a bit so that you can work more comfortably, and start tracing a segment, following the outline of the car in the picture. Give the stroke an 8-pixel width in the Stroke panel.</p>
  3482.  
  3483. <p><strong>Note:</strong> <em>You won’t need to create a layer, because the segments you trace will be automatically placed on top of the image.</em></p>
  3484.  
  3485. <p>The Pen tool is one of the most daunting tools for beginners, and it is obviously one of the most important tools to learn in vector graphics. While practice is needed to reach perfection, it is also a matter of understanding some simple actions that will help you use the tool better. Let’s dive into the details!</p>
  3486.  
  3487. <p>As you trace with the Pen tool in Affinity Designer, you will see <strong>two types</strong> of nodes: <strong>squared</strong> nodes appear first, and as you pull the handles, they will turn into <strong>rounded</strong> nodes.</p>
  3488.  
  3489.  
  3490.  
  3491.  
  3492.  
  3493.  
  3494.  
  3495.  
  3496.  
  3497.  
  3498.  
  3499. <figure class="article__image break-out">
  3500. <a href="https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/569aec2b-7231-407c-9415-84b5e00748fb/06-nodes-handlers.png">
  3501. <img
  3502. srcset="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_400/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/569aec2b-7231-407c-9415-84b5e00748fb/06-nodes-handlers.png 400w,
  3503.        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_800/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/569aec2b-7231-407c-9415-84b5e00748fb/06-nodes-handlers.png 800w,
  3504.        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_1200/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/569aec2b-7231-407c-9415-84b5e00748fb/06-nodes-handlers.png 1200w,
  3505.        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_1600/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/569aec2b-7231-407c-9415-84b5e00748fb/06-nodes-handlers.png 1600w,
  3506.        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_2000/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/569aec2b-7231-407c-9415-84b5e00748fb/06-nodes-handlers.png 2000w"
  3507. src="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_400/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/569aec2b-7231-407c-9415-84b5e00748fb/06-nodes-handlers.png"
  3508. sizes="100vw"
  3509. alt="Sharp, smooth nodes and handles on a path segment"
  3510. />
  3511. </a>
  3512.  
  3514. <figcaption class="op-vertical-bottom">
  3515. Sharp, smooth nodes and handles on a path segment (<a href='https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/569aec2b-7231-407c-9415-84b5e00748fb/06-nodes-handlers.png'>View large version</a>)
  3516. </figcaption>
  3518. </figure>
  3519.  
  3520.  
  3521. <p>Affinity Designer comes with several pen modes, but we will only be using the default one, called “Pen Mode”, and as we trace the car, we will get rid of one of the handles by clicking <kbd>Alt</kbd> in such a way that the next section of the segment to be traced will be independent of the previous one, even if connected to it.</p>
  3522.  
  3523. <p>Here’s how to proceed. Select the Pen tool, click once, move some distance away, click a second time (a straight line will be created between nodes 1 and 2), drag the second node (this will create a curve), <kbd>Alt</kbd>-click the node to <strong>remove</strong> the second control handle, then proceed with node 3, and so on.</p>
  3524.  
  3525. <p>An alternative way would be to select the Pen tool, click once, move some distance away, click a second time (a straight line will be created between nodes 1 and 2), drag the second node (this will create a curve), then, without moving the mouse, <kbd>Alt</kbd>-click the second handle’s point to remove this handle, then proceed with node 3, and so on.</p>
  3526.  
  3527. <figure><a href="https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/6800cf00-0f55-4ad4-86f5-67a73bf9649e/pen-tool.gif"><img src="https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/6800cf00-0f55-4ad4-86f5-67a73bf9649e/pen-tool.gif" width="600" height="375" alt="Trace the outline of the car and get rid of the handles we don’t need by Alt-clicking." /></a><figcaption>Trace the outline of the car and get rid of the handles we don’t need by Alt-clicking. (<a href="https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/6800cf00-0f55-4ad4-86f5-67a73bf9649e/pen-tool.gif">View large version</a>)</figcaption></figure>
  3528.  
  3529. <p><strong>Note:</strong> <em>Don’ be afraid to trace segments that are not perfect. With time, you’ll get a better grip of the Pen tool. For now, it’s not very important that each node and line looks as we want it to look in the end. In fact, Affinity Designer makes it really easy to amend segments and nodes, so tracing a rough line to start is just fine. For more insight on how to easily use the Pen tool (for beginners), check out Isabel Aracama’s <a href="https://www.youtube.com/watch?v=BSomsJpKDaw">video tutorial</a>.</em></p>
  3530.  
  3531. <h4>5. Resculpting Segments And Using The Corner Tool</h4>
  3532.  
  3533. <p>What we need now is to make all of those rough lines look smooth and curvy. First, we will pull the straight segments to smoothen them, and then we will improve them using the Corner tool.</p>
  3534.  
  3535. <p>Click the Node tool in the side toolbar, or select it by pressing <kbd>A</kbd> on your keyboard. Now, start pulling segments to follow the lines of your reference picture. You can also use the handles to help make the line take the shape you need by moving and pulling them accordingly. Just do it in such a way that it all fits the reference image, but don’t bother much if it’s not yet perfect. With the Node tool (A), you can both <strong>select and move nodes</strong>, but you can also click and drag the curves themselves to change them.</p>
  3536.  
  3537. <figure><a href="https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/72b9eccb-ae02-4972-9269-95bdbc9ca91c/amend-segments.gif"><img src="https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/72b9eccb-ae02-4972-9269-95bdbc9ca91c/amend-segments.gif" width="600" height="375" alt="Resculpt and correct segments with the Node tool A." /></a><figcaption>Resculpt and correct segments with the Node tool (<kbd>A</kbd>). (<a href="https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/72b9eccb-ae02-4972-9269-95bdbc9ca91c/amend-segments.gif">View large version</a>)</figcaption></figure>
  3538.  
  3539. <p>Once all of the segments are where we need them, we are going to smoothen their corners using the Corner tool (shortcut: <kbd>C</kbd>). This is one of my favorite tools in Affinity Designer. The live Corner tool allows you to adjust your nodes and segments to perfection. Select it by pressing <kbd>C</kbd>, or select it from the Tools sidebar. The method is pretty simple: Pass the corner tool over the sharp nodes (squared nodes) that you want to smoothen. If you need to, switch back to the Node tool (<kbd>A</kbd>) to adjust a section of a segment by pulling it or its handles. (Smooth nodes (rounded nodes) don’t allow for more softening, and they will display a smaller circle the moment you select the Corner tool.)</p>
  3540.  
  3541.  
  3542.  
  3543.  
  3544.  
  3545.  
  3546.  
  3547.  
  3548.  
  3549.  
  3550.  
  3551. <figure >
  3552. <a href="https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/45e25645-d195-487d-8bd9-620d4f7c9464/07-corner-tool-icon.png">
  3553. <img
  3554. srcset="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_400/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/45e25645-d195-487d-8bd9-620d4f7c9464/07-corner-tool-icon.png 400w,
  3555.        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_800/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/45e25645-d195-487d-8bd9-620d4f7c9464/07-corner-tool-icon.png 800w,
  3556.        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_1200/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/45e25645-d195-487d-8bd9-620d4f7c9464/07-corner-tool-icon.png 1200w,
  3557.        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_1600/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/45e25645-d195-487d-8bd9-620d4f7c9464/07-corner-tool-icon.png 1600w,
  3558.        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_2000/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/45e25645-d195-487d-8bd9-620d4f7c9464/07-corner-tool-icon.png 2000w"
  3559. src="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_400/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/45e25645-d195-487d-8bd9-620d4f7c9464/07-corner-tool-icon.png"
  3560. sizes="100vw"
  3561. alt=""
  3562. />
  3563. </a>
  3564.  
  3566. <figcaption class="op-vertical-bottom">
  3567. <a href='https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/45e25645-d195-487d-8bd9-620d4f7c9464/07-corner-tool-icon.png'>View large version</a>
  3568. </figcaption>
  3570. </figure>
  3571.  
  3572.  
  3573.  
  3574.  
  3575.  
  3576.  
  3577.  
  3578.  
  3579.  
  3580.  
  3581.  
  3582.  
  3583. <figure >
  3584. <a href="https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/4c31db59-cf3a-4621-b352-82e2f37b660d/08-nodes-corner.png">
  3585. <img
  3586. srcset="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_400/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/4c31db59-cf3a-4621-b352-82e2f37b660d/08-nodes-corner.png 400w,
  3587.        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_800/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/4c31db59-cf3a-4621-b352-82e2f37b660d/08-nodes-corner.png 800w,
  3588.        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_1200/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/4c31db59-cf3a-4621-b352-82e2f37b660d/08-nodes-corner.png 1200w,
  3589.        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_1600/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/4c31db59-cf3a-4621-b352-82e2f37b660d/08-nodes-corner.png 1600w,
  3590.        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_2000/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/4c31db59-cf3a-4621-b352-82e2f37b660d/08-nodes-corner.png 2000w"
  3591. src="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_400/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/4c31db59-cf3a-4621-b352-82e2f37b660d/08-nodes-corner.png"
  3592. sizes="100vw"
  3593. alt=""
  3594. />
  3595. </a>
  3596.  
  3598. <figcaption class="op-vertical-bottom">
  3599. <a href='https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/4c31db59-cf3a-4621-b352-82e2f37b660d/08-nodes-corner.png'>View large version</a>
  3600. </figcaption>
  3602. </figure>
  3603.  
  3604.  
  3605. <figure><a href="https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/9046c1a0-9b9e-4efd-8af6-7d41cffb3d62/corner-tool.gif"><img src="https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/9046c1a0-9b9e-4efd-8af6-7d41cffb3d62/corner-tool.gif" width="800" height="500" alt="Use the Corner tool on sharp nodes to smoothen the lines." /></a><figcaption>Use the Corner tool on sharp nodes to smoothen the lines. (<a href="https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/9046c1a0-9b9e-4efd-8af6-7d41cffb3d62/corner-tool.gif">View large version</a>)</figcaption></figure>
  3606.  
  3607. <p>Once our corners and segments look good, we’ll want to fill the shape and change the color of the stroke. Select the closed curve line that we just created for the car, click on the fill color chip, and in the HEX color field input <code>FFCF23</code>. Click on the stroke color chip beside it and input <code>131000</code>.</p>
  3608.  
  3609.  
  3610.  
  3611.  
  3612.  
  3613.  
  3614.  
  3615.  
  3616.  
  3617.  
  3618.  
  3619. <figure class="article__image break-out">
  3620. <a href="https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/6fdb970e-8cdb-4e34-a58f-92471f4d5064/09-fill-and-stroke.png">
  3621. <img
  3622. srcset="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_400/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/6fdb970e-8cdb-4e34-a58f-92471f4d5064/09-fill-and-stroke.png 400w,
  3623.        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_800/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/6fdb970e-8cdb-4e34-a58f-92471f4d5064/09-fill-and-stroke.png 800w,
  3624.        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_1200/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/6fdb970e-8cdb-4e34-a58f-92471f4d5064/09-fill-and-stroke.png 1200w,
  3625.        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_1600/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/6fdb970e-8cdb-4e34-a58f-92471f4d5064/09-fill-and-stroke.png 1600w,
  3626.        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_2000/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/6fdb970e-8cdb-4e34-a58f-92471f4d5064/09-fill-and-stroke.png 2000w"
  3627. src="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_400/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/6fdb970e-8cdb-4e34-a58f-92471f4d5064/09-fill-and-stroke.png"
  3628. sizes="100vw"
  3629. alt="This is what you should have after applying the fill color and stroke color."
  3630. />
  3631. </a>
  3632.  
  3634. <figcaption class="op-vertical-bottom">
  3635. This is what you should have after applying the fill color and stroke color. (<a href='https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/6fdb970e-8cdb-4e34-a58f-92471f4d5064/09-fill-and-stroke.png'>View large version</a>)
  3636. </figcaption>
  3638. </figure>
  3639.  
  3640.  
  3641. <p>Create now a shape with the Pen tool, and fill it with black (<code>000000</code>). Place it behind the car’s bodywork (the yellow shape). The exact shape of the new object that you will create does not really matter, except that its bottom side needs to be straight, as in the image below. Place it behind the main bodywork (the yellow shape) via either the Layers panel or through the menu “Arrange” &rarr; “Back One”.</p>
  3642.  
  3643.  
  3644.  
  3645.  
  3646.  
  3647.  
  3648.  
  3649.  
  3650.  
  3651.  
  3652.  
  3653. <figure class="article__image break-out">
  3654. <a href="https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/2ac8fd84-9de9-4910-886d-83f05d102eb5/10-black-behind.png">
  3655. <img
  3656. srcset="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_400/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/2ac8fd84-9de9-4910-886d-83f05d102eb5/10-black-behind.png 400w,
  3657.        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_800/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/2ac8fd84-9de9-4910-886d-83f05d102eb5/10-black-behind.png 800w,
  3658.        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_1200/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/2ac8fd84-9de9-4910-886d-83f05d102eb5/10-black-behind.png 1200w,
  3659.        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_1600/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/2ac8fd84-9de9-4910-886d-83f05d102eb5/10-black-behind.png 1600w,
  3660.        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_2000/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/2ac8fd84-9de9-4910-886d-83f05d102eb5/10-black-behind.png 2000w"
  3661. src="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_400/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/2ac8fd84-9de9-4910-886d-83f05d102eb5/10-black-behind.png"
  3662. sizes="100vw"
  3663. alt="Black shape behind the car bodywork."
  3664. />
  3665. </a>
  3666.  
  3668. <figcaption class="op-vertical-bottom">
  3669. Black shape behind the car bodywork (<a href='https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/2ac8fd84-9de9-4910-886d-83f05d102eb5/10-black-behind.png'>View large version</a>)
  3670. </figcaption>
  3672. </figure>
  3673.  
  3674.  
  3675. <h4>6. Creating The Wheels Using Smart Copy</h4>
  3676.  
  3677. <p>We need to put the wheels in place next. In the Tools, pick the Ellipse tool, and drag over the canvas, creating a circle the same size as the wheel in the reference picture. Click <kbd>Shift</kbd> as you drag to make the circle proportionate. Additionally, holding <kbd>Ctrl</kbd> (Windows) or <kbd>Cmd</kbd> (Mac), you can create a perfect circle <strong>from the center out</strong>.</p>
  3678.  
  3679. <p><strong>Note:</strong> <em>If you need to, hide the layers created thus far to see better, or simply reduce their opacity temporarily. You can change the opacity by selecting any shape and pressing a number on the keyboard, from 1 to 9, where 1 will apply a 10% opacity and 9 a 90% opacity value. To reset the opacity to 100%, press 0 (zero).</em></p>
  3680.  
  3681. <p>Choose a random color that contrasts with the rest. I like to do so initially just so that I can see the shapes well contrasted and differentiated. When I am happy with them, I apply the final color. Set the opacity to 50% (click <kbd>5</kbd> on the keyboard) to be able to see through as you draw it.</p>
  3682.  
  3683. <p>Zoom into your wheel shape. Press <kbd>Z</kbd> to select the Zoom tool, and drag over the shape while holding <kbd>Alt</kbd> key, or double-click on the thumbnail corresponding to it in the Layers panel. (It doesn’t need to be previously selected, although this will help you to visually locate it in the Layers panel.)</p>
  3684.  
  3685. <p>We will now learn how to use Smart copy, and we will paste some concentric circles.</p>
  3686.  
  3687. <p>Select the circle and press <kbd>Cmd</kbd> + <kbd>J</kbd> (Mac) or <kbd>Ctrl</kbd> + <kbd>J</kbd> (Windows). A new circle will be placed on top of the original one. Select it. This command is found under “Edit” &rarr; “Duplicate”, and it’s also known as Smart copy or Smart duplicate.</p>
  3688.  
  3689. <p>Click <kbd>Shift</kbd> + <kbd>Cmd</kbd> (Mac) or <kbd>Shift</kbd> + <kbd>Ctrl</kbd> (Windows), and drag in to transform it into a smaller concentrical circle. Repeat three times, reducing a bit more in size each time, to fit your reference. Smart duplicating a shape by pressing <kbd>Shift</kbd> + <kbd>Cmd</kbd> (Mac) or <kbd>Shift</kbd> + <kbd>Ctrl</kbd> (Windows) will make the shape transform in a relative way. This will happen from your third smart-duplicated shape onwards.</p>
  3690.  
  3691. <figure><a href="https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/1bbecb15-e054-4076-9a17-565f87261204/smart-copy.gif"><img src="https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/1bbecb15-e054-4076-9a17-565f87261204/smart-copy.gif" width="" height="" alt="smart copy via keyboard shortcuts" /></a><figcaption>Smart copy via <kbd>Cmd</kbd> + <kbd>J</kbd> or <kbd>Ctrl</kbd> + <kbd>J</kbd>. (<a href="https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/1bbecb15-e054-4076-9a17-565f87261204/smart-copy.gif">View large version</a>)</figcaption></figure>
  3692.  
  3693. <p>So, we have our concentric circles for the wheel, and now we have to change the colors. Go to the Swatches panel, and in the previously created palette, choose colors that work well with the yellow that we have applied to the car’s bodywork. You can select a color and modify it slightly to adapt to what you think works best. We need to apply fill and stroke colors. Remember to give the stroke the same width as the rest of the car (8 pixels) except for the innermost circle, where we will apply a stroke of 11.5 pixels. Also, remember to put back to 100% the opacity of each concentric circle.</p>
  3694.  
  3695. <p>I chose these colors, from the outer to inner circles: <code>5D5100</code>, <code>918A00</code>, <code>CFA204</code>, <code>E5DEAB</code>.</p>
  3696.  
  3697. <p>Now we want to select and group all of them together. Select them all and press <kbd>Cmd</kbd> + <kbd>G</kbd> (Mac) or <kbd>Ctrl</kbd> + <kbd>G</kbd> (Windows). Name the new group “Front Wheel” in the Layers panel. Duplicate this group and, while pressing <kbd>Shift</kbd>, select it and drag along the canvas until it overlaps with the back wheel. Name the layer accordingly.</p>
  3698.  
  3699.  
  3700.  
  3701.  
  3702.  
  3703.  
  3704.  
  3705.  
  3706.  
  3707.  
  3708.  
  3709. <figure class="article__image break-out">
  3710. <a href="https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/9299d0ce-08c4-403d-82b3-4632a77dc7be/11-wheels.png">
  3711. <img
  3712. srcset="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_400/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/9299d0ce-08c4-403d-82b3-4632a77dc7be/11-wheels.png 400w,
  3713.        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_800/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/9299d0ce-08c4-403d-82b3-4632a77dc7be/11-wheels.png 800w,
  3714.        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_1200/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/9299d0ce-08c4-403d-82b3-4632a77dc7be/11-wheels.png 1200w,
  3715.        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_1600/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/9299d0ce-08c4-403d-82b3-4632a77dc7be/11-wheels.png 1600w,
  3716.        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_2000/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/9299d0ce-08c4-403d-82b3-4632a77dc7be/11-wheels.png 2000w"
  3717. src="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_400/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/9299d0ce-08c4-403d-82b3-4632a77dc7be/11-wheels.png"
  3718. sizes="100vw"
  3719. alt="The car should look similar to this now."
  3720. />
  3721. </a>
  3722.  
  3724. <figcaption class="op-vertical-bottom">
  3725. The car should look similar to this now. (<a href='https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/9299d0ce-08c4-403d-82b3-4632a77dc7be/11-wheels.png'>View large version</a>)
  3726. </figcaption>
  3728. </figure>
  3729.  
  3730.  
  3731. <h4>7. Breaking Curves And Clipping Masks To Draw The Inner Lines Of The Car’s Bodywork</h4>
  3732.  
  3733. <p>To keep working, either hide all layers or bring down the opacity so that they don’t get in your way. We need to trace the front and back fenders. We have to do the same as what we did for the main bodywork. Pick the Pen tool and trace an outline over it.</p>
  3734.  
  3735. <p>Once it is traced, modify it by using the handles, nodes and Corner tool. I also modified the black shape behind the car a bit, so that it shows a bit more in the lower part of the body work.</p>
  3736.  
  3737.  
  3738.  
  3739.  
  3740.  
  3741.  
  3742.  
  3743.  
  3744.  
  3745.  
  3746.  
  3747. <figure class="article__image break-out">
  3748. <a href="https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/448978d1-df3a-4426-bae4-d43a0d33eb35/car-fenders.png">
  3749. <img
  3750. srcset="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_400/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/448978d1-df3a-4426-bae4-d43a0d33eb35/car-fenders.png 400w,
  3751.        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_800/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/448978d1-df3a-4426-bae4-d43a0d33eb35/car-fenders.png 800w,
  3752.        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_1200/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/448978d1-df3a-4426-bae4-d43a0d33eb35/car-fenders.png 1200w,
  3753.        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_1600/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/448978d1-df3a-4426-bae4-d43a0d33eb35/car-fenders.png 1600w,
  3754.        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_2000/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/448978d1-df3a-4426-bae4-d43a0d33eb35/car-fenders.png 2000w"
  3755. src="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_400/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/448978d1-df3a-4426-bae4-d43a0d33eb35/car-fenders.png"
  3756. sizes="100vw"
  3757. alt="Fenders added to the car."
  3758. />
  3759. </a>
  3760.  
  3762. <figcaption class="op-vertical-bottom">
  3763. Fenders added to the car. (<a href='https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/448978d1-df3a-4426-bae4-d43a0d33eb35/car-fenders.png'>View large version</a>)
  3764. </figcaption>
  3766. </figure>
  3767.  
  3768.  
  3769. <p>Now we want to trace some of the inner lines that define the car. For this, we will duplicate the main yellow shape, remove its fill color and place it onto our illustration in the canvas.</p>
  3770.  
  3771. <p>Press <kbd>A</kbd> on the keyboard, and click on any of the bottom nodes of the segment. In the top Context toolbar, click on “Action” &rarr; “Break Curve”. You will see now that the selected node has turned into a red-outlined squared node. Click on it and pull anywhere. As you can see, the segment is now <strong>open</strong>. Click the <kbd>Delete</kbd> or <kbd>Backspace</kbd> key (Windows) or the <kbd>Delete</kbd> key (Mac), and do the same with all of the bottom nodes, leaving just the leftmost and rightmost ones, and also being very careful that what is left of the top section of the segment is not deformed at all.</p>
  3772.  
  3773. <figure><a href="https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/d80949f2-23c6-42df-9674-b3c5610b1a61/inner-lines-bodywork.gif"><img src="https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/d80949f2-23c6-42df-9674-b3c5610b1a61/inner-lines-bodywork.gif" width="600" height="375" alt="" /></a><figcaption>(<a href="https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/d80949f2-23c6-42df-9674-b3c5610b1a61/inner-lines-bodywork.gif">View large version</a>)</figcaption></figure>
  3774.  
  3775. <p>I use this method for one main reason: Duplicating an existing line allows for a more consistent look and for more harmonious lines.</p>
  3776.  
  3777. <p>Select now the newly opened curve, and make it smaller in such a way that it fits into the main yellow shape when you place them on top of one another. In the Layers panel, drag this curve into the yellow shape layer to create a <strong>clipping mask</strong>. The reason for creating a clipping mask is simple: We want an object inside another object so that they do not overlap (i.e. both objects are visible), but one nested inside the other. Not doing so would result in some bits of the nested object being visible, which is not what we want; we need perfect, clean-cut lines.</p>
  3778.  
  3779. <p><strong>Note:</strong> <em>Clipping masks are not to be mistaken for <strong>masks</strong>. You will know you’re clipping and not masking because of the thumbnail (masks show a crop-like icon when applied) and because when you are about to clip, a <strong>blue stripe is displayed horizontally</strong>, a bit more than halfway across the layer. Masks, on the other hand, display a <strong>small vertical</strong> blue stripe beside the thumbnail.</em></p>
  3780.  
  3781.  
  3782.  
  3783.  
  3784.  
  3785.  
  3786.  
  3787.  
  3788.  
  3789.  
  3790.  
  3791. <figure >
  3792. <a href="https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/653633d3-eade-476d-b95c-f819348cef62/clippin-vs-masking.png">
  3793. <img
  3794. srcset="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_400/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/653633d3-eade-476d-b95c-f819348cef62/clippin-vs-masking.png 400w,
  3795.        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_800/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/653633d3-eade-476d-b95c-f819348cef62/clippin-vs-masking.png 800w,
  3796.        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_1200/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/653633d3-eade-476d-b95c-f819348cef62/clippin-vs-masking.png 1200w,
  3797.        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_1600/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/653633d3-eade-476d-b95c-f819348cef62/clippin-vs-masking.png 1600w,
  3798.        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_2000/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/653633d3-eade-476d-b95c-f819348cef62/clippin-vs-masking.png 2000w"
  3799. src="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_400/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/653633d3-eade-476d-b95c-f819348cef62/clippin-vs-masking.png"
  3800. sizes="100vw"
  3801. alt="Clipping versus masking in Affinity Designer"
  3802. />
  3803. </a>
  3804.  
  3806. <figcaption class="op-vertical-bottom">
  3807. Clipping versus masking in Affinity Designer (<a href='https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/653633d3-eade-476d-b95c-f819348cef62/clippin-vs-masking.png'>View large version</a>)
  3808. </figcaption>
  3810. </figure>
  3811.  
  3812.  
  3813. <figure><a href="https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/44920dea-1158-4347-828c-f03cd1915b8b/clipping.gif"><img src="https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/44920dea-1158-4347-828c-f03cd1915b8b/clipping.gif" width="600" height="375" alt="Clipping mask once it is applied" /></a><figcaption>Clipping mask once it is applied (<a href="https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/44920dea-1158-4347-828c-f03cd1915b8b/clipping.gif">View large version</a>)</figcaption></figure>
  3814.  
  3815. <p>Now that we have applied our clipping mask to insert the newly created segment inside the main shape of the car, I’ve broken some nodes and moved some others around a bit in order to place them exactly how I want. I’ve stretched the width a bit, and separated the front from the rest of the segment using exactly the same methods we’ve already seen. Then, I applied a bit more Corner tool to soften whatever I felt needed to be softened. Finally, with the Pen tool, I added some extra nodes and segments to create the rest of the inner lines that define the car.</p>
  3816.  
  3817. <p><strong>Note:</strong> <em>In order to select an object in a mask, a clipping mask or a group when not selecting the object directly in the Layers panel, you have to double-click until you select the object, or hold <kbd>Ctrl</kbd> (Windows) or <kbd>Cmd</kbd> (Mac) and click.</em></p>
  3818.  
  3819. <figure><a href="https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/99fb6b96-3c61-48da-8dfa-26c45f5d88bb/adding-lines.gif"><img src="https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/99fb6b96-3c61-48da-8dfa-26c45f5d88bb/adding-lines.gif" width="600" height="375" alt="Adding extra lines to a segment." /></a><figcaption>Adding extra lines to a segment (<a href="https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/99fb6b96-3c61-48da-8dfa-26c45f5d88bb/adding-lines.gif">View large version</a>)</figcaption></figure>
  3820.  
  3821. <p>After some amendments and tweaking using the mentioned methods, our car looks like this:</p>
  3822.  
  3823.  
  3824.  
  3825.  
  3826.  
  3827.  
  3828.  
  3829.  
  3830.  
  3831.  
  3832.  
  3833. <figure class="article__image break-out">
  3834. <a href="https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/ca4743e0-d5b3-4a49-b046-7ccdcb5a3921/12-car-with-lines.png">
  3835. <img
  3836. srcset="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_400/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/ca4743e0-d5b3-4a49-b046-7ccdcb5a3921/12-car-with-lines.png 400w,
  3837.        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_800/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/ca4743e0-d5b3-4a49-b046-7ccdcb5a3921/12-car-with-lines.png 800w,
  3838.        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_1200/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/ca4743e0-d5b3-4a49-b046-7ccdcb5a3921/12-car-with-lines.png 1200w,
  3839.        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_1600/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/ca4743e0-d5b3-4a49-b046-7ccdcb5a3921/12-car-with-lines.png 1600w,
  3840.        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_2000/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/ca4743e0-d5b3-4a49-b046-7ccdcb5a3921/12-car-with-lines.png 2000w"
  3841. src="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_400/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/ca4743e0-d5b3-4a49-b046-7ccdcb5a3921/12-car-with-lines.png"
  3842. sizes="100vw"
  3843. alt="How the car looks after a little tweaking of the segments and nodes"
  3844. />
  3845. </a>
  3846.  
  3848. <figcaption class="op-vertical-bottom">
  3849. How the car looks after a little tweaking of the segments and nodes (<a href='https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/ca4743e0-d5b3-4a49-b046-7ccdcb5a3921/12-car-with-lines.png'>View large version</a>)
  3850. </figcaption>
  3852. </figure>
  3853.  
  3854.  
  3855. <h4>8. Drawing The Windows Using Some Primitive Shapes</h4>
  3856.  
  3857. <p>In the side Toolbar, select the Rounded Rectangle tool. Drag on the canvas to create a shape. The size of the shape should fit in the car’s bodywork and look proportionate. No matter how you create it, you will be able to resize it later, so don’t worry much.</p>
  3858.  
  3859. <p><strong>Note:</strong> <em>When you create a shape with strokes and resize it, be sure to check “Scale with object” in the Stroke panel if you want the <strong>stroke to scale in proportion with the object</strong>. I recommend that you visually compare the difference between having this option checked and unchecked when you need to resize an object with a stroke.</em></p>
  3860.  
  3861.  
  3862.  
  3863.  
  3864.  
  3865.  
  3866.  
  3867.  
  3868.  
  3869.  
  3870.  
  3871. <figure class="article__image break-out">
  3872. <a href="https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/df546f95-2056-41db-a67f-cfebc797abc0/scale-with-object.png">
  3873. <img
  3874. srcset="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_400/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/df546f95-2056-41db-a67f-cfebc797abc0/scale-with-object.png 400w,
  3875.        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_800/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/df546f95-2056-41db-a67f-cfebc797abc0/scale-with-object.png 800w,
  3876.        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_1200/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/df546f95-2056-41db-a67f-cfebc797abc0/scale-with-object.png 1200w,
  3877.        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_1600/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/df546f95-2056-41db-a67f-cfebc797abc0/scale-with-object.png 1600w,
  3878.        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_2000/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/df546f95-2056-41db-a67f-cfebc797abc0/scale-with-object.png 2000w"
  3879. src="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_400/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/df546f95-2056-41db-a67f-cfebc797abc0/scale-with-object.png"
  3880. sizes="100vw"
  3881. alt="Make sure this is checked if you plan to resize your artwork, so that it scales the strokes accordingly."
  3882. />
  3883. </a>
  3884.  
  3886. <figcaption class="op-vertical-bottom">
  3887. Make sure this is checked if you plan to resize your artwork, so that it scales the strokes accordingly. (<a href='https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/df546f95-2056-41db-a67f-cfebc797abc0/scale-with-object.png'>View large version</a>)
  3888. </figcaption>
  3890. </figure>
  3891.  
  3892.  
  3893. <p>Once you have placed your rounded rectangle on the canvas, fill it with a blue-ish colour. I’ve used <code>#93BBC1</code>. Next, select it with the Node tool (press <kbd>A</kbd>). You will now see a little orange circle in the top-left corner. If you pull outwards or inwards, you’ll see how the angle in that corner changes. In the top Context toolbar, you can uncheck “Single radius”, and apply the angle you want to each corner of the rectangle individually. <strong>Uncheck it</strong>, and pull inwards on the tiny orange circle in the top-left corner. If you pull, you will be able to round it to a certain percentage, but you can also input the desired value in the input field for it, or even use the slider it comes with (it will show whether you’ve clicked on the little chevron). Let’s apply a value of 100%.</p>
  3894.  
  3895.  
  3896.  
  3897.  
  3898.  
  3899.  
  3900.  
  3901.  
  3902.  
  3903.  
  3904.  
  3905. <figure class="article__image break-out">
  3906. <a href="https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/d6a364f5-a232-4292-b281-eeb4969bd7d0/rounded-rectangle1.png">
  3907. <img
  3908. srcset="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_400/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/d6a364f5-a232-4292-b281-eeb4969bd7d0/rounded-rectangle1.png 400w,
  3909.        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_800/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/d6a364f5-a232-4292-b281-eeb4969bd7d0/rounded-rectangle1.png 800w,
  3910.        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_1200/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/d6a364f5-a232-4292-b281-eeb4969bd7d0/rounded-rectangle1.png 1200w,
  3911.        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_1600/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/d6a364f5-a232-4292-b281-eeb4969bd7d0/rounded-rectangle1.png 1600w,
  3912.        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_2000/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/d6a364f5-a232-4292-b281-eeb4969bd7d0/rounded-rectangle1.png 2000w"
  3913. src="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_400/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/d6a364f5-a232-4292-b281-eeb4969bd7d0/rounded-rectangle1.png"
  3914. sizes="100vw"
  3915. alt=""
  3916. />
  3917. </a>
  3918.  
  3920. <figcaption class="op-vertical-bottom">
  3921. <a href='https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/d6a364f5-a232-4292-b281-eeb4969bd7d0/rounded-rectangle1.png'>View large version</a>
  3922. </figcaption>
  3924. </figure>
  3925.  
  3926.  
  3927.  
  3928.  
  3929.  
  3930.  
  3931.  
  3932.  
  3933.  
  3934.  
  3935.  
  3936.  
  3937. <figure class="article__image break-out">
  3938. <a href="https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/cb5eefc4-2cc8-43bb-9cca-b6c9122b4806/rounded-rectangle2.png">
  3939. <img
  3940. srcset="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_400/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/cb5eefc4-2cc8-43bb-9cca-b6c9122b4806/rounded-rectangle2.png 400w,
  3941.        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_800/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/cb5eefc4-2cc8-43bb-9cca-b6c9122b4806/rounded-rectangle2.png 800w,
  3942.        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_1200/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/cb5eefc4-2cc8-43bb-9cca-b6c9122b4806/rounded-rectangle2.png 1200w,
  3943.        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_1600/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/cb5eefc4-2cc8-43bb-9cca-b6c9122b4806/rounded-rectangle2.png 1600w,
  3944.        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_2000/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/cb5eefc4-2cc8-43bb-9cca-b6c9122b4806/rounded-rectangle2.png 2000w"
  3945. src="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_400/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/cb5eefc4-2cc8-43bb-9cca-b6c9122b4806/rounded-rectangle2.png"
  3946. sizes="100vw"
  3947. alt="How the rounded rectangle primitive shape looks in default mode and how it changes when we uncheck the single radius box. Now we can manipulate the corners individually."
  3948. />
  3949. </a>
  3950.  
  3952. <figcaption class="op-vertical-bottom">
  3953. How the rounded rectangle primitive shape looks in default mode and how it changes when we uncheck the single radius box. Now we can manipulate the corners individually. (<a href='https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/cb5eefc4-2cc8-43bb-9cca-b6c9122b4806/rounded-rectangle2.png'>View large version</a>)
  3954. </figcaption>
  3956. </figure>
  3957.  
  3958.  
  3959. <p>Primitive shapes are not so flexible in terms of vector manipulation (compared to curves and lines), so, in order to apply further changes to such a shape (beyond fill, stroke, corners, width and height), we will need to convert it to curves.</p>
  3960.  
  3961. <p><strong>Note:</strong> <em>Once you convert a primitive shape into curves, there is no way to go back, and there will be no option to manipulate the shape through the little orange stops. If you need further tweaking, you will need to do it with the Corner tool.</em></p>
  3962.  
  3963. <p>Select the rectangle with the Node tool (<kbd>A</kbd>), and in the top Context toolbar, click the button “Convert to Curves”. The bounding box will disappear, and all of the nodes forming the shape will be shown. Also, note how in the Layers panel, the name of the object changes from “Rounded Rectangle” to “Curve”.</p>
  3964.  
  3965. <p>Now you need to manipulate the shape in order to create an object that looks like a car window. Look at the reference picture to get a better idea of how it should look. Also, tweak the rest of the drawn lines in the car, so that it all fits together nicely. Don’t worry if the shapes don’t look perfect (yet). Getting them right is a matter of practice! Using the Pen tool, help yourself with the <kbd>Alt</kbd> and <kbd>Shift</kbd> keys and observe how differently the segment nodes behave. After you have created the front window, go ahead and create the back one, following the same method.</p>
  3966.  
  3967. <p>We also need to create the reflections of the window, which we’ll do by drawing three rectangles, filling them with white color, overlapping them with a bit of offset from one another, and setting the opacity to 50%.</p>
  3968.  
  3969. <p>Place the cursor over the top bounding-box white circle, and when it turns into a curved arrow with two ends, move it to give the rectangles an angle. Create a clipping mask, dragging it over the window shape in the Layers panel as we saw before. You can also do this by following the following alternative methods:</p>
  3970.  
  3971. <ul>
  3972. <li>Under the menu “Layer” &rarr; “Insertion” &rarr; “Insert Inside” the selected window object.</li>
  3973.  
  3974. <li>With the keyboard shortcut <kbd>Ctrl</kbd> + <kbd>X</kbd> (Windows) and <kbd>Cmd</kbd> + <kbd>X</kbd> (Mac), select your window object &rarr; “Edit” &rarr; “Paste Inside” (<kbd>Ctrl</kbd>/<kbd>Cmd</kbd> + <kbd>Alt</kbd> + <kbd>V</kbd>).</li>
  3975. </ul>
  3976.  
  3977. <p>Repeat this for the back window. To add visual interest, you can duplicate the reflections and slightly change the rectangles’ opacities and widths.</p>
  3978.  
  3979. <figure><a href="https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/a03b711e-7e0e-4a71-9738-fd0c723395ac/window-reflections.gif"><img src="https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/a03b711e-7e0e-4a71-9738-fd0c723395ac/window-reflections.gif" width="600" height="375" alt="Create the reflections on the windows, and clip them inside." /></a><figcaption>Create the reflections on the windows, and clip them inside. (<a href="https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/a03b711e-7e0e-4a71-9738-fd0c723395ac/window-reflections.gif">View large version</a>)</figcaption></figure>
  3980.  
  3981. <h4>9. Adding Visual Interest: Halftone Pattern, Shadows And Reflections</h4>
  3982.  
  3983. <p>Before we start with the shadows and reflections, we need to add an extra piece onto the car so that all of the elements look well integrated. Let’s create the piece that sits below the doors. It is a simple rectangle. Place it on the corresponding layer order, so that it looks like the picture below, and keep inserting all of the pieces together so that it looks compact. I will also move a bit the front fender to make the front shorter.</p>
  3984.  
  3985.  
  3986.  
  3987.  
  3988.  
  3989.  
  3990.  
  3991.  
  3992.  
  3993.  
  3994.  
  3995. <figure class="article__image break-out">
  3996. <a href="https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/c642e4c2-3151-4ce6-97f5-cb30ed750c73/13-car-integratedpieces.png">
  3997. <img
  3998. srcset="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_400/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/c642e4c2-3151-4ce6-97f5-cb30ed750c73/13-car-integratedpieces.png 400w,
  3999.        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_800/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/c642e4c2-3151-4ce6-97f5-cb30ed750c73/13-car-integratedpieces.png 800w,
  4000.        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_1200/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/c642e4c2-3151-4ce6-97f5-cb30ed750c73/13-car-integratedpieces.png 1200w,
  4001.        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_1600/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/c642e4c2-3151-4ce6-97f5-cb30ed750c73/13-car-integratedpieces.png 1600w,
  4002.        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_2000/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/c642e4c2-3151-4ce6-97f5-cb30ed750c73/13-car-integratedpieces.png 2000w"
  4003. src="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_400/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/c642e4c2-3151-4ce6-97f5-cb30ed750c73/13-car-integratedpieces.png"
  4004. sizes="100vw"
  4005. alt="The car, once the final bodywork pieces have been placed and tweaks made. We’re getting there!"
  4006. />
  4007. </a>
  4008.  
  4010. <figcaption class="op-vertical-bottom">
  4011. The car, once the final bodywork pieces have been placed and tweaks made. We’re getting there! (<a href='https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/c642e4c2-3151-4ce6-97f5-cb30ed750c73/13-car-integratedpieces.png'>View large version</a>)
  4012. </figcaption>
  4014. </figure>
  4015.  
  4016.  
  4017. <p>Now let’s create the <strong>halftone pattern</strong>.</p>
  4018.  
  4019. <p>Grab the Pen tool (<kbd>P</kbd>) and trace a line on your canvas. In the Stroke panel (you can also do this in the Pen tool’s Context toolbar section for the stroke, at the top), set the size to something like 7 pixels. We can easily change this value later if needed. Select the “Dash” line style, and the rest of the dialog settings should be as follows:</p>
  4020.  
  4021.  
  4022.  
  4023.  
  4024.  
  4025.  
  4026.  
  4027.  
  4028.  
  4029.  
  4030.  
  4031. <figure class="article__image break-out">
  4032. <a href="https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/f533a815-efab-471a-92f7-8acf7479c311/halftone.png">
  4033. <img
  4034. srcset="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_400/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/f533a815-efab-471a-92f7-8acf7479c311/halftone.png 400w,
  4035.        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_800/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/f533a815-efab-471a-92f7-8acf7479c311/halftone.png 800w,
  4036.        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_1200/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/f533a815-efab-471a-92f7-8acf7479c311/halftone.png 1200w,
  4037.        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_1600/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/f533a815-efab-471a-92f7-8acf7479c311/halftone.png 1600w,
  4038.        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_2000/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/f533a815-efab-471a-92f7-8acf7479c311/halftone.png 2000w"
  4039. src="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_400/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/f533a815-efab-471a-92f7-8acf7479c311/halftone.png"
  4040. sizes="100vw"
  4041. alt="Settings for the first part of creating the halftone pattern."
  4042. />
  4043. </a>
  4044.  
  4046. <figcaption class="op-vertical-bottom">
  4047. Settings for the first part of creating the halftone pattern. (<a href='https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/f533a815-efab-471a-92f7-8acf7479c311/halftone.png'>View large version</a>)
  4048. </figcaption>
  4050. </figure>
  4051.  
  4052.  
  4053. <p>Now, duplicate this line, and place the new one below with a bit of an offset to the left.</p>
  4054.  
  4055.  
  4056.  
  4057.  
  4058.  
  4059.  
  4060.  
  4061.  
  4062.  
  4063.  
  4064.  
  4065. <figure >
  4066. <a href="https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/61ec4877-437c-4eed-85cf-290517aa0d73/halftone2.png">
  4067. <img
  4068. srcset="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_400/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/61ec4877-437c-4eed-85cf-290517aa0d73/halftone2.png 400w,
  4069.        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_800/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/61ec4877-437c-4eed-85cf-290517aa0d73/halftone2.png 800w,
  4070.        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_1200/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/61ec4877-437c-4eed-85cf-290517aa0d73/halftone2.png 1200w,
  4071.        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_1600/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/61ec4877-437c-4eed-85cf-290517aa0d73/halftone2.png 1600w,
  4072.        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_2000/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/61ec4877-437c-4eed-85cf-290517aa0d73/halftone2.png 2000w"
  4073. src="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_400/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/61ec4877-437c-4eed-85cf-290517aa0d73/halftone2.png"
  4074. sizes="100vw"
  4075. alt=""
  4076. />
  4077. </a>
  4078.  
  4080. <figcaption class="op-vertical-bottom">
  4081. <a href='https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/61ec4877-437c-4eed-85cf-290517aa0d73/halftone2.png'>View large version</a>
  4082. </figcaption>
  4084. </figure>
  4085.  
  4086.  
  4087. <p>Group both lines, duplicate this group with a Smart copy, and create something like this:</p>
  4088.  
  4089.  
  4090.  
  4091.  
  4092.  
  4093.  
  4094.  
  4095.  
  4096.  
  4097.  
  4098.  
  4099. <figure >
  4100. <a href="https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/e1171ae0-b7ae-4fd5-b6f6-e6f5cc91cfc6/smartcopyhalftone.png">
  4101. <img
  4102. srcset="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_400/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/e1171ae0-b7ae-4fd5-b6f6-e6f5cc91cfc6/smartcopyhalftone.png 400w,
  4103.        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_800/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/e1171ae0-b7ae-4fd5-b6f6-e6f5cc91cfc6/smartcopyhalftone.png 800w,
  4104.        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_1200/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/e1171ae0-b7ae-4fd5-b6f6-e6f5cc91cfc6/smartcopyhalftone.png 1200w,
  4105.        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_1600/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/e1171ae0-b7ae-4fd5-b6f6-e6f5cc91cfc6/smartcopyhalftone.png 1600w,
  4106.        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_2000/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/e1171ae0-b7ae-4fd5-b6f6-e6f5cc91cfc6/smartcopyhalftone.png 2000w"
  4107. src="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_400/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/e1171ae0-b7ae-4fd5-b6f6-e6f5cc91cfc6/smartcopyhalftone.png"
  4108. sizes="100vw"
  4109. alt="Smart copy the first two lines, and create the whole pattern."
  4110. />
  4111. </a>
  4112.  
  4114. <figcaption class="op-vertical-bottom">
  4115. Smart copy the first two lines, and create the whole pattern. (<a href='https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/e1171ae0-b7ae-4fd5-b6f6-e6f5cc91cfc6/smartcopyhalftone.png'>View large version</a>)
  4116. </figcaption>
  4118. </figure>
  4119.  
  4120.  
  4121. <p>When you drag a selection in Affinity Designer, only objects that are completely within the selection area will be selected. If you want to select all objects without having to drag over all of them completely, you have the following options:</p>
  4122.  
  4123. <ul>
  4124. <li>Mac: Holding the <kbd>⌃</kbd> (<kbd>Ctrl</kbd>) key will allow you to select all objects touching the selection marquee as you draw it.</li>
  4125.  
  4126. <li>Windows: Click and hold the left mouse button, start dragging a selection, and then click and hold the right mouse button as well. As you are holding both buttons, all objects touching the selection marquee will be selected.</li>
  4127.  
  4128. <li>Alternatively, you can make this behavior a global preference. On Mac, go to “Affinity Designer” &rarr; “Preferences” &rarr; “Tools”, and check “Select object when intersects with selection marquee”. On Windows, go to “Edit” &rarr; “Preferences” &rarr; “Tools”, and check “Select object when intersects with selection marquee”.</li>
  4129. </ul>
  4130.  
  4131. <p>To make the illustration more interesting, we are going to vary the beginning and end of some of the lines a bit. To do this, we select the Node tool (<kbd>A</kbd>), and move the nodes a bit inwards.</p>
  4132.  
  4133. <p>It should now look like this:</p>
  4134.  
  4135.  
  4136.  
  4137.  
  4138.  
  4139.  
  4140.  
  4141.  
  4142.  
  4143.  
  4144.  
  4145. <figure >
  4146. <a href="https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/36b055bf-4ce2-44ad-9191-52aaecf8bf5a/halftone3.png">
  4147. <img
  4148. srcset="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_400/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/36b055bf-4ce2-44ad-9191-52aaecf8bf5a/halftone3.png 400w,
  4149.        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_800/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/36b055bf-4ce2-44ad-9191-52aaecf8bf5a/halftone3.png 800w,
  4150.        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_1200/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/36b055bf-4ce2-44ad-9191-52aaecf8bf5a/halftone3.png 1200w,
  4151.        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_1600/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/36b055bf-4ce2-44ad-9191-52aaecf8bf5a/halftone3.png 1600w,
  4152.        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_2000/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/36b055bf-4ce2-44ad-9191-52aaecf8bf5a/halftone3.png 2000w"
  4153. src="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_400/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/36b055bf-4ce2-44ad-9191-52aaecf8bf5a/halftone3.png"
  4154. sizes="100vw"
  4155. alt=""
  4156. />
  4157. </a>
  4158.  
  4160. <figcaption class="op-vertical-bottom">
  4161. <a href='https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/36b055bf-4ce2-44ad-9191-52aaecf8bf5a/halftone3.png'>View large version</a>
  4162. </figcaption>
  4164. </figure>
  4165.  
  4166.  
  4167. <p>To apply the pattern to our design, make sure everything is grouped, copy and paste it into our car artwork, reduce its opacity to 30%, and also reduce the size (making sure “Scale with object” is checked in the Stroke panel). We will then create a clipping mask. It is important to keep consistency in the angle, color and size of this pattern throughout the illustration.</p>
  4168.  
  4169. <figure><a href="https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/fe5e7630-8f70-4167-a6ce-9b51f384d49f/halftonemask.gif"><img src="https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/fe5e7630-8f70-4167-a6ce-9b51f384d49f/halftonemask.gif" width="600" height="375" alt="Applying the halftone mask." /></a><figcaption>Applying the halftone mask (<a href="https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/fe5e7630-8f70-4167-a6ce-9b51f384d49f/halftonemask.gif">View large version</a>)</figcaption></figure>
  4170.  
  4171. <p>Now, apply the halftone pattern to the back fender and to the car’s side; make sure to create a placeholder for it first, be it the fender itself or a new shape. Make some tweaks if you need to adapt the pattern to your drawing in a harmonious way. You can change the overall size, the dots’ size, the transparency, the angle and so on, but try to be consistent when applying these changes to the pattern bits.</p>
  4172.  
  4173. <p>For the shadow below the windows, I drew a curve to be the placeholder, and applied the color <code>#CFA204</code> so that it looks darker.</p>
  4174.  
  4175. <h4>10. Creating The Remaining Elements Of The Car</h4>
  4176.  
  4177. <p>Now, it’s all about creating the rest of the elements that make up the car: the bumpers, the back wheel and the surf board, plus the design stickers.</p>
  4178.  
  4179. <ul>
  4180. <li><strong>The front and back lights</strong><br />
  4181. For the front light, switch to the Segment tool and draw the shape. Then we need to rotate it a bit and place it somewhere below the car’s main bodywork. The same can be done for the back light but using the Rectangle tool. The colors are <code>#FFDA9D</code> for the front light and <code>#FF0031</code> for the back light.</li>
  4182. </ul>
  4183.  
  4184. <figure><a href="https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/6867a304-9fa6-48cc-93e8-64559e8756c6/frontlight.gif"><img src="https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/6867a304-9fa6-48cc-93e8-64559e8756c6/frontlight.gif" width="600" height="375" alt="Creating the front light" /></a><figcaption>Creating the front light (<a href="https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/6867a304-9fa6-48cc-93e8-64559e8756c6/frontlight.gif">View large version</a>)</figcaption></figure>
  4185.  
  4186. <ul>
  4187. <li><strong>Surfboard</strong><br />
  4188. To create the surfboard, we will use the Ellipse tool and draw a long ellipse. Convert it to curves and pull up the lower segment, adjusting a bit the handles to give it the ideal shape.</li>
  4189. </ul>
  4190.  
  4191. <figure><a href="https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/de3e0e4d-35b0-47c5-af72-1239cfb3253b/surfboard.gif"><img src="https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/de3e0e4d-35b0-47c5-af72-1239cfb3253b/surfboard.gif" width="600" height="375" alt="Creating the surf board" /></a><figcaption>Creating the surf board (<a href="https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/de3e0e4d-35b0-47c5-af72-1239cfb3253b/surfboard.gif">View large version</a>)</figcaption></figure>
  4192.  
  4193. <p>Now, just create two small rounded rectangles, with a little extra line on top for the board’s rack. Place them in a layer behind the car’s main body shape.</p>
  4194.  
  4195.  
  4196.  
  4197.  
  4198.  
  4199.  
  4200.  
  4201.  
  4202.  
  4203.  
  4204.  
  4205. <figure class="article__image break-out">
  4206. <a href="https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/606f1fc7-6b22-4fa4-9e93-8927fb19e480/rack.png">
  4207. <img
  4208. srcset="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_400/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/606f1fc7-6b22-4fa4-9e93-8927fb19e480/rack.png 400w,
  4209.        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_800/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/606f1fc7-6b22-4fa4-9e93-8927fb19e480/rack.png 800w,
  4210.        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_1200/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/606f1fc7-6b22-4fa4-9e93-8927fb19e480/rack.png 1200w,
  4211.        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_1600/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/606f1fc7-6b22-4fa4-9e93-8927fb19e480/rack.png 1600w,
  4212.        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_2000/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/606f1fc7-6b22-4fa4-9e93-8927fb19e480/rack.png 2000w"
  4213. src="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_400/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/606f1fc7-6b22-4fa4-9e93-8927fb19e480/rack.png"
  4214. sizes="100vw"
  4215. alt="Board rack pieces"
  4216. />
  4217. </a>
  4218.  
  4220. <figcaption class="op-vertical-bottom">
  4221. Board rack pieces (<a href='https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/606f1fc7-6b22-4fa4-9e93-8927fb19e480/rack.png'>View large version</a>)
  4222. </figcaption>
  4224. </figure>
  4225.  
  4226.  
  4227. <p>With the Pen tool, add the rudder. Its color is <code>#B2E3EF</code>. And for the stroke, use a 6-pixel width and set the color to <code>#131000</code>.</p>
  4228.  
  4229. <ul>
  4230. <li><strong>Spare wheel</strong><br />
  4231. Now let’s create the the spare wheel! Switch to the Rounded Rectangle tool. Drag over the canvas to draw a shape. Color it <code>#34646C</code>, and make the stroke <code>#131000</code> and 8 pixels in size. The size of the spare wheel should fit the proportions of your car and should have the same diameter as the other wheels, or perhaps just a bit smaller. Pull the orange dots totally inwards, and give it a 45-degree angle. For the rack that holds the wheel, create a small piece with the Rectangle tool, and give it the same 45-degree angle, color it <code>#4A8F99</code>, and make the stroke <code>#131000</code> and 4.5 pixels in size. Create the last piece that rests over the car in the same way, with a color of <code>#34646C</code>, and a stroke that is <code>#131000</code> and 4.5 pixels in size.</li>
  4232. </ul>
  4233.  
  4234. <p>Lastly, let’s create a shadow inside the wheel to add some more interest. For this, we’ll create a clipping mask and insert an ellipse shape with a color of <code>#194147</code>, without a stroke.</p>
  4235.  
  4236. <p><strong>Note:</strong> <em>We may want to create the same shadow effect for the car wheels. Use the Rectangle tool and a color of <code>#312A00</code>, create a clipping mask, and insert it in the wheel shape, placing it halfway.</em></p>
  4237.  
  4238.  
  4239.  
  4240.  
  4241.  
  4242.  
  4243.  
  4244.  
  4245.  
  4246.  
  4247.  
  4248. <figure >
  4249. <a href="https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/7fc4b860-d5e7-4ef5-a706-2001513227b2/spare-wheel.png">
  4250. <img
  4251. srcset="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_400/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/7fc4b860-d5e7-4ef5-a706-2001513227b2/spare-wheel.png 400w,
  4252.        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_800/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/7fc4b860-d5e7-4ef5-a706-2001513227b2/spare-wheel.png 800w,
  4253.        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_1200/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/7fc4b860-d5e7-4ef5-a706-2001513227b2/spare-wheel.png 1200w,
  4254.        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_1600/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/7fc4b860-d5e7-4ef5-a706-2001513227b2/spare-wheel.png 1600w,
  4255.        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_2000/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/7fc4b860-d5e7-4ef5-a706-2001513227b2/spare-wheel.png 2000w"
  4256. src="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_400/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/7fc4b860-d5e7-4ef5-a706-2001513227b2/spare-wheel.png"
  4257. sizes="100vw"
  4258. alt="Three simple shapes to draw the spare wheel and its rack"
  4259. />
  4260. </a>
  4261.  
  4263. <figcaption class="op-vertical-bottom">
  4264. Three simple shapes to draw the spare wheel and its rack (<a href='https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/7fc4b860-d5e7-4ef5-a706-2001513227b2/spare-wheel.png'>View large version</a>)
  4265. </figcaption>
  4267. </figure>
  4268.  
  4269.  
  4270. <ul>
  4271. <li><strong>Bumpers</strong><br />
  4272. For the bumpers, we will apply the boolean operation “add” to two basic shapes and then clip-mask a shadow, just as we did for the wheels.</li>
  4273. </ul>
  4274.  
  4275. <p>Boolean operations are displayed in the section of icons labeled “Geometry” (Mac) and “Operations” (Windows). (Yes, the label names are inconsistent, but the Affinity team will likely update them in the near future, and one of the labels will become the default for both operating systems.) If you don’t see them in the upper toolbar, go to “View” &rarr; “Customize Toolbar”, and drag and drop them into the toolbar.</p>
  4276.  
  4277. <p><strong>Important:</strong> If you want the operation to be non-destructive, hold the Alt key while clicking on the “Add” icon (to combine the two basic shapes).</p>
  4278.  
  4279.  
  4280.  
  4281.  
  4282.  
  4283.  
  4284.  
  4285.  
  4286.  
  4287.  
  4288.  
  4289. <figure >
  4290. <a href="https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/dcc188fa-a469-488a-a0bc-0c80c351d056/geometry.png">
  4291. <img
  4292. srcset="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_400/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/dcc188fa-a469-488a-a0bc-0c80c351d056/geometry.png 400w,
  4293.        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_800/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/dcc188fa-a469-488a-a0bc-0c80c351d056/geometry.png 800w,
  4294.        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_1200/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/dcc188fa-a469-488a-a0bc-0c80c351d056/geometry.png 1200w,
  4295.        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_1600/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/dcc188fa-a469-488a-a0bc-0c80c351d056/geometry.png 1600w,
  4296.        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_2000/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/dcc188fa-a469-488a-a0bc-0c80c351d056/geometry.png 2000w"
  4297. src="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_400/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/dcc188fa-a469-488a-a0bc-0c80c351d056/geometry.png"
  4298. sizes="100vw"
  4299. alt="Boolean operations: Add, Subtract, Intersect, Divide, Combine."
  4300. />
  4301. </a>
  4302.  
  4304. <figcaption class="op-vertical-bottom">
  4305. Boolean operations: Add, Subtract, Intersect, Divide, Combine. (<a href='https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/dcc188fa-a469-488a-a0bc-0c80c351d056/geometry.png'>View large version</a>)
  4306. </figcaption>
  4308. </figure>
  4309.  
  4310.  
  4311.  
  4312.  
  4313.  
  4314.  
  4315.  
  4316.  
  4317.  
  4318.  
  4319.  
  4320.  
  4321. <figure class="article__image break-out">
  4322. <a href="https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/57987244-ea91-4dba-837f-e52626f61926/single-shape-from-two-shapes.png">
  4323. <img
  4324. srcset="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_400/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/57987244-ea91-4dba-837f-e52626f61926/single-shape-from-two-shapes.png 400w,
  4325.        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_800/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/57987244-ea91-4dba-837f-e52626f61926/single-shape-from-two-shapes.png 800w,
  4326.        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_1200/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/57987244-ea91-4dba-837f-e52626f61926/single-shape-from-two-shapes.png 1200w,
  4327.        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_1600/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/57987244-ea91-4dba-837f-e52626f61926/single-shape-from-two-shapes.png 1600w,
  4328.        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_2000/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/57987244-ea91-4dba-837f-e52626f61926/single-shape-from-two-shapes.png 2000w"
  4329. src="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_400/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/57987244-ea91-4dba-837f-e52626f61926/single-shape-from-two-shapes.png"
  4330. sizes="100vw"
  4331. alt="Applying the (destructive) Add operation to create a single shape from two shapes."
  4332. />
  4333. </a>
  4334.  
  4336. <figcaption class="op-vertical-bottom">
  4337. Applying the (destructive) Add operation to create a single shape from two shapes. (<a href='https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/57987244-ea91-4dba-837f-e52626f61926/single-shape-from-two-shapes.png'>View large version</a>)
  4338. </figcaption>
  4340. </figure>
  4341.  
  4342.  
  4343. <p><strong>Note:</strong> <em>If you try to paste the “shadow” object inside the bumper, it will <strong>only</strong> work if the bumper is one whole object (a destructive operation). So, if you used <kbd>Alt</kbd> + “Add”, this will not work now. However, you can still work around this by converting the Compound shape (the result of a non-destructive operation that is a group of two objects) to one Curve (one whole vector object). You just need to click on the Compound shape, then in the menu go to “Layer” &rarr; “Convert to Curves” (or use the key combination <kbd>Ctrl</kbd> + <kbd>Enter</kbd>).</em></p>
  4344.  
  4345. <ul>
  4346. <li><p><strong>Back window</strong><br />
  4347. We are still missing the back window, which we will create with the Pen tool, and the decoration for the car. For the two colored stripes, we need the Square tool and then clip-mask these two rectangles into the main bodywork. The size is 30 &#215; 380 pixels, and the colors are <code>#0AC8CE</code> and <code>#FF6500</code>. Clip them by making sure you’ve put them on the right layer, so that the dark lines we drew before are <strong>above them</strong>.</p></p></li>
  4348.  
  4349. <li><p><strong>Number 56</strong><br />
  4350. For the number “56” decoration, use the Artistic Text tool (“T”), and type in “56”. Choose a nice font that matches the style of the illustration, or <a href="http://www.fontsec.com/fonts/51416/phosphateinline.html">try the one I’ve used</a></a>.</p></p></li>
  4351. </ul>
  4352.  
  4353. <p>The color for the text object is <code>#FFF3AD</code>.</p>
  4354.  
  4355. <p>(I added an extra squared shape behind the back fender, which will look like the end of the exhaust pipe. The color is <code>#000000</code>.)</p>
  4356.  
  4357. <ul>
  4358. <li><strong>Color strips</strong><br />
  4359. Now that we’ve done this, check the color stripes and the window they overlap with. As you can see (and because we put some transparency in the window glass), the orange stripe is <strong>visible through it</strong>. Let’s use some Boolean power again to fix this.</li>
  4360. </ul>
  4361.  
  4362.  
  4363.  
  4364.  
  4365.  
  4366.  
  4367.  
  4368.  
  4369.  
  4370.  
  4371.  
  4372. <figure class="article__image break-out">
  4373. <a href="https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/d619a22a-3da9-4019-9262-1c0741207d1f/almost-car.png">
  4374. <img
  4375. srcset="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_400/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/d619a22a-3da9-4019-9262-1c0741207d1f/almost-car.png 400w,
  4376.        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_800/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/d619a22a-3da9-4019-9262-1c0741207d1f/almost-car.png 800w,
  4377.        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_1200/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/d619a22a-3da9-4019-9262-1c0741207d1f/almost-car.png 1200w,
  4378.        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_1600/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/d619a22a-3da9-4019-9262-1c0741207d1f/almost-car.png 1600w,
  4379.        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_2000/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/d619a22a-3da9-4019-9262-1c0741207d1f/almost-car.png 2000w"
  4380. src="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_400/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/d619a22a-3da9-4019-9262-1c0741207d1f/almost-car.png"
  4381. sizes="100vw"
  4382. alt="Bumpers and exhauster added. Check out the overlapped window and the orange stripe!"
  4383. />
  4384. </a>
  4385.  
  4387. <figcaption class="op-vertical-bottom">
  4388. Bumpers and exhauster added. Check out the overlapped window and the orange stripe! (<a href='https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/d619a22a-3da9-4019-9262-1c0741207d1f/almost-car.png'>View large version</a>)
  4389. </figcaption>
  4391. </figure>
  4392.  
  4393.  
  4394. <p>Duplicate the window object. Select both the window object (the one you just duplicated) and the orange stripe in the Layers panel. Apply a “subtract” operation.</p>
  4395.  
  4396.  
  4397.  
  4398.  
  4399.  
  4400.  
  4401.  
  4402.  
  4403.  
  4404.  
  4405.  
  4406. <figure >
  4407. <a href="https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/ec089a03-5e01-4727-8f38-a121410da6cc/window-stripe1-new.png">
  4408. <img
  4409. srcset="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_400/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/ec089a03-5e01-4727-8f38-a121410da6cc/window-stripe1-new.png 400w,
  4410.        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_800/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/ec089a03-5e01-4727-8f38-a121410da6cc/window-stripe1-new.png 800w,
  4411.        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_1200/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/ec089a03-5e01-4727-8f38-a121410da6cc/window-stripe1-new.png 1200w,
  4412.        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_1600/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/ec089a03-5e01-4727-8f38-a121410da6cc/window-stripe1-new.png 1600w,
  4413.        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_2000/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/ec089a03-5e01-4727-8f38-a121410da6cc/window-stripe1-new.png 2000w"
  4414. src="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_400/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/ec089a03-5e01-4727-8f38-a121410da6cc/window-stripe1-new.png"
  4415. sizes="70vw"
  4416. alt="Stage 1, before the subtract operation."
  4417. />
  4418. </a>
  4419.  
  4421. <figcaption class="op-vertical-bottom">
  4422. Stage 1, before the subtract operation. (<a href='https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/8ba7c520-df98-407c-b5d2-8bb13bef9792/window-stripe1.png'>View large version</a>)
  4423. </figcaption>
  4425. </figure>
  4426.  
  4427.  
  4428.  
  4429.  
  4430.  
  4431.  
  4432.  
  4433.  
  4434.  
  4435.  
  4436.  
  4437.  
  4438. <figure >
  4439. <a href="https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/f72b1ece-b4fd-49ff-ab64-c8d55a8015e3/window-stripe2-new.png">
  4440. <img
  4441. srcset="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_400/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/5ea231b6-8e2c-4eb8-8b1c-8b3b90875e5a/window-stripe2-1000.png 400w,
  4442.        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_800/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/5ea231b6-8e2c-4eb8-8b1c-8b3b90875e5a/window-stripe2-1000.png 800w,
  4443.        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_1200/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/5ea231b6-8e2c-4eb8-8b1c-8b3b90875e5a/window-stripe2-1000.png 1200w,
  4444.        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_1600/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/5ea231b6-8e2c-4eb8-8b1c-8b3b90875e5a/window-stripe2-1000.png 1600w,
  4445.        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_2000/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/5ea231b6-8e2c-4eb8-8b1c-8b3b90875e5a/window-stripe2-1000.png 2000w"
  4446. src="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_400/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/5ea231b6-8e2c-4eb8-8b1c-8b3b90875e5a/window-stripe2-1000.png"
  4447. sizes="70vw"
  4448. alt="tage 2, once the subtract operation is applied."
  4449. />
  4450. </a>
  4451.  
  4453. <figcaption class="op-vertical-bottom">
  4454. Stage 2, once the subtract operation is applied. (<a href='https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/ba4dd967-8aa5-40b2-9d53-d4288657f247/window-stripe2.png'>View large version</a>)
  4455. </figcaption>
  4457. </figure>
  4458.  
  4459.  
  4460. <p>Now, the orange stripe has the perfect shape, fitting the window in such a way that they don’t overlap.</p>
  4461.  
  4462.  
  4463.  
  4464.  
  4465.  
  4466.  
  4467.  
  4468.  
  4469.  
  4470.  
  4471.  
  4472. <figure >
  4473. <a href="https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/7b99ea04-ba78-4520-83d8-967904858075/stripe-window-boolean.png">
  4474. <img
  4475. srcset="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_400/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/7b99ea04-ba78-4520-83d8-967904858075/stripe-window-boolean.png 400w,
  4476.        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_800/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/7b99ea04-ba78-4520-83d8-967904858075/stripe-window-boolean.png 800w,
  4477.        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_1200/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/7b99ea04-ba78-4520-83d8-967904858075/stripe-window-boolean.png 1200w,
  4478.        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_1600/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/7b99ea04-ba78-4520-83d8-967904858075/stripe-window-boolean.png 1600w,
  4479.        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_2000/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/7b99ea04-ba78-4520-83d8-967904858075/stripe-window-boolean.png 2000w"
  4480. src="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_400/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/7b99ea04-ba78-4520-83d8-967904858075/stripe-window-boolean.png"
  4481. sizes="70vw"
  4482. alt="Stripe and window with subtraction operation applied."
  4483. />
  4484. </a>
  4485.  
  4487. <figcaption class="op-vertical-bottom">
  4488. Stripe and window with subtraction operation applied. (<a href='https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/7b99ea04-ba78-4520-83d8-967904858075/stripe-window-boolean.png'>View large version</a>)
  4489. </figcaption>
  4491. </figure>
  4492.  
  4493.  
  4494. <ul>
  4495. <li><strong>Smoke</strong><br />
  4496. To create the <strong>smoke</strong> from the exhaust, draw a circle with a white stroke, 5.5 pixels in size and no fill. Transform it to curves and break one of its points. From the bottom node, trace a straight line with the Pen tool.</li>
  4497. </ul>
  4498.  
  4499. <p>Duplicate this “broken” circle, and resize to smaller circles, and flip and place them so that they look like this:</p>
  4500.  
  4501.  
  4502.  
  4503.  
  4504.  
  4505.  
  4506.  
  4507.  
  4508.  
  4509.  
  4510.  
  4511. <figure class="article__image break-out">
  4512. <a href="https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/64055ff5-709f-426b-af35-4dd4de02d36e/exhauster-smoke.png">
  4513. <img
  4514. srcset="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_400/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/64055ff5-709f-426b-af35-4dd4de02d36e/exhauster-smoke.png 400w,
  4515.        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_800/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/64055ff5-709f-426b-af35-4dd4de02d36e/exhauster-smoke.png 800w,
  4516.        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_1200/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/64055ff5-709f-426b-af35-4dd4de02d36e/exhauster-smoke.png 1200w,
  4517.        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_1600/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/64055ff5-709f-426b-af35-4dd4de02d36e/exhauster-smoke.png 1600w,
  4518.        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_2000/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/64055ff5-709f-426b-af35-4dd4de02d36e/exhauster-smoke.png 2000w"
  4519. src="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_400/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/64055ff5-709f-426b-af35-4dd4de02d36e/exhauster-smoke.png"
  4520. sizes="100vw"
  4521. alt="Creating the exhaust smoke"
  4522. />
  4523. </a>
  4524.  
  4526. <figcaption class="op-vertical-bottom">
  4527. Creating the exhaust smoke (<a href='https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/64055ff5-709f-426b-af35-4dd4de02d36e/exhauster-smoke.png'>View large version</a>)
  4528. </figcaption>
  4530. </figure>
  4531.  
  4532.  
  4533. <p><strong>Note:</strong> <em>Now that the car is finished, group all of its layers together. It will be much easier to keep working if you do so!</em></p>
  4534.  
  4535. <h4>11. Creating The Ground And The Background Elements.</h4>
  4536.  
  4537. <ul>
  4538. <li><strong>Ground</strong><br />
  4539. Let’s trace a simple line for the ground, and add two bits breaking it in order to create visual interest and suggest a bit of movement. We also want to add an extra piece to create the ground. For this, we will use the Rectangle tool and draw a rectangle with a gradient color of <code>#008799</code> for the left stop and <code>#81BEC7</code> for the right stop. Give it 30% opacity.</li>
  4540. </ul>
  4541.  
  4542.  
  4543.  
  4544.  
  4545.  
  4546.  
  4547.  
  4548.  
  4549.  
  4550.  
  4551.  
  4552. <figure class="article__image break-out">
  4553. <a href="https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/30dd3816-8849-41ad-8e86-06d1751ebf9e/17-gradient-floor.png">
  4554. <img
  4555. srcset="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_400/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/30dd3816-8849-41ad-8e86-06d1751ebf9e/17-gradient-floor.png 400w,
  4556.        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_800/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/30dd3816-8849-41ad-8e86-06d1751ebf9e/17-gradient-floor.png 800w,
  4557.        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_1200/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/30dd3816-8849-41ad-8e86-06d1751ebf9e/17-gradient-floor.png 1200w,
  4558.        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_1600/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/30dd3816-8849-41ad-8e86-06d1751ebf9e/17-gradient-floor.png 1600w,
  4559.        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_2000/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/30dd3816-8849-41ad-8e86-06d1751ebf9e/17-gradient-floor.png 2000w"
  4560. src="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_400/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/30dd3816-8849-41ad-8e86-06d1751ebf9e/17-gradient-floor.png"
  4561. sizes="100vw"
  4562. alt="Gradient for the ground piece and the grouped car layers for a clean view in the Layers panel."
  4563. />
  4564. </a>
  4565.  
  4567. <figcaption class="op-vertical-bottom">
  4568. Gradient for the ground piece and the grouped car layers for a clean view in the Layers panel. (<a href='https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/30dd3816-8849-41ad-8e86-06d1751ebf9e/17-gradient-floor.png'>View large version</a>)
  4569. </figcaption>
  4571. </figure>
  4572.  
  4573.  
  4574. <ul>
  4575. <li><strong>Clouds</strong><br />
  4576. For the clouds, select the Cloud tool from the list of (primitive) vector shapes. Draw a cloud by holding Shift to keep the proportions. Make it white. Transform it into curves, and with the Node tool (<kbd>A</kbd>) select the bottom nodes and delete them. Sub-select the bottom-left and bottom-right nodes (after deleting all of the others), and then in the Context toolbar, select “Convert to Sharp” in the Convert section. This will make your bottom segment straight. Apply some transparency with the Transparency tool (<kbd>Y</kbd>), and duplicate this cloud. Place the clouds in your drawing, spread apart as you wish and in different sizes.</li>
  4577. </ul>
  4578.  
  4579. <p>My clouds have 12 bubbles and an inner radius of 82%. You can do the same or change these values to your liking.</p>
  4580.  
  4581. <figure><a href="https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/34b65b64-d2fe-41d8-9f7f-1f6c7e263864/clouds.gif"><img src="https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/34b65b64-d2fe-41d8-9f7f-1f6c7e263864/clouds.gif" width="600" height="375" alt="Creating the clouds with the Cloud tool and the Transparency tool" /></a><figcaption>Creating the clouds with the Cloud tool and the Transparency tool (<a href="https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/34b65b64-d2fe-41d8-9f7f-1f6c7e263864/clouds.gif">View large version</a>)</figcaption></figure>
  4582.  
  4583. <ul>
  4584. <li><strong>Palm trees</strong><br />
  4585. To create the palm trees, use the Crescent tool from the list of primitive shapes on the left. Give it a gradient color, with a left stop of <code>#F05942</code> and a right stop of <code>#D15846</code>.</li>
  4586. </ul>
  4587.  
  4588. <p>Drag to draw the crescent shape. Move its center of rotation to the bottom of the bounding box, and give it a -60-degree angle.</p>
  4589.  
  4590. <p>The center of rotation can be made visible in the Contextual toolbar section for the Move (and Node) tool. It looks like a little crosshair icon. When you click on it, the crosshair for moving the rotation center of an object will show. Duplicate it, either via <kbd>Cmd</kbd> + <kbd>C</kbd> and <kbd>Cmd</kbd> + <kbd>V</kbd> (Mac) or <kbd>Ctrl</kbd> + <kbd>C</kbd> and <kbd>Ctrl</kbd> + <kbd>V</kbd> (Windows), or by clicking and then <kbd>Alt</kbd> + dragging on the object, and move the angle of the new crescent to -96 degrees. Make it a bit smaller. Copy the two shapes and flip them horizontally.</p>
  4591.  
  4592. <p>I also created and extra crescent.</p>
  4593.  
  4594. <figure><a href="https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/a8a0abee-c070-4b23-9998-12c46a0555e8/palm1.gif"><img src="https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/a8a0abee-c070-4b23-9998-12c46a0555e8/palm1.gif" width="600" height="375" alt="Creating the palm leaves" /></a><figcaption>Create the palm leaves (<a href="https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/a8a0abee-c070-4b23-9998-12c46a0555e8/palm1.gif">View large version</a>)</figcaption></figure>
  4595.  
  4596. <p>To create the indentations on the leaves, transform the object to curves, add a node with the Node tool, and pull inwards. To make the vortex sharp, use “Convert” &rarr; “Sharp”.</p>
  4597.  
  4598. <figure><a href="https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/b0eb7a64-952f-4c2b-978b-fd11c9c87275/palm2.gif"><img src="https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/b0eb7a64-952f-4c2b-978b-fd11c9c87275/palm2.gif" width="600" height="375" alt="Creating the leaves’ indentations" /></a><figcaption>Creating the leaves’ indentations (<a href="https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/b0eb7a64-952f-4c2b-978b-fd11c9c87275/palm2.gif">View large version</a>)</figcaption></figure>
  4599.  
  4600. <p>Create the trunk of the palm tree with the Pen tool, group all of the shapes together, and apply an “add” boolean. This way, all of the shapes will transform into just one. Apply a 60% opacity to it.</p>
  4601.  
  4602.  
  4603.  
  4604.  
  4605.  
  4606.  
  4607.  
  4608.  
  4609.  
  4610.  
  4611.  
  4612. <figure >
  4613. <a href="https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/fbbb670d-a3b5-45f0-ae33-74dbd7ba0b29/joint-palmtree.png">
  4614. <img
  4615. srcset="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_400/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/fbbb670d-a3b5-45f0-ae33-74dbd7ba0b29/joint-palmtree.png 400w,
  4616.        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_800/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/fbbb670d-a3b5-45f0-ae33-74dbd7ba0b29/joint-palmtree.png 800w,
  4617.        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_1200/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/fbbb670d-a3b5-45f0-ae33-74dbd7ba0b29/joint-palmtree.png 1200w,
  4618.        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_1600/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/fbbb670d-a3b5-45f0-ae33-74dbd7ba0b29/joint-palmtree.png 1600w,
  4619.        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_2000/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/fbbb670d-a3b5-45f0-ae33-74dbd7ba0b29/joint-palmtree.png 2000w"
  4620. src="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_400/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/fbbb670d-a3b5-45f0-ae33-74dbd7ba0b29/joint-palmtree.png"
  4621. sizes="100vw"
  4622. alt="The palm tree once the Add boolean operation has been applied."
  4623. />
  4624. </a>
  4625.  
  4627. <figcaption class="op-vertical-bottom">
  4628. The palm tree once the Add boolean operation has been applied (<a href='https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/fbbb670d-a3b5-45f0-ae33-74dbd7ba0b29/joint-palmtree.png'>View large version</a>)
  4629. </figcaption>
  4631. </figure>
  4632.  
  4633.  
  4634. <p>Duplicate the tree shape several times, changing the sizes and tweaking to make the trees slightly different from one another. (Making them exactly the same would result in a less interesting image.)</p>
  4635.  
  4636. <p>The last thing we need to make is the sun.</p>
  4637.  
  4638. <ul>
  4639. <li><strong>The sun</strong><br />
  4640. For this, simply draw an ellipse and apply a color of <code>#FFFFBA</code> to it. Apply a transparency with the Transparency tool (<kbd>Y</kbd>), where the bottom is transparent and gets opaque at the top.</li>
  4641. </ul>
  4642.  
  4643.  
  4644.  
  4645.  
  4646.  
  4647.  
  4648.  
  4649.  
  4650.  
  4651.  
  4652.  
  4653. <figure class="article__image break-out">
  4654. <a href="https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/31e2fada-5b56-430c-a296-6ba0cbe9b2fe/sun.png">
  4655. <img
  4656. srcset="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_400/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/31e2fada-5b56-430c-a296-6ba0cbe9b2fe/sun.png 400w,
  4657.        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_800/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/31e2fada-5b56-430c-a296-6ba0cbe9b2fe/sun.png 800w,
  4658.        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_1200/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/31e2fada-5b56-430c-a296-6ba0cbe9b2fe/sun.png 1200w,
  4659.        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_1600/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/31e2fada-5b56-430c-a296-6ba0cbe9b2fe/sun.png 1600w,
  4660.        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_2000/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/31e2fada-5b56-430c-a296-6ba0cbe9b2fe/sun.png 2000w"
  4661. src="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_400/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/31e2fada-5b56-430c-a296-6ba0cbe9b2fe/sun.png"
  4662. sizes="100vw"
  4663. alt="Transparency applied to the sun shape"
  4664. />
  4665. </a>
  4666.  
  4668. <figcaption class="op-vertical-bottom">
  4669. Transparency applied to the sun shape (<a href='https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/31e2fada-5b56-430c-a296-6ba0cbe9b2fe/sun.png'>View large version</a>)
  4670. </figcaption>
  4672. </figure>
  4673.  
  4674.  
  4675. <p>Now we will add some detail by overlapping several rounded rectangles over the sun circle and subtracting them (click <kbd>Alt</kbd> for a non-destructive action, if you prefer).</p>
  4676.  
  4677. <figure><a href="https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/8682f945-ffc3-4eca-9ecc-911f664e6003/sun-subtract.gif"><img src="https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/8682f945-ffc3-4eca-9ecc-911f664e6003/sun-subtract.gif" width="600" height="375" alt="Applying a subtract operation" /></a><figcaption>Applying a subtract operation (<a href="https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/8682f945-ffc3-4eca-9ecc-911f664e6003/sun-subtract.gif">View large version</a>)</figcaption></figure>
  4678.  
  4679. <p>Place your sun in the scene, and we are done!</p>
  4680.  
  4681. <h4>12. A Note On The Stacking Order (And Naming Of Layers)</h4>
  4682.  
  4683. <p>While you work, and as the number of objects (layers) grows, which will also make your illustration more and more complex, keep in mind the <strong>stacking order</strong> of your layers. The sooner you start naming the layers <strong>and</strong> placing them in the right order, the better. Also, lock those layers that you’re done with (especially for things such as the background), so that they don’t get in the way as you work.</p>
  4684.  
  4685. <p>In this illustration, the order of elements from bottom to top is:</p>
  4686.  
  4687. <ul>
  4688. <li>background,</li>
  4689. <li>ground,</li>
  4690. <li>sun,</li>
  4691. <li>clouds,</li>
  4692. <li>palm trees,</li>
  4693. <li>car.</li>
  4694. </ul>
  4695.  
  4696. <h3>Conclusion</h3>
  4697.  
  4698. <p>I hope you could follow all of the steps with no major problems and now better understand some of Affinity Designer’s main tools and actions. (Of course, if you have some questions or need help, leave a comment below!)</p>
  4699.  
  4700. <p>These tools will allow you to create not only flat illustrations, but many other kinds of artwork as well. The tools, actions and procedures we’ve used here are some of the most useful and common that designers and illustrators use daily (including me), be it for simple illustration projects or much more complex ones.</p>
  4701.  
  4702. <p>However, even my <a href="https://dribbble.com/shots/2373851-1957-Chevy-Corvette-Roadster-Vector-Drawing">most complex illustrations</a> usually need the same tools that we’ve seen in action in this tutorial! It’s mainly a matter of understanding how much you can get out of each tool.</p>
  4703.  
  4704. <p>Remember the few important tips, such as locking the layers that could get in your way (or using half-transparency), stacking the layers in the right order, and naming them, so that even the most complex of illustrations are easy to organize and work with. Practice often, and try to organize things so that your workflow improves &mdash; this will lead to better artwork and better time management as well.</p>
  4705.  
  4706. <p>Also, to learn more about how to create this type of illustration, check out the <a href="https://www.youtube.com/watch?v=V0c9f270zFU">video tutorial</a> that I posted on my YouTube channel.</p>
  4707.  
  4708.  
  4709.  
  4710.  
  4711.  
  4712.  
  4713.  
  4714.  
  4715.  
  4716.  
  4717.  
  4718. <figure class="article__image break-out">
  4719. <a href="https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/e25a538e-9616-4cc1-887f-3ac549e6277c/finished-beetle.png">
  4720. <img
  4721. srcset="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_400/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/e25a538e-9616-4cc1-887f-3ac549e6277c/finished-beetle.png 400w,
  4722.        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_800/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/e25a538e-9616-4cc1-887f-3ac549e6277c/finished-beetle.png 800w,
  4723.        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_1200/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/e25a538e-9616-4cc1-887f-3ac549e6277c/finished-beetle.png 1200w,
  4724.        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_1600/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/e25a538e-9616-4cc1-887f-3ac549e6277c/finished-beetle.png 1600w,
  4725.        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_2000/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/e25a538e-9616-4cc1-887f-3ac549e6277c/finished-beetle.png 2000w"
  4726. src="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_400/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/e25a538e-9616-4cc1-887f-3ac549e6277c/finished-beetle.png"
  4727. sizes="100vw"
  4728. alt="The completed Volkswagen Beetle illustration."
  4729. />
  4730. </a>
  4731.  
  4733. <figcaption class="op-vertical-bottom">
  4734. The completed Volkswagen Beetle illustration. (<a href='https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/e25a538e-9616-4cc1-887f-3ac549e6277c/finished-beetle.png'>View large version</a>)
  4735. </figcaption>
  4737. </figure>
  4738.  
  4739.  
  4740. <div class="signature">
  4741.  <img src="https://www.smashingmagazine.com/images/logo/logo--red.png" alt="Smashing Editorial">
  4742.  <span>(mb, ms, ra, yk, al, il)</span>
  4743. </div>
  4744.  
  4745.  
  4746.              </article>
  4747.            </body>
  4748.          </html>
  4749.        ]]></content:encoded>
  4750.      </item>
  4751.    
  4752.      <item>
  4753.        
  4754.          
  4755.          <author>Murat Kemaldar</author>
  4756.        
  4757.        <title>Learning To Code By Writing Code Poems</title>
  4758.        <link>https://www.smashingmagazine.com/2018/07/writing-code-poems/</link>
  4759.        <pubDate>Wed, 11 Jul 2018 14:00:32 +0200</pubDate>
  4760.        <guid>https://www.smashingmagazine.com/2018/07/writing-code-poems/</guid>
  4761.        <description>Back in 2008, I started studying design and clearly remember how the sheer sight of code just intimidated me. I had some coding classes, and without any prior coding experience, I had a tough time understanding the code I first got in touch with. Suddenly, the words that I was used to in the English language (such as &amp;ldquo;new,&amp;rdquo; &amp;ldquo;return&amp;rdquo; and &amp;ldquo;throw/catch&amp;rdquo;) took on a whole new meaning; the cryptic syntax, semicolons, brackets and completely new rules didn’t make things any easier for me.</description>
  4762.        <content:encoded><![CDATA[
  4763.          <html>
  4764.            <head>
  4765.              <meta charset="utf-8">
  4766.              <link rel="canonical" href="https://www.smashingmagazine.com/2018/07/writing-code-poems/" />
  4767.              <title>Learning To Code By Writing Code Poems</title>
  4768.            </head>
  4769.            <body>
  4770.              <article>
  4771.                <header>
  4772.                  <h1>Learning To Code By Writing Code Poems</h1>
  4773.                  
  4774.                    
  4775.                    <address>Murat Kemaldar</address>
  4776.                  
  4777.                  <time datetime="2018-07-11T14:00:32&#43;02:00" class="op-published">2018-07-11T14:00:32+02:00</time>
  4778.                  <time datetime="2018-07-23T11:42:51&#43;00:00" class="op-modified">2018-07-23T11:42:51+00:00</time>
  4779.                </header>
  4780.                
  4781.  
  4782. <p>Back in 2008, I started studying design and clearly remember how the sheer sight of code just intimidated me. I had some coding classes, and without any prior coding experience, I had a tough time understanding the code I first got in touch with. Suddenly, the words that I was used to in the English language (such as &ldquo;new,&rdquo; &ldquo;return&rdquo; and &ldquo;throw/catch&rdquo;) took on a whole new meaning; the cryptic syntax, semicolons, brackets and completely new rules didn’t make things any easier for me.</p>
  4783.  
  4784. <p>If you are new to JavaScript and/or have struggles adding it to your skillset, I may have an approach for you to overcome those barriers. You are definitely not alone, and you have every right to think that learning to code is a tough nut to crack.</p>
  4785.  
  4786. <h3 id="why-is-learning-to-code-so-tough">Why Is Learning To Code So Tough?</h3>
  4787.  
  4788. <p>Here are <strong>some of the misconceptions</strong> about why I think people are having a hard time learning or getting interested in JavaScript (or any coding language):</p>
  4789.  
  4790. <ul>
  4791. <li>Code is cryptic, purely functional and scary;</li>
  4792. <li>Code is meant for machines only, so people do not feel addressed or engaged;</li>
  4793. <li>Code is not treated as a language because it has a completely different use case and looks very different from anything they have seen before;</li>
  4794. <li>People think of stereotypes (evil hackers, maybe some Matrix dudes), and thus do not identify themselves with it.</li>
  4795. </ul>
  4796.  
  4797.  
  4798.  
  4799. <aside class="product-panel product-panel__tilted product-panel--book" data-audience="non-subscriber">
  4800.    <div class="container product-panel--book__container">
  4801.      <div class="panel__description panel__description--book">
  4802.    <p>Nope, we can't do any magic tricks, but we have articles, <a href="http://smashed.by/perfpanelbooks">books</a> and <a href="http://smashed.by/perfpaneltv">webinars</a> featuring techniques we all can use to improve our work. <a href="http://smashed.by/perfpanelmembership">Smashing Members</a> get a seasoned selection of magic front-end tricks — e.g. <strong>live designing sessions</strong> and perf audits, too. <em>Just sayin'</em>! ;-)</p>
  4803.  
  4804.      <a href="http://smashed.by/perfpanelmembership" class="btn btn--green btn--large">
  4805.        Explore Smashing Wizardry&nbsp;→
  4806.      </a>
  4807.      </div>
  4808.      <div class="panel__image panel__image--book">
  4809.        <a href="http://smashed.by/perfpanelmembership" class="books__book__image">
  4810.        <div class="books__book__img">
  4811.          <img src="https://www.smashingmagazine.com/images/smashing-cat/cat-wizard.svg" alt="Smashing Cat, just preparing to do some magic stuff." width="310" height="400">
  4812.        </div>
  4813.      </a>
  4814.      </div>
  4815.    </div>
  4816.  </aside>
  4817.  
  4818.  
  4819.  
  4820.  
  4821.  
  4822.  
  4823.  
  4824.  
  4825.  
  4826.  
  4827.  
  4828.  
  4829.  
  4830.  
  4831. <figure >
  4832. <a href="https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/8ce7d4c0-bc1d-428f-af64-7bb324419ce6/writing-code-poetically-baby.png">
  4833. <img
  4834. srcset="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_400/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/8ce7d4c0-bc1d-428f-af64-7bb324419ce6/writing-code-poetically-baby.png 400w,
  4835.        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_800/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/8ce7d4c0-bc1d-428f-af64-7bb324419ce6/writing-code-poetically-baby.png 800w,
  4836.        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_1200/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/8ce7d4c0-bc1d-428f-af64-7bb324419ce6/writing-code-poetically-baby.png 1200w,
  4837.        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_1600/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/8ce7d4c0-bc1d-428f-af64-7bb324419ce6/writing-code-poetically-baby.png 1600w,
  4838.        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_2000/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/8ce7d4c0-bc1d-428f-af64-7bb324419ce6/writing-code-poetically-baby.png 2000w"
  4839. src="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_400/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/8ce7d4c0-bc1d-428f-af64-7bb324419ce6/writing-code-poetically-baby.png"
  4840. sizes="100vw"
  4841. alt="A young and unexperienced student with a pacifier and pillow"
  4842. />
  4843. </a>
  4844.  
  4846. <figcaption class="op-vertical-bottom">
  4847. Me, before any contact with code (<a href='https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/8ce7d4c0-bc1d-428f-af64-7bb324419ce6/writing-code-poetically-baby.png'>Large preview</a>)
  4848. </figcaption>
  4850. </figure>
  4851.  
  4852.  
  4853. <p>As a developer, you are expected to treat code in a very specific way &mdash; even to think in a quite different (and highly logical) way. Coding languages are quite strict and intolerant; a single character can make the machine fail to understand what you mean and make applications crash. You are expected to ignore and override certain things you know from speaking and writing a human language (which is, by the way, also the case when learning a new human language).</p>
  4854.  
  4855. <p>But not all programming languages, documentations or tutorials on the web are made with this &ldquo;human to programming language transition&rdquo; in mind. Of course, they don’t have to. After all, the main purpose of code is to tell machines what to do.</p>
  4856.  
  4857. <p>Still, due to that purpose, a chance for comparison is simply missing and the languages you speak (vocabulary and rules) seem to be rendered useless for learning a programming language. <strong>There is no word for &ldquo;love&rdquo; in the JavaScript language</strong>, nor does it make sense to say &ldquo;I love you.&rdquo; A machine (or browser) simply does not know or care about love (yet?). This &ldquo;completely new&rdquo; and &ldquo;don’t know where to start&rdquo; feeling can be scary as hell.</p>
  4858.  
  4859.  
  4860.  
  4861.  
  4862.  
  4863.  
  4864.  
  4865.  
  4866.  
  4867.  
  4868.  
  4869. <figure >
  4870. <a href="https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/ba520005-77e6-471e-b5f5-4f1a69f3ca73/writing-code-poetically-baby2.png">
  4871. <img
  4872. srcset="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_400/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/ba520005-77e6-471e-b5f5-4f1a69f3ca73/writing-code-poetically-baby2.png 400w,
  4873.        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_800/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/ba520005-77e6-471e-b5f5-4f1a69f3ca73/writing-code-poetically-baby2.png 800w,
  4874.        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_1200/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/ba520005-77e6-471e-b5f5-4f1a69f3ca73/writing-code-poetically-baby2.png 1200w,
  4875.        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_1600/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/ba520005-77e6-471e-b5f5-4f1a69f3ca73/writing-code-poetically-baby2.png 1600w,
  4876.        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_2000/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/ba520005-77e6-471e-b5f5-4f1a69f3ca73/writing-code-poetically-baby2.png 2000w"
  4877. src="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_400/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/ba520005-77e6-471e-b5f5-4f1a69f3ca73/writing-code-poetically-baby2.png"
  4878. sizes="100vw"
  4879. alt=" A student who is intimidated by coding languages"
  4880. />
  4881. </a>
  4882.  
  4884. <figcaption class="op-vertical-bottom">
  4885. Me, after my first contact with code. (<a href='https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/ba520005-77e6-471e-b5f5-4f1a69f3ca73/writing-code-poetically-baby2.png'>Large preview</a>)
  4886. </figcaption>
  4888. </figure>
  4889.  
  4890.  
  4891. <p>This is why I am here. I think that you can learn JavaScript in a much easier and artistic fashion, by holding on to your human language knowledge, and by treating JavaScript like any other human language. Let me demonstrate with a small example.</p>
  4892.  
  4893. <p><strong>Fun fact</strong>: <em>Some programming languages actually have the transition from one programming language to another in mind. This is why it is so much easier to learn a lot of programming languages &mdash; just by learning a single one.</em></p>
  4894.  
  4895. <h3 id="a-small-example">A Small Example</h3>
  4896.  
  4897. <p>In a lot of cases, when you want to execute JavaScript code, you want the &ldquo;document&rdquo; (basically the website, a user is downloading on each visit) to be ready so that you can interact with HTML elements, for example. In pure JavaScript, you may stumble over something this:</p>
  4898.  
  4899. <p><pre><code class="language-javascript">(function() {
  4900.   // Your code goes here
  4901. })();
  4902. </pre></code></p>
  4903.  
  4904. <p>(Yuck! 😖 In this case, a function is defined in brackets, and then immediately called with another pair of brackets at the end. This is referred to as an <a href="https://developer.mozilla.org/en-US/docs/Glossary/IIFE">IIFE</a>.)</p>
  4905.  
  4906. <p>Or sometimes like this:</p>
  4907.  
  4908. <p><pre><code class="language-javascript">if (document.readyState === &lsquo;complete&rsquo;) {
  4909.  // Your code goes here
  4910. }
  4911. </pre></code></p>
  4912.  
  4913. <p>The first snippet definitely requires an explanation, while with the second (and maybe some fantasy), one could comprehend that there is a condition which needs to be fulfilled so that something else happens just by just looking at it.</p>
  4914.  
  4915. <p>Imagine something like this, though:</p>
  4916.  
  4917. <p><pre><code class="language-javascript">onceUponATime(function () {
  4918.  // Your code (story) goes here
  4919. })
  4920. </pre></code></p>
  4921.  
  4922. <p>&ldquo;Once upon a time&rdquo; is something (dare I say) even a child might understand. It addresses the developer (by referring to childhood memories), while theoretically doing the same thing. This is what I consider &ldquo;having the human to coding language transition&rdquo; in mind.</p>
  4923.  
  4924. <p><strong>Quick note on &ldquo;functions</strong>&ldquo;: A function is basically a skill, which is dormant until you call upon it. &ldquo;To read&rdquo; is a skill <code>function read() { … }</code>, which is called upon when you are want to read something like this: <code>read()</code>. There is also something called “anonymous functions”, i.e. <code>&quot;function() { … }</code> (has no name, like in the snippets above) which are basically &ldquo;one-time / casual actions&rdquo; that you wouldn’t consider to be a skill, such as &ldquo;to push a button.&rdquo;</p>
  4925.  
  4926. <h3 id="turning-the-tables-from-message-to-basics">Turning The Tables: From Message To Basics</h3>
  4927.  
  4928. <p>So let’s take this idea a bit further. Let’s take the reasons and misconceptions above, and turn them upside-down:</p>
  4929.  
  4930. <blockquote>A small poem.<br /><br />Written in JavaScript.<br /><br />Made for human beings.<br /><br />About the love between two individuals.</blockquote>
  4931.  
  4932. <p><pre><code class="language-javascript">// Love at first sight
  4933. if (me.getDistanceTo(you.position) &lt; 200) {
  4934.  me.setFeelings({
  4935.    inLove: true,
  4936.  });
  4937. }
  4938. </pre></code></p>
  4939.  
  4940. <p>It is not functional. It is currently not meant for machines. It is meant for you to read and understand.</p>
  4941.  
  4942. <p>If you got the message of the poem, you actually understood a piece of JavaScript code, which you might have compared to the English language.</p>
  4943.  
  4944. <p>Now you might ask yourself: I understand this, but why is it written like this? What are the rules (grammar) of this language? What is the meaning of &ldquo;me&rdquo; (in a technical sense), and why does this code look so similar to English?</p>
  4945.  
  4946. <h3 id="rules-vocabulary-and-variables">Rules, Vocabulary, And Variables</h3>
  4947.  
  4948. <p>One of the most important things to understand when learning a programming language is <strong>the concept of variables</strong>.</p>
  4949.  
  4950. <p>Every human language has its rules (grammar) and a lot of vocabulary (pre-defined). Obviously, both of these first need to be learned in order to be able to speak the language.</p>
  4951.  
  4952. <p>JavaScript, like many other programming languages, also comes with its own set of rules (e.g. the <code>.</code> between the words or how <code>if</code> statements are written) and its own vocabulary (<code>if</code>, <code>document</code>, <code>window</code>, <code>Event</code>, and so on). These keywords are reserved (or ‘pre-defined’) by JavaScript (and the browser), and each one of them has its specific purpose.</p>
  4953.  
  4954. <p>But like I mentioned earlier, a chance to compare the words and sentences you know from the English language is seemingly missing because <strong>there are no equivalents</strong>.</p>
  4955.  
  4956. <p>This is where variables come in; you (the developer) can (or even have to) define the variables in order to make machines and developers understand what something stands for. Variables can take a lot of forms (hence the name): They can be a chain of words and letters (strings), a number, an action (function), or even a collection (array). You name it.</p>
  4957.  
  4958. <p>In all languages, there is probably a word for love. You kinda know what it means, but not really, because it is so subjective. But still, there is a word for it.</p>
  4959.  
  4960. <p>But in JavaScript, there is no &ldquo;love,&rdquo; until you say there is. It can be whatever you want it to be.</p>
  4961.  
  4962. <p><pre><code class="language-javascript">var love = {
  4963.  color: &lsquo;red&rsquo;,
  4964.  duration: 365,
  4965.  loveTarget:  &lsquo;cats&rsquo;,
  4966. };
  4967. // a simple variable expression,
  4968. // where love is an object &ldquo;{ &hellip; }&rdquo;, a thing
  4969. // with some properties (color, duration, loveTarget).</p>
  4970.  
  4971. <p>const love2 = {
  4972.  color: &lsquo;purple&rsquo;,
  4973.  duration: &lsquo;forever&rsquo;,
  4974.  loveTarget: &lsquo;dogs&rsquo;,
  4975. };</p>
  4976.  
  4977. <p>// also a variable expression, where love2 (a constant),
  4978. // cannot be redefined / overwritten completely:
  4979. // love2 = undefined; // =&gt; will not work</p>
  4980.  
  4981. <p>// (&ldquo;undefined&rdquo; is a pre-defined javascript keyword,
  4982. // basically saying &ldquo;has no value&rdquo;)
  4983. </pre></code></p>
  4984.  
  4985. <p>It is crucial to be able to distinguish between what is pre-defined in JavaScript (JavaScript rules and vocabulary), and what is actually custom defined by the developer (also known as ‘application logic’ or ‘business logic’).</p>
  4986.  
  4987. <p>Returning to the poem written above:</p>
  4988.  
  4989. <p><pre><code class="language-javascript">// Love at first sight
  4990. if (me.getDistanceTo(you.position) &lt; 200) {
  4991.  me.setFeelings({
  4992.    inLove: true,
  4993.  });
  4994. }
  4995. </pre></code></p>
  4996.  
  4997. <p>These expressions come from the following JavaScript vocabulary/ruleset:</p>
  4998.  
  4999. <p><pre class="break-out"><code class="language-javascript">if (&hellip;) { &hellip; }
  5000. // if statement: when &hellip; is met, do things in { &hellip; }</p>
  5001.  
  5002. <p>{
  5003.    inLove: true,
  5004. }
  5005. // an &ldquo;object&rdquo; with some info, some thing in the world.
  5006. // can contain other info, and &ldquo;skills&rdquo; (functions).
  5007. // &ldquo;inLove&rdquo; is a custom property,
  5008. // &ldquo;true&rdquo; is pre-defined in javascript, (meaning: &ldquo;yes&rdquo;)
  5009. // and the value of &ldquo;inLove&rdquo;.</p>
  5010.  
  5011. <p>.
  5012. // needed to access an objects property &ldquo;my name: me.name&rdquo;</p>
  5013.  
  5014. <p>getDistanceTo()
  5015. // an expression to &ldquo;call&rdquo; a function (a &ldquo;skill&rdquo;).
  5016. // getDistanceTo is custom (not JavaScript), and a function,
  5017. // so it can be executed / called upon with the &ldquo;()&rdquo; after.
  5018. // sometimes you can pass arguments in those brackets (like &ldquo;position&rdquo;)
  5019. // to change the outcome of a function.
  5020. </pre></code></p>
  5021.  
  5022. <p>And these are the variables (where you have free reign over defining their names and behavior):</p>
  5023.  
  5024. <p><pre class="break-out"><code class="language-javascript">me // an object, some thing in the world
  5025. you // an object, some thing in the world
  5026. position // an info about &ldquo;you&rdquo;, accessed by the &ldquo;.&rdquo;
  5027. getDistanceTo // a skill of me, accessed by the &ldquo;.&rdquo;
  5028. getDistanceTo() // the skill, with javascript grammar telling: do it.
  5029. getDistanceTo(position) // same, but do it with &ldquo;position&rdquo;.
  5030. setFeelings // another skill of me, accessed by the &ldquo;.&rdquo;
  5031. setFeelings({ inLove: true }); // the skill, with some instructions (an object).
  5032. </pre></code></p>
  5033.  
  5034. <p>Let’s assume the poem is now human-readable. You might have understood the message, you also might see the difference between JavaScript language rules you need to follow, and the things you actually have to come up with yourself (the variables).</p>
  5035.  
  5036. <p>But what about the machine?</p>
  5037.  
  5038. <p>If the machine (the browser) were to read this poem, it would throw an error. The machine needs a definition of &ldquo;me&rdquo; and &ldquo;you&rdquo; because it tries to access its properties (via the <code>.</code> in <code>me.getDistanceTo()</code>). With the distinction ability mentioned above, you can actually engineer &ldquo;me&rdquo; and &ldquo;you&rdquo; to make the poem executeable/machine-readable, like this:</p>
  5039.  
  5040. <p><pre><code class="language-javascript">// This is how the definition of a being (me/you) could look like</p>
  5041.  
  5042. <p>var me = {
  5043.  position: {x: 0, y: 0} // some coordinates, maybe
  5044.  getDistanceTo: function(position) {
  5045.    // calculate the distance, relative to own position
  5046.  },
  5047.  setFeelings: function(feelings) {
  5048.    // handle those feelings&hellip;
  5049.  }
  5050. }</p>
  5051.  
  5052. <p>var you = {
  5053.  position: {x: 0, y: 0} // some coordinates, maybe
  5054. }</p>
  5055.  
  5056. <p>// the poem itself
  5057. if (me.getDistanceTo(you.position) &lt; 200) {
  5058.  me.setFeelings({
  5059.    inLove: true,
  5060.  });
  5061. }
  5062. </pre></code></p>
  5063.  
  5064. <p>So what happened here?</p>
  5065.  
  5066. <ul>
  5067. <li>We read a JavaScript poem, written with JavaScript &ldquo;grammar&rdquo; with the only goal to be understood by human beings.</li>
  5068. <li>After understanding the message, we distinguished between rules, vocabulary, and variables, to understand the structure of the poem (grammar and basics of JavaScript).</li>
  5069. <li>With that distinction, we engineered the rest of the poems variables, with JavaScript rules in order to make it runnable by a machine (in the browser).</li>
  5070. </ul>
  5071.  
  5072. <p><strong>This was possible, because we treated JavaScript just like the English language.</strong></p>
  5073.  
  5074. <div class="sponsors__wide-place"></div>
  5075.  
  5076.  
  5077.  
  5078.  
  5079. <h3 id="a-bigger-example-interactive-code-poetry">A Bigger Example: Interactive Code Poetry</h3>
  5080.  
  5081. <p>This is how my personal project <a href="https://lovebits.bilebile.net/">LoveBits</a> came to be. LoveBits is a code learning/storytelling experience.</p>
  5082.  
  5083. <figure><a href="https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/65065399-4008-4313-a3b5-2c45221d7f77/writing-code-poetically-lovebits-intro.gif"><img src="https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/65065399-4008-4313-a3b5-2c45221d7f77/writing-code-poetically-lovebits-intro.gif" width="1800" height="1450" alt="Animated demonstration of the LoveBits project" /></a><figcaption>LoveBits: Code poetry project in JavaScript (<a href="https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/65065399-4008-4313-a3b5-2c45221d7f77/writing-code-poetically-lovebits-intro.gif">Large preview</a>)</figcaption></figure>
  5084.  
  5085. <p>It tries to get people interested in JavaScript/coding by:</p>
  5086.  
  5087. <ul>
  5088. <li>Putting readability and human language first;</li>
  5089. <li>Combining code with an art the reader might already be familiar with.</li>
  5090. </ul>
  5091.  
  5092. <p>Storywise, it is about two Bits (rectangular beings); one of the Bits (blueBit) is the romantic one and writes JavaScript love poems to the other Bit (purpleBit).</p>
  5093.  
  5094. <p>When you start LoveBits, you can select one of the multiple love poems (written in JavaScript). Each poem has a code snippet which is written in a way that it is supposed to be understood by people who are not even familiar with programming. <strong>The only requirement is the English language.</strong></p>
  5095.  
  5096. <p>&ldquo;Love at first sight&rdquo; (actually one of the LoveBits poems), for example, is about these two Bits in which the blueBit basically says, “If I get close enough to your position, I will ‘set my feelings’ to <code>inLove: true</code>.”</p>
  5097.  
  5098. <p>The special thing about these poems though is that you can &ldquo;run&rdquo; or &ldquo;play&rdquo; them simply by pressing the &ldquo;play&rdquo; button below. In the case of &ldquo;Love at first sight,&rdquo; you would see a blue and purple rectangle along with a number. As you might&rsquo;ve already guessed, those are the two Bits mentioned in the poem, and the number below the blueBit is actually the distance between the blueBit and the purpleBit.</p>
  5099.  
  5100. <p>As the poem suggests, you may want to make the blueBit fall in love with the purpleBit by reducing the distance between them,  right? So what can you do? You can interact and drag the blueBit around, and make it fall in love. But be careful, sometimes there is more than just one outcome.</p>
  5101.  
  5102. <p>One might actually say that you are the machine here. You&rsquo;re the one who needs to interpret JavaScript code to be able to act and help two digital beings fall in love.</p>
  5103.  
  5104. <h3 id="where-to-go-from-here">Where To Go From Here?</h3>
  5105.  
  5106. <p>If you are a struggling developer, try treating JavaScript like a human language, and just understand what code snippets are supposed to do first instead of what they actually end up doing.</p>
  5107.  
  5108. <p>This is what I would recommend you to do next:</p>
  5109.  
  5110. <ul>
  5111. <li>Always prefer going straight for examples and code for entire applications that combine rules, vocabulary, and variables together to form an application logic;</li>
  5112. <li>Application logic will tell the stories that will help you fill the gaps like in the code examples above. Code libraries and utilities such as <code>lodash</code> will only provide you with new vocabulary which will become helpful after being able to read and understand JavaScript code;</li>
  5113. <li>Review existing code, and try to break it down into small functions with names that reflect what they do. Write code which addresses humans and machines alike. Write code in such a way that it can be read like a sentence. Use comments wherever needed. Think about: How would I express this in a human language (to another developer)?</li>
  5114. </ul>
  5115.  
  5116. <h3 id="conclusion">Conclusion</h3>
  5117.  
  5118. <p>Learning to code can become easier once you start treating code as a human language and not as something aliens may have invented. Learning to distinguish between language features (built-ins) and variables/custom code for application logic is crucial. Being able to understand the application logic will put you in a powerful position to improve and change things, without even knowing language features.</p>
  5119.  
  5120. <p><strong>Message before basics</strong>: Understand the message of any code snippet, and the basics of JavaScript will naturally follow. How many times have you heard someone say, “I understand the language, but I do not speak it yet”? It is a natural process, which can and maybe <em>should</em> be applied for learning both human and coding languages.</p>
  5121.  
  5122. <p>Also, always keep in mind that code has a clear functional purpose, but it does not always have to be like that. Even human languages were purely functional once, but then there came poems and even songs (JavaScript songs, anyone?), which connected people in entirely different ways. I think, or hope, that the same can apply here.</p>
  5123.  
  5124. <p>Always <a href="https://github.com/explore">explore</a> <a href="https://codepen.io/pens/">code projects</a>, and perhaps even try writing a poem yourself (maybe even in another programming language you are familiar with)? I enjoyed creating the <a href="https://lovebits.bilebile.net/">LoveBits</a> project and would love to see some of your ideas in the comments below!</p>
  5125.  
  5126. <h4 id="further-reading">Further Reading</h4>
  5127.  
  5128. <ul>
  5129. <li>“<a href="https://nostarch.com/hemingway">If Hemingway wrote JavaScript</a>,” Angus Croll<br />
  5130. This is one of my favorite books which I actually stumbled upon after LoveBits. It’s about several famous poets and artists, and how they would have written JavaScript code snippets. It’s hilarious!</li>
  5131. </ul>
  5132.  
  5133. <div class="signature">
  5134.  <img src="https://www.smashingmagazine.com/images/logo/logo--red.png" alt="Smashing Editorial">
  5135.  <span>(rb, ra, il)</span>
  5136. </div>
  5137.  
  5138.  
  5139.              </article>
  5140.            </body>
  5141.          </html>
  5142.        ]]></content:encoded>
  5143.      </item>
  5144.    
  5145.      <item>
  5146.        
  5147.          
  5148.          <author>Ida Aalen</author>
  5149.        
  5150.        <title>Better Collaboration By Bringing Designers Into The Code Review Process</title>
  5151.        <link>https://www.smashingmagazine.com/2018/07/collaboration-designers-code-review-process/</link>
  5152.        <pubDate>Tue, 10 Jul 2018 13:50:26 +0200</pubDate>
  5153.        <guid>https://www.smashingmagazine.com/2018/07/collaboration-designers-code-review-process/</guid>
  5154.        <description>Smooth collaboration between developers and designers is something everyone aspires to, but it’s notoriously difficult. But with today’s advanced web, it&#39;s difficult &amp;mdash; if not impossible &amp;mdash; to build a truly great product without collaborating across disciplines. Because of the range of technologies required to build a product, the product can only truly succeed when all disciplines &amp;mdash; developers and designers, content creators, and user experience strategists &amp;mdash; are deeply involved from the early stages of the project.</description>
  5155.        <content:encoded><![CDATA[
  5156.          <html>
  5157.            <head>
  5158.              <meta charset="utf-8">
  5159.              <link rel="canonical" href="https://www.smashingmagazine.com/2018/07/collaboration-designers-code-review-process/" />
  5160.              <title>Better Collaboration By Bringing Designers Into The Code Review Process</title>
  5161.            </head>
  5162.            <body>
  5163.              <article>
  5164.                <header>
  5165.                  <h1>Better Collaboration By Bringing Designers Into The Code Review Process</h1>
  5166.                  
  5167.                    
  5168.                    <address>Ida Aalen</address>
  5169.                  
  5170.                  <time datetime="2018-07-10T13:50:26&#43;02:00" class="op-published">2018-07-10T13:50:26+02:00</time>
  5171.                  <time datetime="2018-07-23T11:42:51&#43;00:00" class="op-modified">2018-07-23T11:42:51+00:00</time>
  5172.                </header>
  5173.                <p>Smooth collaboration between developers and designers is something everyone aspires to, but it’s <a href="https://www.smashingmagazine.com/2018/04/working-together-designers-developers/">notoriously difficult</a>. But with today’s advanced web, it's difficult &mdash; if not impossible &mdash; to build a truly great product without collaborating across disciplines. Because of the range of technologies required to build a product, the product can only truly succeed when all disciplines &mdash; developers <em>and</em> designers, content creators, and user experience strategists &mdash; are deeply involved from the early stages of the project. When this happens, all ends of what it takes to build a product come naturally together into a unified whole, and a thus great product.</p>
  5174.  
  5175. <p>Because of this, no one is really promoting <a href="https://en.wikipedia.org/wiki/Waterfall_model">waterfall processes</a> anymore. Nevertheless, involving other people early on, especially people from other disciplines, can feel scary. In the worst case scenario, it leads to “<a href="https://en.wikipedia.org/wiki/Design_by_committee">design by committee</a>.”</p>
  5176.  
  5177. <p>Moreover, both designers and content strategists often have backgrounds in fields in which a sole creative genius is still the ideal. Having someone else proof your work can feel like a threat to your creativity.</p>
  5178.  
  5179. <p>So how can you involve people early on so that you’re avoiding the waterfall, but also making sure that you’re not setting yourself up for design by committee? I found my answer when learning about code reviews.</p>
  5180.  
  5181.  
  5182.  
  5183. <aside class="product-panel product-panel__tilted product-panel--book" data-audience="non-subscriber">
  5184.    <div class="container product-panel--book__container">
  5185.      <div class="panel__description panel__description--book">
  5186.    <p>Getting workflow <em>just</em> right ain’t an easy task. So are proper estimates. Or alignment among different departments. That’s why we’ve set up <strong>“this-is-how-I-work”-sessions</strong> — with smart cookies sharing what works well for them. A part of the <a href="http://smashed.by/workflowpanelmembership">Smashing Membership</a>, of course.</p>
  5187.      <a href="http://smashed.by/workflowpanelmembership" class="btn btn--green btn--large">
  5188.        Explore features&nbsp;→
  5189.      </a>
  5190.      </div>
  5191.      <div class="panel__image panel__image--book">
  5192.        <a href="http://smashed.by/workflowpanelmembership" class="books__book__image">
  5193.        <div class="books__book__img">
  5194.          <img src="https://www.smashingmagazine.com/images/smashing-cat/smashing-tv-box-cat.svg" alt="Smashing TV, with live sessions for professional designers and developers." width="310" height="400">
  5195.        </div>
  5196.      </a>
  5197.      </div>
  5198.    </div>
  5199.  </aside>
  5200.  
  5201.  
  5202.  
  5203.  
  5204. <h3>The <em>Aha!</em> Moment</h3>
  5205.  
  5206. <p>In July 2017, I founded <a href="https://confrere.com">Confrere</a> together with two developers, and we quickly hired our first engineer (I’m not a developer myself, I’m more of a UX or content designer). Our collaboration was running surprisingly smoothly,  so much so that at our <a href="https://www.atlassian.com/team-playbook/plays/retrospective">retrospectives</a>, the recurring theme was that we all felt that we were “doing it right.”</p>
  5207.  
  5208.  
  5209.  
  5210.  
  5211.  
  5212.  
  5213.  
  5214.  
  5215.  
  5216.  
  5217.  
  5218. <figure >
  5219. <a href="https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/50e9277c-279f-47c5-9565-53800ee25c30/00-the-team.jpeg">
  5220. <img
  5221. srcset="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_400/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/50e9277c-279f-47c5-9565-53800ee25c30/00-the-team.jpeg 400w,
  5222.        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_800/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/50e9277c-279f-47c5-9565-53800ee25c30/00-the-team.jpeg 800w,
  5223.        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_1200/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/50e9277c-279f-47c5-9565-53800ee25c30/00-the-team.jpeg 1200w,
  5224.        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_1600/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/50e9277c-279f-47c5-9565-53800ee25c30/00-the-team.jpeg 1600w,
  5225.        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_2000/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/50e9277c-279f-47c5-9565-53800ee25c30/00-the-team.jpeg 2000w"
  5226. src="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_400/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/50e9277c-279f-47c5-9565-53800ee25c30/00-the-team.jpeg"
  5227. sizes="100vw"
  5228. alt="Three people are smiling and sitting next to each other around a computer. From left to right, they are Dag-Inge (CTO), Ida (CPO) and Ingvild (Sr. Engineer)."
  5229. />
  5230. </a>
  5231.  
  5233. <figcaption class="op-vertical-bottom">
  5234. Dag-Inge (CTO), myself (CPO) and Ingvild (Sr. Engineer). (<a href='https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/50e9277c-279f-47c5-9565-53800ee25c30/00-the-team.jpeg'>Large preview</a>)
  5235. </figcaption>
  5237. </figure>
  5238.  
  5239.  
  5240. <p>I sat down with my colleagues to try to pinpoint what exactly it was that we were “doing right” so that we could try to preserve that feeling even as our company grew and our team expanded. We came to the realization that we all appreciated that the whole team was involved early on and that we were being honest and clear in our feedback to each other. Our CTO Dag-Inge added: “It works because we’re doing it as peers. You’re not being berated and just getting a list of faults”.</p>
  5241.  
  5242. <p>The word “peer” is what gave me the aha moment. I realized that those of us working within UX, design, and content have a lot to learn from developers when it comes to collaboration.</p>
  5243.  
  5244. <p>Peer reviewing in the form of code reviews is essential to how software gets built. To me, code reviews offer inspiration for improving collaboration within our own fields, but also a model for collaborating across fields and disciplines.</p>
  5245.  
  5246. <p>If you’re already familiar with code reviews, feel free to skip the next section.</p>
  5247.  
  5248. <h3>What Is A Code Review?</h3>
  5249.  
  5250. <p>A code review can be done in various ways. Today, the most typical form of code review happens in the way of so-called <a href="https://www.atlassian.com/git/tutorials/making-a-pull-request">pull requests</a> (using a technology called <a href="https://www.atlassian.com/git/tutorials/what-is-git">git</a>). As illustrated below, the pull requests let other people on the team know that a developer has completed code that they wish to merge with the main code base. It also allows the team to review the code: they give feedback on the code before it gets merged, in case it needs improvement.</p>
  5251.  
  5252. <p>Pull requests have clearly defined roles: there is an author and a reviewer(s).</p>
  5253.  
  5254.  
  5255.  
  5256.  
  5257.  
  5258.  
  5259.  
  5260.  
  5261.  
  5262.  
  5263.  
  5264. <figure >
  5265. <a href="https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/354b8724-8a3f-4f0f-83fe-ff3c093360fe/01-code-review-01.jpeg">
  5266. <img
  5267. srcset="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_400/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/354b8724-8a3f-4f0f-83fe-ff3c093360fe/01-code-review-01.jpeg 400w,
  5268.        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_800/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/354b8724-8a3f-4f0f-83fe-ff3c093360fe/01-code-review-01.jpeg 800w,
  5269.        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_1200/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/354b8724-8a3f-4f0f-83fe-ff3c093360fe/01-code-review-01.jpeg 1200w,
  5270.        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_1600/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/354b8724-8a3f-4f0f-83fe-ff3c093360fe/01-code-review-01.jpeg 1600w,
  5271.        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_2000/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/354b8724-8a3f-4f0f-83fe-ff3c093360fe/01-code-review-01.jpeg 2000w"
  5272. src="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_400/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/354b8724-8a3f-4f0f-83fe-ff3c093360fe/01-code-review-01.jpeg"
  5273. sizes="100vw"
  5274. alt="Ingvild and Dag-Inge is setting next to each other and smiling. An arrow indicated that Ingvild has sent code to Dag-Inge."
  5275. />
  5276. </a>
  5277.  
  5279. <figcaption class="op-vertical-bottom">
  5280. Ingvild (the author) requests a review from Dag-Inge (the reviewer). (<a href='https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/354b8724-8a3f-4f0f-83fe-ff3c093360fe/01-code-review-01.jpeg'>Large preview</a>)
  5281. </figcaption>
  5283. </figure>
  5284.  
  5285.  
  5286. <p>As an example, let’s say our senior engineer Ingvild has made a change to Confrere’s sign-up flow. Before it is merged into the main code base and gets shipped, she (the author) creates a pull request to request a review from our CTO Dag-Inge (the reviewer). He won’t make any changes to her code, only add his comments.</p>
  5287.  
  5288.  
  5289.  
  5290.  
  5291.  
  5292.  
  5293.  
  5294.  
  5295.  
  5296.  
  5297.  
  5298. <figure >
  5299. <a href="https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/b30af716-c158-44a1-93d3-3eb1101dd13d/02-code-review-02.jpeg">
  5300. <img
  5301. srcset="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_400/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/b30af716-c158-44a1-93d3-3eb1101dd13d/02-code-review-02.jpeg 400w,
  5302.        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_800/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/b30af716-c158-44a1-93d3-3eb1101dd13d/02-code-review-02.jpeg 800w,
  5303.        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_1200/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/b30af716-c158-44a1-93d3-3eb1101dd13d/02-code-review-02.jpeg 1200w,
  5304.        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_1600/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/b30af716-c158-44a1-93d3-3eb1101dd13d/02-code-review-02.jpeg 1600w,
  5305.        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_2000/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/b30af716-c158-44a1-93d3-3eb1101dd13d/02-code-review-02.jpeg 2000w"
  5306. src="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_400/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/b30af716-c158-44a1-93d3-3eb1101dd13d/02-code-review-02.jpeg"
  5307. sizes="100vw"
  5308. alt="Ingvild and Dag-Inge is setting next to each other. An arrow indicates that Dag-Inge has sent comments on code back to Ingvild."
  5309. />
  5310. </a>
  5311.  
  5313. <figcaption class="op-vertical-bottom">
  5314. Dag-Inge comments on Ingvild’s code. (<a href='https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/b30af716-c158-44a1-93d3-3eb1101dd13d/02-code-review-02.jpeg'>Large preview</a>)
  5315. </figcaption>
  5317. </figure>
  5318.  
  5319.  
  5320. <p>It’s up to Ingvild how she wants to act on the feedback she received in the review. She’ll update her pull request with the changes she sees fit.</p>
  5321.  
  5322.  
  5323.  
  5324.  
  5325.  
  5326.  
  5327.  
  5328.  
  5329.  
  5330.  
  5331.  
  5332. <figure >
  5333. <a href="https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/4311ee16-a41d-4dd6-bf32-0555f7c6262e/03-code-review-03.jpeg">
  5334. <img
  5335. srcset="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_400/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/4311ee16-a41d-4dd6-bf32-0555f7c6262e/03-code-review-03.jpeg 400w,
  5336.        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_800/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/4311ee16-a41d-4dd6-bf32-0555f7c6262e/03-code-review-03.jpeg 800w,
  5337.        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_1200/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/4311ee16-a41d-4dd6-bf32-0555f7c6262e/03-code-review-03.jpeg 1200w,
  5338.        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_1600/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/4311ee16-a41d-4dd6-bf32-0555f7c6262e/03-code-review-03.jpeg 1600w,
  5339.        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_2000/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/4311ee16-a41d-4dd6-bf32-0555f7c6262e/03-code-review-03.jpeg 2000w"
  5340. src="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_400/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/4311ee16-a41d-4dd6-bf32-0555f7c6262e/03-code-review-03.jpeg"
  5341. sizes="100vw"
  5342. alt="Ingvild and Dag-Inge are sitting next to each other. An arrow indicates that Ingvild is sending back her code to Dag-Inge, having looked through the code he commented on."
  5343. />
  5344. </a>
  5345.  
  5347. <figcaption class="op-vertical-bottom">
  5348. Ingvild updates her code with the changes she sees fit in light of Dag-Inge’s comments. (<a href='https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/4311ee16-a41d-4dd6-bf32-0555f7c6262e/03-code-review-03.jpeg'>Large preview</a>)
  5349. </figcaption>
  5351. </figure>
  5352.  
  5353.  
  5354. <p>When the reviewer(s) approve the pull request, Ingvild can then merge her changes with the main code base.</p>
  5355.  
  5356.  
  5357.  
  5358.  
  5359.  
  5360.  
  5361.  
  5362.  
  5363.  
  5364.  
  5365.  
  5366. <figure >
  5367. <a href="https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/9dd649db-9e2b-4d64-8388-2c4b862c053f/04-code-review-04.jpeg">
  5368. <img
  5369. srcset="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_400/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/9dd649db-9e2b-4d64-8388-2c4b862c053f/04-code-review-04.jpeg 400w,
  5370.        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_800/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/9dd649db-9e2b-4d64-8388-2c4b862c053f/04-code-review-04.jpeg 800w,
  5371.        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_1200/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/9dd649db-9e2b-4d64-8388-2c4b862c053f/04-code-review-04.jpeg 1200w,
  5372.        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_1600/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/9dd649db-9e2b-4d64-8388-2c4b862c053f/04-code-review-04.jpeg 1600w,
  5373.        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_2000/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/9dd649db-9e2b-4d64-8388-2c4b862c053f/04-code-review-04.jpeg 2000w"
  5374. src="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_400/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/9dd649db-9e2b-4d64-8388-2c4b862c053f/04-code-review-04.jpeg"
  5375. sizes="100vw"
  5376. alt="Ingvild and Dag-Inge are sitting next to each other. A thumbs-up is displayed on the code review Dag-Inge has sent to Ingvild. And arrow indicates she pushes this code to the main repository."
  5377. />
  5378. </a>
  5379.  
  5381. <figcaption class="op-vertical-bottom">
  5382. After Dag-Inge gives the thumbs up, Ingvild can push the fix to production. (<a href='https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/9dd649db-9e2b-4d64-8388-2c4b862c053f/04-code-review-04.jpeg'>Large preview</a>)
  5383. </figcaption>
  5385. </figure>
  5386.  
  5387.  
  5388. <h3>Why Bother Doing Code Review?</h3>
  5389.  
  5390. <p>If you’ve never done code review, the process above might sound bureaucratic. If you have doubts, here’s a <a href="https://www.atlassian.com/agile/software-development/code-reviews">ton</a> <a href="https://blog.fullstory.com/what-we-learned-from-google-code-reviews-arent-just-for-catching-bugs/">of</a> <a href="https://medium.com/@palantir/code-review-best-practices-19e02780015f">blog</a> <a href="https://mtlynch.io/human-code-reviews-1/">posts</a> and <a href="https://kev.inburke.com/docs/shull_defects.pdf">academic research</a> about the advantages of code review.</p>
  5391.  
  5392. <blockquote>Code reviews set the tone for the entire company that everything we do should be open to scrutiny from others, and that such scrutiny should be a welcome part of your workflow rather than viewed as threatening.<br /><br />&mdash; <a href="https://blog.fullstory.com/what-we-learned-from-google-code-reviews-arent-just-for-catching-bugs/">Bruce Johnson, co-founder of Full Story</a></blockquote>
  5393.  
  5394. <p>Code review reduces risk. Having someone proof your work, and also <em>knowing</em> someone will proof your work, helps weed out
 errors and
 heightens quality. In addition, it ensures consistency and helps every team member familiarize with more of the code base.</p>
  5395.  
  5396. <p>When done right, code review also builds a culture for collaboration and openness. Trying to understand and critique other people’s work is an excellent way to learn, and so is getting honest feedback on your work.</p>
  5397.  
  5398. <p>Always having at least two people look over the code also curtails ideas of “my” code 
and “your” code.
 It’s <em>our</em> code.</p>
  5399.  
  5400. <p>Considering these advantages, a review shouldn’t just be for code.</p>
  5401.  
  5402. <div class="sponsors__wide-place"></div>
  5403.  
  5404.  
  5405.  
  5406.  
  5407. <h3>Review Principles For All Disciplines, Not Just Code</h3>
  5408.  
  5409. <p>With reviews, there is always one author and one or more reviewers. That means you can involve people early on without falling into design by committee.</p>
  5410.  
  5411. <p>First, I have to mention two important factors which will affect your team’s ability to do beneficial reviews. You don’t necessarily have to have mastered them, but as a minimum, you should aspire to the following:</p>
  5412.  
  5413. <ul>
  5414. <li>You and your colleagues <a href="https://www.smashingmagazine.com/2018/04/working-together-designers-developers/#respect">respect each other</a> and each other’s disciplines.</li>
  5415. <li>You’re sufficiently self-assured in your own role so that you feel like you can both give and receive criticism (this is also connected to the team’s <a href="https://www.nytimes.com/2016/02/28/magazine/what-google-learned-from-its-quest-to-build-the-perfect-team.html">psychological safety</a>).</li>
  5416. </ul>
  5417.  
  5418. <p>Even if we’re not reviewing code, there’s a lot to learn from existing <a href="https://medium.com/@palantir/code-review-best-practices-19e02780015f">best practices</a> for code reviews.</p>
  5419.  
  5420. <p>Within our team, we try to adhere to the following principles when doing reviews:</p>
  5421.  
  5422. <ol>
  5423. <li>Critique the work, 
not the author.</li>
  5424. <li>Be critical, but remain 
affable and curious.</li>
  5425. <li>Differentiate between a) Suggestions b) Requirements, c) Points that need discussion or clarification.</li>
  5426. <li>Move discussions from
 text to face-to-face. (<a href="https://www.smashingmagazine.com/2018/04/working-together-designers-developers/#creating-working-relationships">Video counts</a>)</li>
  5427. <li>Don’t forget to 
praise the good parts! What’s clever, creative, solid, original, funny, nice, and so on?</li>
  5428. </ol>
  5429.  
  5430. <p>These <a href="https://confrere.com/about/how-we-work/collaboration">principles</a> weren’t actually written down until <em>after</em> we discussed why our collaboration was working so well. We all felt we were allowed to and expected to ask questions and suggest improvements already, and that our motivations were always about building something great together, and not about criticising another person.</p>
  5431.  
  5432. <p>Because we were being clear about what kind of feedback we were giving, and also remembered to praise each other’s good work, doing reviews was a positive force rather than a demotivating one.</p>
  5433.  
  5434. <h3>An Example</h3>
  5435.  
  5436. <p>To give you an idea of how our team uses review across disciplines and throughout a process, let’s look at how the different members of our team switched between the roles of author and reviewer when we created our sign-up flow.</p>
  5437.  
  5438. <h4>Step 1: Requirements gathering</h4>
  5439.  
  5440. <p><strong>Author:</strong> Ida (UX)</p>
  5441.  
  5442. <p><strong>Reviewers:</strong> Svein (strategy), Dag-Inge (engineering), Ingvild (engineering).</p>
  5443.  
  5444.  
  5445.  
  5446.  
  5447.  
  5448.  
  5449.  
  5450.  
  5451.  
  5452.  
  5453.  
  5454. <figure >
  5455. <a href="https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/c4b47537-2a48-4d59-8b2f-64e0485a3c58/05-requirements-gathering.jpeg">
  5456. <img
  5457. srcset="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_400/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/c4b47537-2a48-4d59-8b2f-64e0485a3c58/05-requirements-gathering.jpeg 400w,
  5458.        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_800/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/c4b47537-2a48-4d59-8b2f-64e0485a3c58/05-requirements-gathering.jpeg 800w,
  5459.        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_1200/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/c4b47537-2a48-4d59-8b2f-64e0485a3c58/05-requirements-gathering.jpeg 1200w,
  5460.        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_1600/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/c4b47537-2a48-4d59-8b2f-64e0485a3c58/05-requirements-gathering.jpeg 1600w,
  5461.        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_2000/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/c4b47537-2a48-4d59-8b2f-64e0485a3c58/05-requirements-gathering.jpeg 2000w"
  5462. src="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_400/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/c4b47537-2a48-4d59-8b2f-64e0485a3c58/05-requirements-gathering.jpeg"
  5463. sizes="100vw"
  5464. alt="A whiteboard is showing rough sketches of a sign-up form. A man (Svein) and a woman (Ingvild) are smiling and discussing."
  5465. />
  5466. </a>
  5467.  
  5469. <figcaption class="op-vertical-bottom">
  5470. The team gathered around the whiteboard. Svein (CEO) to the left, Ingvild (Sr. Eng), to the right. (<a href='https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/c4b47537-2a48-4d59-8b2f-64e0485a3c58/05-requirements-gathering.jpeg'>Large preview</a>)
  5471. </figcaption>
  5473. </figure>
  5474.  
  5475.  
  5476. <p>Whiteboard sessions can be exhausting if there’s no structure to them. To maintain productivity and creativity, we use the author/reviewer structure, even for something as seemingly basic as brainstorming on a whiteboard. In this case, in which we were coming up with the requirements for our sign-up flow, I got to be the author, and the rest of the team gave their feedback and acted as reviewers. Because they also knew they’d be able to review what I came up with in step 2 (plenty more opportunity for adjustments, suggestions, and improvements), we worked swiftly and were able to agree upon the requirements in under 2 hours.</p>
  5477.  
  5478. <h4>Step 2: Mockup with microcopy</h4>
  5479.  
  5480. <p><strong>Author:</strong> Ida (UX)</p>
  5481.  
  5482. <p><strong>Reviewers:</strong> Ingvild (engineering), Eivind (design), Svein (strategy).</p>
  5483.  
  5484.  
  5485.  
  5486.  
  5487.  
  5488.  
  5489.  
  5490.  
  5491.  
  5492.  
  5493.  
  5494. <figure >
  5495. <a href="https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/9ed5ed76-7ce6-4d5b-a2fb-6cc9309bb3c2/06-mocup-with-microcopy.png">
  5496. <img
  5497. srcset="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_400/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/9ed5ed76-7ce6-4d5b-a2fb-6cc9309bb3c2/06-mocup-with-microcopy.png 400w,
  5498.        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_800/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/9ed5ed76-7ce6-4d5b-a2fb-6cc9309bb3c2/06-mocup-with-microcopy.png 800w,
  5499.        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_1200/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/9ed5ed76-7ce6-4d5b-a2fb-6cc9309bb3c2/06-mocup-with-microcopy.png 1200w,
  5500.        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_1600/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/9ed5ed76-7ce6-4d5b-a2fb-6cc9309bb3c2/06-mocup-with-microcopy.png 1600w,
  5501.        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_2000/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/9ed5ed76-7ce6-4d5b-a2fb-6cc9309bb3c2/06-mocup-with-microcopy.png 2000w"
  5502. src="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_400/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/9ed5ed76-7ce6-4d5b-a2fb-6cc9309bb3c2/06-mocup-with-microcopy.png"
  5503. sizes="100vw"
  5504. alt="A screenshot of a Google Doc mocking up a sign-up form with comments from team members Ingvild and Ida."
  5505. />
  5506. </a>
  5507.  
  5509. <figcaption class="op-vertical-bottom">
  5510. By mocking up in Google docs, it’s easy for people from all disciplines to provide feedback early on. (<a href='https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/9ed5ed76-7ce6-4d5b-a2fb-6cc9309bb3c2/06-mocup-with-microcopy.png'>Large preview</a>)
  5511. </figcaption>
  5513. </figure>
  5514.  
  5515.  
  5516. <p>As an author, I created a mockup of the sign-up flow with microcopy. Did the sign-up flow make sense, from both the user and engineering perspective? And how could we improve the flow from a design and frontend perspective? At this stage, it was essential to work in a format in which  it would be easy for all disciplines to give feedback (we opted for Google Docs, but it could also have been done with a tool like InvisionApp).</p>
  5517.  
  5518. <h4>Step 3: Implementing the sign-up flow</h4>
  5519.  
  5520. <p><strong>Author:</strong> Ingvild (engineering)</p>
  5521.  
  5522. <p><strong>Reviewer:</strong> Ida (UX) and Dag-Inge (engineering).</p>
  5523.  
  5524. <p>We had agreed upon the flow, the input fields, and the microcopy, and so it was up to Ingvild to implement it. Thanks to <a href="https://surge.sh/">Surge</a>, we can automatically create preview URLs of the changes so that people who can’t read code are able to give feedback at this stage as well.</p>
  5525.  
  5526. <h4>Step 4: User testing</h4>
  5527.  
  5528. <p><strong>Author:</strong> Ida (UX)</p>
  5529.  
  5530. <p><strong>Reviewer:</strong> The users.</p>
  5531.  
  5532.  
  5533.  
  5534.  
  5535.  
  5536.  
  5537.  
  5538.  
  5539.  
  5540.  
  5541.  
  5542. <figure >
  5543. <a href="https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/cdaaea55-cc0a-4930-80f7-af953d4b7316/07-user-testing.jpeg">
  5544. <img
  5545. srcset="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_400/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/cdaaea55-cc0a-4930-80f7-af953d4b7316/07-user-testing.jpeg 400w,
  5546.        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_800/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/cdaaea55-cc0a-4930-80f7-af953d4b7316/07-user-testing.jpeg 800w,
  5547.        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_1200/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/cdaaea55-cc0a-4930-80f7-af953d4b7316/07-user-testing.jpeg 1200w,
  5548.        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_1600/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/cdaaea55-cc0a-4930-80f7-af953d4b7316/07-user-testing.jpeg 1600w,
  5549.        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_2000/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/cdaaea55-cc0a-4930-80f7-af953d4b7316/07-user-testing.jpeg 2000w"
  5550. src="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_400/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/cdaaea55-cc0a-4930-80f7-af953d4b7316/07-user-testing.jpeg"
  5551. sizes="100vw"
  5552. alt="Two women (Ida and a user) sitting next to eachother in front of a laptop."
  5553. />
  5554. </a>
  5555.  
  5557. <figcaption class="op-vertical-bottom">
  5558. Ida doing user testing on a small budget. (<a href='https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/cdaaea55-cc0a-4930-80f7-af953d4b7316/07-user-testing.jpeg'>Large preview</a>)
  5559. </figcaption>
  5561. </figure>
  5562.  
  5563.  
  5564. <p>Yes, we consider user testing a form of review. We brought our newly built sign-up flow face-to-face with actual users. This step gave us a ton of insight, and the most significant changes in our sign-up flow came as a result.</p>
  5565.  
  5566. <h4>Step 5: Design</h4>
  5567.  
  5568. <p><strong>Author:</strong> Eivind (design)</p>
  5569.  
  5570. <p><strong>Reviewers:</strong> Ingvild (engineering) and Ida (UX).</p>
  5571.  
  5572.  
  5573.  
  5574.  
  5575.  
  5576.  
  5577.  
  5578.  
  5579.  
  5580.  
  5581.  
  5582. <figure >
  5583. <a href="https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/f66371e6-9301-4f66-8d3f-4543e51c8db3/08-design.png">
  5584. <img
  5585. srcset="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_400/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/f66371e6-9301-4f66-8d3f-4543e51c8db3/08-design.png 400w,
  5586.        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_800/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/f66371e6-9301-4f66-8d3f-4543e51c8db3/08-design.png 800w,
  5587.        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_1200/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/f66371e6-9301-4f66-8d3f-4543e51c8db3/08-design.png 1200w,
  5588.        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_1600/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/f66371e6-9301-4f66-8d3f-4543e51c8db3/08-design.png 1600w,
  5589.        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_2000/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/f66371e6-9301-4f66-8d3f-4543e51c8db3/08-design.png 2000w"
  5590. src="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_400/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/f66371e6-9301-4f66-8d3f-4543e51c8db3/08-design.png"
  5591. sizes="100vw"
  5592. alt="A screenshot from Slack. Eivind, the designer, has posted a screenshot, and Ida replies with enthusiasm."
  5593. />
  5594. </a>
  5595.  
  5597. <figcaption class="op-vertical-bottom">
  5598. The first version of the sign-up flow was based on existing design components. In this stage, Eivind developed some new components to help improve the design. (<a href='https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/f66371e6-9301-4f66-8d3f-4543e51c8db3/08-design.png'>Large preview</a>)
  5599. </figcaption>
  5601. </figure>
  5602.  
  5603.  
  5604. <p>When design suddenly shows up here in step 5, it might look a lot like a waterfall process. However, our designer Eivind had already been involved as a reviewer since step 2. He gave a bunch of useful feedback at that stage and was also able to start thinking about how we could improve the design of the sign-up flow beyond the existing modules in our design system. At this step, Eivind could also help solve some of the issues that we identified in the user testing.</p>
  5605.  
  5606. <h4>Step 6: Implementation</h4>
  5607.  
  5608. <p><strong>Author:</strong> Ingvild (engineering)</p>
  5609.  
  5610. <p><strong>Reviewer:</strong> Eivind (design), Ida (UX) and Dag-Inge (engineering).</p>
  5611.  
  5612. <p>And then we’re back to implementing.</p>
  5613.  
  5614. <h5>Why review works</h5>
  5615.  
  5616. <p>In summary, there’s always just one author, thus avoiding design by committee. By involving a range of disciplines as reviewers early on, we avoid having a waterfall process.</p>
  5617.  
  5618. <p>People can flag their concerns early and also start thinking about how they can contribute later on. The clearly defined roles keep the process on track.</p>
  5619.  
  5620. <h3>Regular Review Walkthroughs</h3>
  5621.  
  5622. <p>Taking inspiration from code walkthroughs, we also do regular review walkthroughs with different foci, guided by the following principles:</p>
  5623.  
  5624. <ul>
  5625. <li>The walkthrough is done <strong>together.</strong></li>
  5626. <li><strong>One person</strong> is in charge of reviewing and documenting.</li>
  5627. <li>The idea is to <strong>identify issues</strong>, not necessarily to solve them.</li>
  5628. <li>Choose a <strong>format</strong> that gives as much context as possible, so that it’s easy to act upon the findings later (e.g. InvisionApp for visual reviews, Google Docs for text, and so on).</li>
  5629. </ul>
  5630.  
  5631. <p>We’ve done review walkthroughs for things such as accessibility audits, reviewing feature requests, auditing the implementation of the design, and doing heuristic usability evaluations.</p>
  5632.  
  5633. <p>When we do our quarterly accessibility reviews, our accessibility consultant Joakim first goes through the interface and documents and prioritizes the issues he’s found in a shared Google Sheet. Joakim then walks us through the most important issues he’s identified.</p>
  5634.  
  5635. <p>Meeting face-to-face (or at least on video) to go through the issues helps create an environment for learning rather than a feeling of being supervised or micromanaged.</p>
  5636.  
  5637.  
  5638.  
  5639.  
  5640.  
  5641.  
  5642.  
  5643.  
  5644.  
  5645.  
  5646.  
  5647. <figure >
  5648. <a href="https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/ef4aac65-f779-4c7d-98dd-aeba501cba07/09-accessibility-review.jpeg">
  5649. <img
  5650. srcset="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_400/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/ef4aac65-f779-4c7d-98dd-aeba501cba07/09-accessibility-review.jpeg 400w,
  5651.        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_800/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/ef4aac65-f779-4c7d-98dd-aeba501cba07/09-accessibility-review.jpeg 800w,
  5652.        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_1200/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/ef4aac65-f779-4c7d-98dd-aeba501cba07/09-accessibility-review.jpeg 1200w,
  5653.        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_1600/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/ef4aac65-f779-4c7d-98dd-aeba501cba07/09-accessibility-review.jpeg 1600w,
  5654.        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_2000/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/ef4aac65-f779-4c7d-98dd-aeba501cba07/09-accessibility-review.jpeg 2000w"
  5655. src="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_400/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/ef4aac65-f779-4c7d-98dd-aeba501cba07/09-accessibility-review.jpeg"
  5656. sizes="100vw"
  5657. alt="Three people in a sofa gathered around a laptop. They’re discussing and smiling."
  5658. />
  5659. </a>
  5660.  
  5662. <figcaption class="op-vertical-bottom">
  5663. Accessibility review: Joakim (right) walks Ingvild and Dag-Inge through the accessibility issues he found in his audit. (<a href='https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/ef4aac65-f779-4c7d-98dd-aeba501cba07/09-accessibility-review.jpeg'>Large preview</a>)
  5664. </figcaption>
  5666. </figure>
  5667.  
  5668.  
  5669. <p>If you find yourself always being tied up with something that’s due for release, or fixing whatever is at the top of your inbox, reviews can help remedy that. If you set aside regular half days for reviewing work you’ve already done, you can identify issues before they become urgent. It can also help you refocus and make sure you’re priorities are keeping along the right lines. Your team should maybe not begin building that new feature before you’re confident that the existing features are living up to your standards.</p>
  5670.  
  5671. <h3>User Testing Is A Form Of Review</h3>
  5672.  
  5673. <p>An important motivation for code reviews is to reduce risk. By doing it every single time you introduce a change or add something new to your product, and not just when you suspect something is maybe not up to par, you diminish the chance of shipping bugs or subpar features. I believe we should look at <a href="https://confrere.com/about/how-we-work/user-testing">user testing</a> from the same perspective.</p>
  5674.  
  5675. <p>You see, if you want to reduce the risk of shipping with major usability issues, user testing has to be part of your process. Just having your UX designers review the interface isn’t enough. <a href="http://www.measuringu.com/blog/effective-he.php">Several studies</a> have found that even usability experts fail in identifying every actual usability problems. On average, 1 in 3 issues identified by experts were false alarms &mdash; they weren’t issues for users in practice. But worse, 1 in 2 issues that users did in fact have, were overlooked by the experts.</p>
  5676.  
  5677. <p>Skipping user testing is just as big a risk as skipping code review.</p>
  5678.  
  5679. <h3>Does Review Mean Death To Creativity?</h3>
  5680.  
  5681. <p>People working within design, user experience, and content often have educational backgrounds from art schools or maybe literature, in which the sole creator or creative artistic genius is hailed as the ideal. If you go back in history, this used to be the case for developers as well. Over time, this has changed by necessity as web development has grown more complex.</p>
  5682.  
  5683. <p>If you cling to the idea of creativity coming from somewhere deep within yourself, the idea of review might feel threatening or scary. Someone meddling in your half-finished work? Ouch. But if you think about creativity as something that can spring from many sources, including dialogue, collaboration, or any form of inspiration (whether from the outside or from someplace within you), then a review is only an asset and an opportunity.</p>
  5684.  
  5685. <p>As long as we’re building something for the web, there’s no way around collaborating with other people, be it within our own field or others. And a good idea will survive review.</p>
  5686.  
  5687. <p>Let’s create something great together.</p>
  5688.  
  5689. <div class="signature">
  5690.  <img src="https://www.smashingmagazine.com/images/logo/logo--red.png" alt="Smashing Editorial">
  5691.  <span>(rb, ra, yk, il)</span>
  5692. </div>
  5693.  
  5694.  
  5695.              </article>
  5696.            </body>
  5697.          </html>
  5698.        ]]></content:encoded>
  5699.      </item>
  5700.    
  5701.      <item>
  5702.        
  5703.          
  5704.          <author>Rachel Andrew</author>
  5705.        
  5706.        <title>Pattern Library First: An Approach For Managing CSS</title>
  5707.        <link>https://www.smashingmagazine.com/2018/07/pattern-library-first-css/</link>
  5708.        <pubDate>Mon, 09 Jul 2018 14:00:35 +0200</pubDate>
  5709.        <guid>https://www.smashingmagazine.com/2018/07/pattern-library-first-css/</guid>
  5710.        <description>In this article, based on the talk that I gave at Smashing Conference in Toronto, I’m going to describe a method of working that I’ve adopted over the past two years that helps me to manage CSS across my projects.
  5711. I’ll be showing you how to use the pattern library tool Fractal, to manage your CSS on a component by component basis, while allowing you to use the tools you are already familiar with.</description>
  5712.        <content:encoded><![CDATA[
  5713.          <html>
  5714.            <head>
  5715.              <meta charset="utf-8">
  5716.              <link rel="canonical" href="https://www.smashingmagazine.com/2018/07/pattern-library-first-css/" />
  5717.              <title>Pattern Library First: An Approach For Managing CSS</title>
  5718.            </head>
  5719.            <body>
  5720.              <article>
  5721.                <header>
  5722.                  <h1>Pattern Library First: An Approach For Managing CSS</h1>
  5723.                  
  5724.                    
  5725.                    <address>Rachel Andrew</address>
  5726.                  
  5727.                  <time datetime="2018-07-09T14:00:35&#43;02:00" class="op-published">2018-07-09T14:00:35+02:00</time>
  5728.                  <time datetime="2018-07-23T11:42:51&#43;00:00" class="op-modified">2018-07-23T11:42:51+00:00</time>
  5729.                </header>
  5730.                <p>In this article, based on the talk that I gave at Smashing Conference in Toronto, I’m going to describe a method of working that I’ve adopted over the past two years that helps me to manage CSS across my projects.</p>
  5731.  
  5732. <p>I’ll be showing you how to use the pattern library tool <a href="https://fractal.build/">Fractal</a>, to manage your CSS on a component by component basis, while allowing you to use the tools you are already familiar with. While this serves as an introduction to Fractal, and why we have selected this particular pattern library, it is likely this way of working would transfer to other solutions. </p>
  5733.  
  5734. <h4>Our Projects</h4>
  5735.  
  5736. <p>My company has a couple of products &mdash; Perch and Perch Runway CMS and Notist, a software as a service application for public speakers. These products are quite different, especially given that Perch is a self-hosted system and Notist is SaaS, however, they both have a lot of user interface to develop. We also have all of the associated websites and documentation for these products, plus other things that we work on such as the 24 Ways website. After discovering Fractal two years ago, we have moved every new project &mdash; large and small &mdash; into Fractal.</p>
  5737.  
  5738. <h4>Problems we wanted to solve</h4>
  5739.  
  5740. <p>I began investigating pattern library solutions two years ago when I started work rebuilding the Perch UI for version 3. A feature of Perch is that the templates you create for the output of content on your website become the schema of the admin UI. This means that any fieldtype used in a template needs to be able to exist alongside any other fieldtype. We don’t know how our customers might combine these, and there are a huge number of possible combinations. It's also not a "website", and I didn't want to try and force the pattern library into something designed for organizing website patterns.</p>
  5741.  
  5742. <p>As Perch is self-hosted &mdash; people download it and host it on their own servers &mdash; we need to use the simplest tech stack possible in order to not place any additional barriers to entry in front of people, many of who are new to using a CMS. To add an extra level of fun, we support back to Internet Explorer 9, yet I intended to use a lot of Flexbox &mdash; as this was before Grid Layout shipped.</p>
  5743.  
  5744.  
  5745.  
  5746. <aside class="product-panel product-panel__tilted product-panel--book" data-audience="non-subscriber">
  5747.    <div class="container product-panel--book__container">
  5748.      <div class="panel__description panel__description--book">
  5749.    <p>With so much happening on the web, what should we really pay attention to? At <a href="https://smashingconf.com/ny-2018/">SmashingConf New York 2018</a> 🇺🇸 we’ll explore everything from PWAs, font loading best practices, web performance and eCommerce UX optimization, to refactoring CSS, design workflows and convincing your clients. With Sarah Drasner, Dan Mall, Sara Soueidan, Jason Grigsby, and <a href="http://smashed.by/confpanelspeakers">many other speakers</a>. Oct <span class="small-caps">23–24</span>.</p>
  5750.      <a href="http://smashed.by/confpanelspeakers" class="btn btn--green btn--large">
  5751.        Check the speakers&nbsp;→
  5752.      </a>
  5753.      </div>
  5754.      <div class="panel__image panel__image--book">
  5755.        <a href="http://smashed.by/confpanelspeakers" class="books__book__image">
  5756.        <div class="books__book__img">
  5757.          <img src="https://res.cloudinary.com/indysigner/image/upload/v1529498640/sarah-drasner-opt_kaxhos.png" alt="SmashingConf New York 2018, with Dan Mall, Sara Soueidan, Sarah Drasner and many others." width="310" height="400">
  5758.        </div>
  5759.      </a>
  5760.      </div>
  5761.    </div>
  5762.  </aside>
  5763.  
  5764.  
  5765.  
  5766.  
  5767. <p>I was also keen to avoid using tools which came with a lot of relearning how we worked, and completely changing our process. Any additional tool or change to the way that you work on your projects brings with it new friction. You can solve one problem, but bring in a whole new set of problems if you make large changes to the way that you work. In our case, we were using Sass in a fairly limited way, and processing that using Gulp. None of our projects use a Javascript framework, we’re just writing HTML, CSS and JavaScript.</p>
  5768.  
  5769. <p>Fractal fit our needs perfectly. It is agnostic as to the way you develop or the tools you want to use. Importantly for our purposes, it didn’t assume we were building a website. The experiment was so successful that we found ourselves using Fractal for every project large or small, as it makes the process of working on CSS far more straightforward. Even small sites I create on my own often start life in Fractal, because there are more benefits than you might think in terms of working with a pattern library, and many of those benefits make as much sense for a team of one as a large team.</p>
  5770.  
  5771. <p>Before we think about how to develop using Fractal and why I think it makes sense for small projects as well as large ones, let’s take a look at how to get the environment set up.</p>
  5772.  
  5773. <h4>Getting Started With Fractal</h4>
  5774.  
  5775. <p>The most straightforward approach for working with Fractal is to go to the Fractal website and take a look at the <a href="https://fractal.build/guide/getting-started">Getting Started Guide</a>. You will first need to install Fractal globally, you can then follow the steps listed here to create a new Fractal project.</p>
  5776.  
  5777. <p>With your new project installed, at the command line change into the folder you have just created and run the command:</p>
  5778.  
  5779. <pre><code class="language-bash">fractal start --sync</code></code></pre>
  5780.  
  5781. <p>This will start up a little server at port 3000, so you should be able to go to <code>http://localhost:3000</code> in a web browser and see your project.</p>
  5782.  
  5783. <p>Now that your project is up and running, open up the project folder in your favorite text editor and find the example component under <code>components/example</code>. You will find a config file and a file named <em>example.hbs</em>. The <em>example.hbs</em> template is the HTML of your component, you can add some more HTML to that and Fractal will automatically reload and display it. Change the file to:</p>
  5784.  
  5785. <pre><code class="language-html">&#x3C;h1&#x3E;This is my heading&#x3C;/h1&#x3E;
  5786. &#x3C;p&#x3E;{{ text }}&#x3C;/p&#x3E;</code></pre>
  5787.  
  5788. <p>You should see the heading appear in the browser. The config file can be used to add content and otherwise configure your component. If you want to read your heading text out of that file then edit that file to look like the following example:</p>
  5789.  
  5790. <pre><code class="language-html">title: Example component
  5791. context:
  5792.    text: This is an example component!
  5793.    heading: My heading</code></pre>
  5794.  
  5795. <p>Now change your <em>example.hbs</em> file to read in that text.</p>
  5796.  
  5797. <pre><code class="language-html">&#x3C;h1&#x3E;{{ heading }}&#x3C;/h1&#x3E;
  5798. &#x3C;p&#x3E;{{ text }}&#x3C;/p&#x3E;</code></pre>
  5799.  
  5800. <h5>Adding Additional Components</h5>
  5801.  
  5802. <p>You can follow the pattern of the example component to add your own. At a minimum, you need a folder (the name of the component) and a <em>.hbs</em> file using the same name. You can add the config file if you want to set configuration options.</p>
  5803.  
  5804. <p>Components can be nested into folders to make it easier to locate particular components, and how you structure the folders is completely up to you.</p>
  5805.  
  5806. <p><strong>Note</strong>: <em>It is really easy to find yourself spending a lot of time worrying about how to name your components. In Fractal at least, renaming and also reorganizing components into folders is straightforward. You can rename or move them and Fractal will update to show the new structure. I find that often the ideal structure only becomes apparent as I’m developing so I don’t worry too much at the outset and then firm it up later.</em></p>
  5807.  
  5808. <h4>Adding a CSS Workflow</h4>
  5809.  
  5810. <p>So far, we are able to create HTML components as handlebars templates, and a config file to insert data, however, we haven’t added any CSS. Ideally, we want to add the CSS for each component into the same folder as the rest of the component files and then combine it all together.</p>
  5811.  
  5812. <p>I mentioned that Fractal makes very few assumptions about your workflow; due to this, it does far less out of the box than it might if it were forcing you down a particular way of working. However, we can fairly easily get Fractal working with a Gulp setup.</p>
  5813.  
  5814. <h5>Combining Fractal, Sass, And Gulp</h5>
  5815.  
  5816. <p>The following describes a minimal setup using Gulp and Sass to create a single output CSS file. Hopefully, you can follow this process to do anything else that you would normally do in Gulp. The key thing to note is that most of this is not Fractal specific, so once you get the Fractal part working you can add in anything else following the same patterns. If you are familiar with another build tool then it is likely that you could create a similar process; if you do, and are happy to share, let us know in the comments.</p>
  5817.  
  5818. <p>First some setup, the following will enable you to follow along with the code listed in this tutorial, the locations of your Sass files and output CSS might ultimately be different to mine. The key thing is that the output CSS file needs to be somewhere in the public folder.</p>
  5819.  
  5820. <ol>
  5821.    <li>Inside the <em>public</em> folder in your Fractal install, add a folder named <em>css</em>.</li>
  5822.    <li>In the root folder of your Fractal, install add a folder <em>assets</em> inside which is a folder <em>scss</em>. Create a Sass file named <em>global.scss</em> inside that folder. Inside that file add the following line:<br/>
  5823.    <pre><code class="language-html">@import &quot;../../components/**/*.scss&quot;;</code></pre>
  5824.  </li>
  5825.    <li>Create a file named <em>example.scss</em> in your <code>example</code> component directory.</li>
  5826.    <li>Create <em>gulpfile.js</em> in the root of your Fractal project and add the below code.</li>
  5827. </ol>
  5828.  
  5829. <pre><code class="language-javascript">'use strict';
  5830.  
  5831. const gulp         = require('gulp');
  5832. const fractal      = require('./fractal.js');
  5833. const logger       = fractal.cli.console;
  5834. const sass         = require('gulp-sass');
  5835. const sassGlob     = require('gulp-sass-glob');
  5836. const plumber      = require('gulp-plumber');
  5837. const notify       = require('gulp-notify');
  5838. const path         = require('path');
  5839.  
  5840. gulp.task('sass',function() {
  5841.    return gulp.src('assets/scss/**/*.scss')
  5842.    .pipe(customPlumber('Error running Sass'))
  5843.    .pipe(sassGlob())
  5844.    .pipe(sass())
  5845.    .pipe(gulp.dest('public/css'))
  5846. });
  5847.  
  5848. gulp.task('watch', ['sass'], function() {
  5849.   gulp.watch([
  5850.        'components/**/*.scss',
  5851.        'assets/scss/**/*.scss'
  5852.        ], ['sass']);
  5853. });
  5854.  
  5855. function customPlumber(errTitle) {
  5856.    return plumber({
  5857.        errorHandler: notify.onError({
  5858.            title: errTitle || "Error running Gulp",
  5859.            message: "Error: <%= error.message %>",
  5860.        })
  5861.    });
  5862. }
  5863.  
  5864. gulp.task('fractal:start', function(){
  5865.    const server = fractal.web.server({
  5866.        sync: true
  5867.    });
  5868.    server.on('error', err => logger.error(err.message));
  5869.    return server.start().then(() => {
  5870.        logger.success(`Fractal server is now running at ${server.url}`);
  5871.    });
  5872. });
  5873.  
  5874. gulp.task('default', ['fractal:start', 'sass', 'watch']);</code></pre>
  5875.  
  5876. <p>I then install the dependencies listed at the top of the file. If you were to install those at the command line you would run:</p>
  5877.  
  5878. <p><code>npm install gulp gulp-sass gulp-sass-glob gulp-plumber gulp-notify</code></p>
  5879.  
  5880. <p>The <code>sass</code> function compiles the Sass from assets into a single file, and outputs it into the folder in <code>public</code>.</p>
  5881.  
  5882. <pre><code class="language-javascript">gulp.task(&#39;sass&#39;,function() {
  5883. return gulp.src(&#39;src/assets/scss/**/*.scss&#39;)
  5884. .pipe(customPlumber(&#39;Error running Sass&#39;))
  5885. .pipe(sassGlob())
  5886. .pipe(sass())
  5887. .pipe(gulp.dest(&#39;public/css&#39;))
  5888. });
  5889. </code></pre>
  5890.  
  5891. <p>I then create a <code>watch</code> function that will watch my Sass in <code>assets</code> and also that in individual components and compile it into the folder in public.</p>
  5892.  
  5893. <pre><code class="language-javascript">gulp.task(&#39;watch&#39;, [&#39;sass&#39;], function() {
  5894.   gulp.watch([
  5895. &#39;components/**/*.scss&#39;,
  5896. &#39;assets/scss/**/*.scss&#39;
  5897. ], [&#39;sass&#39;]);
  5898. });
  5899. </code></pre>
  5900.  
  5901. <p>That’s my CSS building. I now want to make it so that I can run gulp and it will kick off the watching of the CSS file as well as starting fractal. I do this by creating a gulp task to run the fractal start command.</p>
  5902.  
  5903. <pre><code class="language-javascript">gulp.task(&#39;fractal:start&#39;, function(){
  5904. const server = fractal.web.server({
  5905. sync: true
  5906. });
  5907. server.on(&#39;error&#39;, err =&gt; logger.error(err.message));
  5908. return server.start().then(() =&gt; {
  5909. logger.success(Fractal server is now running at ${server.url});
  5910. });
  5911. });</code></pre>
  5912.  
  5913. <p>Finally, I need to ensure that the Sass building and Fractal start run when I run gulp and the command line:</p>
  5914.  
  5915. <p><code class="language-javascript">gulp.task(&#39;default&#39;, &#39;fractal:start&#39;, &#39;sass&#39;, &#39;watch&#39;);</code></p>
  5916.  
  5917. <p>That’s my completed <em>gulpfile.js</em>. If you add this into your default Fractal project, make sure the folders are in place for the paths mentioned. You should be able to go to the command line, run <code>gulp</code>, and Fractal will start.</p>
  5918.  
  5919.  
  5920.  
  5921.  
  5922.  
  5923.  
  5924.  
  5925.  
  5926.  
  5927.  
  5928.  
  5929. <figure class="article__image break-out">
  5931. <img
  5932. srcset="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_400/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/30f5f567-218a-4813-9ccd-dfffbadbcfb7/cli.png 400w,
  5933.        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_800/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/30f5f567-218a-4813-9ccd-dfffbadbcfb7/cli.png 800w,
  5934.        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_1200/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/30f5f567-218a-4813-9ccd-dfffbadbcfb7/cli.png 1200w,
  5935.        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_1600/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/30f5f567-218a-4813-9ccd-dfffbadbcfb7/cli.png 1600w,
  5936.        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_2000/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/30f5f567-218a-4813-9ccd-dfffbadbcfb7/cli.png 2000w"
  5937. src="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_400/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/30f5f567-218a-4813-9ccd-dfffbadbcfb7/cli.png"
  5938. sizes="100vw"
  5939. alt="Commandline output"
  5940. />
  5942.  
  5944. <figcaption class="op-vertical-bottom">
  5945. Starting Fractal with gulp (<a href='https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/30f5f567-218a-4813-9ccd-dfffbadbcfb7/cli.pngg'>View large version</a>)
  5946. </figcaption>
  5948. </figure>
  5949.  
  5950.  
  5951. <p>We can test out our Sass by adding a variable in the <em>global.scss</em> file; you will need to add this above the line that includes the components so that the variable is available for those components.</p>
  5952.  
  5953. <pre><code class="language-css">$color1: rebeccapurple;</code></pre>
  5954.  
  5955. <p>Then in <code>example.scss</code> add a rule for the level 1 heading we added earlier:</p>
  5956.  
  5957. <pre><code class="language-css">h1 {
  5958.  color: $color1;
  5959. }</code></pre>
  5960.  
  5961. <p>If everything is set up correctly, you should find you have a <em>.css</em> file in public/css which contains the rule:</p>
  5962.  
  5963. <pre><code class="language-css">h1 {
  5964.  color: rebeccapurple;
  5965. }</code></pre>
  5966.  
  5967. <p>We need to do one more thing so that we can preview our components using the CSS we are building. We need to create a preview file, which will link in the stylesheet from the public folder. </p>
  5968.  
  5969. <p>Inside your components folder, create a file named <em>_preview.hbs</em>.</p>
  5970.  
  5971. <p>The preview file is essentially an HTML document, linking in our CSS and anything else you need to include. In the body is a tag <code>{{ yield }}</code>, and this is where a component will be placed.</p>
  5972.  
  5973. <pre><code class="language-html">&#x3C;!doctype html&#x3E;
  5974. &#x3C;html lang=&#x22;en&#x22;&#x3E;
  5975. &#x3C;head&#x3E;
  5976. &#x9;&#x3C;meta charset=&#x22;utf-8&#x22; /&#x3E;
  5977. &#x9;&#x3C;title&#x3E;Preview Layout&#x3C;/title&#x3E;
  5978. &#x9;&#x3C;meta name=&#x22;viewport&#x22; content=&#x22;width=device-width, initial-scale=1, shrink-to-fit=no&#x22;&#x3E;
  5979. &#x9;&#x3C;link rel=&#x22;stylesheet&#x22; href=&#x22;{{ path &#x27;/css/global.css&#x27; }}&#x22;&#x3E;
  5980. &#x3C;/head&#x3E;
  5981. &#x3C;body&#x3E;
  5982. &#x9;{{{ yield }}}
  5983. &#x3C;/body&#x3E;
  5984. &#x3C;/html&#x3E;</code></pre>
  5985.  
  5986. <p><strong>Note</strong>: <em>The public folder can also house any other assets that you need to display in components such as images, fonts and so on.</em></p>
  5987.  
  5988. <h5>The Pattern Library As Source Of Truth</h5>
  5989.  
  5990. <p>As we have seen, Fractal can build our CSS. In our projects, we make it so that Fractal is the <em>only</em> place we build and process CSS and other assets for the site. What this means is that our pattern library and site or application do not drift. Drift happens after you deploy the site if people start editing the CSS of the site and not bringing those changes back to the pattern library. If you can make the pattern library the place where CSS is processed then changes have to start there &mdash; which prevents drift between the live site and library.</p>
  5991.  
  5992. <p>We build everything in Fractal and then copy those public assets over to the live sites to be deployed. In addition to preventing drift between the systems, it also makes managing CSS in source control much easier. When multiple people work on one CSS file, merge conflicts can be reasonably hard to deal with. With people working on individual components in the pattern library, you can usually avoid two people committing changes to the same file at once, and if they do it is only a small file to sort out and not all of your CSS.</p>
  5993.  
  5994. <div class="sponsors__wide-place"></div>
  5995.  
  5996.  
  5997.  
  5998.  
  5999. <h3>Using A Pattern Library First Approach For Managing Fallbacks</h3>
  6000.  
  6001. <p>I have found that working pattern library first makes dealing with fallbacks in your code far more straightforward and less overwhelming than attempting to fix up a complete site or application at once. It also allows us to concentrate on the best possible case, and be creative with new techniques, rather than limit what we do due to being worried about how we will get it to work well in non-supporting browsers.</p>
  6002.  
  6003. <p>We can look at a simple case of a media object component to see how that might work. To follow along, create a <em>media</em> folder inside components in Fractal, and add the files <em>media.hbs</em> and <em>media.scss</em>.</p>
  6004.  
  6005. <h5>Start With Good Markup</h5>
  6006.  
  6007. <p>Your starting point should always be well-structured markup. In the pattern library, it may be that you will use this component with a range of markup, for example, you could use a component with content marked up as a figure in one place and just with divs in another. Your content should, however, be structured in a way that makes sense and can be read from top to bottom.</p>
  6008.  
  6009. <p>This ensures that your content is accessible at a very basic level, but it also means you can take advantage of normal flow. Normal Flow is how browsers display your content by default, with block elements progressing one after the other in the block dimension and inline elements &mdash; such as words in a sentence &mdash; running along the inline axis. For a lot of content that is exactly what you want, and by taking advantage of normal flow rather than fighting against it you make your job far easier as you create your layout.</p>
  6010.  
  6011. <p>Therefore, my component has the following markup which I add to <em>media.hbs</em>.</p>
  6012.  
  6013. <pre><code class="language-html">&#x3C;div class=&#x22;media&#x22;&#x3E;
  6014.  
  6015.  &#x3C;div class=&#x22;img&#x22;&#x3E;
  6016.    &#x3C;img src=&#x22;/img/placeholder.jpg&#x22; alt=&#x22;Placeholder&#x22;&#x3E;
  6017.  &#x3C;/div&#x3E;
  6018.  &#x3C;h2 class=&#x22;title&#x22;&#x3E;This is my title&#x3C;/h2&#x3E;
  6019.  &#x3C;div class=&#x22;content&#x22;&#x3E;
  6020.      &#x3C;p&#x3E;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis vehicula vitae ligula sit amet maximus. Nunc auctor neque ipsum, ac porttitor elit lobortis ac. Vivamus ultrices sodales tellus et aliquam. Pellentesque porta sit amet nulla vitae luctus. Praesent quis risus id dolor venenatis condimentum.&#x3C;/p&#x3E;
  6021.  &#x3C;/div&#x3E;
  6022.  &#x3C;div class=&#x22;footer&#x22;&#x3E;
  6023.    An optional footer goes here.
  6024.  &#x3C;/div&#x3E;
  6025. &#x3C;/div&#x3E;</code></pre>
  6026.  
  6027. <p>You can see how this then displays inside Fractal.</p>
  6028.  
  6029.  
  6030.  
  6031.  
  6032.  
  6033.  
  6034.  
  6035.  
  6036.  
  6037.  
  6038.  
  6039. <figure class="article__image break-out">
  6041. <img
  6042. srcset="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_400/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/bb40e309-8190-48c4-ab26-83d7bb641ca8/component-markedup.png 400w,
  6043.        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_800/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/bb40e309-8190-48c4-ab26-83d7bb641ca8/component-markedup.png 800w,
  6044.        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_1200/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/bb40e309-8190-48c4-ab26-83d7bb641ca8/component-markedup.png 1200w,
  6045.        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_1600/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/bb40e309-8190-48c4-ab26-83d7bb641ca8/component-markedup.png 1600w,
  6046.        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_2000/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/bb40e309-8190-48c4-ab26-83d7bb641ca8/component-markedup.png 2000w"
  6047. src="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_400/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/bb40e309-8190-48c4-ab26-83d7bb641ca8/component-markedup.png"
  6048. sizes="100vw"
  6049. alt="The fractal UI with the added component"
  6050. />
  6052.  
  6054. <figcaption class="op-vertical-bottom">
  6055. My component after adding the markup. (<a href='https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/bb40e309-8190-48c4-ab26-83d7bb641ca8/component-markedup.png'>View large version</a>)
  6056. </figcaption>
  6058. </figure>
  6059.  
  6060.  
  6061. <p>Once I’ve got the markup that I want, I am going to work on the desktop display that I have in mind. I’m going to use CSS Grid Layout and the <code>grid-template-areas</code> method of doing so. Add the following to <em>media.scss</em>.</p>
  6062.  
  6063. <pre><code class="language-css">img { max-width: 100%; }
  6064.  
  6065. .media &gt; .title {
  6066.  grid-area: title;
  6067. }
  6068.  
  6069. .media &gt; .img {
  6070.  grid-area: img;
  6071. }
  6072.  
  6073. .media &gt; .content {
  6074.  grid-area: bd;
  6075. }
  6076.  
  6077. .media &gt; .footer {
  6078.  grid-area: ft;
  6079. }
  6080.  
  6081. .media {
  6082.  margin-bottom: 2em;
  6083.  display: grid;
  6084.  grid-column-gap: 20px;
  6085.  grid-template-columns: 200px 3fr;
  6086.  grid-template-areas:
  6087.    &quot;img title&quot;
  6088.    &quot;img bd&quot;
  6089.    &quot;img ft&quot;;
  6090.  }</code></pre>
  6091.  
  6092. <p>We now have a simple media object layout:</p>
  6093.  
  6094.  
  6095.  
  6096.  
  6097.  
  6098.  
  6099.  
  6100.  
  6101.  
  6102.  
  6103.  
  6104. <figure class="article__image break-out">
  6106. <img
  6107. srcset="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_400/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/40d6ffb9-61a3-4715-ac63-7a65a466e926/component-layout.png 400w,
  6108.        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_800/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/40d6ffb9-61a3-4715-ac63-7a65a466e926/component-layout.png 800w,
  6109.        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_1200/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/40d6ffb9-61a3-4715-ac63-7a65a466e926/component-layout.png 1200w,
  6110.        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_1600/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/40d6ffb9-61a3-4715-ac63-7a65a466e926/component-layout.png 1600w,
  6111.        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_2000/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/40d6ffb9-61a3-4715-ac63-7a65a466e926/component-layout.png 2000w"
  6112. src="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_400/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/40d6ffb9-61a3-4715-ac63-7a65a466e926/component-layout.png"
  6113. sizes="100vw"
  6114. alt="A two column layout, image on the left text on the right"
  6115. />
  6117.  
  6119. <figcaption class="op-vertical-bottom">
  6120. The Media Object layout. (<a href='https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/40d6ffb9-61a3-4715-ac63-7a65a466e926/component-layout.png'>View large version</a>)
  6121. </figcaption>
  6123. </figure>
  6124.  
  6125.  
  6126. <p>Something you can do in Fractal is to add variations of a component. You might want to flip the media object so that the image is on the right.</p>
  6127.  
  6128. <p>Now add the CSS to <em>media.scss</em> in order to flip the layout:</p>
  6129.  
  6130. <pre><code class="language-css">.media.media-flip {
  6131. grid-template-columns: 3fr 200px ;
  6132. grid-template-areas:
  6133.  &quot;title img&quot;
  6134.  &quot;bd img&quot;
  6135.  &quot;ft img&quot;;
  6136.  }
  6137. </code></pre>
  6138.  
  6139. <p>There are two ways to create variants: file-based and configuration based. File-based is simplest and is also useful if your variant has different markup. To create a file-based variant, make a copy of your component in the media folder with the name media <em>--flip.hbs</em> (that’s two dashes in the filename).</p>
  6140.  
  6141. <p>This component should have identical markup with the class <code>media-flip</code> added to the first line, and you will then be able to see both versions.</p>
  6142.  
  6143. <pre><code>&lt;div class=&quot;media media-flip&quot;&gt;</code></pre>
  6144.  
  6145.  
  6146.  
  6147.  
  6148.  
  6149.  
  6150.  
  6151.  
  6152.  
  6153.  
  6154.  
  6155. <figure class="article__image break-out">
  6157. <img
  6158. srcset="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_400/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/4498b4db-aec4-4fa9-ae93-d8f3d8253729/component-flipped.png 400w,
  6159.        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_800/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/4498b4db-aec4-4fa9-ae93-d8f3d8253729/component-flipped.png 800w,
  6160.        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_1200/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/4498b4db-aec4-4fa9-ae93-d8f3d8253729/component-flipped.png 1200w,
  6161.        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_1600/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/4498b4db-aec4-4fa9-ae93-d8f3d8253729/component-flipped.png 1600w,
  6162.        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_2000/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/4498b4db-aec4-4fa9-ae93-d8f3d8253729/component-flipped.png 2000w"
  6163. src="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_400/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/4498b4db-aec4-4fa9-ae93-d8f3d8253729/component-flipped.png"
  6164. sizes="100vw"
  6165. alt="A two column layout, image on the right text on the left"
  6166. />
  6168.  
  6170. <figcaption class="op-vertical-bottom">
  6171. The flipped version. (<a href='https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/4498b4db-aec4-4fa9-ae93-d8f3d8253729/component-flipped.pngg'>View large version</a>)
  6172. </figcaption>
  6174. </figure>
  6175.  
  6176.  
  6177. <p>Alternately, as in this case all we need to do is add a class, you can create a variant using a config file.</p>
  6178.  
  6179. <p>If you want to do this, remove your variant file, and instead add a config file named <em>media.config.json</em> containing the following code:</p>
  6180.  
  6181. <pre><code class="language-javascript">{
  6182.    &quot;title&quot;: &quot;Media Object&quot;,
  6183.    &quot;context&quot;: {
  6184.        &quot;modifier&quot;: &quot;default&quot;
  6185.    },
  6186.    &quot;variants&quot;: [
  6187.        {
  6188.            &quot;name&quot;: &quot;Flipped&quot;,
  6189.            &quot;context&quot;: {
  6190.                &quot;modifier&quot;: &quot;flip&quot;
  6191.            }
  6192.        }
  6193.    ]
  6194. }
  6195. </code></pre>
  6196.  
  6197. <p>Then modify the first line of <em>media.hbs</em> as follows:</p>
  6198.  
  6199. <p><code class="language-html">&lt;div class=&quot;media media-{{ modifier }}&quot;&gt;</code></p>
  6200.  
  6201. <p><strong>Note</strong>: <em>You can add as many variants as you like (take a look at the <a href="https://fractal.build/guide/components/variants">documentation for variants</a> to read more).</em></p>
  6202.  
  6203. <p>We might now think about adding some CSS to change the layout based on screen size. Wrapping the layout we have created in a media query and above that creating a single column layout for smaller devices.</p>
  6204.  
  6205. <pre><code class="language-css">img {
  6206.  max-width: 100%;
  6207. }
  6208.  
  6209. .media &gt; .title {
  6210.  grid-area: title;
  6211. }
  6212.  
  6213. .media &gt; .img {
  6214.  grid-area: img;
  6215. }
  6216.  
  6217. .media &gt; .content {
  6218.  grid-area: bd;
  6219. }
  6220.  
  6221. .media &gt; .footer {
  6222.  grid-area: ft;
  6223. }
  6224.  
  6225. .media {
  6226.  display: grid;
  6227.  grid-column-gap: 20px;
  6228.  grid-template-areas:
  6229.    &quot;title&quot;
  6230.    &quot;img&quot;
  6231.    &quot;bd&quot;
  6232.    &quot;ft&quot;;
  6233.  }
  6234.  
  6235.  @media (min-width: 600px) {
  6236.    .media {
  6237.      margin-bottom: 2em;
  6238.      display: grid;
  6239.      grid-column-gap: 20px;
  6240.      grid-template-columns: 200px 3fr;
  6241.      grid-template-areas:
  6242.        &quot;img title&quot;
  6243.        &quot;img bd&quot;
  6244.        &quot;img ft&quot;;
  6245.    }
  6246.  
  6247.    .media.media-flip {
  6248.      grid-template-columns: 3fr 200px ;
  6249.      grid-template-areas:
  6250.        &quot;title img&quot;
  6251.        &quot;bd img&quot;
  6252.        &quot;ft img&quot;;
  6253.    }
  6254. }</code></pre>
  6255.  
  6256.  
  6257.  
  6258.  
  6259.  
  6260.  
  6261.  
  6262.  
  6263.  
  6264.  
  6265.  
  6266. <figure class="article__image break-out">
  6268. <img
  6269. srcset="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_400/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/1d1eb900-b706-448f-bf69-5ebd5e3ae81b/component-narrow.png 400w,
  6270.        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_800/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/1d1eb900-b706-448f-bf69-5ebd5e3ae81b/component-narrow.png 800w,
  6271.        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_1200/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/1d1eb900-b706-448f-bf69-5ebd5e3ae81b/component-narrow.png 1200w,
  6272.        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_1600/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/1d1eb900-b706-448f-bf69-5ebd5e3ae81b/component-narrow.png 1600w,
  6273.        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_2000/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/1d1eb900-b706-448f-bf69-5ebd5e3ae81b/component-narrow.png 2000w"
  6274. src="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_400/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/1d1eb900-b706-448f-bf69-5ebd5e3ae81b/component-narrow.png"
  6275. sizes="100vw"
  6276. alt="A single column layout"
  6277. />
  6279.  
  6281. <figcaption class="op-vertical-bottom">
  6282. The object for mobile devices. (<a href='https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/1d1eb900-b706-448f-bf69-5ebd5e3ae81b/component-narrow.png'>View large version</a>)
  6283. </figcaption>
  6285. </figure>
  6286.  
  6287.  
  6288. <p>Then, just as we manage the view for smaller devices within our component, we can manage the layout for older browsers which do not support grid.</p>
  6289.  
  6290. <p>In this case, I’m going to build a float-based fallback (this will work for pretty much any legacy browser). I’m only going to worry about it for wider screen sizes and leave the component displaying in normal flow for older mobile devices.</p>
  6291.  
  6292. <p>Just inside the media query, add the following CSS:</p>
  6293.  
  6294. <pre><code class="language-css">.media:after {
  6295.  content: &quot;&quot;;
  6296.  display: table;
  6297.  clear: both;
  6298. }
  6299.  
  6300. .media &gt; .media {
  6301.  margin-left: 160px;
  6302.  clear: both;
  6303. }
  6304.  
  6305. .media .img {
  6306.  float: left;
  6307.  margin: 0 10px 0 0;
  6308.  width: 150px;
  6309. }
  6310.  
  6311. .media.media-flip .img {
  6312.  float: right;
  6313.  margin: 0 0 0 10px;
  6314. }
  6315.  
  6316. .media &gt; * {
  6317.  margin: 0 0 0 160px;
  6318. }
  6319.  
  6320. .media.media-flip &gt; * {
  6321.  margin: 0 160px 0 0;
  6322. }</code></pre>
  6323.  
  6324. <p>This should sort out the display in non-grid browsers. For browsers that do support grid, you don’t need to worry about floats, i.e. when the floated item becomes a grid item, the float is removed. What will be a problem are any margins. The layout in grid supporting browsers will now be all spaced out due to the extra margins.</p>
  6325.  
  6326.  
  6327.  
  6328.  
  6329.  
  6330.  
  6331.  
  6332.  
  6333.  
  6334.  
  6335.  
  6336. <figure class="article__image break-out">
  6338. <img
  6339. srcset="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_400/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/6c5b1cbe-b879-4c6e-bace-839efd3a7a29/component-gaps.png 400w,
  6340.        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_800/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/6c5b1cbe-b879-4c6e-bace-839efd3a7a29/component-gaps.png 800w,
  6341.        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_1200/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/6c5b1cbe-b879-4c6e-bace-839efd3a7a29/component-gaps.png 1200w,
  6342.        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_1600/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/6c5b1cbe-b879-4c6e-bace-839efd3a7a29/component-gaps.png 1600w,
  6343.        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_2000/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/6c5b1cbe-b879-4c6e-bace-839efd3a7a29/component-gaps.png 2000w"
  6344. src="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_400/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/6c5b1cbe-b879-4c6e-bace-839efd3a7a29/component-gaps.png"
  6345. sizes="100vw"
  6346. alt="Two column layout with big gaps"
  6347. />
  6349.  
  6351. <figcaption class="op-vertical-bottom">
  6352. The layout is spaced out due to the extra margins. (<a href='https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/6c5b1cbe-b879-4c6e-bace-839efd3a7a29/component-gaps.png'>View large version</a>)
  6353. </figcaption>
  6355. </figure>
  6356.  
  6357.  
  6358. <p>This is where we can add a feature query, removing the margins if we know that our browser supports grid.</p>
  6359.  
  6360. <pre><code class="language-css">@supports(display: grid) {
  6361.  .media &gt; *,
  6362.  .media.media-flip &gt; * {
  6363.    margin: 0;
  6364.  }
  6365.  
  6366.  .media .img,
  6367.  .media.media-flip .img {
  6368.    width: auto;
  6369.    margin: 0;
  6370.  }
  6371.  
  6372.  .media:after {
  6373.    content: none;
  6374.  }
  6375. }</code></pre>
  6376.  
  6377. <p>That’s our small component finished. While a simple example &mdash; and it might be argued that it’s one which doesn’t really need grid at all if you <em>need</em> to have a fallback &mdash; it demonstrates the approach I’m taking across all of my projects, large and small.</p>
  6378.  
  6379. <p>To get my CSS file into production, we can take the CSS file from the public folder and add that to our production site. You could even script this process to copy it over to your site folder as it builds.</p>
  6380.  
  6381. <h5>Reduced Test Case First Development</h5>
  6382.  
  6383. <p>Something I have discovered as a key benefit in working this way, is that it really does make the browser support piece of the puzzle easier. Not only is it easier to see what fallback CSS is being included with this component, but also if we are having problems with a browser, it makes it far easier to debug them.</p>
  6384.  
  6385. <p>When you are battling with a browser issue then the thing you will generally be told to do is create a <a href="https://css-tricks.com/reduced-test-cases/">reduced test case</a>. Reduce the problem down to the smallest thing that exhibits the issue. A component in a pattern library is often very close to that reduced test case already. Certainly far closer than if you are trying to debug a problem while looking at your entire website.</p>
  6386.  
  6387. <p>In addition to making browser debugging easier, having your fallbacks included alongside the rest of the CSS makes it easier to remove the fallback code once it is no longer needed, it’s obvious this fallback code is for this component. I know that removing it won’t change the way anything else displays.</p>
  6388.  
  6389. <p>This ease of organizing our code is really why Fractal makes sense even in small projects. Given that we tend to use Gulp and Sass anyway (even on smaller projects), adding Fractal to the mix isn't a big overhead. We don't need to see it as only for our bigger projects, as even a small site might have a reasonable amount of CSS.</p>
  6390.  
  6391. <h3>See The Code</h3>
  6392.  
  6393. <p>I've created a <a href="https://github.com/rachelandrew/smashing-fractal">GitHub Project</a> which has all of the code mentioned in the article. I would suggest setting up Fractal as described in the article and then grabbing any bits - such as the gulpfile or preview layout, from my repository.</p>
  6394.  
  6395. <p>As an additional reference and to see some published Fractal projects, we have the published version of the <a href="http://patterns.perchcms.com/">Perch Pattern Library</a>, and also the Pattern Library for <a href="http://bits.24ways.org/">24 Ways</a> (built by <a href="https://twitter.com/paulrobertlloyd">Paul Robert Lloyd</a>), which you can take a look at. These are good examples of a non-website pattern library, and a more traditional one used for a site.</p>
  6396.  
  6397. <h3>How Do <em>You</em> Manage CSS?</h3>
  6398.  
  6399. <p>I really like this way of working; it allows me to write CSS in a straightforward, progressively enhanced way. Depending on the project, we may include far more tooling and processing of files. Or, I may be building a simple site in which case the setup will be pretty much as we have seen in this article &mdash; with some light processing of Sass. The fact that Fractal means we can have the same process for sites big and small, for web applications or websites. It means we can always work in a familiar way. </p>
  6400.  
  6401. <p>This works for us, and I hope this article might give you some things to experiment with. However, I would love to know the ways in which you and your team have approached managing CSS in your projects and the strengths and weaknesses of the approaches you have tried. I’d be especially interested in hearing from anyone who has developed a similar process using another pattern library solution. Add your experiences in the comments.</p>
  6402.  
  6403. <div class="signature">
  6404.  <img src="https://www.smashingmagazine.com/images/logo/logo--red.png" alt="Smashing Editorial">
  6405.  <span>(il)</span>
  6406. </div>
  6407.  
  6408.  
  6409.              </article>
  6410.            </body>
  6411.          </html>
  6412.        ]]></content:encoded>
  6413.      </item>
  6414.    
  6415.      <item>
  6416.        
  6417.          
  6418.          <author>Sam Wright &amp; James Macnamara</author>
  6419.        
  6420.        <title>Better Research, Better Design, Better Results</title>
  6421.        <link>https://www.smashingmagazine.com/2018/07/better-research-design-results/</link>
  6422.        <pubDate>Fri, 06 Jul 2018 13:45:41 +0200</pubDate>
  6423.        <guid>https://www.smashingmagazine.com/2018/07/better-research-design-results/</guid>
  6424.        <description>Over the years, one thing we have consistently seen is how little insight from digital marketers is used at the planning stages of a web development project.
  6425. Data from Google Analytics and SEMrush to tools like VWO (Visual Website Optimizer) or Hotjar are all resources that can be used to provide valuable insight ahead of the first line of code being written. Basic SEO elements, such as URL structure and metadata, should also be involved in the decision making of any web design project.</description>
  6426.        <content:encoded><![CDATA[
  6427.          <html>
  6428.            <head>
  6429.              <meta charset="utf-8">
  6430.              <link rel="canonical" href="https://www.smashingmagazine.com/2018/07/better-research-design-results/" />
  6431.              <title>Better Research, Better Design, Better Results</title>
  6432.            </head>
  6433.            <body>
  6434.              <article>
  6435.                <header>
  6436.                  <h1>Better Research, Better Design, Better Results</h1>
  6437.                  
  6438.                    
  6439.                    <address>Sam Wright &amp; James Macnamara</address>
  6440.                  
  6441.                  <time datetime="2018-07-06T13:45:41&#43;02:00" class="op-published">2018-07-06T13:45:41+02:00</time>
  6442.                  <time datetime="2018-07-23T11:42:51&#43;00:00" class="op-modified">2018-07-23T11:42:51+00:00</time>
  6443.                </header>
  6444.                
  6445.  
  6446. <p>Over the years, one thing we have consistently seen is how little insight from digital marketers is used at the planning stages of a web development project.</p>
  6447.  
  6448. <p>Data from Google Analytics and SEMrush to tools like VWO (<strong>V</strong>isual <strong>W</strong>ebsite <strong>O</strong>ptimizer) or Hotjar are all resources that can be used to provide valuable insight ahead of the first line of code being written. Basic SEO elements, such as URL structure and metadata, should also be involved in the decision making of any web design project.</p>
  6449.  
  6450. <p>This has been <a href="https://searchengineland.com/seo-website-design-everything-need-know-272899">pointed out before</a>, and it’s a sore point for many SEO and content specialists. However, in this article we’re going to focus on the issue in relation to our own preferred methodology, which is effective content research and creation, and how user intent affects the process at every stage.</p>
  6451.  
  6452. <p>We’ll then move on through each aspect of the design process, talking about SEO questions along the way, and ending up with a detailed breakdown of a workflow we feel achieves two things: websites which look great, and are fully-realized assets designed to achieve measurable goals.</p>
  6453.  
  6454. <h3 id="intelligent-content-research">Intelligent Content Research</h3>
  6455.  
  6456. <p>A website doesn’t just have to be built. It has to populated with material. The way this material is designed will have a large part in determining a website’s success, i.e. what it brings to a client’s business or organization.</p>
  6457.  
  6458. <p>This is why we find it strange that a normal web design process misses out at its earliest stages things like <a href="https://moz.com/learn/seo/what-is-keyword-research">keyword research</a>, and its more developed relative &mdash; <a href="https://www.smashingmagazine.com/content-strategy-storytelling/">content strategy</a>. So often a frame is built without enough thought about what it’s going to contain.</p>
  6459.  
  6460.  
  6461.  
  6462.  <aside class="product-panel product-panel__tilted product-panel--book" data-audience="non-subscriber" data-remove="true">
  6463.    <div class="container product-panel--book__container">
  6464.      <div class="panel__description panel__description--book">
  6465.        <p>
  6466.          Is your pattern library up to date today? <em>Alla Kholmatova</em> has just finished a fully fledged book on <strong>Design Systems</strong> and how to get them right. With common traps, gotchas and the lessons she learned. Hardcover, eBook. <em>Just sayin'.</em>
  6467.        </p>
  6468.        <a href="http://smashed.by/uxpaneldsbook">
  6469.          <button class="btn btn--green btn--large">
  6470.            Table of Contents&nbsp;&rarr;
  6471.          </button>
  6472.        </a>
  6473.      </div>
  6474.      <div class="panel__image panel__image--book">
  6475.        <a href="http://smashed.by/uxpaneldsbook" class="books__book__image">
  6476.        <div class="books__book__img">
  6477.          <img src="https://www.smashingmagazine.com/images/books/design-systems--large-opt.png">
  6478.        </div>
  6479.      </a>
  6480.      </div>
  6481.    </div>
  6482.  </aside>
  6483.  
  6484.  
  6485.  
  6486.  
  6487.  
  6488.  
  6489.  
  6490.  
  6491.    
  6492.  
  6493.  
  6494.  
  6495.  
  6496.  
  6497.  
  6498.  
  6499.  
  6500.  
  6501. <p>All of our projects at some level require keyword research, and this always involves careful attention to <a href="https://www.smashingmagazine.com/2017/05/designing-voice-experiences/">user intent</a>. As SmashingMag readers, you’ll most likely understand this concept. For the sake of clarity though, it is worth revisiting this in terms of content strategy and SEO.</p>
  6502.  
  6503. <p>Before user intent was a thing, keyword research involved gathering lists of search volumes and “difficulty” numbers and trying to spot what keywords you might rank for, without too much attention paid to whether they were queries actually likely to be used by your ideal users.</p>
  6504.  
  6505. <p>While we still have to go through this process, effective research requires more intelligent use of the data we find. We have to focus on discovering target keywords and developing material that satisfies <a href="www.uxmatters.com/mt/archives/2012/10/the-importance-of-knowing-user-intent.php">the intent behind the query</a> &mdash; while still looking out for some relevant “good opportunity” keywords (i.e. high volume, low competition) along the way.</p>
  6506.  
  6507. <p>This means that keyword research is becoming a way of understanding what users mean by their searches <em>in context</em>, what questions they want answering, and what kind of language they use, all serving the purpose of creating content that has the best chance of helping a website meet its owner’s goals.</p>
  6508.  
  6509. <h3 id="user-intent-and-content-creation">User Intent And Content Creation</h3>
  6510.  
  6511. <p>User intent informs keyword research, which in time becomes content strategy, and then creation. The content we create always has a purpose, and in the majority of cases it is to satisfy the intent behind a user query.</p>
  6512.  
  6513. <p>As a broad example, let’s take the query “coffee”. Here’s how the results look &mdash; notice the different types of content aimed at meeting varying intents:</p>
  6514.  
  6515.  
  6516.  
  6517.  
  6518.  
  6519.  
  6520.  
  6521.  
  6522.  
  6523.  
  6524.  
  6525. <figure >
  6526. <a href="https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/362a5872-cdd0-4ddc-b090-fc8d715af8da/2-google-search-results-page.png">
  6527. <img
  6528. srcset="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_400/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/362a5872-cdd0-4ddc-b090-fc8d715af8da/2-google-search-results-page.png 400w,
  6529.        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_800/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/362a5872-cdd0-4ddc-b090-fc8d715af8da/2-google-search-results-page.png 800w,
  6530.        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_1200/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/362a5872-cdd0-4ddc-b090-fc8d715af8da/2-google-search-results-page.png 1200w,
  6531.        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_1600/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/362a5872-cdd0-4ddc-b090-fc8d715af8da/2-google-search-results-page.png 1600w,
  6532.        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_2000/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/362a5872-cdd0-4ddc-b090-fc8d715af8da/2-google-search-results-page.png 2000w"
  6533. src="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_400/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/362a5872-cdd0-4ddc-b090-fc8d715af8da/2-google-search-results-page.png"
  6534. sizes="100vw"
  6535. alt="Search engine results page for coffee"
  6536. />
  6537. </a>
  6538.  
  6540. <figcaption class="op-vertical-bottom">
  6541. (<a href='https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/362a5872-cdd0-4ddc-b090-fc8d715af8da/2-google-search-results-page.png'>Large preview</a>)
  6542. </figcaption>
  6544. </figure>
  6545.  
  6546.  
  6547. <p>The results vary hugely according to the audience they are targeting. Some are aimed at people wanting to find somewhere to grab a coffee nearby, others are sites where you can order your joe online. There are also resources looking at coffee’s history and nutritional information.</p>
  6548.  
  6549. <p>While we don’t often have to deal with such broad terms, all of this has to be thought about, unpicked and planned according to a website’s purpose. This means content research, when focused on users, has obvious and enormous implications when it comes to site architecture and even aesthetics &mdash; i.e. the first things to be worked out in any design process.</p>
  6550.  
  6551. <h3 id="when-content-isn-t-considered">When Content Isn’t Considered</h3>
  6552.  
  6553. <p>One of the most common issues we see with both old and new sites is content that has not designed to fully address user queries, in terms of exact phrases as well as general intent. In some cases, this is easy to fix &mdash; for example, a few tweaks to a page’s metadata and copy can often clarify its query and user targeting almost instantly.</p>
  6554.  
  6555. <p>In many others though, the problems are much more serious, and a revised architecture or navigation is required as part of an entirely new content strategy &mdash; a costly process that could have been avoided if the right professionals had been consulted all along.</p>
  6556.  
  6557. <p>Here are some scenarios specific to site content we’ve encountered too many times:</p>
  6558.  
  6559. <h4 id="scenario-1-shiny-new-website-dull-new-content">Scenario 1: Shiny New Website, Dull New Content</h4>
  6560.  
  6561. <p>A client &mdash; <a href="https://www.smashingmagazine.com/2010/02/is-john-the-client-dense-or-are-you-failing-him/">let’s call him John</a> &mdash; is launching a completely new site, with no previous content to refer to.</p>
  6562.  
  6563. <p>However, if John isn’t prompted to think about copy, content or SEO until much later down the line &mdash; typically after the back-end development phase &mdash; then poor decisions can be made, while there is also the risk that he will lose some of his motivation, energy, and patience with the project.</p>
  6564.  
  6565. <p>A rush to see it completed means the content isn’t researched or executed well enough to be effective in the long term. <em>Eventually it has to be looked at again during a lengthy and costly second-stage SEO and content creation campaign</em>.</p>
  6566.  
  6567. <h4 id="scenario-2-same-content-same-problems">Scenario 2: Same Content, Same Problems</h4>
  6568.  
  6569. <p>A rebuild of an existing site means there’s existing content to look at and refer to. Sometimes, John is so rushed, or is so intent on keeping costs down at this stage, content is not considered at all.</p>
  6570.  
  6571. <p>The same content is used on the old site as on the new site, and John wonders why his site doesn’t shoot immediately to number one for all of his top keywords. <em>Eventually it has to be looked at again during a lengthy and costly second-stage SEO and content creation campaign</em>.</p>
  6572.  
  6573. <h4 id="new-content-or-else">New Content, Or Else!</h4>
  6574.  
  6575. <p>Sometimes a valuable, authoritative site is rebuilt, as part of a rebrand for example. John insists that everything is new. Without the proper research spelling this out, for example analytics data (explored in more detail below), John isn’t aware of the assets he already has. He gets rid of the old content (or does something even worse like switch to a new domain) that search engines thought was valuable, and rankings mysteriously tank. <em>Eventually it has to be looked at again during a lengthy and costly second-stage SEO and content creation campaign</em>.</p>
  6576.  
  6577. <h3 id="workflow-issues-when-seos-are-called-in-after-the-fact">Workflow Issues When SEOs Are Called In After The Fact</h3>
  6578.  
  6579. <p>We have to make do with what we get of course, but it is frustrating for SEOs to work on projects well after problems have set it, and we end up having to suggest that a relatively new site needs to be pulled apart if it has any hope of realizing its value.</p>
  6580.  
  6581. <p>When SEO isn’t considered from the beginning, the page layout and semantic markup haven’t considered excerpts, H-tags, metadata or how the CMS can aid SEO in the long term. Many clients will then turn to quick fixes such Wordpress plugins like Yoast. There’s a good chance that these will be ineffective or used incorrectly, perpetuating the problems at hand.</p>
  6582.  
  6583.  
  6584.  
  6585.  
  6586.  
  6587.  
  6588.  
  6589.  
  6590.  
  6591.  
  6592.  
  6593. <figure >
  6594. <a href="https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/2061d5f8-09b5-4666-aa6f-e995ae561b5a/5-downward-results-graph.png">
  6595. <img
  6596. srcset="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_400/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/2061d5f8-09b5-4666-aa6f-e995ae561b5a/5-downward-results-graph.png 400w,
  6597.        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_800/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/2061d5f8-09b5-4666-aa6f-e995ae561b5a/5-downward-results-graph.png 800w,
  6598.        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_1200/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/2061d5f8-09b5-4666-aa6f-e995ae561b5a/5-downward-results-graph.png 1200w,
  6599.        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_1600/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/2061d5f8-09b5-4666-aa6f-e995ae561b5a/5-downward-results-graph.png 1600w,
  6600.        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_2000/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/2061d5f8-09b5-4666-aa6f-e995ae561b5a/5-downward-results-graph.png 2000w"
  6601. src="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_400/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/2061d5f8-09b5-4666-aa6f-e995ae561b5a/5-downward-results-graph.png"
  6602. sizes="100vw"
  6603. alt="Graph showing negative results"
  6604. />
  6605. </a>
  6606.  
  6608. <figcaption class="op-vertical-bottom">
  6609. (<a href='https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/2061d5f8-09b5-4666-aa6f-e995ae561b5a/5-downward-results-graph.png'>Large preview</a>)
  6610. </figcaption>
  6612. </figure>
  6613.  
  6614.  
  6615. <p>So, guess what? An SEO specialist is brought in after the site has been launched.</p>
  6616.  
  6617. <p>Now the client is unhappy with their existing agency and places a high importance on improving SEO. In turn, the SEO specialist has a difficult job trying not to undermine the web agency but still needs to recommend structural and on-page adjustments.</p>
  6618.  
  6619. <p>They will also face problems with client expectations, who will unsurprisingly feel ripped-off and begrudge spending more money on their new shiny website.</p>
  6620.  
  6621. <p>Does this all sound familiar? The crux of our argument is that by bringing inline processes such as intent-focused keyword research from the beginning, these situations can be avoided and everyone can get along.</p>
  6622.  
  6623. <p>At the same time, an integrated approach will mean better UX and conversions alongside a strong SEO performance. Better focused content can also mean <a href="https://www.digitalmarketingpro.net/5-ways-to-lower-cpc-costs-in-your-ppc-campaigns-220/">lower PPC costs</a> too, as relevancy is a part of Google’s Adword calculation.</p>
  6624.  
  6625. <p>Rather than an expensive design phase followed by a second round of expensive SEO work, the whole process can be streamlined, keeping time and costs down, clients happier, and producing a better final product as a result.</p>
  6626.  
  6627. <div class="sponsors__wide-place"></div>
  6628.  
  6629.  
  6630.  
  6631.  
  6632. <h3 id="a-new-design-process">A New Design Process</h3>
  6633.  
  6634. <p>This is all well and good, but how can we put it into practice? With varying degrees of complexity, for many in the industry the design process will look like this:</p>
  6635.  
  6636. <h4 id="a-typical-workflow">A Typical Workflow</h4>
  6637.  
  6638.  
  6639.  
  6640.  
  6641.  
  6642.  
  6643.  
  6644.  
  6645.  
  6646.  
  6647.  
  6648. <figure >
  6649. <a href="https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/902d6deb-d240-4b51-96fa-ea2955cdd307/6-different-stages-graph-one.png">
  6650. <img
  6651. srcset="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_400/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/902d6deb-d240-4b51-96fa-ea2955cdd307/6-different-stages-graph-one.png 400w,
  6652.        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_800/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/902d6deb-d240-4b51-96fa-ea2955cdd307/6-different-stages-graph-one.png 800w,
  6653.        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_1200/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/902d6deb-d240-4b51-96fa-ea2955cdd307/6-different-stages-graph-one.png 1200w,
  6654.        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_1600/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/902d6deb-d240-4b51-96fa-ea2955cdd307/6-different-stages-graph-one.png 1600w,
  6655.        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_2000/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/902d6deb-d240-4b51-96fa-ea2955cdd307/6-different-stages-graph-one.png 2000w"
  6656. src="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_400/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/902d6deb-d240-4b51-96fa-ea2955cdd307/6-different-stages-graph-one.png"
  6657. sizes="100vw"
  6658. alt="Flow graph showing the different processes, project planning, design, and development &amp; launch"
  6659. />
  6660. </a>
  6661.  
  6663. <figcaption class="op-vertical-bottom">
  6664. (<a href='https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/902d6deb-d240-4b51-96fa-ea2955cdd307/6-different-stages-graph-one.png'>Large preview</a>)
  6665. </figcaption>
  6667. </figure>
  6668.  
  6669.  
  6670. <p>It’s worth stating that good developers will focus on user experience and the visitor journey in their own workflow. Instead, a typical project may move through these stages:</p>
  6671.  
  6672.  
  6673.  
  6674.  
  6675.  
  6676.  
  6677.  
  6678.  
  6679.  
  6680.  
  6681.  
  6682. <figure >
  6683. <a href="https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/94781d36-8c47-45dd-b9ba-c783996b4a1f/7-different-stages-graph-two.png">
  6684. <img
  6685. srcset="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_400/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/94781d36-8c47-45dd-b9ba-c783996b4a1f/7-different-stages-graph-two.png 400w,
  6686.        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_800/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/94781d36-8c47-45dd-b9ba-c783996b4a1f/7-different-stages-graph-two.png 800w,
  6687.        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_1200/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/94781d36-8c47-45dd-b9ba-c783996b4a1f/7-different-stages-graph-two.png 1200w,
  6688.        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_1600/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/94781d36-8c47-45dd-b9ba-c783996b4a1f/7-different-stages-graph-two.png 1600w,
  6689.        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_2000/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/94781d36-8c47-45dd-b9ba-c783996b4a1f/7-different-stages-graph-two.png 2000w"
  6690. src="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_400/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/94781d36-8c47-45dd-b9ba-c783996b4a1f/7-different-stages-graph-two.png"
  6691. sizes="100vw"
  6692. alt="Flow graph showing the different processes, project planning, design, and development &amp; launch"
  6693. />
  6694. </a>
  6695.  
  6697. <figcaption class="op-vertical-bottom">
  6698. (<a href='https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/94781d36-8c47-45dd-b9ba-c783996b4a1f/7-different-stages-graph-two.png'>Large preview</a>)
  6699. </figcaption>
  6701. </figure>
  6702.  
  6703.  
  6704. <h4 id="a-different-approach">A Different Approach</h4>
  6705.  
  6706. <p>Over the past year or so, we have put a lot of effort into refining this process in a way that we believe gives the best possible value for our clients. Here it is:</p>
  6707.  
  6708. <h5 id="project-planning">Project planning</h5>
  6709.  
  6710.  
  6711.  
  6712.  
  6713.  
  6714.  
  6715.  
  6716.  
  6717.  
  6718.  
  6719.  
  6720. <figure >
  6721. <a href="https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/3b3133d7-a9fd-4837-abd3-86809319b0ba/8-project-planning.png">
  6722. <img
  6723. srcset="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_400/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/3b3133d7-a9fd-4837-abd3-86809319b0ba/8-project-planning.png 400w,
  6724.        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_800/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/3b3133d7-a9fd-4837-abd3-86809319b0ba/8-project-planning.png 800w,
  6725.        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_1200/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/3b3133d7-a9fd-4837-abd3-86809319b0ba/8-project-planning.png 1200w,
  6726.        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_1600/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/3b3133d7-a9fd-4837-abd3-86809319b0ba/8-project-planning.png 1600w,
  6727.        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_2000/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/3b3133d7-a9fd-4837-abd3-86809319b0ba/8-project-planning.png 2000w"
  6728. src="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_400/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/3b3133d7-a9fd-4837-abd3-86809319b0ba/8-project-planning.png"
  6729. sizes="100vw"
  6730. alt="Flow graph showing the different processes, specifically project planning and defining budget"
  6731. />
  6732. </a>
  6733.  
  6735. <figcaption class="op-vertical-bottom">
  6736. (<a href='https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/3b3133d7-a9fd-4837-abd3-86809319b0ba/8-project-planning.png'>Large preview</a>)
  6737. </figcaption>
  6739. </figure>
  6740.  
  6741.  
  6742. <p>As always, this should be the first step, as it will define the scope of the work ahead. Be realistic and build in room for error, and be very aware that you get what you pay for. Under-budgeting runs the risk of falling short on key areas such as design, functionality, and content. At the same time, if all the project’s budget is swallowed up on design and development, there will be no room for a supporting marketing strategy or ongoing updates and improvements.</p>
  6743.  
  6744.  
  6745.  
  6746.  
  6747.  
  6748.  
  6749.  
  6750.  
  6751.  
  6752.  
  6753.  
  6754. <figure >
  6755. <a href="https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/394fdbc7-8ff7-4db0-8732-0a49f3dd936e/9-project-planning-2.png">
  6756. <img
  6757. srcset="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_400/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/394fdbc7-8ff7-4db0-8732-0a49f3dd936e/9-project-planning-2.png 400w,
  6758.        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_800/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/394fdbc7-8ff7-4db0-8732-0a49f3dd936e/9-project-planning-2.png 800w,
  6759.        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_1200/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/394fdbc7-8ff7-4db0-8732-0a49f3dd936e/9-project-planning-2.png 1200w,
  6760.        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_1600/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/394fdbc7-8ff7-4db0-8732-0a49f3dd936e/9-project-planning-2.png 1600w,
  6761.        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_2000/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/394fdbc7-8ff7-4db0-8732-0a49f3dd936e/9-project-planning-2.png 2000w"
  6762. src="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_400/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/394fdbc7-8ff7-4db0-8732-0a49f3dd936e/9-project-planning-2.png"
  6763. sizes="100vw"
  6764. alt="Flow graph showing the different processes, specifically project planning and defining goals"
  6765. />
  6766. </a>
  6767.  
  6769. <figcaption class="op-vertical-bottom">
  6770. (<a href='https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/394fdbc7-8ff7-4db0-8732-0a49f3dd936e/9-project-planning-2.png'>Large preview</a>)
  6771. </figcaption>
  6773. </figure>
  6774.  
  6775.  
  6776. <p>Similarly, your goals should be clear from the very start. Are you focused on acquiring email addresses or selling products? What is the one thing that you want your visitors to do above all else? Without clearly understanding this, the chances are that your site will fall short in its aims.</p>
  6777.  
  6778. <p>Once this is decided, you can move on to setting broader targets. There are a number of methods here, such as <a href="https://www.designcrawl.com/why-web-designers-need-smart-goals/">SMART goals</a> (or Specific, Measurable, Attainable, Relevant and Time Bound). These will define how a successful project will look on completion. Be realistic here &mdash; if your current site has a few hundred visits per month, don’t expect this to reach 10,000 within a few months without some serious effort and investment.</p>
  6779.  
  6780.  
  6781.  
  6782.  
  6783.  
  6784.  
  6785.  
  6786.  
  6787.  
  6788.  
  6789.  
  6790. <figure >
  6791. <a href="https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/f6f294e1-9d73-4d66-a19b-2232409448b6/10-sales-website-goals-examples.jpg">
  6792. <img
  6793. srcset="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_400/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/f6f294e1-9d73-4d66-a19b-2232409448b6/10-sales-website-goals-examples.jpg 400w,
  6794.        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_800/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/f6f294e1-9d73-4d66-a19b-2232409448b6/10-sales-website-goals-examples.jpg 800w,
  6795.        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_1200/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/f6f294e1-9d73-4d66-a19b-2232409448b6/10-sales-website-goals-examples.jpg 1200w,
  6796.        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_1600/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/f6f294e1-9d73-4d66-a19b-2232409448b6/10-sales-website-goals-examples.jpg 1600w,
  6797.        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_2000/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/f6f294e1-9d73-4d66-a19b-2232409448b6/10-sales-website-goals-examples.jpg 2000w"
  6798. src="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_400/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/f6f294e1-9d73-4d66-a19b-2232409448b6/10-sales-website-goals-examples.jpg"
  6799. sizes="100vw"
  6800. alt="Sales website goals examples, including generating more sales, improving sales conversion rate, and improving sales support"
  6801. />
  6802. </a>
  6803.  
  6805. <figcaption class="op-vertical-bottom">
  6806. (<a href='https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/f6f294e1-9d73-4d66-a19b-2232409448b6/10-sales-website-goals-examples.jpg'>Large preview</a>)
  6807. </figcaption>
  6809. </figure>
  6810.  
  6811.  
  6812. <p>At the same time, we are big fans of the <a href="https://rework.withgoogle.com/guides/set-goals-with-okrs/steps/introduction/">Objectives and Key Results</a> (OKR) approach that is used by <a href="www.businessinsider.com/googles-ranking-system-okr-2014-1?IR=T">Google</a>, LinkedIn et al. This technique can work really well for a web project as well a general business strategy.</p>
  6813.  
  6814. <p>Here’s a great video that will give you some background on the OKR system.</p>
  6815.  
  6816. <figure class="video-container"><iframe data-src="https://www.youtube.com/embed/mJB83EZtAjc" width="600" height="480" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe></figure>
  6817.  
  6818. <p>Writing effective OKRs is a bit of an art in itself, but there are some <a href="http://okrexamples.co/design-okr-examples">good examples here</a>. The main thing to remember though is that your goals are going to define the site’s architecture to some extent.</p>
  6819.  
  6820. <p>At its simplest level, people won’t be able to contact you if there is no contact form. Similarly, they will be less likely to get in touch if you remove a bunch of FAQ or blog posts that help explain what it is that your product or service does. This brings us onto our next step.</p>
  6821.  
  6822.  
  6823.  
  6824.  
  6825.  
  6826.  
  6827.  
  6828.  
  6829.  
  6830.  
  6831.  
  6832. <figure >
  6833. <a href="https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/193872df-eae5-4775-9542-7699fe40f99c/12-project-planning-3.png">
  6834. <img
  6835. srcset="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_400/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/193872df-eae5-4775-9542-7699fe40f99c/12-project-planning-3.png 400w,
  6836.        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_800/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/193872df-eae5-4775-9542-7699fe40f99c/12-project-planning-3.png 800w,
  6837.        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_1200/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/193872df-eae5-4775-9542-7699fe40f99c/12-project-planning-3.png 1200w,
  6838.        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_1600/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/193872df-eae5-4775-9542-7699fe40f99c/12-project-planning-3.png 1600w,
  6839.        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_2000/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/193872df-eae5-4775-9542-7699fe40f99c/12-project-planning-3.png 2000w"
  6840. src="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_400/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/193872df-eae5-4775-9542-7699fe40f99c/12-project-planning-3.png"
  6841. sizes="100vw"
  6842. alt="Flow graph showing the different processes, specifically project planning and reviewing existing Google Analytics data, if available"
  6843. />
  6844. </a>
  6845.  
  6847. <figcaption class="op-vertical-bottom">
  6848. (<a href='https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/193872df-eae5-4775-9542-7699fe40f99c/12-project-planning-3.png'>Large preview</a>)
  6849. </figcaption>
  6851. </figure>
  6852.  
  6853.  
  6854. <p>You may have pages that are already performing well. If that is the case, you’ll need to identify them so you can make sure they are built into your new structure. If you shed pages that bring in traffic at any point of your funnel, this could result in a loss of leads or sales. Along with URL alterations, this can be one of the main causes of drops in traffic after a migration or significant site update. It may seem obvious but it is an issue that we’ve seen time and time again.</p>
  6855.  
  6856. <p>The first stage of preventing this is to look in Google Analytics, or whichever analytics platform you use. Find out which pages are bringing in organic visits first of all. These should be built into your new plan as a priority, preferably without changing the URL and keeping a prominent place in your navigation structure.</p>
  6857.  
  6858. <p>Another great tool here is <a href="https://keyword-hero.com/">Keyword Hero</a>. This is relatively new, but it plugs into Google Analytics and removes the <a href="https://modassicmarketing.com/google-encrypted-search-phrases-not-provided-and-what-it-means-for-your-seo-strategy"><code>&lt;not provided&gt;</code></a> tag that was applied to organic keywords a few years ago.</p>
  6859.  
  6860.  
  6861.  
  6862.  
  6863.  
  6864.  
  6865.  
  6866.  
  6867.  
  6868.  
  6869.  
  6870. <figure >
  6871. <a href="https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/e38883d8-6da4-426d-b8f6-76ea1332808b/13-not-provided-tag.png">
  6872. <img
  6873. srcset="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_400/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/e38883d8-6da4-426d-b8f6-76ea1332808b/13-not-provided-tag.png 400w,
  6874.        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_800/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/e38883d8-6da4-426d-b8f6-76ea1332808b/13-not-provided-tag.png 800w,
  6875.        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_1200/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/e38883d8-6da4-426d-b8f6-76ea1332808b/13-not-provided-tag.png 1200w,
  6876.        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_1600/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/e38883d8-6da4-426d-b8f6-76ea1332808b/13-not-provided-tag.png 1600w,
  6877.        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_2000/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/e38883d8-6da4-426d-b8f6-76ea1332808b/13-not-provided-tag.png 2000w"
  6878. src="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_400/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/e38883d8-6da4-426d-b8f6-76ea1332808b/13-not-provided-tag.png"
  6879. sizes="100vw"
  6880. alt="Example of the not provided tag"
  6881. />
  6882. </a>
  6883.  
  6885. <figcaption class="op-vertical-bottom">
  6886. (<a href='https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/e38883d8-6da4-426d-b8f6-76ea1332808b/13-not-provided-tag.png'>Large preview</a>)
  6887. </figcaption>
  6889. </figure>
  6890.  
  6891.  
  6892. <p>This uses <a href="https://keyword-hero.com/how-its-done">some clever machine learning</a>, and it means that you’ll be able to see which keywords drive traffic to specific pages on your site. This is extremely useful in terms of planning which pages to keep or remove.</p>
  6893.  
  6894. <p>Of course, not all pages are important in terms of organic traffic. As mentioned, some could be crucial pre-conversion or sale, such as an FAQ page, but bring in little of the may of inbound visits to the site. Take a look at page views, and user flow here to make sure you are not missing anything.</p>
  6895.  
  6896. <p>At the same time, it’s worth bearing in mind that your data may not be perfect. Checking the validity of Google Analytics data is a pretty big subject in itself, but one of the simplest steps you can take is to check that your tracking code is implemented correctly.</p>
  6897.  
  6898. <p>Again, we won’t go into the ins-and-outs here. However, there is one trick that we recommend when carrying out content migrations. The web crawler Screaming Frog has a nifty feature that allows you to check for <a href="http://www.sitevisibility.co.uk/blog/2016/07/22/check-google-analytics-code-every-page/">Analytics code on every page</a>. More than once, we’ve uncovered valuable pages that are not being tracked, and would have been lost in a redesign.</p>
  6899.  
  6900.  
  6901.  
  6902.  
  6903.  
  6904.  
  6905.  
  6906.  
  6907.  
  6908.  
  6909.  
  6910. <figure >
  6911. <a href="https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/e899d93b-a929-4fa2-b473-970690889657/14-project-planning-4.png">
  6912. <img
  6913. srcset="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_400/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/e899d93b-a929-4fa2-b473-970690889657/14-project-planning-4.png 400w,
  6914.        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_800/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/e899d93b-a929-4fa2-b473-970690889657/14-project-planning-4.png 800w,
  6915.        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_1200/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/e899d93b-a929-4fa2-b473-970690889657/14-project-planning-4.png 1200w,
  6916.        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_1600/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/e899d93b-a929-4fa2-b473-970690889657/14-project-planning-4.png 1600w,
  6917.        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_2000/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/e899d93b-a929-4fa2-b473-970690889657/14-project-planning-4.png 2000w"
  6918. src="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_400/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/e899d93b-a929-4fa2-b473-970690889657/14-project-planning-4.png"
  6919. sizes="100vw"
  6920. alt="Flow graph showing the different processes, specifically project planning and reviewing current rankings (keywords and ranking pages), if available"
  6921. />
  6922. </a>
  6923.  
  6925. <figcaption class="op-vertical-bottom">
  6926. (<a href='https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/e899d93b-a929-4fa2-b473-970690889657/14-project-planning-4.png'>Large preview</a>)
  6927. </figcaption>
  6929. </figure>
  6930.  
  6931.  
  6932. <p>Next, it’s time to start looking to see which keywords you are visible for. There are a few tools we use here, but the most useful is <a href="https://www.semrush.com/dashboard/">SEMrush</a>. This monitors billions of keywords and tracks which sites are ranking for them. By querying its database, you can see which keywords your site is appearing for in Google’s results without manually entering them into a tracker. It’s by no means perfect, so you’ll need to manually check positions for any terms you think it may have missed too.</p>
  6933.  
  6934.  
  6935.  
  6936.  
  6937.  
  6938.  
  6939.  
  6940.  
  6941.  
  6942.  
  6943.  
  6944. <figure >
  6945. <a href="https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/8e40f258-d6b0-4c80-9fd8-e19d8046d1e0/15-top-organic-keywords.png">
  6946. <img
  6947. srcset="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_400/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/8e40f258-d6b0-4c80-9fd8-e19d8046d1e0/15-top-organic-keywords.png 400w,
  6948.        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_800/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/8e40f258-d6b0-4c80-9fd8-e19d8046d1e0/15-top-organic-keywords.png 800w,
  6949.        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_1200/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/8e40f258-d6b0-4c80-9fd8-e19d8046d1e0/15-top-organic-keywords.png 1200w,
  6950.        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_1600/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/8e40f258-d6b0-4c80-9fd8-e19d8046d1e0/15-top-organic-keywords.png 1600w,
  6951.        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_2000/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/8e40f258-d6b0-4c80-9fd8-e19d8046d1e0/15-top-organic-keywords.png 2000w"
  6952. src="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_400/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/8e40f258-d6b0-4c80-9fd8-e19d8046d1e0/15-top-organic-keywords.png"
  6953. sizes="100vw"
  6954. alt="Example of top organic keywords from SEMRUSH"
  6955. />
  6956. </a>
  6957.  
  6959. <figcaption class="op-vertical-bottom">
  6960. (<a href='https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/8e40f258-d6b0-4c80-9fd8-e19d8046d1e0/15-top-organic-keywords.png'>Large preview</a>)
  6961. </figcaption>
  6963. </figure>
  6964.  
  6965.  
  6966. <p>Once you have this information, you can start drawing it together in a spreadsheet. <a href="https://docs.google.com/spreadsheets/d/1FIbPzw7RbtcjYE0wGI-riU6cJRzfBcIPmc-F2bWlkVo/edit#gid=0">Here is a sample document</a>, and you can see the initial findings in the first tab.</p>
  6967.  
  6968.  
  6969.  
  6970.  
  6971.  
  6972.  
  6973.  
  6974.  
  6975.  
  6976.  
  6977.  
  6978. <figure >
  6979. <a href="https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/1331296b-6295-4387-acc3-7addc8ee8466/16-keyword-document.png">
  6980. <img
  6981. srcset="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_400/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/1331296b-6295-4387-acc3-7addc8ee8466/16-keyword-document.png 400w,
  6982.        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_800/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/1331296b-6295-4387-acc3-7addc8ee8466/16-keyword-document.png 800w,
  6983.        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_1200/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/1331296b-6295-4387-acc3-7addc8ee8466/16-keyword-document.png 1200w,
  6984.        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_1600/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/1331296b-6295-4387-acc3-7addc8ee8466/16-keyword-document.png 1600w,
  6985.        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_2000/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/1331296b-6295-4387-acc3-7addc8ee8466/16-keyword-document.png 2000w"
  6986. src="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_400/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/1331296b-6295-4387-acc3-7addc8ee8466/16-keyword-document.png"
  6987. sizes="100vw"
  6988. alt="Example of a keyword research document"
  6989. />
  6990. </a>
  6991.  
  6993. <figcaption class="op-vertical-bottom">
  6994. (<a href='https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/1331296b-6295-4387-acc3-7addc8ee8466/16-keyword-document.png'>Large preview</a>)
  6995. </figcaption>
  6997. </figure>
  6998.  
  6999.  
  7000.  
  7001.  
  7002.  
  7003.  
  7004.  
  7005.  
  7006.  
  7007.  
  7008.  
  7009.  
  7010. <figure >
  7011. <a href="https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/6ca6306f-a843-4843-90ea-1d8f1b9c10be/17-project-planning-5.png">
  7012. <img
  7013. srcset="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_400/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/6ca6306f-a843-4843-90ea-1d8f1b9c10be/17-project-planning-5.png 400w,
  7014.        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_800/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/6ca6306f-a843-4843-90ea-1d8f1b9c10be/17-project-planning-5.png 800w,
  7015.        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_1200/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/6ca6306f-a843-4843-90ea-1d8f1b9c10be/17-project-planning-5.png 1200w,
  7016.        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_1600/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/6ca6306f-a843-4843-90ea-1d8f1b9c10be/17-project-planning-5.png 1600w,
  7017.        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_2000/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/6ca6306f-a843-4843-90ea-1d8f1b9c10be/17-project-planning-5.png 2000w"
  7018. src="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_400/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/6ca6306f-a843-4843-90ea-1d8f1b9c10be/17-project-planning-5.png"
  7019. sizes="100vw"
  7020. alt="Flow graph showing the different processes, specifically project planning and creating audience profiles"
  7021. />
  7022. </a>
  7023.  
  7025. <figcaption class="op-vertical-bottom">
  7026. (<a href='https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/6ca6306f-a843-4843-90ea-1d8f1b9c10be/17-project-planning-5.png'>Large preview</a>)
  7027. </figcaption>
  7029. </figure>
  7030.  
  7031.  
  7032. <p>For both UX and SEO, it is important to understand who you are speaking to. Think about the types of language or phrases your users will know, as well as the tone of voice. Do they respond to images or copy, detail or bullets, flashy designs or more technical pages?</p>
  7033.  
  7034. <p>Keyword research is also really useful here, as it defines terms and reveals correct vocabulary &mdash; another example of how keyword research eventually filters down and is important to almost every step.</p>
  7035.  
  7036.  
  7037.  
  7038.  
  7039.  
  7040.  
  7041.  
  7042.  
  7043.  
  7044.  
  7045.  
  7046. <figure >
  7047. <a href="https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/c84f1a1d-4796-415c-b432-49a9a87e1c95/18-project-planning-6.png">
  7048. <img
  7049. srcset="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_400/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/c84f1a1d-4796-415c-b432-49a9a87e1c95/18-project-planning-6.png 400w,
  7050.        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_800/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/c84f1a1d-4796-415c-b432-49a9a87e1c95/18-project-planning-6.png 800w,
  7051.        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_1200/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/c84f1a1d-4796-415c-b432-49a9a87e1c95/18-project-planning-6.png 1200w,
  7052.        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_1600/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/c84f1a1d-4796-415c-b432-49a9a87e1c95/18-project-planning-6.png 1600w,
  7053.        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_2000/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/c84f1a1d-4796-415c-b432-49a9a87e1c95/18-project-planning-6.png 2000w"
  7054. src="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_400/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/c84f1a1d-4796-415c-b432-49a9a87e1c95/18-project-planning-6.png"
  7055. sizes="100vw"
  7056. alt="low graph showing the different processes, specifically project planning and carrying out user-intent focused keyword research"
  7057. />
  7058. </a>
  7059.  
  7061. <figcaption class="op-vertical-bottom">
  7062. (<a href='https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/c84f1a1d-4796-415c-b432-49a9a87e1c95/18-project-planning-6.png'>Large preview</a>)
  7063. </figcaption>
  7065. </figure>
  7066.  
  7067.  
  7068. <p>Now that we know who we are talking to, how best can you do it? We have explained the concept behind user-intent focused keyword research earlier in this document, but here’s some insight into how we go about doing it ourselves. Please note, this could be a feature in itself, so for the sake of brevity we’re just focusing on an outline here.</p>
  7069.  
  7070. <p>In terms of our toolkit, we tend to use a combination of <a href="https://www.semrush.com/dashboard/">SEMrush</a> and <a href="https://moz.com/explorer">Moz</a>. We feel that using both, as well as AdWords’ keyword planner, and any others you can get your hands on, is the best way of gathering data, as each tool will have its own strength, and often data for longer-tail keywords will be available in one tool, but not another.</p>
  7071.  
  7072. <p>Here are the first steps.</p>
  7073.  
  7074. <ul>
  7075. <li>Listing all the relevant keywords we can find along with the data we have for them, volume being the most important.</li>
  7076. <li>We’ll also include some measure of how competitive they are, as well an indication if the current is already ranking for them. We usually use Moz data here, which corresponds to this key.</li>
  7077. </ul>
  7078.  
  7079. <h5 id="key">Key</h5>
  7080.  
  7081. <table class="tablesaw break-out" data-tablesaw-mode="swipe" data-tablesaw-minimap>
  7082.        <tr>
  7083.            <td>0 - 15%</td>
  7084.