Andy from Webcrunch

Subscribe for email updates:

Portrait of Andy Leverenz
Andy Leverenz

February 14, 2017

Last updated November 5, 2023

How to Design and Code a Product Landing Page – Part 5

In part 5, of "How to Design and Code a Product Landing Page", I continue optimizing our theme for the upcoming development of the landing page.

Part of the video is dedicated to preparing assets which entail exporting different types of files from Affinity Designer. Collectively, I use a mix of SVG, PNG, and JPEG images.

Affinity Designer has an awesome feature called personas. These essentially set a new "mode" within the application for different types of use cases. The specific persona I use in this video is called the "Export" persona which is extremely powerful. On top of how I outline in the video, you can out all types of file types. Each exported file can have different optimization settings and sizes. This feature alone sold me on Affinity Designer over Photoshop. Sketch follows a similar process but I will say Affinity Designer gives you much more control.

Up next after this video comes some real code wrangling. I hope you'll stay tuned!

The Series So Far

Link this article
Est. reading time: 1 minutes
Stats: 782 views



Part of the Design & Code a Product Landing Page collection

Products and courses