7 Tips for a Successful Online Project
The world of online design has so many aspects it can easily be overwhelming. File size, browser type, image format, monitor width, and device type, are just a few of the considerations. Due to the many variables, it can be a daunting task to successfully design and publish an online project so here are some guidelines to help you out in designing / building a website, e-newsletter, and banner ad:
1. Document size – Just like printed projects you need to know how big the finished piece will be. Sometimes you as the designer get to choose your projects dimensions, like when you are designing a website. Other times, for example when you are designing a banner ad, you need to get the dimensions from the site that the ad is to be published on. Here are a few different projects and some of their standard sizes:
– Websites: The height of a website changes based on the length of content on a page, however the width of a site usually is from 850 pixels to 1000 pixels.
– E-newsletters: Just like websites, the height changes based on content length, but their width is usually right around 600 pixels.
– Banner ads: 220 pixels by 90 pixels, 300 pixels by 250 pixels, 700 pixels by 90 pixels and anywhere in between.
2. Templates – In the online world, templates can be used for websites, jQuery code pieces, Flash plug-ins, e-newsletters, and app programs. When designing for the web you can create your own, find free options, or purchase pre-made templates. No matter how you get your template(s), make sure that they are cross platform / browser compatible, user friendly, and can be built / used by your programmer. If you are the designer and programmer, make sure you understand how the template is supposed to work.
3. White space – White space is just as important online as it is in print. It gives the information and graphics room to breathe. White space can give the user the feeling of:
– Having a lot space – open and airy or possibly disjointed
– Just the right amount of space – everything is happy and has room
– No space at all – tight and confined
Be sure to design towards the first two options. Having information and graphics too tight will make it difficult for the end user read, navigate, or take action.
4. Image Size – Online graphics are viewed in pixels instead of dots – in print you have DPI (dots per inch) whereas in web you have PPI (pixels per inch). Images on the web are viewed in pixels, so it doesn’t matter what resolution you have your image in. As long as your images are the correct size for where they are going, 400 pixels by 250 pixels for example, they can be whatever resolution you want. However, when those images are printed they will look different than when they are on your monitor. Remember, your monitor reads pixels and your printer reads dots.
 Image Size: 300px by 242px – 300 PPI |
 Image Size: 300px by 242px – 72 PPI |
To get a better understanding of graphics on the web, click here to visit the Web Design Depot website and read their article “Thy Myth of DPI”. It’s a good read and goes into great detail about the use of images on the web, their sizes, and how DPI doesn’t matter.
5. Text Layout – Look at how your text is laying out and modify kerning (space between letters), leading (space between lines of text), widows (one word or phrase at the top of a column or page), orphans (one word at the bottom of a paragraph), and line breaks accordingly. And don’t forget to check your spelling!
When working with text in a website and e-newsletter keep in mind that they will be viewed in different browsers therefore making the text look different. Text in banner ads though will appear the same in all browsers since it will be a flat image, or animated SWF or GIF file.
6. Colors – RGB is the color spectrum used for the web. Colors and images can look different when viewed in RGB versus CMYK so keep this in mind when trying to determine what the final product will look like to people viewing your work. Also, depending on how you save your files you can change the amount of colors used in your design. A GIF formatted file can have up to 256 colors and as few as 2 colors.
7. File size, type, and requirements – The smaller your file sizes are the faster they will load into your website and e-newsletter. Some advertising sites require your banner ads to be under 100K to keep their site loading quickly.
Online advertisers also can require you to save your banner ad out as a GIF (animated or not), SWF, or JPG. And they can tell you that your animated ad can only rotate through the entire animation a specific number of times, or that there is a required code snippet that needs to be added to your ad for use on their site.
Different file types have different aspects and do different things. PNGs and GIFs can have transparent backgrounds, JPGs and PNGs show gradients really well, and GIFs give you smaller file sizes when you have big blocks of color.
I know it’s a lot to take in and this is just the tip of the iceberg for online work. There’s also code and style sheets to think of in website and e-newsletter design – but that’s a whole other can of worms that can be opened another day. These are just a few of the many variables to keep in mind when designing an online piece – but with these guidelines you will be on a great path to a successful online project.
