I’m a web developer mainly working in front end developing. My main fields are HTML5, CSS3 and Flash ActionScript 3.0.
Here in Iran, teamwork means nothing for most of the people, but I think it’s the most important aspect of our work, especially in web design.
I have poor skills in graphic design and UI design. I always have to work with graphic designers for my websites. They are usually good and skilled designers. But they are all print designers and unfortunately they know nothing about the web and designing for it.
For example, one of the designers that I work with most of the time is a great designer and he won a couple awards for his logo and poster designs. However, he knows nothing about the web and most of my time is spent explaining to him how things work on the web, i.e. in what size he should work, using pixels instead of centimeters, and so on… After all he is a print designer, not a web designer. They often think everything is static and constant, not in motion.
So the best way to work around this is to improve my skills in graphical designing. I just want to be able to design good layouts, make good color selections, and etc for my websites. I do not want to design illustrations and do heavy graphical works. Just design websites with no Photoshop illustrations like posters and etc.
What do you do for your graphic works, and if you do them yourself, which books or references do you suggest I read? Where should I start?
This is the answer I posted to the similar stack overflow question. Thanks for the heads up.
I may have a unique perspective on this having been a computer science/art double major in college. It doesn’t really sound like you actually have the ambition to be a graphic designer as much as you want to be able to build web sites by yourself without them looking like crap. An admirable goal 🙂 Without the serious drive, and without latent artistic ability, you will never become a graphic designer. But fear not! You don’t have to be. You can get pretty damned far just using some basic rules.
- Set up a good visual hierarchy. This is the 20,000 ft stuff. Where is your navigation? Where is your content? Do you have indication about where you are and where you can go? Always keep in mind the way that a person reads the page. Top-left to bottom-right indicates how important something is. Bigger fonts are more important than smaller fonts. This is common sense stuff, but it makes a huge difference.
- White space. White space is a luxury, don’t be quick to give it up. Don’t crowd everything into as small a space as possible. White space helps you group information together for easier reading, and also makes a design seem less overwhelming.
- Pay attention to both consistency and variation. Consistency is extremely important in making a site look “designed” instead of slapped together. But don’t go too far. Consistency doesn’t mean everything is the same. Without a little variety on the page, everything blends together. So, for example, you need to make sure there is a difference between your header font (not-necessarily the font family, but the size, weight, color etc.) and your paragraph font. But you have to be consistent that every header of a certain level is the same. And you don’t want too many different fonts and sizes going on or it just looks too busy. This is where css is amazing.
- Colors. Colors, I think are that extra touch that most non-designers struggle with. It might be worth learning a little color theory to understand what colors work together, but here are a few tips. Think about it like decorating a room.
- Don’t use too many colors or your room will look like a carnival. Same with a web page. Pick 2 colors that work and just change the tint and tone to get more. This will set up a theme.
- Use subdued or neutral colors. The larger the area of color, the more subdued it should be. By subdued I mean both lighter and less primary. Imagine a room where the walls are painted a bold cherry red. Frightening. Vibrant colors work very well at attracting the eye, and can be used in smaller doses when appropriate. Like having a darker trim in a lighter room. It can work well on links or borders.
- Like white space, make sure that you decide on your base background color. This becomes the color that you really don’t see, your mind just fades it into the background. This is often times white, but can also be slightly colored or tinted. Use a lot of it. It creates breathing room and makes for a nice readable surface. Some designs use a darker color for the background, but I would leave that one up to the professionals. If you aren’t using white for this color, then white becomes a color that you do see. Try to follow the same rules with it as you would for a more vibrant color, because it will be the brightest possible color on the screen.
Beyond that list, it’s really just a matter of practice. As you’re working, show the design to someone else and listen to them. Look at other designs and try to work something you like into your design. Just remember to start slow. You don’t need the fancy stuff until the end. After you’ve gotten through the list and it looks pretty good but maybe a little plain, then you can add some extras. Some rounded corners here, and a logo there, and pretty soon it looks like it might just have been done by a designer.
Just remember that content is king. You aren’t creating the site for a design portfolio, so all the graphic design is really just about getting the content to the user in a way that is easily readable, navigable, and pleasing to the eye. A good design is one that the user doesn’t even notice, because if they do notice it, it’s probably getting in the way.