Alrighty folks, here’s the deal. I have a whole bunch of stuff I want to give away. Mostly books on web design and development. I’ve been deep in thought trying to figure out the best way to give them all away. I definitely didn’t want to spam Twitter. I also didn’t want to do a “just leave a comment” deal because I think that’s too easy and just leaves behind a sea of junk comments.
I’ve settled on a good idea I think: a CSS Off! I’m borrowing the name and idea from JD Graffam and Tony White who as far as I know did the original CSS OFF. They haven’t done it in nearly two years now though, so I think toe-stepping territory is clear. The idea is that you get a Photoshop (.psd) file and it’s your job to turn it into HTML and CSS. Those who do the best job, win. But… there is a bit more to it than that. Read on to get the whole scoop.
How This Is Going Down
At the bottom of this article, you can download the Photoshop (.psd) file. Obviously you can open this with Adobe Photoshop. But you don’t have to have Photoshop to compete in this contest. One alternative is using GIMP, which is like Photoshop but open source and free. If you Google around, you can find other programs that can open Photoshop files on your platform. We will also provide a flat JPG version. It will be more challenging to convert from a flat file, but doable.
Once you have it open, you do whatever you gotta do to turn the design into an HTML and CSS design. Chop it up, slice it, convert it, whatever you want to call it. You have the design, now make it into a real web page.
Two Ways to Enter, Two Ways to Win
You might be saying to yourself. AWWWWW — that’s too hard! The reason I WANT those books is so that I can LEARN how to build websites like that. Indeed you are right. A contest like this where the best work wins is a rich-getting-richer scenario. So how this is going to work is that the best four entries will be the winning developers. Then those four winners will each pick two other winners from the comments on this post. Which is the second way to enter this contest: you may leave a comment on this post with your name, real email address (so we can contact you if you win), and one paragraph describing one thing you love about web design. Let’s recap:
Two ways to win:
- Experienced developers – Convert the design and submit your entry. You’ll get first pick of the prizes and you choose the other winners.
- Beginner developers – Comment on this post. Write one paragraph describing one thing you love about web design.
The winning developers will have their names and websites published. They will be picking the winners based on whatever criteria they want. First to comment? Random? Funniest? Most sincere? It’s up to them. Please only enter the contest one way or the other.
There will be 12 winners. 4 winning developers, 8 winning commenters.
Details / Rules about Design Conversion
- You only need to create the one page from the mockup. Sub pages are totally optional and no bonus credit given for creating them.
- Everything present in the design mockup must be in your finished design, at a minimum. If you wish, you can expand upon what is there. Just remember you are being judged on anything that you do. Adding extras may be the thing that sets your design above and beyond, or it could sink it and you would have been better off leaving it out.
- Rollover states are not provided for anything, use your creativity.
- Designs do not have to look the same in every browser. However, the design should be perfectly usable in any browser, with no areas looking as if they were a mistake.
- After judging is complete, all entries will be hosted online and available to browse.
- Remember low file size is an attribute of quality design. We shouldn’t be downloading 2 MB ZIP files!
- The mockup only uses Helvetica and Georgia which everyone should have. There is a little Helvetica Neue in the site title and article title, how you want to handle that is up to you.
- The index.html file is required, and you should use CSS for the design. Any other technology you chose to employ is completely up to you.
- You have one week, staring right now! Submissions will close on February 17th, 2010 at 12 noon CST.
Judging
Entries are judged up on quality, not time of entry, so feel free to hang on to your design until the end of the contest (but don’t be late!). Judging will be done by myself and Doug Neiner. We will be testing for the criteria outlined above, but also many other undisclosed/intangible factors (e.g. the cleanliness and craftsmanship of your code).
Your design needs to accomodate the latest versions of Firefox (3.6), Safari (4), Chrome (4), Opera (10), and IE (8). Because this is for skilled developers, and we intend this to be a challenge, we will also be testing IE 7 and IE 6. The design does not need to be exact for these older browsers. How you choose to degrade the design is at your discretion.
Entry Submission
You may submit your entries at the CSS Off Submission Entry Form. All entries must be in by February 17th, 2010 at 12:00 noon CST. Requirements:
- Submit one .ZIP or .RAR file.
- Use your real name and real email address (will not be published, we just need to contact you if you win)
- The submitted file extracts into a folder named “CSS Off Entry – YOUR NAME”
- This folder can contain whatever you need to do accomplish the design, but it must contain an index.html file.
- We should be able to open that index.html file in a browser locally and see your completed design.
Winning
We’ll probably need at least a couple of weeks to go through the entries, so no particular promises in terms of when the winners will be announced, but we’ll try and keep it under a month. As soon as they are chosen, we’ll email the winning developers so they can pick their two winners. Then prizes will be chosen in this order:
1st place developer
– Their chosen commenter #1
– Their chosen commenter #2
2nd place developer
– Their chosen commenter #1
– Their chosen commenter #2
etc.
Winners will chose which prize they want, it will be crossed off the list, and then the next person chooses. People will need to chose within 24 hours or we’ll need to move on to the next choice otherwise it will take far too long. After all winners are chosen I’ll ship all the prizes at once.
The Prizes
12 winners, 24 prizes. The top winning “team” picks their choices and we work our way down, crossing off things as we go. Everybody gets to pick two things. Last person in the list gets the last two things available. Please know that most of these products are used. They are things I’ve used or books that I’ve read. Some of them have a little ragged corners on the cover, stuff like that. They have served me well, so I’m passing them along to others that could use them.
The most important prize, like the contestants of Iron Chef, you win pride, in knowing that you rock at converting web designs. We’ll be publishing the four developer winners, their winning entry, and a link to their real websites.
Also, for each mockup conversion entry that meets the base criteria, I’m going to donate $3 to a Haiti benefit program of my choice. So even if you enter and don’t win, some good will come of it.
|
Smashing Bookby Many Authors!
|
|
CSS Masteryby Andy Budd
|
|
Flexible Web Designby Zoe Gillenwater
|
|
EyeTV Hybrid
I used it, worked great, just don’t use it anymore. |
|
Sams Teach Yourself Drupal in 24 Hoursby Jesse Feiler
|
|
Learning jQueryby Jonathan Chaffer and Karl Swedberg
This was the book that started it all for me. Note that this is NOT the most recent version of this book, but the code and concepts in the book are still relevant. |
|
Microformats Made Simpleby Emily Lewis
|
|
The Art of Scalabilityby Marty Abbott and Michael Fisher
|
|
Sams Teach Yourself HTML and CSS in 24 Hoursby Dick Oliver
This is the 7th edition of this book, so they must be doing something right! |
|
The Web Designer’s Idea Bookby Patrick McNeil
|
|
Agile Web Development with Railsby Dave Thomas, David Hansson and more
Fair warning: this is literally the first edition to this book, which is now in it’s third edition. I can’t vouche for how relevant this still is. |
|
Fancy Form Designby Derek Featherstone, Tim Connell, and Jina Bolton
|
|
Fundamentals of Joomla!by Barrie M. North
This is a book + DVD training combo (9+ hours of video) |
|
Sams Teach Yourself PHP, MySQL and Apacheby Julie C. Meloni
Book and Video combo! |
|
The Victorian Internetby Tom Standage
|
|
The AdSense Codeby Joel Comm
|
|
jQuery in Actionby Bear Bibeault and Yehuda Katz
This is currently the most recent edition of the book, but a 2nd edition will be replacing it soon. |
|
Designing with Web Standardsby Jeffrey Zeldman |
|
Everything ReverberatesPut together by the AIGA. Each page is a quote related to design. |
|
Joomla Template Designby Tessa Blakeley Silver
|
|
Polycom® SoundPoint® IP 550Please don’t even ask me what this thing does. I don’t get it. The story of me even having it is weird. But hey, maybe it’ll be prefect for one of you. Otherwise, sell it on eBay or something. |
|
Apple Bluetooth KeyboardThis is a somewhat old school one before they went all super-thinny. Personally, I like the larger button version anyway. I think it’s better for RSI as well. It was when I was using the new thinny keyboards when my RSI was super bad and it went away when I went back to a “you actually have to push down the button” keyboard. |
|
Wacom Bamboo Fun Tablet
|
|
JavaScript Fundamentals I & IIby Paul J. Deitel
Combo book & video lessons! |
Alright, let’s do this!
Here is the PSD File:
For the curious, it looks like this:
Final reminders: Entries are due February 17th by noon CST and you may submit them here. People entrying via comments may begin now and comments will be shut off at that date as well.
Cool contest!
FYI, that Ruby On Rails book is hardly relevant at all anymore… in fact the latest edition of the book is nearly irrelevant already. It’s not a bad thing (IMO), but Rails is fast moving.
Just think of it as a collectible relic of the era =)
Its free. Why complain…
What I love about Webdesign? Well, the best thing with webdesign is that there is always a lot of new things to learn and discover. It´s like a journey without end.
//Anders from Sweden
Haha :) Love the idea, will be interesting to see what people come up with. I’m also very tempted to enter this myself.
CSS3 all the way tho :)
Yup, nothing like a language that is barley supported across the major browser standard to code up your websites.
Fantasy is *always* better than reality ;)
Just curious how you are going to score things chris, is there plus points for css3, html5.. negative points for jquery etc?
I’m still more comfortable with strict, but ill go HTML5 if it entails bonus points ;)
cheers!
It’s all relative Greg. Doing a great job with XHMTL is better than going with HTML5 and having it not work right or using the new elements incorrectly.
But what about doing a great job with HTML5 but the browser support fails :)
I think some strict browser clarity would be helpful or is degrading gracefully enough?
Just do it as good as you can. So support as many browsers and situations as you can do.
If you believe it’s ‘better’ to use HTML5 and not support Internet Explorer 6 but fix that with a javascript then do so.
If you believe it’s better to support old browsers, but not require javascript and therefor not use the latest technology, then do so.
Chris explained it perfectly. Do it as good as you can. May the best win. In the end, it’s all position:relative :-)
What I love most about web design is the variety and possibilities. I’m personally a fan of many different styles of web design, minimalist, illustrated, grunge, there is an endless sea of content and ideas out there to take inspiration from, and it’s only getting better.
Are conditional comments acceptable?
That clock looks oddly familiar.
http://kylesteed.com/2009/new-clock-icon/
Indeed it does… It was a photograph from Shutterstock though.
This is super cool. Will be submitting an entry if I can take some time off from a client’s site redesign. In case I do not here is the comment hoping someone chooses me.
Here is the request to a winner: I am learning my way, and half of the books are not available here in India without paying for the sweet shipping. So it is the best way to get these amazing books.
Off to some design for now!
Oops looks like I missed the main part of writing the comment. So here is my para about Web Design.
The thing I love the most about Web design is the fact that the design community is awesome. I have started off with my blog and design services for hardly a month in the true sense and I have been overwhelmed by the response, including one from Doug.
That is exactly the kind of thing that makes me sure that this is the career I want to juggle along with my primary profession of marketing analyst. Now you know my secret, gimme my book! :)
Wow Chris this is an amazing idea, a CSS off. My favourite thing about web design is that it is easy and hard all at the same time.
Web design can be tedious and trying to fix that IE6 bug or just trying to think how everything connects on the page can be very challenging, but once you conquer that challenge you feel like you are on top of the world. Web designers have to a “jack of all trades”, artist, visionary, creator, and learner. I only got into web design about 14 months ago, and in that time web design as an area has evolved so much.
Thought there might seem to be an endless amount of things to learn you always feel like the master, like you know everything, yet at the same time you have no idea what your really doing. Web design is a form of expression there is no right and wrong answer here.
What really makes web design easy? The blogosphere, I’m self learnt, I actually got into web design and the whole CSS thing from Chris’s screencasts. So I guess I’m kinda throwing a tank you in here aswell.
Can you enter the coding competition aswell as the comment competition?
Thanks Kev
Thank you for the contest! I will try to enter but I am really not a professional.
Only thing I don’t like about this contest is that I have to code for IE6. Last time I coded for IE6 was when it was the latest browser, and by the way I’m only 16.
Still might give a go at this ;)
Don’t think they said you HAD too – but you could do.
A good browsing experience across all browsers is not about being pixel perfect, it’s about getting the content across to the user.
So you made websites when you were six? :)
What I meant was when IE7 wasn’t out yet.
@Phunky: Yea I understand, but it’s still a nag because you have to check up on IE6 on almost everything you do, otherwise there’s catastrophes. Even if it doesn’t have to be pixel perfect.
The website doesn’t have to be the same in all browsers.
What is important that nothing will/should look ‘broken’ and then the corporate identity is recognized without doubt.
What a great idea! No toes being stepped on here (:
Oh, it’s on. GL everyone!
There are some things that are now shown in the PSD when you open it with Gimp. Some text shadows, backgrounds and borders. Not anything major. Just take a good look at the JPEG.
Sounds like a blast. Any rule against working with someone and splitting the prizes?
I cannot wait to see all the interpretations. Will you post the submissions somewhere/how?
Just cracked open the file, one thing I forgot to ask, and I didn’t see mentioned anywhere; What fonts are being used?
He said it was Helvetica and Georgia.
With a little bit of Helvetica Neue.
Yeah the Article header is Helvetica Neue Thin, bad luck my, I don’t have the thin variation X(
Web designing is something I wasn’t introduced myself to until I was early 14 years old. I first showed interest in learning programming as a young kid, started out with C, but failed with its complexity. I then went for HTML. At first my head exploded, but then I started to understand what it meant to be a programmer. Then later on, CSS came into my life. I slowly started to evolve, and now, being 15, just only a year, I understand what it means to be a programmer. It’s something I look forward to be part of my life. So what I really love about web designing, is that it made my life learned of coding, and planted the seed of the programmer in me.
Great idea!
Chris –
As is often the case with PSDs, this doesn’t seem to display quite right in GIMP 2.6 –
http://jdeerhake.com/misc/css_off_gimp.jpg
Not 100% familiar with the way GIMP opens PSDs but it would appear that the 960gs overlay layer was set to visible.
The backgrounds of the 3 blocks at the bottom aren’t visible. Just at some borders and text shadows.
yeah.. theres something wrong with the layer masks on those two boxes at the bottom.
Gimp has problems with Photoshop’s masks. Just check those layers and remove their masks.
Ok I think I have the layer masks fixed, can anyone tell me though – On those 3 boxes at the bottom is that mask set to completely white or something less?
There’s a flat JPEG available aswell. Just compare to that one, as that is how is was rendered at Chris Coyier’s machine and is the way it’s supposed to be.
How is the final product going to be used?
I love web-design because coding is nearest I get to mathematics (which I don’t get at all) without numbers and I gives me satisfying ‘ahaa’ moments.
I’m new to CSS, actually this site is helping me learn it, but I’m in! What better way to learn than by doing? Great idea!
Great idea, but the book you left out is: Transcending CSS by Andy Clarke, CSS3 pusher. (But then again, I suspect you may not yet be an accepter of HTML5/CSS3 for general use even with a few front-of-file javascript hacks…)
Anyway: good idea, but, I’m out for now: rewriting my site in HTML5/CSS3. Then I’ll downgrade to HTML4 (“class” strategy) until I see my users are mostly off IE6. Great fun!
I have that book and really enjoy it. Keeping it for my own collection =)
I’ll bite.. Will work on it when I get home from work!
Hi Chris, hate to point out mistakes but in the “Two Ways to Enter, Two Ways to Win” section you say eight developers will win and pick two commenters, then below you say four.
My mistake. It’s four winning developers.
Love this, the best thing about webdesign is the ability to share art with the world. The internet is an art gallery for me. It is where I muse over the best, the unique, the eclectic and the masters.
As someone who has been programming since a teenager and now well into her thirties it has always been my fascination to be a master at web design and be all those different things in one. So any book that you offer will definitely help me to reach that goal.
And She Has Spoken
One more thing can you do a tut on file uploading with different options on having it mail to you or put into a directory and having it recalled. I am curious to see how you would attack this project.
Thanks
Web design has been a fantastic journey to embark on. When I first started web design, I learned at the time that it was just cutting up an image in photoshop and slapping it all together in divs in Dreamweaver. However, after graduation from college, I took classes in html/css and had my eyes opened to the possibilities that are shown through beautiful web design. At times class was frustrating, but what I did learn helped me launch a revision of my current site. I am forever aspiring to better my knowledge of css.
ok! let’s start!
Giveaway contest (book) is only for US? Can I participate from South East Asia?
Yes you can, worldwide.
Design is something for this maxim fits the best: “You’re limited by your own imagination”. I think there is no end to the possibilities of coming up with great design structures, the same process never ends………
Do we / Can we build this on some sort of CMS frame work like wordpress or joomla?
Please don’t submit your entry that way, we’ll only judge entries that follow the rules above. If you ultimately want to convert it into a CMS theme, you may.
If you can’t/won’t develop in a static HTML file (which in my opinion is way easier)
Then make the Theme/Template and view it in a browser. Then view source and copy/paste to a .html file.
If you really want a CMS directly, do so. But I doubt it’ll help.
End result needs to be in static HTML !
Hey, I might enter aswell :-)
You must remember that the zip (or rar) must contain a index.html file and this must be open from anyware on computer, and must work with or without internet or a php server(implicit in the rules) so a static html looks the better option.
Is it open to anyone (i.e. from the UK) – The delivery cost for that dodgy phone is going to cost a fortune! ;)
Yeah, is the competition open to UK participants?
I’d like to know that too. I’m from Chile (almost falling from your map).
Chris already said that you can participate worldwide.
Happy to see this contest. Same as JD said – no toes being stepped on.
I love learning new things.
Web… World’s Exciting Beach :P
Yes, Its vast sea of information. No reason why anyone would not like it. I would sleep besides this beach all the time. :P
I’m just starting out still, so I don’t stand a chance playing with the big boys on this…but the thing that encourages me, and which I love about web design is it’s low barrier to entry as a creative outlet.
To have a go a print design you really need a project and a reason to actually get something printed if you want that ‘I made that – and it looks gooood!’ feeling. Artists can paint/draw all they like, but getting your work on display can be tough, and similarly with photography. Musicians just starting out can find moving out of the garage or local shows difficult.
Web design though…well, anyone can get some cheap as chips hosting and a domain and BOOM, your work is available for all the world to see.
Furthermore, the web is now enabling those fledgling artists, photographers and musicians to connect with international audiences in a whole new way…it’s a creative’s dream!
This is great!!! I’m still student but near the end. I work part-time as a web designer/developer. Not usual for Croatian girls. And will kill for that tablet! I can see already that competition is heavy… Good luck (to me)
haha I totally love your comment. In case your submit shoulnd’t do it and I should win I’ll choose you as my favorite comment and try to get you the tablet :-D
Interesting contest!
I’m in!
Great idea, I’ll definitely participate as soon as I make some time.
Are there any rules/considerations regarding the usage of CSS frameworks and open-source scipts (e.g. a javascript lightbox or slider…)?
One of the things I really love about web design/development is how you can share your work with everyone easily, even with non-techie people. What are you working on now? I just show them a link: that site, or that webapp, and it works like that. No need to install anything, even my granma knows how to use a browser and can see what I’m doing.
Also, I love how it is a mix of skills, sometimes you have to bury yourself in code and algorithms and other times you have to have a proper knowledge of design & usability.
It allows you to use both sides of the brain on a regular basis.
Shame – No time to enter the comp, busy on my own projects, so I’ll leave a comment. Done.
I’m in, great contest.
I created a wordpress theme form your screencast . http://www.akvaryumkeyfi.com
Sure I can make it but not exactly.
Web Design is all about Creativity & Skills that you own. Nobody can steal the creativity that exists in you, and the best way to show that you are the most creative is to Design the Creative :)
Two ways to win, I took the second part…
I’m loving web designing at my college beginning, but rather i don’t have any guides to guide to write code or something, so finally i got only interests not jump into development sadly…
So after i got internet connection, I roaming to several sites, and i found psdtuts, i followed it from the beginning, and after that nettuts, and after several blogs come into the community, so after that i start learning, still learning :(
I love to read books rather watching/reading a tutorial, so it only takes us completely from scratch, so this contest is a boon to me, thanks Chris! I want jQuery or CSS books…
WHat i love web design is: Its nowadays become more powerful and more frameworks to write less and do mores, [first they make tables, now using CSS, first they write Javascrips, now they use jQuery, first they write raw php, now they use frameworks, its in developing, so love to study more] and several tutorials to work with, and it makes one website elegant thats the need for a good design, i also love to make such sites ;)
For my luck, I’m sure i cant win :D
PS: Bad English, of course :D
My definition of webdesign is as minimlistic as intense.
Webdesign is art: lines and colors to express yourself.
Can I participate from Israel?
Chris said earlier: “Yes you can, worldwide”.
So, what do I love about webdesign? Community, community, community. What niche does everything it can to distribute it’s secrets, and to take newcomers, for free? I’ve only bumped into this one.
Nice contest. I would love to compete in coding but due to time restrictions, I’m not able and I still consider myself a beginner compared to most.
The one thing I love web design is the fact that it’s all the same code yet so different. The structure can be the same, but the colors, the margins, the paddings, and typography gives a site that offset to make it unique. Much like humans, same build, different personalities.
I hope the contest will run nice. Good luck to all that’s developing it.
Doing a little spring cleaning?
Hello Chris.
Can i use a Gridsystem?
On the rules dont say you dont. XD
Wow, what a great giveaway.
Well, I really love coding HTML/CSS. And I also love the new era that comes with HTML5 and CSS3 :)
What I love most about Web design and development, is that in the process of crafting sites for my clients, not only do I get to exercise the ol’ creativity and problem-solving muscles, but I can receive immediate and positive feedback from clients when they see their online problems solved, and also relatively quick feedback from their customers through greater sales. Everyone wins.
What I love about “great design” is really what it can do to draw attention to, as well as enhance “great content!”
The one thing I love about web design is how you pull in customers just by making beautiful websites, alternatively to actually offering a great product. Providing amazing products is one thing but conveying a great medium to sell it such as a usable and easy to manipulate website will certainly help generate revenue from those products much easier and quicker.
Apart from the fact that I follow your blog like a daily dose of chocolate… I’m currently cross-eyed when it comes to Mysql, Jquery, and Drupal… I need the books! ha
It is exactly this aspect of webdesign that makes me love it. It’s one thing to just paint, draw a few circles, do fancy vector shapes, or wow yourself with the pen tool, but to be able to use your left brain in conjunction with your right to create wondrous creations, it’s simply ecstatic! I feel my childhood dreams of becoming a full fledge Renaissance Man are that much closer. If you ask me: Why do I love web design?… I tell you: because I get to think like a mathematician, and emote like an artist. :)
Website Design What Do I Love?
IE6, its awkward but you have to love it.
1. The box model
I adore the fact that padding adds to the width. Although margin shouldn’t in my opinion.
2. No PNG support.
Is a lie. It has complete PNG support
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(standards doesn’t like this.)3. Its been around 7 years.
and 20% of all internet users still love it.
4. It aint that slow.
How many conditional statements do you think it deals with. I have 4 scripts (30KB) that makes IE6 act like a normal browser.
5. QUIRKS mode.
For me it constantly in quirks mode. I love it’s quirkiness and willingness to be different.
6. Its not him.
Your car breaks missing an steering wheel who do you blame: the car, or who made it.
IE6 was short of a few bolts. Who do you blame.
IE6 makers (who just do the interface) or trident (who make the layout)
7. IE6 a few bugs but he is right.
75% of people on the web used ie6. Which means if they wanted to include an explode function they could. Or a roasted chicken function, they could. And people will accept it. Actually why did Netscape, Firefox and Opera have to be so difficult?
Suggestions
IE9 learn from your mistakes.
And be happy to make mistakes.
Firefox has lots of bugs. But they get rid of them in a new release (which you get because you have been notified about it).
IE a bad brand name.
Why don’t they buy the firefox code.
Enough rants and rave.
Web design is your feelings about IE6.
are we going to loose points for lack of browser compatability if we use CSS3?
Take a look at that rule:
“Designs do not have to look the same in every browser. However, the design should be perfectly usable in any browser, with no areas looking as if they were a mistake.”
And they must be working in the most new browsers like Safari(4), Opera(10) Chrome(4) and Firefox(3.6), the downgrade for olders browsers is for your own judgement.
Nice idea about this contest!
The one thing I love web design is flexibility. It is not static, but changing in time.
I think this is a great idea! I would love to think I would stand a chance at winning the developer option but I know this to be untrue.
I am studying web management at university and love web design. I am learning slowly and look forward to the day when I feel it may actually be worth entering the competition side of competitions such as this.
Anyway, why do I want one of these prizes? I would love anything that can help me on my quest for web design improvement. Plus I love gadgets, technology and spend every penny I have (although it isn’t much due to being a student) on the latest gizmo or fad.
I hope one of you experienced designers chooses me to win a prize! And also, congratulations on winning… enjoy your prize :)
Hey Chris,
You just set the world on fire !
Web design is the ability to convey content in a meaningful, eloquent manner which adds to the experience of interacting with the content, rather than overpowering the content.
Web design is best when it is not consciously noticed. It is merely used.
What I love about webdesign:
Web design has helped the glue that holds our generation and those to come together. At a time when things seem to be bursting at the seams, and our comforts are being sliced away, web design has brought a warmth of security to a huge network of individuals. A designer is no longer confined to his geography, but is able to reach out to many cultures for influence and insight.
Underneath all the text, imagery, animations, color, and theory, a web design contains the heart of its creator. Searching the web is no longer a browse within colorful ails of scrawled label designs, but now, because of web designers, it has become a shocking verve of dynamic imagery and fashionable typography.
So, basically I love the fact that technology has allowed art and graphic design to advance in many ways, and has opened doors for alternative ways that a designer can portray his/her art and message.
Thanks for the opportunity!
tried putting a forum entry on Themeforest promoting this contest but it was taken down because of ads on here competin with TF, oh well, hopefully some developers from there will participate anyway.
still early on the learning curve on web design, know HTML and CSS but not jquery, also need Photoshop or a good clone and learn how to use that. makes playing in this contest difficult from the PSD to images point of view, If I can do that, I will submit an entry, I believe I can handle the HTML/CSS coding part of it.
Al
Wow that was the reason they pulled it down? Seems weird to me.
That was it, in a note from Themeforest:
I have disabled your recent thread on CSS Tricks. One of the main reasons is because there were ads on the site that link directly to our competitors. Hope you understand.
Regards,
Thinesh P
and the thread was promptly deleted and is no more. Hope some of the guys from there come here and enter the competition, let’s see how good they are.
Al
Download GIMP, like Chris mentioned above. It’s a freebie application but works quite well I think.
http://www.gimp.org/
It’s obviously not as comprehensive as Photoshop, but certainly enough to slice and dice into website usable images.
Hope this helps : )
If u use a Mac based computer u can buy Pixelmator, like photoshop but a little limited, but for 50$ he worth while.
I am going to go out on a limb and say that I really do not like web design. I could lie and give some blooming flower in a field answer or be down right honest.
I see web design as a necessity to the server-client paradigm currently deployed on the world wide web. Without color contrast, typography, and rich interfaces the network experience would be mundane. Web design is one critical aspect to maintaining synergies between a browsing online user and the entity that represents what is being viewed.
One more book to add on top of the credenza is far less of value than the opportunity and ability to create then reflect. I wish the best of luck to the competition and am eager to see what this community submits.
What I love about web design? I love the fact that it makes information even more accessible than it already is. The basic information sorting on the internet goes like this: at first, you make the information accessible to masses. Then you publish it more and more, so people become interested in it, if they weren’t already. If the information is presented in a fun way, it is a plus, but if it’s unreadable, or reads poorly? What if you have to sort information on the web itself, so the reader can seek through it more efficiently? Or even worse, if the information on your web is available in other places, where it, although on the same level of quality, is presented better, reads better, and makes the visitor return for more information? Although it is a rhetorical question by nature, I’ll answer it: if your information can’t be read, your design sucks.
Information needs to be neatly sorted for viewing, and web design does it for me. That’s what I love about it.
Gimp does not help with images. Any way you can give us the images as a separate download? I don’t have access to photoshop :(
I suppose we have to take into account font licensing issues, so no @font-face or sifr, etc
Yeah I have this doubt too, mine I leave with the font-family set to get the fonts of layout first and after others, but with the http://www.fontsquirrel.com/fontface/generator is easy to embed fonts in any website.
“But you don’t have to have Photoshop to compete in this contest. One alternative is using GIMP,…”
You can also use Fireworks.
Chris, not many of us have all the fonts you used in your design (I only have a few, and believe me, I have more than 13,000 fonts).
Will the use of images instead of actual fonts (via @font-face or scripts) because of the reason above, be considered ‘not as good’ as those who have the fonts and embed them in their build?
There are only three fonts used on the whole things. Two of them are standard Helvetica and Georgia and everyone should have those. The other is Helvetica Neue (title and article title), and how you implement that will be one of the things you are judged upon. Like everything else in this design, pixel perfection isn’t required, but good choices are.
Well, there’s LucidaGrande-Bold in there:
Check it out: http://img688.imageshack.us/img688/5719/screenshot210201063611p.gif
Never mind, I found the LucidaGrande-Bold: is the little arrow in the ‘Keep Reading’ button.
Georgia or Garamond have the same symbol.
Thanks.
I opened the PSD (using CS10 on Windows 7 Ultimate) and was astounded when I got warnings about font substitution!
I recently did a clean install of Win 7 (no upgrades from Vista) and Photoshop and expected that the Helvetica family of fonts would be available. Not so, at least in my case.
Helvetica doesn’t appear in the Win 7 font list and doesn’t appear in the PS font list.
No biggie, and it may be a quirk of my install, but an assumption that Helvetica is available didn’t work for me.
Georgia is fine though.
Just something to look out for. I’d be interested to know if anyone else has noticed this.
Helvetica isn’t and wasn’t ever a Windows font AFAIK.
Actually, Macs have several versions of Helvetica. Ive seen at least 3 Helvetica Neue sub-types and a couple for Helvetica – eg, Helvetica Bold is technically a different font than Helvetica, bolded. Still love how Mac designers (at least the ones i work with) use Helvetica despite the fact that it renders like dookie on PCs, if the PC even has it installed – they dont like how Arial renders in PS, so they stick with Helvetica. I’ll stick to Arial for my entry, more out of practicality than anything – if a font looks like butt on 90% of computers, it shouldn’t be used, IMHO.
All font bitching aside, I’m a big fan and hope to contribute to more discussions in the future. :)
I can confirm, Helvetica was never a standard font for Windows. They made their own, cheap cheap copy of it and called it … Arial
actually, before Arial mas made, Helvetica was a standard on PCs. Then Microsoft made Arial, and said bye bye to Helvetica. Except for, of course, their own logo, which is helvetica.
I love that web design is always different. Concepts and ideas may stay the same, but every client is different. The web is always changing. It is no longer a stagnant media and the future is open to whatever we can imagine.
We will always be students and teachers. Learning the new, and teaching the old; and that will never get old.
Webdesign always pushes me to learn and learn new things !
What I love about web design? The kinda question everybody will probably answer in a total wrong way: Yeah web design is very good for me, I learn more, I understand more, the variety and possibilities. I like the minimalist, illustrated, grunge (thats a shock), I also like to fix IE6 bugs (whoaw), It’s easy to learn because we have the blogospehere, and your head explodes until guess what CSS came and rule my world. Let’s see what else … well it’s a journey and you can share nice a flufy art. And last but not least THE BOX MODEL, QUIRKS and PNG.
Dudes you are missing the point, if you love the code in web design then that is not web design, if you love the idea because is cool and every cool person does it then that is not web design again. If you think you have to know all the quirkie stuff and lear the CSS specs by heart and then you will be a web designer then you are out of your mind.
Web design is about opening you freakin head to more knowledge (not information) then you could imagine. It’s the best exercise you can make to expand your cognitive and imaginative posibilities. All the stuff that you lear actually during this period is dust in the wind, the only benefit will be your mind, your opened mind, ready to see things from all perspectives, ready to understand more the you ever did. So to answer your question I love web design because it changes your perception and understandig of your surounding environment and more.
“We should be able to open that index.html file in a browser locally and see your completed design.”
Does this mean no externally referenced assets (jQuery from Google CDN etc …)?
That’s fine… Assuming Google is up and running that day. If you have any doubts, make it local.
Chris,
Will you critique the entries for the developers individually? Wouldn’t mind getting some feedback on my FE skills if I enter. I’d find more value in your opinion than any of the current giveaways.
Pretty much done. Adding some little flourishes. It was a good snow day project. Probably will let it sit for a little bit to see if I want to add some thing out there to it.
Good luck everyone.
One thing I love about web design, ey?
Well, it’s composed of two things which leads you to use both sides of your brain the creative and the logical. You create you design and then you code in the most simple and effective manner (which requires you to use logic).
I think it’s the only profession that would keep me sane.
110% Agree.
Nice one.
Great Idea for a contest Chris. I’m gonna try to give it a go, but I doubt I’ll have enough down time to get it done in a week. Bummer, I think I’m gonna code it anyways even if I don’t finish it in time. It will keep me from becoming rusty!
What I like about web design: Unlike a lot of programming, the changes I make in HTML and CSS are instantly visible online (as long as my cache is clear). There isn’t any waiting, it just happens.
What can I say? I like instant gratification.
(Which isn’t to say that web development doesn’t take a lot of work, but… oh, you know what I mean.)
The thing I love about Web Design is that I think it’s one of the few carrers in which you see so much partnership and sharing between collegues, not only resources but also knowledge, I will soon graduate from graphic design school and I will to be a part of this community and will too do my best to give back all that has been given to me.
I just realized that I can’t participate in the contest in both ways and I already sent the file with the HTML/CSS so please ignore my previous message I’m replying right now. I’ll participate through converting the psd, Thanks.
I work and study full time, so i don’t have a chance; but check out this… this is the most amazing site -after Chris’s – i have seen. I want to point out i am not a designer….
I love that Web Design allows me to work with my hands (without actually working with my hands). Designing a website feels like physically building something. My father is a carpenter who remodels and does finish carpentry. I feel like I’m building things the same way he does. It’s strange that web design exists only on screen and there’s technically nothing tangible (or traditionally tangible) about it. Even though web design is two dimensional, successful web design mimics the laws of physics in the real world. I love when things fit together, the satisfaction that comes from solving problems visually is SO sweet, there is no high like it.
Oh Christ, I love the idea, I’m so giving it a try. The design is pretty complex, but I’m loving it!
CSS 3 (specially RGBa) would make the design way easier and would give chance for a more semantic markup. But that makes me wonders, are IE 6 JS hacks allowed?
you know, i’m just getting started in web design and i ain’t to hot with photoshop yet, so although i know i won’t be able to win books (or wierd phone thingy) i’m gonna try converting it to html/css.
i honestly think you should consider releasing a few psd’s (maybe of varying difficulties) for new developers i think it would help alot. i think i’ve learned more from this site then any other. and this would be another way you could help :)
What I love about web design is the fact that the community is willing to help people through free resources, such as this site, so an intrepid person could literally learn a quality career free online and be respected by their peers as if they went to an Ivy League school. At the same time the field is so nuanced, and is rapidly expanding with new technological implementations that the demand for web designers outpaces the quantity of skilled designers. This leads to a interesting career with great job prospects. Those attributes combined with the geographic flexibility the job offers, make web design an ideal job.
Thanks for putting this together Chris!
It’s hard to say the one thing I love about web design, as it is a versatile environment that has endless boundaries. I can say, however, that perhaps the most interesting and astounding point is that it is an art that can be performed by anyone – despite their talents. In my opinion, all it really takes is a bit of patience and effort. I, myself, could be an example of this. I’m a bit younger than the normal age group, only 12 to be exact, but age does not affect in any way what web design means to me. In fact, I’ve built several websites already for a major industry that receives thousands of views per week. To other designers, it’s pretty much an everyday project, but for someone like me, it’s a stretch. So, although web design can seem difficult at first, it isn’t impossible, no matter who is trying it.
Other than that, web design has shaped the way I perceive my surroundings. Ever since I started, I’ve had a “how does that work” type of attitude, that puts a new spin on things. Not just electronics, but people’s thoughts, minds, their actions. How everyday life functions is, for me, a never-ending quest to see just how it operates. Yes, web design does require some memorization of elements and examples, but designing a website really is an art: you get to discover the functionality and the behind-the-scenes graphics that makes it work and puts it all together.
The one thing that I love about the web and programming: freedom. Who doesn’t love it? Kids in their teens programmed Facebook. The web offers individuals the ability to learn and do what they want to do regardless of who they are or what they do in real life. It’s cathartic almost. Internet therapy, anyone? The domain name is still available.
I’m a graphic design student entirely swayed by the effect that web design gives off these days. It’s not just about preserving internet-specific traditions anymore, it’s the very forefront of our new media. It’s the revival of print techniques applied to web standards, it’s the meshing of dozens of design school philosophies at the fingertips of anyone with the will to sort it out. Because we know that good web design to me is doing more than sorting out information, it’s about pointing people in a new direction. Independent web developers are the first and last word in where our society can go in the see-and-do-anything internet. Rarely in human history are artists and engineers given the kind of trust and power we see them wielding today.
It’s inspiring and motivating, and most of all it’s substance to me, real substance and drive when the rest of our progress seems slow.
Hey Guys, I’m Louie, an aspiring web-developer, and I start college next year.
What I love about Web Design and Development is that, at its heart, it’s all about Morality. There’s communities like this one that are dedicated to “best practices” which is throw aside the end result. As a developer I don’t have to worry about some big-shot corporate asshole telling me I have to code the way he learned. I know I can and should code in a way that stands up for the little guy: the user and the future developer who looks at the code. And not only that, but make it so the ones with screen readers (or the disease known as IE6) can still benefit because I choose to help them out!
That is all, thank you for your time.
Was thinking about doing this but then saw the design.
Disgusting, no way will I chop up that abomination!
Why I love web design?
I believe my story is different than most. I’m trained as a Chemical Engineer. I do research in Biochemical Engineering on cancer drugs and I’ve just been accepted into the PhD program at the University of Pennsylvania for Chemical Engineering.
So what’s my connection to web design?
It’s my passion. As much as I invested in my education and as much as I lost sleep over stupid equations that meant nothing to me. I love web design. It’s creative. It’s fun. It can be mastered. It can be taught.
Web design is used just about everywhere. Whenever I’m not delved into scientific papers, I code. It’s thanks to Chris and this unbelievable website that I’ve switched from Dreamweaver to hand-coding my websites. I’ve studied the code of so many websites to the point where I finally started to understand CSS and HTML better.
I love web design. It’s my hobby. It’s my passion. Other than Chemical Engineering, it’s simply what I do.
Good luck everyone :)
One thing I love about Web Design?
The limitless nature of talent and creativity it creates.
I’ve not the time to enter the coding element but will save the files for future practise (i’m still learning the fundamentals and this’ll be good experience for me). A book to back up my learning would be beneficial of course :-)
Great idea Chris, Just entered my attempt!
I think the second way is better for me as i am still learning web design. Awesome idea Chris..thanks!
Do you guys care about css validation? I mean, can I use css hacks? Does this affects the final score ;)
Chris Coyer said: “The mockup only uses Helvetica and Georgia which everyone should have.”
Believe it or not, some web designers use PCs. We don’t get Helvetica (unless we buy it for a lot of money).
Easy enough to specify helvetica in css and use arial as a backup.
I have to use both pcs (in work) and a mac book pro at home.
yes, but it means I can’t select the text in Photoshop to see the font-size, weights etc. As soon as I click on it it is replaced, and it changes the layout.
CSS:
Cool and Simple to Style with, the Creative Solution that Shows off Clever, Smart Stylists.
—–
I’m quickly learning CSS and PHP hands-on. Most of my knowledge is from sites like these and looking at existing examples.
Hoping to spend more time on web design, it relaxes me.
Ciao
clokey
To Continue Contemplating Calmly Mr. Cloake.
Since Stupid Stress Sucks C**k Sometimes
A Secret to Success – Stop and Step away and Come back to it later.
If you ever become stressed out by the code not working. Sometimes gotta walk away, and clear you mind. Works like a charm
Not saying you need to do this, just a friendly tip to continue to remain relaxed. :)
I think the thing I love the best about web design are the “ahh ha” moments. Struggling with a php or js script for a couple of hours, only to finally get it (usually around 2am for me), and knowing you did it yourself. I also love creating from a blank slate where the posibilities are endless. It’s refreshing everytime, and never gets old. I guess if it ever does, it will be time to do something else. Thanks for the contest.
ooooh fun fun FUN!! THIS is what I love about web design! I love the puzzle-like problem solving of making a flat picture into a dynamic functional webpage with code. I’m pretty sure I won’t win the design part because I am still a beginner and there is so much I still don’t know (ahem – JQuery!), but what a great way to learn some new tricks. THANK YOU for this, even if I don’t win any books, I’m going to have fun playing with this design!
Very nice, One questions though, If you are giving this books. ¿What books are you reading right now?
I don’t really know whether I would consider myself an experience developer or beginner since I feel like I don’t know CSS at all after a recently created site I made. But I will enter in the Experienced Developers I guess
One paragraph about what I love about web design, is like asking me to like asking me to list every website I’ve visited in the past year. There are way too many reasons why I love it, so many that I don’t really know where I’d begin. Web design (writing code) is something I never saw myself doing, EVER, and when I started to do it, I never saw myself NOT doing it, literally and figuratively. I don’t know why, it was just an instant obsession.
#1 – Everything about web design as a whole is the FUEL.
#2 – The Accelerant feeding the flames is the way in which the internet makes learning anything, free, easy to access, and almost instantaneously.
#3 – Ready, let’s underline? Web Design, is the obvious FIRE, one we all admire.
It’s deeply desired, and always inspiring. Like live burning passion. Will not die or decrease. Relying on life that won’t let it expire.
Plus #2 from above is continuous, a supply of food for the flames, with the overabundance of resources for web design, development, and graphics. It’s no surprise, since these are the things that make up the pages that we view to find information for building… the pages that we view. Is that a paradox? The challenge to build and get ‘it’ to work, and the rewarding feeling of accomplishment, which can be seen by anyone anywhere.
You use, view, and explore using the one thing you spend your time learning how to develop, display, and make it function. It makes perfect sense really, like one hand leading the other.
What’s better than using what so many people use for both, reasons related to web design, and those which the average internet user would have? Combining ‘work’ and ‘play’ in a way of course! It’s ideally the perfect world to me. I just can’t break it down better than that, no I really could. I could sit here and go on about what I love about web design literally all day but it’s time to get coding! I’ve taken enough comment space as it is.
Good luck to everyone who enters!!
What I really love about web design is that it merges the passion of many people – creativity and logical programming – into one, adding the posibility to the designer of developing a style, making it personal, flexible, and awesome.
I love you and want to have your babies so they can create perfectly-aligned PSDs broken down into well-labeled layers.
As a developer, I can never understand why designers hand over such sloppy PSDs for slicing. You restored my faith in … well … humanity, I guess! :D
Nice contenst Chris. It’s a good idea for someone who has some time. Unfortunately, I don’t.
What I like about web design is that it’s always evolving and that keeps me motivated. I have to always try new things and learn fast or I won’t be able to keep up with the trends.
It’s also nice to have a wide set of skills (design/development) using different tools as long as you specialize in one thing (but I don’t really do that yet).
Maan! I would absolutely love to take on coding up someone else’s design (especially this one!) If only this contest had been released on a different week.
Anyway…
What I absolutely love about web design is the constant change in the industry. In a relatively short period of time, we now have CSS3 and HTML5 out to work with. And browsers, they are constantly getting updated. The amount of browsers out there to support can sometimes be annoying, but it’s still not that terrible. The main fun part of designing/coding a site is the chance to meet the needs of the owner/purpose. The reward of hearing someone say, “Oh, wow. I never expected it to be like this!” is awesome.
Thanks for the opportunity, Chris!
So Could someone explain how the clock and the background work? Like how does the background cover everything, and block out the white areas of the clock, when its the bottom layer? Thanks for the help!
To be fair, that is part of the challenge. I’m really curious to see the submissions since I’m sure people will tackle that issue differently.
I will say this, this design is more difficult than I originally thought when I first glanced at it. I start working on it and solve one problem only to run into another one as I work through it.
By the end, I’ll have my submission with my own solutions. I’ll feel good about it and learn a lot during the process. Not only that, I’ll get to learn a lot at looking at the other submissions. I’m sure the different techniques will generate discussion and I’ll learn even more that way. Simply put, I think this is why I love web design so much.
That’s one thing that the original CSS Off never did that I’m really hoping Chris will do here — put others’ submissions on public display. Discussion areas for each submission would be a bonus, but I’d really like to see how others solve the various problems that I’ve run up against in this design.
also, it will be interesting to see how the bottom highlight line is done. will it basically float at a hegiht always the same distance from the bottom of the main container or will entrants place it elsewhere?
another nasty is the DaVinci photo insert, I note that it is in the middle of the paragrah, what happens if the paragraph is changed? can it always be placed so that it stays in the same place if the content paragraphs change?
or will people just cop out and place it at the end of the paragraph?
been working on this but will not submit an entry, don’t have PS and don’t know how to use GIMP to extract the clock from the PSD.
anyhow some interesting challenges involved in this design to replicate it and allow for content changes. I will be looking for what happens to the design if left and right columns content is changed. that to me is just as important as duplicating the current layout.
Al
Wow, I just love coding these cool designs! I’ll surely enter this contest. Thanks for holding such a nice contest. ^^
This is just challenging layout, more about the top header and the footer article, z-index looks needed, but will be nice coding that.
Wow Chris what a great idea!, I like the way you included the beginners such as myself. Although, if no one minds i think ill go ahead and give it a go, trying never hurt despite my lack of skills.
must have skimmed over the what i love about webdesign part^^. It’s some what of a hard question there are a lot of things that i love, For instance I’m a Junior in High School and i can look at that image and go “looks like i’ll need some js to get the date in” or the fact that there always seems to be some sort of challenge involved with the process, I love solving the complexities of life, or in this case those challenges. I also am fascinated by the ability to write this block of text and have it (almost) instantly turn into your own work of art.
My look on things,
– Jerm
What I really love about web design is the constant learning curve. You can literally never get bored with web design. As soon as you start mastering something there’s another facet to explore. You start with HTML, move on to CSS, or layout theory, or typography, or Flash, or scripting, or….. well you get the idea. For anyone who loves learning then it’s the field to be in.
I totally agree. Another cool aspect is you can find places such as css-tricks etc. and learn a lot of the code before going on to pay for formal training.
I want to play because I have fun converting Photoshop files into CSS and have a lot of experience doing that. My only hesitation is that I have a subscription to SafariOnlineBooks and have access to all of the books being given away except the smashing magazine book, which I do want. I wonder why people even buy hard copies of books anymore.
Strange is that the ebook release from that book are not ready yet, and solve a doubt of mine, really worth the SafariOnlineBooks? What you use the 10 books a month or the other?
I love webdesign for the the power, the women, and the money. I pour code like beautiful Moet from my bedazzled Pimp Cup, lathering up your screens sooooo good. You know it. You like it. Yeah.
Bonus points for validation? or are you judging on artistic content?
I’ll add another vote for more designs to be coded up. This is a great idea, I dont have time to enter the code part, but I will be saving it for later.
What I love about web design?
For me its not the design part at all, I am terrible at designing a web site. My joy is building the code part of a website. I love how technology never stops changing, there is always new and different ways of doing things. From jQuery and MooTools, a static HTML site or a dynamic WordPress powered site, there is always something new to learn, a new book or tutorial to read. Thats what I love.
Awesome! Going to give this a try! Selecting the best elements, nesting the best way , applying css with lowest number of lines is always a challenge
Those rules are almost as complicated as Adam & Joes Quizzlesticks!
Good idea!
I love web-design too.
It’s also nice to have a wide set of skills (design/development) using different tools
Helvetica and Georgia which everyone should have…
Hey man, did you ever use a PC ?
Helvetica is not a web safe font…
Of course, there’s a certain, inexplicable satisfaction in optimizing a site until it loads in half a nanosecond, but I think what I love most about web design is that it offers endless variety, both in the types of information that can be presented, and in the ways that that information can be presented. Not only could you work on a music site one day, and a personal blog the next, and a dog grooming site the next, but there are a million different types and styles of dog grooming sites, music sites, and personal blogs that can be created. And best of all, there are few barriers to entry, and no physical mediums to buy and replenish; as long as you have a computer, the time to learn, and the patience to evolve with trends and technologies, you can design for the web.
I’m a very newbie in a web design world. I love web because it is flexible and always changing. Now, I’m learning in JQuery and of course PHP.
This is awesome contest and I want one of that book..I think it will be very useful for me..
More design. Less war.
Uhmm… choose me? Please? *puss-in-boots mode*
Fantastic Idea :)) !
I’ll try!
I’d love to get the smashing book or jquery books….
Thanks for the opportunity!!
Well, I’ve always admired typography and I’m pleased to see its growing importance in Web design.
I always find myself re-visiting articles on the nuances of good web typography.
Although there’s no book up there on typography, I’m really eyeing CSS Mastery and The Idea Book! :)
I become a web designer not because of making a living. I do it totally like a hobby. When I first knew the Internet, I always wondered who were the people behind all this? how did they make this things work? how did they know that I logged in to send a message say “hello, Mike”? how did they make snow falling like real on their website? How about Flash? Javascript? PHP? etc …
These questions lead me to web design field and I love it ever since. In my free time I like tweaking code, making things up and happy when it works.
The nicest thing about this field is you always can learn something new everyday. And there are millions of ways to complete a task. You are not restricted to any certain way. This makes it so interesting about this field, you never get bored.
Not like many others boring jobs, we become so familiar with it and can do the job with our eyes closed. But with web design, as soon as you think you master one technique, they have new things come up. You are done with CSS? nope! CSS3 is on the way. You are great at Photoshop? nope! Photoshop CS’n’ is being released! Oh! HTML is piece of cake! are you sure? HTML5 is right in the corner.
That’s why I love designing web.
One thing I love about web design is that it combines both left-brain and right-brain functions into one endeavor. Your creative side gets a workout in crafting a beautiful and usable design, and then your logical side turns that design into a working website through writing and organizing simple, yet effective, code. It’s the best of both worlds in my opinion.
What are you going to do with the web page afterwards?
This is a long shot because I haven’t done any official web projects to show you to be honest. I’m still in the process of collecting tips and tricks from guys like you Chris. But what I like about web designing is the almost infinite possibility of making something happen and learning new stuffs.
I love web design not only for its end results, but for all of the little (and big) hardships in between. There is such a gratifying and captivating aspect of designing something and then accepting the challenge of bringing it to life with code. There isn’t a day where I don’t learn something new, or learn a new way to do something that’s old. I truly appreciate the fact that there are so many technologies being created and refined that all can produce the end result which is a website for all to use.
Most people’s comments are like this”I won’t win”
:-)
they think that making comments like that will make them winners .I think that “I won’t win” either!
hehe !
Hello, nice competition! I will participate too :)
A question, are we free to use any css framework or we should write out own css?
Also you say that we should make it so like it work on all browsers (last version for each) I would really like to make it in html 5 and place js code to make most of thinks works on IE (I’m not sure about IE6/7) but html 5 also is not valid yet (if I’m not wrong there isn’t any html 5 validator as it isn’t officially released yet) the only validator (un-official) that I came up is http://html5.validator.nu/
So to sum-up:
1) may I use a css framework?
2) can I make it in html 5?
Thanks :)
Brilliant! I’ll certainly give it a try. With all these files in your hands, you will have an interesting picture of the most common techniques and mistakes. It would be gratifying to see an article about this right after the contest results.
I can’t access submission form on https://css-tricks.com/css-off-entry/.
Chris, can I email you that?
What gets me so excited about web design is that I get to use both sides of my brain. I went to school for Architecture (and even got a Master’s Degree in it). Architecture was the ultimate creative outlet for me. I was able to design beautiful art not only on paper, but also in a physical space where people could interact with it. This gives the art social implications like accessibility, functionality & user experience, and respect for context. The challenge of the project was always to reconcile my artistic side with a thorough technical understanding of structure, environment, and building codes & requirements and create something that excelled on all accounts. But because of my talent in 3D graphics, architecture firms I worked for ended up making me the “graphics guy,” and I never got to enjoy any projects in a satisfying way. Now, when I’m doing web design, I feel the same artistic and “geeky” satisfaction I did when I was doing Architecture, but now in a digital space where accessibility, functionality & user experience, and respect for context are just as important. Web Design is an art, like Architecture, where the internal structure (things nobody sees or notices) can be just as beautiful as the outward appearance. This makes my brain happy.
Hover states. Every time I finish a website I catch myself hovering back and forth over buttons.
Good luck all.
I tried doing it but I then realized that client work was far too big :( I would have given it a better go if the time frame was bigger, but unfortunately my clients have to come before this comp.
Good luck to everyone else thought, I guess I’ll just have to buy a new tablet myself ;)
I love about webdesign that it gives so many people a chance to build their own home on the web. From hobbies to business, everybody can take part with a reasonable amount of work.
Start simple and you’ll be able to build up towards fine and elaborate designs if you want to.
What I like about webdesign is that it is art for geeks. I would love to see an art gallery with just monitors on all the walls each one displaying a different website from the best designers on the web.
I’m really a child here. But I have a dream against all boundaries that I have in my life. I just have a simple blogger blog, which completely on a different topics. But I fall in love with the design concept when i was looking for some blogger tips. Recently I’ve learnt ‘How to Create a CSS Menu Using Image Sprites’. When I saw that worked on my blog, I almost cried.
I need some good books on CSS & HTML basics. Where I live it is very difficult to find good books. I can’t buy through online, because it is very expensive for me.
This is a great contest. I would love to win some books.
Woohooo !
I’ve just finished to code the design :)
The most amazing thing I find about web design, and what I love most about it, is how a project is never truly finished. Sure, you can use all you know (or think you know) about everything available at this moment in time and see your results instantly in your browsers. And when there is a problem, the browsers are wonderfully unrelenting sources of feedback. But there is always something new and exciting being discovered, developed and introduced that takes your breath away and sends you searching through the source code while madly muttering, “How’d they DO that… ? I just gotta use that with my gallery (or form/navigation/embed/whatchamacallit)!”
– Seriously, Chris… one paragraph to sum it all up? I could have rambled on, but I want to win a book or two so I can be ready to tackle the design challenge for your NEXT CSS Off!
Interesting chris , you make me think of books i will choose, working. Good luck everyone
Chris,
will you sign the books?
Great Idea Chris! I really like what your doing with this site. I visit here often and your a great inspiration!
Kudos to you Chris!
I think it a grand idea for Chris to sign the books and maybe wright a little something inspirational in them for us.
Will you provide any feedback for those who won`t win ? i`m not talking ofcourse about all of them maybe 10 that you think they are good but still need some improvements .
Why do I love web design? It is now ten weeks ago that I first stumbled upon meeting my beloved HTML. Shortly after, I discovered CSS and promptly fell in love. Being a non-techie initially, I was absolutely fascinated as I watched my own code turn into a working design. It is the challenge that I love the most. Nothing is more intriguing for me than trying to figure out why my min-height is not working as I anticipated. Yes, web design and I are in for the long haul. No matter what, we’re gonna stick together through thick and thin… and even through IE 6. ;-)
Entered! That was fun, it’s a good chance to experiment with html5 and css3. Thanks for having the idea, I’d totally do it again if you made another one :) Btw, windows doesn’t come with the helvetica family.
I wish having more time and submit my entry but I really don’t have time! =( So I’ll try with a comment.
You asked for what I love about web design. Well, I love web design. That’s all! Designing a website, developing its features, creating a great user experience and having a satisfied client, what I need more? It’s the more rewarding thing that exists!
Every time that we designers have the opportunity of translating emotions, information and much more in a website is like giving life to our thoughts or the client’s ones.
Thanks for the contest! Maybe the next time I will give an entry!
I had to do some changes,so i sent it again
Having a client that is completely satisfied when I hand him my work makes me all warm and fuzzy inside…
Wow. Thanks for reminding me that I’m still a newbie! I’m going to keep plugging away at this, but suspect that a few aspects of the design are outside my skill set at the moment. And that actually illustrates what I love about web development: the puzzle aspect of taking a design and researching, finding solutions, and translating it into code, followed by that ‘a-ha!’ moment when you finally solve the problem and get it right.
On another note, I’m not sure if Chris is going to post winning entries, but I’d love to see how experienced developers complete this build if anyone’s willing to share (once the contest deadline has passed, of course!).
Great idea. I’m in. Hopefully i get it finished in time, a bit late to enter maybe.
One of the best things that I encounter in the whole game with CSS is a real satisfaction with the taste of coffee. Oh, and a sudden surprise when everything works perfectly… “Now that’s weird!”
What I love about web design the most is how there’s something for everyone. If you’re into managing databases and coding huge international applications, PHP and MySQL can do the job. Design artists can enjoy crafting beautiful layouts to display content.
I have a story similar to almost all web designers: being self-taught, I first learned HTML, and then got hooked. I went on to CSS, and then I heard about JavaScript and PHP, so I learned those too. When I’m coding, I love that I can use both the creative, analytical, and logical parts of my mind at the same time.
Great idea, Chris!
I do love this contest already, despite the mock-up being a little bit dull (in emotional sense). But I’d really love to take part (hope will do everything in time). Good luck, everyone!
This is my first entry ever on CSS-Tricks. I had all last week off from work because of the weather and spent most of my time reading articles and watching the screencasts. I love the screencasts and have learned a lot watching them. I am new to web design, but find it all super exciting.
I would have to say the one thing I love about web design is that it is so evolutionary. Just think back to how primitive it all was in the beginning. At that time, the only good thing about it was the information we could find. Now, we not only have access to an ever growing array of information and knowledge, but we also have that info delivered to us beautifully wrapped in an endless assortment of creative packaging. With its tight typography, groovy graphics, and flashy features, I believe strong web design is the key to effectively communicating information on the web, and I love it!
I also love The Web Designer’s Idea Book as well as the Wacom tablet! Hint, hint . . .
What I love about web development is that I can be part of the front end and back end. I am a newbie to, and studying, web development. The books would help me progress greatly.
One of the greatest aspects of web design is that it is probably the most accessible industries you could possible be involved in! By that I mean you could do it on a PC, on a Mac, on a text editor, on the loo, on the move, in the office, on the plane, in the garage, in the park, in bed whilst watching the film, on the train, chewing an energy bar, on the phone, drinking a cold cup of coffee, listening to music but its a shame you can’t do it on IE6!
PS. Just to let you know that css-tricks was one of the reason why I got into web design and realized how fun and rewarding it was, so a big thank you!
One of the best things about web design is the creative outlet it allows for just about anyone willing to look at the source code and figure out what and how something was done. As college student that was how I learned. I picked up a book for the fundamentals but then started doing it by view source. The community is great, and almost always helpful and its one of those things you have to keep learning forever in order to stay on top of things.
I really enjoy the work on this mockup and i learn a few cool tricks too. This is a very good practice and i hope it will be continued.
I love that you never stop learning in web design, because everyday there is something new out there. Therefore I will never get bored. Unlike print where you can only learn so much and than that’s it – it’s done.
One of the things I like about web design is the evolving technology. In this field it’s demanded that you keep up to date. I look back to some of my old website and think “Wow…I built websites with TABLES”.
Looking back on historical moments gives one a perspective that isn’t necessarily apparent to those who lived through the times in question. Witnesses to the first successful attempts at woodblock printing in China in the 3rd Century, or to the first use of moveable type by Gutenberg in the mid-15th Century surely must have been impressed with what they saw, but did they fully understand the tremendous impact these technologies would have on their social, political, and religious futures? These were two major revolutions in publishing, and we are now at the beginning of another revolution, the development of web publishing. With the benefit of hindsight, we can realize the importance of this technology as it evolves under our guidance. Having spent my professional life in graphic design, I am thrilled to be a participant in this latest revolution through building my wife’s and my web magazine, The New Southern View Ezine.
Bill Pitts
The New Southern View Ezine
P.S. I have been building websites for several years but I relied too much on GoLive and Dreamweaver to do the behind the scenes work. For the last month, I have been teaching myself CSS, using David McFarland’s CSS: The Missing Manual. Using my new (and still growing) knowledge, I am putting my sites on a CSS diet. I haven’t had this much fun since building plastic models as a boy!
Got word of this just now. I am sorry I will not be entering it as I am potty training twins and the short notice just will not fit into my schedule. But I wish those who do enter the best.
I have recently started studying web design and I find it absolutely fantastic. Designing for the web is a great challenge. What I really like about web design is that it gives me the opportunity to create a small world for the user where every single detail has to be well-considered in order to creates a better user experience. And I do believe that content is king!
Unfortunately i wasn’t able to finish the page in time, band as well as exploration of Ipods, apps, plants Vs. zombies, and new knowledge of web design seemed to get in the way a little. If anyone is interested in what a newbie such as my self was able to accomplish send me an email at [email protected] and ill attach my files
All I can say is that what you are doing is great!
I wish I could be at a level to be able to compete or at least give a try but I’m not there yet, learning a lot from Chris though!
GOOD luck very one.
I thought about entering the contest by converting the design, but I ran out of time, so…
One thing I love about web design is that it has provided a way for me to pay for my expenses while I am going to school. As a full time Bible College student I find myself too busy to hold any kind of a job. Last year at about this time I decided that designing websites would be a fun way to make a little bit of money while still being flexible enough to devote as much time as was needed to my studies. I have greatly enjoyed the learning that has come along with this endeavor. In addition, I have been blessed by all of the local business people whom I have had the privilege of meeting along the way.
What I love most about web design is how it provides a platform for the world to share information in visually engaging ways. At the same time, web design can provide accessible content on a level playing field for all people regardless of capabilities, language, cultural differences or physical impairments. For instance, I am learning CSS but I can’t afford professional training. The Internet has provided a forum for all the worlds masters to share knowledge for all without prejudice. That simple fact, along with clean water, could be the answer to world peace.
I just submit my job, but I’m hoping for more people to participate via comments.
Let’s get this game started.
I must say the clock isn’t the most difficult part, so much aready I was stuked in the z-index negative links that dont work in the footer, so when I put a positive they magicly work again.
The layout is like based in the 960.gs so I used parts of they framework, but with only 2 days to work(My fault, I was enjoy the brazillian carnaval(note: I live in Brazil)) I can’t clean up the framework, not even clean up my own css. I hope this don’t bite me later. XD
Thanks for sharing these goodies through the contest Chris. Fun!
I entered my design last night. Let’s see if I have some luck…
English is not my native but I’ll try my best to describe about things i love about web design :D
– the community shares a lot of resource and knowledge regularly
– how it challenges me to always educate myself to catch up with the evolving technology
– Just looking at great web design can inspires me a lot (in various aspects, not just web design itself)
Damn…just saw the article…
Web Design is all about finding the right means to communicate with users. Doing this form of communication right is a great challenge and so much fun, too. It covers so many fields from psychology and behavioural patterns to Information Architecture, Typography, Programming and more – Working as a web Designer therefore forces you to open up your mind and start a journey of infinite discoveries. Thats why I love web design!
just submitted my entry good luck for everyone , if i didn`t win i hope i can get useful feedback from you Chris. Thanks
A website is like an interactive menu to give information to people around the world in a creative and fun way. And with coding you have to take your design and use the right tags in the right places to turn it into something everyone can enjoy, these are just a few reasons why I love web design!
Unlike software developers, web designers are able to get instant feedback as soon as their designs go live. That is the most useful aspect of web designing for me – instant feedback equals more time to correct any mistakes, improve the design, etc. There’s no need to build to see your masterpiece (unlike software). We live in an instantaneous world where everything has to respond instantly – web designing does just that.
Maybe it’s just me, but when I think “web design”, I don’t think code, I think design. What we coders do, in my mind, is web development.
So, the things I love about front-end web development are the ease, the challenge, and the additional ease.
I’ve built programs before, and, like many people here, I much prefer the instant gratification and feedback associated with building a website to the waiting and frequent frustration of compiling a program. Compared to “regular developers”, we web devs have it easy.
Then there’s the challenge: cross-browser compatibility, working out advanced layout techniques, and working with legacy applications. While the first and last are annoyances, to be sure, there is a certain triumphant feeling to be had when you accomplish them — I know I was quite proud of myself for getting certain aspects of this design working in IE6 :D. Further, advanced layouts give us chances to stretch our Google muscles– sorry, our brains :).
Finally, the additional ease: it is so easy to learn more in the web dev community. Community sites, blogs, IRC channels, forums, all provide several different ways to learn many new techniques, solve problems, and get (free!) help from other, more experienced developers.
Good luck to the contestants!
Chances appear fade now, but anyways I would like to thank you for putting up such an interesting contest. This forced me read a ~500 page book on HTML & CSS and a lot of articles.
My city is far from creativity; far away from “div” tags. People still use “table” for designing sites. I THINK I’m one of the few or may be the only one to know the “div” technique.
THE GIVEAWAY WOULD’VE BEEN SO HELPFUL TO ME but anyways THANKS for such a great contest
Anyone else having problems uploading their submission? =( It’s not 12 CST yet, I checked =(
What I love about Web Design:
I have never before felt like a creative individual. More specifically, until about 18 months ago, I had not found a creative outlet for myself. Nothing with which I could excel, flourish, grow as a person, contribute to a community. With web design, I get to take my detail-oriented, perfectionist tendencies (some call them anal) and apply them to creating beauty and, hopefully, helping business grow. I love that, if I am at all successful, I can be my own boss. I can have the freedom to succeed or fail by my own devices. I can practice the leadership that I wish other business leaders embodied. For all of these reasons and more, I love web design. And if it wasn’t for this site, I’d still be coding tables-based sites… not really, but mostly.
-Jacob
Well, that was an interesting few hours putting together my entry. Working from someone else’s design isn’t something I’ve much of before, so it was a nice challenge to try to code it when someone else is making up the rules.
That about sums up web design in general, doesn’t it? Always a challenge around the next corner…
Due to a stupid virus I am not able to submit an HTML/CSS conversion in time, so here is my single paragraph.
One thing I love about web design is the multidisciplinary skills that are invoked: one time I see myself scraping and sanding on a CSS file to get a design work in all major browsers, another time I can slice and optimize images in my favorite image editor. A few minutes later I transmogrify in a hard core Javascript coder, having to know the difference between
var f = function()andfunction f().Web-Designing for me is a passion which inspires me to learn more than designing. It helps me enhance my RIGHT SIDE OF THE BRAIN. my interest in photography, logo designing has got a perfect companion – “Web designing”. Everyone loves their PASSION!
I spent part of Sunday, Monday, and Tuesday working on my entry, but didn’t really have a lot of time. I’m a high school sophomore and have been very busy with my coursework as of late. I worked on it until 11:55 today, and decided that there wasn’t any way I would be able to finish in time. A screenshot of what I have done so far can be seen here. I was planning on using jQuery for the animation, and for the hover effects on the sidebar images. (The borders on the side would continue down the length of the page.) I love web design and development, and am constantly seeking out new and interesting areas to explore. The book prizes would be great additions to my design bookshelf, and would definitely help me to increase my skillset. I really regret not being able to enter my own, but I would very much appreciate a commenter prize. Thanks for the always-informative CSS-Tricks, and for paying your design experience forward. This was a great idea!