Daily UI 003: Landing Page

Daily UI 003: Landing Page

I went to sit in a coffee shop to work on this landing page, starting with nothing but the prompt: "Landing Page".

I had a couple of ideas of what I could make the page about; I considered real-world products, made up services or events, and various other things. In the end, I decided to ask ChatGPT to tell me what the page should be about. I gave it very few details and was careful not to give it any bias towards anything, and told it I didn't want options, just what I should make a page for. It said "a boutique coffee shop".

I had a quick scan through some coffee shop landing pages here on Dribbble, got some inspiration, and ultimately settled on a dark, somewhat traditional looking landing page, incorporating high quality, low depth of field photography from Unsplash. I also used the name of the shop I was sitting in at the time: Coffee Anthology.

I wanted to add an extra layer of challenge to this design, so I gave myself the following added criteria:

  • Mobile-first design - this should be standard practice, I admit, but I'm a sucker for designing for nice big screens when that's what I'm working from.

  • Only 2 fonts - I tend not to go overboard on fonts, but I was strict about only being allowed 2 in this design.

  • Only 2 font sizes - I recently read something about how readability is improved by using fewer font sizes, so I wanted to limit myself to 2.

    • Cormorant size 50 for headings.

    • Noto Sans size 16 for subheadings/body.

Scroll Preview:

Interactive Carousel Demo:

More by Adam

View profile