The Tarot Cafe

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.

Screen for computer
First design sized for the phone

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 borders of the 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.

New header with menu
New header on the phone version of the website.

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.

About Aliyah Marr

Creative Consultant for Social Entrepreneurs • RELEASE YOUR CREATIVE GENIUS * You know you are missing something. Like losing the keys to your car, you can’t go anywhere until you find the key that unlocks your creativity.

Leave a Reply