Streaming live at 10am (PST)

Advice on first proposal

Hi guys. Hope everyone is doing well. I am attempting to win my first bit of work and a little apprehensive about sending across the proposal for the new website. Everything is still new so I know there will be some mistakes in there. However, I just wondered if anyone would be kind enough to share their expertise for a moment to have a quick look over the site, see if there is any obvious catastrophic mistakes, or any advice, tips etc. Would really appreciate it.

In the proposal I’ve outlined an online booking system and fully interactive menu. I think I made the mistake on the last post including the link to their current website as it seems to have been removed. Anyway, if anyone could share some feedback I’d be indebted.

Thanks so much.

Gareth.


https://preview.webflow.com/preview/ship-on-the-shore-final-edition?utm_medium=preview_link&utm_source=designer&utm_content=ship-on-the-shore-final-edition&preview=8b6d7f4403fe420b141c4a57f7bc01d5&workflow=preview

@Gareth_Ellison it’s a good start, but there are a couple of things that I think you change.

The load animation
The over all animation could have a better video quality, I don’t know if you created it yourself or not. I think you could use a thicker font-weight and a slightly brighter color to make the text more readable. Also, the “your logo here” part should be removed to provide a better presentation.

The Header Area
The ship can be tad bit bigger. The “An experience like no other” headline seems it would be a better fit to be above the buttons and at a larger size, maybe 48.83px. The buttons could have a slightly faster transition.

Overall Page and User Experience

The scrolling animations are nice, but they are excessive and a bit slow which may not be appropriate for a project like this. Think about it like this, if I’m coming to a restaurant’s website to get certain information quickly whether it’s about the food or something else, I don’t want to have to scroll a long time to get to that information. This is especially true for older users who typically would enjoy this type of restaurant more than someone my age (20).

I feel it would be best if you optimize your design, so that the scrolling is not overwhelming and they feel a bit snappier.

Another thing I noticed is the size of the body copy rather small. 16px is generally an overall good size for body copy. At the moment, people who don’t have the greatest eye sight or who are older will have a difficult time reading text at 11-14px.

Responsiveness

Make sure that when you go over your design in different viewports, you check to make sure that elements have the appropriate spacing and they aren’t too cramped.

Some Resources To Help

Making a style guide before you start physically building out any website is essential. It saves you time on having to recreate elements and outputting repetitive CSS which can impact site performance. It’s also great for design consistency.

Here is a good video to watch: Dynamic Style Guides | Web Development Basics in #Webflow - YouTube

and

https://types-scale.com/ will help you create more efficient typography scaling.

I can also recommend checking out Wizardy created by Timothy Ricks. Which I think will greatly help with responsive scaling of elements and text.

New Responsive Technique for Webflow: Introducing wizardry. - YouTube

I’m sorry if this is a lot to digest, but I hope it helps you. Feel free to contact me with any questions.

2 Likes

Hi chris_loggins

Aw listen thank you so much for taking the time to look through it all and sending such a detailed response. That helps tremendously. I guess it’s just inexperience and hopefully will improve in time. I’m trying to give the user that wow factor, but at the same time need to remember why people are visiting the page. Your advice about making it snappier is awesome. What I’ll do is copy the project and send a few versions so they can look at both. What I can do is layout images neatly while at the same time giving options linked with why they are on the site in the first place.

I did the opening animation on FCP. I will use their logo there when I get it. But absolutely I agree, it needs to be eye-catching regardless.

The links will be so useful. One thing I need to improve a lot is consistency in design. So the Dynamic Style guide will be an amazing help, as other the others. These are all areas I struggle with.

I’ll get to work straight away. Again, many many thanks for taking the time to help. I know how valuable it is when you’re a designer. It’s great feedback and exactly what I was looking for.

All the best Chris.

Gareth.

@Gareth_Ellison anytime! If you want practice, take the Webflow University Courses where @McGuire is building out websites and try to recreate them with your own unique design.

Good luck, I hope your project goes well!

chris_loggins Awesome. I’ve went through most of the University stuff and was amazing help. I’ll go through it all again to help improve my technique. Great response to help me grow!

Thanks so much for your kind words and help Chris.

All the best with everything.