small_Fcsqb5pWQAAzPIK.jpeg

thumbnail_Fcsqb5pWQAAzPIK.jpeg

Adobe acquires Figma, cue the memes 🤪

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

large_featuredImage

medium_featuredImage

small_featuredImage

thumbnail_featuredImage

What Is the Open Web?

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

<p><a href="https://medium.com/sketch-app-sources/launch-your-responsive-portfolio-website-directly-from-sketch-473e401ee47">medium bookmark / Raindrop.io</a> |  </p>
<div>
<div>
<div>
<div>
<div>
<p>ziyuandesign.com, UX Designer@ Silicon Valley, Carnegie Mellon Alumni.</p>
<p>Dec 15</p>
</div>
</div>
</div>
</div>
</div>
<div>
<div>
<div>
<div>
<div>
<div><img src="https://cdn-images-1.medium.com/max/2000/1*0xx5Hfx0It66y5uLnhyWBA.gif" alt="1*0xx5Hfx0It66y5uLnhyWBA.gif"></div>
</div>
<p>First version of my landing page</p></div>
<div>
<blockquote><p>Are you struggling with your default template layouts?<br />Do you want to make your website unique?</p></blockquote>
<p>For the past four months, I have been building <a href="http://ziyuandesign.com/">my website</a> from pixel 0. I explored a new tool called <a href="https://launchpad.animaapp.com/">Launchpad</a> — a handy plugin for Sketch that allows us to publish responsive websites directly from Sketch.</p>
<p>😍<a href="https://medium.com/sketch-app-sources/five-websites-we-love-c2c20145ed82">My website was featured by Launchpad and AnimaApp</a> on Oct, 2017. I am writing to share my experience behind the scenes.</p>
<div></div>
<p>Launchpad allows me to quickly publish real websites to test my designs</p></div>
</div>
</div>
<div>
<hr>
<div>
<div>
<h3>Background and my motivations</h3>
<p>After hosting <a href="http://ziyuandesign.com/">my portfolio</a> on SquareSpace for three years and switching between several templates, I decided to build my own website from ground up, because:</p>
<ol>
<li>I want to be creative with layout, visual design and animations;</li>
<li>I want to push the quality of my website to my best standard;</li>
<li>I want to reflect my personality through my portfolio and be unique.</li>
</ol>
<blockquote><p>“Choose to use a web template V.S. build your web from scratch ≈ Buy a cup of coffee from Starbucks V.S. Learn how to make mocha by yourself with coffee machine”</p></blockquote>
</div>
</div>
</div>
<div>
<hr>
<div>
<div>
<h3>Tools I used</h3>
<ol>
<li><strong>Sketch app.</strong></li>
<li><strong>Plugins: </strong><a href="https://www.animaapp.com/?utm_medium=blog&amp;utm_source=anima&amp;utm_content=export">Launchpad</a>, Invision Craft, Auto Layout.</li>
<li><strong>HTML, CSS </strong>(add animations into web elements)</li>
</ol>
</div>
</div>
</div>
<div>
<hr>
<div>
<div>
<h3>🚀 Applied product thinking into my web development process.</h3>
<ol>
<li><strong>Design the content — think about how to tell your story.<br /></strong>I printed out my case studies on whiteboard and experimented with various structure to communicate clear &amp; in-depth stories. The logic I used includes: problem-solution-benefit; what-so what-now what; what-how-why.</li>
</ol>
<div>
<div><img src="https://cdn-images-1.medium.com/max/1600/1*DpT6R8xlKfPSNZxEqRwsrA.jpeg" alt="1*DpT6R8xlKfPSNZxEqRwsrA.jpeg"></div>
</div>
<p><strong>2. Responsive layouts: created multi-layout based on device screen sizes, added animation to the page with CSS and launchpad animation tools.<br /></strong>When building a page, I started with laptop layout, then went two sizes up to DesktopHD layout, two sizes down to Mobile layout.</p>
<div>
<div><img src="https://cdn-images-1.medium.com/max/1600/1*UyB8tra6q9z-KTTDseZQ5Q.png" alt="1*UyB8tra6q9z-KTTDseZQ5Q.png"></div>
</div>
<p>Created multi-layout based on device screen sizes</p>
<div>
<div><img src="https://cdn-images-1.medium.com/max/1600/1*jENE_OD2H5-r4fwrbWFilQ.png" alt="1*jENE_OD2H5-r4fwrbWFilQ.png"></div>
</div>
<p>Launchpad empowers user to add animations like scroll effect to their websites easily. CSS knowledge is required if you want to customize the effect.</p>
<p><strong>3. Take feedback.<br /></strong>After launching the first version of my website, I posted it to various designer groups to collecting feedback. Since people are visiting the website from multi-devices, it also has been a great way to debug.</p>
<p><strong>4. Act on data and come up with iteration plans.<br /></strong>I applied google analytics tool to understand who are my visitors and to study their behavior on my website. I identified one challenge was to navigate between projects. So my next step is to improve the navigation system, to really provide immersive browsing experience to users.</p>
<div>
<div><img src="https://cdn-images-1.medium.com/max/1600/1*gpbscnAchfFPV66MPDZEzQ.jpeg" alt="1*gpbscnAchfFPV66MPDZEzQ.jpeg"></div>
</div>
</div>
</div>
</div>
<div>
<hr>
<div>
<div>
<h3>Challenges with Launchpad tool</h3>
<p>Although Launchpad gives me a lot of control, it has lot of room for improvement to make the workflow easier.</p>
<p><strong>1. I</strong> <strong>need to create various layouts for different screen sizes, to make one web page into responsive design. </strong>For example: I created six layouts of my landing page, from DesktopHD to Mobile (breakpoints).</p>
<div>
<div><img src="https://cdn-images-1.medium.com/max/1600/1*TczpUyy7ubkT5Rx0aJG-2g.png" alt="1*TczpUyy7ubkT5Rx0aJG-2g.png"></div>
</div>
<p>you need to layout how does one page look like on different devices</p>
<p>2. <strong>There are many repetitive steps for content changes. </strong>For example: I need to update the hyperlinks of a certain button for each page repeatedly to make sure there is consistency.</p>
<div>
<div><img src="https://cdn-images-1.medium.com/max/1600/1*kQZz_b_pyRq_-2PIWK1oTg.png" alt="1*kQZz_b_pyRq_-2PIWK1oTg.png"></div>
</div>
<p>Connect elements to pages</p>
<p>3. <strong>At times, there are issues with web fonts rendering. </strong>Some times fonts weight or alignment were not correctly rendered, especially when texts are on the same sketch layer.</p>
<div>
<div><img src="https://cdn-images-1.medium.com/max/1600/1*B8GUC7K3EX_R7BLSnwzGuQ.png" alt="1*B8GUC7K3EX_R7BLSnwzGuQ.png"></div>
</div>
</div>
</div>
</div>
<div>
<hr>
<div>
<div>
<h3>Who is Launchpad for?</h3>
<p>If you decided to use launchpad, these skills will help you expedite the process:</p>
<ol>
<li>People who know how to use Sketch for designing websites. (Launchpad offers template as well)</li>
<li>People who have basic knowledge of HTML &amp; CSS to add animations and debug.</li>
<li>People with knowledge on <a href="https://animaapp.github.io/docs/v1/launchpad/08-custom-domain.html">domain hosting</a>, if you want to add custom url.</li>
</ol>
</div>
</div>
</div>
<div>
<hr>
<div>
<div>
<h3>Tutorials 📖</h3>
<p><a href="https://animaapp.github.io/docs/v1/launchpad/#What-is-it">Anima App manual</a><br /><a href="https://medium.com/@AnimaApp">Anima App Medium articles</a></p>
<p>Many thanks to <a href="https://medium.com/@theparida">Avinash</a> for providing technical guidance and helping with my questions regarding Launchpad! Thank you @Designers Guild and <a href="https://medium.com/@AnimaApp">Anima App</a> group for providing feedback on my website. Thank you <a href="https://medium.com/@avishic_79102">Avishay Cohen</a> for creating this amazing tool.</p>
</div>
</div>
</div>
</div>
<div><a href="https://medium.com/sketch-app-sources/launch-your-responsive-portfolio-website-directly-from-sketch-473e401ee47">https://medium.com/sketch-app-sources/launch-your-responsive-portfolio-website-directly-from-sketch-473e401ee47</a></div>


Launch Your Responsive Portfolio Website directly from Sketch (without coding) My story of building …

Launch Your Responsive Portfolio Website directly from Sketch (without coding) My story of building …

Top Stories