A site that 'push'es the boundaries. Feedback very welcome

As an ageing Graphic Designer :wink: I made this site entirely with Webflow. I don’t think I could have hand coded this myself. Am really getting into WF now, can’t wait for WF2015
http://nanban.webflow.io/

3 Likes

Nice job! Have you considered maybe iframing in the Deliveroo service so that folks stay on your site and are able to go back easily? :slight_smile: It can be full height/width with an added header above. Love what you did with the food shots :slight_smile:

big up to the Brixton massive :+1:

1 Like

Really nice! Love the image transitions, been seeing that a lot recently and it’s such a cool effect.

My only feedback (tiny detail) would be to add a hover state to the buttons in the side bar, just so you know your way around.

And aye, represent the south London crew haha (even though to be fair I’m in Greater London, but hey)

Ta,
Jamie

Love the fixed images. One thing I noticed is that your image under “Drinks” is a stock image with a watermark on it though.

@Waldo_Broodryk
Thanks Waldo! Yes did consider iFrame but decided against as once the user has got to ordering a takeaway one of the main purpoises of the site has been fulfilled. There is very little they can garner from the site thereafter, unless you can demonstrate something I have totally missed?

@wolfie
yes Wolfie - South London, Brixton Boy in the house.

@jamiesamman992
Yes, nice consideration on the hover - will implement that - many thanks - big up.

@jordanshotwell
Drinks image is for placement - the restaurant has it’s own beer so the beer top will be used once I have taken photo - thanks for mentioning though.

Cool site. I’m just starting to use WebFlow and, so far, really like it! One thing I would like to do but not sure how is what you’re doing with the “book a table” button – when clicked, a form slides out from the right-hand side.

Are there any tutorials on exactly how to do this? I’ve searched around some and see references to it but not how to actually build a sidebar that slides out. I know how to do the interactions but not how to add the hidden sidebar element itself.

They’re actually quite easy.

Worth a look
https://webflow.com/website/Demo-Kit

My way of doing it:

Create a DIV
Give it a fixed width i.e. 300px
Height 100%
Position - Top Right

Add content in your DIV

When you have finished designing the DIV element, scroll down to TRANSFORMS
with the DIV selected hit the middle icon ‘TRANSLATE’ in the TRANSFORMS palette.
X/Y sliders will appear
move your horizontal slider to the right - or type in the amount you want to move to the right. If you DIV is 300px wide then move right 300px

Your Div will now disappear off your viewable area.
To view it again just click the ‘Eye’ icon next to the ‘TRANSFORMS - Move Right 300px’. Your DIV will appear again if you need it.

You then set an Interaction up. You said you know how to do that so I will not explain further.
Hope that helps.
BnH

2 Likes

Very nice interactions there! Cool parallax effect.

Tip: I would make ingredients 1 point bigger. And a dropshadow on the images :slight_smile:

These are just details, the overall concept is amazing, good work!

Thanks Daniel - appreciate your comments.

Hello, your site looks really good.
I have a suggestion for a very reasonable stock library, here is the link:
https://www.dollarphotoclub.com/
All the images and vectors are $1 each and I use it all the time. The free comps which you can download are 500px wide and have no watermarks on them, they are really good for smaller images on your site.
Good luck!