2. Objectives Understand what people want from interactive experiences
Get the big picture
Appreciate web design as a collaborative effort
Know key steps in the website design development process
Understand design concept and visualization as applied to web design
Realize the need for engaging content
Grasp the basics of motion
Understand visual basics for screen-based media

3. Definitions
Websites are a collection of “pages” or files linked together and made available on the World Wide Web and are authored and owned by companies, organizations, and individuals.
Content is the body of information that is available to visitors. It is the subject and substance of the text and graphics.
Information architecture is the careful organization of website content into hierarchical (or sequential) order.
The visual design of information architecture is the navigation system.
Motion aesthetics refers to the process and consideration of how form creates impact over time in a design.

4. What Do People Want and Expect?
Desktop web design can provide a rich experience; it is a primary place to gather information—a place to share and explore. It also provides a critical point of contact for a brand and a place for community brand building.
People want and expect information, entertainment, education, opportunities, access, sharing and community experiences, transactions, and more.
What people also have come to expect is a frustration-free and rich user experience.
“Elf Yourself” (Office Max): Website
© EVB, San Francisco

5. What Do People Want and Expect?
Interactive designers need to take full advantage of specifically what each device can offer.
Desktop, tablet, and mobile are not the same devices, and people use them somewhat differently.
People now expect to touch, hear, and interact with screens in unconventional ways. Tactile interfaces can be soft, physical, stretchable, flexible, conductive, sonic, and so on.
Designing for interactive media is collaborative; it involves a team of experts who develop, design, and execute web design and applications.
Interactive designers must work cooperatively with technology professionals. These professionals depend on one another’s expertise and contribution to the development of a functional online design.

6. Screens
Interactive devices’ viewports come in different sizes and pixel densities.
The largest screens are large-format interactive walls, projection surfaces or tiled flat screen walls, or eighty-two- inch multitouch screens.
For daily personal use, the largest screen is the desktop or laptop computer, then a tablet, and finally, a mobile phone screen.
Although mobile screens come in a variety sizes and some have touch capabilities, the most important issue when designing for these screens is to streamline content.
Any mobile screen is simply too small for the amount of content that can be handled on a computer or tablet screen.
Some designers advocate designing for the mobile screen first because it forces you to streamline both content and design.

7. Screens For all screens: 1. Determine: A. communication goals
B. constraints
C. forms of content (text, images, video, games)
2. Deal with technical constraints:
A. design delivery
B. size of screen and resolution
C. browser and browser’s posture
D. margins and padding
E. live area, real estate, viewport
F. accommodating standard IAB advertising units

8. Screens General Interactive Axioms
Respect the visitor by streamlining the design.
Design for what the specific device can do, what people use it for, and how they use it.
Pull in information or entertainment seekers.
Design for the target audience—age, culture, psychographic, and their respective devices.
Design for the kind of content: video or motion, picture files, fixed images, type sizes, lots of text, little text, lists, and so forth.
Visual design is about clarity and engagement—make finding information easy, improve usability, and make the experience involving and interesting.
Responsiveness—with a variety of screens, create a flexible, adaptive grid or layout.

9. Websites
A collection of pages or files linked together and made available on the World Wide Web, websites are authored and owned by companies, governments, organizations, and individuals.
Purposes of Websites:
Websites serve a variety of sectors and functions:
Public service nonprofit groups
Organizations
Government
Commercial
Educational
Editorial
Reference
Institutional promotion
Transactional
Self-promotion
Social Media
Hybrid/experimental
Gaming
Entertainment
Video sharing
Photo sharing
Interest sharing
Blogs
Communities
Professional networking
Intranet

10. Websites Kinds of Website Projects
Interactive designers solve a variety of problems, including:
New website design and launch
Website redesign
Platforms
Global site design / redesign with room for local marketing differences
Integrated campaign design
Microsite (subsite) design
Blog design
Entertainment / game design
Online education design
Mobile web
Mobile apps
Tablet
Social media design
Interface design
The Green Building Institute: Website
© Substance 151, Baltimore

11. Website Development
Besides the usual stages of creating proposals and creative briefs, the web design application process requires thorough prototyping, where the site is created and tested for usability.
There are ten key steps in this part of the website development process:
Project plan
Creative brief
Site structure
Content outline
Conceptual design
Visual design development
Technical specs
Prototype
Technology
Implementation

12. Website Development Defining Web-Related Terms
Content is the body of information that is available to visitors on a website. It is the subject and substance of the text and images.
When providing content, good writing should always be a priority. Rules of writing apply to the web and other new and emerging media just as they apply to any print media.
Information architecture is the careful organization of website content into hierarchical order. For a user to easily move through—or navigate—a website, the content must be organized and structured in a logical way from general to specific.
The information architecture is the designer’s guide to the overall composition of the website and hierarchy of individual graphic elements.

13. Website Development Defining Web-Related Terms
The visual design of information architecture is the navigation system. A consistent visual structure is equally critical to ease of use and a frustration-free user experience. Many websites have several levels of navigation, including:
Portal navigation that leads to many other websites
Primary global or metanavigation within one website
Secondary or subnavigation (for second-tier information)
Single web page navigation
The home page is the primary entrance to a website and contains the central navigation system.
All navigation systems consist of visual and digital links that connect one location on a web page to another location, at either the same website or a different one.

14. Conceptual Development and Visualization
When judging websites for merit, there are basic criteria such as content, structure and navigation, visual design, functionality, interactivity, and overall experience.
Concept
A design concept is the driving idea—the backbone—of the planning for any interactive solution based on the content, strategy, goals, and the brief, which should address the specifics of the goals for the website.
The Expressive Web: Project
© Big Spaceship, New York

15. Conceptual Development and Visualization
Visual Design
For visualization, there must be a consistent look and feel with the existing or concurrent design of the brand identity.
Visual design is not just about visual impact or aesthetics.
Visual design is a marriage of form and function to ensure an effortless and worthwhile user experience.
Chicago Partners, LLC: Website
© Crosby Associates, Chicago

16. Conceptual Development and Visualization
Images
When selecting or creating images for the screen, think about:
Optimizing images
Loading time
Basic guidelines for formatting
Presentation: margins and padding
Consistency of presentation
Appropriateness of imagery
Size of images in relation to text
Style and media of images in relation to typeface selections
Consistent visual vocabulary for icons
The audience and how imagery will communicate to that mass audience
How different kinds of imagery communicate

17. Conceptual Development and Visualization
Typography
The basic rules about typography apply to screen media.
There are many typefaces available for use on screen, available for dynamic download from the cloud.
Additionally, when designing with type for the screen, consider:
Legibility
Readability
Voice and Branding (appropriateness for the brand or entity)
Contrast
Grids
When designing a grid or grid system, the purpose, marketing goals and objectives, creative brief (strategy), content, target audience, and design concept guide decisions.
Always remember that the grid should accommodate the content and not force the content into an unaccommodating grid.

18. Conceptual Development and Visualization
Grids
A grid for screen serves several functions:
Unifies
Determines Basic Anatomical Structure
Creates Visual Style
Facilitates Layout
Allows Easy Changes to Content
Establishes Geography
A strong grid creates a visual identity and maintains order.
A grid is most often used as the central ordering structure for a website.

19. Conceptual Development and Visualization
Grid Anatomy
The grid splits the page into columns with defined widths, spacing, and margins to establish positions for the standard elements on the page and alignment of text and images.
The visual design of a website grid has a master layout that guides the composition and placement of every element—text, headings, and graphics—from screen to screen.
Multicolumn Grid
Although single-column grids work well for simple documents, novel-like narratives, or mobile screens, multicolumn grids provide flexible formats for desktop web or tablet.
Modular Grid
A modular grid has consistent horizontal divisions from top to bottom in addition to vertical divisions from left to right.

20. Conceptual Development and Visualization
Positive and Negative Space
The negative spaces of any digital page are the planned areas that surround and separate content.
These blank areas help guide the viewer, separating the content through pacing, rhythm, and flow.
Negative Spaces include margins, the gutter, padding, line spacing, and paragraph spacing.
Glaceau: Website
© Big Spaceship, New York

21. Conceptual Development and Visualization
Important Points for Website Design
Respect the user’s time and goals.
Pages should load quickly.
Engage the visitor.
Integrate design of the website with brand identity.
Prototype and test, test, test!
Ensure a logical information hierarchy.
Offer or do something that traditional graphic media can’t.
Offer a media-rich experience.
Consider how the website is seen and used on different devices and viewports.
Provide an intuitive interactive experience.

22. Conceptual Development and Visualization
Color
A web designer does have special considerations regarding color.
The web is a screen-based RGB color model. You can’t control the color on the monitor of every web user.
It’s best to view your design on all types of systems and browsers.
Address the Audience Demographic/Psychographic
The style of a website can be as varied as that of any creative form.
The style or look and feel of a website must address the demographic (constituency) and psychographic (values, lifestyle, and opinions) of the audience.

23. Engaging Content
A rich user experience means the website actually performs or offers value; it is one where the visitor is not just passively looking through it.
As web, tablet, and mobile sites and apps proliferate, tools and features will become ever more important.
Television and print advertising are often used to drive people to the desktop or mobile web where they can interact with a brand or group.
As technology rapidly evolves, our mobile phones will become one of the most important players in carrying content.
Mobile, tablets, wearable computers, and emerging digital platforms have sister solutions or companion solutions related to website content.
A designer should understand how to link strategy, core concepts, and visual design across platforms.

24. Motion
Screen-based media can support graphics that move and incorporate sound.
To create moving graphics, one must be well acquainted with the necessary technical issues, production techniques, and software.
However, one must also apply graphic design principles to screen-based visual communications along with motion aesthetics and principles and the art of storytelling.
HTC G1 Launch Sizzle Reel
© Hornall Anderson, Seattle

25. Motion
A motion designer generates a concept and considers function, form, aesthetics, meaning, and ultimately, communication.
Whether moving graphics are incorporated into other screen media or stand alone, one must be conversant with the following considerations:
Concept generation based on strategy and brief
Theories fundamental to motion or animation
Narrative forms or storytelling (linear and nonlinear)
Planning of action
Sequencing of images for maximum impact and communication
Integrating different media (if relevant)
As with creating concepts and visuals for television commercials, screen-based media can involve narrative forms, sequencing of images and events, composition, and visual and motion variables.

26. Motion Motion Aesthetics
Motion aesthetics refers to the process and consideration of how form creates impact over time in a design.
An individual frame is a single static image, one of many strung together to create motion graphics.
Frames are created but connected and used in multiples over time.
A temporal relationship exists in screen-based media—the relationship or interplay between two separate events or images; this involves chronology—the order of events.
As in all graphic design, one must consider spatial relationships—the distance between the thing seen in relation to the viewer, how far or how close, and the shifts between near and far.
Rhythmic relationships in screen-based media can also be created by the duration of each shot and by the interaction of images with contrast and variation.

27. Motion Motion Aesthetics Fundamentals to keep in mind:
Tell a visual story based on a single well-defined design concept
Use color for unity, drama, and focal points
Changes in scale can create the illusion of spatial depth as well as the feeling of near and far
Contrast creates dynamics
Avoid flatness
Sound can help tell a story, create drama, create mood, and punctuate
Create visual beats

28. Visual Basics for Screen-Based Media
Apply all principles of composition. When considering the overall screen-based piece, the following are critical to create impact.
Proximity
Grouping elements should enhance content and communication.
All visual elements must seem related, but some visual elements will create groupings due to proximity.
The negative space around each visual element and between visual elements reveals how they are related by meaning and function.
Contrast
Without contrast, all visual elements would look the same and yield monotony.
Contrast creates distinction, visual diversity, and makes a distinction among visual elements, helping set up the hierarchy of information.

29. Visual Basics for Screen-Based Media
Repetition and Alignment
Repetition inculcates the audience.
Just as a hook in music (that is, a repeated series of notes or phrases) works its way into the subconscious of the listener, so too does visual repetition in the mind of the viewer.
Use of Typography and Graphics in Screen-Based Media
Determine headings and subheadings in terms of color, size, and weight to distinguish the hierarchy of type from one another as well as from visuals.
The conceptual interplay between type and visuals in print is much the same as in screen-based applications, except the bonus of motion adds potential for heightened dramatic or comedic effect.
How type interfaces with images in screen-based mediacan effectively communicate meaning both literally and symbolically.

30. Visual Basics for Screen-Based Media
Music and Sound in Screen-Based Media
Audio provides a strong component in screen-based media, leading to audience engagement and making the piece memorable.
“Inside the Medieval Mind,” BBC Four.
© RKCR /Transistor/Red Bee Media
RKCR/Y&R
(Uses “Purple Haze” by Jimi Hendrix)

31. Summary
Desktop web design can provide a rich experience; it is a primary place to gather information—a place to share and explore. It also provides a critical point of contact for a brand and a place for community brand building.
Interactive designers need to take full advantage of specifically what each device can offer.
Designing for interactive media is collaborative; it involves a team of experts who develop, design, and execute web design and applications.
A collection of pages or files linked together and made available on the World Wide Web, websites are authored and owned by companies, governments, organizations, and individuals.

32. Summary
Besides the usual stages of creating proposals and creative briefs, the web design application process requires thorough prototyping, where the site is created and tested for usability.
When judging websites for merit, there are basic criteria such as content, structure and navigation, visual design, functionality, interactivity, and overall experience.
Screen-based media can support graphics that move and incorporate sound.
To create moving graphics, one must be well acquainted with the necessary technical issues, production techniques, and software.

33. Summary
Motion aesthetics refers to the process and consideration of how form creates impact over time in a design.
When designing for screen, one must consider all the formal elements and apply all principles of composition.
Audio provides a strong component in screen-based media, leading to audience enthusiasm, engagement, and making the piece memorable.