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

• Part 1
• Part 2
• Part 3
• Part 4