Apr 21 2010

How to Turn Anything Into a Website Design

Advertisement

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.

balance

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.

negativespace

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.

proportion

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.

color

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.

pattern

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.

texture

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.

decoration

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.

simplicity

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.

transitions

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.

ladder

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.

eggs

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.

strawberryfondant

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.

partydress

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.

teacup

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.

mississippimud

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.

chocolate

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.

vase

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.

About the Author

Cameron Chapman is a professional Web and graphic designer with many years of experience. She writes for a number of blogs, including her own, Cameron Chapman On Writing. She’s also the author of Internet Famous: A Practical Guide to Becoming an Online Celebrity.

Comments and Discussions
  • Damon, 21 April 2010

    Well thought out – its pretty impressive to see everyday images and how you can relate them to design fundamentals – which is the key to a good design.

    Having a good handle on the basics of design will only aid one in finding traits in images, like you’ve done, Cameron. Good job.

  • FlashMoto, 21 April 2010

    That’s a great article, Cameron!
    I enjoyed my reading. Thank you.

  • Web Designer Mexico, 21 April 2010

    Interesting article, when you get inspired by details that surrounds you instead of looking always through the computer, the results and quality are remarcably better.

    We only need to look for those details.

    Thanks!

  • Stefan Rynkowski, 21 April 2010

    I like the overall feeling most :) Cool article =) My tip is to look behind your imagination, look at your neighbour, your cat or something else ..!

  • Nikunj, 21 April 2010

    Nice Article, using image in background is a great idea

  • Cook, 21 April 2010

    very nice article…useful read

  • Ruth Rusch, 21 April 2010

    Thank you for this article. It really brought me back to my days in school and the basics of design. I loved that you provided examples.
    Great Job!!!

  • Aljiro, 21 April 2010

    Top class article. The examples part is well appreciated and it helps the information sink in.

    Thanks.

  • Nick Parsons, 21 April 2010

    This is a very unique and well executed article, Cameron. I also think it would be really neat to see some actual mockups made from those images.

    Very helpful and creative, though – good work!

  • Tim Stringer, 21 April 2010

    Great article, Cameron. I’d like to second Nick’s request for mockups of websites (or even actual websites) inspired by these or other images. The subject of another blog post perhaps?

  • Rachel, 21 April 2010

    Really well thought out article. Quite interesting – it shows how absolutely anything that somebody finds inspiring can be put into a practical, beautiful design.

  • Mike Heremans, 21 April 2010

    Nice article, it really showed me what to look for in a picture (object) and how to incorporate that in a design.

  • Design Idea, 21 April 2010

    NieNice article :D Thanks

  • Unamused, 21 April 2010

    How did that explain anything?

    This awful place has become just a place for you guys to post photos and use more than 140 characters. Ick!

    • mojito, 18 May 2010

      i must partialy agree…

  • Abdullah Al Mamun, 21 April 2010

    nice reading!

  • Natalie, 22 April 2010

    Great article, shows you can find inspiration in anything. Brought back lesson learn’t as a student, which I shoud put into practice more often. Thanks.

  • abeedo21, 22 April 2010

    Nice approach

    thnx

  • Rory Dixon, 22 April 2010

    Wow, it’s almost a methodology for inspiration – nice article :)

  • Muhammad, 22 April 2010

    nice view. \m/

  • Jordan Walker, 22 April 2010

    To be a better web designer you almost have to see life around you as a glorious design.

  • miche, 22 April 2010

    This got me thinking that it would be a good idea to come up with a unique design each day based on something i see. This could really help people use what is around them to influence designs rather than current trends

  • Margarette Cima, 22 April 2010

    hey this blog is good. I’m glad I came by this weblog. Perhaps I can contribute in the close to future.

  • Justin Carroll, 22 April 2010

    Great stuff. It’s important to explore the attributes of the design they like. Don’t pass an opportunity to reap exploration for applicable ideas.

  • nirvesh, 22 April 2010

    nice article

  • Pablo Lara H, 22 April 2010

    Incredible. Thanks a lot.

  • Pet in Canvas, 22 April 2010

    Awesome stuff, really inspired me

  • What a horrible man, 22 April 2010

    Not disagreeing with what you’ve said, it’s true, people should look around them for inspiration. But that in itself is one of the most basic things you learn at art school, and most web “designers” haven’t undergone even the most basic creative training.
    And, it’s all well and good saying it, but where are your examples? How would you take the materials you’re citing as inspirational and apply them in the context you’ve described?

  • web designer nashville, 22 April 2010

    Great inspirational article. It’s so easy to just get stuck cranking out designs that look like templates. When I was in art school, non-traditional inspiration was an everyday thing. Now I forget completely about it sometimes. It’s like Biggie said: you’ve got to treat every project like it’s your first.

  • Alex, 23 April 2010

    nice, nice!

  • ruess, 23 April 2010

    I’ve haven’t usually received images meant to inspire design from clients before, only images that they want used in the content somewhere. Nonetheless, it’s a good idea to take any images they use as a cue to take utilize it for design purposes.

  • pressurecookers, 24 April 2010

    Great articles & Great a site. 36

  • Barry A. Smith, 25 April 2010

    You might also explain to your readership not to break copyright law as you have. Just because you gave me credit does not give you permission to use my shot like you did. My Flickr profile clearly explains that people like you who use my images without asking have forced me to make all my images All Rights Reserved. If you made a simple mistake in posting this without asking me, let me know.

  • pratham dutta, 26 April 2010

    nice images, nice articles
    web designer

  • Tatsiana Nizova, 28 April 2010

    This article is really great. I mean I think there is not one designer who feels the same, but he never tried to formulate this feeling into words. It’s really hard and I admire the way you’ve done it. Plus pictures, that look really inspiring. I will return to your blog from time to time. It’s the best place for dreams and inspiration!

  • Gil Kaley, 03 May 2010

    The universal rule here is to present users the basics of how to update their web sites and sustain a CMS web site on a day to day foundation. Things like installing, design of the navigation user interface, code optimization etc are all really some more advanced and typically demand days or weeks instead than minutes to manage decently.

  • Kim, 26 May 2010

    Nice article, but not at all what I was expecting. I thought when I clicked on the photos I would be shown how the image was “turned into a website design” as the title suggested. Instead I was sent to a Flkr page(?). But I almost always get something out of your observations, so thanks for the post!

  • Rigoberto Helmke, 27 June 2010

    love the information here hope to read more

  • Matrix5, 15 August 2010

    I really enjoy reading your blog. Keep up the good work.

  • Whitley Sedberry, 06 October 2010

    Happy to see this, I am happy to find this wondeful Post

  • Jessica Blanton, 26 October 2010

    Greet!

  • Ben, 06 January 2011

    Hey! Came across this post whilst surfing the ‘net, and that’s some great insight into personalizing client designs. I really enjoyed your perspective, and I was able to think about some things in a way I hadn’t before. Cheers!

  • I’m even now learning from you, as I’m trying to achieve my goals. I actually liked reading everything that may be written on your website.Keep the stories coming. I enjoyed it!

  • calvin frank, 18 January 2011

    Finding this site made all the work I did to find it look like nothing. The reason being that this is such an informative post. I wanted to thank you for this special read of the subject. I ate every bit of it and I submitted your site to some of the biggest social networks so others can find your blog.

  • freshinsite, 02 February 2011

    This post is very creative and so cool.All the design are very cute, Nice post,and thanks for sharing

  • barriles de madera, 08 February 2011

    we like your blog here, and this was a wonderful post!

  • Loreen Lowndes, 01 April 2011

    Just desire to say your article is as amazing. The clarity in your post is just nice and i could assume you’re an expert on this subject. Well with your permission allow me to grab your feed to keep updated with forthcoming post. Thanks a million and please keep up the gratifying work.

  • Web design, 12 May 2011

    Nice! Great article! Thank you.

  • Mary, 03 October 2011

    Great way to look at pictures for inspiration. Thanks

  • Eone James, 20 May 2013

    The way of brief information shared by you is Awesome…..Your article has to be full fill all requirements which require in designing.

search form
 
image description image description