Designing a Landing Page and Building it in HTML and CSS

Tools Used: Sketch, Atom, HTML5, CSS, Github

Skills Used: Marketing, Branding, Visual Design, Front End Development

 
 The final landing page mock up for this project. 

The final landing page mock up for this project. 

 

Sell This App

the challenge

Build a landing page to market the app Where to Next? a travel app for people who want to find local events and businesses. In two weeks, use the fundamentals of typography, color theory, space and layout to design a landing page. Using HTML5 and CSS code the landing page. 

where to Next?

Where to Next? is an app that provides recommendations for local businesses, events, and festivals based on your GPS location. It was designed for people traveling in the United States for pleasure who land in a new place and want to know what's happening in the near future. 

My Role

In this project, I served as the visual designer and front end developer. I was given a colleague's idea and research and asked to only think about the visual design. 

 

 

 

 

 

 

 

Understanding How to Market an App

IF THIS APP WERE A CAR...

After I met with the creator of the app, reviewed their materials and read their case study. I spent some time thinking about the brand of the app. I considered who would be a spokesperson for this app, what are similar brands, and what adjectives would describe the brand's personality.  

Building the Theme

The app was targeted towards young adult users who were traveling for fun within the United States. In order to market the app to this type of user, I wanted to convey themes of Americana, spontaneity, authenticity, and fun.

Moodboard

I created a moodboard with images and textures I wanted to use in my visual design, goldilocks statements describing the app, and the color scheme for the app. I wanted to convey the idea of a summer road trip full of surprises.

Color & Imagery

I wanted to convey a relaxed, cool mood with the design so I started with blue. I used Adobe Color CC to then find a variation on contrasting, primary colors.

I did not want to rely on large scale images for my design, so I focused on utilizing texture and iconography to create visual interest and communicate the main ideas. 

INTERFACE DESIGN

Layout and Copy

I looked at landing pages for similar apps when designing the layout. I wanted a long landing page with significant white space and minimal images and copy text. I wanted to give users an opportunity to explore the features of the app without overwhelming them with excessive words or images. 

 
 

Call to Action

The purpose of the landing page is to call users to download the app. For this reason, I placed the call to action button prominently in the main image and also at the bottom of the page. 

 
 

Design Critique

Once I completed the design, I put it in front of my 20 classmates for their critique. From their comments, I made changes to image size, copy text, and organization of my page, but left the main images, color scheme and layout unchanged.

Now Let's Build It

Content Structure

I took my final layout and divided it into sections before I began building my landing page. I quickly learned that I was thinking too broadly, and I needed to think about each piece of text and image individually.

I began building my landing page by starting at the top and working my way down. After an entire day of struggling with the main image, I realized I needed to start over from the beginning. I learned how essential is to start with the content structure and hierarchy of your page, before you consider styling it. I once again returned to my Sketch file, and  assigned hierarchy and headings to each block of content.

Style

Once the content of the page was established, I moved on to styling the page in CSS. I found my minimalist design made styling the page easier than anticipated. I had extra time so I was able to begin experimenting with CSS animations and JavaScript. 

Putting it all together

My landing page design can be viewed here:

https://shannonmcconnell.github.io/wheretonext/#

Lessons Learned

I really enjoyed this project and found myself having extra time to complete variations on my design, think about designing a responsive site, and adding animation and interaction to my landing page. I am excited to continue developing my front end coding skills and taking on new projects. Here's what I learned from my first project:

1. Content first- Always start with the content and hierarchy of your site first.

2. Ensure you have high quality assets- I spent the majority of my time reformatting my assets so that they were the appropriate size and quality for including in my landing page. I learned an important lesson in how essential it is to provide high quality assets.

3. Design is not subjective- During the design critiques of my visual design, I was surprised by how many of my classmates used the same words and descriptors when discussing my landing page that I had used in designing it. I was really proud of myself for effectively communicating an idea through design. 

4. Critique makes your designs stronger- Presenting your work and receiving feedback gives you a better perspective of what went well and what doesn't work. Critique and iterations make for a higher quality final deliverable.