I created the Sunshine Cafe website using Webflow!
This took longer than expected considering I was busy with my own work and it took me a while to learn Webflow but I did it and I am very proud.
Inspiration
The first thing I did was look up websites from other cafes I liked and considered what I liked about them. The main one I loved was Thinking Cup. I liked how it was a single page and it just showed you the basic information. Here is Our Story, here is the Menu and here is how to contact us. I also liked how they had a slideshow effect to all the images and I liked how when you scrolled down it seemed like the picture was going with it. Both are features I would have loved to create but as you'll see I did the best I could do with it.
Wireframing
Figma
Adobe XD
So I had initially tried to wireframe it using Adobe XD but everything I was reading about Webflow was saying that it's better if it's in Figma. So I switched it. I had actually started the Webflow project before doing this on Figma/XD and it became so much more helpful to me when I did that. As I can figure out what is left for me to do.
Images
Main Image
People eating at Sunshine Cafe
Indoors
I'd be remiss to mention that I had to create several images using Photoshop to create this feeling that this is a real cafe. For the record, the top photo is a stock photo. Admittedly, these weren't my best Photoshops but I think it did the job. Resizing these photos became my biggest challenge eventually but happy with how it turned out.
Presentation
This is what it looks like now. Now this took me about two months to create and there are still some areas that I'd like to fix.
As for the future of this, I went to a couple of my design communities to get feedback and a lot of it was very helpful. I haven't implemented it yet but I am going to. The navbar in particular is a big change I made because of the feedback. This is going to helpful for me in the future when I can message any of these people if I'm having issues with it. All of these tips have motivated me to continue to learn it. I want to get good enough at this program that I can start building it out for clients.
One person recommended I watch a lot of Webflow University, which is a tutorial-based project that Webflow puts out to teach people how to use it. I also have one more part of Sunshine Cafe, which is the app.
Feedback
So I have to update this blog post a week after because I made a lot of improvements to it:
First off, as mentioned before I posted the site to /r/webflow, I also shared it on a design slack as well and I got a lot of feedback on it. So all the changes I've made are due to feedback from that. Shoutout Tom Smith who helped me with these changes.
I made a Navbar. I got a lot of people who didn't like that the logo would follow you wherever you go on the page. Even though it's one page, you can click on any of those sections and it'll scroll to where it is on the page.
The other thing that people thought I should change was the images. Sometimes they didn't fit the full width.
I ended up changing the logo based off of what one of my close friends said and it looks a lot better. I wanted to get the idea that there was a sun and I wanted it to look really bright.
Then lastly, I finally got it so it looks even more like the Thinking Cup website where as you scroll down the pictures change. It looks like a legitimate website now.
As you scroll down on the page this is what you get.
Kommentare