r/webdesign • u/Hosea8702 • 1d ago
Cafe web design
Enable HLS to view with audio, or disable this notification
just finished developing this site for a local cafe... what do yall think
20
u/Cyb3rPhantom 1d ago
looks great but the initial loading screen isn't needed
9
u/loveheaddit 1d ago edited 1d ago
this is my critique too. if you have to load assets, you put something else up for them read/browse/digest that loads first. then while they are distracted by that you load the rest of the content below it. in this case something that quickly communicates what they are and why they are unique. the current loading screen only tells me their name (twice btw) when it should describe why they are unique (Ethiopian blend, etc and maybe put a best seller or featured flavor up first)
3
u/Hosea8702 1d ago
I vibecoded the preloader design tbh, didn't have much time. I'll be sure to edit it later, thanks for the suggestions!
4
u/loveheaddit 1d ago
no problem! the key to UX is understanding how little patience people have. this is currently local so the speed is fast but on some people's connection it may be slower. you'll lose a lot of people at 5 seconds so keeping them engaged is important. really love the design beyond that!
1
2
u/QwenRed 1d ago edited 1d ago
I'd disagree, it's a vanity site, websites are of minimal importance to the actual business/industry (cafes), and the competition isn't really competing for ranking of their website with preference on google reviews to boost their ranking on google maps. (what I'm getting at is there's much more room for fun elements and loaders that aren't required on vanity sites.)
1
0
u/Hosea8702 1d ago
yea right, kinda become the norm nowadays tho, i see all award winning sites having one even for static sites. But actually since the background on the hero will be a video, the loading screen will give it some time to load.
2
u/BigSwooney 1d ago
Just make a fancy loader for the video then. Outside loading assets for 3d renderings there's no need for a loading screen. It's annoying and a trend of the past that somehow refuses to die out.
7
u/_OTimeThyPyramids_ 1d ago
If I go to a cafe's website looking for a menu and hours and hit a loading screen I'm going to a different cafe. Wasteful of people's data allotment and their time.
1
0
u/QwenRed 1d ago
How often are you doing this? The usual process is just googling and checking maps. If you actually go to a cafes website I guarantee its for almost always for a reason other than a just visiting it.
3
2
u/VFequalsVeryFcked 1d ago
No, people do use just go for menu/prices and opening hours. Google is good but it's not always accurate.
Especially for specific opening hours such as holidays.
Also, even you had another reason, I guarantee that a website that takes seconds to load rather than loading almost instantly will lose users immediately.
OP's website, while impressive, is serious overkill. I'd also be interested to see how it performs on mobile.
1
u/QwenRed 15h ago
Each convention has a purpose, vanity sites do no need to hit the same speed metrics as marketing funnels or ecommerce. People either know of a cafe they already go to because they're local or look online and just go to what's near by, the percentage of people judging a cafe on it's website is negligible. Local SEO isn't in websites it's in google maps, if I build a site for local SEO we're judging conversions on actions on google over on site, sure the site helps with this but compared to reviews the impact is minimal. Cafes are one of the few areas web designers can actually have fun and do awwwards design styles and not negatively impact the business's marketing funnel. In terms of mobile I can't see a reason when done properly that design can't respond and preform well on mobile.
7
u/aliteralbagof_dicks 1d ago
It looks great overall, but the header text animating in on EVERY section load is a tad much. I’d use this animation more sparingly if I were you.
2
3
u/CharcoalWalls 1d ago
Looks good!
While we are here - what is everyone using for a scrolling screen recording?
I know in this case OP is just manually doing it
3
u/Nenadweb 1d ago
Looks great and really original, congrats! Would love to see the mobile version too.
Desktop gives you so much more room to be creative, but mobile is often the version most of your audience will actually experience.
1
1d ago
[removed] — view removed comment
2
u/Nenadweb 1d ago
When I click on “Contact” the HTML anchor doesn’t take me directly to the contact section, but rather to the coffee image above contact form, which could potentially be a bit confusing for users.
I also think it would be useful to include the opening hours and maybe a Google Map. From a visitor’s perspective, I believe that information would be quite important.
Overall, it looks awesome, including on mobile! Thanks for sharing it with us and have fun with your next projects!
2
u/Hosea8702 1d ago
thanks man...
about the contact button... good catch. I just noticed on mobile it doesn't directly take u to the contact form since we have a tall image above it, tho it is still going to #contact section. will fix it.
and yea google map and open hours will be added. we're still finalizing some stuff.
3
u/Hopeful-Loss-8728 1d ago edited 1d ago
Im not sure that the loading screen is necessary for a local coffee shop ... or all those animations. Especially the footer. Why does the footer have animations ? 😂
5
2
2
u/Novakim 1d ago
Looks good, just personally I feel the main font is a bit too playful, did you choose it or did it come from the client's brand?
2
u/Hosea8702 1d ago
Client's brand. They gave me their full brand guidelines, so I was already constrained a bit. But I can see why u feel that way.
2
2
2
2
1
1
u/Esbyz 1d ago
Nice what is your price for a page like that?
1
u/Hosea8702 1d ago
About 500 usd, might sound low but where I live is a big factor. Looking to get more remote gigs...
2
u/bkseen 1d ago
Still, you are killing the market and could make 5x more minimum for a website design like that. That's not great overall. Not for you, not for your fellow web developers, not for the clients that want everything cheap after and are getting jumpy when priced for real gigs and coding features later.
Anyway, website looks great for once not just AI slop. Cheers
2
u/Hosea8702 1d ago
you're right, that's why I'm looking into remote gigs. as I said, ur location is a rly big factor. I live in Ethiopia and this is considered near premium price for a static site.
1
1
u/New-Ad-8811 1d ago
I mean coffee is brown, when dealing with coffee you play off of that. If I was selling grass and say you know what everyone plays off of green so I’m staying away from it, there’s a reason, it is the product. You can put your own touch on it, use complimentary colors, use another color people associate with it. Some will a neighboring color to feel more natural and so it doesn’t feel like it’s hitting your face. Esthetics is about how you want the product to make the target feel and there is always strengths to different strategies. Who is your customer and their personalities? Everything matters.
1
1
u/lifebroth 1d ago
The image curtain blinds animation is cool. Where did you get it?
1
u/Hosea8702 1d ago
think i just came up with it myself.. saw something similar on a site i don't remember and kinda tweaked it a bit. I just browse awwwards sites for this type of stuff
0
u/haikusbot 1d ago
The image curtain
Blinds animation is cool.
Where did you get it?
- lifebroth
I detect haikus. And sometimes, successfully. Learn more about me.
Opt out of replies: "haikusbot opt out" | Delete my comment: "haikusbot delete"
1
1
1
1
1
u/Nelsonius1 15h ago
It looks very nice, but from a visitor standpoint, i am not sure this leads to happy customers:
Fast, easy access to information, as little motion as possible (none).
It is a very dense site, that asks a lot of brainpower.
After that fun hero, it should just be static and clear in the offer.
1
1
u/Boboshady 13h ago
Why do we have that loading screen? The site itself looks OK, I like the hero, I'd lose the animated text, and I can't tell from the bits where you stop and scroll sideways but if those bits are scroll hijacking, remove that immediately.
I'd be tempted to tone down the transition animations, too - especially if they're adding a bunch of page weight.
I'd then review the site from a user point of view, it's hard to do it properly from a video, but stuff like...where the hell actually is this cafe? What times are you open? These are the two things I care most about as a potential customer, and I can't readily see them at all.
So yeah, looks nice...but it's definitely form over function at the moment, and given the whole point is to drive footfall, not just impress people, it needs some work.
1
u/ajamdonut 1d ago
Very good. Professional grade and well worth the money for the buyer. Only one key piece of information I couldn't find was Opening Times. Rest looks great well done.
1
u/Hosea8702 1d ago
thank you! and yea, should prolly add that somewhere👍
2
u/ajamdonut 1d ago
Another thing I would have liked to see - is what happens on mobile. Maybe make that your next post.
1
u/Inside_Marsupial9625 1d ago
what did you use to create that? Looks awesome man!
5
u/Hosea8702 1d ago
thanks man, I designed it in Figma, and developed it using astrojs (with gsap for animations, and lenis for smooth scroll)
0
u/martinbean 1d ago
Absolutely fucking hate websites where things slide and fade into view when scrolling. It adds absolutely nothing, and is the equivalent of adding slide transitions to PowerPoint slides: gimmicks to hide lack of design.
2
u/TNTmongoose5 1d ago
Dont use entrance animations when making a website for u/martinbean. Got it.
3
0
u/84thdev 1d ago
Framer sites are so bogged down
-1
u/Hosea8702 1d ago
this isn't a framer site, it's custom coded using astrojs and sanity cms for the digital menu
0
u/New-Ad-8811 1d ago
This is one of the most beautiful websites I’ve ever seen. I know everyone is going to have their opinions but let me tell you I love it. I really like the pictures and your website feels like one cohesive theme with colors and feel. It’s like your pictures are apart of the theme, dark tones, brown colors with yellow lighting and not just an afterthought. It’s like everything is complimenting each other and it makes you feel warm and a little intimate. Anyway great job!
1
-1
u/ApprehensiveBar6841 1d ago
I simply hate when people connect brown shades with coffee brand. It looks like template to me. There is so many colors that you can choose from.
24
u/charlie4343_ 1d ago
hello opus, build me clone of localhost:4321, make no mistakes.
looks gr8 BTW