I apologize for the OT post but this list is full of people that I suspect might be able to help with this. I am a programmer, not a designer. I can read and make mods to HTML markup no problem but when it comes to doing real layout, I just don''t have the skills. I''d like to do some training so that I can do better prototypes of Web apps without a designer... My goal isn''t to replace a good designer for a finished product, just to bone up on some skills. Anyone recommend either good books or good training courses? I''d probably prefer the latter since it seems to force me to actually learn. :-) I appreciate any feedback and again apologize for the OT nature of this post.
-----BEGIN PGP SIGNED MESSAGE----- Hash: SHA1 I''d recommmend CSS: The definitive guide, from o''reilly. It''s not necessarily a web design training guide, but CSS is core to any good website. I''m doing the exact same as you and it''s helped me a lot. Regs, Derek Hunter Hillegas wrote: | I apologize for the OT post but this list is full of people that I suspect | might be able to help with this. | | I am a programmer, not a designer. I can read and make mods to HTML markup | no problem but when it comes to doing real layout, I just don''t have the | skills. | | I''d like to do some training so that I can do better prototypes of Web apps | without a designer... My goal isn''t to replace a good designer for a | finished product, just to bone up on some skills. | | Anyone recommend either good books or good training courses? I''d probably | prefer the latter since it seems to force me to actually learn. :-) | | I appreciate any feedback and again apologize for the OT nature of this | post. | | | _______________________________________________ | Rails mailing list | Rails-1W37MKcQCpIf0INCOvqR/iCwEArCW2h5@public.gmane.org | http://lists.rubyonrails.org/mailman/listinfo/rails | -----BEGIN PGP SIGNATURE----- Version: GnuPG v1.2.4 (MingW32) iD8DBQFDBgzswwHFeC88e2IRAm0ZAJ49CWM6TKxU/0VCsmiZW/Bxns4YOACdHcZZ 1sv1Oh9rTFIH70IlEeuZsqQ=0wYs -----END PGP SIGNATURE-----
"The non-designer''s design book" by Robin Williams is an excellent resource. It''s not strictly about web design, but it introduces you to a lot of the basic principles of good visual design, and it''s nice and short with lots of examples. http://www.amazon.com/exec/obidos/tg/detail/-/0321193857/qid=1124470465/sr=1-2/ref=sr_1_2/102-3590169-9730529?v=glance&s=books Tyler
On Aug 19, 2005, at 12:43 PM, Hunter Hillegas wrote:> Anyone recommend either good books or good training courses? I''d > probably > prefer the latter since it seems to force me to actually learn. :-)Have you considered taking a graphic design course at a local college? If you''re a programmer, the mechanics of CSS, table layout, or however you''re going to put a design together should be relatively easy. What you may need to develop is an eye for design. While there are specific guidelines and rules of thumb appropriate for working in any medium, a general introduction to design would probably be helpful. And this may seem obvious, but it helps to look at a lot of sites, and try to understand what makes them work well -- or poorly. Individual style is a part of visual design to about the same extent it is a part of programming: While there is a lot of latitude for doing things differently, some approaches tend to be better than others. Emulating -- known as "ripping off" among professionals -- designs that you admire also works. And try to be a little slutty: Don''t get attached to a single way of doing things. Be open to finding a better way. A book alone isn''t going to give you a good eye for design. Producing lots of stuff and learning from your mistakes will. That said, I keep the books of work by designers I admire on my shelf so I can flip through it when I''m out of ideas. And don''t limit yourself to web sites. Look for good -- and bad -- design everywhere. Regards, Ed -- Transmogrify, LLC * <http://xmog.com/>
On Fri, 2005-08-19 at 09:43 -0700, Hunter Hillegas wrote:> I am a programmer, not a designer. I can read and make mods to HTML markup > no problem but when it comes to doing real layout, I just don''t have the > skills. >Hunter, Great question! Learning HTML is not rocket science-- but making a ''good'' Web page/site is an art. As with any art, you have to start with design principles. For that I''d suggest you have a look at: http://www.webstyleguide.com/ If you are interested in enrolling on an online class, I''ve taken 1 or 2 classes from The International Webmaster''s Association/HTML Writer''s Guild: http://hwg.org/ and have been pleased.
> And this may seem obvious, but it helps to look at a lot of sites, > and try to understand what makes them work well -- or poorly. > Individual style is a part of visual design to about the same extent > it is a part of programming: While there is a lot of latitude for > doing things differently, some approaches tend to be better than others.I''m in the exact same position (a programmer trying to learn design) and here''s some sites that I''ve found useful and/or interesting: http://www.webpagesthatsuck.com/ http://www.oswd.org/ http://www.csszengarden.com/ http://www.lynda.com/ http://www.morguefile.com/ HTH, Melissa
Here is a great article regarding good training resources for CSS. I use many of these resources myself. http://www.sitepronews.com/archives/2005/july/20.html The wonderful thing about the web is that you can download the page source, css, and js from almost any webpage/layout out there (as I''m sure you are aware). The best way to learn is to hack, hack, hack away! -- ~~~~~~~~~~~~~~~~~~~ D''Andrew Thompson http://dathompson.blogspot.com
I recommend stealing other peoples good ideas for a while until you start having good ideas of your own. That''s how I got my feet wet. I think I may have reached the wall though. http://www.csszengarden.com is a great resource. I come across a few corporate websites every week that have a beautiful design, and I add them to a text filed called "good-designs". -Jeff ----- Original Message ----- From: "Hunter Hillegas" <lists-HAWAbpnI61OZ1JSuHaJ1sQC/G2K4zDHf@public.gmane.org> To: "Rails" <rails-1W37MKcQCpIf0INCOvqR/iCwEArCW2h5@public.gmane.org> Sent: Friday, August 19, 2005 10:43 AM Subject: [Rails] [OT] Web Design Training for Progammers>I apologize for the OT post but this list is full of people that I suspect > might be able to help with this. > > I am a programmer, not a designer. I can read and make mods to HTML markup > no problem but when it comes to doing real layout, I just don''t have the > skills. > > I''d like to do some training so that I can do better prototypes of Web > apps > without a designer... My goal isn''t to replace a good designer for a > finished product, just to bone up on some skills. > > Anyone recommend either good books or good training courses? I''d probably > prefer the latter since it seems to force me to actually learn. :-) > > I appreciate any feedback and again apologize for the OT nature of this > post. > > > _______________________________________________ > Rails mailing list > Rails-1W37MKcQCpIf0INCOvqR/iCwEArCW2h5@public.gmane.org > http://lists.rubyonrails.org/mailman/listinfo/rails
On Aug 19, 2005, at 1:55 PM, Jeffrey Moss wrote:> I recommend stealing other peoples good ideas for a while until you > start having good ideas of your own. > > That''s how I got my feet wet. I think I may have reached the wall > though. > > http://www.csszengarden.com is a great resource. I come across a few > corporate websites every week that have a beautiful design, and I add > them to a text filed called "good-designs". > > -JeffDave Shea wrote a book called "The Zen of CSS Design" that goes through some of the better submissions to CSS Zen Garden and explains them in some detail. It won''t teach you CSS per se, but if you''ve already got a grasp of how it works, the book is excellent in giving you some ideas in how to advance, and shows you some more esoteric tricks. Good read, and it''s on the Safari bookshelf if you have access to that. I also second "The Non-Designers Design Book" and add Alex White''s "The Elements of Graphic Design". I still produce pretty much utter garbage, but those resources have shown me how to recognize the important parts of design, and what makes up design so that when I finally get around to learning the tools and techniques, I might produce something decent. -Scott
On 19/08/05, M. Bitner <moexu13-Re5JQEeQqe8AvxtiuMwx3w@public.gmane.org> wrote:> > And this may seem obvious, but it helps to look at a lot of sites, > > and try to understand what makes them work well -- or poorly. > > Individual style is a part of visual design to about the same extent > > it is a part of programming: While there is a lot of latitude for > > doing things differently, some approaches tend to be better than others. > > I''m in the exact same position (a programmer trying to learn design) > and here''s some sites that I''ve found useful and/or interesting: > > http://www.webpagesthatsuck.com/ > > http://www.oswd.org/ > > http://www.csszengarden.com/ > > http://www.lynda.com/ > > http://www.morguefile.com/Studying design (and especially CSS!) is bound to be a productive way of developing skills, but as someone who spends most of his working time building webpages and customizing program output in html/css, I can make one very strong suggestion for programmers designing program output: don''t _design_ the output, _mark up_ the output. Having good, meaningful, robust _markup_ makes styling the script/program output MUCH more flexible than if the application just outputs ''tag soup''. For example, a common output situation might look like this (taken from multiple real examples): <div class="tableTitle">Lorem, Ipsum and Dolor</div> <table width="700" cellpadding="0" cellspacing="0" border="0"> <tr> <td><span class="header">Lorem</span></td> <td><span class="header">Ipsum</span></td> <td><span class="header">Dolor</span></td> </tr> <tr> <td>Sit</td> <td>Amet</td> <td>Consectetuer</td> </tr> <tr> <td>Adispiscing</td> <td>Elit</td> <td>Consectetuer</td> </tr> </table> ...which is more or less a disaster. Perhaps workable, but inflexible. The spans and the div indicate someone thinking about how to style the table, but not about the data. Similarly, the width, cellspacing and border attributes in the opening table tag take control out of the hands of the designers, and have nothing in particular to do with the information involved (I don''t mention cellspacing since there''s currently no good way to achieve this with css...it''s needed occasionally). As a last criticism, this table would also not be particularly accessible. Better markup for the same set of data would look like this: <table class="applicationOutput"> <caption>Lorem, Ipsum and Dolor</caption> <tr> <th id="dataTypeLorem">Lorem</th> <th id="dataTypeIpsum">Ipsum</th> <th id="dataTypeDolor">Dolor</th> </tr> <tr> <td headers="dataTypeLorem">Sit</td> <td headers="dataTypeIpsum">Amet</td> <td headers="dataTypeDolor">Consectetuer</td> </tr> <tr class="alternate"> <td headers="dataTypeLorem">Adispiscing</td> <td headers="dataTypeIpsum">Elit</td> <td headers="dataTypeDolor">Consectetuer</td> </tr> </table> Here, there is only one small concession made to styling the table object (the ''class="alternate"'' attribute on the even numbered rows of the table), but this markup is _ideal_ from the perspective of someone whose job it is to make it look good. In addition, by using the oft-neglected <th> and <caption> elements and explicitly relating the cells in the subsequent table rows to the headers, the programmer has made this table much more accessible. The point being that the better the markup is, the more latitude designers have for styling it and the more accessible it becomes (or at least, the fewer barriers to accessibility are inserted at the program level). -Christopher
> And this may seem obvious, but it helps to look at a lot of sites, >> and try to understand what makes them work well -- or poorly. >> Individual style is a part of visual design to about the same >> extent it is a part of programming: While there is a lot of >> latitude for doing things differently, some approaches tend to be >> better than others.While I''m sure the links people have provided to CSS resources are useful, it''s not what this poster asked. Learning what the line-height attribute of a block-level element in CSS *does* teaches you nothing about why line-height is important visually, when to adjust it, or its relationship to line length. Learning how to set font-family won''t teach you that the font Trebuchet can look cartoonish in some contexts, but sort of stylish in others. (BTW, Cameron Moll wrote a great article about font selection here: http://www.cameronmoll.com/archives/000240.html) I''d suggest like someone else did that you take a design class at a community college. It''s sort of like yoga: you can learn the basic moves on your own, but you really need an expert to correct you in small but crucial ways. How does a color scheme actually work? Why is white space important, or not? What does it mean that a "warm colors pop, cool colors recede", and how can you use that in a UI? That said, the CSSZenGarden book that came out recently actually does a really good job of talking about visual design choices as well as css implementations: http://www.amazon.com/exec/obidos/tg/detail/-/0321303474
The short answer is that it depends on the goal of your web site. Do you want to inform, market/sell, or what? Once you have that decided, look at some examples of web sites that work, and web sites that don''t work. Then you''ll have a pretty good idea where to go to learn what you need to learn. Hunter Hillegas wrote:>I apologize for the OT post but this list is full of people that I suspect >might be able to help with this. > >I am a programmer, not a designer. I can read and make mods to HTML markup >no problem but when it comes to doing real layout, I just don''t have the >skills. > >I''d like to do some training so that I can do better prototypes of Web apps >without a designer... My goal isn''t to replace a good designer for a >finished product, just to bone up on some skills. > >Anyone recommend either good books or good training courses? I''d probably >prefer the latter since it seems to force me to actually learn. :-) > >I appreciate any feedback and again apologize for the OT nature of this >post. > > >_______________________________________________ >Rails mailing list >Rails-1W37MKcQCpIf0INCOvqR/iCwEArCW2h5@public.gmane.org >http://lists.rubyonrails.org/mailman/listinfo/rails > > >
It''s OT but on this thread but still related to creating websites and design, what resources could you guys recommend to learn more about creating easy to use websites? I find it hard balancing between newbie-friendliness and power-user oriented features.. Trying to stay simple and easy but also have features for the power-users The particular websites I need to build need to cater to both the newbie On 8/19/05, M. Edward (Ed) Borasky <znmeb-2WxwdZd67h7R7s880joybQ@public.gmane.org> wrote:> The short answer is that it depends on the goal of your web site. Do you > want to inform, market/sell, or what? Once you have that decided, look > at some examples of web sites that work, and web sites that don''t work. > Then you''ll have a pretty good idea where to go to learn what you need > to learn. > > Hunter Hillegas wrote: > > >I apologize for the OT post but this list is full of people that I suspect > >might be able to help with this. > > > >I am a programmer, not a designer. I can read and make mods to HTML markup > >no problem but when it comes to doing real layout, I just don''t have the > >skills. > > > >I''d like to do some training so that I can do better prototypes of Web apps > >without a designer... My goal isn''t to replace a good designer for a > >finished product, just to bone up on some skills. > > > >Anyone recommend either good books or good training courses? I''d probably > >prefer the latter since it seems to force me to actually learn. :-) > > > >I appreciate any feedback and again apologize for the OT nature of this > >post. > > > > > >_______________________________________________ > >Rails mailing list > >Rails-1W37MKcQCpIf0INCOvqR/iCwEArCW2h5@public.gmane.org > >http://lists.rubyonrails.org/mailman/listinfo/rails > > > > > > > _______________________________________________ > Rails mailing list > Rails-1W37MKcQCpIf0INCOvqR/iCwEArCW2h5@public.gmane.org > http://lists.rubyonrails.org/mailman/listinfo/rails >
Again, it really depends on the **purpose** of the website/application. Have a look at a book called "Don''t Make Me Think!". Francisco Hernandez wrote:>It''s OT but on this thread but still related to creating websites and >design, what resources could you guys recommend to learn more about >creating easy to use websites? > >I find it hard balancing between newbie-friendliness and power-user >oriented features.. > >Trying to stay simple and easy but also have features for the power-users > >The particular websites I need to build need to cater to both the newbie > >On 8/19/05, M. Edward (Ed) Borasky <znmeb-2WxwdZd67h7R7s880joybQ@public.gmane.org> wrote: > > >>The short answer is that it depends on the goal of your web site. Do you >>want to inform, market/sell, or what? Once you have that decided, look >>at some examples of web sites that work, and web sites that don''t work. >>Then you''ll have a pretty good idea where to go to learn what you need >>to learn. >> >>Hunter Hillegas wrote: >> >> >> >>>I apologize for the OT post but this list is full of people that I suspect >>>might be able to help with this. >>> >>>I am a programmer, not a designer. I can read and make mods to HTML markup >>>no problem but when it comes to doing real layout, I just don''t have the >>>skills. >>> >>>I''d like to do some training so that I can do better prototypes of Web apps >>>without a designer... My goal isn''t to replace a good designer for a >>>finished product, just to bone up on some skills. >>> >>>Anyone recommend either good books or good training courses? I''d probably >>>prefer the latter since it seems to force me to actually learn. :-) >>> >>>I appreciate any feedback and again apologize for the OT nature of this >>>post. >>> >>> >>>_______________________________________________ >>>Rails mailing list >>>Rails-1W37MKcQCpIf0INCOvqR/iCwEArCW2h5@public.gmane.org >>>http://lists.rubyonrails.org/mailman/listinfo/rails >>> >>> >>> >>> >>> >>_______________________________________________ >>Rails mailing list >>Rails-1W37MKcQCpIf0INCOvqR/iCwEArCW2h5@public.gmane.org >>http://lists.rubyonrails.org/mailman/listinfo/rails >> >> >> >_______________________________________________ >Rails mailing list >Rails-1W37MKcQCpIf0INCOvqR/iCwEArCW2h5@public.gmane.org >http://lists.rubyonrails.org/mailman/listinfo/rails > > >
Hi Hunter, being myself a utterly GDD(*) coder i''ve found this short article about colors really interesting, http://www.sitepoint.com/article/color-for-coders bests, Richard (*) Graphic Design Deficient :) On 8/19/05, Hunter Hillegas <lists-HAWAbpnI61OZ1JSuHaJ1sQC/G2K4zDHf@public.gmane.org> wrote:> > I apologize for the OT post but this list is full of people that I suspect > might be able to help with this. > > I am a programmer, not a designer. I can read and make mods to HTML markup > no problem but when it comes to doing real layout, I just don''t have the > skills. > > I''d like to do some training so that I can do better prototypes of Web > apps > without a designer... My goal isn''t to replace a good designer for a > finished product, just to bone up on some skills. > > Anyone recommend either good books or good training courses? I''d probably > prefer the latter since it seems to force me to actually learn. :-) > > I appreciate any feedback and again apologize for the OT nature of this > post. > > > _______________________________________________ > Rails mailing list > Rails-1W37MKcQCpIf0INCOvqR/iCwEArCW2h5@public.gmane.org > http://lists.rubyonrails.org/mailman/listinfo/rails >_______________________________________________ Rails mailing list Rails-1W37MKcQCpIf0INCOvqR/iCwEArCW2h5@public.gmane.org http://lists.rubyonrails.org/mailman/listinfo/rails
nuxygen <nuxygen-Re5JQEeQqe8AvxtiuMwx3w@public.gmane.org> writes:> http://www.sitepoint.com/article/color-for-codersvery nice. short and informative with examples and descriptions. it really makes http://wellstyled.com/tools/colorscheme2/index-en.html make a lot more sense. -- doug-jGAhs73c5XxeoWH0uzbU5w@public.gmane.org
I''ve had a _really_ hard time in the past finding decent sites. Even big-name sites are often pretty crappy.>From my (picky?) view, there just aren''t many websites worth seeing.There may be useful content on some, but the presentation is generally rotten. I would _love_ to see others'' lists of "best examples". On 8/19/05, M. Edward (Ed) Borasky <znmeb-2WxwdZd67h7R7s880joybQ@public.gmane.org> wrote:> The short answer is that it depends on the goal of your web site. Do you > want to inform, market/sell, or what? Once you have that decided, look > at some examples of web sites that work, and web sites that don''t work. > Then you''ll have a pretty good idea where to go to learn what you need > to learn.
On Aug 23, 2005, at 10:58 PM, Michael Teter wrote:> I''ve had a _really_ hard time in the past finding decent sites. Even > big-name sites are often pretty crappy. > > >> From my (picky?) view, there just aren''t many websites worth seeing. >> > There may be useful content on some, but the presentation is generally > rotten.There is as much -- probably more -- to learn from failure as there is from success. Ask yourself, "Why does this site suck?" Thus the interest in anti-patterns and the saying, "A fool learns from his own mistakes. A wise man learns from the mistakes of others." Regards, Ed -- Transmogrify, LLC * <http://xmog.com/>
http://photo.net/ remains a model of clean web design since 1993. It was developed by Philip Greenspun, author of "Software Engineering for Internet Applications" (http://philip.greenspun.com/seia/). It is an AOLserver/Tcl app, which shows what you can do with a modest toolset. On Tue, 2005-08-23 at 21:58 -0500, Michael Teter wrote:> I would _love_ to see others'' lists of "best examples".
Not to be a contrarian, but that site is kind of hurting my eyes. Am I alone here? Currently I am reading "Professional CSS" which profiles the development of several bigtime websites. It is a really excellent explaination of "why" AND "how", where so many book (O''Reilly CSS series especially) are just ''how''. This book is about building your idea set. Those other books are mostly reference for how actualize them. -Jeff Fred Loney wrote:>http://photo.net/ remains a model of clean web design since 1993. It was >developed by Philip Greenspun, author of "Software Engineering for >Internet Applications" (http://philip.greenspun.com/seia/). It is an >AOLserver/Tcl app, which shows what you can do with a modest toolset. > >On Tue, 2005-08-23 at 21:58 -0500, Michael Teter wrote: > > >>I would _love_ to see others'' lists of "best examples". >> >> > > >_______________________________________________ >Rails mailing list >Rails-1W37MKcQCpIf0INCOvqR/iCwEArCW2h5@public.gmane.org >http://lists.rubyonrails.org/mailman/listinfo/rails > >
On Aug 24, 2005, at 12:05 AM, Jeff Casimir wrote:> Not to be a contrarian, but that site is kind of hurting my eyes. Am > I alone here?Nope. -Scott
On 24.8.2005, at 7.05, Jeff Casimir wrote:> Not to be a contrarian, but that site is kind of hurting my eyes. > Am I alone here?Well, I too wouldn''t consider it being a super show case of clean, modern XHTML/CSS design. How about the brand-spanking new A List Apart (http://alistapart.textdrive.com), driven by no less than Rails?> Fred Loney wrote: >> http://photo.net/ remains a model of clean web design since 1993. >> It was >> developed by Philip Greenspun, author of "Software Engineering for >> Internet Applications" (http://philip.greenspun.com/seia/). It is an >> AOLserver/Tcl app, which shows what you can do with a modest toolset.Someone of the old ArsDigita people or current OpenACS users (like, err, me) might take offense of that. Complex, maybe (and certainly not Rails), but definitely not modest. //jarkko -- Jarkko Laine http://jlaine.net http://odesign.fi _______________________________________________ Rails mailing list Rails-1W37MKcQCpIf0INCOvqR/iCwEArCW2h5@public.gmane.org http://lists.rubyonrails.org/mailman/listinfo/rails
> I would _love_ to see others'' lists of "best examples".For what it''s worth, here''s my list of designers/web sites I really like: * Douglas Bowman -- www.stopdesign.com I think this is the dude that took wired.com to an all-CSS layout back in 2002 * Jon Hicks -- www.hicksdesign.co.uk * Apple -- www.apple.com Disclaimer: I am a fanboy but I think they have one of the cleanest corporate sites * Panic Software -- www.panic.com Super clean site * CSS Zen Garden -- www.csszengarden.com And in our own backyard, I think Basecamp is also very nicely designed. And finally, as others have mentioned, you can also learn a lot from bad designs. A couple of sites that spring to mind in the category of "could be improved": * slashdot.org * ebay.com
Jeff, I agree with you, in that I definitely wouldn''t consider photo.net one of the "best" web design''s nor even an example of clean web design. The interface is rather crowded. Tim Jeff Casimir <jeff-+RlNNtFrnNmT15sufhRIGw@public.gmane.org> wrote: Not to be a contrarian, but that site is kind of hurting my eyes. Am I alone here? Currently I am reading "Professional CSS" which profiles the development of several bigtime websites. It is a really excellent explaination of "why" AND "how", where so many book (O''Reilly CSS series especially) are just ''how''. This book is about building your idea set. Those other books are mostly reference for how actualize them. -Jeff Fred Loney wrote:>http://photo.net/ remains a model of clean web design since 1993. It was >developed by Philip Greenspun, author of "Software Engineering for >Internet Applications" (http://philip.greenspun.com/seia/). It is an >AOLserver/Tcl app, which shows what you can do with a modest toolset. > >On Tue, 2005-08-23 at 21:58 -0500, Michael Teter wrote: > > >>I would _love_ to see others'' lists of "best examples". >> >> > > >_______________________________________________ >Rails mailing list >Rails-1W37MKcQCpIf0INCOvqR/iCwEArCW2h5@public.gmane.org >http://lists.rubyonrails.org/mailman/listinfo/rails > >_______________________________________________ Rails mailing list Rails-1W37MKcQCpIf0INCOvqR/iCwEArCW2h5@public.gmane.org http://lists.rubyonrails.org/mailman/listinfo/rails __________________________________________________ Do You Yahoo!? Tired of spam? Yahoo! Mail has the best spam protection around http://mail.yahoo.com _______________________________________________ Rails mailing list Rails-1W37MKcQCpIf0INCOvqR/iCwEArCW2h5@public.gmane.org http://lists.rubyonrails.org/mailman/listinfo/rails