Yesterday it was finally time to release another one of the website projects I have been currently working on, the website for Tierarztpraxis Maier & Dr. Knodel in Ehingen (click for the site), an Ehingen-based veterinary practice.
Other than in the last big project, Naturkosmetik Stolz, this time I did not only create the code but also the overall screen design, which is why I am especially proud of this one.
In this post, I am going to give you a short overview of the site’s contents and I’ll point out some of the more interesting features.
If you have read my older posts, you will probably recall me mentioning this project once before. Back then I already talked about the basic principles on which I based my design:
- Friendly and reassuring, yet professional appearance. The site is supposed to communicate the practice’s professional and welcoming approach.
- Easily understandable information and site architecture. As the target audience includes people who are not using the internet on a regular basis or people who are looking for information in a case of emergency, all relevant information must be easily accesible.
Screen design & code
These were of course major considerations while creating the screen design. They also influenced the choice of the typography and colour of the site.
The fonts used look professional while preserving a somewhat friendly nature. For the headlines I used the web font Signika from Google Web Fonts.
Blue as a colour is generally understood to symbolise trust and concentration, which makes it a great choice for a health care related business.
I developed the logo itself for the client some time ago, before there was talk of having a website. I like it quite a lot as it aims to represent different aspects of the vets’ work – it shows both farm animals and pets, combined into a harmonic shape. I think it is a nice logo under considering both syntactic and semantic aspects and works equally well in colour on a white background and in inverted, in white on colour.
On the website it is used in the latter way, in white on blue, hovering into a dark blue using a CSS3-transition.
One of the big web design trends right now is using large background-images for websites, and this I did on this site. Most of the background-image is taken up by an out-of-focus environment, which is great to minimize distraction. In the center of the background-image however there is the image a dog peering out between the header bar and the main content box. This helps to grab the viewers attention and to create an emotional connection.
This is especially impressive when you select one the boxes displaying biographical information on the different vets. Then the originally coloured photo of the two doctors fades into black and white, and only the selected person appears in colour, while the rest of the image becomes blurry.
This is achieved by having different versions of the original image hidden with
display:none; and by fading in the required one as soon as the right button is clicked.
This creates a nice interactive effect without much complicated code.
Over the last few months I started working on a couple of websites on a more professional level at a time, and this is the first one of them to be released. I am really pleased with the general appearance and the quality of the code.
Many of my upcoming projects will have a more complex php background, but never the less I think this one is a great start for a series of exciting projects.
As always I would love to hear your thoughts on this post and the project in general!