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

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.

Parsons students have experience with the language of design as it pertains to graphic design, illustration, fashion, product design, architecture, or photography, and so on. Lang students have experience developing cerebral arguments of one sort or another. There will be two main projects this semester: a portfolio and a final project. Each project follows the process of research/concept/sketches/comps/final. These steps need to be documented in a worksheet.

8 steps everyone needs to document in the worksheet before creating their website.

You are required to document each of your creative decisions in a Worksheet. I will use them to evaluate your midterm and final.

1) Develop Your Idea

Define the problem you are to solve when developing a web site. It is hard to create a good end product if the problem is not very well defined at the beginning.

Sometimes the problem is given to you by the client but the client does not alway know exactly what the problem is. It’s your job to figure that out.

Either way, develop your idea.

It’s hard to sell a bad idea.

This time you are your own client. That’s difficult.

Make sure that whatever you come up with will work and is worth the time spent making it real.

2) Discovery and Research

Discovery and research is the second step. You might have a good idea of what you want but test it by contrasting the idea with similar ideas that have already been executed.

Using OpenAI text is a great tool expand awareness of what the options are.

Google to see what others have done. The first assignment should have been a gigantic step in the right direction.

Find competitor web sites that have a track record that you can learn from, or have developed novel ways to express things that you are also desiring to express.

Tell me what you have learned and the conclusions you have reached from your research. I will be looking for that in the worksheets for both the midterm and the final projects.

3) Target Your Audience

Focus your energy by figuring out who your audience is, and target them.

Develop your content with that audience in mind.

Read the user experience article.

Go further and read Designed For Use by Lukas Mathis and develop a killer user interface because this excellent book will give you a good understanding of how user interfaces work, and work well, and what to look out for, to make sure that they do work.

Whatever you do, keep the user in mind.

4) Inspiration and concepts

Look for sites that inspired you. There are lots of examples out there and precedent to follow.

Then experiment Mood boards are one way to proceed.

Mood boards visually stimulate your design sense. You can test colors images, design elements, ideas, etc, as you develop your design intent. Print these out and place them on a board, or layer them in a Photoshop document. Playing with the visual hierarchy of like or contrasting elements can help gel the creative process.

Mood boards are used to develop the overall feel of a project, putting together images and objects which inspire, target desires and facilitate creativity and innovation in establishing the aesthetic feel of a web site.

Things to explore in a mood board include photography style, color palettes, typography, patterns, and the overall look and feel of the site. Soft or hard? Grungy or clean? Dark or light? A rough collage of colors, textures and pictures is all it takes to evoke a specific style or feeling. This process can act like a catalyst and save a lot of time and help focus in on your final design.

Come up with a couple of different design concepts for the project. The concepts should be based on research and the target audience. Gather up content and make a compelling case for each concept. Minimum of two concepts but no more than five.

5) Thumbnails and Sketches

Illustrate and explain each of your concepts. Once you are clear as to what your problem is, have content, and direction, the next step is to explain the best concept and develop a responsive user centered design solution using pencil and paper.

Sketches show how you arrived at the solution. They should start simple and remain small (thumbnails).

Explore responsive possibilities, from watch to phone to tablet to computer desktop and back again. Each device needs to present the concept organized in a way that is coherent for the device.

It takes many thumbnails to work through and develop a finished concept. You can’t tell ahead of time what will or will not work but you can separate out what doesn’t work ahead of time. Increase your success rate by staying with paper and pencil till you are clear about how to solve the problem.

Circle or otherwise indicate the concept you will develop. Take a picture of or scan the drawings and upload them to the worksheet.

6) Wireframes and Prototypes

Wireframes are simplified designs devoid of any style, type, color, pictures, or meaning. They are fast to create and explore different elements of your design, and provide feedback on the general layout, are easy to manipulate and change, to get it right, before filling in the details. Wireframes allow you to explore user flows and the different ways to structure your website, without having to design any elements or design any content.

Translate the picked thumbnail into a wireframe for each device category. One each for the watch, the phone, the tablet and the desktop. If you are using FIGMA, pick out a frame for each page, and each device.

The wireframe of a website is the skeleton of a web page assembled using boxes and lines. A wireframe is conducive to content placement making it easy to establish hierarchy, figure out functionality and navigation problems in a format that can be adjusted easily. Wireframes are lines or boxes with little text and few visual widgets that represent your website structure and help you establish hierarchy. It is a clean interpretation of the thumbnail that you selected to develop.

Wireframes and prototypes help you understand the big picture. Rapid prototyping helps you explore more ideas, faster. Don’t let yourself get bogged down in unnecessary details too early. Create your wireframe/prototype in prototyping programs, illustrator, or hand draw them, but be ready to recreate them using CSS and HTML.

7)Responsive Mockup

Software like Adobe XD and Origami allow for quick and amazing prototypes, tools that facilitate and realize user experience design on different devices. The tools are slick, but don’t prototype something you can’t possibly code. It is easy to get lost when prototyping. Stay focused on what you need to communicate to your target audience. Some prototyping software allows you to export to HTML and CSS. Avoid them. We are here how to code, and shortcuts turn out to be longcuts. The code they produce is uneditable for beginners.

Prototype tools are both web based and stand along products. These can all be used free. figma.com (you can also sign up to get their professional package for education free of charge), Invision, Mockplus, Facebook’s Origami, and Adobe’s XD. You can also use HTML and CSS. That’s probably the most useful way to develop your prototype as you will learn HTML and CSS. You’ll be required to transform your prototypes into an actual website in two weeks, after we’ve covered layout using CSS in Week 4. You have till then to perfect your prototype.

8) PhotoShop Comp

The last step is to create Photoshop/Illustrator comp of what your website is to look like on a phone, a tablet, a desktop screen.

Putting It All Together

The next step is to build the site using HTML and CSS. You have three weeks to accomplish that.

Think of the photoshop comp as the end. It is a strategy game to figure out how to achieve that end using the HTML and CSS you will learn in the next three weeks.

Break your design into the fundamental boxes that determine how your design moves through every iteration of your responsive design. It has to work on a smartphone where the finger-tip is huge and will quickly slide through the information vertically, to the large horizontal monitors with 50 inch diagonal screens.

Your site is to look good every step of the way. Figure out how to make the HTML and CSS work. That is the strategy. Figure it out by creating a simple wireframe representing the elements as they move though each iteration of the responsive experience.

Image Resolution

Images are placed on the web using the tag: <img source="url_where_image_is_located.jpg" alt="description of image" >

Images need to be prepared so they upload quickly. Use Photoshop to limit the resolution to around the same resolution as the screen that will be displaying it.

Image Size

The resolution should be 1 to 1, pixel for pixel, to the screen. That there are many different screen sizes and resolutions does not make this easy.

To keep the ratio of a picture on the web, only the width needs to be specified. The height will adjust automatically. For best practices, in the style sheet, set the CSS for images to 100% of the parent element: img {width: 100%;} and size the figure tag.

If the picture is too small or large, the browser will up or down resolve it to fit. Try to hit the sweet spot in image resolution, not too small, and not too large, and compress it appropriately, from 30 to 60 jpg compression, depending on its importance and size. Images that are much larger than what is needed interrupt the user experience.

How bit will the image be displayed? I will end up grading your work on a HD HDR (4k high dynamic range) 42 inch screen. Will I notice that the image has been compressed. Probably not. I will notice that the page takes too long to load an image. Figure out the sweet spot between image size, compression, and user experience. You want your pictures to load quickly. Apple uses something called Retina display, which doubles or triples the resolution. That means designing for the computer continues to operate as it always has despite the continual increase in monitor resolution.

Responsive web design makes it possible to switch out different resolutions depending on the device or bandwidth used.

Image File Formats

Gif Images (and PNG-8)

For graphic images that have large areas of solid color, like those produced with Illustrator, or strongly contrasting finely detailed lines like serifs in type, use GIF or the license unencumbered 8 bit PNG. GIF stands for Graphics Interchange Format. PNG stands for Portable Network Graphics. They reduce the 16 million plus computer colors to a look-up table of up to 8 bits, or 256 colors. It is possible to assign one of the bits to be transparent but it is a 1 bit off/on transparency, and not an 8 bit alpha channel that can produce a smooth transition. That means there is no antialiasing of the transition, which makes it look pretty ugly when placed any background whose color does not match. You can see that the image on the right does not blend into the background color. The blend ends abruptly as the transparency gives way to the pink background. When the backgrounds do match, the 1 bit transparency works fine.

This format works well to preserve type and other fine detail in the picture. Use PNG when saving Illustrator files. It has a compression routine that describes similar colors and it can be more effective and result in smaller files than Jpegs. Jpegs tends to soften strongly contrasting detail and adds artifacts that disrupt areas of solid color.

GIF Animations

Simple GIF animations can be created by using Photoshop or web apps like Gickr Gif Maker.

JPEG

Use the JPEG format (with the extension .jpeg or .jpg) for photographs. JPEG stands for Joint Photographic Experts Group. It’s the most commonly used method of lossy compression for photographic images, as photographs still look good even when they are a fraction of their original file size. Image degradation does occur when the compression is too great, so for good fidelity, use around 40%, or for high quality, like your portfolio images, use 60% compression. If there is a lot of noise or detail in the image, compression is less efficient.

With increased compression come artifacts. You may increase the compression till the artifacts become problematic. The example at the right is compressed at 10% to show off the artifacts but even at 60% introduces significant artifacts. That is why GIF and PNG-8 are preferred over JPEG for type and other finely detailed images. Before web fonts were widely available, titles were often set as a picture to maintain a typeface. GIFs are far superior than JPEGs for that purpose, as you can see.

There is no alpha channel associated with jpegs. That makes them rectangular, which is not always desirable. You would have to match the background if you want the image boundaries with the existing background color.

PNG-24

You can have the best of both worlds by using transparency with the 24 bit PNG format, which should really be called a 32 bit PNG format as it contains an 8 bit alpha channel. This format allows you to composite an image of any shape with perfect anti-aliasing, just like in photoshop. It renders all details perfectly, without artifacts. There is a price to pay, however. The cost of using PNG-24 is huge in terms of the file size, so be discrete in your usage of this otherwise marvelous format.

WebP

A new open format for lossy compressed true-color graphics on the web created by GOOGLE, producing files that were smaller than JPEG files for comparable image quality. Apple just included support for it in Safari, so it can become a web standard as soon as Photoshop and other image creation tools release WebP export. Google released WebPshop, a free webP export module for Photoshop.

HEIF

Apple’s replacement for Jpeg files, High Efficiency Image File Format, is not widely supported beyond Apple’s ecosystem, though the day will come when HEIF will be a web standard. Camera companies are starting to use it instead of Jpegs for storage. Like WebP, it will not become ubiquitous until image programs like Photoshop can export the format.

Save for Web

We all use Adobe products to prepare our images for the web. Use the save for web interface — command, option, shift S — to prepare your images, be it from Photoshop or Illustrator, and choose one of these methods. You can select the different attributes and compare the levels of compression and the quality.

Color

Color on the computer is composed of red, green and blue channels, or RGB, similar to the cones in our eyes. For the longest time the web used sRGB color gamut which can represent about a third of what our eyes can see. Because the monitors were not better, that was good enough. New monitors have a much wider gamut showing many more colors. This wider gamut is taken up by CSS Color Module Level 4. The following discussion uses the previous 8 bit color standard, where each RGB channel is allocated 256 levels of intensity. The computer starts counting its colors at 0 intensity, or off. The color, when all three channels are off, is black. If the red, green and blue channels are each at 255, or completely on, the color is white. There are over 16 million possible colors between black and white. The exact number is 256 x 256 x 256, or 16,777,216 colors.

8 Bits to a Byte

For the computer, each of the eight bits per channel represents a binary state that is either on or off. The number of different possible states that these 8 bits of information can form is 256. The computer functions in base 2. We function in base 10, because we have 10 fingers. Think of the computer as having only one finger that can be either up or down.

One bit is either off or on. That’s two possible states. Two bits make for four possible states. The bits can be off off, off on, on off or off off. If you were to add one more bit, you’d double the number of possible states because you get the same four possibilities twice. The first four with the third bit off and the next four with the third bit on. That makes for 8 possibilities with 3 bits. Adding another bit doubles this number again. This doubling continues each time another bit is added, so that 8 bits create 256 possible states.

One byte is composed of 8 bits of information. 256 represents the number of possibilities stored in one byte. Three channels at 8 bits each is known as 24 bit color. An additional alpha or transparency channel can be added as a mask, requiring 32 bits in all to describe the color state of each pixel in a png-24 image with transparency or a Photoshop layer. Know that Photoshop is essentially a calculator, calculating the 8 bits of information for each channel times four channels to arrive at the 32 bit layer. It then calculates all of the layers together to create a composite image. This is what you see when you’re working in Photoshop.

The Base 16 shortcut (Hexadecimal Numbers)

This color is 182 red, 161 green and 134 blue. To reduce space in web development, this color is often described, not in base 10, where the three RGB channels would take 24 bits, but in base 16, using hexadecimal notation, like this: #b6a186 . That reduces all three channels to only 6 from 24.

That is because programers divide the byte (8 bits) into two nibbles (4 bits each, or 16 possibilities) which corresponds into two hexadecimal numbers. Hexadecimal is a short hand way to write binary numbers and that make life easier for programers since they can describe 256 colors using only 6 digits rather than 0. See table of nibbles.

Hexadecimal is base 16. It is like having 8 fingers on each hand, or 16 fingers all together. We count that 0 1 2 3 4 5 6 7 8 9 a b c d e f. That’s 16 digits ain total. Two hexadecimal numbers can express a channel’s color: 16 x 16 = 256. Six hexadecimal characters can express any of the 16 million plus possible colors. For example, the hexadecimal b6 is the same as the base ten number 182 .

If the hexadecimal units are the same in each of the three channels, as in red: #ff0000 , it can be shortened to #f00 , green: #00ff00 , shortened to #0f0 , or blue: #0000ff , shortened to #00f . When all the channels are the same value, #888, the colors cancel each other out, and all that is expressed is the brightness value. #444 is dark grey while #bbb is light gray. If this sounds confusing, be glad we don’t use quantum bits to describe the color.

Hue Saturation and Brightness (HSB)

1. red is 0°
2. yellow is 60°
3. green is 120°
4. cyan is 180°
5. blue is 240°
6. magenta is 300°

It is not natural to think in terms of RGB. We think in terms of HSL. What color is it? How much color is there? How light or dark is the color? This is described by Hue, saturation and luminance (HSL), which takes three values: Hue is a degree on the color wheel from 0 to 360, where 0 is red, 180 is green and 240 is blue and 360 is red again. So is 720, or any other multiple of 360 — the colors repeat.

Saturation is a percentage value: 100% is full saturation and 0% is no saturation. Saturation works in conjunction with luminance.

Luminance is also a percentage; 0% is dark (black), 100% is light (white), and 50% allows for full chroma. The table on the right gives percentages of grey translated from hexadecimal, or base 16, with middle grey being #808080.

Connecting up the color with the degree is the least intuitive part of this more intuitive way to think about color but it is preferred over the RGB method of specifying a color. With HSL it is easy to increase the saturation or luminance for a particular hue, something that is not at all intuitive using RGB.

Change the Color of the Background

Color Names

You can use names instead of code. The name silver is a light grey. The actual code for silver is #c0c0c0 and it has an RGB value of 192 for each channel. Common color names are red, orange, yellow, green, cyan, blue, purple and pink. A list of all the names of the colors, with their Hexadecimal and decimal numbers:

Transparency

CSS3 also added the opacity property for transparency, or opacity. Add a slash to the rgb or hsl color definition and a value range from 0 to 1, with 0 being transparent and 1 being opaque. That makes .5 half way transparent. Examples: color: rgb(100% 0% 0% /.5), color: color(sRGB 0 1 0 /.5) and color: rgb(255 0 0 /.5) or color: hsl(0 50% 50% /.5)

color: color(sRGB 0 1 0 /.5) and color: hsl(0 50% 50% /.5) are part of the new CSS level 4 color specification. The CSS color module level 4 allows for wide P3 gamut colors beyond the sRGB gamut that has been standard for the last 20 years.

You can make any element transparent by using the opacity property.

To help you see the relation between the HLS and opacity, change the numbers in this demo. I’m sure you have a favorite color or color combination. Change some of these colors to your favorite colors:

Pick a Color: HSL Generator

Mother-effing hsl() by Paul Irish

Want to Know More?

A detailed and comprehensive explanation of using and compressing images on the web: Essential Image Optimization by Addy Osmani and a nerd’s guide to color on CSS Tricks. Smart Phones and new displays are able to use the expanded P3 color gamut that is 50% larger than RGB. Apple pioneered P3’s use and CSS Tricks has an article to explain it. The new CSS Color Module Level 4 specification.

Responsive Image Replacement

If you want serve different size images to mobile devices and desktop computers, read Fundamentals of Responsive Images.

CSS Color Module Level 4

To take advantage of the better color gamuts available on newer monitors, CSS color module level 4 introduces 12 new color formats in addition to the 4 that were available. Color Application written by Chris Liley of W3.org to convert from one color to another. The following links are taken from Chrome Developers’ High Definition CSS Color Guide article. There is sRGB Linear, LCH , okLCH , LAB , okLAB , Display p3, a98 RGB, ProPhoto RGB, XYZ, XYZ d50, and XYZ d65. That is in addition to the existing color spaces already available, , Hex , RGB , HSL , HWB.

sRGB linear expresses the new colors as if they were in the default RGB space before gama corrected. The resulting correction is non-linear sRGB. (There was no explanation for this in the article, in case you were wondering :-).

Publishing Your Work using Fetch

Everyone needs to publish their work on the web. We start the class by making sure that everyone can, using Fetch.

The server space is a lot like your desktop, only instead of folders, they are called directories. These servers are usually run by computers running Linux. These operating systems do not tolerate spaces, and lower case letters and capitalized letters (a and A) are two different letters. As long as you follow those rules, you should have no problem uploading files to your web space.

You can drag and drop between the Finder window and Fetch, and the document icon in Textwranger can also be dragged into fetch. Know that when you drag the same document into Fetch, the document will be overwritten without warning.

If you need more help, visit the Fetch help pages

Writing Code using TextWrangler

TextWranger is a free program that will serve as our text editor. There are a number of useful features that will make your life easier, including coloring the code so you know that you are doing it right, search and replace over multiple documents, show line numbers, invisibles, etc. If you need more help, download the TextWrangler Documentation PDF.

The most important features that you need to be aware of is that by clicking on the document icon, you go to it in the finder. You can use that icon to drag the file into the browser or into Fetch as well. The pencil locks the document, if you do not want to make any changes to one or another document (useful if you are comparing one document to another and get confused). The pop-up list shown as a box with the T has a number of useful preferences, including Soft Wrap Text and Show Line Numbers. At the bottom of the toolbar is a pop-up list that has the open documents in it, and next to that is a pop-up list that shows major tags and comments. This is one way to easily get around a long document, provided that you comment your work. Another useful feature for long documents is the ability to split the document window into two views, which you do by click and dragging the small grey rectangle right above the scroll bar.

The goal is to prepare a semantically well formed HTML document. How do we go about doing this?

Organizing the Content

Document structure before HTML5 was organized according to the hierarchy of header tags, which went from the most general to more specific, following the way content is created.

How content is created? In a well written document, the topic is expressed by the title. It is then supported by subtopics. This structure is duplicated in HTML. The main header expresses the title, and sub headers express the subtopics.

This hierarchy of headers used to be the only structure an HTML document had. The title is an <h1> header that explains what document is about. Second level topics are given a <h2> header, and if there are third or forth level topics, they receive a <h3> or <h4>. Headers become more specific as the levels go down, to level <h6>, the most specific header available in HTML. There is no <h7>.

Here Come the Machines, or The Semantic Web

We can understand the content of a web page, because we are cognizant beings. The World Wide Web was originally built for human consumption, and although everything on it is machine-readable, this data is not machine-understandable. It is very hard to automate anything on the Web, and because of the volume of information the Web contains, it is not possible to manage it manually.

It has been a goal of the 3W.org and of Tim-Berners-Lee in particular to overcome this problem. To that end, Tim Berners-Lee coined the term semantic web, and has simplified it to something he calls linked data. You can see this idea embodied in a discussion of statistics by Swedish professor Hans Roseling.

The goal of the semantic web project is to make machines understand, as far as possible, the meaning of the content from the structure and meta information contained in the markup itself. This would allow automated agents, like bots that cruse the web, to link up information in a meaningful way.

Such agents would automatically locate related information on behalf of the user. That would allow us to cut through the noise, so to speak.

The semantic web has been gaining ground, and is currently (2015) expressed as

In addition to the classic “Web of documents” W3C is helping to build a technology stack to support a “Web of data,” the sort of data you find in databases. The ultimate goal of the Web of data is to enable computers to do more useful work and to develop systems that can support trusted interactions over the network. The term “Semantic Web” refers to W3C’s vision of the Web of linked data. Semantic Web technologies enable people to create data stores on the Web, build vocabularies, and write rules for handling data.

HTML vs XHTML

HTML is tolerant of human differences in coding and allows for errors. That made it difficult for machines to understand the semantic meaning of the content. W3.org introduced XHTML as a way to clean up the excesses of human error. It saw XHTML as the future of the web, and was fully prepared to release XHTML2 as the future of the web back in 2005-6. Good thing for us that didn’t happen.

Based on XML, or extensible machine language, it would have make the web much more friendly for machines to repurpose the information, but at a price. Humans would have been required to write code with machine like accuracy to create all their web pages. To enforce that accuracy, draconian error handling would not render pages if they were not XHTML2 compliant.

A group of browser makers (Apple, Mozilla Foundation and Opera) revolted and came together in 2004 to form the Web Hypertext Application Technology Working Group (WHATWG). They created HTML5 in response to XHTML2, making it forgiving to human error, even standardizing how errors are to be resolved, and introduced new tags that would allow for a more semantic web.

The messy world of human error won over the more perfect coding world of machines. XHTML 2.0 was canned by the W3.org and was allowed to expire in 2009, officially recognizing HTML5 as the way of the future. It should be noted that there is an XHTML5 version, for machines to read and write, but we need not be concerned with that.

You can view the differences between HTML and XHTML in this Table. To provide but one example, while XHTML requires all starting and ending tags, HTML is quite cavalier about it, so that both starting and ending tags are optional for the html, head and body tags. A well formed HTML5 document can start and end with the content itself. End tags are optional for li, dt, p, tr, td. I personally started to leave these out as the W3.org site itself leaves them out. I figure that they set the standard by which we are to measure our web pages. Roll over in your grave, XHTML2.

Tag Soup

The model for marking up a page is to let the CSS do all of the styling. This is most easily done by using the <div> tag for block elements and the <span> tag for inline elements, and then giving them id or class attributes: <div id="header">. <Div> stands for division, and is a generic element that, along with other block elements, can be thought of as boxes that divide the page. The <span> tag “spans” the content of inline elements. The content of inline elements are like characters, though they can be pictures, links or characters that make up the content of a paragraph.

Everything can be marked up with these <div> and <span> tags, and before HTML5, this is what a lot of people did, to the exclusion of using the other HTML tags.

The problem is that these are generic tags that do not impart any meaning onto the content. The over-use of these tags, called “classitis” and “divitis”, of which I have been guilty of in the past, contributed to a lack of semantically well formed web pages. Being semantically neutral, the markup could not be counted on to help machines understand the meaning of the content.

The solution is simple. Use the different HTMl tags to determine the content, and only use the <div> and <span> tags if necessary.

Imparting Semantic Meaning to the Markup.

The content can be structured so that it becomes more semantically meaningful, by using the header tags, specific tags, microformats and meta tags. HTML5 then comes along and introduces a number of new tags that help determine the document content’s. meaning .

Document Hierarchy and structure

As mentioned above, before HTML5, documents were structured using the header tags <h1> through <h6>. This does not always synch up with a designer’s gut reaction, which visualizes header 1 as bigger and bolder than header 2. This is how they are in the default browser style sheets. Designers then use these header tags according to their idea of the visual hierarchy.

This may or may not be correct, as the design’s visual hierarchy does not necessarily follow the semantic requirement that header tags reflect the structural meaning of the content. It’s possible, for example, to make a <h1> smaller and less bold than a <h3> if that is what the layout calls for.

Before HTML5, each document should have only one <h1> tag that expresses the title and purpose of the page. All of the subsequent content should be organized according to the <h2> through <h6> headers. With HTML5, each tag can have its own hierarchy of <h1> to <h6> headers, making it much easier to structure complicated documents.

Semantic Code Elements

Tags that describe the content are:

MicroFormats

Microformats are agreed upon classes used to tag certain information. Instead of making up your own name for the class, which would be specific only to your document, a name has become universally recognizable by convention. This is quite handy for things like contact information or calendars, and can be seen in Apple’s Address Book and iCal, which uses standardized microformats.

In this example, the contact information is presented with generic markup:

<div>
<div>Joe Doe</div>
<div>The Example Company</div>
<div>604-555-1234</div>
<a href="http://example.com/">http://example.com/</a>
</div>

With hCard microformat markup, that becomes:

<div class="vcard">
<div class="fn">Joe Doe</div>
<div class="org">The Example Company</div>
<div class="tel">604-555-1234</div>
<a class="url" href="http://example.com/">http://example.com/</a>
</div>

Structured data

To improve your website’s chances at being found in a search, Google recommends using structured data, which goes beyond the HTML elements used to display content to using microdata to give information about the content’s meaning. Google’s article on structured data. Microdata requires the use of a standardized vocabulary of which schema.org is the most used. Using such a vocabulary makes it possible to provide meaning for content that can be read by browsers, readings apps, search engines, and technologies like Apple’s watch. Implementing structured data is above what will be covered in the course, but you should be aware of structured data.

Accessible Rich Internet Applications (ARIA)

ARIA is a set of HTML attributes that define ways to make web content and web applications more accessible to people with disabilities. Where HTML5 provides some semantic meaning, javascript often does not, which makes for broken and incomplete transfer of information to people with disabilities.

W3.org provides for resources for how to address people with disabilities. They even provide stories of people with different disabilities so you can better understand the challenges they face. Ideally, web design address all possible cases. HTML 5 goes a long way to structure content in ways that make it accessibility for people with disabilities. As the websites produced in this course tend to be simple, well structured HTML5 documents will be the primary way disability compliance is addressed.

Meta Tags

Meta tags that described the content. They are used by bots to identify page content. This use to be especially important for search engine optimization but was abused. Google will still take them into account but they no longer have the weight they used to have.

Here is a list of some of these meta tags that can appear in the header of the web page. You can use these yourself. Just fill in _missing_fields and delete unwanted tags.

• <meta name=”author” content=”All: _author_name_; mailto:_your@mail.here_” />
• <meta name=”owner” content=”_owner_of_the_page_” />
• <meta name=”generator” content=”_name_of_your_editor_” />
• <meta name=”publisher” content=”_publisher_of_page_” />
• <meta name=”resource-type” content=”document” />
• <meta name=”page-topic” content=”_page_topic_” />
• <meta name=”doc-rights” content=”_copyright_status_(Copywritten Work / Public Domain)_” />
• <meta name=”language” content=”_page_language_” />

HTML5

HTML5 added structural elements that provide additional semantic meaning, replacing the divs that would otherwise have marked up the page. Incorporate these elements into the structure of the document as part of its semantic structure. You can find out more about HTML5 elements here.

The HTML5 Tags help to structure your content/document

• main is an element that can be used only once per page. It represents the main content of the body. The main element may not be a descendant of a article, aside, footer, header or nav element.

• section represents a generic document or application section. It can be used together with the h1, h2, h3, h4, h5, and h6 elements to indicate the document structure.

• article represents an independent piece of content of a document, such as a blog entry or newspaper article.

• aside represents a piece of content that is only slightly related to the rest of the page. For complimentary content to the main content (Taken from XHTML 2.0 specification)

• hgroup represents the header of a section.

• header represents a group of introductory or navigational aids.

• footer represents a footer for a section and can contain information about the author, copyright information, et cetera.

• nav represents a section of the document intended for navigation.

• picture represents a container for multiple img elements that gives browser hints as to which img to display depending on pixel density, viewport size, image format, etc..

• figure represents a piece of self-contained flow content, typically referenced as a single unit from the main flow of the document, and used to attach a caption to that content using figcaption

  <figure>
  <video src="ogg"></video>
  <figcaption>Example</figcaption>
  </figure>

Kinds of Content

All tags fall under one or more kinds of content. The categories are

• Metadata content: base, link, meta, noscript, script, style, template, title
• Flow content: contains most elements.
• Sectioning content: article, aside, nav, section
• Heading content: h1, h2, h3, h4, h5, h6, hgroup
• Phrasing content: Inline tags
• Embedded content: audio, canvas, embed, iframe, img, MathML , math, object, picture, SVG, svg, video
• Interactive content: a, audio, button, details, embed, iframe, img, input, label, select, textarea, video

Additional Resources

Go further by following these links:

The A11Y Project: Accessible heading structure

UX Design in a nutshell

Two video shorts made by ADDIKT to describe the roll of the UX designer.

1. ILUVUXDESIGN part I from lyle on Vimeo.

2. ILUVUXDESIGN part II from lyle on Vimeo.

User eXperience

User Experience means making every visitor feel like your website was built just for them.

That there are User eXperience professionals demonstrates that the web has grown up just like print or broadcast. That it has grown up different from print is the nature of the hypertext links, interactivity and different form factors that the media takes. Web sites have become so complex and feature rich that they require the services of information architects and user experience designers. Websites designed in this class will not be as complex but the needs that drive the industry to create user experience designers is demanded of your work as well.

Fundamentals

In order for there to be a meaningful and valuable user experience, information must be useful, usable, desirable, findable, accessible, and credible.

• Useful: Your content should be original and fulfill a need
• Usable: Site must be easy to use
• Desirable: Image, identity, brand, and other design elements are used to evoke emotion and appreciation
• Findable: Content needs to be navigable and locatable onsite and offsite
• Accessible: Content needs to be accessible to people with disabilities
• Credible: Users must trust and believe what you tell them

Know The User

Users employ a number of shortcuts that have to be taken into account. They do not read the page linearly, and usually read only the top-left hand corner, if they read anything at all. They scan pages, usually spending little time on any one page, as if they are in a hurry. The user knows that they do not need to read everything, and they have gotten used to doing just that.

They can usually tell that they want and decide whether or not to continue in a fraction of a second, and that is all the time that you will have. If they continue, it means you aroused their interest.

When the user gets to a page, they often have something in mind and that is all they are interested in. This is not logical or rational but driven by a mix of desires called satisfice. Satisfice combines satisfy with suffice, and it means that a user will select the first reasonable match to what they are looking for that they find, not necessarily the best choice. Truth is, most users don’t really care to evaluate their options, and they will muddle through till they get what they are looking for.

How often do you read a manual before using a product? If you are like most people, rarely, and so it goes for web sites.

That means a web site has to anticipate the users’s habits if it wants to communicate effectively. You have to know the user. Most of you will be designing for peers, faculty or prospective employers, three very different users with different requirements. The challenge is to be clear about your audience and to target them in your writing and design.

Understand Experience

A website’s success hinges on how users perceive it. “Does this website give me value? Is it easy to use? Is it pleasant to use?” These are the central tenets of a user-centered design, and that’s the base line for beginning the design process.

Once you have targeted your user you have to design for them, and then test to see if this has actually been the case. Does the website provide value, is it easy and pleasant to use? This is the roll of user testing, and there are software packages that will help you facilitate this.

How does a web site provide good value? Easy to navigate will not be a problem with the web sites that you will create here. Will the web site provide that something extra to make it stand out? There are too many web sites out there to be just like the rest. You need to stand out!

What makes the user experience? Low barriers to getting what they are looking for, pleasant surprises and a good story. Ease of use, effective communication and novelty can be designed but a good story is integral to the developing and presenting of the content itself.

Good story telling gets the reader hooked on the protagonist. Once hooked, the author can tortures the hero until they break, at which point in time they somehow manage to overcome all obstacles for a cathartic resolution. A good writer will do that with each scene, emotionally grabbing the reader so that they cannot put the book down.

In the same way, a good design can turn a product into a coveted experience, one that satisfies something in the user by how it is presented, ideally anticipating the user’s actions and motivations, and can teach, motivate, persuade, inform or inspire the user, for that is how users form positive emotional experiences so important in successful communication. There is no joy if nothing resonates.

Create a Story

Create a website that has a story that is engaging and fun to engage, and not just coherent and informative.

Facts sit. Stories dance. About and bio pages come to life when they shape facts using the framework of a familiar, cherished story line.  Appealing narratives include:

• Underdog succeeds.  Since the days of the Bible, we love to root for David against Goliath, the unknown who overtakes from behind, the unglamorous tortoise who beats the boastful hare.
• Metamorphosis.  A caterpillar turning into a butterfly fascinates us.  Just beware of too many transformations in your story.  The butterfly then turning into a bird and then a monkey becomes bewildering.
• Discovery.  How did you invent, find or formulate what you’re now known for?
• Triumph.  A goal reached, obstacles defeated, the quest completed.
• Righting a wrong.  As long as the injustice remedied was uncontroversial to your audience, this makes a stirring tale.
• Unexpected joy.  Describe a surprising fun result from one of your efforts.

Look at this Op Ed video from NYTimes, where a political consultant shows just how powerful a good story can be.

Understand Information

A simple web site will seem pretty straight forward but as the complexity ramps up, the information architecture becomes daunting, especially since websites are not static systems but are in a continual process of being reinvented, and the content is continually repurposed. This is a fact of life for sites like the New York Times.

To manage the daunting amount of complexity, a process emerged to help manage it all. The treasure map is a list of user experience deliverables: stories, proverbs, personas, scenarios, content inventories, analytics, user surveys, concept maps, system maps, process flows, wireframes, storyboards, concept designs, prototypes, narrative reports, presentations, plans, specifications, style guide and design patterns. Not all of these will be useful to you but there are a lot of techniques to help you create and test the user experience.

Navigating the content is full of junctures where decisions are made. To prototype such decisions logical flowcharts are created called user flows. It is impossible to design an information hierarchy with fully loaded with content, so designers strip the content away and use wireframes.

Wireframes are an integral part of developing the web site, and each of you will get your chance to build one with the midterm project. Removing what the content looks like allows the designer to focus on the information hierarchy, of what comes where, not just on the page but throughout the site. Wireframes isolate user interaction by including only those elements that are absolutely necessary, like site navigation, headers, and content locations, and then only by empty shapes that allow the site to be easily modified to the user requirements before locking in the code.

The goal of the wireframe is to structure the content so it’s understandable and easy to use. The CSS’s box model is ideally suited for developing an interactive wireframe but first develop your ideas on paper in quick thumbnails. There is no better, faster and comprehensive way to foster your creative impulse to do good work than by using paper and pencil, and to sketch out what’s on your mind. A few minutes brainstorming will be followed with hours of less creative implementation, if not tedious and often frustrating development, so make these first minutes count.

Go straight from the thumbnail to the wireframe. If you were doing a more official site, the procedure would require you figure out the relation between the content and the navigation first. An information architect would do the following:

1. Write down and organize the site objectives.
2. List the content requirements.
3. Determine the appropriate page hierarchy for the site, be it top down or bottoms up.
4. Design the navigation to access this hierarchy. Note that the navigation does not need to mirror the hierarchy, and can take the form of a matrix, be organic, or even linear.
5. Standardize the navigation architecture with the organization of the content, and you are ready to create a complete diagram of the information architecture.
6. Create a wireframe mockup from that diagram which will show the placement of the navigation elements in relation to the content of the site.

Test and Test Again

All of this development does not happen in a vacuum. Mockups and prototypes are not enough. You have to build what you prototype and test it with real users, and test it, and test it until you know that it actually works.

Everything has to be user tested. How else can you learn that the user experience actually works?

You can’t watch over someone’s shoulder to test user experience. Software packages like silverback can follow the user as they go through the website. This kind of feedback can be invaluable. You have the opportunity to use this software at the middle and end of the course, to test your portfolio and final projects.

Download a free version of Silverback 2.0 to test your website!

Strive for Simplicity

KIS! Keep It Simple is the mantra. For emphasis, add a second “S.” KISS!

The user is concerned with the content, not how it is presented. The presentation should be like the cuts in a movie: transparent, intuitive and emotionally effective. The design should not get in the way of the user experience, period. Keep it simple!

The Landing Page Critique

If your landing page does not capture your audience, they will not go further, and you will have lost your chance to communicate. The landing page is a marketing campaign, not just a design problem.

To help you along, Unbound has a number of videos to make you think twice about how to put a landing page together. Take the time and watch their constructive video critique. It should help inspire you to do the right thing when it comes to your own landing page.

Apple’s User Experience Guidelines

Apple’s done a great job implementing user experience guidelines from the very beginning. We can all be thankful that Steve Jobs oversaw the creation of the Macintosh and the Next Computers, both of which pushed intelligently designed user interfaces from the beginning. The new way forward at first appear a step backward, as a finger is not nearly as precise as a mouse but precision is not what user interaction is about, and immediacy has won out.

These are the devices including the MacOS, iOS, watchOS, and tvOS covered by Apple’sHuman Interface Guidelines. User experience revolves around streamlined interaction with content that people care about. Here are some points:

• Focus on the Primary Task
• Elevate the Content People Care About
• Think From the Top of the screen Down
• Give People a Logical Path to Follow
• Make Usage Easy and Obvious
• Strive to make your content instantly understandable to people,
• Make the main point of your content immediately apparent.
• Be consistent
• Use User-Centric Terminology
• Minimize the Effort Required for User Input
• Enable Collaboration and Connectedness
• Brand Appropriately
• For the best user experience, you want to quietly remind users of your identity.
• Avoid taking space away from the content people care about.
• Entice and Inform with a Well-Written Description
• Be sure to correct all spelling, grammatical, and punctuation errors.
• Keep all-capital words to a minimum.
• Be Succinct
• Think like a newspaper editor, and strive to convey information in a condensed, headline style.
• Give buttons short labels, or use well-understood symbols, so that people can tell what they do at a glance.
• Use Design Elements Consistently
• Consider Adding Physicality and Realism
• Use appropriate animation to further enhance realism in your application.
• Delight People with Stunning Graphics.
• Consider replicating the look of high-quality or precious materials.
• When appropriate, create high-resolution artwork.
• Make Targets Fingertip-Size
• Give tappable elements in your application a target area of about 44 x 44 points.
• Use Subtle Animation to Communicate
• Add animation cautiously
• Make animation consistent
• Restrain Your Information Hierarchy

Apple TV

User Design experience adapts to whatever experience the device delivers. Apple has a clear explanation of the User Experience on Apple TV. Watch it to see how to design for Apple TV. It is all about the living room experience and sitting at a distance across the room, unlike a desktop computer or an iPhone. Platform design goals (principles) are to be (1) connected, (2) clear and (3) immersive. Good explanation and examples throughout.

Apple Website

Apple’s website has been one of the goto sites for design but look at its early incarnations and you realize how much it’s changed.

Google User Experience Manifesto

As you can imagine, there is a lot more to this that you had probably thought about when you entered the class. That is how it goes. I want to leave you with Google’s Googlification, if that is a word. This is their user Experience manifesto.

Our aspirations

The Google User Experience team aims to create designs that are useful, fast, simple, engaging, innovative, universal, profitable, beautiful, trustworthy, and personable. Achieving a harmonious balance of these ten principles is a constant challenge. A product that gets the balance right is “Googley” – and will satisfy and delight people all over the world.

Ten principles that contribute to a Googley user experience

1. Focus on people, their lives, their work, their dreams.
   The Google User Experience team works to discover people‘s actual needs, including needs they can‘t always articulate. Armed with that information, Google can create products that solve real-world problems and spark the creativity of all kinds of people. Improving people‘s lives, not just easing step-by-step tasks, is our goal.

   Above all, a well-designed Google product is useful in daily life. It doesn‘t try to impress users with its whizbang technology or visual style – though it might have both. It doesn‘t strong-arm people to use features they don‘t want – but it does provide a natural growth path for those who are interested. It doesn‘t intrude on people‘s lives – but it does open doors for users who want to explore the world‘s information, work more quickly and creatively, and share ideas with their friends or the world.

2. Every millisecond counts.
   Nothing is more valuable than people‘s time. Google pages load quickly, thanks to slim code and carefully selected image files. The most essential features and text are placed in the easiest-to-find locations. Unnecessary clicks, typing, steps, and other actions are eliminated. Google products ask for information only once and include smart defaults. Tasks are streamlined.
   

   Speed is a boon to users. It is also a competitive advantage that Google doesn‘t sacrifice without good reason.

3. Simplicity is powerful.
   Simplicity fuels many elements of good design, including ease of use, speed, visual appeal, and accessibility. But simplicity starts with the design of a product‘s fundamental functions. Google doesn‘t set out to create feature-rich products; our best designs include only the features that people need to accomplish their goals. Ideally, even products that require large feature sets and complex visual designs appear to be simple as well as powerful.

   Google teams think twice before sacrificing simplicity in pursuit of a less important feature. Our hope is to evolve products in new directions instead of just adding more features.

4. Engage beginners and attract experts.
   Designing for many people doesn‘t mean designing for the lowest common denominator. The best Google designs appear quite simple on the surface but include powerful features that are easily accessible to those users who want them. Our intent is to invite beginners with a great initial experience while also attracting power users whose excitement and expertise will draw others to the product.

   A well-designed Google product lets new users jump in, offers help when necessary, and ensures that users can make simple and intuitive use of the product‘s most valuable features. Progressive disclosure of advanced features encourages people to expand their usage of the product. Whenever appropriate, Google offers smart features that entice people with complex online lives – for instance, people who share data across several devices and computers, work online and off, and crave storage space.

5. Dare to innovate.
   Design consistency builds a trusted foundation for Google products, makes users comfortable, and speeds their work. But it is the element of imagination that transforms designs from ho-hum to delightful.

   Google encourages innovative, risk-taking designs whenever they serve the needs of users. Our teams encourage new ideas to come out and play. Instead of just matching the features of existing products, Google wants to change the game.

6. Design for the world.
   The World Wide Web has opened all the resources of the Internet to people everywhere. For example, many users are exploring Google products while strolling with a mobile device, not sitting at a desk with a personal computer. Our goal is to design products that are contextually relevant and available through the medium and methods that make sense to users. Google supports slower connections and older browsers when possible, and Google allows people to choose how they view information (screen size, font size) and how they enter information (smart query parsing). The User Experience team researches the fundamental differences in user experiences throughout the world and works to design the right products for each audience, device, and culture. Simple translation, or “graceful degradation” of a feature set, isn‘t sufficient to meet people‘s needs.

   Google is also committed to improving the accessibility of its products. Our desire for simple and inclusive products, and Google‘s mission to make the world‘s information universally accessible, demand products that support assistive technologies and provide a useful and enjoyable experience for everyone, including those with physical and cognitive limitations.

7. Plan for today’s and tomorrow’s business.
   Those Google products that make money strive to do so in a way that is helpful to users. To reach that lofty goal, designers work with product teams to ensure that business considerations integrate seamlessly with the goals of users. Teams work to make sure ads are relevant, useful, and clearly identifiable as ads. Google also takes care to protect the interests of advertisers and others who depend on Google for their livelihood.

   Google never tries to increase revenue from a product if it would mean reducing the number of Google users in the future. If a profitable design doesn‘t please users, it‘s time to go back to the drawing board. Not every product has to make money, and none should be bad for business.

8. Delight the eye without distracting the mind.
   If people looked at a Google product and said ”Wow, that‘s beautiful!” the User Experience team would cheer. A positive first impression makes users comfortable, assures them that the product is reliable and professional, and encourages people to make the product their own.

   A minimalist aesthetic makes sense for most Google products because a clean, clutter-free design loads quickly and doesn‘t distract users from their goals. Visually appealing images, color, and fonts are balanced against the needs for speed, scannable text, and easy navigation. Still, ”simple elegance” is not the best fit for every product. Audience and cultural context matter. A Google product‘s visual design should please its users and improve usability for them.

9. Be worthy of people’s trust.
   Good design can go a long way to earn the trust of the people who use Google products. Establishing Google‘s reliability starts with the basics – for example, making sure the interface is efficient and professional, actions are easily reversed, ads are clearly identified, terminology is consistent, and users are never unhappily surprised. In addition, Google products open themselves to the world by including links to competitors and encouraging user contributions such as community maps or iGoogle gadgets.

   A greater challenge is to make sure that Google demonstrates respect for users’ right to control their own data. Google is transparent about how it uses information and how that information is shared with others (if at all), so that users can make informed choices. Our products warn users about such dangers as insecure connections, actions that may make users vulnerable to spam, or the possibility that data shared outside Google may be stored elsewhere. The larger Google becomes, the more essential it is to live up to our “Don‘t be evil” motto.

10. Add a human touch.
    Google includes a wide range of personalities, and our designs have personality, too. Text and design elements are friendly, quirky, and smart – and not boring, close-minded, or arrogant. Google text talks directly to people and offers the same practical, informal assistance that anyone would offer to a neighbor who asked a question. And Google doesn‘t let fun or personality interfere with other elements of a design, especially when people‘s livelihood, or their ability to find vital information, is at stake.

    Google doesn‘t know everything, and no design is perfect. Our products ask for feedback, and Google acts on that feedback. When practicing these design principles, the Google User Experience team seeks the best possible balance in the time available for each product. Then the cycle of iteration, innovation, and improvement continues.

Is UX For You?

A compendium of insight, resources, instruction, and wisdom for anyone who wishes to know more, or get an overview of XU as a career. The Ultimate UX Guide With All The Secrets You Need To Know

UX Crash Course: 31 Fundamentals

want to learn more? Joel March has put together what 31 fundamentals. They are short and to the point, and an illustration of his XU Perspective in which everything rotates around XU.

Introduction & Key Ideas

#01 — What is UX?

#02 — User Goals & Business Goals

#03 — The 5 Main Ingredients of UX

****

How to Understand Users

#04 — What is User Research?

#05 — How to Ask People Questions

#06 — Creating User Profiles

#07 — Designing for Devices

#08 — Design Patterns

****

Information Architecture

#09 — What is Information Architecture?

#10 — User Stories & Types of Information Architecture

#11 — What is a Wireframe?

****

Visual Design Principles

#12 — Visual Weight, Contrast & Depth

#13 — Colour

#14 — Repetition & Pattern-Breaking

#15 — Line Tension & Edge Tension

#16 — Alignment & Proximity

****

Functional Layout Design

#17 — Z-Pattern, F-Pattern, and Visual Hierarchy

#18 — Browsing vs. Searching vs. Discovery

#19 — Page Framework

#20 — The Fold, Images, & Headlines

#21 — The Axis of Interaction

#22 — Forms

#23 — Calls-to-Action, Instructions & Labels

#24 — Primary & Secondary Buttons

****

User Psychology

#25 — Conditioning

#26 — Persuasion

#27 — How Experience Changes Experience

****

Designing with Data

#28 — What is Data?

#29 — Summary Statistics

#30 — Graph Shapes

#31 — A/B Tests