Relation between Web & Graphics Design

I have already learnt basics of web design (HTML, CSS, JQuery). It is true that there is a blood relation between Web Design and Graphics Design ;).

I am a hobbyist web designer, means not professional. I have seen that in every background of eye pleasing web design, there is a good dozen of work for graphics using Photoshop, Illustrator or Inkscape.

But unfortunately, I don’t have the least knowledge about graphics design. Tried few books but none of them were for beginner’s. For example, I tried out “Inkscape: Guide to a vector drawing program”, but it wasn’t surely for beginner’s.

Maybe I have the creativity to create graphics, but not the skills. Is graphic designing really necessary to do web designing? Isn’t there any other way? What can I do to overcome my disappointment? I am only 16 years old, can’t find anything or anyone to help me. I am not even able to create a simple noisy texture or a tiling background, not even an eye-pleasing logo.

Well, I have two option for you.

  1. To become a good web designer you do not need to a good graphic designer as there are plenty of website templates available for you to use and those have been designed by professional designer to provide a stylish and friendly look to the website
  2. If you can be a good graphic designer and if you know the basics of web design (html, css) you can transform your design skills onto web, which will allow you to design beautiful websites out of your imagination

You don’t need to be a graphic designer to do nice web design. It’s great to have those graphic skills, but they aren’t necessary. There are plenty of beginner books that teach simple things like adding noise, but you can also just tinker around and find out how to do that quite easily—either just by experimenting with Ps or by Googling the term.

Your first priority in web design should be content. That is, organizing the words, images etc. that the site needs in a logical and usable manner. Then it’s not such a big deal to add some color and background images etc. Also, but studying beautiful websites and exploring how they are made, you’ll gradually develop an eye for what’s possible.

It is true that there is a blood relation between Web Design and Graphics Design

As an art director, and web designer, I have to disagree. The truth is that GD and WD and complimentary skills but not linked skills. You can be one , both or neither equally well. In a weird phenomenon, people (clients) have marginalized aesthetic (art direction) and production skills ( HTML/ graphic design) so that people in either industry are beginning to think they must be both to even be considered one. It is quite possible to be both, but having multiple skill should in make you a PREMIUM commodity in ANY set of fields.

Scope creep is horrible, because, then it begins to be expected that you become a developer, and a content writer as well… and all for the same price as what ever is considered the lower skill by the client. It’s really interesting that SEO manages to remain seen a separate skill when it too involves :web mastering, HTML (proper info architecture ) and copywriting.

This is why I dread when people gleefully mention lumping in these skills into one term. Marketing (, Art direction/graphic design ( yes those too are separate too) ,Copywriting, Web design ( this is mark up and layout), UX, Web Development (DB and automation) are independent skills which can compliment each other.

I have seen some people who can create graphics and make websites, so I said that. Sorry if I were wrong.

So, what book should I read to take my web site design wonderful and content organizing a step ahead?

  1. The Web Designer’s Roadmap (Sitepoint)
    OR
  2. Killer UX Design (Sitepoint)

I have already read “The Principles of beautiful Web Design (Sitepoint)”, but it was not very helpful as I thought. Because the book gave only advice instead of real-time suggestions.

I have seen some people who can create graphics and make websites, so I said that. Sorry if I were wrong.

let me clarify. beign able to be a good graphic designer DOES NOT prevent you from coding well ( if anything it helps). But that was my point. Design and code are COMPLIMENTARY but INDEPENDENT disciplines. If you are able to do both, and do both WELL, then you are far better of then just doing one OR the other. But dont lump them into one over simplified definition.

From what I think you are saying I would probably suggest to START with ‘The Web Designer’s Roadmap’, tho I am not certain what you meant by “real time suggestions” vs “advice”. ALSO, any title you see with ‘UX’ is concerned with User Experience, an even more specialized field. Think of funky animations, transitions, behaviors, etc. all of which WHEN USED AT THE RIGHT TIME and IN THE RIGHT AMOUNT can HELP make a killer site ( but only if the site was killer to begin with)

Hi Ahmed,
The world changes as time goes by, the programs and languages we use to create websites and graphics have changed a lot over my career. I think Photoshop is up to version 10 or 11, but I used it back in version 2-3 for the first time. Similarly the languages which we create websites in have changed over time, as have people’s expectations of what a website is and does. You can see a good overview here, (note that the style and design elements change over the history).

Years ago I started a job making advanced MicroSoft Word documents and then moved into a position incorporating more graphics and editing changes. From there I moved to a small company where I had to do more graphic design, and being a small company found myself needing to program websites, now that is all I do. Over this time the skills and technology required have become much more diverse. I used to use Dreamweaver and Photoshop. Now I switch between about 10 programs from basic text editors through to software which does 1 thing very well. With responsive design and the changes in technology the skills and software are shifting again.

You are starting your journey and it might take you some time to discover those skills that you have and the things you like and are good at.
While the tools change, and some of the expectations change, good design is always appreciated. There have been clever people since the beginning of time who have been able to take an idea and execute it well, to make complex things accessible and easy to use.

But not everyone likes design, some people like code, some like colour, some like words. If I were you I would find things online that inspire you to want to make, copy or create something like it, then find out what skills or software you might need to do it. There are tons of different ways to use computers and software that didn’t exist in years gone by. That’s part of what some of the replies here have been saying.

Regardless of any of this is the importance of knowing your tools well. If you code for a living, learn your language well. If it is design, start from the basics and master them before moving on. You will never go wrong by mastering the tools of your trade.

I like coding rather than designing. And you are right, different people like different things. But I would like to learn graphics design if I had enough resources…
Actually I like to learn tech things as much as possible.

If you are after some good, well explained graphic design material I would recommend Before and After. We received their magazine for years here at my company and they were always packed with great, well laid out and explained articles. Lots of design is about the principles that underpin it, graphic design is no different. You can learn a lot by watching other people and learning how and why they make decisions. Why did they choose that colour and how did they do it? Why a curved line there instead of a straight line? Their tutorial information is good because they provide references to the things they use, like that colour or font, they’ll tell you what it is. There are tons of resources out there but these guys have done graphic design since the very beginning with computers, and they’re still around. They’re doing something right.

I’m 15, 16 tomorrow :wink: and I started doing graphics at a young age and of course I sucked. But now I’m pretty decent, just by getting the little bits of information about Photoshop or GIMP will help you out. TheNewBoston has a very simple PS tutorial I think, check it out.

Look at some of the tips from this article on professional web design, it tells you a little bit more about how the graphic design and web design should be formatted for a compelling and converting site.

The relationship between web and graphic design is that the graphics are made for the websites that could look nice and properly organized for grabbing the attention from visitors. And of course these are co-related to each other.

Design is the creating a new solution to a problem. You can design anything, from a web site to a recipe, a logo, a social media campaign.

Graphic design is the creation of new solutions to problems within the medium either in 2D or 3D, on paper or digitally. The output is usually something that can be reproduced in order to deliver its objective many times.

“But unfortunately, I don’t have the least knowledge about graphics design. Tried few books but none of them were for beginner’s. For example, I tried out “Inkscape: Guide to a vector drawing program”, but it wasn’t surely for beginner’s.”

You don’t learn graphic design by reading about graphics software programs. They only teach you how to use the tools to create the artwork. That’s like reading a tutorial on how to use a pencil or calligraphy pen. That’s not graphic design. I suggest you sign up for a graphic design art class at your local university, if you can.

Here are some sites teaching basic graphic design principles, which you need a teacher for to really apply them correctly and get solid feedback on. These principle apply to printed materials of all types as well as web site design:

http://www.killersites.com/magazine/2010/fundamentals-of-graphic-design-part-1-alignment/
http://en.wikipedia.org/wiki/Design_elements_and_principles
http://www.getty.edu/education/teachers/building_lessons/principles_design.pdf
http://desktoppub.about.com/cs/basic/g/principles.htm