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="http://ift.tt/2pGD7Gz">Design + Sketch App &mdash; Medium</a> | Anima App </p>
<h4>Publish websites directly from Sketch, no coding needed.</h4>
<p>4 months ago we’ve launched a new product that changes the way designers design. <a href="http://ift.tt/2iqR1Gq">Auto-Layout for Sketch</a> enables designers to create responsive designs in a seamless way.</p>
<p>2 months ago we’ve introduced a new feature called Stacks. <a href="http://ift.tt/2m9rseY">Stacks are Flexbox</a> within Sketch. This powerful feature made designing responsive designs even easier and better.</p>
<p>These milestones have paved the way for our <strong>new product</strong>.</p>
<p>Our new product allows designers to <strong>publish websites with a single click, directly from Sketch</strong>.</p>
<p><img alt="" src="http://ift.tt/2oWdzG0"></p>
<p>Up until now Sketch designs were merely pixels. Today they become alive. Sketch designs of websites become real websites. Designs that were made responsive with Auto-Layout will now be responsive in the same way on a browser in a real website.</p>
<p><a href="http://ift.tt/2qvU9oN">Launchpad</a> is a <strong>Platform as a Service</strong> for designers. The entire interface is integrated seamlessly into Sketch so you can feel at home.</p>
<h4>Launchpad for Sketch is a web publishing tool for:</h4>
<ul>
<li>✅ Landing pages</li>
<li>✅ Marketing websites</li>
<li>✅ Static websites</li>
</ul>
<h4>Launchpad does not currently support:</h4>
<ul>
<li>❌ Dynamic websites with Javascript</li>
</ul>
<blockquote><p><strong>It’s perfect for Landing Pages and Marketing Websites.</strong></p></blockquote>
<p><iframe src="https://cdn.embedly.com/widgets/media.html?src=https%3A%2F%2Fwww.youtube.com%2Fembed%2F1gnxY6eC_78%3Ffeature%3Doembed&amp;url=http%3A%2F%2Fwww.youtube.com%2Fwatch%3Fv%3D1gnxY6eC_78&#038;image=https%3A%2F%2Fi.ytimg.com%2Fvi%2F1gnxY6eC_78%2Fhqdefault.jpg&amp;key=d04bfffea46d4aeda930ec88cc64b87c&amp;type=text%2Fhtml&amp;schema=youtube" width="854" height="480" frameborder="0"><a href="http://ift.tt/2oW6jdm">http://ift.tt/2oW6jdm</a></iframe></p>
<h3>Main Features Overview</h3>
<ul>
<li><a href="http://ift.tt/2p7elfi"><strong>Breakpoints</strong></a> — A way to make your design look great on Mobile, Tablets or Desktops.</li>
<li><a href="http://ift.tt/2oW9qC1"><strong>Links</strong></a> —Each Artboard is a web page. You can set up links between Artboards or to external websites.</li>
<li><a href="http://ift.tt/2p7esHN"><strong>Forms</strong></a> — You can set up forms and enable visitors of the website to submit information such as their contact information.</li>
<li><a href="http://ift.tt/2oWknDw"><strong>Videos</strong></a> — You can embed a video player in the website. YouTube, Vimeo, MP4 or GIFs are all supported.</li>
<li><a href="http://ift.tt/2p741Em"><strong>Analytics</strong></a> — Track visitors with your favorite analytics provider.</li>
<li><a href="http://ift.tt/2oWaAxo"><strong>SEO</strong></a> — Meta tags for search engines and social media websites.</li>
</ul>
<p>Let’s dive into each of these features!</p>
<h3><a href="http://ift.tt/2p7elfi">Breakpoints</a></h3>
<p>Breakpoints are a way to make your design look great on Mobile, Tablets or Desktops.</p>
<p>To create Breakpoints</p>
<ol>
<li>Design a <strong>webpage</strong> in multiple Artboards where each Artboard is for specific screen width.</li>
<li>Using the Breakpoints button, mark the multiple Artboards as same webpage.</li>
</ol>
<p><img alt="" src="http://ift.tt/2p7lvA8"><img alt="" src="http://ift.tt/2oWcyhm"><a href="http://ift.tt/226ITfY">Design</a> by Zhenya &amp; Artem</p>
<h3><a href="http://ift.tt/2oW9qC1">Links</a></h3>
<p>There are 3 types of links:</p>
<ol>
<li>Page Link &#8211; A Link between different Artboards</li>
<li>Anchor Links &#8211; A Link within the same Artboard</li>
<li>External Links &#8211; A Link to an external website</li>
</ol>
<p><img alt="" src="http://ift.tt/2oWmZl0">Create Link to a different Artboards<img alt="" src="http://ift.tt/2p7lw7a">Create an Anchor Link<img alt="" src="http://ift.tt/2oVXCzQ">Create an External Link</p>
<h3><a href="http://ift.tt/2p7esHN">Forms</a></h3>
<p>Forms allow visitors of the website to submit information such as their contact information.</p>
<p><img alt="" src="http://ift.tt/2p70R3g"></p>
<p>A Form is composed of:</p>
<ul>
<li>Text Inputs &#8211; One or more Text Input layers</li>
<li>Submit Button &#8211; One Submit Button layer</li>
</ul>
<p><img alt="" src="http://ift.tt/2oW7tW3"></p>
<p>When setting a Layer as a Submit button, form options will reveal:</p>
<p><img alt="" src="http://ift.tt/2p6YRIt"></p>
<ul>
<li>Email &#8211; <em>optional</em> Email address to send notifications when visitors submit information</li>
<li>Spreadsheet &#8211; <em>optional</em> A name for a Spreadsheet which you can view and download as CSV of all the entries</li>
<li>Success page &#8211; <em>optional</em> Where to redirect visitor once their submission has been successful.</li>
<li>Failure page &#8211; <em>optional</em> Where to redirect visitor in case their submission failed.</li>
</ul>
<h4>Example</h4>
<p><a href="http://ift.tt/2oW7f1g">Live contact form</a><br /><a href="http://ift.tt/2p7lwUI">Sketch file</a></p>
<p><img alt="" src="http://ift.tt/2oWhyCo"></p>
<p>Based on <a href="http://ift.tt/1KDJvzw">Contact Form</a> by Sophinie Som</p>
<h3><a href="http://ift.tt/2oWknDw">Videos</a></h3>
<p>You can embed a Video player in your website by setting a Layer as a Video.<br />When selecting the Video layer, you’ll be able to provide a link to a video, that will be presented on the website.</p>
<p><img alt="" src="http://ift.tt/2oW4I7i">Supported Video URLs are: YouTube, Vimeo, MP4 and GIF</p>
<h4>Examples</h4>
<p>Landing Page Demo</p>
<ul>
<li>Live website <a href="http://ift.tt/2p7lxrK">Open</a></li>
<li>Sketch file <a href="http://ift.tt/2oWlxiD">Download</a></li>
<li>Video by <a href="https://www.coverr.co/">Coverr</a></li>
</ul>
<p><img alt="" src="http://ift.tt/2p73NNl"></p>
<p>Video Players Demo</p>
<ul>
<li>Live website <a href="http://ift.tt/2oW6Qf6">Open</a></li>
<li>Sketch file <a href="http://ift.tt/2p7lxYM">Download</a></li>
</ul>
<h3><a href="http://ift.tt/2p741Em">Analytics</a></h3>
<p>To track incoming traffic into your website you can sign up to any of the Analytics providers and paste in the code snippet they provide.</p>
<p>Steps overview:</p>
<ol>
<li>Sign up for an Analytics provider of your choice.</li>
<li>Create a website tracking project in the Analytics provider dashboard.</li>
<li><em>Copy</em> the tracking Code snippet they provide to your pasteboard.</li>
<li><em>Paste</em> the tracking Code snippet in the Launchpad Analytics section under Manage Website.</li>
</ol>
<h4>Google Analytics</h4>
<p><img alt="" src="http://ift.tt/2oWhOSc"></p>
<p>More information on Analytics is available <a href="http://ift.tt/2p741Em">here</a></p>
<h3><a href="http://ift.tt/2oWaAxo">SEO</a></h3>
<p><img alt="" src="http://ift.tt/2p7lyvO"></p>
<p>Meta Tags are a part of HTML. They enable providing information about the website that isn’t actually presented for visitors, but is used by software that can read these tags and use their information.</p>
<ul>
<li>Search engines such as Google use Meta Tags to index the website in their database.</li>
<li>Social media websites use specialized Meta Tags to enable previewing web pages within their feeds.</li>
</ul>
<p>You can edit these tags to optimize the way your website is seen by Search Engines, Social Media websites, and more.<br />Better information such as an image and a clear description can increase the traffic to your website.</p>
<h3>Pricing</h3>
<p>Act fast to get our limited-time offers!</p>
<p><img alt="" src="http://ift.tt/2oWhPpe"></p>
<ul>
<li>Get started: <a href="http://ift.tt/2qvU9oN">http://ift.tt/2qvU9oN</a></li>
<li>From your friends at <a href="http://ift.tt/2cebuy2">Anima App</a> 👋</li>
<li>For discussion feel free to join our <a href="http://ift.tt/2om4UM4">Facebook Group</a></li>
</ul>
<p><img src="http://ift.tt/2p7jcgE" width="1" height="1" alt="stat?event=post.clientViewed&amp;referrerSou"></p>
<hr>
<p><a href="http://ift.tt/2p3l49x">Introducing Launchpad for Sketch</a> was originally published in <a href="http://ift.tt/1OWmBEs">Design + Sketch</a> on Medium, where people are continuing the conversation by highlighting and responding to this story.</p>


Introducing Launchpad for Sketch

Introducing Launchpad for Sketch

Publish websites directly from Sketch, no coding needed.

Top Stories