Getting better at anything takes considerable time and effort. Feel like you are in a rut with progressing your web design skill? Try this:
- Find a web site you really love the design of. Maybe browse a design gallery.
- Open up your design program of choice and try to copy it identically*. Take a full page screenshot of the site for reference and quick overlays.
- During this copying process, there will be many opportunities to put your own spin on the design and make it your own.
- Convert your final design into HTML/CSS. If you get stuck, ask for help.
- Repeat.
I have heard many fledgling web designers complain that they aren’t able to get better because they don’t have any clients to make sites for. You don’t need a client to make a website. I’ve long been friends with many musicians. I think of them locking themselves in the piano room for 6 hours on a Saturday head-down in sheet music practicing. Why don’t we do that?
*I’m not advocating design theft here, I’m advocating using great design to learn from. Like learning to play a popular song on guitar.
Great advice! As a guitar player I can totally relate. I made much larger strides when learning by playing songs I enjoyed versus just trying to learn the techniques/tricks. Actively mixing the two together makes for a good time and quick learning.
I don’t know why I didn’t think of this! Thanks, Chris.
Great advice Chris! Practice makes perfect, we all know that, but sometimes we simply forget.
I like to break the sites down and truly understand their architecture, concepts, grids, color palette, potential audience etc..
By doing this you should be able to understand the goals and direction they have gone. This has helped me tremendously to catch up to standards and on par with the fluid design world.
Good advice, it’s not something I’ve thought of to do before. Original and beneficial, excellent!
sorry for the double comment.
“Exercise” in the title is spelled incorrectly, FYI.
Doh! Thanks for the catch.
Might want to check that spelling – ‘exercise’
Great article man, i will defenitely put this into practise. Thanks for the advise.
Definitely agree. I think this idea weeds out those who are doing web design because it’s the current ‘hip’ thing to do from among those who can continue to improve and shape the field itself. I like finding sites owned by folks I know or companies/projects I respect who need an overhaul and doing those for little to nothing simply because I want to see it done better. It leads to more work and getting that work done more efficiently. Thanks for the great blog!
Great post, I’ve been meaning to do this for a while now.
Gives it a go
I agree, great advice. I usually do exactly this, except I copy from a few different inspirations… but I end up changing little things here and there so much that the end result looks nothing like what I was copying from!
Great advice!
It’s a lot like when I was a kid and I would get a cool toy for Christmas. I would take the toy apart and put it back together to see how it worked. I used this same technique when approaching web design. I’d see something I really liked, I’d view source, copy and paste it into a text editor, take it apart and put it back together. Once I knew how it worked, I tried it on my own.
I do this at my current non-web design job, duplicating touch panel GUI designs. I think having a job lately that is just graphics and not web design is really helping that end of my design skills get better.
I have a bash at this every so often to shake the rust off. It really is good practice but one muscle it doesn’t exercise is the creativity muscle.
As much as you must hone your skills to be able to create beautiful sites, you need to be able to do this from your own imagination.
This is easily my favorite way to learn. I incorporate similar ideas when following tutorials – my finished product never looks/behaves exactly like the tutorial because I’m tweaking as I go. I’ve found this teaches me better because I have to understand what’s happening in order to get my own spin on it.
My problem isn’t my skill with the tools, but rather the ability to come up with good-looking designs. I’ve read the textbooks, but it seems that there are things that can’t be learned this way.
What do I do?
That’s a tough one because it’s really just artistry at that point…and artistry I don’t believe is something you can really teach. A List Apart and other stuff by Jeffery Zeldman might help you, or perhaps Sitepoint’s books on ‘beautiful web design.’ CSSBeauty.com has some great recommended books you can check out as well as a wealth of inspirational sites.
I think this exercise is perfect for you then. Even though on the surface it looks just like copying, the process will get the creative juices flowing. It will get you using the tools in new ways. Then next time you have a blank slate, you’ll have some creative muscle memory to work from.
I really think you need to look at the smaller picture of design. Don’t get in over your head and compare your work to others, but maybe compare your older work with your newer designs. This way you will see an improvement and progression.
What makes a website design beautiful? Fonts, Colors, Shape, proportions and spacial relations.. Take one small chunk of design at a time and work on it until you Perfect it!
I think the #1 key to web design is Color. So start off by selecting a Color Rule. I.E. Analogous, Monochromatic, Triad or Complimentary
Design doesn’t come over night, if you have the patience to learn the tools, you should be able to understand design theories and methods
If at first you don’t succeed try again.
I know I’ve been working on my new business web site and have been through 7 iterations and designs before finally deciding on somethign I like. I have a list of about 50 css galleries I browse for ideas. At first I was concerned about copying, but what tends to happen is as you get further into your creation. Your design morphs quite a bit from the original. This allows you to start with something that is not a “blank” canvas. It really helps especially when you are trying to get some new ideas about a new design.
I simply sit and surf the web for 2 – 3 hours making note of design elements I find appealing, marketing elements. callouts, graphical elements, colors, schemes, patterns, effects, etc.., etc. I try to make a quick note about why I like it and see if it meets the vision I’m trying to create.
Then with my sketch pad in hand I start to see how the idea evolves into something I can work with. Usually I find that enough ideas have been spawned that layouts and graphical element ideas fill my head.
Just don’t be afraid to explore that next idea. And on the inverse don’t be afraid to throw away an idea.
Just to add a little more perspective:
I think it was either Picaso or Vangoe that would paint over one of his own creations. So in essence follow the this screencast of Chris’ and utilize the website that you like as your canvas.
Sorry I forgot to add:
You can also do this with theGimp which is a full featured free program that is available for Mac, Windows, and Linux (I am on Ubuntu). Also you should try Portable Ubuntu if you are on windows.
Josh
Thanks for the tip. I know a lot of professionals use Photoshop but I just recently installed GIMP and have been doing small projects with it. I like it a lot, and it’s a LOT more affordable :)
Do you come from a design background or a more techie/developer background? I see from your blog you are a programmer.
I read a lot of sites and blogs of “designers” who have been through college or university doing web design, multimedia design or whatever and they know their stuff. They have an eye for it and know the really complex techniques with gfx software etc.
I see plenty of other people who are perfectly capable of doing the coding but the end result, the look, often doesn’t inspire.
I know the feeling because I come from a software engineering/network engineering background and spent the first few years of my working life in data centres. I learnt HTML, CSS and photoshop in my own time and through playing about, looking at other peoples source code and reading endless tutorials but never did much “learning” in the field while in education. My mother is a trained artist so i’ve been lucky in that sense. I think i’ve got some of the genes (lol) and it’s given me an eye for stuff like contrast, colours etc that a lot of people from more tech orientated backgrounds sometimes don’t grasp properly.
It just takes time and effort. As a programmer you’ll no doubt be able to type the code and understand the value of things like validation and proper testing that “creative types” might struggle more with. By the same token they might always be somewhat better at visuals than you are.
If you can get to the point where you are a good programmer/developer and are capable of doing attractive functional design then its a nice place to be. It isn’t necessarily bad to be “good at a lot of things but a master of none of them”. If you designed your blog template then I don’t think you need to worry…looks good
1) You take 3 sites you like the look of (Pref with 3 different layouts or navigation designs) and try to re-create them, as close as you can, not 100%.
2) Get a sketch book and draw out the navigation from the first design and then draw out the layout of the second design with the firsts navigation. So making a Mesh-up of the two
From this:
3)Sketch out your own Mash-up of the three design
4)create it in Photoshop
5)Code it
6)Get feedback and start all over again
You will start to find your own style in time.
I’ve been doing this for years…it’s probably how I’ve been able to self teach myself as quickly as I have. Not only does it inspire, but it pushes your knowledge of Photoshop/Illustrator/Fireworks/HTML to the brink. And with awesome sites like this offering so many fun jquery plugins, it’s a very empowering feeling!
I’m about 1 1/2 years into web design/development and I found that doing this helps me a ton in understanding what really goes into design for the web. I still struggle at times but that’s actually the fun part. Trying to figure out the correct ways of doing things and replicating great websites is key (to me). When i first started doing this i felt like i was cheating myself but as time went on i realized that i’m not trying to re-invent the wheel, i’m just trying to find my own style and my own way.
It’s great to see I’m not the only one :)
Thanks again Chris. If we were in prison together, I would have your back. In a non-sexual way.
This is a great exercise! What better way could there be to sharpen your css / design / html skills then to attempt to replicate. It’s just like the imitators of great artists like Michelangelo, and Monet. Other artists learned to mimick and copy artforms to achieve new works of exceptional design.
Once again brilliant article! I know I have to do this frequently to stay up to date on my latest css tricks
Ive just started to do this with html templates, I’ll download one that I like, try to duplicate it as best as I can and if I get stuck I have the template that I can look at.
Brilliant.
That is precisely the way that I learned HTML, CSS, JavaScript, ect. I was between jobs and wanted to learn a new skill while looking for a new job. Three and a half years later, I’m still picking apart the source code and style sheets of great looking, hardworking websites.
Thanks for your insights. I visit css-tricks.com every day to see what has been posted.
Great advice Chris! …thanks.
Feel free to come to http://www.LiveBaseballChat.com and copy this.
The reason I’m suggesting this is we are about to launch a competition to ‘interpret’ our design for use on other websites we are about to launch.
eg http://www.LiveSoccerChat.com, http://www.LiveGolfChat.com, wwwLiveFootballChat.com
We need to keep the same basic format and layout but will take your psd/css and implement our chat engine/twitter/facebok functionality into your design.
Oh and if you happen to visit the site tonight between 7-11pm you can watch the Red Sox kick some Tampa Ray butt.
Cheers,
Dean Collins
http://www.LiveBaseballChat.com
great Chris thank you .
Good advice. Along similar lines, if I’m ever browsing around and come across something cool or unique on a site, I’ll pop open my developer tools (Firebug on Firefox, Web Inspector on Safari, etc.) and peek at the code to see how it’s done.
Completely agree..!
I do exactly the same way sometimes…
Unbelievable! I’ve been telling a friend of mine that’s starting out doing web design to do that.
I also had him watch your easy 30 min video introduction to web design. Though I already knew what you were teaching on the screencast, I found it was a great tool for anyone starting out.
Cheers Chris.
Breaking down other great sites is an excellent tool for getting into practice with your CSS. And it’s always worth taking a look at the source HTML and CSS of any website if it’s got aspects that you think are really cool.
As well as trying to duplicate it, take some time out to see if you can try and make it better. Perhaps you can solve an IE6 issue that the original site has, or simplify the code while retaining the same quality of styling.
Another analogy is professional sports: In sports, it’s 95% practice and 5% game. How much time are we spending practicing our craft?
What are you talking about? It’s illegal to play your favorite song on a guitar. Someone might hear it, and then you’re guilty of unlicensed public performance!
This is so true, actually I am going to do this tonight. Becuase I have been trying to design a website for the last week and just can’t get anywhere! Thanks Chris!
I agree with this approach whole heartedly! I know that for myself even if I’m trying to re-create work that inspires me to design, my own style is generated naturally with very subtle similarities from the original comp! Very nice post!
Good article. However, this might now seem very philosophical, what is “great design”? A website with white background and black text could be a great website – depending on what the idea is based on. So I think, it’s not really a matter of design – because there is no “best” and “worse” design – it just doesn’t exist.
Example: A website we designed 5 years ago and we thought it was the best designed website ever now might look as ugly as nothing else out there. So design is very time relative too.
But yeah, it’s for sure a great way to exercise and getting new ideas to how approach things.
Yeah this is a great idea! I used this a lot when I was learning how to design. You find a site you like, or parts of it, and off you go trying to re-create it.
I normally found that as I was copying, I would the stray off and make a new design from just this first stage of inspiration.
This is also something we encourage our students at WebCoursesBangkok.com to do.
This is a great idea, and I don’t know why I didn’t think of it on my own. I guess that’s why you make this site so successful.
It really is a great idea, but I can rarely find any time to do so, although I think I really need to practice more.
And if you don’t have a client, make a site for yourself or friends or whatever. Hell, redesign your own site. Just keep busy.
Thanks Chris and other commenters,
this has been a complete eye-opener for me. I am not good at setting myself projects to learn from if I don’t have an actual real-life task. I also find myself creating rather bland designs, but noticed that taking an existing idea and injecting your own ideas can really create something new.
I’m going to do a few practises as advised, thanks again.
You know what, improving yourself is a ongoing process. I totally agree with this article. Even when your try to make copy of something your do that in your own way and you becomes creative :).
I would say when ever you try to mimic something just try to be just perfect from your end don’t even think that your are just doing this for fun.
I can’t agree more! I have only been designing and developing for a few years and I spend most weekend and free time just playing around and trying to duplicate my favourite effects. I’ve been quickly expanding my skills as a result and hopefully someday people will be learning from my work.
That just happens to be one thing I do do – just with QWERTY keyboard, not a musical instrament.
:)
I don’t want to use a dry lawyer talk, but what about copyright? Especially if you are saving images too. I know it is just for training, but still, even with training, you may need permission. Plus, if you use it as a base for your own design, even if it is rather different, there still may be too many similarities to call it your own. I know I may sound little too paranoid, but you never know these days.
Hey Chris, I have been doing just that for a while now. I screenshot a site I like and then take it into PS and see if I can re-create it/or just an element I like.
Taking that design and then trying to code it is the next step. Having the original code is also a help to see how different people interpret how a design should be coded.
As for copyright? Well none of the designs I create/copy ever see the light of day. I usually save them as things like “cool tab effect” or” JS slider” and build up library of ideas and designs.
I think a healthy respect for the designers work you are looking at is important.
Very nice comparison Chris, and your absolutely right. I’ve been playing guitar almost my whole life and practicing/copying will get you better and it’s fun as well. Every now and then you make this step forward and that’s a nice experience. It has all to do with passion imo. Same for design and webdesign. So thanks for the tip and succes with CSS tricks.
This article and some of the comments, inspired me. Thanks to all of you for the positive thinking and attitude!
Quite often if you just sit and think about a design from scratch you can come up with something pretty functional but perhaps bland…unless you’re a really creative thinker who can visualise highly intricate designs in your head.
What I prefer to do, when I get a project and some requirements, is come up with a basic idea of the layout and colours etc. Then I go to any of the big CSS showcase/gallery sites and scope out designs that appear similar to my basic idea. I also look at sites related to the product/industry the site/project is for to see if there are particular trends. This tends to allow me to see a lot of “finished” details on the screen in similar sites to the one i’ll be creating that I can then think about or remember later on when it comes to finishing touches on my own design.
By constantly looking at what others are doing and taking on board the things that work and then taking the essence of those things and integrating those ideas into my own sites I find I come up with better work than I would have otherwise have done.
Anyone who thinks they can design something absolutely kick ass and perfect off the bat and wouldn’t benefit from casting their eye over what others do is probably not as perfect as they think.
Just my 2 pence/cents/whatever
Ya…I agree with you on this ” creativity, learning and improving do not require any client…it requires practice” and in case of designs your idea is worth trying…
Wow, this is an excellent idea. Don’t know why I haven’t thought of doing that. I need to practice all the skills I’ve learned from css-tricks and other websites like nettuts but I can never come up with ideas.
Taking a snapshot of a website i like and then trying to redesign it and then code it would definitely be fun, and help me practice and learn more.
Excellent tip! Thank you!