Continuing our series on design vernacular and comprehension, today we will be discussing aspects of web design. There are many things that cannot be done in web that can be accomplished in print and vice versa.
RGB – Light has its own color base consisting of red, green, and blue. Everything that is emmitting light to the eye is displaying in this color frequency (e.g. television, computer monitors, phone screens, portable game systems, etc). While CMYK varies through tones, RGB color displays are modified by using different levels of brightness from its electronic source. RGB is the format for which we design web elements because it is being displayed on a monitor (or a light source).
Each diagram shows the RGB level of brightness
Web Colors – Not all colors display evenly across multiple browsers or on other monitors. It is important to use web colors to insure (as much as you can) that everyone is seeing relatively the same thing. This can be accomplished through using Hexadecimal notation, also referred to as hexdes or just HEX. With the combination of Red, Green, and Blue values from 0 to 255, more than 16 million different colors are possible. Each color has their own number/letter correspondence. So if you want to make sure all colors are the same, use the HEX. Without realizing it, during the wild years of MySpace and LiveJournal people used hexdes to make their posts more sassy.
Pixels & Resolutions - In the digital world everything is made of pixels. A pixel is a single point(or dot) in a raster image. Pixels are responsible for resolution. Display resolution dictates how many pixels can be displayed in that designated area (i.e. the more pixels per inch you can display – the better the resolution). Also note that the higher the resolution the bigger the assets tend to be. The standard pixel resolution for web is 72 ppi or 72 pixels per inch (or dpi – dots per inch). This is the main reason why images made for web cannot later be translated to print. Most print documents range from 150 ppi on the low end to 300 ppi on the high end.
Resolution is just one aspect of producing web assets. Once the resolution is set, the asset needs to adhere to pixel height and pixel width. When creating a website, for instance, the canvas size is usually 1024 x 768 (with larger monitors in mind) but can vary depending on what browser/monitor size you are trying to accommodate.
Monitor Size - Pixel Ratio Relationship
Web Safe Fonts - All computers have different sets of fonts. A graphic designer may have close to a 1,000+ fonts on their computers, whereas most computers come standard with about 30 or so. In order to display text for all to see, web standards dictate that only a select number of fonts can be utilized. These are the fonts that come standard to every computer. So when designing for the web – it is important to know if special fonts are used, they have to be imaged (made into a picture instead of text). If you want the text to be “scrapeable” meaning you can copy and paste it from the web, you have to use web safe fonts. To see what they all look like click here.
Dreamweaver Font Dialogue Box
Image Formats – while there are many image formats, the three main types specific to web are:
- JPEG (Joint Photographic Experts Group) is the most common. It’s a flattened image able to support 24 bits per pixel of color (16 million colors) and 8 bits per pixel in grayscale. Jpegs are referred to as “lossy”, meaning as they compress, image data is discarded or “lost”. When compressed lower or scaled beyond its original pixel dimension – jpegs display what are called “artifacts” which is noticeable pixel distortion.
Artifacts & Jpegs = Nasty Mix
- PNG (Portable Network Graphics) is the second most common and the most used in modern web development. PNG’s are a lossless compression image format which also allow for 24 bits per pixel of color (16 million colors) and 8 bits per pixel in gray-scale. The beautiful part about pngs, and perhaps why they are being used more, is that they can handle transparency. Unlike a jpeg – when you save a png on a transparent background it will display that way. The reason this is so nice is, you can have them on any background color and it will appear natural.
Compare and Contrast
- GIF (Graphics Interchange Format) is now less common but still in use. The png was actually created to replace the gif seeing as how it can accomplish more. GIFs deal in 8-bits but can also handle transparency. GIFs were more popular in the infacy of the internet due to their animation ability. People used gifs like stop motion stills to make movable images. For the longest time this was the alternative to video which was taking too much computing power in the early 90s. They have found a resurgence with digital artists.
The Gif of movement by Jamie Beck
That about wraps it up for the web portion of Mi Casa. I hope that it was both informative and exciting!
Until next time….