Sign in to follow this  

[web] Are there actual web *design* tutotials?

This topic is 4666 days old which is more than the 365 day threshold we allow for new replies. Please post a new topic.

If you intended to correct an error in the post then please contact us.

Recommended Posts

I am looking for tutorials, articles and more about webdesign. Now, don't confuse this with the stuff you get back from google (those 'design' articles are all about webdevelopment really), I am looking for actual, graphical design. Stuff like how to mix-n-match fonts and colors, how to 'theme' a site, how to create graphics for it (or create a design that uses little to no graphics), etcetera. Something that tells me how people can think up, create and execute the beautifull stuff you see in the CSS Zen Garden. I think it's my most lacking part in the whole webdevelopment side. I can do the tech, I can make stuff that's not annoying to look at, but I cannot create something which is really good looking. I suppose many roots lie in print design but google isn't friendly for me today (and print design and webdesign differ significantly. A website is not a flashy flyer).

Share this post


Link to post
Share on other sites
Tried to use italics in the title. Tsk Tsk [smile][wink]. I can't think of any thing like you are describing off the top of my head, but you may want to take a look into the book, Web Pages that Suck. That site happens to be the site of the book as well and has some content on web design I believe. I think they try to teach you good web design from looking at bad designs, so you know what not to do. Here's the amazon link, it's quite cheap now (US 2.20).

- Drew

Share this post


Link to post
Share on other sites
The trouble I always had was with color. Even after learning about color theory, I couldn't really get anything other than odd variations of red green and blue in my designs. Most of the time it was 4 different shades or tints of one hue. I found this free [ws] Color Scheme Generator 2 which I'm using now to pick colors that at least somewhat go together. It's pretty simple and eash to use, so it's good for beginning imo. I don't have that much of an eye for colors (though I'm not nearly as bad as most programmers-attempting-to-be-artists) which causes me to look for the numbers in things, which is one way you can find some colors that at least halfway compliment each other.

As for page layout/fonts, I don't know why I was tought about the evil-ness of whitespace in school. A little bit of padding or margins can do a lot for any block of text or image. There are some fairly simple and common sense rule of thumbs, like limit your use of colors and font-faces, etc. On my site (still in development) I'm using 3 hues split into 4 shades/tints. I've also wrote a random color-rotator in javascript which completely revamps the page, which I hope will take some of the blame if people don't like the design ;)

You can do some amazing things with just text & background colors... and we'll be able to do even more amaizng things once more pseudo-classes (:first-child), pseudo-elements (:first-letter, :before, :after, etc) and properties (content) are supported by internet explorer.

As far as images go.. I haven't designed a site in Photoshop in a long time due to my inability to break out of the "top-left/header-nav" design which was popular a few years ago.

Realizing the patterns in webdesign is kind of disheartening, imo. Currently, the ALA double centered columns design has taken over. Finding something original is hard to do, but perhaps your not so concerned about that right now.

Also, I suppose another key thing to remember is designing for the content.


That's all I can think of now.. though I agree. More design tutorials would be really appreciated by the web development community. Links listed in the reference section and FAQ's are always inspiring, but actually creating your own design can be a challenge.. especially when you don't want to copy things :P All the designs in the CSS Zen Garden are amazing, but there are few that really break out of popular designs and deliver something fresh, new, functional, and most importantly practical.

Share this post


Link to post
Share on other sites
I think the best way to learn web design is to actually get into the design scene. Check out some of these sites, they are community based and will hopfully get you to what you're looking for =)

http://www.newstoday.com/
http://www.k10k.net/
http://www.bd4d.com/

Share this post


Link to post
Share on other sites
hehe, it's always the hard part to teach because that's the part that makes you a distinct artist/designer. It's like people teaching you how to make maps for games. You'll get a myriad tutorials on how to create maps, but almost none on the actual design elements...

Personally, I think you'd be surprised of the parallels between traditional design and webdesign. Oh sure, we have the interactivity thingie, so it's not the same, but you can always learn something interesting.
What about typography, using fonts and text rather than images. Challenge yourself by limiting yourself to some of the elements of a page and see what you come up with. Like, my friend had this assignement the other day, where she had to design CD covers using ONLY text. And the text was given, so all she had to do was to come up with an interesting layout and type.
Now you'd think it's got nothing to do with webdesign. I say it's a great way to learn to use one of the elements at your disposal, fonts, effectively.

What about the use of values in a space to attract interest and keep your page "breathing" : that's pure composition, the stuff you learn when you start painting.

The best thing is probably to go to a library and pick up some random book on design and see if you get any ideas from it, I think you'd be surprised :-)

Oh and I read that "Web Pages that suck" book. It's very good. In the fact that it does show you what NOT to do. I guess it's the minimum requirement for any, shall we say, programmer turned designer. From what you say, you already have that, but hey, you can always learn something.

Fuzztrek: that colour scheme generator is rather nifty. I wish they'd explain what the colour blindness selection box is for. (what the options mean, really).

Share this post


Link to post
Share on other sites
.net magazine's website often carries tutorials of older issues online. Other than that I find the Creative Arts magazines to be useful, as they often concentrate on the web from the designer's perspective. I find magazines to be quite helpful on this front, at least because they're often hot on the latest trends and techniques used by designers.

Share this post


Link to post
Share on other sites
Hrm, we got taught about this at University last year, it was a rather interesting class - it hadn't actually occured to me, but I really havn't seen that sort of material anywhere on the internet.

Not that I'm particularly good at it myself, but I might see if I can't write up something covering what we learnt in that class at uni over the next few days, and see if it's useful to anyone else - perhaps with some input from others we can get a good resource on the topic created.

Share this post


Link to post
Share on other sites
well, it certainly would be useful, in any case. I know people really enjoyed my tutorial on colour theory in the Visual Arts forum. If I weren't so lazy I should have turned it into an article, but it's such basic stuff IMO that I didn't think it would be that necessary.

Share this post


Link to post
Share on other sites
You might try http://www.pegaweb.com/ for actual web design. He takes you through the creation of a lot of different designs. He uses Photoshop, but I found that with a lit bit of effort you can translate it to other graphic packages

Also for graphic design check out these links (some are better than others an are not in order):
http://www.absolutecross.com/
http://www.grafx-design.com/tutorials.html
http://www.spoono.com/
http://www.pixel2life.com/main.php

Share this post


Link to post
Share on other sites
Ironically, a lot of the sites posted above have some pretty bad designs. I've been seeing a lot more bloated XHTML, now that it is becoming the new required buzzword. I'm starting to cringe whenever I hear the word "web designer."

Anyways, I have found that Evolt.org has some good, insightful articles on the topic.

Share this post


Link to post
Share on other sites

This topic is 4666 days old which is more than the 365 day threshold we allow for new replies. Please post a new topic.

If you intended to correct an error in the post then please contact us.

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

Sign in to follow this