carmafluxus.com

Coding

Website for Tierarztpraxis Maier & Dr. Knodel

Posted on .

Website for Tierarztpraxis Maier & Dr. Knodel

Introduction

Coding

Website for Tierarztpraxis Maier & Dr. Knodel

Posted on .

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.

Initial thoughts

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.

Tierarztpraxis Maier & Dr.Knodel Logo

The logo incorporates the shapes of both farm animals and pets.

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.

The homepage of the website.

The homepage of the website.

One of the most interesting pages is in my opinion the “unser team” (our team) page. There iis some JavaScript/jQuery code in the background that produces different images of the team depending on what information is being viewed by the user.

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.

Photo of the team

Depending on which member of the team is selected, the rest of the image fades into black and white and out of focus.

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.

Conclusion

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!

 

profile

Max Maier

Max is working as a User Experience Designer at a web and e-learning agency in Stuttgart, Germany. The web has been a second home for him since his teenage years, and he loves to see it become more mature (as he does – somewhat).

There are no comments.

Leave a Reply

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

View Comments (0) ...
Navigation