large_Crossover Series NFTs.png

medium_Crossover Series NFTs.png

small_Crossover Series NFTs.png

thumbnail_Crossover Series NFTs.png

From Photography to NFT Art: Twisted Digital Landscapes with Nate Hill

From Design System to ‘NFT Design System’: Creating TinyFaces

Neurodiversity and Inclusion: Choosing Kinder Design

medium_652ccf22c8853584bde5553986a4eed0.png

small_652ccf22c8853584bde5553986a4eed0.png

thumbnail_652ccf22c8853584bde5553986a4eed0.png

Web5 is here. Goodbye Web3? TBD.

<p><a href="https://medium.com/sketch-app-sources/chart-design-automatization-aee49630634c">medium bookmark / Raindrop.io</a> |  </p>
<h4>Sketch Tutorials</h4>
<p>Hey, how’s it going? Have you’re heard of charts? Charts, diagrams, and pies are crucial design elements allowing anyone to visualize data in eye comfortable manner, as well to be used in thousands of dashboard shots around Dribbble. Designers and other folks produce a lot of them, sometimes from a scratch sometimes automatically generating them based on certain values.</p>
<p><em>Every time you say “big data” in public — somewhere, a chart was given birth.</em></p>
<div>
<div><img src="https://cdn-images-1.medium.com/max/1600/1*4oMG9zodL4pCrGy_abW7QQ.png" alt="1*4oMG9zodL4pCrGy_abW7QQ.png"></div>
</div>
<p>In the latest update of <a href="http://framesforsketch.com/"><strong>Frames for Sketch v.1.6</strong></a>, we have added Charts components to the master file, so be sure to check them out. And in this episode, we will take a look at data visualization features and extensions that can be helpful in your daily work with these graphics.</p>
<h4>Creation</h4>
<p>The vector (<strong>V</strong>) tool has some tricks for certain chart design use cases, this are some examples:</p>
<ul>
<li>You can quickly spread vector and data points evenly by selecting certain elements and distributing them horizontally <strong>[</strong>⌃⌘H<strong>]</strong> or vertically <strong>[</strong>⌃⌘V<strong>] </strong>according to the <strong>X</strong> or <strong>Y</strong> coordinates.</li>
<li>To create smooth wave-like style charts set points type to “mirror”, and hold both handlers with Shift <strong>[</strong>⌃<strong>] </strong>button when adjusting spacing.</li>
<li>Close your vector paths and use masks to quickly switch between linear and area looking charts.</li>
</ul>
<div>
<div><img src="https://cdn-images-1.medium.com/max/1600/1*1THw4oPzPhxT4pZul0i3Gw.gif" alt="1*1THw4oPzPhxT4pZul0i3Gw.gif"></div>
</div>
<p>But, working with vectors points can be very time consuming, and maybe I want to generate lines and pies based on the data that is already accessible to me, this is a computer age already? 🤔</p>
<p><em>So here some extensions that may come in handy:</em></p>
<ul>
<li><a href="https://github.com/design4use/gb-sketch-segmentcircle">Segmented circles plugin</a> — Really useful for creating radial diagrams like Pie, Donut, and Gauge.</li>
<li><a href="https://github.com/thetylerwolf/sketch-data-studio">Sketch data studio</a> — Can generate charts and tables based on numerical data, but do not support any resizing at all.</li>
<li><a href="https://www.invisionapp.com/craft">Craft</a> or <a href="https://github.com/timuric/Content-generator-sketch-plugin">Content generator</a> — Popular tools thanks to the ability to quickly generate a different type of dummy data.</li>
<li><em>Numbers</em> and <em>Ecxel</em> — Both can export a nice looking PDF files that you can just drop into Sketch and have layers available for charts and table cells.</li>
</ul>
<p>You can use <a href="http://framesforsketch.com/"><strong>Frames toolkit</strong></a><strong> </strong>(or any other shared styles collection) to quickly assign your brand color and stroke properties to the vector paths and shapes from the PDF you just imported — this is may be a real time saver sometimes.</p>
<div>
<div><img src="https://cdn-images-1.medium.com/max/1600/1*_EBXURSNzYDhoQVzVAWz2w.gif" alt="1*_EBXURSNzYDhoQVzVAWz2w.gif"></div>
</div>
<blockquote><p>There are also other tools out there that maybe you want to mention, but many of them have their own drawbacks when it comes to resizing or customization, which eventually forces you to work with vectors or go through the modal window scenario of creating a chart time after time. <em>💭</em></p></blockquote>
<h4>Customization</h4>
<p>Customization always important when it comes to visuals. There is always an open room to play with fonts or colors as well as the need to adjust the assets to look perfect within different interface states, and what may look great on a web dashboard may probably look terrible on mobile.</p>
<p>To achieve more automated customization we use a separate artboard to make a Control panel for storing shared styles that can be easily overwritten with just <strong>[</strong>⌘+LM<strong>], </strong>which is probably one of the most <em>basic</em> / <em>popular</em> key combination.</p>
<div>
<div><img src="https://cdn-images-1.medium.com/max/1600/1*lTxu2_Z8Cmqzg5Ik0E3_lw.png" alt="1*lTxu2_Z8Cmqzg5Ik0E3_lw.png"></div>
</div>
<blockquote><p>The Control panel contains different colors and border properties stored as shared layer styles that can for values, grids line, and axis.</p></blockquote>
<p>This panel allows me to quickly restyle graphics for different tasks and brand, controlling multiple Borders and Fill properties from a single place of truth to not get a mess of styles.</p>
<div>
<div><img src="https://cdn-images-1.medium.com/max/1600/1*PN1_bQoj6lGw8aRRrPFwRQ.gif" alt="1*PN1_bQoj6lGw8aRRrPFwRQ.gif"></div>
</div>
<p>Use symbols for a <em>Data point</em> components with different shapes and color properties which can be auto-update via global colors from the <em>Frames</em> style guide or a any other symbol library.</p>
<h4>Versatility</h4>
<p>To ensure that your graphics are fit into always new skinny jeans, you need to correctly use the resizing options for certain layers groups, here is a demo file with a simple <strong><em>Line</em> <em>/</em> <em>Area</em></strong> chart that you can see single chart layer structure.</p>
<div><a href="https://gumroad.com/l/bDGcP"></a></p>
<div><a href="https://gumroad.com/l/bDGcP"><img src="https://cdn-images-1.medium.com/max/1600/1*Z21qjd2Qnn-xTCg4DxlKZA.png" alt="1*Z21qjd2Qnn-xTCg4DxlKZA.png"></a></div>
<p><a href="https://gumroad.com/l/bDGcP"></a></div>
<p><strong>Press the Image to Download</strong></p>
<p>Line chart folder is divide into tree groups: Chart (lines and data points), Numbers (<strong>Y</strong> values) and Gridline (<strong>X</strong> Values), to make everything work well and stretch, set:</p>
<ul>
<li>Pin the <strong>X</strong> and <strong>Y</strong> axes values to the bottom and to the <strong><em>Left / Right</em></strong> sides of layer group and set them to a fixed size, in order to make the mainlines independently flexible.</li>
<li>Put data points into separate groups and align them up with the X / Y coordinate values.</li>
<li>Use one mask at once for line coordinates to stretch all charts at once.</li>
</ul>
<div>
<div><img src="https://cdn-images-1.medium.com/max/1600/1*ACnrBpap9te0tngQMpIzsw.gif" alt="1*ACnrBpap9te0tngQMpIzsw.gif"></div>
</div>
<p>Test it to see the best amount of values or points for your chart to have, and have a good day. 🎶</p>
<p>Hope it comes in handy, and if you interested in more advanced sketch design approach — get your self a copy of <a href="http://framesforsketch.com/"><strong>Frames Design System</strong></a> and instead of spending time aligning shapes and playing with layer groups <strong><em>use</em></strong> our premade collection of Charts.</p>
<p>Stay tuned now that we have tables, charts and every other component synced through our UI library we can move to the next stage of complex dashboard design. 🏃</p>
<div><a href="https://medium.com/sketch-app-sources/chart-design-automatization-aee49630634c">https://medium.com/sketch-app-sources/chart-design-automatization-aee49630634c</a></div>


Chart Design Automatization Data visualization tricks and tips for Sketch app

Chart Design Automatization Data visualization tricks and tips for Sketch app

Sketch Tutorials

Top Stories