- June 23rd, 2009
- 23 Comments
You have 8 more days to submit your entry for our Typographic Layout Design Contest1. The goal of the contest is to collect beautiful typographic (X)HTML- and CSS-based layouts, created by you, and release them for free as a gift to the Web design community.
So far, only 12 entries have a nice spot reserved in our release post, which will be published at the beginning of July. So, you still have a good chance of winning one of our prizes and showing off what you are capable of on the front page of Smashing Magazine!
Of course, as always, we have various prizes for our participants. The winners of the contest will be determined by the Smashing Magazine Editorial Team. Each winner will receive a prize, such as The Typographic Desk Reference2, a quick reference guide of typographic terms and classification, with definitions of form and usage for Latin-based writing systems. Handy for the desk, the TDR contains a thousand facts on typography. Written and designed by Theodore Rosendorf.
Content is king, as we know, and typography is an extremely powerful means for designers to convey their message to their audience effectively. Recently, we presented an overview of useful typographic CSS tools4 and 8 simple ways to improve Web typography5. And now it’s your turn to show what you are capable of using these tools.
To participate, please follow these steps:
- Come up with an original, beautiful, readable and attractive typographic Web design. (You may use grids or vertical rhythm if you want to, but you don’t have to.)
- Download our blank template.6
- Feel free to use dynamic image replacement techniques, such as sIFR7, sIFR Lite8, cufon9, FLIR10, the @font-face11 attribute, etc. But please do not include commercial fonts in your templates, because the templates will be released as free downloads at the end of the contest.
- Make sure the design works in modern browsers (Firefox 3, Internet Explorer 7+, Opera 9.6, Safari 3.1, Google Chrome, etc.).
- Make sure your code passes the W3C validation test12.
Once your template is complete:
- Create a full-screen screenshot of your template. (The Fireshot Firefox extension13 might help with this.)
- Pack everything (screenshot and template) in a ZIP file.
- Send your ZIP file by email to: firstname.lastname@example.org
with the subject line [Typography Contest] Your_theme_title.
Please state your name, your website’s URL and the country you are from. If possible, please also include a brief description of the ideas that were the driving force behind your design.
- Be creative, use unusual techniques, expand your skills! Do whatever it takes: we really want you to get excited about this.
We’ll consider all designs that we receive by the 30th of June. The best entries will be published briefly after the contest has ended. The winners will be announced briefly after the deadline as well.
All templates will be released for free download and will be available to use for free, without any restrictions whatsoever (and you will be credited in the release post, of course). You may include at most one link to your site in the footer of the template.
How Do I Get Started?
You can design any kind of (X)HTML+CSS template you want: for any blog, portfolio, corporate website, product page, coming-soon page, maintenance page or any other page. However, the design should be new and designed specifically for this contest. Of course, you must hold the copyright of the design and the code.
To start you off with a couple of ideas, here is a showcase of some excellent typographic layouts that have been designed over the last few months.
You can find details about the contest and some inspiration for your work in our announcement post30. Get excited, be creative and show us what you can do! Good luck, and we hope to hear from you soon!
- 1 http://www.smashingmagazine.com/2009/05/21/typographic-layout-design-contest-join-in-and-win/
- 2 http://typedeskref.com/
- 3 http://typedeskref.com/
- 4 http://www.smashingmagazine.com/2009/01/27/css-typographic-tools-and-techniques/
- 5 http://www.smashingmagazine.com/2009/04/03/8-simple-ways-to-improve-typography-in-your-designs/
- 6 http://www.smashingmagazine.com/contest/blank-template.zip
- 7 http://novemberborn.net/sifr3
- 8 http://www.allcrunchy.com/Web_Stuff/sIFR_lite/
- 9 http://wiki.github.com/sorccu/cufon/about
- 10 http://facelift.mawhorter.net/
- 11 https://developer.mozilla.org/en/CSS/@font-face
- 12 http://validator.w3.org/
- 13 https://addons.mozilla.org/en-US/firefox/addon/5648
- 14 http://jasonsantamaria.com/
- 15 http://velthy.net/
- 16 http://www.gist.com/index.html
- 17 http://retinart.net/working-life/good-designers-ask-why
- 18 http://www.hugeinc.com/casestudies/
- 19 http://huwshimi.com/blog/
- 20 http://www.montylounge.com/
- 21 http://goodbarry.com/
- 22 http://www.tweetcc.com/
- 23 http://weblog.cynosura.eu/
- 24 http://waqasashraf.com/
- 25 http://www.shiftpx.com/
- 26 http://www.blackestate.co.nz/
- 27 http://jontangerine.com/
- 28 http://24ways.org/
- 29 http://www.wilsonminer.com/
- 30 http://www.smashingmagazine.com/2009/05/21/typographic-layout-design-contest-join-in-and-win/