By the hills

“By the hills” is a small family-run bed & breakfast. Quietly situated at the foot of a mountain range, it invites you to stay and enjoy nature. The family and their staff know real insider tips off the beaten track, while the cosy rooms and cabins invite you to relax. A holiday in the midst of nature, a homely feeling as if you were at home – that’s what “By the hills” stands for.

Inspired by landscape pictures and cosy hotels, I decided to create something like this myself. Since this is a free project and I didn’t have a briefing, I first had to think about what situation this could fit. I decided on the case of “family business wants to refresh its image and a new website to go with it”.

My goal was to create an appealing overall image. The website should invite potential visitors to rent a room or a cottage and explore the nature. That’s why I also added a blog where the family and staff can share their insider tips and inform about the surroundings.



Solution approach

I didn’t want the B&B to look too modern or too old-fashioned. It wasn’t easy to find the right way. I also wanted to bring in a lot of colour, but not necessarily rely on the cliché of “green = nature”. To achieve this, I mainly worked with yellow and red tones and only used green as an accent.

Since I really wanted to emphasise the familiar, homely feeling, I had problems at times finding the right dosage. Despite all the cosiness – or precisely because of it – B&B remains a business, an offer, a service. That’s why I tried to provide a little insight by introducing the various family members/staff and personal “insider tips” in the blog, without becoming unprofessionally TOO private.

I found it interesting that I got carried away so often to reuse the layout with the sun behind the mountains. In the meantime, it can be found on almost every product and clearly stands for this one Bed & Breakfast.

Design process

I started with sketches and variations of the logo, but finally decided on a very simple option. My idea was that the logo shouldn’t distract from the “surrounding”. Afterwards, I started working on the website and created the first wireframes to test the structure. I decided on this colourful approach with text boxes and separate pages to set the B&B apart from the one-pagers of the hotel chains. During the creation of the website prototypes, I kept coming up with different ideas on how to sweeten the visit for the guests – I quickly created the corresponding mockups along the way.

The logo was created from sketches on paper and on the laptop in Adobe Illustrator. I created the website prototype in Adobe XD and the mockups in Adobe Photoshop.

However, I haven’t done it entirely without the work of other dear people. Here you can find a list of my resources.
Licence-free images from Unsplash
Licence-free images from Pexels


All in all, I think the project is very successful. The Bed & Breakfast looks friendly, inviting and has a certain modern touch without looking like a hotel chain. In retrospect, I might have opted for a different background colour for the website, but fortunately that could be changed quickly. I particularly like the mock-ups of the little amenities that could be used to sweeten the stay for visitors – there is something for everyone.

It was only the second time, after the “Isblink” project, that I worked so intensively with Adobe XD. But I still think the prototype is really successful and I’m proud that I stuck with it for so long. I was also able to learn and discover new functions by playing around and trying things out.

In total, I worked on the whole project for about 3-4 months, as I saw it more as a “leisure activity”.