Launch Your Responsive Portfolio Website directly from Sketch (without coding)

My story of building a unique website with Sketch + Launchpad

First version of my landing page

Are you struggling with your default template layouts?
Do you want to make your website unique?

For the past four months, I have been building my website from pixel 0. I explored a new tool called Launchpad — a handy plugin for Sketch that allows us to publish responsive websites directly from Sketch.

😍My website was featured by Launchpad, AnimaApp and bestfolios.com. I am writing to share my experience behind the scenes.

Launchpad allows me to quickly publish real websites to test my designs

Unleash your imagination from templates

After hosting my portfolio on SquareSpace for three years and switching between several templates, I decided to build my own website from ground. My motivations are:

1. I want to be creative with layout, visual design and animations;
2. I want to push the quality of my website to my best standard;
3. I want to reflect my personality through my portfolio and be unique.

“Use a web template V.S. Build your web from scratch” is similar to “Buy a cup of coffee from Starbucks V.S. Learn how to make mocha by yourself with coffee machine” — a trade off between convenience and creativity.

Tools I used

1. Sketch app.
2. Plugins: Launchpad, Invision Craft, Auto Layout.
3. HTML, CSS (add animations into web elements)

🚀 My process: applied product thinking into web development circle.

1. Prepare scannable content and intriguing stories, pre building the website.

Design is storytelling. For each case study, I printed out the content on whiteboard and experimented with various structure to tell clear & in-depth stories. The logic I used includes: problem-solution-benefit; what-so what-now what; what-how-why. My goal is to make my content easier to read.

My method to test the clarity of my case studies: After I created my first case study page, I showed it to 11 friends from various background. Everyone had 2 minutes to scan through the case study. When time’s up, I asked them: What product do you think I created? What problem the product is solving? Is there any logic gap when reading the story? Then I iterate on their feedback.

One of my white boarding session

2. Build responsive layouts: design multi-layout pages based on device screen sizes, animate pages with CSS or launchpad animation tools.

When building a page, I usually started with laptop layout, then went two sizes up to DesktopHD layout, two sizes down to Mobile layout. I wanted to clearly define how my pages looks differently on each device.

Launchpad provides default animation effects like “Fade In”. You can easily apply the effects just like using Keynote. And you can quickly test the effects by launching the website. CSS knowledge is required if you want to customize the effect.

Created multi-layout based on device screen sizes

Launchpad provides default animation effects like “Move Left When Hover Over”. Users can easily test the effects by applying the effects and launching the website. CSS knowledge is required if you want to customize the effect.

3. Take feedback after website launch.

After launching the first version of my website, I posted it to various groups to collect feedback. I received valuable feedback on content, animation and meta data, etc. Since people are visiting the website from multi-devices, it also has been a great way to debug.

4. Act on data and come up with iteration plans.

I applied google analytics tool to understand who are my visitors and to study their behavior on my website. I identified one user challenge was to navigate between projects. Therefore, my next step is to improve the navigation system to really provide immersive browsing experience to users.

Challenges with Launchpad tool

Although Launchpad provides a lot of control, the workflow could be made easier.

1. I need to create various layouts for different screen sizes, to make one web page into responsive design.

For example: I created six layouts of my landing page, from DesktopHD to Mobile (breakpoints).

you need to layout how does one page look like on different devices

2. There are many repetitive steps for content changes.

For example: I need to update the hyperlinks of a certain button for each page repeatedly to make sure there is consistency.

3. At times, there are issues with web fonts rendering.

Some times fonts weight or alignment were not correctly rendered, especially when texts are on the same sketch layer.

Who is Launchpad for?

1. People who know how to use Sketch for designing websites. Because currently, you have to edit sketch files to update web content.
2. People who have basic knowledge of HTML & CSS to add animations and debug.
3. People with knowledge on domain hosting, if you want to add custom url.

Tutorials 📖

Anima App manual
Anima App Medium articles

Many thanks to Avinash for helping with my questions regarding Launchpad! Thank you @Designers Guild and Anima App group for providing feedback on my website. Thank you Avishay Cohen for creating this amazing tool.

Other fun featured projects of mine

How to make smart group decisions on food — iPhoneX experience design

Winter is coming! Sansa, let’s plan your trip to Winterfell (Trip Planning App)

Feedback and comments are welcome! :)