Top 10 Design Tips for New Designers
- by CJ, Purve.com and CelebrityBling.com
10) Style Sheets are your best friend
Until DHTML was invented, traditional print designers struggled with making html do the things they were used to doing in other software. DHTML is the designers programming language, with basic tags that control elements across an entire site. Style Sheets give you flexibility with word and letter spacing, a variety of 2d & 3d borders on tables, and control over the exact placement of elements on a page using layers.
9) Keep Everything to build your design assets
Sometimes, you may stumble on a set of filters or effects that look absolutely amazing, but that don't suit your current design at all. Make a new document and drag all of those layers into it, including filters or even a brief explanation of what you did. Save that document in a 'working' folder and add to it every time you have an idea that doesn't necessarily fit into what you are working on at the time. In almost 9 years of designing, I have around 50 gig of these types of files - and because of this, I am never short of a design idea, and my employees are able to use these elements to work in a totally different direction they may never have thought of. Every element that may shorten the time it takes you to complete a site, is a valuable designers asset.
8) Design for your Audience
Perhaps this is more relevant to me as I focus on designing for women, but I notice often that designers tend to design what they like rather than trying to put themselves into the position of the audience who will be surfing, and potentially spending money, at the site. Presentation (design) is the most important element of marketing, so if you are making design choices based on how many letters will fit into a space, you aren't putting your audience first.
7) Using Photographs in Designs
If you stand in front of a magazine stand and cast your eyes across the 'designs' of covers, you'll notice the photo on the front cover controls 99% of the design. Where the photo has black spots controls text placement, the colors in the photo influence the colors of text titles and the old saying applies - a picture tells a thousand words. Perhaps a better example than tabloid magazines is design magazines - interior design, architecture, advertising etc. If you have just the right photo, with just the right text, there is no more effective way to get your message across.
6) Learn how to compress images effectively
If an image isn't compressed effectively, a site can end up being 10 times bigger than it needs to be, so compressing pics is extremely important. Deciding whether an image should be a gif or a jpeg is something many seem to struggle with, but there is a simple rule I use to decide how to save an image. Jpeg is a pixel based compression format, which removes a certain amount of the pixels from an image based on the jpeg compression you choose. GIF format uses a web safe color palette of 256 colors, but you can choose exactly how many colors an image contains to make the size smaller.
The basic rule is that a photo should almost always be jpeg, and text should almost always be a GIF. Black text on a white background would be a gif, and when you save it you have the option to chose colors. While the only 2 colors are black and white, there are about 4 levels of grey which form the anti-aliasing around the edge of a letter, so you would set this image at about 10 colors. Photos which are black and white or which have few colors may be smaller as a gif than as a jpeg, so save it as both and check the file size of each to be sure.
5) Consistency creates Continuity
If your site uses a design element on the front page, but uses an entirely different element on every other page, you may as well not bother calling it a design. Before you set about building the content pages of any site, decide on your template by creating standards in a single document. Decide on a standard bullet point for displaying point form information, a dividing line to separate blocks of information, a font and color for main and secondary titles, and a font, color and size for block text. Attention to detail is extremely important - like making sure the tables and navigation are all the same width and positioned in the same place on the page are the difference between a site where the surfer flows from page to page, and a site where the server flows to somewhere else.
4) If you are color blind, stick with safe combinations
80% of a design is controlled by the colors ... the best design in the world will look like crap if its made up of colors that clash. There has been much research done into the psychology of color, and you can find a past article I've written on this in the archives. Try this experiement with a basic table that has cellspacing and cellpadding set to 5, 2 colums with several rows and the border set to 1 pixel #cccccc. Using a WYSIWYG editor, make each cell a different color, try every combination until you find one that works. If in doubt, use various shades of grey with 1 bold highlight color - see www.purvebucks.com for an example of an effective use of grey's and a normally offensive color, lime green.
3) Take inspiration from everything around you.
One of my favorite places to get design inspiration is the intro's of television programs, and the station id's that are dropped between shows - these have incredible graphics, even if they are only 5 - 15 seconds long. The News is also an interesting program to watch, as even the boxes with headlines across the bottom are a design, with elements most eyes wouldn't notice. Then of course there are the obvious ones like magazines, ads, business cards etc. I am a big fan of free postcards that you find in cafe's, and have collected about 1000 over the years - these are designed to achieve similar things to a paysite tour, making them a great place for inspiration.
2) Keep it simple ... and walk before you run.
A major key to being a good designer is knowing how to work within your limitations. If you aren't yet sure how to implement your ideas in a clean, aesthetically pleasing way, do something less complicated. Some of the best designs are little more than block colors with light grey table borders and a dot next to every heading.
1) Learn when to say 'that is good enough', so you can finish more sites.
One of the biggest mistakes made by designers while they are learning is to spend unnecessary amounts of time nudging a layer a few pixels to the left or right, deciding on a totally new design or adding new elements just for the sake of getting all those ideas into 1 design. If you are aiming towards a career as a designer, you'll have plenty of time to use bevel, overlay and outer glow, so you don't need to use every idea in each design.
|