Branding site with Masonary grid & flex

Hi all, I have built this site for a branding client. The grid below the slider is a masonary grid for which I owe thanks to @cyberdave

They want it to look at it’s best on Desktops, especially the huge iMac Pros they use. Normally I use a container to keep content centralised, but this hasn’t always worked on their machines. They designed the pages and for many I have just had to lift the image and set it to background. Any feedback on how ti improve the site would be much appreciated.

Share link -



Nice concept. Execution needs some work. These points are just my opinion. No offense intended…

  • Horizontal scroll bar at bottom of viewport.

  • Logo shows as false link (does nothing when clicked).

  • No phone number in the header with plenty of room for it to be there. Think of mobile users that want to call because they can’t use the site features at that time (driving a car etc.)

  • Can just barely see the hero BG image of the Lancaster “dambuster” airplane. Even in a dark room.

  • The masonry grid is GIGANTIC on my 32" monitor, in a daunting manner.

  • No interactions on the masonry grid items to let me know that they are clickable links, save the finger-hand icon. For God’s sake man, it’s Webflow, take 5 seconds and put an interaction on it!

  • Most sliders, in general terms, don’t do much for conversion. this one does less. It is “stark” alright. There is little to no content in the slides. The white spaces above these graphics alone are begging for a context to be given to them or the project shown within them.

  • Clicking on the items in the masonry takes us back to some of the slides we already saw in the slider still without content or worse: a 404 page! Is this site live? :grimacing:

  • Separately outlining the two owners in the bottom “about” section almost gives the impression that they don’t work together, as does separate phone numbers in the “contact” section. There is no “shop” or “agency” feel because of this. You don’t start using “we” until the 3rd column, when it’s already too late, the impression is already set. I’d combine collective experience and then give their titles and years of experience. I’d also stay away from the use industry jargon or slang like “comms”. And it’s wordy… “…being responsible for the day to day running of the studio.” Maybe use: “Responsible for daily studio operations.”?

  • Duplicate the contact info @ the bottom in the footer. Don’t make me click or scroll for it because it breaks engagement.

The overall feel is someone needed a website, fast! So fast that they forgot to add much content or context to the work which is a shame, because they look like they know what they are doing.

My 2¢. Take care,

Thanks you @itbrian40, this is exactly the type of feedback I wanted, certainly not offended, this is entirely different from what I normally do and I appreciate your time. - The site isn’t live, I wanted as much feedback as possible before publishing.

My hands are tied with the design & copy - this is what they want, the grid, no phone number, the BG slider image. I do intend to add a hover interaction on the grid. Would you mind letting me know the 404 links you are getting - I can’t identify any?

I’m not sure what you mean by your last point to duplicate the content?

They want an image heavy website that showcases their work, it is a nightmare site because of this.

Thank you again, much appreciated.

The Hendersons-Rea link in the masonry grid pitches a 404.

I agree… clients like this are a nightmare. Ask them who will find them in Google search with literally no content? Even with ALT tags in place, having a site that is 90% graphics is insane. You can tell them I said that. :stuck_out_tongue_winking_eye:

Good luck!
Take care,

Thanks @itbrian40 - trust me I have had this conversation! (I will be putting ALT tags in place)

Very peculiar. I am not getting a 404 - I get the page

Re the last point about duplicating the contact onfo - could you expand on what you mean please?

The link in the masonry takes me to:, but pitches the 404 error.

This is my spec:
Google Chrome Browser Version 55.0.2883.87 m
Screen Res: 1360 x 768
Monitor: 32" Samsung LCD in 720 HDMI

I usually put contact info in the header and the footer, one, for mobile so you can just tap the phone number while driving etc. Also so once someone reaches the bottom of each page and are so amazed that they must call, they don’t have to scroll back to the top of the page or click a “contact” link to do so. If it’s a brick & mortar based business, I include an address in at least the footer. And hours of operation in the header and/or under driving directions and maps.


Thanks @itbrian40 - I ncan’t see why you are getting a 404, very strange. I’ll have to raise another forum question!!

1 Like

I guess you fixed it… seems to work now.

The link takes you to

@itbrian40 reported it took you to

Not for me, still broken. Tried in FF, Chrome and Safari.

I’ve just re-linked and re-published - would you mind trying now please?

Thank you.

still working for me

@itbrian40 … maybe try it in a different browser. Might be a caching issue.

I understand your client wants this, but you should tel them we said no! :stuck_out_tongue:

  • No sliders
  • Make the grid max 1400px width and the site in general.
  • hover effects
  • Info text about each project. The text should contain words and sentences that people might google.
  • The footer need some cleaning up. Text going everywhere

Im on a 27" iMac and I must say its not pretty. Much because of to big images that is not retina ready.

But I think that with a few easy adjustments this can be a nice site. :slight_smile:

1 Like

It’s working now! :+1:

Thank you @krubens, please do share the ‘few easy’ adjustments, I want this to be a nice site. Can I do anything with the images to make them better.

I’m a bit worried abou messing with the grid, how would you make the grid 1400px?

Thank you

Basicly just do everything @itbrian40 said :slight_smile:

If you dont make the grid bigger I guess the only thing to do is to upload bigger images. It makes the site slower, but the images less pixelated.
Another thing that could be done to not make it so much to look at on big screens is to put a overlay on every item, maybe with the client name and type of work. So when you hover over, the overlay fades out and you see the images as it is today.

But I understand you are in between a rock and a hard place.

Making the grid 1400px is done by setting the parent container to max-width: 1400px and press center element. That makes the left and right margin set to auto

1 Like

Thank you @itbrian40 & @krubens, I will work through the changes this week and post them once completed.

I reckon I owe you guys a beer if you are ever in the UK!


Mmmmmm! Beeeeeeer!

We’re here to help with what we can. I look forward to seeing your next iteration of this site.

Take care,