Week 5
2/23
Complete the Web Site. Styling navigation, site architecture, optimize site for search engines and implement Google Analytics to track users. Activity: Build website using HTML5 Boilerplate. Activity: Style navigation links. Activity: Open a Google Analytics account and apply the code to your web pages.
Homework
Develop your portfolio website. Read chapter 13. The Midterm Assignment is Due: Next week for review and midterm evaluation. Have it ready for in-class presentation two weeks from now.
Questions from Last Weeks Class or Homework?
QUIZ Next Week testing comprehension of CSS Layout Strategies.
Goals
The goals of this unit are to:
- Be acquainted with information architecture (AI)
- Create menus using lists and rollovers
- Incorporate SEO into web page design.
- Effectively troubleshoot documents.
- Extoll the role of typography in communication and design.
- Understand the basic rules of Typography.
- Introduce embedded web fonts.
- Be able to work the text and fonts in CSS.
- To be inspired to push the Typographic boundaries in creating your own work.
Outcomes
At the end of this unit, students will have:
- Created a menu using lists and image rollovers.
- Can Optimize a web site for search engines.
- Use HTML5 Boilerplate for your own website.
- Troubleshoot a document when you get stuck.
- A working knowledge of typography for use on the web
- Access the many web fonts available
- The ability to set type rather than rely on defaults.
- Be conscious of what makes type legible.
- know how to follow the rules, and when to break them for effect.
- Find inspiration in Carson discussing his work.
- A working knowledge of typography for use on the web
- Access the many web fonts available
- The ability to set type rather than rely on the defaults.
- Be conscious of what makes type legible.
- know how to follow the rules, and when to break them for effect.
- Be inspired by Carson discussing his work.
Materials
Additional materials for this unit can be found by following these links (30 pages):
- Information Architecture (IA)
- Styling the Navigation
- The HTML5 Boilerplate
- Browser Development Tools
- AI For Layout Help
- Search Engine Optimization
- Trouble Shooting
- Google Analytics
- Assessibility
- 404 page
- Print Style Sheet
- Quiz Answer
- Visual Literacy
- Homework
- Type on the Web
- Typographic Resource
- Formatting Text
- Web Fonts
- Character Encoding and entities lookup
- Visual Literacy
- Homework
Step-by-Step
| 20 | Review homework and answer questions. |
| 10 | Lecture: Information Architecture (IA) |
| 55 | Demo: Styling the Navigation |
| 10 | Break |
| 15 | Lecture: Search Engine Optimization |
| 15 | Demo: Google Analytics |
| 20 | Demo: The HTML5 Boilerplate (Watch the Video) |
| 10 | Demo: Print Style Sheet and 404 Page. |
| 10 | Lecture:Trouble Shooting |
| 10 | Demo:Adobe Browser Lab and video explanation (you need to sign up to use it) |
Definitions
These are the terms that participants should be familiar with during this unit:
- 404 Page
-
The 404 or Not Found error message is aHTTP standard response code indicating that the client was able to communicate with the server but the server could not find what was requested. The web site hosting server will typically generate “404 – Not Found” web page, when a user attempts to follow a broken or dead link, hence the 404 error is one of the most recognizable errors users can find on the web.
- Information Architecture
-
Information architecture (IA) is the art of expressing a model or concept of information used in activities that require explicit details of complex systems. Among these activities are library systems, Content Management Systems, web development, user interactions, database development, programming, technical writing, enterprise architecture, and critical system software design. Information architecture has somewhat different meanings in these different branches of IS or IT architecture. Most definitions have common qualities: a structural design of shared environments, methods of organizing and labeling websites, intranets, and online communities, and ways of bringing the principles of design and architecture to the digital landscape.
- User Interface design
-
User interface design or user interface engineering is the design of computers, appliances, machines, mobile communication devices, software applications, and websites with the focus on the user’s experience and interaction. The goal of user interface design is to make the user’s interaction as simple and efficient as possible, in terms of accomplishing user goals—what is often called user-centered design. Good user interface design facilitates finishing the task at hand without drawing unnecessary attention to itself. Graphic design may be utilized to support its usability. The design process must balance technical functionality and visual elements (e.g., mental model) to create a system that is not only operational but also usable and adaptable to changing user needs.
Interface design is involved in a wide range of projects from computer systems, to cars, to commercial planes; all of these projects involve much of the same basic human interactions yet also require some unique skills and knowledge. As a result, designers tend to specialize in certain types of projects and have skills centered around their expertise, whether that be software design, user research, web design, or industrial design.
- Principles of User Interface Design
-
Principles of User Interface Design are intended to improve the quality of user interface design. These principles are:
- The structure principle: Design should organize the user interface purposefully, in meaningful and useful ways based on clear, consistent models that are apparent and recognizable to users, putting related things together and separating unrelated things, differentiating dissimilar things and making similar things resemble one another. The structure principle is concerned with overall user interface architecture.
- The simplicity principle: The design should make simple, common tasks easy, communicating clearly and simply in the user’s own language, and providing good shortcuts that are meaningfully related to longer procedures.
- The visibility principle: The design should make all needed options and materials for a given task visible without distracting the user with extraneous or redundant information. Good designs don’t overwhelm users with alternatives or confuse with unneeded information.
- The feedback principle: The design should keep users informed of actions or interpretations, changes of state or condition, and errors or exceptions that are relevant and of interest to the user through clear, concise, and unambiguous language familiar to users.
- The tolerance principle: The design should be flexible and tolerant, reducing the cost of mistakes and misuse by allowing undoing and redoing, while also preventing errors wherever possible by tolerating varied inputs and sequences and by interpreting all reasonable actions.
- The reuse principle: The design should reuse internal and external components and behaviors, maintaining consistency with purpose rather than merely arbitrary consistency, thus reducing the need for users to rethink and remember.