Design Critique: Culinaria

Designers

Food websites are some of my favorite websites to critique. They focus on large beautiful images of food with pops of color. Who doesn’t like that?

Culinaria doesn’t stray from this template.

Background Images

It’s quite common to code the image in the background of a site to stretch the entire width of the browser, so this isn’t anything new. It’s not hard to do with coding now, either, and with internet speed not being an issue, designers are increasingly utilizing this effective way of engaging the user.

The biggest issue with large images is of course a mobile site. With Responsive Design flooding the website development world, deciding how to deal with massive images is definitely something you have to consider. Most developers are choosing media queries to  load a smaller image based on whether it’s a mobile browser so that the user isn’t waiting forever for that beautiful shot to show up.

Unfortunately, it doesn’t look like Culinaria deals with their mobile site at all.

Header

Anytime you deal with a large background image, you’ll have to make a decision on the header. There are a few options available: text straight on the background; text on a background with opacity; text on a background with no opacity.

I like what Culinaria did with the solid background with the image peaking above it. The logo got put in a “flag” that provides a nice highlight. Nothing groundbreaking, but nice, clean, and simple.

I’m guessing this site was built a while ago, since the shadows used behind the logo are actually an image, not created with CSS3. The copyright information seems to confirm this (2009). As kind of a side note, even though this site still looks great, if it was built in 2009, it definitely time for a face lift!

Footer

The footer of course copied the header style because you’re only dealing with the real estate visible in the screen. And the footer is incredibly simple. The contact information is on the left – the most vital information – and just the copyright and “site design by” line on the right. But with an overall simple website, keeping the footer simple is important.

Take-Aways

  • Don’t be afraid of large images in your website design, but don’t forget mobile!
  • Site face lifts are important to keep up with tech – 2 years max
  • If the site is simple, the footers should be simple.
Comments