Colour Key:
- || Page Links
- a. Site Menu
- || Emphasis Only
Getting
Colour (Color) & Layouts Right
There's a term used to describe design editors for the web 'WYSIWYG'.
It stands for What You See Is What You Get. Dreamweaver is a WYSIWYG
editor.
When sending a design layout for conversion to the web, WYSIWYG
stands for 'What you send is what you get.' Programmers/Coders need
layouts to appear exactly as
you want them to look as a HTML webpage. It's their job to then slice,
dice and code the webpage as close as possible to the original mockup.
Colour (Color) Calibration & Workflow Tips
Things to keep in mind when creating webpage and screen display
layouts;
- MACs and PCs render fonts at different sizes. Macs render fonts
at 72dpi, PC's render at 96dpi. When using a Mac to create a webpage,
keep in mind that the font will render 25% larger on a PC. 99.5%
of the target audience who visit a website are on PC's (except
if the website content is MAC or graphic design specific of course).
- Screen resolution is 72dpi and monitors
use the RGB colorspace.
When creating layouts in Photoshop or Illustrator, set the doc
res at 72dpi, RGB workspace and use the SRGB IEC61911-2.1 color
gamut. This gamut matches the colors rendered on most monitors
the closest. In Photoshop, work in the same proof set-up as your
color settings; View > Proof Setup > Working RGB.
- Calibrate your monitor to match the colorspace
and gamut that your working in. This is what the operating
system's "Display
Profile" is for. When working in RGB - load your RGB monitor
profile, when working for print, load the CMYK profile.
- Most webpage layouts are created to accomodate
800px X 600px or 1024px X 768px screen resolutions. The browser window eats into
that screen resolution, so the 'safe' dimensions to work within
are 768px X 410px and 1000px X 575px before cropping occurs.
- Don't leave page layout elements open to
interpretation. Ensure
that your artboard or canvas is the same dimensions as the desired
browser window. If the background for the webpage is red, then
set your canvas color to red. If you want a 40px margin around
the entire layout, position the page layout grid to within a 40px
margin.
We use screen callipers to measure layout element dimensions
for artwork provided by the contractor.
- Include a site color palette example with
the layout. Below is
an example of a color palette. When creating a webpage layout,
knock up the design grid first in Illustrator, then a color palette
on a hidden layer for fast color selection.
- When you inherit a website from a client who doesn't have original
design source files, load up their website and take screen captures
to duplicate layout files in Photoshop.
v2Media employs these tips help to reduce work-flow errors with
other contractors. We hope you both find them helpful too :)
