Create a Landing Page for a mobile app and proceed to build it using HTML and CSS.
My Role
Visual Design, Front End Web Development
Tools
Sketch, Moodboard, Atom, CodePen, Github
Duration
10 days
Mission
Design a landing page for a mobile app that my colleague created and then code it.
Design Process
This is an app that allows neighbors to report crimes in real time so I wanted to be clear about the primary features up front. Here, you'll see 2 initial sketches and I decided to take the best of both worlds. I wanted to focus the prototype image as a hook and then follow up with the features listed out.
Initial Sketches of Landing Page
Visual Design
I created a mood board to get started on the emotions I wanted to convey with this app. I also worked on several iterations, adding in colors, images, and explored various typefaces.
Mood Board for the safety app
Landing Page - Version 1
Landing Page - Version 2
Landing Page - Final Version
I was happy with the crisp layout above, but I wanted the landing page to exert a warm feeling of safety and happiness. Hence, I added an image of a young girl playing on the sidewalk in front of her house and brought down the opacity to 35% so as not to detract from the prototype. From a marketing standpoint, this is excellent visual design because the girl is looking and running toward the prototype, attracting the eye of the user to that area.
Web Development
With the visual design in place, I set to work to code my first full page using HTML, CSS, and I topped it off with some JQuery for fun!
I broke down the design down into 10 divs and started coding. I quickly learned that I didn't create enough divs initially so I had to add a bunch as I was coding.
The HTML looked pretty clean, but I had trouble in CSS and started giving single items IDs so I could style that one particular item. This made for some messy CSS. I did clean it up, but I struggled with separating items in a calculated manner and therefore, I had a bunch of extra code.
In particular, I also found that centering items is more complex than "text-align: center" or "display:inline-block" as there could be other units blocking this action. Utilizing Stack Overflow and various other help sites, I was able to find answers to specific issues to accomplish my goal.
To say the least it was a frustrating yet rewarding week, so much so that I wanted to spice it up with JQuery. I researched a few options and ended up with a phone "flip."
Check out the code on my Github!