Coffee Capers - Coffee Shop Concept

Community resources Show & Tell
1

Decided recently to make a concept site that would work for a modern, local coffee shop (address and phone number on the ‘Contact’ page are obviously placeholder).

1280×980 422 KB

http://coffeecapers.webflow.io/

Let me know what you think, this was slightly inspired by this.

2 Likes
2

Great job @aegnorkeil
It’s nice and clean and beautiful.

My notes:
1 - The background video awesome but a bit fast for me. I see coffee as a relax and enjoy time and slow moving steam would give that impression. (my opinion)
2 - I think the hero needs some sort of an invitation to scroll, something like your inspiration page has. For me it;'s natural to scroll but most of whom i show my sites too don’t. specially since the menu is in the bottom.
3 - The fonts are really awesome for this kind of a site but i would make them 16 pts also the lines are too long . 88 characters is best i believe.

Other than that, great job Austin!

1 Like
3

Nice job on it!

Here are my thoughts what I found negative about the site. :wink:

  1. Cursive Headers do not go with the Hero, it looks like two different styles in my opinion.
  2. I think the red is too dark for a coffee shop, try use more cream colors maybe? (the hero is also more of a cream image setting) :wink:
  3. Add more spacing between the sections and content inside of them (its never enough !!! … haha :smile:)
    4)I dont know what icons you used, but they are super blurry on my 4K. :confused:

I think you have something great going with the hero, I really like it, but in my opinion it looks like two different sites after the hero.

Hopefully this helps. :grinning:

1 Like
4

Thank you @Anna_Kelian and @VladimirVitaliyevich for both of your feedback.

I took your advice for the most part, however to Vladimir, my concern with the cream color is how it would display in the white and light gray backgrounds, however it seemed to work well as a CTA-div color. What do you think?

The icons on the home page have been lightened to the hero-section overlay color, but with 100% opacity.

Also the icons i used were from IconsDB but I had compressed them as recommended by Page Insights, should I revert back to original quality?

1 Like
5

Associated Pages

I’d prefer if the top image on each of the associate pages (about / menu / events / contacts)

  • were more personal and colorful.

For example… the Events page…

  • perhaps use a photo of the actual “Artist Guild” or “Tom Shunn” event.

…where as on the Menu page,

  • you might show different coffees / tea’s / bagels / etc
  • (in bright colors… as colorful food is generally more appealing)

and the About page

  • perhaps an “older” black & white photo / image implying “history”.

The main page…

  • the Menu located at the bottom is a bit “disconjointed”…
  • The other pages have the Menu at the top as opposed to the bottom.

(internet definition)
the opposite of being conjoint:
1.not joined together; united; combined; not associated.

I like the bottom position… but you need to pick one.

You are making the viewer “think” when they should be “looking”.

  • “Thinking” is harder than “looking”.

I build a lot of Medical websites… and “that type” of visitor “wants to think”.

But I’m guessing - with a coffee shop / eatery / restaurant / etc…

  • visitors don’t really want to think. They want to enjoy… which generally entails “looking”.

Main Page Arrow
I’d change the Main Page Arrow to a “Options” link or something else.

  • Basically something that prompts the visitor to “click it”.

About Page
You also have a small issue with the H tags on the About page.

The About Page jumps when compared to the menu / events / contact pages.

The About Page has an H2 @940x36

  • while the other pages uses an H1 @940x44

When you flip back and forth between the pages - the different size is evident.

Main Page Video

The video (I think) needs to be slower. More whispy coffee. Video speed is too fast. People sit and enjoy coffee / tea.

1 Like