Smashing Magazine - we smash you with the information that will make your life easier. really.
8 Days Left To Enter The Typographic Layout Design Contest
You have 8 more days to submit your entry for our Typographic Layout Design Contest. 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 Reference, 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 tools and 8 simple ways to improve Web typography. And now it’s your turn to show what you are capable of using these tools.
[Offtopic: by the way, did you already get your copy of the brand new Smashing Book?]
Rules
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.
- Code your own (X)HTML+CSS-based design on this template. (You may use JS-libraries or any other JavaScript, but you don’t have to. Pure (X)HTML and CSS is fine.)
- Feel free to use dynamic image replacement techniques, such as sIFR, sIFR Lite, cufon, FLIR, the @font-face 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 test.
Once your template is complete:
- Create a full-screen screenshot of your template. (The Fireshot Firefox extension might help with this.)
- Pack everything (screenshot and template) in a ZIP file.
- Send your ZIP file by email to: templates@smashingmagazine.com
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.
Deadline
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 post. Get excited, be creative and show us what you can do! Good luck, and we hope to hear from you soon!
(al)
The team here at Smashing Magazine. Mostly Sven & Vitaly.
- 25 Comments
- 1
- 2
June 23rd, 2009 5:38 pmResponse to comment #1. You should take pride in being professional, and making quality code that validates. Anyone can fire up Dreamweaver and produce crap code. Do you want to be like them?
- 3
June 23rd, 2009 8:45 pmWhen I saw the annoucement post last month, I decided not to participate because the deadline was supposed to be the 31st of May, and that was an incredibly short delay…
Anyway, it’s too late to start now. But, for the next time, you should clearly announce when deadlines are corrected / delayed, that would prevent cases like mine. - 4
June 23rd, 2009 11:14 pmMust it only validate for CSS 2.1?
- 5
June 23rd, 2009 11:34 pm… does any of this websites shown here can be validated properly?
- 6
June 23rd, 2009 11:48 pmHi,
I´m just a little confused about the word “template” … does it have to something for a Blog or a CMS? Or could it be a static Site too … If Yes, how many Pages do you want (only Homepage, complete Site).
My Fav-CMS is Textpattern, and I really dont know how to give you the Template-Files for this …(SM) It can be anything, a static page, too.
- 7
June 24th, 2009 1:21 amCan’t wait for the results.
I am very curious. Tension ….. - 8
June 24th, 2009 7:19 amgreat contest! anyhow, dreamweaver doesn’t produce crap code…:(
- 9
June 24th, 2009 7:51 amI’m thinking something with Comic Sans……. hmmmmmm
- 10
June 24th, 2009 8:03 amI’m from Paraguay. Can I participate?
- 11
June 24th, 2009 8:38 amTo Brian Temecula :
Validation doesn’t mean nothing. You can validate and still produce shit code!
- 12

- 13
June 24th, 2009 10:36 amI think I will enter just based on the fact I feel it will be an interesting exercise of my skills.
- 14
June 24th, 2009 11:37 amIs it allowed to use a wordpress framework?
- 15
June 24th, 2009 12:12 pmDamn these “web design” contests… can’t you just make it a typographic DESIGN contest?!?
Oh, well…. maybe next time.
- 16
June 25th, 2009 5:18 amPlease make sure to include as many rogue apostrophes as possible. It escapes me how modern designers can have no grasp of the written language even though they work with it every day. Are they really that ignorant? It is something that also sadly reflects in their styles as they seldom improve and only keep fresh by copying existing styles. :s
- 17
June 25th, 2009 6:13 amwow this is a great competition, I wish I had head of it sooner, I don’t have time to now, but this is a great idea for a comp.
- 18
June 25th, 2009 10:13 amif there was another week or two I would be able to enter. Dang full time job.
- 19
June 26th, 2009 12:21 amCan it be animated Flash page or site, in the blank HTML page without CSS?
- 20
June 26th, 2009 6:15 amI’m in, I’ll submit mine tonight :D
- 21
June 26th, 2009 7:22 amI´m with Lucky 11, can´t we have a design contest without the web getting all up in it? I can hate code and love smashing at the same time y´know.
- 22
June 27th, 2009 6:06 amin reply to fabio,
dreamweaver is actually a great text editor. it has it even has code collapsing. last time i checked Coda does not. - 23
July 8th, 2009 3:31 am@sm Well, what happened to this contest? It’s already july…
- 00
There are no trackbacks at this time. If you are interested in leaving a trackback, please use this URL.
Leave a Comment
Make sure you enter the * required information where indicated. Please also rate the article as it will help us decide future content and posts. Comments are moderated – and rel="nofollow" is in use. Please no link dropping, no keywords or domains as names; do not spam, and do not advertise!
Interact
Popular
- 100 Wordpress Themes
- Photoshop Tutorials
- Fantastic Wallpapers
- 40+ Excellent Freefonts
- Dual-Screen Wallpapers
- Wordpress Themes for 2009
- Illustrator Tutorials
- Incredible Free Icon Sets
- High-Quality Free Fonts
- 30 Scripts For Galleries
- Photoshop Text Effects
- Useful Icon Sets
- Web Design Trends
- iPhone Wallpapers
- Before Launching a Website
- CSS Layouts And Templates
- Photoshop Actions
- Stunning Pictures and Photos
- Fantastic HDR Pictures
- Logo Design Tutorials
- Free Design Templates
- 10 Mistakes In Logo Design
- Photoshop Custom Shapes
- 40 Creative Design Layouts
- 8 Layout Solutions
- 53 CSS Techniques
- Photography Techniques
- Black & White Photography
- Styling Design Elements
- CSS-Based Forms
- 50 jQuery Techniques
- 50 Portfolio Websites
- 50 CSS Techniques
- Creative Logo Designs
- Desktop Wallpapers
- 25 Open Source Mac Apps
- 50 Free Icon Sets
- How The CSS Selector nth-child Works - http://bit.ly/cgPMqe
- 33 New High Quality Adobe Illustrator Tutorials - http://bit.ly/bTgFbu
- How to Drastically Improve Your Designs - http://bit.ly/a9L1sb
- A Quick Look at Mobile Web Designs - http://bit.ly/9TCWCG
- How to Test your JavaScript Code with QUnit - http://bit.ly/da853c
- jQuery 1.4 API Cheat Sheet - http://bit.ly/5zYYnE
- Beautiful, Elegant and Free 48px Icon Set - http://bit.ly/cSWcBR



















So are we allowed to use images at all? Such as background graphics?
(SM) Yes, you are.