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

Hi all. In my quest to become a website creator I have a big obstacle.. when it comes to design, eg making things look good i might as well be blind. Im useless! I can code to a decent standard in HTML PHP CSS MYSQL and JS but i am useless at making a nice design. So wha im after is advice on how to learn this, what i fear is a response of "you can *learn* how to design, you either can or you cant.". Its really important that im able to design a nice looking website because not many people have a concise set of drawings from which to code the website. Any advice and link will be greatly appreciated here, ive tried looking through google but most sites just try to teach me how to write HTML which i already know. Thanks in advance, i hope.

Share this post


Link to post
Share on other sites

Do you get inspired easily? I would recommend going to graphics(-heavy) websites and taking some time to analyze and examine things, to try and figure out how to pull off similar effects easily. Although you can pull off a nice-looking website with just HTML and CSS, sometimes a simple background gradient (whether it's for the body or other elements) can really help spice things up; especially gloss-like effects. Gloss effects aren't hard to make either. Practice makes perfect.

Share this post


Link to post
Share on other sites

Hmm i hadnt thought of that yet it seems the most logical and easiest first step to take here. Currently im experimenting with the GIMP making a little banner, see how that ends up. That might also be one of my weaknesses, my access to gfx programs, i only really have the GIMP so if theres any other free and good gfx programs then suggest them too if you know of them! Meanwhile ill be surfing websites looking at their colour themes and such. Good idea!

Share this post


Link to post
Share on other sites

Best way to design is just to fool around with different effects and such in either the gimp or photoshop. Then try to piece together similar looks and make the colors look the same. There also are a few books on this but i completely forget the names of them. Look at other peoples designs and then try to create your own. Those are the only ways i know of on how to learn how to make good designs. It takes lots of practice and lots of messing around. Then you will be able to just vision a design and go with it.

Share this post


Link to post
Share on other sites

Lets say you start by learning the graphic designing softwares as they play a very important role in the final outlook of your webpage designs. Some examples of these softwares are Adobe Photoshop, Adobe Fireworks, Adobe Illustrator, Xara Xtreeme, Adobe Flash professional (for flash) animations. I would recommend you use Adobe Photoshop (that is what I use and I am using the CS3 Extended version) or Adobe Illustrator CS3 and Adobe Flash CS3 Professional if you wanna make them flash animations.Consider checking out what other people have done. try to learn some of the tricks and cuns in the designs as they will be a gr8 aid to your later designs. From there, you can build your own knowledge.

Share this post


Link to post
Share on other sites

are there any decent free gfx programs about? being, currently, unemployed i dont have the cash to splash on software at the moment.At college they had photoshop and some of the built in effects are brilliant for this kind of thing but i dont have photoshop or access to it unfortunately.

Share this post


Link to post
Share on other sites

Since the GIMP is more manual work than Photoshop (since Photoshop provides more convenience/automatic processes), if you can master the GIMP, you would practically be mastering Photoshop but being somewhat more experienced. The GIMP is not all that different than Photoshop. The GIMP, feature-wise, is very close to Photoshop 6, especially the development version of the GIMP. The main things that the GIMP is missing that Photoshop 6 has are adjustment layers, group layers and styles. The GIMP 2.4 will be very nice. The current development version of the GIMP has some very convenient features and better organized menus.

Share this post


Link to post
Share on other sites

Ah i see, in that case i shall continue using the GIMP until the give away of the day is photoshop :XD: I did just find a nice use of the Soft Glow filter in the GIMP which i never even noticed before so i guess its all about experimenting with the software till you find something nice

Share this post


Link to post
Share on other sites

I also think that it's important for you to look around at different sites and just really think about what it is that makes you like and dislike certain parts. Before I try to do any sort of designing these days I do a lot of looking around on the web to get ideas of what is out there and try to implement what I feel are the best parts of a variety of designs to my work.A lot of the design comes from the preplanning. You can't usually just start out with nothing and hope that it amounts to something and skip all the stages in getting there.Think about the things that you will need in your design. What are the important elements that you need to display somewhere on your page? Which ones are more important as to need a more prominante area on the site?You'll also have to think about colour schemes. Do you have any ideas about what kind of colours you'd like? Again, look around and see how other people are working with there colours. If you have an idea for your logo or whatever... you can use some of the colours from it and try to blend everything around you site to match that basic theme.Often what I do when it comes to colours, is with my Photoshop open, I grab the images that I want to have as the header for my site and then use the eye dropper tool to 'pull' the colours from the images, so that I can use the same colours from there around my site, which will makes things all match in together more easily. Play and experiment with the software (I see you're using GIMP, so try out and see what you can make that program do... the more you play around, the more you'll learn of the program! I know it's a bit harder to get it to do the things that you want than it would have been with Photoshop, but I've still seen many great things produced out of that program that far surpass my abilities in Photoshop, so I know it can be done.)You'll also have to think about things such as navigation. If you have a poorly planned out navigation system designed on your site, it will prevent many of your visitors from finding all of your pages. So try to think about how you could best work that into your design as well.If you look around on other people's sites, you will be able to see the different methods that are used most often when it comes to design.I think a lot of design can be improved with some work, because I was in a bunch of design courses over the years while I was at college. No - I'm not the greatest designer... though I also wasn't the worst... but one thing I did notice (since I had the same class from start to finish in school)... all the people - the good ones and the bad ones at design, ALL improved over the years that we were there. Some improved more, while others improved less... but no one left the course without learning a thing about design. So, it is possible to get better at designing. I think a lot of it though is just working with different ideas and a lot of planning ahead.I find that everytime I redesign my site (and I've done a few redesigns.... ) it gets just a little better, because I can see where I've gone wrong, and what I can do to fix it up just a little bit more. Things aren't going to be amazing over night, but little by little, they are improving, so I think that's a good sign.Just keep at it, and hopefully you'll see your designs showing some improvements as well :XD:And just remember - if there is one thing to learn from all of us... I think the key is to look at what other people have done. No - don't copy one site exactly... but use the elements that you like from several sites, improve the elements where you find problems, and add your own elements where you feel necessary. Reference many sites and you should start to see what many of the 'good ones' all seem to have in common. (I take a lot of screen captures of sites when I am looking around for reference material, just so you know :)).Anyway, best of luck to you!

Share this post


Link to post
Share on other sites

What you have to do is check out all the programs for graphics like GIMP or photoshop, I recremmend using photoshop just because it is soo much easier. Then once you have it then you must practice and follow tutorials, I see more photoshop tutorials so I'll post a great site for tutorials incase you need some if you don't like it then google is always the best to find some just type in, "Ps TUTs." Anways the site I am going to show you is liken a site where graphic sites submit in it so you may see some gone but it's ok there is much more better ones: http://forums.xisto.com/no_longer_exists/ it should help, just keep practicing but yeah I'm with truefusion with the glossy look because you can never go wrong with that look. for blends I have to say to use Gradient maps and use a little lasso tool and cover logo or whatever and add a new mask layer and that should blend. Thats basically all you have to know for the rest like the background just go crazy like use bunch of filters brushes until you get it right. once you have it just set the glossy look (PS Lovers have the tutorial) then your done just keep making the way you want and use the rectangular marquee tool alot, so good luck and show us your site after!

Share this post


Link to post
Share on other sites

MidnightVamps post remined me of an advert which says "I see your idea and raise it, thats how real design works." And i guess thats true. I wont copy other sites but i will "borrow" elements like button styles, some colour ideas etcetera and hopefully use them to make a nice logo or banner or something.

And Midori, i will definitely go do some tutorials, ill focus on the GIMP though as its all i have for now, i have made some nice looking gel buttons by following a tutorial and i think they're pretty cool!

i do have a basic design i made while messing around, i uploaded it here: http://forums.xisto.com/no_longer_exists/

the main thing i like there is the banner, it seems a bit plain though but i like the glow effect and will be using that a lt more in the future! the buttons are going to change methinks and im not sure about the headings and the text containers, they dont seem totally right.

Share this post


Link to post
Share on other sites

Hi all. In my quest to become a website creator I have a big obstacle.. when it comes to design, eg making things look good i might as well be blind. Im useless!
I can code to a decent standard in HTML PHP CSS MYSQL and JS but i am useless at making a nice design. So wha im after is advice on how to learn this, what i fear is a response of "you can *learn* how to design, you either can or you cant.". Its really important that im able to design a nice looking website because not many people have a concise set of drawings from which to code the website.

Any advice and link will be greatly appreciated here, ive tried looking through google but most sites just try to teach me how to write HTML which i already know.

Thanks in advance, i hope.


oh man i feel your pain i started desighning horably the worst part was i'm not verry color cordanated take truefusions advice because when i was redesighnig my site i looked at a buch of site and my desighn is like a combination of all of them while i'm not that great (still bad with colors) but it was better than before. and for the color problem use an image editor to help you with how the diferent colors will look together and effect each other. try this free one called photofiltre you can also try GIMP or paint.net and also for software try visual studio because you can switch between desighn and code instantly.

you could check out these sites because they have a bunch of design codes for little simple extras:
W3schools.com, htmldogs.com, alistappart.com, there's more here in this topic here
good luck :XD:

Share this post


Link to post
Share on other sites

Well, you really need to know A LOT CSS. Then create images (layouts) to make your website look cool. Tables, backgrounds, etc...

 

For images I suggest using paint shop pro, photoshop, etc...

 

But it you don't have any of those you can use paint.NET and go to the forums to learn how to make cool stuff to design your website.

 

And blending colors. Use an eye dropper tool to decide on colors that would look good together...

 

I hope that helped.... :XD:

Edited by Thorn (see edit history)

Share this post


Link to post
Share on other sites

I recremmend using photoshop just because it is soo much easier.

Yes, but a little bit more expensive tan GIMP... :XD:

Mi advice? try to download free cool templates and try to find how was it done and start to make some by yourself.
Edited by acantocephala (see edit history)

Share this post


Link to post
Share on other sites

I was only recommending I didn't say he had to and GIMP and I don't like GIMP its not that smooth plus I figured the more you use photoshop the harder to get used to GIMP and the longer your with GIMP the harder with photoshop, but i gotta say to might as well go with photoshop because its better than GIMP's interface. and its hard to find out how that make the templates by looking at it unless there was a page where they show you what they did like a tut or they could give a PSD and by looking at the layer one by one they can figure it out but thats only for photoshop :XD:

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.