A few days ago I launched a new website for a small nanny agency starting up in Salisbury and Bath. Here I’ll explain a little about the project and how I approached it. Nannies Like Us (NLU) contacted me to design and develop a simple static website that would enable them to start taking inquires and help generate some new business for them. Here’s a quick snapshot of the homepage (click the image to visit the site) design

Starting out with a meeting…

Initially we started with a meeting and spent some time discussing what pages the site should have and what kind of content would be displayed on these pages. Everything needed to be kept pretty simple to keep within the clients budget, but I wanted to try and add a few touches that gave a slick, professional look to the site, while at the same time having a slightly playful feel as after all this site was about nannies looking after and caring for children.

Before I was able to start wireframing the homepage of the site we had a slight set back as the original name for the company had been taken by another company who had seemingly cropped up over night. This mean’t a new logo needed to be created – just something simple and colourful. My client sent me over a sketch of a typographic logo arranged in a circle, which I then recreated and tidied up in Illustrator. It was nothing groundbreaking in terms of design (I’m sure they won’t mind me saying that!), but we all felt it was playful in colour and would work well on the website and in print. I think its important to understand that not all companies/businesses need to spend a fortune on branding, and although usually I like to spend slightly over a day producing a variety of logo concepts and then more time developing those further, that isn’t necessarily the right solution for everyone. Sometimes something much more straight forward will fulfill the client’s needs.

Wireframes

Once the logo was finalised I quickly moved on to producing a wireframe for the homepage and internal pages of the site. As the logo was circular I saw this as a perfect opportunity to place the logo in the middle of the page and have the navigation options arranged either side of it. My client immediately liked the idea and signed off the wireframes with next to no amendments. home wireframe During our meeting I’d determined that NLU offered a free one hour consultation – a pretty good selling point I thought. With that in mind I wanted to include this on all the pages of the site. The main purpose of the site was for people to get in touch so we needed the contact details to be easily accessible. The only issue was that with the logo being positioned in the centre with the navigation options either side, a telephone number above this (the typical place for these details to be found, as opposed to being listed on a contact page) needed to be balanced out equally with something else the other side. That didn’t quite work, so I opted for a phone icon positioned flush to the top of the browser window, that when clicked would slide down to reveal the contact details. NLU were also going to rely on social media to find candidates for jobs so it was essential to include Facebook and Twitter links on the homepage of the site.

Design

Here’s a quick look at the design of some of the elements mentioned above. Below is the idea for the logo and navigation layout, along with the telephone icon that when clicked would slide down to reveal the contact details. header design header slide Below you can see the design for the “What We Offer” and “Free Consultation” boxes on the homepage. I decided to make the headers have a slightly slanted top edge to further reinforce the subtle child like nature of the site. I was sure to add the “Free Consultation” box to the internal pages of the site too. cta Here’s a partial look at one of the internal pages. I wanted to frame the main body content on white and have the peach coloured background fill the entire page. inner page Overall the client was very happy with the look and feel of the site. They showed it around and the general consensus was very good.

Development

The site was built using HTML5 and some subtle CSS3 enhancements. If your browser allows you’ll notice the main navigation links fade down when hovered over with the mouse. Here’s the code (highlighted in bold) that does that for each link;

li.nannies a { text-indent: -3000em; background:url(../images/nav/nannies.png) no-repeat left top; width: 67px; height: 21px; display: block; overflow: hidden; float:left; margin-left: 35px; -webkit-transition: opacity 0.2s ease-in-out; -moz-transition: opacity 0.2s ease-in-out; -o-transition: opacity 0.2s ease-in-out; transition: opacity 0.2s ease-in-out; }

I also used the jQuery bgFade plugin to create a nice fade effect on the logo and telephone icons when you hover over them. All pretty subtle things but details that I think are really important enhancements to add to a website.

Summary & Client’s Comments

My client was really pleased with the work and I believe the site has been getting a fair amount of visits already. The next step is going to be to start on an SEO campaign to try and boost the sites rankings for a select number of key phrases.

It all looks great Will. Thank you. I love the colours and the layout.

Subscribe to our newsletter!

Get the latest tips and advice through the Authentic Style newsletter

Please enable JavaScript in your browser to complete this form.

by subscribing you’ll receive periodic emails from us with helpful website tips.

Let’s create something
great together.

All great things start with a chat. Use the adjacent form or our project planner to get things started.

Project Planner

We’re currently accepting projects
Please enable JavaScript in your browser to complete this form.

Authentic Insights