The Digg Crew wants to hear your thoughts!
Please take our short survey about Digg and potential feature ideas.
Create a Sleek, High-End Web Design from Scratch
psdtuts.com — In this tutorial we'll put together a high-end web design using a crisp, thin font, gorgeous background images and clever use of space and layout. You can easily use the technique to create your own unique designs.
- 2334 diggs
- digg it
- nicolaport, on 04/27/2008, -16/+32They make it seam so easy! Great tutorial, as usual in psdtuts.com
- KB925902, on 04/27/2008, -14/+10i'm interested to know why this is called web design. it looks like a nice-looking web page photoshop mock up to me. no scripting, coding, or html in sight.
- solidus636, on 04/27/2008, -2/+18If you look closely, there is a link to their new site where it shows how to code the layout. Here is the link:
http://nettuts.com/site-builds/build-a-sleek-portf ... - brownspank, on 04/27/2008, -1/+3You're probably referring to Web Development, though the confusion is understood. Depending on the workflow, the Web Design process usually includes translating the mockup into markup, styles, and even interface logic.
- solidus636, on 04/27/2008, -2/+18If you look closely, there is a link to their new site where it shows how to code the layout. Here is the link:
- maximumsteve1, on 04/27/2008, -1/+8I know! seams sort of like spelling!
- KB925902, on 04/27/2008, -14/+10i'm interested to know why this is called web design. it looks like a nice-looking web page photoshop mock up to me. no scripting, coding, or html in sight.
- MookiBlaylock, on 04/27/2008, -21/+12yawn
- tomi, on 04/27/2008, -0/+5Yawn? I'm glad to see something not politics or lifestyle related on Digg for once. Bring back the technology on Digg!
- Wakuko, on 04/27/2008, -28/+24This is way cooler than those ***** xkcd comics!
Bring more! - hadiz, on 04/27/2008, -2/+163"The secret to creativity is knowing how to hide your sources." - Einstein
- bluestranger, on 04/27/2008, -1/+4This is a misquote. Einstein didn't say 'sources' he said 'inspiration'.
- hpfreak26, on 04/27/2008, -0/+6What, do you think he's going to sue?
- daizaru, on 04/27/2008, -0/+3Even though I hate misquotes, that was a hilarious response.
- hpfreak26, on 04/27/2008, -0/+6What, do you think he's going to sue?
- dariusperkins, on 04/27/2008, -0/+12It'd have been more creative if you didn't credit it to Einstein.
- kckern, on 04/27/2008, -0/+0I thought Mark Twain said this...
- bluestranger, on 04/27/2008, -1/+4This is a misquote. Einstein didn't say 'sources' he said 'inspiration'.
- jggube, on 04/27/2008, -7/+11Great tutorial, as we can only expect from psdtuts. It's very thorough. Though, I'd like to add that when mocking-up the content text (lorem ipsum's I call them), I prefer setting the text with no smoothing/anti-aliasing to simulate how it would look in a web browser (without ClearType or similar installed).
- toxicityj, on 04/27/2008, -2/+19as someone who does primarily PSD to XHTML/CSS work, I thank you for that. I wish more designers would do that so when they see the finished product they don't give me that "Well why does the font look different?" crap.
- trashcat, on 04/27/2008, -21/+95Awful. Fixed position and large images where text would do the job should be avoided at all costs. I would highly recommend learning the proper ways to do things from the very start. E.g. dynamic layouts and accessibility.
I get the feeling this will get dug because it looks nice (a fancy background and images will do that) but a fixed layout will infuriate users other that those with the exact same setup as the author, and waiting 5 secs for a background to load may not sound like a lot...- actionscripted, on 04/27/2008, -18/+131) Fixed layouts are more common on the web than flexible ones.
2) It is possible to retain usability/accessibility and still use images for text replacements.
3) If the background is optimized properly it'll take a lot less time than five seconds.
There is nothing horribly wrong with this layout assuming the markup and slicing portion (not a part of this article) are done properly. You're slamming the article for something that could possibly, maybe happen but isn't included in the article? You have no idea what you're talking about in terms of web design and I challenge you to prove me wrong.- bpapa, on 04/27/2008, -9/+8You are wrong:
1 - Tables for layout are pretty common too, doesn't necessarily make it right. A very small percentage of web pages are actually coded properly.
2 - It is but what's the point? Nobody gives a ***** about any of this. People visit websites for content or functionality, not because there is a pink and black gradient or whatever nonsense.
3 - It's still slower than no image.
So yeah, trashcat actually does know what he is talking about.- juke1, on 04/27/2008, -0/+7LOL
- estvir, on 04/27/2008, -1/+18scottcc, I'm not one of those 'W3C nuts' but to call CSS bloated and prefer tables is possibly one of the most stupid things I have read on Digg.
Also, fixed layouts are fine and liquid ones come with problems of their own. Just choose what's best for the site you're designing/coding. - XBSHX, on 04/27/2008, -2/+19lol scottcc you're such a moron. Calling yourself a "professional web designer" and yet using tables for layout purposes? Thats gotta be the funniest thing I've heard all day. Tables were created to hold tabular data, not to be used as a substitute for layout divs. It's not our fault that you're either too stupid or too lazy to spend some time learning CSS. Let me guess, you're one of the people that will go on craigslist and throw up some posts about being able to create a professional website for like $100. You know nothing about web design.
- tomi, on 04/27/2008, -0/+10scottcc, I suggest you look into studying more about CSS. I definitely don't see how CSS is more bloated than tables at all.
- DNABeast, on 04/27/2008, -0/+13You've been making sites since 1997? Is that why all your sites look like they were made in 1997?
- Corrosionx, on 04/27/2008, -0/+2CSS is bloated while tables are not? You sir are obsolete.
- bpapa, on 04/27/2008, -9/+8You are wrong:
- p0tent1al, on 04/27/2008, -4/+53I disagree. Obviously text would do the job for this situation, but the purpose of the tutorial is to show you all the techniques used to create a good looking site. Once you have the tools, then you can go and take what you need from the tutorial, and implement it right along side a lean XHTML/CSS setup.
Anyone could as easily mock the tutorial for not dynamically building the Recent Work section from a database, which would be (once again) outside the scope of the tutorial, and moreover, plain silly.
The site is called PSDTuts, not PSD + XHTML/CSS + PHP/MySQL Tuts. Let them concentrate on what they do best, teaching Photoshop.- MalDON, on 04/27/2008, -0/+3Yes, It's psdtuts, but the html portion was on nettuts. When I saw them using a black image for the repeated background I cried a little bit. Also, absolute positioning wasn't really needed. Whoever wrote this obviously has not spent much time working with css.
- gdehms, on 04/27/2008, -3/+16Just to let you guys know, they have the coding portion of the tutorial on Nettuts.com .
- p0tent1al, on 04/27/2008, -0/+6The tutorial on Nettuts incorporates a bitmap of text, the extra tutorial on Nettuts does not change this.
http://nettuts.s3.amazonaws.com/002_WebBuild/site/ ...
- p0tent1al, on 04/27/2008, -0/+6The tutorial on Nettuts incorporates a bitmap of text, the extra tutorial on Nettuts does not change this.
- DeathfireD, on 04/27/2008, -7/+2Unfortunately company's don't care how dynamic or how standard the code for the site is. As long as it's done in a timely manner and looks nice to them. This is why most designers that work for large company's still use Dreamweaver's simple table tool to get things done. However us freelancers that work hourly, pride our selves on standards compliant code not just because it's standard but because it could potently take lot's more time to do and we all know more time = more money.
- p0tent1al, on 04/27/2008, -0/+3Yes this is true, but as a long time freelancer recently gone company bound, more time = being able to productively (not frantically) work on a project and having the time to think outside of the box.
And I get the same time frame that a regular web developer using tables to style would get, which equals much less work for me. I just make sure not to finish quickly, taking my time to research and learn. - Nextrix, on 04/27/2008, -1/+15WTF are you guys talking about more time to develop a website in CSS compared to tables?! Since I have learned CSS a couple years back I been able to make website designs and convert them to CSS/XHTML in less time it took me just to cut out all the image for my tables back in the day (2001). I am not saying tables are not useful as they are still great for you know... displaying data in tables AKA spreadsheets. And the benefits of CSS in the long run are worth taking the time to learn it now. I think if you don't like change, then you are in the wrong industry as this field changes all the time. As for the companies, well they are starting to learn about efficient websites and some are not willing to accept the older methods when creating a website, well except for smaller business like a local shop or the lady down the road. What quicker, going through a tabled design website and making a new design for it, or having a XHTML DIVs elements website where I can just make some small changes and apply a new design CSS on top of the page. In the end it makes it better for all of us, not just the consumer.
If you are not willing to learn CSS, you can't call yourself a professional web designer!! Its like saying I am a professional developer that is only willing to code in BASIC.- DeathfireD, on 04/27/2008, -3/+3unlike you not all web coders feel that way. I personally, as a freelancer like to do CSS since I make more money that way. But many of my friends that work for cubical businesses dont have the time or patience to do that. You also cant assume everyone is going to catch on as fast as you.
- Nextrix, on 04/29/2008, -0/+1Where did you think I learn all my CSS from... college? lol I learned and have been learning most of my web stuff on the job. OK I am not trying to force this down peoples throats, but common CSS was release a long time ago and there has been more than enough time to at least learn the basics and use them effiecently. The reason why I stand my ground so firmly on this topic, is based on the type of jobs I have to clean up from past workers when I take their position. I can understand this type of work being done on the job maybe 5 years back. But lets say you work for a larger corporation, you work in a cubical (so do I) and you are in charge of the site, design and development. The site is done with something basic out of the water dreamweaver template system, running on full HTML 4.01 tabled cut-out image array design. The big boss comes down and says he is looking for a new redesign of the site and whats you to have a design done within the week. How long do you think it will take to do that site for design from a TABLES -> TABLES, TABLES -> CSS, or CSS -> CSS migration? Tables to tables will take much shorther than converting to CSS, but longer than CSS to CSS. I am looking into the future of web design & development, not just to make my life easier but any other web developers or designer that might have to take my place or join the group that might not have that much experience in fast past deployment. And I work for a newspaper company so I know how hardpased this job can be at times.
- DeathfireD, on 04/27/2008, -3/+3unlike you not all web coders feel that way. I personally, as a freelancer like to do CSS since I make more money that way. But many of my friends that work for cubical businesses dont have the time or patience to do that. You also cant assume everyone is going to catch on as fast as you.
- p0tent1al, on 04/27/2008, -0/+3Yes this is true, but as a long time freelancer recently gone company bound, more time = being able to productively (not frantically) work on a project and having the time to think outside of the box.
- Stephiems, on 04/27/2008, -9/+4Oh man, another code monkey that doesn't like sites that looks good because they are garbage at graphic design. It is possible today to get a website that looks nice and is coded correctly. You don't know anything about the real world if you think that people don't care about graphics, they certainly do, what they don't care about, is if it is coded correctly. How it looks is the first thing they see, then of course is the usability. I'm a programmer and am pretty much crap at graphics, but I certainly understand that the look of sites today are very important. If the way things look didn't matter today, we wouldn't have advertising and graphic design at all, we'd just throw a bunch of black text on a white background and be done with it. I can't wait until this stupid web 2.0 look is over. How boring and unimaginative. Really, web designers coming out today aren't going to have any imagination...just pick a rounded text, type out the logo, add some rounded corners, and there you go. That look is okay for some things, site design should be based on the use and audience of the website, but to just completely disregard the necessity of fancy designing is stupid.
- actionscripted, on 04/27/2008, -18/+131) Fixed layouts are more common on the web than flexible ones.
- fcrow, on 04/27/2008, -7/+52It's ok but not worth digging. Also I would never use text in an image on a website, best thing is to separate content and design.
- santaliqueur, on 04/27/2008, -0/+18Only time I'd use text in an image is for an email address, to make it harder for the dumber spambots.
- ErikHK, on 04/27/2008, -3/+0What if I use my cell phone with images deactivated, how am I supposed to find out your e-mail address?
- MtheoryX, on 04/27/2008, -0/+7Well, I guess you're ***** out of luck then. That would be my guess.
You can't please everyone. - HolyChimp, on 04/27/2008, -0/+5alt tag?
- praisethelard, on 06/06/2008, -0/+4I guess that defeats the purpose of an image that bots can't read.
- MtheoryX, on 04/27/2008, -0/+7Well, I guess you're ***** out of luck then. That would be my guess.
- ErikHK, on 04/27/2008, -3/+0What if I use my cell phone with images deactivated, how am I supposed to find out your e-mail address?
- Protonz, on 04/27/2008, -1/+10They do mention this in the article. But it is a matter of style. If you aren't worried about SEO or load times, then why not? You can't do a radial gradient on standard text, gotta use an image for that.
There can be value in not doing what everyone else does. - estvir, on 04/27/2008, -1/+4NEVER? It's good to have as little as possibly but some specific text as an image is fine, it just depends what text it is.
- fcrow, on 04/27/2008, -0/+1Except maybe the title, captcha and email address.
- clos, on 04/27/2008, -1/+2typography isn't design?
- plokij909, on 04/28/2008, -0/+1In theory, yes you're right, but there are ways around that.
FIR http://mezzoblue.com/tests/revised-image-replaceme ...
- santaliqueur, on 04/27/2008, -0/+18Only time I'd use text in an image is for an email address, to make it harder for the dumber spambots.
- Scabdates, on 04/27/2008, -9/+11trashcat: Part of being a good coder is being able to apply your code to make this design work on all platforms. It wouldn't be hard at all (not that hard, though a bit time consuming), furthermore, as a coder even I can admit that aesthetics are far more important than accessibility. What the person sees on the top is more important than the source code.
- loudintl, on 04/27/2008, -4/+4WHAT
- MtheoryX, on 04/27/2008, -0/+4i said... THE CAPS LOCK IS TO THE LEFT
- loudintl, on 04/27/2008, -0/+1Sorry, inane and ludicrous statements can make me lose my internet manners.
I mean, aesthetics over accessibility?@#&!
- loudintl, on 04/27/2008, -0/+1Sorry, inane and ludicrous statements can make me lose my internet manners.
- Blah_Blah_Blah, on 04/27/2008, -0/+1he said, "trashcat: Part of being a good coder is being able to apply your code to make this design work on all platforms. It wouldn't be hard at all (not that hard, though a bit time consuming), furthermore, as a coder even I can admit that aesthetics are far more important than accessibility. What the person sees on the top is more important than the source code."
- MtheoryX, on 04/27/2008, -0/+4i said... THE CAPS LOCK IS TO THE LEFT
- fr34k5h0w, on 04/27/2008, -1/+13Uhm... no. If your website is all about the design then you have a pretty website with no use. Your content MUST be king or your website will just be another bland 2.0. "Web 1.0" as some would call it was all about the final product, not the steps to get there. Today's websites should focus on good, lean code that promotes content that is universally accessible.
- rkthoadan, on 04/27/2008, -0/+2You are right that content is king, but wrong in thinking that design isn't a part of your Content. Code for the most part, isn't. The original posters point was that clean design is more important than clean code. They are right. Clean code IS important, but not AS important. If some hypothetical problem is forcing you to choose between clean design and clean code, you should choose clean design. It's almost never an either/or scenario however, but there are cases when strict standards compliance might hinder your design or limit the browsers your target audience uses, in which case you should ditch standards compliance.
Basically, you should create your design independent of your code, and then code it as well as you can. - solid12345, on 04/27/2008, -0/+1"Universally Accessible"
So you are one of the people who promote such trivial things as making a website compliant for blind people? Because we all know blind people need to find out what is going on on a website selling oil refinery equipment.
Or making sites compliant for cell phones, because we all know I should have to appease those .5% of users who actually view websites on their phones instead of a computer. Yeah they really matter to me.
- rkthoadan, on 04/27/2008, -0/+2You are right that content is king, but wrong in thinking that design isn't a part of your Content. Code for the most part, isn't. The original posters point was that clean design is more important than clean code. They are right. Clean code IS important, but not AS important. If some hypothetical problem is forcing you to choose between clean design and clean code, you should choose clean design. It's almost never an either/or scenario however, but there are cases when strict standards compliance might hinder your design or limit the browsers your target audience uses, in which case you should ditch standards compliance.
- TheUserFactor, on 04/27/2008, -0/+3"What the person sees on the top is more important than the source code." Be careful. That's misleading at best. What a person DOES is more important than anything else. If your site looks breathtaking but doesn't convert traffic to sales or some other important purpose to your ends, then you're just standing around with your thumb up your ass. By the way, 100% platform compatibility is a myth. Web sites are written in markup language which does enjoy uniform standards compliance from one browser maker to another. Get your website running clean through the venerated WC3 validator, and you'll STILL probably find platforms on which the SAME "valid" markup blows chunks.
Big picture, people, big picture. Zoom out. - bpapa, on 04/27/2008, -1/+6If you're really getting paid to write HTML in 2008 with this kind of attitude I'm glad you're not working for me. What the person sees on the top is more important than the source code? Yeah, forget about things like accessibility or SEO, that stuff CLEARLY isn't as important as aesthetics.
- solid12345, on 04/27/2008, -0/+1If all website design was done completely by coder snobs we would all have a generic internet where everything looked like digg, white CSS boxes, blue backgrounds, and walls of text.
A good website should stand apart from the rest and catch your eye visually. Personally I am finding more and more everyday flash is a much better alternative to HTML because you have infinite possibilities in graphics, layout, and font choices.
- loudintl, on 04/27/2008, -4/+4WHAT
- element4l, on 04/27/2008, -4/+43As a designer myself (no, I don't just claim I am), I can honestly say this is not a bad tutorial if you're looking to get into this kind of stuff. It teaches some of the fundamentals on colour matching and typography, and also to keep things simple.
But I really do hate fixed backgrounds. Those have to go. - CrimsonBlur, on 04/27/2008, -9/+15This is actually a pretty good tutorial... except I hate black backgrounds with a passion. If there is going to be blocks of readable text anywhere on a Website, do not put a black background behind it! I can't believe designers, good designers, are still doing this. Other than that I like the design.
Sure there are better ways to do things as trashcat points out above, but it's just a basic beginner's tutorial so who cares?- sloonark, on 04/27/2008, -0/+23There are several studies suggesting that black backgrounds are not as bad as we've been led to believe. In fact, they may be preferable.
Personally, I find staring at white backgrounds a little hard on my eyes. Who was it who said it was like staring at a light bulb?- tiberone, on 04/27/2008, -0/+16Maddox.
- CrimsonBlur, on 04/27/2008, -4/+2That's an interesting thing to say, considering that every time I try to read anything more than a few sentences with white text on a black background I get a headache and can't finish. That never happens to me with black text on a white background. I've heard plenty of people say the same thing.
I'm not aware of the studies you're talking about, but my personal experience strongly contradicts that black backgrounds are preferable. It can look pretty from a design perspective, but as far as readability is concerned it's crap. I've found any screen is hard to look at when the settings are too bright, and white would make it worse. Once I turn the brightness to an acceptable level though that isn't a problem.- thejynxed, on 04/27/2008, -0/+2Actually, for the reduction of eye strain, dark colors are better. I believe dark green and dark magenta were rated the least stressful on eyes, and white/yellow/bright cyan/orange and bright magenta were rated the most stressful. Surprisingly enough, bright red isn't that stressful on your eyes, at least if using bolded fonts or fonts above 9 point. Small fonts sizes are right out.
As for readability concerns - I prefer the white backgrounds and black text or black backgrounds with light gray text when it comes to sites like Google News, etc. I use the Stylish extension for Firefox to modify websites that use solid white backgrounds for 90% of their site to use a black background with light gray text. For sites that use silly combinations like white/blue or black/yellow, I mod them to black/light gray or light grey/dark blue. It really depends on the content of the site. If it is image heavy, I prefer a black background as well.
Also, for reducing eyestrain, it is important to take into account contrast levels as well as brightness levels. Optimally, contrast and brightness should be an even match numerically on a monitor setting.
Few designers take into account ambient light sources, glare, etc when designing sites, and too few end-users setup their workspaces ergonomically correctly.
- thejynxed, on 04/27/2008, -0/+2Actually, for the reduction of eye strain, dark colors are better. I believe dark green and dark magenta were rated the least stressful on eyes, and white/yellow/bright cyan/orange and bright magenta were rated the most stressful. Surprisingly enough, bright red isn't that stressful on your eyes, at least if using bolded fonts or fonts above 9 point. Small fonts sizes are right out.
- takua108, on 04/27/2008, -0/+1Maybe it's just because these designers are the guys who grew up using UNIX or other command-line interfaces. Personally I don't find it hard to read at all.
- sloonark, on 04/27/2008, -0/+23There are several studies suggesting that black backgrounds are not as bad as we've been led to believe. In fact, they may be preferable.
- bamafun, on 04/27/2008, -2/+6great beginners guide - easy to follow and understand =)
- InuX, on 04/27/2008, -7/+2Dugg. I found this to be really cool.
- Dested, on 04/27/2008, -5/+6Just out of curiosity, what do you web designers out there charge for a handmade design like this? Where I work we have this tool (I think his name is greg) that builds our designs in frontpage with a fully working table layout. I am wondering how much it would cost to do it right.
- limezor2, on 04/27/2008, -1/+22Frontpage is so '99.
- hpowers, on 04/27/2008, -2/+5you can probably get it done for a couple hundred at elance
- p0tent1al, on 04/27/2008, -1/+7Frontpage = no
Table Layout = double no
As for cost... depends on how good you want it to look, how many pages you need, and exactly what you are going to need the design for, I would estimate between 100-300 dollars.- TBBucs, on 04/27/2008, -0/+1I don't understand why web developers charge by the page. In most cases, every page is essentially the same with different content. There could be some added back-end stuff that would up the price, but for a static content page, there's nothing more to it than copying and pasting the main page and changing the content.
- solid12345, on 04/27/2008, -0/+3If I charged 100-300 dollars for a webpage I would be out of business. That would mean I would have to be making 5-10 websites a week to stay in business and there just aren't enough clients out there to get you that much work (at least where I live in the midwest). You HAVE to charge more.
I am not a web designer by trade though, I am a graphic designer and I groan everytime a client asks me to do a webpage because I am not a coder, but whatever most clients I work with are small companies who do not need grand w3c compliant CSS pages with nifty tricks applied to them.
- estvir, on 04/27/2008, -1/+17Frontpage? You should fire him, now.
- solid12345, on 04/27/2008, -2/+1Likewise if a website programmer doesn't use photoshop or some graphic editing program fire him too because all he will create out of notepad is bland garbage.
- tconley79, on 04/27/2008, -2/+7Great guide for developing a concept...however actually making this into a usable website might take some work.
- TheUserFactor, on 04/27/2008, -1/+3A good quick and dirty guide to creating a very specific, even idiosyncratic web theme. Executing it as CSS or HTML and implementing it as a website - the most time-consuming part - is another story. By the way, terms like "gorgeous" and "clever" are subjective. Beauty is in the eye of the beholder.
- xerigen, on 04/27/2008, -9/+3I've never had a problem with the actual web design. I can make some really cool looking web designs. But then I chop it up randomly, image map and use absolutely positioning when I'm lazy. I usually don't pass WC3 standards in any way, shape, or form and typically have loading times about 5x what they should be if I had just taken the time to code the design well to begin with.
- xerigen, on 04/27/2008, -0/+1oops, W3C
- Nerina85, on 04/27/2008, -3/+0Very time consuming, but worth while for the people that are into this kind of thing. I know I wouldn't be able to let go of it once I start it.. so I don't think it's a good idea for me to start a task such as this one. Maybe when I'm extremely bored and willing to sit at my computer for hours creating things like this. Love it though.. I just wouldn't know how to let go :)
- bobjohnsonmilw, on 04/27/2008, -9/+2As a professional lamp develper mostly working on frameworks and rapid development, I find the use of photoshop to be a fundamental waste of effort. Creating html and proper code on all levels takes way less effort at this point. I think the idea of not building your html as your prototype is absolutely a waste of time. Adding the task of translating photoshop files into actual html and images is way more overhead than is necessary, and just adds overhead to the project.
- mossblaser, on 04/27/2008, -1/+1It really depends on your point of view. There are two distinct jobs in web site creation that are rarely done well by the same person. The design part takes skills in design, colour and all the visually creative stuff. Then a developer writes the code that holds it all together, this again requires a lot of creativity and tallent to create great code (in general, coding html/css is less of a science, more of an art, server side stuff is different though, there is a lot more "science" involved there).
On the other hand, the chap above is one of a rare breed of coders who can throw together design ideas in HTML very quickly, something that is a dieing tallent, but for some people it helps - they can focus on thier HTML skills rather than learning a graphics package and HTML. It also makes it a lot easier to see what works well as code, not just graphics. - krinthekuz, on 09/16/2008, -0/+1as another software engineer, i have to agree with bob, and this kind of stuff makes me sick. having even a 50kb background is stupid (ungodly waste of bandwidth), and most of these sites use 200kb+ backgrounds. it's even worse, because most only use 1280px wide backgrounds, or less, and god forbid anyone have a resolution over 1280px wide (especially with all these wide screens). working out CSS and photoshop mockups is a ridiculous waste of time. there's model that binds your scripting to your database, and the controller for interacting with the user, and then the design on top of that is just fluff. regardless of how good you think mac stuff looks, there's a reason why they consistently have less than 5% market share. for the vast majority of people, utility > prettiness. and as much as i like how dark backgrounds are better for people who use their computer for 5+ hrs/day, the vast majority of users dont. so you default to a light background and let your power users change it in preferences, because they're typically competent enough to change it in preferences.
i've been where you are now... bashing the design zealots for ridiculously inefficient design, and you just get buried. don't worry, the software engineering industry agrees with you, because these self proclaimed design masters are actually just an overly vocal minority who happen to be a majority on digg.
- mossblaser, on 04/27/2008, -1/+1It really depends on your point of view. There are two distinct jobs in web site creation that are rarely done well by the same person. The design part takes skills in design, colour and all the visually creative stuff. Then a developer writes the code that holds it all together, this again requires a lot of creativity and tallent to create great code (in general, coding html/css is less of a science, more of an art, server side stuff is different though, there is a lot more "science" involved there).
- DrJohnYalcin, on 04/27/2008, -8/+0Great tutorial! Now all I need is a Mac....
- lacreme, on 04/27/2008, -4/+4This is a bit too much form over function for me...I prefer something like facebook or digg's design (at least outside of the comments :P)
- SSUK, on 04/27/2008, -0/+7Yeah, ***** creativity. Let's just do what everyone else is doing.
Get some backbone and be creative.- tomi, on 04/27/2008, -1/+4I think he means the idea of simple minimalistic design, not stealing elements of Facebook and Digg's designs. In which case, I agree with him. Minimalism design is key for maximum content. Too much design and it'll take away from your content, and in most cases, you don't want that.
- lacreme, on 04/27/2008, -0/+1yes we should be creative, but not with huge background images and static content.
- Wakuko, on 04/27/2008, -1/+1You are a programmer
You work at microsoft
You definitely don't work at apple- krinthekuz, on 09/16/2008, -0/+1dare to be employed?
- SSUK, on 04/27/2008, -0/+7Yeah, ***** creativity. Let's just do what everyone else is doing.
- dougle, on 04/27/2008, -0/+1Step one is important, gravity is needed to glue the header and site frame to the page's content, gradients are good and make most layouts acceptable.
- guitarcrazy, on 04/27/2008, -0/+0Awesome tutorial...Love the Blue Energy look!
- jasondefaoite, on 04/27/2008, -0/+1The positioning blows on the final site running at 1920x1200. Basically the main site is 1024 moved to the left, with another ~900 pixels of space to the right. Should be centered.
- chillin411, on 04/27/2008, -0/+1That seems to be the new "look". Vodafone and Adobe (first two I can think of, there are more) both have websites that works the same way, 1000 wide, left aligned.
I'm not really a fan of it either -- on large screens, you have to do something visually interesting with that right side, or it's just awkward.
- chillin411, on 04/27/2008, -0/+1That seems to be the new "look". Vodafone and Adobe (first two I can think of, there are more) both have websites that works the same way, 1000 wide, left aligned.
- palmerized, on 04/27/2008, -1/+7I think people are forgetting the purpose of the tutorial. It's not "how to create an accessible, code-perfect website from scratch". This site is all about creating gorgeous eye-candy in Photoshop. Taking that in to consideration, I think it looks great. I'm a web creative director, and not *all* websites need to be fully scalable, perfect CSS, etc. Sometimes you need to create a site that shows a little more visual impact. However, there's nothing in that design that couldn't really be done via CSS...
- solid12345, on 04/27/2008, -0/+1Finally a web guy who nows that many clients don't give a crap if their website does not conform to the screen of a PDA or mobile device. It is all about the computers people!
- nhayes, on 04/27/2008, -1/+9awesome!, I've always wanted to know how to make a web site that looked totally sweet, yet totally useless
- incd, on 04/27/2008, -0/+1It is easy to replicate something that is already made and being used, but making something unique is behind multiple iterations.
- pk7677, on 04/27/2008, -1/+4Bookmarked.
- ventralnet, on 04/27/2008, -0/+6thats a lot of absolute positioning
- ekboost, on 04/27/2008, -2/+1While the layout is alright in the technical sense, I absolutely hate it when people call this web design when no mention of concept or purpose was introduced at all. Blatantly using something for no reason besides it "looks cool" is absolutely retarded and the reason why you see 8 billion copycat type of sites out there today. Teach some fundamentals or throw a link or two in there please.
- bluestranger, on 04/27/2008, -1/+0Fully agree. This is a step 1,2,3 with no question on why or concept - in fact there is no concept except to make as generic a site as possible..
- Zylog, on 04/27/2008, -1/+1This is a great tutorial for even a beginner in web dev. It is easy to do and is appealing
- PooptartSkall, on 04/27/2008, -1/+0"You can easily use the technique to create your own unique designs."
Yeah? Who's actually going to make their own design from it/ I doubt many.. most will probly just change the header.
LOOK AT MY NEW SITE GUYS! MADE IT MYSELF! - SitPoMk, on 04/27/2008, -3/+2dude wtf, how does this make front page?
- tommyvercetti, on 04/27/2008, -0/+3Where do I find more stuff like this? I have been searching for a book that guides a person through web design (not an intro to HTML or CSS).
- polko, on 04/27/2008, -0/+0as a beginner, i don't wanna get deep inside.. this tutorial is the best match for people like me. thank you a lot!!
- russellnation, on 04/27/2008, -1/+3If you use photoshop to write your website code YOU"RE DOING IT WRONG.
- Avychan, on 04/28/2008, -0/+1This is pretty nice, though I'm not sure how useful it is... I mean, the entire layout is a giant picture. That's hardly good for loading times (btw, I'm referring to the continuation at NETTUTS at this point). Plus since the main content area is a pre-defined area of the background, you have to be extremely careful with your content. If a client wants more verbage, you're S.O.L.
They certainly got a lot of things right, here. A beautiful image matched correctly with simple, elegant typography is a great way to start a design. But, overall, I think this tutorial is more for visual effects rather than practicality. The way the layout is created and how the site is coded is just too limiting. - jessehadden, on 04/28/2008, -1/+1Interesting approach, but am I the only one who didn't like the end result?
- theadvinci, on 07/01/2008, -0/+1I didn't like the end result either.
- socialwebdesign, on 07/23/2008, -0/+0ummm I didn't like the end result
- oceandragon, on 09/19/2008, -0/+0Design to xHTML slicing service http://www.9xhtml.com
The Digg Toolbar for Firefox lets you Digg, submit content, and keep track of Digg even when you're not on the Digg site. Download the official