How to design and code a product landing page – part 1

This post marks the very first of my series-based screencasts I’ll be authoring going forward at Web-Crunch.

This specific project will involve me taking you from start to finish while designing and coding a responsive product landing page which includes some e-commerce functionality. You get to see my decision-making process along the entire journey. I. hope you are excited as I am!

Project details

The subject matter at hand is a real life project my partner Alyssa and I (@CoupleOfCreatives) are building for a family member. The product itself is called H2OH drink. It is targeted toward those looking for a beverage that actually promotes healthy teeth and gums rather than being filled with sugar, colors, and unnatural ingredients that would otherwise cause harm over time.

The website will be a portal for those, Jaime (the owner), will share with allowing them to purchase the drink mix online and be sent virtually anywhere in the world.

My responsibilities include designing a modern landing page and coding it. For this project, I make use of Affinity Designer, Photoshop, Affinity Photo, Sublime Text, WordPress and a few plugins.

The screencasts

The videos themselves will be rather lengthy. Since I wanted to show you the entire experience you get to see all my decisions in real time. I went this route because when I was learning I appreciated my mentors doing the same.

My setup

For my fellow nerdery friends out there I figured I’d lay light on my current setup. I’m using a Samsung 34″ Curved screen. It’s amazingly comfortable but is not so great for screencasts! The extra width is a hard ratio to upload to YouTube but I think I found a few workarounds. If you notice the resolution not 100% accurate on YouTube this is why. Apologies in advance if things look off! As I’m writing this, all the video has been recorded and I figured out the correct method to record video going forward.

I recently built a new PC with which I run MacOS, and Windows 10 on. These are known in the computer building community as a Hackintosh. The benefits here to mainly to save money but have a really enhance computer without paying for the price names out there (i.e. Apple).

Here are my computer specs:

  • Gigabyte Dual Thunderbolt 3 Intel Z170X – Motherboard
  • EVGA GTX 980 TI 6GB – Video Card
  • Corsair Hydro Series High-Performance Liquid CPU Cooler H60
  • Intel Core i7 6700K 4.00 GHz Unlocked Quad Core Skylake Desktop Processor
  • Crucial 16GB Kit DDR4 2400 CL16 DR8 Dimm28 – Memory
  • Corsair RMx Series RM650X 650W 80 PLUS GOLD – Power Supply
  • Tplink TL­WDN4800 Dual Band Wireless N900 PCI Express Adapter
  • 2 Samsung 500GB solid state hard drives – One for MacOS and one for Windows 10
  • 2 Seagate SATA drives @ 3TB for backups and general storage.
  • Black Corsair Case

My peripherals and other misc. items:

  • Logitech MX Master Mouse
  • Apple Wired full numeric keyboard
  • KRK Powered Studio Monitors
  • Behringer K10S Powered Subwoofer
  • M-Audio USB Interface
  • Rode NT-USB Mic (what you hear me through)
  • Carvin AC120 Power Conditioner (Separate power for all Audio components)
  • Homemade wood desk measuring about 8ft long by 4 feet wide. I swapped sawhorses for an adjustable manual crank setup to add in a standing desk feature. Love this desk with a passion.