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

This post marks the very first of the 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 it 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 set up to add in a standing desk feature. I love this desk with a passion.

​

​