The Tarot Cafe

The Tarot Cafe Header

Designing for Responsive UI

With the modern responsive WordPress themes, it can be a challenge to make a header graphic that looks good on both a large computer screen and a phone. One of my pet peeves about contemporary UI design is that the header image is often so large that the user has to scroll down to see anything. This isn’t a problem on a phone with a vertical format but it is a problem on a horizontal format such as a computer screen.

The responsive format has to accommodate both vertical and horizontal layouts and a variety of sizes. This is as much a design problem as it is a UX issue. From a visual standpoint, what looks fine on a small screen can look humongous on a computer screen. Proportions go really wonky when a screen is resized: not just the image but the text sizes. Font sizes that look well balanced on one screen can change radically on another.

The header for the Tarot Cafe site took a few tries to get right: the cup that looked huge on the computer was too small on the phone or iPad. When I made the cup to a manageable size for the computer screen, it became too tiny on the phone. Plus, it “swam” inside the background image.

The solution finally came to me: if the image swam inside the confines of the header area, why not make the header a seascape? Well, I have to be honest, I wasn’t thinking that, but I did know that the plain background had to be replaced with something that had more detail. My literal left-brain struggled with the idea that I needed a table surface for the teacup first, but then I realized that the horizon could be the tabletop edge and the cup could rest upon the surface of the water.

The final image has a nice surreal effect. And the final design incorporates the original colors of yellow ochre and marine blue in the menu colors instead of in the image.


Your Portfolio Archive currently has no entries. You can start creating them on your dashboard.