Web Graphics& Social Media

Definitions

• 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 transactions online 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

handled elsewhere. Some designers advocate designing for the mobile screen first because it forces

you to streamline both content and design.

Process1. Determine:

A. communication goalsB. constraintsC. form of content (text, images, video, interactive, combination)

Process2. Deal with technical constraints:

A. resolution C. browser or site constraintsD. margin and padding requirementsE. live area, real estate, viewportF. Other accommodating standards (pixel size, color limitations, font limitations, etc.)

Conceptual DevelopmentVisual Design• For visualization, there must be a consistent look and feel with

the existing or concurrent design of the brand identity.

Important Considerations

Color• Limited considerations regarding color.• With RGB color model you can’t control color on the monitor of

every user.• It’s best to view your design on all types of systems and

browsers.

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 audience.

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-newsletters.

Micro vs. Macro

Conceptual Development & ChunkingPositive 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.

Screens

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 layout.

Conceptual Development

Typography• 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. • Consider:

Legibility Readability Voice and Branding Contrast

Important Considerations• 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

and viewports.• When possible, provide an intuitive interactive experience.

Important Considerations

Apply all principles of composition.

Proximity• 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.

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.