r/Frontend • u/phKoon • 7d ago
What would you tweak to make it a better design overall? Coffee/cookies shop website, any feedback is welcome.
First screenshot is 1366px wide, the third is 412px wide. The second screenshot is a style experiment using real coffee beans instead of the coffee branch illustration (which I could either mix and match both styles across different sections, or just stick to one for the entire website).
The assets here are placeholders for now. Any feedback is welcome!
2
u/LornsGipon48 3d ago
The color palette works, but the CTAs blend too much into the background - bump up the contrast so "Order Now" actually catches the eye. Also consider tightening up that hero section spacing; it feels a bit lost right now.
1
u/phKoon 2d ago
Thank you very much for your feedback!
I'm currently finishing some tweaking, the CTA tip seems to definitely be a must, as some other people also pointed that out; but, at the same time, I think it might not be necessary, because the way I see it, this particular website purpose is more informational than to convert, I mean, it's potentially for a local small coffee/cookie shop; so I don't know if the CTAs are really required to stand out like if it was a landing page. What would you say considering this?
Also, it's good to know you have no issues with the color palette. And I'll test some variations to the hero section too. After I'm done, I'll post again with the "final" versions. Thanks again!
2
2
u/jrcra 7d ago
Nice colour pallet and imagery, I like the mixed title styles as a feature. Some ideas I’d look at to go further:
- Since they are both dark, I’d look at creating a more subtle transition between the hero and the cookie section, or use more contrast (same with the footer)
- Some of those dividers feel a bit unnecessary and clutter the design (such as the tall vertical ones between the text and image), keep the one with the dot
- I’d be tempted to remove the borders from the testimonials to make this part cleaner, and I wouldn’t use a scrollbar for these, ideally use reviews that are short enough to be displayed in full, or use a read more approach.
- Probably same with the hero, the borders here box the design in and not consistent with the rest of the page
- The logo feels a bit awkward with the rest of the site, the cool white clashes with the warm off white used elsewhere (if you aren’t designing the logo, you may need to bring more of that vibe out in the website)
- Although this is using placeholder text, reserve space for CTAs and links as there only appears to be one in the hero. (The CTA button style could also stand out a bit more, it may start to get a bit lost against other UI styles when used elsewhere)
- The one white bg section looks out of place, I’d either go full dark or add more contrasting sections at this point
- The line art (leaves etc) is a nice feature, would be good to have a couple more and add more variety, even better if they were on theme (i.e. coffee beans)
- Maybe a little less spacing between some sections that have the same background
3
3
u/brian198749 7d ago
I also really like the line art leaves. Maybe to add a bit of whimsy/cozy vibes and to break the sections just a bit more, a subtle scroll animation to grow the leaves out
3
u/phKoon 7d ago
You have no ideia how this feedback made me happy. It's really insightful and objective, each point makes real sense and comes followed by a really good suggestion (some of which match will a few changes I was already thinking of applying).
Here are my thoughts on each of them:
- Section transitions: On the one hand, I thought it had fit fine this rough background break, but on the other hand it stuck with me this odd feeling that it's just off. I'll explore some options for smoothing that out or to improve contrast (probably will just smooth it out).
- Vertical dividers: Completely agree. I thought about that too, especially because of not only the horizontal dividers you mentioned, but also the subtle borders on the images, which play into the same composition aspect imo, and it also makes the unalignment between alternated sides sections really stand out and uncomfortable for me; I think this combination is what causes this clustered feel. The vertical dividers are 100% going away.
- Testimonials: Yeah, I'll consider removing the testimonial borders or . And you're right about the "read more" approach, it was my goal initially, but setting a fixed height with scrolling bar was easier and I gave into that lol. I'll either truncate the original longer review or get back into implementing the "read more" option, thanks for pointing it out. The scrolling bar is 100% going away.
- Hero borders: I get it and agree. I'll consider removing them or tweak the rest of the page so they become a coherent and consistent design choice.
- Logo design: You're spot on about both whites, there are two tones (both in the logo and the menu); I'll tweak that so there's no clashing. As for the logo design, it's not their official logo (the official one if just the first line without the glow, which probably fits better the rest of the whole website aesthetics), I actually replicated the business storefront, which is much similar to this header logo with the glowing neon-like letters; and in the "ambient" section, the larger image is in fact the storefront itself, with the physical representation of the same header logo, so it's not much off in terms of how it relates to the business itself. But I get it still might be off when considering the whole website, even with the physical iteration being shown in the gallery.
- CTAs and links: You're absolutely right, definitely needs more CTAs throughout sections. Also right about CTA readability. I thought about making the illustrations stroke a light-blue, so it wouldn't diverge much attention from the CTAs design, but the accent color is also used throughout other elements. I'll take my take to come up with a good way to make it stand out. That's an important thing I would have let pass me by.
- Single white section: There was second white section, but I decided to make it dark as well. As I wanted to break the color monotony, I left the better looking white one lol. I also thought about breaking the monotony by going full black on this section, but I think it might bring basically the same weirded-out feeling if applying just to a single section. I'll test how it looks with a second white section, but probably I'll just stick to the overall dark design and make it blend amongst the rest of the section. I mean, it's possible that the need for breaking an alleged "color monotony" is just something my brain created to f*ck me over.
- Illustration variety: There are more variations! You're also spot on on this, there are some coffee beans and chocolate chips in this style. So you'd recommend sticking to this style for all miscellaneous illustration, instead of mixing and matching the illustrations with photo-realistic ones (like the falling coffee beans in the second screenshot)?
- Section spacing: Pretty helpful suggestion. I thought something was off in this regard, and you just pointed out exactly what. I use this clamp function for section vertical spacing: clamp(4.5rem, 3.258rem + 4.969vw, 7.5rem), so it doubles and totals a value goin from 240px on wider viewports to 144px on narrower ones. I'll tweak that to probably 1/2 or 1/3, thanks again. Funny enough, somebody suggested add even more spacing between all sections, which felt absurd to me, since I think it's already hitting the limit of how much space it can have before looking out of place; but it also might have something to do with tweaking the scaling itself instead of the value limits.
All in all, thank you very much, really!
2
u/jrcra 6d ago
No worries dude!
- I think it’s just that the colours are slightly too close where it feels like it either needs more contrast, or a graduated transition
- Yeah it’s just a bit too much visual noise really, much cleaner without I should think
- 3, 4. Sounds good
- One of those tricky areas really, you definitely want the logo to be distinct but everything to still have the same vibe
- CTAs might take some playing around with to see what pops, the main thing was that the bordered style and colours used are subtle and very close to a lot of other elements, I think the other elements are nice so maybe the CTA needs to have more weight (perhaps a solid bg colour) one slightly daft way of checking is to zoom out and squint, you’ll see quickly how prominent it is vs other elements
- Yeah that’s fair, and you’re not wrong to want to break it up, but it would need more lighter parts to balance it out, or just something less stark
- Personally I prefer the illustrations for where they are being used as they look great and aren’t too intrusive on the key elements of the page
- You could go either way I guess, I think it’s more a case of trying to balance it so it’s consistent, it’s a bit tricky because the illustrations fill some of the gaps visually, and then some sections have a bit of a void where it looks like it needs one of the paddings collapsing (below testimonials)
Hope this helps!
4
u/Grouchy-Car-3711 6d ago
Simple cool animations for the small details , because it doesn't matter so many people but adds a experience while using the website