{"id":2515,"date":"2009-04-08T06:27:44","date_gmt":"2009-04-08T13:27:44","guid":{"rendered":"http:\/\/css-tricks.com\/?p=2515"},"modified":"2009-04-08T06:59:17","modified_gmt":"2009-04-08T13:59:17","slug":"excercise-to-get-better-at-web-design","status":"publish","type":"post","link":"https:\/\/css-tricks.com\/excercise-to-get-better-at-web-design\/","title":{"rendered":"Exercise to Get Better at Web Design"},"content":{"rendered":"

Getting better at anything takes considerable time and effort. Feel like you are in a rut with progressing your web design skill? Try this:<\/p>\n

    \n
  1. Find a web site you really love the design of. Maybe browse a<\/a> design<\/a> gallery<\/a>.<\/li>\n
  2. Open up your design program of choice and try to copy it identically*<\/strong>. Take a full page screenshot of the site for reference and quick overlays. <\/li>\n
  3. During this copying process, there will be many opportunities to put your own spin on the design and make it your own.<\/li>\n
  4. Convert your final design into HTML\/CSS. If you get stuck, ask for help<\/a>.<\/li>\n
  5. Repeat.<\/li>\n<\/ol>\n

    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?<\/p>\n

    *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.<\/p>\n","protected":false},"excerpt":{"rendered":"

    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 […]<\/p>\n","protected":false},"author":3,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_bbp_topic_count":0,"_bbp_reply_count":0,"_bbp_total_topic_count":0,"_bbp_total_reply_count":0,"_bbp_voice_count":0,"_bbp_anonymous_reply_count":0,"_bbp_topic_count_hidden":0,"_bbp_reply_count_hidden":0,"_bbp_forum_subforum_count":0,"sig_custom_text":"","sig_image_type":"featured-image","sig_custom_image":0,"sig_is_disabled":false,"inline_featured_image":false,"c2c_always_allow_admin_comments":false,"footnotes":"","jetpack_publicize_message":"","jetpack_is_tweetstorm":false,"jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":false,"jetpack_social_options":[]},"categories":[4],"tags":[],"jetpack_publicize_connections":[],"acf":[],"jetpack_featured_media_url":"","jetpack-related-posts":[{"id":303988,"url":"https:\/\/css-tricks.com\/ios-13-design-guidelines-templates-and-downloads\/","url_meta":{"origin":2515,"position":0},"title":"iOS 13 Design Guidelines, Templates, and Downloads","date":"February 21, 2020","format":false,"excerpt":"Erik Kennedy wrote up a bunch of design advice for designing for the iPhone. Like Apple's Human Interface Guidelines, only illustrated and readable, says Erik. This is mostly for native iOS apps kinda stuff, but it makes me wonder how much of this is expected when doing a mobile Progressive\u2026","rel":"","context":"In "Link"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/02\/iphone-ios-design.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":195320,"url":"https:\/\/css-tricks.com\/ol-john-henry-can-web-design-beat-machines\/","url_meta":{"origin":2515,"position":1},"title":"Ol\u2019 John Henry: Can Web Design Beat the Machines?","date":"February 8, 2015","format":false,"excerpt":"Dave Rupert digs into the idea of web design technology obsoleting web designers themselves.","rel":"","context":"In "Link"","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":342887,"url":"https:\/\/css-tricks.com\/are-we-in-a-new-era-of-web-design-what-do-we-call-it\/","url_meta":{"origin":2515,"position":2},"title":"Are we in a new era of web design? What do we call it?","date":"June 21, 2021","format":false,"excerpt":"Una is calling it the new responsive. A nod to the era we were most certainly in, the era of responsive design. Where responsive design was fluid grids, flexible media, and media queries, the new responsive is those things too, but slotted into a wider scope: user preference queries, viewport\u2026","rel":"","context":"In "Link"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/06\/uAJDDUDLcAsLzBf0a27b.png?fit=1200%2C663&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":188428,"url":"https:\/\/css-tricks.com\/nine-basic-principles-responsive-web-design\/","url_meta":{"origin":2515,"position":3},"title":"9 basic principles of responsive web design","date":"November 16, 2014","format":false,"excerpt":"Come for the information, stay for the GIFs.","rel":"","context":"In "Link"","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":350466,"url":"https:\/\/css-tricks.com\/developers-designers-uxpin\/","url_meta":{"origin":2515,"position":4},"title":"Developers and Designers Work on a Single Source of Truth With UXPin","date":"September 13, 2021","format":false,"excerpt":"There is a conversation that has been percolating for as long as I've been in the web design and development industry. It's centered around the conflict between design tools and development tools. The final product of web design is often a mockup. The old joke was that web developers make\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/09\/Merge-a\u0080\u0093-article.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":331369,"url":"https:\/\/css-tricks.com\/chapter-6-web-design\/","url_meta":{"origin":2515,"position":5},"title":"Chapter 6: Web Design","date":"December 29, 2020","format":false,"excerpt":"Previously in web history... After the first websites demonstrate the commercial and aesthetic potential of the web, the media industry floods the web with a surge of new content. Amateur webzines \u2014 which define and voice and tone unique to the web \u2014 are soon joined by traditional publishers. By\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/12\/batman-forever-flash-site.jpg?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]}],"featured_media_src_url":null,"_links":{"self":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/2515"}],"collection":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/comments?post=2515"}],"version-history":[{"count":7,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/2515\/revisions"}],"predecessor-version":[{"id":2554,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/2515\/revisions\/2554"}],"wp:attachment":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media?parent=2515"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/categories?post=2515"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=2515"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}