Jump to content
xisto Community
shadowx

How Do I Learn Web Design? Not coding, i can code well already but how to make it look good?

Recommended Posts

Well, you really need to know A LOT CSS.

thankfully i know enough to get me by, i cant imagine making a website without using CSS, so tedious.. anyway..

Following tuts does sound like a good idea and i think ill do that when i get a free moment, i have a rather busy weekend ahead of me!

Also downloading and analysing templates sounds good too, working out what makes them look good and such. Plenty of good suggestions, thanks everyone!

Share this post


Link to post
Share on other sites

If it helps, take a look at other web designer portfolios.Visit the HTML Hell page. (Google... don't remember the link.)Visit the CSS Zen Garden page. (Again, I forgot the link.) :XD: I actually have the same problem with "being horrible" at design, because it seems hard (to me) to be imaginative and original nowadays. It kind of stinks how the world follows itself in suit (when sites went from frames to navigational sidebars on one page; when everyone decided to go towards the "gloss" look; when everyone starts copying each other, really).

Share this post


Link to post
Share on other sites

here are a few sites that may help in your endeavor of creating better websites.


Web Design Tips
http://www.profitjump.com/?f (20 killer tips)
http://www.profitjump.com/?f (mini-directory)
http://www.profitjump.com/?f

Basic Design Tips/Flash Sites
http://ohmyflash.com/?gclid=CISp1_uC04oCFQi9VAodMjfUgQ
http://www.webstyleguide.com/index.html
http://www.webpagesthatsuck.com/ (displays the DONT'S of web design while enforcing the DO'S)

Share this post


Link to post
Share on other sites

Yes this is a common problem and I have it too to some point. The problem is when you have the idea, know how to technically make it a reality but when it comes to putting it down with all the graphics and all that, there comes the problem. Well it is simple and as other guys have said it before, PRACTICE! Then there are great sites like css garden and other pro sites where the best graphic-web designers of this planet put their work. Look for things that are repeated (maybe lines, certain dots, arrows, shapes, layouts,...) and try to make them yourself in any design program you like. While doing that post stuff here or on other similar forums and people with experience will help you out on what to improve, what to do differently and what is totally wrong! This is the best way of learning and is certainly not an easy way - if it would be, then all designers would lose their jobs!You should also know that there are complete colleges where students only learn how to make great desgins for stuff...It is a complicated thing, full of traps and exercise and reading, looking around the web is the only thing that can make you get better in what you do!Best whishes

Share this post


Link to post
Share on other sites

Thanks for the links and such, as i have a day in today i shall begin grooming them for anything i can find!

Share this post


Link to post
Share on other sites

Web design is a task only you can master by expirimenting on your own. You must play with CSS, expiriment with divs, try your design on multiple resolutions and browsers, and see what you can do with a design to make it look like the best design for the intended purpose. It's something that should go hand-in-hand with administrating if you are a webmaster. I believe that no webmaster should not know how to design their site and create something unique rather than using some cookie cutter template like half the webmasters do. I also reccommend that you use dreamweaver to layout code, but hand coding to refine it and do the main CSS. I definately don't reccomend using photoshop to create a full layout unless you are really willing to cleanup the code - with such a layout you'd easily be able to cut down on load times by doing even the most simple modifications like replacing tables with divs and graphic text to real text.It's a form engineering, and like any job in engineering you are doing you need to balance usability, with looks, and code cleanliness. It's even more of a balancing act with flash, but with flash you exclude certain people from your designs - the blind (who rely completely on text browsers which read the text aloud for them and/or enlarges text, which flash excludes the ability to do as it's goal is visual entertainment and interactive information here and there for kicks and NOT to layout an entire design) and those on 64 bit operating systems probably make up the most of the issue.

Share this post


Link to post
Share on other sites

Well if you really want to design those sexy looking websites on the net like those who have a very nice and descent looking design. Then here is the secret how do they do that: THEY ALL ARE DESIGNED USING TABLES

 

Beside many other factors in a web design tables play a major role in a site's design. They are the base of every good design. If you look at the source code at any good professional looking web site you will find out following things there:

 

*) A nice but yet a very complex table design

*) Use of CSS

*) Nice looking graphics

 

All of above point play a key role in a site's design.

 

STEP I: I would suggest that you must play around with tables and master them. 'cause the good looking graphics are of no use unless they look

really good. You can learn the basics from any HTML tutorial. For practicing you can use Frontpage or any other similar application. Try to make some layouts. Don't get into the presentation part like colors etc. they will come next, First master the basics.

 

STEP II: Then learn CSS programming. Now days CSS is the most popular tool, you can say, for designing. It is used to define properties for various items like tables, link etc. You can really define the style for every thing. The major advantage of CSS which I see is that: By using CSS you can concentrate on the building block i.e. tables. Also you don't have to define style for every thing just add and id or class to it's property. For learning CSS you can use tutorials and if you don't want to hand code the things you can use a CSS authoring tool like Simple CSS(Google for it).

 

STEP II: Then come to the graphics part. Design some great looking graphics. Use them in the tables to make your site look professional. For learning how to design those great effects and icons try out Internet. There are so many websites that can teach you the real stuff :XD: Always try to look for web graphics section as it always contains some great tutorials. This section is usually included in all the sites.

 

REMEMBER: Always learn and create things in a step by step manner. If you follow this simple rule you will always end up with a masterpiece. Also, Try to hand code things rather than using the GUI tools. They always lead you to trouble. Moreover you'll have more grip of your site's design in your hands if you do hand coding. What good is the work if there's no hard work involved in it :)

 

Best of Luck!

Share this post


Link to post
Share on other sites

Sorry, but using tables to create a layout is probably one of the worst ideas. Tables are there to hold tabular data. Tables hold numbers and things you would traditionally put in a table if you were writing one out with a pencil and paper. Not only is it wrong, but it actually makes page loading slower and the site is less accessible to those with visual impairments. Theres a good presentation from Seybold that explains some more reasons.

 

So, whats the alternative? DIVs were designed to be filled with images, shifted around and positioned just where you want them. Just run a search for layouts using DIVs and you will get thousands of tutorials flood out at you, along with reasons why tables are just plain wrong. Yes, there are browser compatibility issues with DIVs, but you get the same with tables.

Share this post


Link to post
Share on other sites

I did use a DIV in my latest experiments and i do prefer it to a table although i think tables are easier to use. Out of curiosity how much lnger does a table take to load compared to a div of the same dimensions and content?I do remember reading they take a little longer but it didnt mention specifics

Share this post


Link to post
Share on other sites

If I remember correctly, a table takes longer to appear as the browser waits until all of the content within the table has loaded, before displaying the table on the screen. With DIVs, the content appears as it is fetched by the browser - as soon as some of the content within a DIV reaches your computer it will appear on screen.As for specifics, there is no hard-and-fast rule as to how much faster DIVs are compared to tables. However, some developers are now using DIVs rather than tables to display the results of queries that produce thousands of rows. As a table waits until it has all the rows to display, it could take two or three minutes before anything appeared on screen. Switch to DIVs and the rows appear instantly.

Share this post


Link to post
Share on other sites

If I remember correctly, a table takes longer to appear as the browser waits until all of the content within the table has loaded, before displaying the table on the screen.

Isn't this how Internet Explorer does things? If i remember correctly, i read on Microsoft's Internet Explorer website on how IE renders tables and how Firefox renders tables. Firefox renders it as it gets the information and IE renders it once it gets the ending tags. But i'm not exactly sure how accurate this information is. But it really does depend on the browser on how it handles tables.

Share this post


Link to post
Share on other sites

Isn't this how Internet Explorer does things? If i remember correctly, i read on Microsoft's Internet Explorer website on how IE renders tables and how Firefox renders tables. Firefox renders it as it gets the information and IE renders it once it gets the ending tags. But i'm not exactly sure how accurate this information is. But it really does depend on the browser on how it handles tables.

It is true that IE generally waits for all the page to be downloaded before it shows the user anything whereas firefox will show you it as it gets the information so it seems that FF is faster but its not really any faster. Im not sure how firefox acts with tables though.

Share this post


Link to post
Share on other sites

One thing I highly recommend is to see the site as a whole, rather than just little individual parts. When I first started, I made a cool banner. Then I made cool-looking buttons. I came up with a cool background and all. When I finally put it all together, it looked like crap! Now, I mostly use Photoshop to design a whole layout, including graphics for buttons . . . all in one big picture. Then, I slice it up into individual images and use HTML to "sew" it back together. I might save the individual button images and then alter them a little and save it under the original name plus "-over" for use later as an image-rollover.The point here is to come up with a theme that flows together and is pleasing to the eyes, which brings me to another important feature: make things easy to find and don't assume your visitor knows where everything is.I hope this helps!

Share this post


Link to post
Share on other sites

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

×
×
  • Create New...

Important Information

Terms of Use | Privacy Policy | Guidelines | We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.