We were lucky enough to get the opportunity to design a new website for Chelsea Flower Show gold award winning garden designer, Hugo Bugg.
We worked with Hugo and his team to create a beautiful website that makes use of full-screen, responsive imagery, and thanks to the quality of the photography of gardens he’s designed, the result is an extremely positive one.
Web design using full screen imagery
The home page design, shown below, forms the basis of all other pages on the website as a means to set the tone – which is quite simple: beautiful imagery filling the background of the page; branded navigation running across the bottom of the page (in a fixed position), then overlaid text for each page, which scrolls independently from the fixed-position background images.
The ‘about’ section of the website uses one page template which improves the load time of the site. It features various sub-sections, including a general ‘about’ page, an ‘approach’ page, ‘practice’ and a profile page for the man himself.
Overlaid text boxes that collapse and expand
Within the portfolio section we wanted the visitor to be able to appreciate the images without distraction. So we built a feature that allows the visitor to hide and reveal the project text boxes.
Below, the portfolio detail page with the text box revealed, and with the text box hidden after the ‘minimise’ icon has been clicked:
The visitor can then scroll (or swipe) through the images within the project, with helpful ellipses at the bottom of the screen as visual cues to indicate how many images there are in the slideshow. And the text box moves out of view, instead of just disappearing – for a more interactive and positive user experience.
The portfolio section, along with the rest of the site, is of course mobile friendly; the pages look just as brilliant when viewing on a portrait device.
Hugo’s portfolio is broken down into categories to give the visitor a more positive browsing experience. The portfolio overview offers the visitor a responsive grid of images, with a list of categories across the top of the window:
A visual inspiration feed
We built an inspiration gallery, for extended inspiration beyond Hugo’s portfolio. Each image in the feed can be clicked to open our custom pop-up gallery:
A responsive blog
Many websites need a blog or news section, so we created one that’s visually similar to the inspiration layout; the overview images can tesselate in a masonic style:
Instead of pop-up images when a news story is selected, a news detail page opens which uses the same page template as the ‘about’ page, for continuity in the reading experience.
And finally… The contact page
Hugo’s contact page has a full screen map in the background, along with company details and social media links:
But that’s not all… We’re not the biggest fans of embedded Google maps when browsing using a touch device; as soon as you scroll over the map (using your finger) you start to move the map instead of scrolling the page.
The map we created for Hugo is clever; it’s not embedded, meaning it stays where we want it to. But when viewing on smaller screens the position of the ‘Hugo Bugg’ map marker moves to ensure that the marker is always visible.
If you want to create a website that uses full screen imagery like Hugo’s, you’ll need three things to ensure ensure the browsing experience is a positive one:
- Outstanding imagery
- Exceptional web code to ensure fast page load time
- Reliable hosting to serve up those whopping image files.
Experience the design at hugobugg.com