How to Turn Anything Into a Website Design

Occasionally, clients might present us with inspiration for a design that doesn't come in the form of other website or graphic designs. In many cases it's their product, packaging, or something else closely related to their business. But in other cases, it's something entirely unrelated that they just like the looks of. In either case, it can often lead us feeling a little puzzled. How, exactly, do you turn a teacup into an e-commerce site? But if you learn to look at things objectively, you can turn virtually anything into a website design. By figuring out what it is about the thing your client has brought you appeals to them and then translating it into a design that captures those same elements, you'll have happier clients and fewer headaches. While this has the most obvious applications when working with clients, it can also be valuable if you're working on your own projects and are running a little short on ideas.

Look at the Overall Shapes

The shape of something can often be adapted to a design. Look at the curves or straight lines that make it up, the balance, the size and proportion, and even the negative space and what's missing. Think of ways you can adapt these to a web or print design.

Balance and Symmetry

Is the object or image in question balanced? Is it symmetrical or not? Sometimes a lack of balance can be translated into a design, but the results are often not as visually pleasing as we'd like. In many cases, if the item in question isn't balanced fairly well, it's best not to mimic this aspect of its appearance and to focus on other things instead. Image Credit: See-ming Lee The image above has asymmetrical balance. While the bridge and buildings dominate the left-hand side of the image, the right-hand side is brighter, making the overall image feel balanced even though the subjects of the photo individually are not.

Negative Space

The negative space within and surrounding an object, either in an image or in physical form can give valuable hints as to what your client considers attractive. Is the negative space sharp and well-defined, or does it flow and blend more smoothly? When considering how to incorporate negative space, consider both the shape of it as well as the balance of how much negative space compared to everything else. If there's little negative space, then it's likely your client isn't going to be too keen on big swaths of it in their design, and vice versa. Image Credit: Matt McGee There's a lot of negative space in the above image. As such, when adapting that to an actual design, the final product would likely have a ton of white space surrounding the content. In all, it would end up with a very light and airy feeling to it.

Proportion

The proportion of elements to each other can also offer valuable clues to how a client will perceive your designs. If the image or object they've given you for inspiration has exaggerated elements, that's a cue to make some parts of your design over-sized. On the other hand, if everything is perfectly proportioned, you'll need to make sure all the elements within your design are also. Image Credit: vauvau The image above has exaggerated proportions (it's a children's play house). This would be a good indication that proportion is something you can adjust to create more of a fun feeling and a sense of whimsy.

Look at Color, Pattern, and Texture

Colors, patterns, and textures are some of the easiest things to adapt to a website or other design. They're generally straight-forward and one of the most obvious things a client likely sees in whatever they're presenting you for inspiration. Just beware of copying colors too literally, as just because something looks great on a t-shirt doesn't mean it will work well on-screen.

Colors

Color is probably the easiest and most straight-forward element to adapt to website design. If a client gives you an object or an image to adapt, color is obviously the first place to start. Look at not only the colors, but also the way the colors are positioned in relation to each other for design cues. Image Credit: zehhhra If someone presented you with the above scarf as inspiration, there's a good chance they'd want the final design to incorporate a rainbow of bright colors. One of the best parts about this is that there's so much you can do with such a broad palette of colors.

Patterns

The most obvious way to adapt a pattern in a design is to use it as a background, either for the entire site or just certain elements. But consider how else you might be able to use elements from it. Maybe part of it could be adapted as an icon? The exact adaptation possibilities are dependent on how abstract you want to get and the pattern itself. Image Credit: shaire productions A wallpaper pattern like the one above could easily be turned into a background for a website. But instead of just turning it into a tiling background for the entire site, consider using it as the background for just the header, individual headings, or the site's footer.

Textures

Texture is another element that's relatively easy to adapt. Look at not only the texture itself but also the feeling it gives. Is it refined? Rustic? Edgy? Grungy? Textures can be incorporated in much the same way as patterns, either as backgrounds or adapted to individual site elements. Image Credit: Seldom Scene Photography The rope texture in the image above is rustic, and brings to mind a maritime theme. While a client might not be thinking that consciously, it's likely they would relate to other maritime-related elements in the site. It also shows a strong affinity for geometric shapes and repeating elements, which could be easily adpated to a design.

Look at the Details

The details in an image or object are a great way to incorporate elements without basing your entire design on what your client has brought you. In fact, sometimes including a few details here and there can please your client more than abstractly adapting a design to their inspirational piece.

Decoration

Decorations on an object or in an image are often easy to incorporate into the design of any site. Look at purely decorative elements and think of how they can be incorporated. Maybe there's a bit of filigree than can be used to accent the header. Or maybe there's another element that could be adapted into icons or custom list bullets. Again, this is going to depend heavily on what you're looking at. This image has a ton of decorative elements you could pull from. There's the scrollwork for one. That could be adapted to accent your header. There's the latticework in the background that could be adapted into a background texture. And there's the spiral of the columns that could be turned into a border. There's also the general formal, traditional, and fancy feeling that these decorations give, another valuable cue for what your client is looking for.

Simplicity

If a client brings you something that's very simple and minimalist in nature, it's likely that's what they're looking for in a website. They don't want something complicated or busy. At the opposite end of the spectrum is someone who brings you something that's complex and full of layers (decorations, colors, patterns, and textures all competing for attention). That client probably isn't going to be happy with a minimalist design and wants something with more visual complexity. Image Credit: JoshuaDavisPhotography.com The client who brings you the above image would likely be very pleased with a minimalist website with just a hint of color. If you delivered something filled with textures and patterns and fancy typography treatment, you could almost be guaranteed a very unhappy client.

Transitions

The transitions between elements of an object or image are another valuable cue into your client's taste. Are elements obviously separated, or do they all flow together? Does one item overlap the next, or is there white space separating them? Again, it's a valuable indicator of what your client is going to be pleased with and what they're going to hate. Image Credit: kevindooley The transitions in this image are a great example of how to take more abstract images and adapt them to your designs. The way the light directs the eye from one part of the image to the other parts, as well as the elements that run from one section of the space to the others is a great place to start. Use similar visual cues to direct your visitors from one content area to the next.

The Overall Feeling

Sometimes whatever your client has brought you just can't be adapted into a design. Maybe it's hideously ugly, or there just aren't any stand-out features that you can see. In those cases, it's better to look at the overall feeling of the piece and try to incorporate that into your design. Is the piece simple? Complex? Elegant? Fun? Goofy? Sophisticated? Rustic? Make a list of keywords that you associate with the piece and then go from there. This is a good idea even if you are going to incorporate specific elements, as it can add a sense of cohesion to the design.

Hypothetical Examples

Below are a handful of examples of how you can put the concepts above in practice in your own designs. Image Credit: Bah Humbug There are two things striking in this image. The first is the color of the background. That could easily be incorporated in any design. The other is the simplicity and negative space, also easily incorporated into any design. The other thing that stands out is the fact that the ladder is a little grungy, indicating grunge elements might be welcome in the design. Image Credit: woodleywonderworks The most obvious thing to adapt in this image would be the soft color scheme. Rounded elements would also be welcome in any design based on this. Subtle grunge details might also be welcome. Image Credit: Ash-rly The bright colors and slight glossiness of the candies here are the most obvious elements to adapt. Other, less apparent elements to adapt would include the subtle white striping and the pattern created by the candy wrappers. Image Credit: Wonderlane Any client who presents you with an image like this is obviously looking for something refined and upscale. Glitz and sparkle are a couple of keywords that come to mind. A dark but muted color palette would be appropriate. Lots of detail, textures, and layering would also fit well. Image Credit: one2c900d The soft blue color and gold detailing here stand out as obvious adaptation candidates. Incorporating either an actual rose or just the pink and green accents would also likely be welcome. Also look at the elegant, curving lines of both the teacup and the saucer. Scalloped edges would be a good element to adapt, as well. Image Credit: wickenden The overall feeling of this packaging is the place to start on a site for a company like this. It's rustic, old-fashioned, and a bit cheeky. The color scheme could also easily be adapted (black, tan, and brown), as well as the slightly grungy texture of the label. Image Credit: jlastras Here we have a variety of chocolates and ingredients often included in gourmet chocolate bars. There are a few things to pick out here: the textures and colors are the most obvious. But there's also the repeating geometric pattern in the chocolate bars, and the depth of field of the overall image. It's sophisticated and relatively simple, but there's still plenty of visual interest. Image Credit: studiosmith There are a few different things to work with here. There's the strong geometric shape of the vase. There's the bright, warm yellow background. There's the texture of the wood. And there's the negative space in and around the vase. All of these things could easily be adapted into a design that's warm and modern.

Conclusion

Next time a client brings you something strange with the words, "I want my website to look like this," you won't need to cringe. Instead, just look at whatever they've brought you with the concepts here in mind and create a website (or other design) that captures the essence of what they've brought in a way they might not have been expecting. You'll have a happier client and a site that you can be proud to include in your portfolio.