I’ve been looking at this for a whole week and I’m starting to lose my marbles…
I would appreciate some constructive feedback on any / all elements of the design and usability.
There are a few pages missing, but all of the main navigation links are working and responsive.
I’m building this in preparation for the first design tutorial that I’m going to put together in the following weeks. It’s a re-design of a real site: http://www.architecturetoday.co.uk/
I viewed your site with the following:
Google Chrome Browser Version 54.0.2840.71 m
Screen Res: 1360 x 768
Monitor: 32" Samsung LCD in HDMI
Here are my opinions.
The big blue header is very tall and pushes all your content down below the fold. Next, it reminds me of the Microsoft Windows BSOD (Blue Screen of Death) that gets pitched to you when Windows crashes. So, for me, that immediately has a negative connotation to it, mainly due to the color and the font you’ve chosen. The font speaks “IBM” to me rather than “Architecture”. Look at the difference a Tekton font makes…
Next, to me, your grid feels totally broken… it doesn’t flow due to pictures and captions not in alignment with whitespace and the grid.
Not a “fix” per sey, but look at just using a basic alignment and symmetry on the photos and aligning the type to the bottom of the pictures, as with the subscription box.
Last, the footer feels HUGE in the vertical plane. Is there a real need to repeat the same content here as in the BSOD header? Also, I’m thinking horizontal navigation bar, copyright notice, legal and privacy notices and then move the newsletter opt-in up into the page content area, since many people don’t even look at footers much, I fear it would be missed there.
Hi Joe!
Brian has already pointed out some of my opinions.
The combination between the strong blue & “mechanic type” font are not my favourite, but consider that as a subjective taste opinion - Take it as relevant as you want, once design and aesthetics are very personal and subjective
On a positive note, I really love your grid - maybe if you try not to keep it so aligned and use a more masonry style? Just a suggestion.
Overall, ver nicely done! Keep up the good work and sharing with the community
I actually like Nita’s idea a lot… masonry would work great here rather than the hard, boring grid I was thinking of when doing the mockups. You could even add interest with hover actions that show the text/caption explaining the picture(s).
I’ve thought about the masonry grid, but I haven’t yet figured out a simple way to set it up in Webflow with the dynamic collections… I know a couple of solutions have been posted on the forum. I want to set up the article pages so that X number are displayed, then you can ‘view all’ once you’ve scrolled to the bottom of those.
I was hoping to find a way to integrate some kind of pagination that will work smoothly with the CMS, that doesn’t involve using tabs…
You can use interactions to trigger the next page, but I think tabs are the best solution.
The integration between masonry grid and collections is very strait forward - There are a couple of good examples on the forum. I’ll leave you with one that I’ve made for a client, but this is using columns: https://webflow.com/website/mercearia-andre
Also, you can use Div Blocks and play with the column options:
I’m not code savvy, so maybe someone can help you with a script to pull pagination instead of using tabs…
