Quiz Questions

1. Please explain the meaning and function of HTML.

HTML is Hyper Text Markup Language. HTML is the code underlying every web page. It is what makes a web page possible. HTML defines the structure and layout of a web page.

2. Please explain the meaning and function of CSS.

CSS is Cascading Style Sheets. CSS is used to control the layout and visual aspects of a web page. CSS is used to style the type, graphics, and layout of a web page.

3. What is Hosting?

Web hosting is the process or product of placing your files on a web server so the site may be viewed online. Web Hosting is the placing of the website online for general consumption.

4. What is the purpose of DNS?

DNS is Domain Name Server. Internet system to translate names into IP addresses to find devices.

5. What is the purpose of FTP?

FTP is File Transfer Protocol. Is a way to transfer files to and from a server.

6. What does the acronym HTTP stand for?

The Hypertext Transfer Protocol (HTTP) is an application protocol for distributed, collaborative, hypermedia information systems.[1] HTTP is the foundation of data communication for the World Wide Web. Hypertext is a multi-linear set of objects, building a network by using logical links (the so called hyperlinks) between the nodes (e.g. text or words). HTTP is the protocol to exchange or transfer hypertext.

7. What does the tool Word Press Accomplish for a Web Designer? WordPress has a web template system using a template processor to manage web site content to create web pages.

Word Press is a blogging tool and dynamic CMS to create and manage and maintain your website.

8. What does Joomala do for a Web Content Manager?

Joomla! is software that lets you make and update web pages easily.
You can think of a Joomla! website as bringing together three elements.

• Your content, which is mainly stored in a database.
• Your template, which controls the design and presentation of your content (such as fonts, colors and layout).
• Joomla! which is the software that bring the content and the template together to produce webpages.
  

enables you to build Web sites and powerful online applications. Many aspects, including its ease-of-use and extensibility, have made Joomla the most popular Web site software available. A content management system is software that keeps track of every piece of content on your Web site, much like your local public library keeps track of books and stores them. Content can be simple text, photos, music, video, documents, or just about anything you can think of. A major advantage of using a CMS is that it requires almost no technical skill or knowledge to manage. Since the CMS manages all your content, you don't have to.

9. What is Blue Host?

A professional inexpensive web file hosting service.

10. What is the “Z” Rule?

The “Z” Rule applies to the way users read whether on a web site or type written page.. The eye scans the page in a Z pattern reading left to right and then back to the left again.

11. What is the “F” Format in Web Design?

The F format is a way to design a web page so that it is in the shape of an F. It is a format shaped like the letter 'F ' to organize you work. Some templates are formatted this way.

12. Why is contrast in color important in Web Page Design?

In order to read text easily and to make it visually appealing to the user. Black on white has the most visual contrast.

13. Companies need to have a strong, consistent look throughout their collateral to establish and

maintain their brand. This is what separates them from their competitors.

14. Web sites need to be divided up into visual zones to allow the viewer to distinguish what

functions happen in each zone. One zone will be the navigation zone, one zone will be the

address zone, etc. It is to give order to the site.

15. You need to pick imagery that conveys the theme or message of the site. The imagery needs

to reflect visually what you are saying in your text. The imagery should bring the text "alive".

Web Design Process

The web design process is a mufti-faceted endeavor involving numerous steps, roles, players, and methods of assessing the success of the project. The first step in designing a web site is setting goals as without goals the web site project will quickly become adrift. The goals should include a mission and objectives especially when working with a development team.

Planning a website is a process where you first gather the development team, analyze needs and goals, and work through the development process. Next is creating a project charter document that contains the details of the website project as it is the blueprint the development team will follow. Finally, analyzing the website is critical to the ongoing importance of the website.

A step in the process is organizing a development team. The development team will contain the players of client/sponsor, project manager, usability lead, information architect, art director, web technology lead, site production head, site editor, and users. Some of these team member's roles will overlap which will occur during the design process.

The client/sponsor is the party desiring the website project and should be involved in the development of the website from beginning to end. They will be responsible for providing content and possibly maintaining the web site after development is completed.

The project manager is the go-to person who oversees the communication with the client/sponsor and development team. Roles of the project manager are based off of the project charter document to keep the development team focused on the strategic objectives and agreed deliverables. In smaller in-house projects the project manager may also serve as the sponsor, design lead, or technical lead. The project manager maintains project planning documentation such as the project planning and strategy documents, budget spreadsheets, project schedules, and Gantt charts, meeting notes, billing records, and other team activities documentation.

The usability lead shapes the overall user experience. The primary role is to serve as the advocate to the development team on behalf of the user through testing, research, and usability standards. The usability lead for evaluating the web site on success in meeting the goals, user satisfaction, and measuring outcomes in terms of site visits by users. The usability lead is involved throughout the development process.

The site information architect organizes and categories web site structure and content. The architect uses wireframes containing site content to link web pages to each other. This communicates site structure and user experience to sponsors and other development team members. The architect is usually involved at the beginning of the process.

The art director handles the overall look and feel for website. This includes deciding on typography, visual interface design, color palette standards, page layout details, graphics, photography, illustration, and audiovisual media elements. In smaller projects the art director can also assume the roles of information architecture and usability because of the specialty of their roles as art director. Branding is often a key role of the art director making sure the site is consistent with established corporate identity. The art director usually begins and ends with the development process.

The web technology lead is responsible for web publishing environments, development languages and web development framework, and database options and network technology. The web technology lead is the go between for the technologists and creative and project management roles of the team. An important task is content management involving extensive web technology skills.

The site production lead role is to create web pages. The site production lead utilizes the wireframes and mock ups of web pages to fill the web pages with content gathered from the client/sponsor. Typical web page creation utilizes web page software such as Adobe Dreamweaver to create templates and Cascading Style Sheets. The side production lead would assemble the work of the web technology lead and art director into the web pages. The site production lead might also manage the work of the site editor and copywriters. The roles of the site production lead would generally fall toward the near end of the web site development process.

The site editor oversees the content of the website. The tasks involve delivering content from the client/sponsor and creating new content. The site editor may also be versed in the technological aspects of web design as well. This also includes making the website search engine friendly by both internal and external engines. The site editor is involved from the beginning of the project and beyond as they may become the party responsible for maintaining the web pages.

The last step or more so an ongoing step occurs once the development team has been organized and individual members complete their roles and reached agreement in the project. This process step is assessing the success of the project usually through tracking, evaluation, and maintenance. Tracking can be done using web server software that provides information about the users of the website. This is critical in determining pages that are or are not being viewed, how many users are visiting the website, and more. An example of this type of analytical software is Google Analytics or the web hosting service can provide reports of log server data. Analytical software is critical to evaluating a website because it provides numbers that can be used to evaluate content.

Maintaining a website is just as important as developing a website so that it does not become abandoned becoming no more useful than not having a website at all. The site editor can be the owner of the website whereby maintaining on their own or coordinating a group of people to keep the website fresh and relevant to users. The purpose of maintaining a website is to keep users coming back to the website.

Overall, the process should cover what the goals and strategies are, who the users are and what do they want in a website, and finally what is the essential content structures, navigation, and interactive features needed. This information is critical to the development team in order to design the best website possible. Analyzing the web pages will help ensure the best website possible continues into the future.

Web Tools/Content Management

Adobe Design
Illustrator - illustration tool
Adobe Photoshop - picture tool
Slicing - slice a graphic, taking pieces you want, building in layers - elements
GIF - transparent background, line negative image
PEG - white background, photos, graduals
Keep original original, save all work
Google Images
Slicing - lower case, no spaces
Dreamweaver - web pages, tags, style in line, style sheet
Content Management
Joomla - open source code, free, blog, too much
WordPress - open source code, free, blog, too simple content management
Who is going to maintain web site?
Module group
Bluehost - hosting company
Control panel for Joomla and WordPress
Unlimited for $6
Control panel, install script iwwwh.net/webclass

Terms

Critical Analysis of a Web Page:

Use 30 Art, Design, or Web Publishing terms to describe as analytical analysis as to the

effectiveness of this webpage. (www.mayo.com) Describe in a list format sentence describe how

the terms were used and be specific where the terms are used?

1. Universal Usability - a qualitative measure of the experience of using a tool and phenomenon that can be measured and quantified as a concrete mean to judge the website's design effectiveness. It is simply a matter of clicking on the global navigation tool to obtain the information implied.
   
2. Content Inventories - detailed listing of basic information about all of the contents that exists in the site. The information covers the basics of the products advertized.
   
3. Hierarchies – is a way to order information on website by using color, font, and content. The color of the navigation is white but when a link is selected it changes color to indicate what the user wants to read. The size of the font is used to differentiate areas of the web page content.
   
4. Site Structure - determines how well sites work in the broader context of the web. The underlying web pages read well on this website.
   
5. Semantic Content Markup – the purpose is to convey meaning and content structure. The website conveys meaning through its content.
   
6. Golden Triangle - this is an area of a web page beginning in the upper left corner, across the top of the page, and then back to the left side below the upper corner. This is the way the eye travels across the web page. This website uses the GT on most of it pages.
   
7. Social Media – these are entities that bring people together to share experiences on shared topics. This website uses Facebook to bring together people who like the product on this website.
   
8. Search Engines – tools to browse the internet for information. The keyword Mayo when searched on the internet does not bring up this website. The links and web pages do not appear to be formatted to optimize a search of the website. The word mayonnaise does bring up the website fairly high in the search.
   
9. Site Map – a web page that lists keywords and topics related to the product and that can be utilized by searches. This website has a site map.
   
10. Page Structure – makes sites uniform and predictable. This website uses page structure in numerous ways. Zoning is utilized in the layout.
    
11. Breadcrumbs – is navigation device that shows the user where in the website they are located. This website uses a small, two word breadcrumb navigation.
    
12. Search – in addition to external search engines some websites use searches that search only the website locally. This website does not have a search feature.
    
13. Home – this is the website first seen by the user. Standardization of web pages usually has a navigation containing the word home, logo, and a tag line that are linked to the home page. This website utilizes all three of these features.
    
14. Internal Web Pages – these are the web pages not considered the home page. These pages vary from the home page but generally follow the same layout and navigation. This website follows the home page quite closely with the exception of the middle content area.
    
15. Tag Line – a statement usually found on the home page that explains what you do and what you have to offer. The tag line for this website is “Real Tastes Better,” meaning the product is real and offers good taste.
    
16. Drop Down Menus – this feature works in tandem with the navigation menu whereby clicking on the topic a list appears by dropping down. This website does not utilize drop down menus.
    
17. Uniform Connectedness – refers to relations of elements that are defined by enclosing elements within other elements, regions, or discrete areas of the page. This website uses the header to enclose elements of content into regions on the web page. It is done with font, color, and layout.
    
18. Contrast – the layout of a website must be distinguished from a blob of information into a visually interesting presentation. This website creates a strong, consistent visual hierarchy in which important elements are emphasized and content is organized logically and predictably.
    
19. Page Framework – this is the fundamental framework in terms of horizontal and vertical dimensions. The framework of this website is fixed so that no matter what size the browser window is all of the information is formatted to fit the browser window.
    
20. Page Length – page length is determined by the relation between page and screen size; content of document, browsing the content online or in print, and bandwidth available. The page lengths on this website are relatively short so that most of the information is easily viewed on small screens and requires little bandwidth.
    
21. Page Headers – this is the area defined in the zone at the top of the page from left to right and about 1 to 2 inches high. This is where the identity is first seen as the page loads and is considered critical. The header on this web site always appears with the logo, tag line, and global navigation.
    
22. Page Footers – This is the area defined in the zone at the bottom of the page from left to right and can vary in height depending on how much information is included. This website footer provides copyright and company information as well as navigation since the global navigation is not likely to be viewable from the footer position.
    
23. The Fold – designing web pages to take maximum advantage of current screen size and bandwidth of the average web reader. This website carefully uses the fold line in presenting the essential information about the fold line throughout most of the web pages.
    
24. Typography – this is the print used on a web page. The typography of this website is consistent and provides a subtle effect in establishing coherence across the web pages.
    
25. Typefaces – this refers to font and can be established by the web designer or browser. The font on this website is consistently clear and legible bringing a harmonious fit between the verbal and visual flow of the content.
    
26. Typefaces – this refers to font and most use a serif face such as Times New Roman or Georgia for body text and sans serif face such as Verdana or Arial a a contrast for headlines. This website uses Verdana throughout the body text and headlines varying the size and capitalization to differentiate hierarchy of content.
    
27. Typeface Color – can be used to differentiate type but must be carefully selected as some color is used to indicate special functional meaning like being a hypertext link. This website uses white but changes color to dark yellow when selected, thus letting the user know where on the website the user is located.
    
28. Inverted Pyramid – method for presenting information where the most important information represented by the base of the pyramid, is presented first and least important (the tip) is presented last. The most important information of the website is given on the home page by giving the global navigation content in the body of the web page. The individual navigation topics then give the content on their own.
    
29. Keywords – are given throughout the content so that users can skim before settling into more detailed reading. This website uses rotating text with pictures to catch the eye of the user to drill down into the global navigation and body text.
    
30. Titles and Subtitles – editorial landmarks that when consistently applied assist the user in navigating through web pages. This website consistently uses the same title and subtitles of home, products, recipes, where to buy and promotions on each web page so that the user knows where they are at all times.
    

Introduction/Syllabus/Principles of Design

Handouts for this presentation are at: http://moodle.augsburg.edu/moodle2011/mod/forum/view.php?f=3167

Presentation on Principles of Design was vague and hard to follow.
Form------------------
  Is the use of
  The elements of art
                                    Media

Form
Element - point, line, shape, color, texture
Principle
   Harmony       Variety
Balance
Movement
Proportion - parts related to whole - the whole being Gestalt
Dominance - emphasis
Economy - the amount
Space - illusion

Content
Form                             Subject                                    Content
Elements                        What is it about?                    Meaning
Principles                         Image

Constructive vs destructive

Aesthetic - what is beauty

Discuss art
Critique art
Abstraction - clarify, not structured

Graphic Design as Practice

The instructor gave a fast-paced presentation on graphic design as practice.   

•  Design
• Target audience - time sensitive, critical
• Appeal
• Marketing
• Structured
• Load quickly
• Color
• Avoid yellow
• Use complimentary colors - colors on opposite side of color wheel
• Use darker greens for text
• Use color to designate hierarchies
• Use consistent color throughout web site

• Standardize web pages
• Repeat info on each page in same area such as address, phone

• Images 
• Scale for web use so they are fast loading - do not make someone wait for something they do not want

• Goal is to keep person on web site for as long as possible in a good way
• Text
• Keep to a minimum, use Read More if necessary
• Use bullets
• Avoid long scrolls

• Search Engine Optimization (SEO) - searches web site for key words given in header and text, meta tags
• How to Design a website
• Use Z or GT (Golden Triangle) lay out - 1           2
• 3
•  

• other choices are Zig Zag 3 for F  1. - 2.
•                    3. - 4.
• Use upper left corner to display logo
• Phone on every page
• Keep navigation high on page
• Use designated space for things like
• Header, logo

• Font and color, use 12 pt so text site adjusts, helvetica, century schoolbook
• Use site standards
• Text made into image is unsearchable - keep text live so it is searchable

• Use Google Analytics
• Tells you what people are doing on your site

• Social Media
• Twitter - target audience 15-30 years
• Facebook - businesses

• Steps in Designing
• Appt
• Identify audience
• Help client identify what they can do for their customers and other critical ideas
• Identify a tag line
• Help optimize web site
• Help identify left navigation
• Who will maintain the web site
• DreamWeaver - more static, low maintenance
• Word Press - self manage

• Consider use of mail list managers
• Change things now and then
• Zones
• Avoid getting users lost or trapped on web site
• Expand on what is liked
• Dynamic - changing daily, hourly
• Open 24/7
• Judge book by its cover
• Consider a mobile site
• Don't list everything
• Hierarchy
• Different formatting
• Immediate

• Design Team
•  Client
• Designer
• Copywriter - goals, 400 words max, want know direction, what is competition
• Marketing - identify audience
• Photographer - good images, royalty fees; istockphoto.com, actiongraphicdesign.com
• Project manager - signed consent
• Google Analytics - update site, firm or client

Web Master/Blogs/Web Templates

The presenter spoke about blogs which are a way to communicate around info that a group of people have interest.  Blog tools mentioned were:

• blogspot.com
• blogger.com - Google - find address of blog in settings
• wordpress.com

You - School server (intranet) - server (internet provider QWest, Charter, etc.) internet - FTP Host server (File Transfer Protocol) and Hypertext transfer protocol are web page files