There are many web savvy technologists, developers, and other tinkerers out there that come to a point in time where they need to create a web site or design an app and want it to look nice, but they do not want to pay for a template already created or pay more to hire a designer to create a design for them. Here are some design philosophies, tips/tricks, and guidelines to follow in helping with your design.
As noted already, use a grid system to help deliver on some of these principles. A grid is priceless in helping with alignment, consistency, and balance. The constraints of a grid can help foster creativity and a 12 unit grid is your friend.
When starting your design off, sketch. Set a goal for the user of the design and start sketching thoughts on a design that meets that goal. Sketch more, and then sketch some more. Print out at least 10 pages of sketch sheets you can find online to fit the constraints you are designing within. At first, do more brainstorm type sketches by just letting your hands roam. Do a quick and dirty sketch, then move on to another. Create a bunch of these. Don’t erase anything, just keep sketching. Each sketch should only take about 30 seconds to a minute. Keep going until you have a lot of ideas explored. Take a step back and look over the sketches you have made. Pick some that stick out and start digging deeper on those ideas by creating some more detailed sketches where you spend whatever time is required to flush out the idea more fully. Sometime you may have an object that requires a lot of detail within your sketch that you can break out into other brainstorm, then more detailed sketches. If you are not sketching now, change that. I think you will be surprised how helpful and how many new ideas and breakthroughs in design that it leads to. Sketches are rudimentary, don’t feel like you can’t sketch just because you didn’t attend RISD.
The web is 95% typography. Most of what is seen online is type. A lot of people rush off and start picking colors or cool graphics for their site and pick any old type and run with it. Type is one of the most important details in your design, if not the most important.
Some common fonts that work great online are Helvetica, Georgia, Verdana, Lucide Grande and Times New Roman. The issue with Times New Roman is that it has been used so often. Helvetica tends to still look good when used with a bigger font size. If the font size gets real big and the letter spacing gets out of control, you can add a -1 letter spacing style to help with that. Georgia and Verdana tend to work well on low resolution screens.
Find some fonts that fit your style and build a library of fonts you will use in your designs. Getting to know your fonts and how they look/interact with different sizes and emphasis can be really helpful. When designing, try to stay with one font at first and sprinkle in, maybe one other for contrast. Mixing a Serif font with a Sans Serif font works well for contrast.
color wheel
Only use one, sometimes two dominant colors. If you use two, make sure that they have contrast.
Colors have meaning and can invoke certain feelings:
When adding color to a design, start with one color first and match up follow on colors from there. A good site to find great colors to work with and color pairings is Dribbble. You can explore designs by color on the Dribbble site through the Explore menu. Each design also shows a color palette used in the design and each color in the palette is clickable to bring up designs with that color.
rounded corners
shadows
text shadows
gradients
inspiration folder – Find a location, easily accessible where you can store screen shots of UI objects, pages or sites that you enjoy the design of. Any time you come across something you like or find intriguing, save it to your inspiration folder. Having a large supply of items for inspiration will be helpful in following a path where you may be ripping off another designers work.
Following the steps and utilizing the tools above will probably not get you a design award, but hopefully, there is enough there to get decent results on your own.
Some of the above are tips/tricks I picked up on my own, but most of it is straight from topics discussed and educated on in thoughtbot’s Design for Developers class. thoughtbot sells their workshops individually for $1000+, but you can sign up for the Learn program for $99 a month. You get a ton of value out of the program, access to all of their in house and online classes, membership newsletter with tips and tricks, all ebooks they have authored, access to a private campfire group to answer any and all questions and much more.