Skip to content
Branch: master
Find file History
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
..
Failed to load latest commit information.
css
img
README.md
index.html

README.md

Daily UI Challenge #003: Landing Page (above the fold)

I think it was harder for me to think of a concept to "promote" for this challenge rather than create the page itself. Landing pages are like advertisements for a product, so in order to make a landing page work, you need to sell something. After tossing a few ideas around, I decided on a fake meetup app aptly called MeetUp as the product of this landing page. I debated using real products, but to avoid any copyright disputes I went with a fake product.

One of the inspirations for the design of this page is Stripe. I consider their webpage to be one of the gold standards of web design. They achieve so much on their webpage that it blew my mind of what could do with web technologies. I borrowed a couple elements from their page for MeetUp. One was the skewed background and tiles, which adds some character to the hero section. The other was the CSS only device. This was something I had wanted to do on my prior projects, but never found the right application for. My CSS phone may not hold a candle to some of Stripe's designs, but it was a good learning experience for any future applications of what I will dub "CSS art".

Because the challenge specifically mentioned "above the fold", my focus was only on the hero and the beginning of what would be the body of the webpage. Because this is the first part of the webpage that a user will see, it's probably the most important aspect of a landing page to nail down.

As for whether MeetUp would work if it were real... Well maybe if I had someone with better advertising/marketing skills rewrite the text blurbs, then maybe.

Fonts Used

You can’t perform that action at this time.