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.
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.
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.
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.
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.
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.
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.
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.
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.
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
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
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.
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.
Interesting… This article is spot on.
That’s a great article, Cameron!
I enjoyed my reading. Thank you.
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.
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 ..!
Nice Article, using image in background is a great idea
very nice article…useful read
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.
Top class article. The examples part is well appreciated and it helps the information sink in.
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!
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?
Really well thought out article. Quite interesting – it shows how absolutely anything that somebody finds inspiring can be put into a practical, beautiful design.
Nice article, it really showed me what to look for in a picture (object) and how to incorporate that in a design.
NieNice article :D Thanks
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!
i must partialy agree…
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.
Wow, it’s almost a methodology for inspiration – nice article :)
nice view. \m/
To be a better web designer you almost have to see life around you as a glorious design.
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
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.
hey this blog is good. I’m glad I came by this weblog. Perhaps I can contribute in the close to future.
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.
Incredible. Thanks a lot.
Awesome stuff, really inspired me
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?
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.
Great articles & Great a site. 36
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.
nice images, nice articles
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!
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.
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!
love the information here hope to read more
I really enjoy reading your blog. Keep up the good work.
Happy to see this, I am happy to find this wondeful Post
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!
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.
This post is very creative and so cool.All the design are very cute, Nice post,and thanks for sharing
we like your blog here, and this was a wonderful post!
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.
Nice! Great article! Thank you.
Great way to look at pictures for inspiration. Thanks
The way of brief information shared by you is Awesome…..Your article has to be full fill all requirements which require in designing.