Back to portfolio

Landing Page & Email Design

front-end development | Bootstrap | email design

code samples available upon request

Overview

I was provided a PDF mockup and image assets and asked to create 1) a responsive landing page and 2) an “email-friendly” version of that page to be used for marketing purposes. I used Bootstrap to build the landing page, and inline CSS to build the email.

Objectives

  • Landing page: re-create mockup for desktop; design for different breakpoints
  • Email: remove sign-in form, maintain look and feel of landing page, design for use with Mailchimp or similar email marketing service

Process

Style guide: Since I was given a PDF and no other guidelines, I used Photoshop to extract the colors and Adobe Acrobat Pro to get font face and font size information. I created a color palette using coolors.co and, since the document fonts were Google Fonts, I used a simple Google Doc for the typography scheme.

color palette with hexidecimal codes

typography scheme

Design: Using Bootstrap’s built-in breakpoints, I designed three initial versions of the landing page: desktop, tablet (landscape), and mobile. From there, I devised the following grid system:

grid based on Bootstrap breakpoints

I added three additional breakpoints to account for a slightly shrunken browser window on a desktop, a tablet in portrait or multitasking mode, and a phone in landscape mode.

The marketing email was a bit trickier, since the client had not specified an email marketing tool. I decided to use nested tables and inline CSS, so the client could simply copy and paste the code into a text editor, making it platform-agnostic.

Based on projects I’ve done for other clients, I used a max-width of 650px and a two-column layout that stacks vertically at 480px. I also made the hero much shorter, in case email recipients did not bother to scroll down when opening the email. This way, at least some of the expanded content would be visible immediately upon opening.

several nested tables, with the outer table having a width of 600px

Per the client's instruction, the sign-in form is not present in the email. I also removed 2 of the 4 photos, since the images were decorative rather than adding meaning to the text.

Results

The final deliverable was a .zip folder containing:

  • 2 HTML files: 1 for the landing page and 1 for the email
  • 1 CSS file for the landing page (the email used in-line CSS)
  • A folder containing all image assets
  • A README explaining my process and design decisions

If you would like to see the final results and source code, please contact me and I will send you a private link.