As you get into developing, especially at the start, you will begin to realize that you cannot entirely avoid working with design. Even if you aspire to be entirely back end, you will have to work with a designer to accomplish a task. The more you understand this aspect of your project, the more clear your objectives will be, especially within your code. Regardless, as beginner developers, we won't have the luxury of hiring designer to help us show of our skills as web architects. Most of our work will be displayed in small scale personal or freelance projects. Like it or not, the aesthetic of your projects will effect the impression they make, regardless of how pretty the code is. Because of this, I have created a list of 11 basic design rules to help even the most design-blind programmers enhance the look of their sites. Obviously, rules can be broken, but that is best saved for a time when you understand why that rule exists in the first place. So let's get started!
ONE. Readability is a big buzzword worth doing some research on. It has to do with how attractive the text on a page is a reader's eyes and how they process it psychologically. This is important for grabbing and keeping a person's attention, but to start, keep the length of body copy (lots of text) at 45-75 characters per line for comfortable reading.
TWO. There are several file types you will use for images. Rule of thumb is PNG-24/JPEG for high quality photographs and PNG-8 for everything else. PNG allows for transparent images (great for logos) and keeps file size down to a minimum, allowing your site to run smoothly.
THREE. Design on a grid (a set of vertical and horizontal lines which guide the alignment of different attributes on a page). This should be a major part of your wire-framing process when you first sit down and decide how you want your project to look. Alignment, like readability, is very psychological, and can go a long way for making users comfortable within a page/application. The grid, like the cloud, can be a slippery slope of "huh?", but don't read into it too much. Just remember that people like when things line up nicely (we are natural pattern makers, after all).
FOUR. Make large gaps between font sizes for visual hierarchy and division of your page elements. You can also consider color and weight to accomplish this, depending on the look you want. The point is to make obvious differences. Check out this Tuts+ article for more info.
FIVE. Don’t go below 16px unless you want your content to be equivalent to the speedy disclaimers spoken at the end of commercials that everyone hates.
SIX. Don't use more than than 2 font families (3 if you're desperate). Play it safe with one serif and one sans serif, OR one “display” font (the fancy kind) and one sans serif. This is a nice article about serif vs sans serif.
SEVEN. Icons are abundant on websites. Google will yield a plethora of free downloads in all styles, colors, and file formats. Ff you have no experience editing vector files, make sure you can get each individual icon in a .png file in the size/color you want to upload to your site. Here are some great flat icon packs and more. Another option is to treat your icons like fonts and use an online resource such as Font Awesome which you can incorporate into your code and edit (this comes in handy when dealing a lot with colors) much like web hosted fonts.
EIGHT. Pairing font families is an art, no, a science, and yes, it makes a huge difference. Often, when I already have one font in mind, I will google for pairings with that particular font. There are entire websites dedicated to great font pairs.
NINE. Choose a color scheme, and stick to it. If you are color blind, choose two complimentary colors, maybe 3. Black and white with one other bright color is also very in right now. This site is great for choosing colors and knowing their hex codes, and This site is great for browsing color themes others have created.
TEN. Integrating Google Fonts is free and universal. This is very useful for personal work and they have a ton of great fonts. Here is a great Design Shack guide on integrating google fonts into your site (it is so easy). Also, to reiterate the importance of font pairing, FontPair is dedicated entirely to great google font pairings.
ELEVEN. Finally, never use comic sans. Never use Papyrus. Never use brushstroke or Marker felt or Chalkboard or any of those corny title fonts that come with Microsoft Word. You will be made fun of. PROOF: Avatar Honest Trailer @ 1:55.