A convention is a set of agreed, stipulated or generally accepted standards, norms, social norms, or criteria, often taking the form of a custom.

Deliverables:
Make sure your project folder is tidy and free of “crap”. I usually start off with a project folder containing a few sub folders.

- Docs ( Contains any Documents pertaining to the project, PDF, Doc, Links, or Text files )
- Html ( Contains the working code for the site, remember to make backups and date them )
- Source ( Contains Fonts, Stock Photos, Basically any original unmodified file )
- Design ( Contains the Photoshop and Illustrator Files )

When delivering a project i usually submit in the form of a ZIP, i prefer RAR but more people have some sort of ZIP program and usually doesn’t result in any one complying.

Find out from the client what they want. Some times the project is to large to be emailed and they might require that you upload it to a server, make to follow there specifications, don’t upload it to a public folder, and don’t post it on a non-secure website as a link.

If worst comes to works you can always sent them a CD, DVD or in person on a Memory Stick.

File Conventions:
General web formats would be GIF, PNG, or JPG. BMP or TIFF while they might work on some browsers are generally considered RAW and besides the large file size wont work and are just plain useless as a site image format.

I’m not going to discuss the potential drawbacks of these specific image formats but its important to know what files work for what situation.

Colour Conventions:
I’m not getting into the usability of colour and contrast but i still see the occasional file come my way that is destined for the web containing Pantone Colours or CMYK, there is nothing wrong with choosing your colours in either of these colour modes, but make sure you have proofed them and converted them into RGB.

It might not be common knowledge that your computer monitor is RGB and CMYK and Pantone are for print.

There is nothing more tedious that going through a large sites Graphic treatment and converting every single colour to RGB so when you slice and dice it up for the web every thing works correctly.

Layer Conventions:

Many times i have received files from other designers who might be used to the one man show were the design the site and develop it them selves. They have there own work flow and who an i to complain. But then working with others its best to supply your colleagues with all the information it the first pass.

In a Photoshop or Illustrator file its important to label layers clearly and maintain an organized layer structure. Grouping like elements or blocks of content together makes is much easer for the next person to pull out the information they need.

Try to structure the layers in a way that has some sort of hierarchy or flow to it. If you have a header and footer, then place them in there perspective locations in the file. No sense in having a footer above the header.

No matter how good you are in Illustrator its easy to have orphan point floating around that can cause confusion when grouping or selecting objects, i find its best to have a look over your file before its delivered.

Naming Conventions:
Say what you mean, weather or not you naming layers or coding functions or CSS classes be concise and to the point with your descriptions and naming. .blogPostBody is a clear and straight forward label for a class that wraps around the content. If we were to call it .blogPostBodyContentHolderOnTheMainPage its self explanatory but a little to detailed. on the other hand .content is a bit to short and might be hard to simply look at the code and know what your effecting.

Here are some common examples for Code, these are not specific to CSS of course.

CamelCase or CamelCaps:
starts off with a lowercase letter but and word after that will start with a capital.

Pascal Casing:
All words start with capitals.

Dashes [ - ] or Underscores [ _ ]:
Can be used with capital letters or left as lowercase, i find this is more readable but not as fast to type.

Code Formating:
Just like having a organized graphic file, your code should remain readable and easy to navigate, chances are you wont be the last set of eyes on the code.

Use indenting to maintain readability in CSS, in other code such as HTML use the use indenting to help illustrate the hierarchy.

Good:
This is much easier to scan for a specific element.

Bad:
This example with no formating at all is really hard to scan for an element.

Commenting Code:
I use comments as a means to set up a frame work in code, i also use comments in CSS and use them in a way a folder would act. Since CSS is line by line its nice to have an index at the top of your CSS file to indicate sections. This helps tremendously in informing others were a element might be located.

In conclusion if we were to all follow even some of these basic ideas would greatly reduce the amount confusion and in some cases redundancy. Whats more annoying than explaining to some one where to find all the files you created because you were unorganized and messy. Whats more annoying than being the person who cant find anything!

Its just like any sport, Keep it clean!

I hope some of these practices will help to make you more organized and hopefully more efficient in the long run.

No Responses to “ Designing with Conventions in Mind ”

Leave a Reply