App Landing Page

Best landing page to present your app.

http://katherinedelorme.com/applanding/index
Image of a hand holding a phone displaying an app

Coded the webpage from a designer's UI design. A striking resemblance, am I right? I treated the design as a template so that it can be used with any app. The design was made as a concept for an informative and slick app landing page. The purpose, to provide information regarding an app. The call-to-action is downloading the app so a lot of download buttons are strategically placed throughout the page.

Service

Frontend Development

Partnered With

Ibrahim Emran

Date

2017

A snippet of a landing page for an app developed by Katherine Delorme
Top portion of the home page

Background Image Color Overlay

In the PSD the background image has a color overlay on it. Getting it to do the same in css was a challenge. Using a modified version of the image would be a quick solution but I want the site's code to be easily reusable. As a landing page template if a color aside from purple was chosen then the image would have to be remade in Photoshop. I placed the original image as the background and figure out how to apply a color overlay with css. The idea of developing it like a template was also why I created the project in scss. By setting the colors up as variables changing the site's color scheme could be easy.

Adding My Touch

One element I added to the page giving it my own touch while not straying far from the design was the navigation menu. I added an animation with a full-screen transparent overlay. This was built using css and javascript. The mock-up didn't include a navigation so I decided to make the call. I believed this type of menu fit well with the hamburger menu and page design. When the hamburger menu is clicked a delightful micro-moment is experienced when the three bars turn into an 'X'. The symbol of an “X” also help to show users how to navigate away from the menu.

Responsive Issue

Another achievement was the site's responsive aspects. The PSD I was given showed responsiveness by scaling down the design to tablet and mobile with the elements and placements STILL remaining intact. Nothing in the design changed, the elements just scaled smaller. While in actuality this would result in an unusable product, especially on mobile. I ended up creating my own responsive version.

Full page view of the app landing page developed by Katherine Delorme

Duties

Frontend Development
Responsiveness
Search Engine Optimization
Entire coding of site


Limitations I set

Use semantic classnames
Alphabetized CSS
No use of !important
Reduced style redundancies
Utilize git

Utilized

SCSS
Flexbox
Html5
CSS selectors
CSS linter
Atom
The provided PSD

View Landing Page View GitHub Repo View on Behance