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>Published on <a href="https://blog.prototypr.io/native-web-components-a-free-sketch-library-eaed1a8af936?source=rss----eb297ea1161a---4">| Prototyping: From UX to Front End &mdash; Medium</a> Rob Gill <img alt="" src="https://cdn-images-1.medium.com/max/1024/1*YiyZyY6ZWE_J7QX1dWiEIw.png"></p>
<h3>Native web components — a free Sketch Library</h3>
<h4>Every web designer will find these useful but no self-respecting designer will admit to using them🤫</h4>
<blockquote><p>Note: <br />Everything you see in this article is 100% created in Sketch.<br />Prototyped in Principle.</p></blockquote>
<blockquote><p>That’s right, someone has gone out of their way to recreate the defaults… the thing that every other designer tries to redesign.</p></blockquote>
<h3>TL;DR</h3>
<p><strong>Free Sketch Library of native web components get 👉</strong><a href="https://gum.co/sketch-web-components"><strong> it here</strong></a><strong> 👈</strong><br />This article demos what’s included and how it can be used. With a little bit about the the process of creating the library.</p>
<p><img alt="" src="https://cdn-images-1.medium.com/max/800/1*bw3CjVFyKOLBZBuowEHcjA.gif">Demo of all the components included — 100% made in <a href="https://www.sketchapp.com/">Sketch</a>, prototyped in <a href="http://principleformac.com/">Principle</a></p>
<h3>What are web components?</h3>
<p>They’re the defaults. They’re not sexy. They’re not styled. And no self respecting web designer wants to admit to including them in their designs… but they probably have at some point. I’m talking checkboxes, radios, dropdowns and more…</p>
<p>That’s why I wanted to spend some time creating a comprehensive Sketch Library that should help you the next time you need to quickly throw together a <strong>form</strong>, <strong>white label</strong> (with little base styling) or a fugly <strong>CMS. </strong>I know<strong> </strong>you want to get the nit picky details <em>jussst</em> right, so this library will help you!</p>
<p>Check out this <a href="http://codepen.io/robgill/pen/dmGPeg">codepen</a>, a live demo of what these look like in HTML…</p>
<p><iframe src="https://cdn.embedly.com/widgets/media.html?src=https%3A%2F%2Fcodepen.io%2Frobgill%2Fembed%2Fpreview%2FdmGPeg%3Fheight%3D600%26slug-hash%3DdmGPeg%26default-tabs%3Dhtml%2Cresult%26host%3Dhttps%3A%2F%2Fcodepen.io%26embed-version%3D2&amp;url=https%3A%2F%2Fcodepen.io%2Frobgill%2Ffull%2FdmGPeg%2F&#038;image=https%3A%2F%2Fs3-us-west-2.amazonaws.com%2Fi.cdpn.io%2F33649.dmGPeg.small.5329003c-9ff1-403d-8518-fdf54babb8ae.png&amp;key=a19fcc184b9711e1b4764040d3dc5c07&amp;type=text%2Fhtml&amp;schema=codepen" width="800" height="600" frameborder="0"><a href="https://medium.com/media/21c4cde98c90c04db6b7694938e6e58b/href">https://medium.com/media/21c4cde98c90c04db6b7694938e6e58b/href</a></iframe></p>
<h3>About the Sketch Library</h3>
<p>The library is <a href="https://gum.co/sketch-web-components">available on Gumroad</a>, here’s a breakdown of the contents.</p>
<h4>ZIP File contains</h4>
<blockquote><p><em>Native Web Components.sketch</em><br />&#8211; The Sketch library including a demo page.</p></blockquote>
<blockquote><p><em>Demo.sketch </em><br />&#8211; All the components visually displayed with Native Web Components.sketch set up as a sketch library.</p></blockquote>
<h4>Fully responsive</h4>
<p>Need to resize? No problem! You can drag and everything will stay perfectly scaled. All the layout option have been set using Sketch’s Resizing properties so they’ll speak really well to other apps like InVision, Marvel or Zeplin.</p>
<p><img alt="" src="https://cdn-images-1.medium.com/max/800/1*YuVVtpROvi1Sg9jmSnWCfA.gif"></p>
<h4>No plugins needed</h4>
<p>You wont need to install anything else, other than <a href="https://www.sketchapp.com/">Sketch</a>, to get this up and running. However, if you do have the <a href="https://github.com/DWilliames/paddy-sketch-plugin">Paddy</a> plugin, your buttons will resize automatically.</p>
<h4>As simple as possible</h4>
<p>If you add <em>Native Web Components.sketch</em> as a Sketch Library, you can simply copy and paste every asset straight from the <em>demo</em> file. No need to dig through the symbols dropdown trying to find what you need.</p>
<h3>It includes house-hold favourites such as:</h3>
<h4>Buttons and Alerts</h4>
<pre>&lt;input type="button"&gt;</pre>
<p><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*ErvNMdVn5Ze5H7o2AmWlbA.png"></p>
<h4>Date and Time</h4>
<p>Select Boxes and dropdown menus</p>
<pre>&lt;input type="datetime-local"&gt;</pre>
<p><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*YwGueqkKSHedTcaYqjyFsw.png"></p>
<h4>Checkboxes</h4>
<pre>&lt;input type="checkbox"&gt;</pre>
<p><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*QZsR8cbuo8RJBN6Fm_5t0w.png"></p>
<h4>Color including the Mac OS color picker)</h4>
<pre>&lt;input type="color"&gt;</pre>
<p><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*OnY3zsDHlJ-vQkbqwj3CDQ.png"></p>
<h4>Files (including the Mac OS file picker)</h4>
<pre>&lt;input type="file"&gt;</pre>
<p><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*L3WnlM6zhyAwp1iZfSMVQA.png"></p>
<h4>Number</h4>
<pre>&lt;input type="number"&gt;</pre>
<p><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*Qi2kEugH3GtHNvi9CCISOA.png"></p>
<h4>Radio Button</h4>
<pre>&lt;input type="radio"&gt;</pre>
<p><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*sucSwSzHf0SGLh45ziwZnw.png"></p>
<h4>Range</h4>
<pre>&lt;input type="range"&gt;</pre>
<p><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*sc1X5SPM5cBsQTNlSdjOLA.png"></p>
<h4>Search</h4>
<pre>&lt;input type="search"&gt;</pre>
<p><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*uLHpqEnk3ibUMLncY1rbuA.png"></p>
<h4>Select-box and Dropdown Menus</h4>
<pre>&lt;select name="selectbox"&gt;<br>  &lt;option value="value1"&gt;Value 1&lt;/option&gt; <br>  &lt;option value="value2"&gt;Value 2&lt;/option&gt;<br>  &lt;option value="value3"&gt;Value 3&lt;/option&gt;<br>&lt;/select&gt;</pre>
<p><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*k08Bkpsjb60X3K2ZblwLig.png"></p>
<h4>Text (such as, number, password, email etc)</h4>
<pre>&lt;input type="text"&gt;<br>&lt;input type="password"&gt;<br>&lt;input type="email"&gt;<br>&lt;!-- etc --&gt;</pre>
<p><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*5WsaIqhhMGIPEsl5LQ5FpA.png"></p>
<h4>A little bonus, the process…</h4>
<p>I recored my self working on this Sketch file, mainly because I wanted to mess about some features on amazing <a href="https://www.telestream.net/screenflow/overview.htm">Screenflow</a> app. Here’s a time lapse of me working on the Mac OS file picker. As it was one of the more complex components, so it made the most exciting part to watch back 🖥📹</p>
<p>📽 Roll film…</p>
<p><iframe src="https://cdn.embedly.com/widgets/media.html?src=https%3A%2F%2Fwww.youtube.com%2Fembed%2FAG44tscwHJg%3Ffeature%3Doembed&amp;url=http%3A%2F%2Fwww.youtube.com%2Fwatch%3Fv%3DAG44tscwHJg&#038;image=https%3A%2F%2Fi.ytimg.com%2Fvi%2FAG44tscwHJg%2Fhqdefault.jpg&amp;key=a19fcc184b9711e1b4764040d3dc5c07&amp;type=text%2Fhtml&amp;schema=youtube" width="854" height="480" frameborder="0"><a href="https://medium.com/media/b559cad7f977c497165d56722b4bc1be/href">https://medium.com/media/b559cad7f977c497165d56722b4bc1be/href</a></iframe></p>
<h3>Get this Sketch Library now</h3>
<p>👉<a href="https://gum.co/sketch-web-components"> 💎 ⬇ Download here ⬇ 💎️</a> 👈</p>
<h4>Got questions? Or Suggestions for improvements?</h4>
<p>Get in touch by leaving a reply or via <a href="https://twitter.com/rob_gill_">twitter</a> and I’ll be happy to help you out.</p>
<blockquote><p>Right now Web Components is designed with Mac OS and Google Chrome in mind. Sketch is Mac only and Chrome and Safari as they both use WebKit making them by far the most popular browsers.</p></blockquote>
<blockquote><p>If you would find it useful to see more operating systems or browsers added, reach out, I’ll be happy to consider them.</p></blockquote>
<p><iframe src="https://cdn.embedly.com/widgets/media.html?src=https%3A%2F%2Fupscri.be%2Ff51076%3Fas_embed%3Dtrue&amp;dntp=1&amp;url=https%3A%2F%2Fupscri.be%2Ff51076%2F&#038;image=https%3A%2F%2Fe.enpose.co%2F%3Fkey%3DdRXnS9Gplk%26w%3D700%26h%3D425%26url%3Dhttps%253A%252F%252Fupscri.be%252Ff51076%252F%253Fenpose&amp;key=a19fcc184b9711e1b4764040d3dc5c07&amp;type=text%2Fhtml&amp;schema=upscri" width="800" height="400" frameborder="0"><a href="https://medium.com/media/b85dfbb5286d8a25cf2e754b9462cf45/href">https://medium.com/media/b85dfbb5286d8a25cf2e754b9462cf45/href</a></iframe><img src="https://medium.com/_/stat?event=post.clientViewed&amp;referrerSource=full_rss&amp;postId=eaed1a8af936" width="1" height="1" alt="stat?event=post.clientViewed&amp;referrerSou"></p>
<hr>
<p><a href="https://blog.prototypr.io/native-web-components-a-free-sketch-library-eaed1a8af936">Native web components — a free Sketch Library</a> was originally published in <a href="https://blog.prototypr.io">Prototypr</a> on Medium, where people are continuing the conversation by highlighting and responding to this story.</p>


Native web components — a free Sketch Library

Native web components — a free Sketch Library

Native web components — a free Sketch Library

Every web designer will find these useful b…

Top Stories