Web Page Design: Graphics and Layout

• Creating a web page is similar to creating a work of art, requiring careful consideration to convey a message effectively.
• Tips learned from creating effective PowerPoint presentations, especially regarding graphics and layout, can be applied to web page design.
• Basic principles of graphics and layout include balance, emphasis, movement, pattern, proportion, repetition, rhythm, and variety.

Balance

• The visual weight of space, colors, objects, and texture should be evenly distributed on the screen.
• Websites should be checked to ensure that one side holds an equal visual weight to the other, including similar visual weight for the colors used.

Emphasis

• Emphasis is an area that appears different in terms of shape, size, color, or texture.
• Emphasis aims to attract the attention of the viewer.

Movement

• Visual elements guide the viewer's eyes around the screen.

Pattern, Repetition, and Rhythm

• These rely on repeating visual elements on a layout or image.
• Repetitions create unity in the image.
• Visual elements create a sense of organized movement, achieving rhythm.

Proportion

• Visual elements create a sense of unity designed by visual elements that relate well with one another.

Variety

• The intention is to draw the attention of viewers.
• One means to achieve variety is to use several design elements

Infographics

• Information graphics, also known as infographics, represent information, knowledge, or statistical data in a graphical manner.
• Infographics are designed to attract the viewer's attention and make complex data visually appealing.
• Infographics are 43% more effective at persuading audiences, and 90% of information transmitted to the brain is visual
• Users respond better to visual information than text by 40%
• 28% of text is short ter memory, as images are generally long term memory
• Infographics can be 30x more likely to be read than text articles
• Infographics cause a growth of 12% in site traffic on average

Common Online Image File Formats

• There are various image file types, each suited for different needs.
• TIFF is great for printing.
• JPG or PNG are best suited for web graphics.

TIFF (.tif, .tiff)

• TIFF stands for Tagged Image File Format.
• TIFF files are lossless image files, keeping all information and image quality intact.
• TIFF offers options for compression.
• TIFF allows for very high-quality images.
• TIFF images can have larger file sizes.
• No compression, lossless compression, very high-quality images.
• Best for high-quality prints, archival copies, and professional publications.
• Can save transparencies.

Bitmap (.bmp)

• BMP stands for Bitmap Image File.
• Microsoft developed this format for Windows.
• No compression or information loss occurs, resulting in very high-quality images with very large file sizes.
• BMP is a proprietary format.
• It is generally recommended to use TIFF files instead of BMP files.
• No compression.
• Best for archival copies and high-quality scans.

JPEG (.jpg, .jpeg)

• JPEG stands for Joint Photographic Experts Groups.
• JPEG is a "lossy" format; the image is compressed to make a smaller file, resulting in some loss in quality.
• JPEG is a popular format for digital cameras and is very common on the internet.
• JPEG is ideal for non-professional prints and web use.
• Some file information is compressed or lost (lossy).
• Best for web images, PowerPoint, e-mail, and non-professional printing.
• You can choose the amount of compression when saving in image editing programs like Adobe Photoshop or GIMP.

GIF (.gif)

• Graphics Interchange Format or GIF files are widely used for web graphics.
• GIFs are limited to only 256 colors, which allows for transparency and animation.
• GIF files are very portable and small in size.
• Lossless compression, compression without loss of quality.
• Best for Web Images.
• Can be animated, can save transparency.

PNG (.png)

• PNG stands for Portable Network Graphics.
• These files are considered a lossless image format.
• PNG was originally designed to improve upon and replace the GIF format.
• Unlike the 256 colors that GIF files can support, PNG files can handle up to 16 million colors.
• Lossless compression without loss of quality.
• Best for Web Images
• Saves Transparency.

EPS (.eps)

• EPS stands for Encapsulated PostScript file.
• EPS is a common vector file type.
• Many illustration applications like Adobe Illustrator and CorelDRAW can open EPS files.
• EPS has no compression and uses vector information.
• Best for Vector artwork, illustrations.
• Saves vector information.

RAW Image Files (.raw, .cr2, .nef, .orf, .sr2, etc.)

• RAW images are images that a camera or scanner has created and are unprocessed.
• Numerous digital SLR cameras can shoot in RAW, whether it is raw, .cr2, or nef.
• RAW images are the equivalent of a digital negative.
• Holds a lot of image information.
• Must still be processed in an editor like Adobe Photoshop and Lightroom.
• No Compression.
• Best for photography.
• Saves metadata, unprocessed, lots of information.

Principles and Basic Techniques of Image Manipulation

• While platforms like Facebook automatically format uploaded images, running a website requires manual image editing.
• Balancing image quality and page load time is crucial when editing images for a website.