|
By Samuel Ryan
Website Building
Comments
|
An excellent website takes a savvy blend of both great design and great code. Because of this, you often find designers having to figure out code and developers trying their hand at design. Speaking as a person who spent his university years studying among other developers, I can safely say that programmers are not designers. Thankfully, we were graded back then for having reusable code and proper OO methodology -- never for our aesthetics. But nowadays, one of the greatest assets a developer can have is a keen understanding of design.

Now I understand that a programmer may never need to know anything about design (or for that matter, a designer doesn't ever need to program). But the truth is, every programmer has personal projects, frugal clients, or management roles that require design. Furthermore, I can say that often, a freelancer's greatest asset in pitching potential clients is their keen understanding of the entire website building process. So coming from someone who studied as a developer but now also does design (or at least attempts to), here are 8 common mistakes I've either heard as a developer.
"I Know What Looks Good (and I Have Photoshop)"
It's one thing to be a bad designer. It's a far worse matter to be a bad designer and think that you're good. Every good designer has a well-calibrated "design compass" that comes from constantly looking at good designs. You need to spend time looking at great designs from sites like Creattica or the Behance Network. You might also want to pick up the occasional design magazine. Just as good programmers enjoy looking at (and usually critiquing) other people's code, a good designer is always scanning other people's work, whether it be a website or billboard or menu. Without a good "design compass," no amount of Photoshop filters will save you.
"Just Use Blue and White"
Most programmers scoff at the idea that a designer might spend several hours choosing exact colors for a website. However, colors will always matter more than you think and you can't change them after a site is being built (at least, not without great effort). Like most things, looking at the color schemes of good designers will help, and the best place to look for color scheme ideas is COLOURlovers.
"I'll Just Center Everything"
For most, it seems almost natural to center align titles, taglines, and parts of copy. But usually, centered text on a website looks amateurish, while left-aligning is a much safer and usually better looking option. Furthermore, be mathematically exact about your website sections, taking advantage of rulers and gridlines in Photoshop. This doesn't mean your design should look grid-like, but eyes can and will notice when sections are supposed to line up, but do not (especially with text). Every pixel matters.
"Use the Free Font...It Looks Fine to Me"
There was a time long ago when (a) all serif fonts looked the same and (b) no font was worth paying for. I have learned much on typography since, and continue to learn more about the complex world of web typography. You can have a great website with only a little color if you have great type (and such is the basis for any great design anyways). Again, becoming better at typography requires reading and training your eye by looking at good sites. Please, never categorize all fonts under either "fun" or "boring."
"We Can Fit More Information in That Space"
Having worked on both programming and design teams, a common disagreement between the two is "utility of space." Programmers want to get as much information above the fold as possible. Designers argue that the eye can't take that much and would rather just have a logo and tagline above the fold. Try finding a happy median between the two, knowing that (a) busy websites can be ineffective, (b) "whitespace" is sometimes a fallback for lazy designers, and (c) the so-called "empty" portions of a site are sometimes necessary to set off the other elements.
"I'm Not Paying for a Picture"
Bad imagery/photography can ruin a reasonable site, while great imagery can make a simple design look really good. And with the resources on the web, there should be no excuse for using poor imagery. For non-commercial sites, check out stock.xchng or Flickr -- just make sure that the license behind the photo allows its use. For commercial work, there are multiple microstock websites out there like iStockPhoto or Veer.
"I Don't Need to Ask for Opinions"
More often than not, you will be your design's biggest fan (through your rose-colored glasses). So you need to ask designers you know for an honest critique. Unfortunately, most people I know who've asked me what I think of their design just wanted approval, not critique. Let your ego go and put on your learning cap. There's a reason that these people are designers (and get paid for it) while you are not. Then after you get their feedback, respect them, trust them, and implement some changes.
"No Need to Get Too Detailed"
Just like you can have mediocre code that needs improvement (but still "works"), you can have a design that is passable, but far from great. It's easy to look at great designs and think, "That doesn't look like much." But in reality, a great design takes a good deal of time (especially for new designers). But with these great designs, you only get to see the end product, and not the amount of editing and revisions that the designer went through. Furthermore, you'd be surprised how a detail as simple as a stroke line makes a world of difference. Don't ever consider a design "done" the first time you put the elements together.
All in all, great design (like great code) takes time, patience, and skill -- and thus, should be duly respected. As a programmer or content writer, you may never need to design a website, but it doesn't hurt to be better.



*Obviously there are exceptions.


But many mistakes should be avoidable and learning should never stop. So although I wouldn't say that developers need to be designers (or vice versa), I would say that developing a sharper aesthetic sense can really make a developer stand out and open up more career paths and opportunities...



I'm actually looking for someone who can handle PHP/MySQL, and E-commerce stuff - I barely have time to handle my freelance work and improve my design skills much less learn to code dynamic web content. Anyone interested in the details, let me know...
Great site Samuel, I read it religiously.




What strikes me as more interesting is the casting aspersion on things like blue underlined links. They may not fit your palette, but they're a big win when it comes to usability. And many gorgeously-designed sites are turkeys in that department.

So, yeah, helpful article...





One thing that jumped out to me is the line that encourages us to look at good websites to improve our grasp of typography.
I feel that it's crucial to go offline for type inspiration. Type on the web is often poorly represented or only used at l% of its full potential.


Great job, keep up the good work.



I'm pretty new to Web design & development (which probably explains the following), but I always find it a little strange when people create a clean divide between programmers and designers.
These days, I don't think it's right to have people who just do Photoshop mock-ups; how about the interactions, Ajax, and overall flow of a site? And, at what point does the person who designs a site in Photoshop get to interact with it through hyperlinks - is it before, or after, the design has been set in stone?
Nowadays, Web sites and applications need frontend and backend developers, with the frontend guy handling the design implementation. So, the problem seems to be that many people simply don't see two disciplines in web development; they just see 'programmers'. Some of these programmers should handle design, others should handle logic. Or at least that's my newbie view on it all!


Only recently have we begun to figure out defined roles, and nowadays, you usually have categories like front-end dev, back-end dev, internet marketing, SEO, etc. Although there's still a lot of crossover and people trying to "do it all," I would hope that the public at large has a better understanding than "that guys makes websites."

Spend an hour a day for a month simply drawing & subdividing rectangles with paper and pencil, the result will be a good designer.
The same could be said for interaction designers. Using pencil & paper, show 100 ways to navigate between 10 pages of content.
I completely agree with Neil's comment above. Graphic designers need to explore behavioral ideas as well as visual ones. While there are other ways to explore high-level behaviors, being able to implement working mini-prototypes is the only way to truly understand the physicality of working with an interactive system. That is - design for the input device before designing for the output device.
Cool article!



Database programmer / backend Programmer - The person who makes sure the database and content management system actually works.
Frontend Web-Designer - The person who decides layout and design of each page using html
Content / Copy Editor - The person who writes the words for the Website.
Graphics designer - Chooses imagery and colours for the site.
Online marketer - Somebody who promotes the site, creates newsletters and generates income.
In large corporate Websites there will be these jobs and more, but for most companies there will be a Webmaster who does all this and make the coffee :-)
James
P.S. I deliberately chose blue and white on my site, because blue is associated with calmness and teachers need that when they are doing last minute planning for a lesson...

You got another subscriber.

So having a few design chops is not to say that a developer ever needs to be a great designer, but more about being the best "web guy" you can be for the role you're forced to work in...


For alternative free and not so polished stock photos can i suggest www.imageafter.com ?





Furthermore, aside from the graphical and technical aspects of a website you should also really have someone who pays attention to the interaction and usability of a website. It's all too often that you see a website that is fast and technically ok, looks great but isn't usable.


Whitespace is great, as it's potential advertising space, should you want to do that.
Unfortunately, the customer 9 times out of 10 only want it to 'look nice', and don't understand elements, padding, margins etc...


So true that a design is never finished, the end product in my experience is usually very different to what I started with and im still trying to be the programmer and designer, learning this stuff never stops.


Jared Lorz



What? Are you insane, looking at other people's code drives you insane.
As for the rest - you are just wrong - spoken like a true designer stuck in a world producing crap HTML covered in tables.
Get with the times - I especially liked your "it's hard to change colours" comment- not if you know HOW to code the website in the first place.
This is why we have tag-soup on the internet, designers playing coders.

And oh yeah, I'm fine with table usage at times - hell, some of the top sites in the world including Google use tables for their layout stuff - I 'm sure Google doesn't care one bit about folks thinking they're "bad coders" :-)

I experienced the same revelation - at first, you think that none of it matters - but there's so much design that can happen on the text level it's ridiculous.
This is a great list for developers that I think allows them to take the next step toward design thinking... great job.

So I'm okay with the criticism and I don't lose sleep over it :)

You should stick to fonts which people will likely have installed and specify multiple families in your CSS. E.g.
font-family:helvetica arial sans-serif
If you specify some fancy font in your CSS then very few, if any, of your visitors will have that font and hence will they will see the text in what ever font their browser uses by default.
You can of course create images of text and use those in place of actual text or use that Flash thing that creates a flash object containing text in the font you specify. But you usually shouldn't, or if you do at least make sure there is actual text in your page as well for accessibility.

Ummm, all he said was that fonts are different and you should be willing to buy fonts when necessary. He made no reference to actual content type or what to use for CSS. Sounds like you have a chip on your shoulder...




> it's not a huge free stock photo library as this article implies.
Well.. consider this:
http://www.flickr.com/creativecommons
* 6,684,654 CC-BY photos
* 4,697,114 CC-BY-SA photos
* 2,244,277 CC-ND photos
Over 10 million photos that are usable on a commercial website, if you give proper credit and comply to the licensing terms. It might not all be good for your website (i doubt the many baby and kitten pictures will be of much use to the typical website), but there are sure to be some gems in there.
If you have a non-commercial website you have an even greater choice:
* 20,224,526 CC-BY-NC-ND photos
* 8,291,633 CC-BY-NC photos
* 16,724,805 CC-BY-NC-SA photos
Everything together, that's over 50 million photos. Seems like a huge free stock library :)
I do agree with you that many people aren't educated enough about what's free and what's not.

With regards to text, I use a workaround called sifr.
http://www.mikeindustries.com/sifr
it lets you display fonts the end user may not have by defining the font in a small swf file, while still keeping your text searchable. If the user dosent have flash, they simply see a font dictated by the css.

- "I Know What Looks Good (and I Have Photoshop)"
i agree assumptions are a bad idea
- "Just Use Blue and White Again"
although i do agree that there are lots of colors in the spectrum and we all to often choose boring schemes, the problem is when a designer decides to use too many shades of grey There's just no difference on a website between #0f0f0f and #161515.
- "I'll Just Center Everything"
that's just dumb.
- "Use the Free Font...It Looks Fine to Me"
fonts can really help a website out but if you're designing a website you should know that certain areas of a website will change and will change often. For this reason you cannot make everything in some obscure font because it's just not possible to write 20 pages of copy in that font then create an image and swap them out with the current copy. use the special fonts on things that don't change like logos and headers, and use the crappy but available web safe fonts for copy blocks, and nav text because another unforseen force is the client who decides that the link titles need to change daily.
- "We Can Fit More Information in That Space"
I agree here, you really can't afford to compromise a good design with junk stuffing. I've actually had the opposite issue where designers try to hard to make the fold and don't make the site able to grow in height by using a background image that doesn't repeat or stretch. There are way too many sites that look like the pock marked roads in the northeast. just keep sticking garbage in every available inch and you're sure to ruin a site.
- "I Don't Need to Ask for Opinions"
If you're this stupid you deserve to fail.
- "I'm Not Paying for a Picture"
being broke is no excuse. borrow a camera, "rent" one from best buy, anything but don't make any more text only sites, pictures make us happy.
- "No Need to Get Too Detailed"
It's all in the details





Good article though.



- I Know What Looks Good. Designers know what looks good, but they often don't know what works well. In the example sites I saw some really slick design but had some unfortunate usability issues.
- Use the Free Font...It Looks Fine to Me. I had to say to designers so many times "Yeah, that font looks really cool, but we can't use it on the web because users don't have it installed on their PC. And if we make everything a graphic with that font, it really hinders the usability and accessibility of the site."
- I Don't Need to Ask for Opinions. I agree that everyone should solicit opinions. But if you focus too much on the opinion of other designers (and thus try to impress peers instead of users), you end up with stuff that is clever rather than good.













I still see a lot of "designers" making websites that look like the ones I did back in the nineties.


Let me ask you guys something though...what do you do when clients INSIST on breaking some of those rules?
I have a client that doesn't want anything ever below the fold. Everything has to be crammed into a space of 600 pixels tall but keeps cramming more content in that space.
It's tough because on one hand the design looks like garbage now and I don't want to work on it...but on the other hand the guy pays really well so I can't tell him "no".


Regarding fonts: Stick with the basics. As someone pointed out earlier - helvetica, arial, sans-serif; or Times New Roman, serif; - if you go with something unusual, your viewer may not have it installed. Have you checked to see what it looks like when the font falls through because it's not installed?
As far as color goes - how is it difficult to change a color scheme? Just change the colors in the stylesheet! I have completely changed the color scheme of a site in 2 minutes with a couple of global replaces on the stylesheet. Unless you're using graphics as a major component of the color scheme, it's not that difficult.

@Tony - On the fonts, I should have made a better distinction between graphic/logo fonts and content type fonts -- I was referring more to the former and agree that standards for the latter is a must. Same thing for colors -- I wasn't referring to text and links (which as noted are easy to change in CSS), but more towards your "entire" solution which can include a host of graphics, depending on how much you skin your site. For a site like this, moving from earthy tones to cooler ones would require several graphical changes...




Devin, If the client insists then there is nothing else you can do. Some people want it their way.



Over the past couple of years, i've been doing almost exclusively print work, where my already profound appreciation of type increased tenfold. Recently i've begun taking on web projects again, only to be reminded how disappointing web typography is. So many websites just slap type onto pages with little—if any—regard for it's comparability to print. Granted, HTML is annoyingly clunky (even with CSS), especially when one is used to the precision and flexibility of, say, InDesign. However, i've found that although many designers go all flaccid at the prospect of hand-coding, the extensive understanding it intrinsically provides allows one to make use of myriad workarounds in order to achieve convincing approximations of print-quality type—essentially, it's using the language to its full potential, i.e. while most designers settle with an image of, say, the letter 'A' with the CSS property 'float:left;' in place of true drop-caps, there are several ways using just text and a little CSS to achieve the same effect. It looks (and prints) nicer, and best of all, it's available to a PHP/SQL backend.
As has been discussed, it seems there is a problem concerning the rift between designers and developers, and from what i gather, they apparently aren't speaking to one another. As intuitive as either party may be, it's important for both to understand the dynamics of a site—both across pages, as well as the flow of content on individual pages. More than ever, websites are dynamic documents in several respects. One is obviously that their content is constantly changing, but another is that, since the introduction of user-resizable text (i.e. 'View>Make Text Bigger' aka 'the bane of my existence'), it's important to understand how text size will stretch and strain your carefully wrought pages to the point where things start to break, or at the very least resemble a mutant form of typographical 'modern art.' The important thing is that your programmer understands how things flow, or where they don't, and the limitations requisite in both respects...

As a designer I'm fortunate enough to work with a developer who knows he's not a designer (sometimes to my chagrin though: "Do you really need me to explicitly tell you every last detail of the design?").
Now you need to find a designer who can write " 8 Web Development Mistakes That Designers Make" because I know some of the code I piecemeal together when I'm coding on my own is pretty ugly.

GFD

It's enough work to come up with creative design. Asking that person to also be a technician is, while often necessary, seldom ideal.

I guess the under mentioned sites are fullest in their development:
http://www.indianhandicrafts.co.in
http://www.e2webhosts.com
http://www.enablingbiz.com

It might be a mistake that a blog entry without date and time at which it is posted :)

I wrote a supporting article on some points you mentioned here, from a 100% designer that used to program. In truth I will never do more than design, the same way many programmers couldn't see themselves doing design.
And I find very rare occasions where one person can do both in a business environment - aka deadlines. Once I can get a client to commit to a design it can be sent to the programmer and replication is much faster than "design and program as one huge step" that happens when one person takes both jobs.
I got my programmer that does sites for me and a team like that is a great environment that can speed up sites. Once I have the design (graphics/HTML/CSS/includes/forwards/flow-structure/hosting account) all he has to do is duplicate it on the programming. Simple, right? Well, not really simple but a lot more streamlined, I believe. :)
In my post I linked to yours. I am here hoping this is the most correct way at doing a post back without being "spammy".
http://www.edgarciadesign.com/2008/02/03/designers-are-a-picky-bunch/

I've wrote a post with some thoughts on this topic some time ago...
http://www.vitalygorn.com/blog/post/2007/11/Is-it-time-for-software-developers-to-master-in-graphic-design.aspx

1/30/2008 6:59:35 AM
same goes for you designers - give programmers some slack when they say that something you designed would be way too complicated to implement just cause you think it looks cool. ;)
AMEN!




You might enjoy this 10 Commandments of Web Design also:
http://www.coolhomepages.com/cda/10commandments/

Thanks!



its also so easy to make great websites from the thousands of excellent templates made by real designers out there today, i feel for anyone new just starting out in web design now. your list is a pretty good list of what not to do from what I can see ;)

visit them at www.alternativebusinesssolutions.biz

In light of that, here's a list of mistakes for the consumer side of things:
http://webdesign.verangomedia.com/the-10-great-fallacies-of-web-design/
The 10 Great Fallacies of Web Design - as imagined by the consumer





great, that your post. It is very helpful for the developers to avoid that mistake
and also helpful for great design .great
article!


Nice Article, Fave!


Take a glimpse at our award winning web designs at http://www.miraclestudios.in

I am absolutely agree with, but different designers have different "eye" for web design and different people have different reactions too. So the limits of beautifull web design are some kind fuzzy.




This is definitely a lesson to learn.
Thanks.






[email protected]



contact me for low cost logo design..





Thanks!



















