Web Card Descriptions
Return to Cards
User Experience Design (UXD). Web site creators must think about their prospective audience — who will use the site, what are they looking for, how will they navigate, do they have any accessibility requirements, and other questions. UXD is accomplished by making sketches of pages and of the navigation sequence between and among the pages. “Personas,” decriptions of imaginary, prospective users, can be helpful in planning the site.
Page and Site Design. After formulating the user experience, the designer must consider the overall design of the site and of the individual pages. How many pages will there be? Do the pages have a unifying banner? How will the menus be arranged? How many photos will be required, and what size?
Vector Graphics. These include diagrams and charts made with Adobe Illustrator and similar programs that define points, lines, and shapes using mathematical equations. Vector graphics are not use-specific like bitmapped graphics, or photos, and can be scaled to different sizes without loss of quality. File size is small. Vector graphics for the web need to be saved in Scalable Vector Graphics (SVG) format, or converted to appropriately sized bitmapped graphics like PNG, GIF, or JPEG format files (e.g., Illustrator’s File - Save for Web).
Photography. Web sites with images call for digital photography, generally with a digital single-lens reflex (DSLR) or mirrorless camera of 24 or more megapixels, although the quality of cell phone photos, and the artificial intelligence they use to exposure and composition, now competes with DSLR images. Images captured with red, green, and blue (RGB) filters reproduce a wide range of natural colours using these three primary colours.
Image Editing. Photos for web pages must be saved in RGB mode using compressed formats supported by browsers, including Portable Network Graphics (PNG), Joint Photographic Experts Group (JPEG), and Graphic Interchange Format (GIF). Continuous-tone, conventional photos look best when saved in 24-bit formats, including PNG-24 and JPEG, while the 8-bit formats PNG-8 and GIF are more appropriate for drawings or “comicbook color,” with relatively few colors.
To avoid excessive file size that slows download time and page loading, photos should be set to final size using an image-editing program. The microscopic mosaic of dots, or picture elements (pixels), that make up a photo should be set to a resolution of 72 pixels per inch (ppi) for web.
Web photos can be styled with CSS for width, height, border, box-shadow, and also used as links.
Page Layout. After the site and pages have been designed, the web designer can create the page structure in the hypertext markup language (HTML) tags and style them for size, color, and spacing using Cascading Style Sheets (CSS).
Preflight, Proofread, Test. When making a site or page in HTML, it’s recommended to place all files in a “gold master” folder on the local desktop. Open the pages in a browser. Check that all links work, photos load, and the design appears as intended.
Server Upload. The complete, tested site must be uploaded to a web server for public access. Typically the upload is done with a File Transfer Protocol (FTP) utility. The FTP program requires the user to enter the domain name, username, password, and port, and then to upload the “gold master” folder to the server. To access the files, users must have the Universal Resource Locator (URL), including the server, folders, and file names. Files named “index.html” will load automatically. For maximum reliability, it’s recommended to avoid capital letters and spaces in file names.
Google Analytics. Google Analytics is an algorythm that web developers can use for free. It compiles information on site visitors, including location, equipment, and browser. Analytics is implemented by registering for an account and then pasting a customized script code into the head of documents that are to be tracked.
User Feedback. Some site owners collect user feedback, such as ease of use, effectiveness, ability to find content by using surveys and other methods.