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!
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 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.
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 TLWDN4800 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.