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.
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
- 2June 23rd, 2009 5:38 pm
Response 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?
- 3June 23rd, 2009 8:45 pm
When 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. - 4June 23rd, 2009 11:14 pm
Must it only validate for CSS 2.1?
- 5June 23rd, 2009 11:34 pm
… does any of this websites shown here can be validated properly?
- 6June 23rd, 2009 11:48 pm
Hi,
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.
- 7June 24th, 2009 1:21 am
Can’t wait for the results.
I am very curious. Tension ….. - 8June 24th, 2009 7:19 am
great contest! anyhow, dreamweaver doesn’t produce crap code…:(
- 9June 24th, 2009 7:51 am
I’m thinking something with Comic Sans……. hmmmmmm
- 10June 24th, 2009 8:03 am
I’m from Paraguay. Can I participate?
- 11June 24th, 2009 8:38 am
To Brian Temecula :
Validation doesn’t mean nothing. You can validate and still produce shit code!
- 12
- 13June 24th, 2009 10:36 am
I think I will enter just based on the fact I feel it will be an interesting exercise of my skills.
- 14June 24th, 2009 11:37 am
Is it allowed to use a wordpress framework?
- 15June 24th, 2009 12:12 pm
Damn these “web design” contests… can’t you just make it a typographic DESIGN contest?!?
Oh, well…. maybe next time.
- 16June 25th, 2009 5:18 am
Please 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
- 17June 25th, 2009 6:13 am
wow 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.
- 18June 25th, 2009 10:13 am
if there was another week or two I would be able to enter. Dang full time job.
- 19June 26th, 2009 12:21 am
Can it be animated Flash page or site, in the blank HTML page without CSS?
- 20June 26th, 2009 6:15 am
I’m in, I’ll submit mine tonight :D
- 21June 26th, 2009 7:22 am
I´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.
- 22June 27th, 2009 6:06 am
in reply to fabio,
dreamweaver is actually a great text editor. it has it even has code collapsing. last time i checked Coda does not. - 23July 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
- The Big Showcase Of Online T-Shirt Stores - http://bit.ly/5Tq8uA
- @ilmv oh ok then ;)
- @ilmv no, the SM Book will not be out of date :) We made sure it contains universal design, usability and marketing principles.
- Apple ad bombing Windows 7 on Google - http://bit.ly/28ctPq
- Atatonic - a fresh CSS framework - http://bit.ly/4oOV2w (via @umutm)
- @HrvojeKC yes, that's an interesting idea. Maybe when the waiting is over, we'll write a detailed post about it.



















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