• Content--the body of information available to viewers. It is the
subject and substance of the text and graphics.
• Information architecture--the careful organization of web
content into hierarchical (or sequential) order.
• Social Media--Social media are online-based systems tjat allow
people to exchange information, ideas, visual media, and more
in a virtual community or network.
• Banner Ad—a small, paid advertisement that runs at the top or
bottom of a commercial website
What Do People Want and Expect?
• The Internet provides critical place for brand building.
• Social Media empowers people, focuses on here and now but
also on the fast read (with minimal real estate)
• Images read faster than text
• People want to find information, entertainment, education,
opportunities, access, sharing, community experiences, and
People also have come to expect a rich user experience.
What Do People Want and Expect?
• Designing for the web is typically collaborative, involving a team
Interactive designers must work cooperatively with
technology professionals to keep on top.
We depend on one another’s expertise and contribution to
the development of functional online design.
• Designing for the web is always changing
• Resolution is always improving
The Micro Challenge
• Interactive devices’ viewports come in different sizes and pixel densities.
• The largest screens are large-format walls and projection surfaces.
• The smallest is a mobile phone.
The most important issue when designing for screens is to streamline content.
Any mobile screen is simply too small for the amount of content that can be
Some designers advocate designing for the mobile screen first because it forces
you to streamline both content and design.
A. communication goals
C. form of content (text, images, video, interactive, combination)
2. Deal with technical constraints:
C. browser or site constraints
D. margin and padding requirements
E. live area, real estate, viewport
F. Other accommodating standards (pixel size, color limitations, font
• For visualization, there must be a consistent look and feel with
the existing or concurrent design of the brand identity.
• Limited considerations regarding color.
• With RGB color model you can’t control color on the monitor of
• It’s best to view your design on all types of systems and
Address Audience Psychographics
• The style can be as varied as that of any creative form, though
people are used to seeing photographic images online
• The style or look and feel must address the
motivations/preferences (values, lifestyle, and opinions) of the
The Universal JPG
Typically art and
advertisements for online
use will be converted to 72
ppi JPG in the last stage of
design. If you use a non-
standard typeface, you
always want to convert to
whole art in JPG format.
JPG formats are used for
browser placement but also
in electronic email
attachments and e-
Conceptual Development & Chunking
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.
General Interactive Concerns
• Respect the visitor by streamlining the design.
• Design for specific use, how it is used/conformity.
• Pull in information or entertainment seekers.
• Push them to larger info sites
• Design for the target audience—age, culture,
psychographic, and their respective devices.
• Design for the kind of site: Facebook, Instagram, Pinterest,
Twitter, YouTube, etc.
• 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
• The basic rules about type design apply to screen media but sans
serif is more readable.
• There are many typefaces available for use on screen, but with
templated systems these will be limited.
Voice and Branding
• Engage the visitor.
• Integrate design with brand identity.
• Prototype and test
• Ensure a logical information hierarchy.
• Offer or do something that traditional graphic media can’t.
• Offer a media-rich experience.
• Consider how the image is seen and used on different devices
• When possible, provide an intuitive interactive experience.
Apply all principles of composition.
• Grouping elements should enhance content and communication.
• The negative space around each visual element and between visual
elements reveals how they are related by meaning and function.
• Without contrast, all visual elements would look the same and yield
Contrast creates distinction, visual diversity, and makes a
distinction among visual elements, helping set up the hierarchy