Coffee shop landing page.
Hey I have build a very basic landing page for a coffee shop.
Could you let me know any parts that you would make differently and why?
Thanks!
https://www.figma.com/file/qiNxGoVCc9eN7oeQWhMxQd/Untitled?type=design&node-id=0%3A1&mode=design&t=prjlTi0uGr8PzZ57-1
1 Reply
Nice work. A couple of things offhand: be consistent in how you’re using capitalization. You have “About us” where the us is not capitalized , then in the hero you have the first word of most letters capitalized , same with “Our Philosophy”, “Map Your Way…” “Immerse Yourself…” but then “Choose your flavor” does not follow that same pattern. Just be consistent with all your headers. The hero has some wiggle room to be different , say if you were to make the whole hero uppercase , you wouldn’t need to do so on all the following headers but in the main body of the page you want to stick to a pattern whatever it is.
The other thing is the “Our Philosophy” section length is a little odd. You establish a two column layout with About Us but then Our Philosphy doesn’t follow that. I would recommend either making it fill up both columns with the text , or if you want to keep it 3/4 of the two cols , put a portrait image or a sidebar or something in the last 1/4. Having that white space there throws off the layout.
The navigation items menu doesn’t look centered. The image in About Us uses a filter to adjust the saturation and it doesn’t match with the rest of your images. In that same vein, the rest of your images are close-ups with a clear focal points. This About Us image with the blurred foreground and no identifiable focal point just doesn’t follow the pattern you’ve established. Im not sure how it illustrates “About Us”. Until I look very closely I have no idea what the photo is or how it enhances the information of the body copy. An image closer to the bar, maybe with a sign of the establishment or with a focus on the menu with the bar in the bg, or even better would be one of the employees at the espresso machine.
The body copy of About Us needs some line-height like the Our Philosophy section has. About body copy is too squished.
Also make sure your consistent with your spacing throughout and how you break up the information. You have two sections with text then you have two full width sections, three if you could the map. Having something in btw the Choose Your and Immerse Yourself sections besides that strip of white space would be ideal. Even moving the map up and having the Immerse section right above a footer would work. If you don’t want to put something in between, I’d see how it looks just putting both of them together without separating with that white space.
This is a lot of notes but don’t be discouraged this is a good first draft, and it can be even better with some more attention to detail!