Streaming live at 10am (PST)

My first freelance multi-page site under my new design business done completely in Webflow!


#1

Hello All,

I just wanted to post the latest version of the site I built over the past few months for a client down in NYC. I'm excited about this version because it implements some hacks to get around some serious dropdown menu limitations within webflow. I created the entire menu manually using interactions and created a nested menu within that. Check it out!

www.canalalarm.com

UPDATE: Please do not email the company through the form on the page. I have gotten some reports of emails directed toward me, the designer, ending up in their email.
If you would like to contact me about webflow design please go to my website at www.dfinkdesign.com


#2

Good work man, very clean and nice navigation system.
Just a personal opinion, i would remove the shadow from the menu, it´s the only element you have with a shadow, and something is not right with that shadow, i cannot give you a clear explanation but that shadow don´t work.

But the rest is very nice, keep up with the work smiley


#3

Awesome website, love the look of the footer with the cityscape & the hero backgrounds at the top of most pages smile
Also, sweet menu, and I personally agree with @rui_almeida on removing the shadow, but that's just my personal preference. Great site!


#4

Thanks for the feedback. Is this better for the drop shadow? http://cad.webflow.com


#5

@DFink - Did you removed the shadow? because it´s the same.


#6

No I modified it. My client wants a shadow to make it look like a floating tab. I tried it without the shadow and it looks really bad. No depth at all.


#7

Looks nice.
I see what @Rui_Almeida is saying. You're aiming to a "flat style" design. But currently the menu tab really doesn't fit in the complete design.

I would also say to lose the dropshadow. Without is better. Looks flat. Like the overall website design.


#8

First of all. I really like the contact solution for the Canal West & Canal East. Well done.

  1. You might center the submit and input boxes in both sidebars.
  2. Furthermore I'd add some margin-top (upto 40px) to your paragraphs
    (also the productsparagraph) to give it all some "breathing space".
    1. And in line with the other comment about shadow on the menu. Make the shadow enter at -2 (and maybe a bit off-black, or 90%).

Cheers


#9

Well done bro!! If you wish to get more people to sign up your newsletter I recommend you to put it on the header. It works smile

Really like the menu one !


#10

I really liked the look and feel.

I was puzzled about the "team section", I was expecting to see faces/names/bios.


#11

Team section? I had made one but got rid of it a while ago. What browser are you using?


#12

@DFink - great job man! Keep it up!!


Full browser width dropdown list in dropdown widget
#13

I'd love a walkthrough of how you made that contact pop-out, i love that!


#14

It's really pretty simple. Just make a section and make it fixed to the left side however wide you want and 100% height. Then choose display:none

Then apply an interaction to it with an initial saying move right or left (depending on what side of the page) however many pixels wide it is.

Then make a button and apply an interaction to that choosing the style of the section you just made and say display block, move left/right x pixels ease action and do the opposite on the second click. You can also make another X button in the upper corner and tell it to do the opposite.

Hope that helps.


#15

Thanks for the response! I realized after I posted that there was a tutorial for this very thing. Came up with this setup (click contact): http://strive.webflow.com/


#16

In the about us section is the team icon. Perhaps I just mis-understood it's purpose.


#17

Oh, no thats what the client wanted, just like a staff section. They have a lot of employees so listing them all wouldn't really be a good idea.


#18

Nicely done, but I would use a higher quality image for the hero background. You can really see the aliasing in the image. Everyone says to stay within 100k but I have been doing hero images in the 150-200k range. I'd export from photoshop for web at high quality and put through jpeg mini.


#19