Week 2
2/2

User experience (UX) Design, Semantic HTML5, Developing Content for midterm website, preparing images, and understanding color on the web.. Learn to upload files using FTP client and organize server space. Activity: Create HTML page for website you analyzed with eye on making your own portfolio. Activity: Activate the account school provides and upload first assignment.

Homework

1) Create landing page with links to assignment and worksheet. 2) Watch XU videos. 3) Create Workpage for portfolio site (8 steps). 4) Create content and markup your portfolio site. Read chapters 4-6. Due: The following week.

Questions from Last Weeks Class or Homework?

Goals

The goals of this unit are to:

• Understand the user experience that drives web design.
• HTML5 imposes semantic order with its tags.
• Steps to take in designing your Portfolio.
• Prepare images for use on the web
• Understand how to use color.
• Validate the HTML.

Materials

Additional materials for this unit can be found by following these links:

• User Experience (UX)
• Designing for the Web (8 steps)
• Color and Preparing Images for the Web
• Semantic Markup
• Browser Development Tools
• Midterm Presentation
  • First Week Links
  • Writing HTML
  • Tools of the Trade
  • Absolute and Relative Addresses
  • Setting Up Your Server Space
• HTML5 Template Playground
• HTML5 Element lookup.
• The Ultimate UX Guide
• Visual Literacy
• Worksheet Example
• Homework

Outcomes

At the end of this unit, students will have:

• Will consider the user’s experience when creating for the web.
• Have gone through the process of creating a web page and uploading so the whole world can see it.
• Transformed content into semantically correct markup.
• Used their server space to upload work.
• Created a valid HTML5 document.
• Checked the validity of that document.
• Prepare images for the web using the correct file format and resolution.
• Understand the hexadecimal (base 16) notation for RGB color.
• Basic styling of the document using inline CSS styles.

Step-by-Step

20	Review homework and answer questions.
10	Discussion: What did you find out when you analyzed the website?.
10	Lecture: User Experience (UX)
10	Discussion: user experience.
30	Demonstration: Designing a website from scratch
10	Discussion: Designing a website from scratch
10	Fetch and Text Wrangler Tips Is anyone is having problems uploading to their webspace? Let me know.
10	Break
10	Lecture: Semantic Markup
40	Writing semantic HTML5
20	Lecture: Preparing Images for the Web

Current Practice UX Design

Two newspapers, the Guardian and the NY Times have updated their websites. Actually, the Guardian is currently (Fall 2014) asking for feedback, as part of its XU testing cycle, asking for user feedback.

1. NY Times A standard setting newspaper that helped move the web away from its addiction to tables in 2007 has just been redesigned. using jQuery: UX Design considerations lead to a more engaging web experience. Read about the reasons behind the XU Design.
2. The Guardian tests its UXD for mobile.

   XU Case Study Club Best of (2018)

Celebrating Designers Openly Sharing Their Process.

More News and External Resources

Links to help you explore you explore the visual development of your Portfolio Site.

Atomic Design Book online

Definitions

These are the terms that participants should be familiar with during this unit:

Semantic Web

The Semantic Web is a “web of data” that enables machines to understand the semantics, or meaning, of information on the World Wide Web. It extends the network of hyperlinked human-readable web pages by inserting machine-readable metadata about pages and how they are related to each other, enabling automated agents to access the Web more intelligently and perform tasks on behalf of users. The term was coined by Tim Berners-Lee, the inventor of the World Wide Web and director of the World Wide Web Consortium, which oversees the development of proposed Semantic Web standards. He defines the Semantic Web as “a web of data that can be processed directly and indirectly by machines.”

User Experience

User experience (UX) is about how a person feels about using a product, system or service. User experience highlights the experiential, affective, meaningful and valuable aspects of human-computer interaction and product ownership but it also includes a person’s perceptions of the practical aspects such as utility, ease of use and efficiency of the system. User experience is subjective in nature, because it is about an individual’s feelings and thoughts about the system. User experience is dynamic, because it changes over time as the circumstances change.

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.

Web design

Web design is a broad term used to encompass the way that content (usually hypertext or hypermedia) is delivered to an end-user through the World Wide Web, using a web browser (e.g. Opera, Internet Explorer, Firefox, Google Chrome, Safari) or other web-enabled software to display the content. The intent of web design is to create a website—a collection of online content including documents and applications that reside on a web server/servers. A website may include text, images, sounds and other content, and may be interactive.

Information Design

Information design is the skill and practice of preparing information so people can use it with efficiency and effectiveness. Where the data is complex or unstructured, a visual representation can express its meaning more clearly to the viewer.

Information Architecture

Information architecture is defined by the Information Architecture Institute as:

1. The structural design of shared information environments.
2. The art and science of organizing and labeling web sites, intranets, online communities, and software to support findability and usability.
3. An emerging community of practice focused on bringing principles of design and architecture to the digital landscape.