Sometimes looking for inspiration from designs you think are good can be overwhelming. You get sucked in to how good the design is and then start doubting that you could ever come up with something so creative.
Don’t fall into that trap! Let the good design really be an inspiration to you. Learn from it by copying and put your own spin on it. After all, good designers copy, great designers steal!
So how can you learn from good design? How do you make it work for you?
Sketch!
Take a good design and draw and exact thumbnail of it. Take it apart. See what makes it good. See what might work for you. See what doesn’t and change it!
Try making variations on the design, too. What happens if you flip the orientation of some of the elements? What if the title is running vertical instead of horizontal? What if you add a line here or remove a shape there?
What am I talking about? Take a look…
PSD Tuts
On the left is a screenshot and right is a sketch of the original design. In the sketch below those, I rearranged some elements to see if they would work better a different way. PSD Tuts uses a line to separate each post excerpt, but why not use the image? I got rid of the byline, too.
Design Adaptations
Charity did a great job thinking through how people might use her site, so it was hard to figure out what to rearrange. Again, left side is a screenshot of her design (right is my sketch of it) and on the bottom is a variation I created. I moved the latest post feature box down so it didn’t overlap any elements. Then I made the other posts below into vertical columns instead of horizontal rows. I’m not saying this is a better solution, just a variation.
LA Times Travel Section
The photo is the main draw of this layout. I experimented with how it would look if it were broken up or less prominent. I think, though, the photo needs to remain the largest element. Images have a way of capturing readers unlike words can.
AIGA, The Dictionary of Brand
This is a sample page from The Dictionary of Brand. For each of the variations I tried extending the color block and rotating its orientation. I also tried echoing it at the bottom and rearranging the text and image.
California College of the Arts Promo Brochure
I love the simplicity of this piece and it made it a challenge to work with because there weren’t many design elements. The top left is the original, top right my sketch of the original. The two bottom sketches are the variations. Always remember that no one said typography always has to run left to right; get creative and rotate it, put it at an angle or run it over an image! And don’t be afraid to leave tons of “empty” space on the page; it will really help emphasize the content that is there.
Go Further
Practicing variations with your work will help you improve your design and layout abilities. Did you come up with a thumbnail you’re very pleased with? Make sure it’s the best route by forcing yourself to do three more versions of it. Rotate elements, crop images, add little separating details like lines or shapes. Remember the more you can explore variations, the more refined your final design will be and when each version you do makes the design work less, you know you’ve arrived at the end.
Enjoyed this look into what makes great design, why not subscribe to Creative Curio? There’s more to come!
That was very interesting to see how you re-arrange the layout and come up with your own versions. Well done.
My approach is slightly different: I usually like to take screenshots of the sites that I like, open and arrange several of them in Photoshop, look at them, and sketch on the paper my own layout, borrowing an idea or two from each of the open screenshots.
Nice article, well illustrated too
Vivien,
That’s a good way to do it, too! I don’t use this technique very often, but it is helpful, so I thought I’d share.
RaShell,
Hi! Great to see you here! Glad you enjoyed!
I really like this idea. I’ve sketched layouts alot in my free time (or during long, boring lectures), but I’ve never actually thought of going and sketching out a current website and then improving upon it. I also really love Vivien’s idea about using screenshots and ripping them apart in Photoshop.
I just thought that I would add here that we are doing something similar to this in my drawing class. The teacher gave us a piece of art and we have to copy it and learn different aspects of it while we copy. It’s like studying the form and angles and such. It’s basically the same principle as above where you are studying the websites. Just laying them out and seeing their core design can teach you alot.
Jacob,
Indeed! You can learn a lot by copying. John (iLT) and Ellen Lupton (Thinking with Type) have said before that the best way to learn about typography is to blow letters up really huge and trace them.
Your drawing professor is using the same principle. There’s really no need to try to come up with the “perfect” design or art on your own, particularly when you have no experience or way of knowing what is good from within yourself (that sounds mean, but you get it). Learn from the masters first, then you’ll become a master yourself!
Sketching is such a great idea. It’s an excellent way to remove yourself from the computer and just let some creativity flow. I need to do more of that. Thanks!
This technique works very well. A useful extension of it is to look at a website or print design layout, identify the grid system that is used in the design and work out how it’s been utilised … then try to replicate and/or make variations.
Your Go Further section about thumbnails and doing 3 alternatives could be the subject for a future post if you’re interested in exploring that further in this blog – I know I’d be interested!
Blue Buffalo,
Yeah, it’s great to get out of the digital world sometimes
Tracey,
I like that idea of identifying the grid! I remember doing that in my page layout class. Hey, good idea about the three alternatives. I’ll work that up into a full post. Thanks!
Great idea! It can be difficult to remove yourself from someone else’s idea that you love enough to make it your own. This would be a really good way to do it.
Thanks for the tips!
Kris,
You’re welcome!
I often use the sketching technique, though layouts that look good on a sketch sometimes don’t work so well when I try to execute them in Photoshop and fit content into them.
When I start designing a website i often find it helps when I borrow a little detail from somebody else. Sometimes it’s the height of the header, sometimes a colour or a shape. Then I build my own design around this element. I often finally get rid of it because it doesn’t fit anymore.
hi. im a multimedia student. nearly graduating though, and trying my best to actually ‘not suck’. hehe. anyway. my question is do any of u guys have a .Psd document that already has all the grids, all the golden ratios, in layers, all the usual startup objects and things u might need that will start you off on a project. i found the transition from paper to pc is always a hard one for me, and switching between the 2.
Barbara,
I can totally relate to the loss in transfer from sketch to content layout! I’ve had that happen lots.
mitch,
Hi there! Welcome! I don’t have a premade file set up with all those grids, mostly because I would have tons of them! There’s almost always a different grid. If you want to do that, I’d say the easiest way is to set it up in InDesign because then you can just tell it the number of columns, rows and the measurements for each and you don’t have to do it yourself. I do have several sizes of blank thumbnails set up in 8.5×11 documents that I can print off really quick to get started on a project, but that’s about it.
Mitch, try Typogridphy or 960 Grid system, both have HTML and CSS to help you out, not sure about the first, but 960 has image files and maybe .psd too.
Kris,
Thanks for helping out Mitch with those resources!
Hi there,
I am the developer of Typogridphy, and it doesn’t contain .psd files. It doesn’t really need to as it is already based on the 960GS .psd files. Hope it’s of some use to you though.
Harry
Thanks for the info Harry!
I spent a bunch of time translating 960 to ems, then I found that you guys had done it! Anywho, good work.
Harry,
Thanks for stoping by to let us know, and thank you for the great resource!
thanks!! checking it out now. this site is also pretty cool http://incompetech.com/graphpaper/
it has some useful grid generators
mitch,
Not seen that site before! Looks useful. Thanks for sharing
Thanks for the hints on how to steal without stealing! This is also a good way to learn design.
derGrafiker,
It is an excellent way to learn design. You’re most welcome for the tips!
2 Trackbacks
[...] Become a better designer by copying successful designs – an excellent write-up with great examples by LaurenMarie over at Creative Curio [...]
[...] Become a Better Designer by Copying Successful Designs [...]