/ series

Dinner Dash - Days 1 - 5

For the first three days, I focused on creating a simple static landing page; this firstly gave a central point to generate pre-release marketing interest.
Secondly, it allowed me to set up the infrastructure for the project including project directories, CI pipeline and infrastructure.

UX/Design - Wireframe

To start the design of the landing page, I first created a simple wire frame using Platforma's Web Wireframe Kit. Using this has allowed me to quickly generate a very top level mock up and get an idea as to how I wanted the page to look and feel without stressing about finer details like fonts and colour schemes.

The next step is to add a layer of fidelity to the landing page this will include more detail around colour schemes and font-styles without being specific about the copy. I used the UX Power Tools provided by UX Power Tools to kickstart the project, this allowed me to save a lot of time in building a more in-depth mockup for the landing page by front-loading a lot of the prep work.

The final result can be seen below:
desktop_landing_page

I've gone with a red colour theme for this project with blue for accents. This allows a good contrast between colours that should be accessible for a lot of users (especially those with difficulty distinguishing between more subtle colour differences).

I'll work on the copy further for the end product but this allows me to ballpark what level of content will look good based on the design.

The HTML

After building the mock up, it was time to create a working prototype in HTML and CSS.

As this has no dynamic functionality at this point except for the email form, I can get away with just using HTML and a simple Express server to run the page. The form will be hooked up using MailChimp to handle the gathering of marketing data. At some point, once the backend functionality is fleshed out a bit more the form will instead be hooked up to our local DB to handle user registration.

CI/CD

As there is just a static web page, there isn't any need for a test suite, so the .travis.yml file will just be the following:

language: node_js
node_js:
- '6'
- '7'
- '8'

It'll then deploy to an app on Heroku's infrastructure which will be publically accessible.

Infrastructure

My long term plan is to migrate to AWS and use a process such as blue/green deployments however again as this is currently only a static website this would be overkill to implement at this time.

Summary

That's the initial page created, by doing this I now have a simple but effective landing page to point users to. I also have a simple platform with which to build from. By using something like feature flips I can selectively display functionality to users and test how it works as well as gather feedback.

Header photo by Alex Holyoake on Unsplash

Chris Gray

Chris Gray

Formerly a QA/Test Engineer, I have decided to progress further down the path of development. You can find my ramblings here as well as any new projects I work on.

Read More