Laura Niebel Headshot | Laura Niebel Web Design

Inspiration: Agency Website 'Hello Monday'

While doing some research for a previous blog article of mine on the project management and accounting software Hello Bonsai (you can read the article here), I stumbled across the digital agency Hello Monday and was super impressed by their portfolio website. This is why I decided to do a short & sweet write-up on their and in particular their agency site, so it might serve as a source of inspiration for other creatives and freelancers who are (re)-building their site (and which designer isn’t doing that at a couple of times a year?).

 

Smart animations & page transitions

Hello Monday is a digital agency that is creating digital products and experiences swell as branding for clients as diverse as National Geographic, Google and ESPN. They've got offices in New York, Copenhagen and Aarhus (Denmark). So, what's great about their site? Everything! Right on the landing page they show you exactly what they do using nifty typography as well as an animated illustration. But what’s really nice are the mouse hover interactions when you move your mouse over one of the portfolio thumbnails: the thumbnail crumbles and twitches with the corners being moved inwards depending on the movements of your mouse. Pretty cool! What is also interesting is that on desktop the navigation menu is revealed only when the user hovers with his mouse to the right hand side of the screen. Bad user experience? Well, the user is learning about the fact that there’s a navigation menu available when he first arrives at the homepage, where the menu is initially revealed and only moves off the screen when the user scrolls downwards. To be fair, I’m not sure how well this works for people with (vision) impairments or special needs that require screen readers and other assisted technology to browse the web. However, on mobile the navigation menu turns into a more traditional hamburger menu anyway, that is visible at all times, while still featuring a smooth slide in/out animation when pressed. Obviously the cool mouse-over effect applied to the portfolio thumbnails is not visible on mobile but the page transitions are still there.Page transitions? Well, when moving from page to page a brief full-page transition/animation– looking a bit like dripping paint - is triggered before the actual page appears. Additional the case studies in the portfolio section are presented nicely with large imagery and bold typography that’s easy on the eye. Hello Monday also makes it easy for potential clients to get in touch by including all contact details on every page, providing a different contact address for each inquiry. Subtle and smooth animations triggered by the user, have been used all over the site and really make for a quite seamless and coherent experience. Well done, Hello Monday!

You can find the actual website here: http://www.hellomonday.com

 

Final thoughts

The site triggers a few thoughts and consideration in me. Naturally, as a Webflow web designer I wonder: can I build effects like this easily in Webflow? And: what can I learn from this site and incorporate in my own work – not necessarily (only) from a visual point of view but also in terms of content and structure? After all the site is set up simply but effectively with straight forward, no-nonsense case studies that provide context to the work displayed. So, I invite you to check out the site and see what you can take away for your own future projects. I will certainly keep the site bookmarked in my “Inspiration” folder for future reference! Thanks Hello Monday!

This might also interest you...

Tuesday, December 31, 2019

Matterport: What it is and how you can integrate it into your next Webflow project

Ever heard of Matterport? The service allows you to place virtual walkthroughs on your client's website. This could be especially useful for real estate agents and tourism businesses. Let me show you how to easily integrate this feature into your next Webflow project.

Read more...
Thursday, December 26, 2019

How to source a background video from the Webflow CMS

Would you like to use a dynamic background video on your site? Maybe even use it on your CMS collection page? I show you how this is done in just 8-9 steps! Let's get started...

Read more...
Tuesday, December 24, 2019

How to create a cool slide in out hover interaction with Webflow

Want to do a fun hover animation with slide in text for your next project? I've made a short video to show you how it's done and there's also a link to the cloneable example project.

Read more...

Join the newsletter for Webflow & Web Design updates.

Thanks for subscribing! Your first newsletter will arrive in your inbox soon.
Oops! Something went wrong! Try again or get in touch via the form below, so I can add you manually!

Have questions or want to talk about a project idea?

Just send an email to laura.s.niebel@gmail.com or fill out the form below. I'm looking forward to hear from you!

Thanks! I'll get back to you as soon as possible!
Oops! Something went wrong while submitting the form. Please try again or contact me via email.