How to layout and design a web site.

[pixelhead]

Does anyone know of a web site that offers info on the basics of web design? How to layout and design a website? Not using HTML, CSS, Photoshop, as those are the tools, but something that teaches people that have little creative training to conceptualize the design of a site that visually looks good.

I see all these great looking web sites, but how do you develop the ability to do something like that? Is there a web site that helps people to learn how to do that sort of thing?

My other option is to find a good college or online course. Do you have any recommendations?

Is there a demand for this sort of thing? Is it better to settle with a web template? Should I bother spending the time to learn how get good at designing graphics for a web site?

Thanks.

 

[Epic]

Try to look at some web templates and get ideas from their layouts and then build your own. I agree, its hard to figure out where to put things and what looks good.

 

[pixelhead]

Thanks. I've tried that, but I was hoping to find something that would help me more than that short of taking a 2 year web design course.

Do you think there's a demand for something like this online. Would people actually use a site that helped to easily design a web site? I'm I wasting my time? Should I just learn from templates?!

Thanks again!
PH

 

[crazyluv]

I haven't look for any sites like that but I have searched and found plenty of sites that tell you what not to do. Which can be very helpful.

 

[Darkness]

The way they make them is using a photoenhancer such as PhotoShop. Then, they combine everything using HTML, using backround image= and blahblah... Just using CSS and HTML, or something else, well, I really don't think will work. That's all i got for ya. >.<

 

[Halobitt]

Try www.w3schools.com

there's a wealth of info there.

 

[Palyriot]

I was going to recommend w3schools. They have great tutorials for just about everything programming.

 

[amex]

There are a lot of useful articles about web design on the net.

 

[proudcdn]

There is no definitive source where you can learn everything needed to design websites.

Web design takes creativity, practice, and a whole lot of patience.

It is best to start out simple, do not try to create complex, cool looking pages right away. This will only discourage and frustrate you.

Get yourself a couple of decent books, the Master Visually series are quite good for starters, and some web tutorials. Get a good grasp of what the tags in the code do.

Find some sites on the net with really simple looking layouts and view the source (right click on the page, select View Source). Copy the source into Notepad, or if you are using software (ie Dreamweaver), into that. Then play around with some of the code and see what it does. Once you are comfortable with it, try to design a similar site on your own using what you have learned.

I would suggest sticking to HTML and CSS to begin with.

Gradually incorporate more complex code etc. into your sites until you get the hang of it.

There truly are designers out there that have been at it for years that still do not have the skills to produce stunning sites. It is an art.

 

[dojo]

Indeed, no one can teach you taste and talent. This is why many can draw something, but not too many are painters. The same applies in design. After 5 years of working on sites and layouts I still feel I know nothing.

Try to read some tutorials and open a graphics editor. Look at a nice simpla template and try to understand how it's been made. Design has some engineering stuff too

Get comfortable with the editor for graphics, try to make somethign and then go to make the layout. You could use a WYSIWYG editor at first while also peeping to the code.

There is no magic trick. The only secret is PRACTICE.

 

[weblord]

here's some free web template for beginners:
http://www.coffeecup.com/freestuff/templates/

 

[Palyriot]

Same here, after 6 years of design (started when I was 10), I feel I'm still bad at it. I think I'm just not creative. I feel I'm very fluent in HTML, CSS, and PHP. If you need any help, just go ahead and msg me.

 

[The_Ryan]

http://www.alvit.de/handbook/ Best link so far i have come across.

 

[Domainate.com]

I see all these great looking web sites, but how do you develop the ability to do something like that? Is there a web site that helps people to learn how to do that sort of thing?

It's very daunting when you look at it from a perspective of "how do you make something look great?" That is a very hard question to answer, especially when considering everyone has their own definition of what looks great. You need to break it down into smaller questions. First off, assuming you have somewhat of an appreciation of great looking websites or art or what have you (given the quote above, I'm guessing you do), start with your preferences. "How do I make a website look great TO ME?" Still a tough question but is at least 1 level below making something look great to everyone, and that's a large step in and of itself. It's a lot easier to figure out what looks great to you than it is what looks great to people in general.

So anyhow, what is that question really asking? WHAT looks great to you? You need to figure that out. I'd suggest doing a lot of websurfing, especially among the kinds of sites that you'd like to be making, and jot down the similarities of sites that look good to you. Templates are useful for this too. Then you can come up with a basic list of things that in your opinion make a site look good, and that way you're breaking the "big picture" down to little pieces. While you're at it, try to come up with a list of similarities of sites that DON'T look good to you. That way you don't accidentally commit one of those mistakes and wonder why what you made didn't look as good as you expected.

Once you have those lists, you have a solid foundation to begin from. Then you just figure out how to do each of the things on the list (and how to avoid things on the bad list), and then after that you probably get a better feel of what works for the particular site you're making. Also, it's generally a good idea to lay everything out on paper or Photoshop or whatever works best for you before you start actually making it.

I'm sure there's some good tutorials out there that help too. It's funny because I need to do this for myself too...I always want to just jump in and start making a design instead of laying everything out and figuring out what I want beforehand. Paying other people to design my sites will make me penniless before long.

 

[kiore]

Re-read what the others have said earlier in this thread. This isn't disagreeing with anything they say. It's just one way of designing your website based on your skills and what you want your site to be and say.

Pick a simple web page editor. Any of Fontpage, nvu, etc will do, it doesn't really matter.

Go and look at some domains you like the look of. Pick a very simple one, and see if you can duplicate it from scratch in your editor. Now see if you can make it a little bit better.

Pick another one & try duplicating it. Again, once you have done that improve it slightly.

Do that a few times & you'll have the basics of the technique and understand your limitations with the tool.

If you feel brave try hand tweaking the html & css a bit, but don't obsess about it. Unless you make very small sites hand editing html is going to be a chore you should strive to avoid.

Now comes the hard bit, designing your site. Put the tool away. Open up a text editor and ask yourself some basic questions:

1. What is the purpose of this site?
2. What is the topic (or theme) of this site?
3. Who is the audience of the site?
4. What information should I give?
5. How do I talk to my audience?

You might get answers like:

1. "To sell advertising clicks" or "To build a high traffic website I can sell"
2. Tulip Guys fan site
3. Fans of Tulip Guys and other Ragna Rock fans
4. Bios, Album lists, concert dates, etc ...
5. Chatty, clean information, ...

Print the answers out, pin them on the wall. Go for a walk, or sleep, or go to work or school. Basically anything to take your conscious mind off the project for a bit.

Come back to your list & see if you want to change anything. Changes now are very cheap in terms of time & effort, so make sure you are happy.

Take some large sheets of paper -- desk blotter size -- on the first one map out a simple mockup of how your site will be structured. draw a square for a page & an arrow to the pages it links to. For example the main page might link to Albums, Reviews, and Songs while Albums would link to a page for each album and a review would link to the relevant album or song, everything links to main.

Don't get into too much detail. I have no idea if there really is a group called "Tulip Guys", but if they've done 3 albums, you can show a square for each album, if they've done 30 albums show that there are multiple albums by drawing the box differently to indicate this. I usually show multiples with drop shadows & an estimate of the number I'll have to write. When you get to songs, there will be a dozen or more for each album, and if you want one per page this will definitly need a multiple.

When you're happy you have included everything, and have double checked that what you have written matches the list you printed out earlier, you want to count the pages. Write the total number of pages you'll need to create on the sheet. Make an estimate of how long it will take you to do this many pages.

Stop. Take a break. When you come back decide if you want to continue or revise the sheet. If it starts to get messy, do it again. Once again, it's much cheaper to redo things now than later.

Now take a fresh sheet of paper & draw a simple mockup of your home page section header pages and detail pages. I do mine on ordinary A4 printer paper, one per page, I make the page picture about 2/3 the size of the page & write comments about the page in the margins. If you are going to have advertising, mark it in. Check that you can get the required number of links (from the structure drawing) into each page. Re-do this until you have it right.

This time, you don't need the break. Take it if you want, but if you're tapping your creativity just get going. Dust off the html editor & code up the mockup as a few real pages. To speed the process, you can use mock text ("Dolores Ipsum") for the page bodies. Load them up in your browser and keep changing the pages that until you like the look. Unless you deliberately want a jarring sensation make sure that the pages look similar enough one after the other that people will see them as part of a single conversation. While doing this don't forget your answer to "How do I talk to my audience?" consider how they would see these pages.

Congratulations, you now have your website design. The rest is just grunt work. If your editor supports templates, convert your mockups into templates, otherwise make as many copies as you need pages & get editing.

 

[codyturk]

hmm without photoshop, dreamweaver, css?

Try notepad
I used this site alot when I started out until I learned html from just using it so much. http://www.webmonkey.com/webmonkey/reference/html_cheatsheet/

http://good-tutorials.com is a good site.

Also you can right click on sites and click view source code to see how the foundation of sites are laid out.

Good luck.

 

[hostingdiva]

What is it that you want to do? Be a designer or make websites? People can have a website that is maybe not so pretty but VERY functional and VERY search engine friendly. Other websites can be very pretty but not very functional or search engine friendly.

It just depends - but in terms of answering your question specifically, you can't buy / learn talent and that's just how it is

 

[Damion]

Does anyone know of a web site that offers info on the basics of web design? How to layout and design a website? Not using HTML, CSS, Photoshop, as those are the tools, but something that teaches people that have little creative training to conceptualize the design of a site that visually looks good.

I see all these great looking web sites, but how do you develop the ability to do something like that? Is there a web site that helps people to learn how to do that sort of thing?

Thanks.

Check out this website. A nice start to help you on your way

 

[painperdu]

I think he's looking for tutorials on design elements: lines, shapes, colors, space, grids, etc . . .

Try this http://www.webstyleguide.com/page/index.html

This is about design elements for photography but applies nicely to page design as well.
http://photoinf.com/General/Robert_Berdan/Composition_and_the_Elements_of_Visual_Design.htm

This is one of my favorites and is geared more toward web design. It's put together by a magazine layout designer:
http://www.webdesignfromscratch.com/

 

[markkk]

to learn a good nice design.. steal ideas with some good templates.. and then master the adobe photoshop..