Home Upgrade Search Memberlist Extras Hacker Tools Award Goals Help Wiki Contact

Any resources to learn how to design a website?

Hi, currently I am interesting in learning how to graphically design the artwork of a website and the layout.

I am talking about making websites in a creative way.
This is from making animations to using the right colors.

I did some artwork on my website but from my friends. I was told that it looks like cardboard paper. I later added a border to my drives and colored it black. Just by that it looks a little better.

However, I need to learn how to make things look good or realistic.
Like how to make dives look like ice or glossy... having those effects with certain colors and how I should outline them.

I am trying to mainly improve my artwork skills. I need to learn the art of animation too. I only can animate a bouncing ball.

However, need to learn how to animate a walking human, ghost, mosnter, animals....etc and cars and airplanes.

I need to learn the graphics side of things. Then learn how to take those skills and brainstorm a design for my website.

I already got 2 running working websites. Just that the artwork is medium good... mainly basic. Nothing eye catchy or eye candy type.

I want to now work on the looks of the website. Since the coding and functionality are done.

Any good resources?
I would suggest using Word Press or something simple.

Watch Youtube videos on how to use the program or just install wordpress on your website and start with a basic template and editing the content.

I know many people who start this way and have a lot to show for it after some time and dedication.

I hope this helps you out. Good luck to you. 🤝
WordPress won't help you in almost anything, especially not in art and improving design skills.

I suggest you expertising HTML and CSS first. This really isn't hard. These are not programming languages at all! You'll need some tutorials on basics and rest you'll get with experience.

Site dynamics and effects are done by Javascript. Now, I would suggest learning only jQuery (it's Javascript library), which again isn't hard at all.

Making more complex animations and making realistic things..well, you can't run 3D models from 3D's Max and animations from After Effects into website. Sites needs to be smooth and fast.

Lot of website animations are done with flash, or you simply make lightweight animations in gif and post them on the site as images.

If you have some example websites, that would help.
(Aug 22, 2014 10:09 AM)theAbsolute Wrote:  WordPress won't help you in almost anything, especially not in art and improving design skills.

I suggest you expertising HTML and CSS first. This really isn't hard. These are not programming languages at all! You'll need some tutorials on basics and rest you'll get with experience.

Site dynamics and effects are done by Javascript. Now, I would suggest learning only jQuery (it's Javascript library), which again isn't hard at all.

Making more complex animations and making realistic things..well, you can't run 3D models from 3D's Max and animations from After Effects into website. Sites needs to be smooth and fast.

Lot of website animations are done with flash, or you simply make lightweight animations in gif and post them on the site as images.

If you have some example websites, that would help.

I could agree with this. Once you learn CSS and/or HTML then you should also learn PHP.

You could learn to design what ever you want and then you wouldn't need a website builder as you would be able to build it yourself and put in the designs yourself as well.

Hope this helps you OP. 🤝
(Aug 22, 2014 10:33 AM)Deathmaul Wrote:  I could agree with this. Once you learn CSS and/or HTML then you should also learn PHP.

You could learn to design what ever you want and then you wouldn't need a website builder as you would be able to build it yourself and put in the designs yourself as well.

Hope this helps you OP. 🤝

I know how to code html, css, javascript, ajax, PHP etc.. I have a working website.

I am talking more about the graphic aspects of the website. I don't want to use free templates or free stock images.

I want to learn how to do this myself.

It's hard to use someone elses work and make the website look like one person created it from start to finish.

Most professional websites use graphics in a way that it pop's out as professional looking or artistic .


(Aug 22, 2014 10:09 AM)theAbsolute Wrote:  WordPress won't help you in almost anything, especially not in art and improving design skills.

I suggest you expertising HTML and CSS first. This really isn't hard. These are not programming languages at all! You'll need some tutorials on basics and rest you'll get with experience.

Site dynamics and effects are done by Javascript. Now, I would suggest learning only jQuery (it's Javascript library), which again isn't hard at all.

Making more complex animations and making realistic things..well, you can't run 3D models from 3D's Max and animations from After Effects into website. Sites needs to be smooth and fast.

Lot of website animations are done with flash, or you simply make lightweight animations in gif and post them on the site as images.

If you have some example websites, that would help.

Then how is it gaming websites are able to load in a 3D model or at least use an animation done in a 3d modeling software and use javascript to control the animation.

I seen games, and computer hardware companies use a javascript interface that allows you to rotate a hardware product and zoom in to see connectors and other things.

They have this and still the website is smoothly running but can tell you that feature would be in gigs in size.
Like this? http://www.jqueryscript.net/demo/Versati.../examples/

I know right, jQuery is beautiful.
If you look around, most professional websites don't feature too much artwork. Instead, they focus on key elements of the page standing out to draw attention, and create a pleasing to the eye schema of the page featuring colors and gradients according to Color Theory. Sure, many do feature graphics, but mainly to outline products and most of the time utilize well placed photographs (of just the object, no background) animated with jQuery as one navigates down a page. A last example of graphics is in a top slideshow of a webpage, which in this case MIGHT require custom graphics.

I offer you a few pieces of advice, graphics wise:

1. Use icons! They are what make your site interactive and quickly help users navigate your page. Many can be found free at iconfinder
2. Use royalty free wallpapers. Use wallpapers subtly to work and flow well with the overall color and layout of your page. They can be found at subtlepatterns.com or by doing a quick Google search for royalty free wallpapers (like those involving subtle panoramic views)
3. LEARN COLOR THEORY! It is one of, if not the most important thing when it comes to graphical design. Here is a great lesson:




Hope this helps.
(Aug 22, 2014 11:16 AM)theAbsolute Wrote:  Like this? http://www.jqueryscript.net/demo/Versati.../examples/

I know right, jQuery is beautiful.

Yes, that's what I am looking for but I seen different flavors.

Like there's buttons next to the frame. There's also actual 3d models embeded but I think they use a plugin for that. Or google chrome only supports it.

However, the effect you posted is what I want to learn how to do.

It could be a produce, it could be a picture of a game character etc.

Go and look at many gaming websites. These websites are loaded with artwork content. They really make the website look nice and professional.

Here's a few websites list of what I want to be able to do without copying them but want to do my own thing.

http://www.nvidia.com/content/global/global.php

http://www.thesims.com/the-sims-4

http://us.battle.net/en/int?r=d3

https://www.civilization.com/en/home/

It's not just the designs but the graphics that they produce.
They load in a lot of images / graphics from the game itself. Which I assume are actually 3d models.

However, if you look at the overall design it doesn't make you feel like it's out of place or a sloppy job was done.

My website currently gives you the feeling like I did it overnight. I mean you can see some effort but there's no eye candy like these websites. It's not well put together to make it look like it's one complete form.

if you look at the websites it looks professional and nothing is out of place. Everything flows fluidly with the overall design.
If you looked at my website it would look a little plain.

No real graphics or eye candy. Just plain colors and I have tabs on divs that do look kind a glossy but still overall design looks plain.

It looks like I made the attempt to add some eye candy but either failed or isn't fully complete.

I am more focusing on graphics / artwork and animation. So, I can make some impressive creative UI on my website.
Keep in mind mate, the graphics they produced are not out of thin air. They are based on something, and that is where the graphics originated. The entire site is based on one specific thing that has been so fully developed, graphics are already readily available. That is why it is so coherent. You can not just create a website and give it nice random graphics because then your site won't be focused on anything.
(Aug 22, 2014 07:46 PM)brewery Wrote:  Keep in mind mate, the graphics they produced are not out of thin air. They are based on something, and that is where the graphics originated. The entire site is based on one specific thing that has been so fully developed, graphics are already readily available. That is why it is so coherent. You can not just create a website and give it nice random graphics because then your site won't be focused on anything.

well my website has an icy cold theme to it. I am trying to make a layout with graphics that will make my website well the div's to look like ice blocks.

That is what I am working on. I am not trying to take what they did exactly in those websites and incorporate it into mine.

I got one website that's the theme is cold/ icy... a lot of light and dark blue shades of color being used.

My other website is my companies website. It has a coal black dark evil type of theme to it.

What I am trying to do is figure out what I can go back and change that can make the divs at least stand out. Also might customize the buttons to give it an icy look to it.

Another thing is the fonts using. This is what I will be working on.
(Aug 22, 2014 10:49 AM)thegentlad22 Wrote:  I know how to code html, css, javascript, ajax, PHP etc.. I have a working website.

I am talking more about the graphic aspects of the website. I don't want to use free templates or free stock images.

I want to learn how to do this myself.

It's hard to use someone elses work and make the website look like one person created it from start to finish.

Most professional websites use graphics in a way that it pop's out as professional looking or artistic .



-snip-

Woops, I think I misunderstood what you were looking for.

If you wanted to make your own graphics and what not I would suggest using a tablet or something of the sort to draw you own things. If you can't draw then I would find things that look like what you want. Edit them to be what you want in something and use them that way.

One of the biggest problems I have when building and designing a website is making the graphics. I will admit that I have a lot of people work on little bits of them to get them the way I want.

I know some bossome graphics design artists. From asking them about how to do it myself they just told me to pic something to start with and go from there. It takes time and effort, but if you know the programming that you talked about then you know the time and effort it takes to put into something like that.

Personally, I would Photoshop for editing. If you were going to draw something from scratch I would use Paint Tool Sai. Those would be the 2 tools for go to.

If you did have a tablet by chance. I would check into using Manga Studio as well as Paint Tool Sai. Paint Tool Sai is great for people with shaky hands as it has a stabilizer.

Hope this is more the information you were looking for.
I asked a friend about this just moments before posting this. One of the best graphics artists I have seen. They have done a lot of work for me as well. Just wanted to let you know I suck with graphics compared to them so I thought I would pass on their info rather then my own. I do agree with them though.

Good luck to you and hope to see you making awesome designs soon! 🤝


Possibly Related Threads...
Thread / Author Replies Views Last Post
by NasyrApr 15, 2022 01:13 PM 138 19,479 Apr 15, 2022 01:13 PM
Last Post: 2xTheTap115
by devlightzSep 17, 2020 03:35 AM 6 157 Sep 17, 2020 03:35 AM
Last Post: Wayne
by NasyrSep 8, 2015 10:20 AM 29 1,410 Sep 8, 2015 10:20 AM
Last Post: Nasyr