View
5.537
Download
0
Category
Tags:
Preview:
DESCRIPTION
An introduction to the terms and concepts behind designing for the web.
Citation preview
Anatomy of a Website Header
Header: top area of a website; typically iden;fies the site/organiza;on name. OCen includes logo or iden;fying factor. This stays the same throughout every page in the site.
Source: www.womensrefugeecommission.org/
Anatomy of a Website Body
Body: Area of main text and images on a webpage. Can also include images and links.
Source: www.womensrefugeecommission.org/
Anatomy of a Website Links
Links: Code connec;ng one page to another on the Internet, or to download programs or files. Links should be visually separate from the rest of the body text, such as underlining, italicizing or making a different color.
Source: www.womensrefugeecommission.org/
Anatomy of a Website Links
Internal Link: Link to another page within the same website External Link: that points to another website on the Internet (highlighted above in yellow)
Source: www.womensrefugeecommission.org/
Anatomy of a Website Naviga;on
Naviga=on: Links to all the pages and content contained within a website
Source: www.womensrefugeecommission.org/
Anatomy of a Website Breadcrumbs
Breadcrumbs: Part of the naviga;on that indicates the page a viewer is currently on, and its loca;on within the site.
Source: www.womensrefugeecommission.org/
Anatomy of a Website Sidebar
Sidebar: Area on leC or right side of webpage template oCen containing items of interest such as links, RSS feeds and social media updates, etc.
Source: www.womensrefugeecommission.org/
Anatomy of a Website Footer
Footer: Area at the boUom of the page that typically contains copyright info, contact e-‐mail address, terms and condi;ons, etc.
Source: www.womensrefugeecommission.org/
Anatomy of a Website Other Important Terms
HTML (Hypertext Markup Language) The basic language of the Internet, HTML uses a series of tags to format and place content on a website, link pages, etc.
Anatomy of a Website Other Important Terms
CSS/Style Sheets: External document that controls the appearance of a website.
Anatomy of a Website Other Important Terms
Domain Name/URL: leUers, numbers, hyphens and underscores used to define where a website is located on the Internet. URLs are case insensi;ve and typically begin with “www” (some;mes just hUp://)
Source: www.marque4e.edu/comm/MUJournalism100
Anatomy of a Website Other Important Terms
Index Page: Home page or main landing site that visitors reach when typing in the website URL.
Source: www.marque4e.edu
Anatomy of a Website Other Important Terms
Meta Data: Invisible bits of code added to a site’s header that communicates informa;on about the site to search engines.
Anatomy of a Website Other Important Terms
Sitemap: Index of all informa;on and content on a site. Typically found on home page of the site (oCen near footer). Helps people find what they are looking for on the site and to help search engines find pages and links on the site.
Anatomy of a Website Other Important Terms
Form: Area with informa;on fields that allows user input, which is collected and sent back to the server.
Source: www.marque4e.edu/comm/MUJournalism100
Anatomy of a Website Other Important Terms
Resolu=on: Design for the most common viewing resolu;ons: 800 x 600, 1024 x 768 are commonly used and are easily viewable by most people. The way that a site displays on a screen is dependent on the browser used and whether it’s set for op;mized viewing; size of monitor and device on which the site is being viewed. 800 x 600 size makes the site most accessible for the largest number of people.
Source: www.marque4e.edu
Anatomy of a Website Other Important Terms
Resolu=on: Design for the most common viewing resolu;ons: 800 x 600, 1024 x 768 are commonly used and are easily viewable by most people. Larger size of 1280x1024 are easily viewable by people with large monitors and op;mized browsers. Viewers visi;ng the website on smaller devices (phones, laptops and tablets) will need to scroll horizontally across the screen.
Source: www.marque4e.edu/comm/MUJournalism100
Anatomy of a Website Other Important Terms
WYSIWYG Editor: Visual editor that allows the site designer to primarily work with the layout and design of the page rather than the code. Stands for “what you see is what you get.”
Source: www.weebly.com
Website Design Basics Before You Begin Designing
Target Your Audience. What type of visitor is most likely to visit your site? Consider age, gender, geographic loca;on. What are their values and goals? What types of colors and imagery might they find appealing? What common vernacular do they use? As the designer, consider any unique challenges posed by working with this audience. Are there any technological limita;ons? Are there any physical challenges, such as disabili;es or visual impairment that must be taken into considera;on?
Source: h4p://www.aarp.org
Website Design Basics Before You Begin Designing
The goal is to make sure that the message reaches the audience and emphasizes the overall mission statement. Consider running your design by someone in the target demographic to make sure that the site is easily used and understood.
Source: h4p://www.aarp.org
Website Design Basics White Space
White Space: Leave visual “breathing room” on the page to avoid over cluUering informa;on on the page. Keep pages simple and cluUer-‐free. Avoid cramming too much informa;on in one area of the site– this helps emphasize the informa;on present on each page.
Source: www.leica.com
Website Design Basics Type
Type: Type should be legible. Site uses clean, readable fonts and color combina;on with enough contrast. Tip: Avoid large areas of “reversed out” type (light text on a dark background), as this leads to eyestrain for viewers. Make sure that text and background have enough contrast to stand apart as separate elements on a page. Dark text on light background oCen works best. S;ck to common system fonts (Arial, Helve;ca, Times New Roman, etc)
Source: www.alistapart.com
Website Design Basics Type
Type: Break up large blocks of text into smaller paragraphs. This also helps with the visual flow of informa;on.
Source: www.alistapart.com
Website Design Basics Type
Avoid large areas of light type on a dark background; this leads to eye strain for site visitors.
Website Design Basics Type
Type: Header can use more decora;ve fonts; in this case, design the header as a graphic element in a design program such as Adobe Photoshop so that it reads as an image instead of text, yet s;ll preserves the appearance of the font.
Source: www.pallian.com
Website Design Basics Unity and Consistency
Create a consistent system of page templates and use these throughout the site design. Keep the header, footer, sidebars and any naviga;on in the same spot throughout the design. This helps ;e the individual pages together into one unit and avoids crea;ng too many varia;ons that lead to confusion on the part of the visitor.
Source:www.memphiszoo.org
Website Design Basics Unity and Consistency
Layout: Keep the most important content toward the top of the page. Hierarchy: Separate the informa;on on the page according to its importance and the order in which you want the reader to read it.
Source:www.one.org/us
Proximity: Similar and related content should be grouped close together on a page to indicate connec;ons.
Website Design Basics Unity and Consistency
Source:www.one.org/us
Website Design Basics Unity and Consistency
Create different type treatments for text headings, subheadings, pull quotes and body text to differen;ate these areas of a website; keep this design consistent throughout the en;re site.
Source:www.deliveringafrica.org
Design should use appropriate color and font choices to convey the site’s intended message. Keep a consistent use of a company’s brand color paleUe. Keep color paleUe consistent throughout the en;re site design in order to create unity between pages.
Website Design Basics Color
Source:www.aidsresearch.org
Website Design Basics Color
Consider color theory basics and how different colors work together. Colors should work well together, not clash or compete.
Source:h4p://mannafoodbank.org/
Website Design Basics Color
Colors also have different psychological meanings across world cultures. Consider the geography of your primary audience and how the viewers may perceive individual colors.
Source:h4p://wisergirls.org
Website Design Basics Color
Op=onal: When choosing colors, refer to a hexadecimal chart to create a consistent paleUe of colors. This will help to ensure consistency every ;me you use the same color throughout the site.
Source: www.december.com/html/spec/color.html
Website Design Basics Op;mizing Images
When including photos or graphics, make sure to op;mize for best quality and fastest loading ;me. Adobe Photoshop has a useful “Save for Web & Devices” feature that helps compress images for online viewing keeping them looking their best.
Website Design Basics Op;mizing Images
The “Save for Web & Devices” feature allows the designer to compare up to 4 images side by side at different quality and compression se/ngs. The boUom leC-‐hand corner of this window also displays file size and load ;me for each op;on.
Website Design Basics Forma/ng Images: Image Types
JPEG (Joint Photographic Expert Group) Another commonly used and compressed online image format. Suitable for: photographic images and anything with complex gradients and areas of blended color.
Website Design Basics Forma/ng Images: Image Types
GIF (Graphics Interchange Format) A compressed format used to save and display online images with flat areas of color rather than gradients. Images are reduced to 256 colors or less; this allows the file to remain small in size and load quickly. Loss of quality if images are too compressed. Suitable for: logos, computer/vector drawn graphics
Website Design Basics Forma/ng Images: Image Types
PNG (Portable Network Graphics) A format for encoding a picture pixel by pixel and sending it over the web. Small file sizes with no loss in quality when saved. Recommended by the W3 (World Wide Web) ConsorLum as a replacement for GIF images.
Website Design Basics Forma/ng Images
Watch image size and resolu=on. Pay aUen;on to the rela;onship between image size/document size (pixel dimensions with actual width and height), document size, resolu;on and file size. Images should be set at a resolu;on of 72 ppi for online viewing. Note: Using the “Save for Web & Devices” feature in Photoshop will do this automaLcally, also allowing user to opLmize file quality.
Website Design Basics Forma/ng Images
Avoid resizing small images to make them bigger. The result is oCen blurry or pixelated images, which makes the quality look poor.
Website Design Basics Quality Control
Check for spelling errors and/or any inconsistent or inaccurate informa;on. Make sure that the company’s name and the names of its employees and management are spelled correctly and that all contact informa;on is up to date. Naviga=on should be easy to use and consistent throughout the site. Forms should func=on properly. Always test any forms that will appear on the website. Links: Make sure all links are working, and that they point to the right target page. When using links to third party sites, make sure that the link opens the page in a new tab on the viewer’s Internet browser; this helps avoid steering traffic away from your site. Use ALT tags when placing images. Using “ALT” tags helps text reading soCware iden;fy images on your site, which in turn makes the site accessible for visitors with visual disabili;es. Cap=ons are provided for audio, video and photo files
Website Design Basics Quality Control
Use search-‐friendly page =tles that are self-‐explanatory to visitors. Be sure to use short, descrip=ve and relevant keywords in all page ;tles Test your site for compa=bility in a variety of browsers, especially the most commonly used ones (Internet Explorer, Firefox, Safari, Chrome, etc). Content should be kept updated frequently, and should sound conversa;onal to the reader. Naviga=on should be simple and all pages should be within 3 pages of every other page on the site. Avoid burying pages several levels deep on a website where it can’t be easily located. Loading =me: 2-‐5 seconds; no more than 10 seconds
Website Design Basics Quality Control
Avoid using Flash script. Flash content is not compa;ble with the majority of mobile devices such as smart phones and iPads; avoiding this ensures that your site can be viewed by the maximum number of people. Alterna;vely, you can also use style sheets to link to different versions of a website, providing a mobile-‐friendly HTML version for viewers using cell phones and tablets to view. Avoid adding automa;c music, anima;ons on the site, cluUered content, pixelated images.
Recommended