Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Web Graphics
& Social Media
Definitions
• Content--the body of information available to viewers. It is the
subject and substance of the text and graph...
What Do People Want and Expect?
• The Internet provides critical place for brand building.
• Social Media empowers people,...
What Do People Want and Expect?
• Designing for the web is typically collaborative, involving a team
 Interactive designe...
The Micro Challenge
• Interactive devices’ viewports come in different sizes and pixel densities.
• The largest screens ar...
Process
1. Determine:
A. communication goals
B. constraints
C. form of content (text, images, video, interactive, combinat...
Process
2. Deal with technical constraints:
A. resolution
C. browser or site constraints
D. margin and padding requirement...
Conceptual Development
Visual Design
• For visualization, there must be a consistent look and feel with
the existing or co...
Important Considerations
Color
• Limited considerations regarding color.
• With RGB color model you can’t control color on...
The Universal JPG
Typically art and
advertisements for online
use will be converted to 72
ppi JPG in the last stage of
des...
Micro vs. Macro
Conceptual Development & Chunking
Positive and Negative Space
• The negative spaces of any digital page are the planned ar...
Screens
General Interactive Concerns
• Respect the visitor by streamlining the design.
• Design for specific use, how it i...
Conceptual Development
Typography
• The basic rules about type design apply to screen media but sans
serif is more readabl...
Important Considerations
• Engage the visitor.
• Integrate design with brand identity.
• Prototype and test
• Ensure a log...
Important Considerations
Apply all principles of composition.
Proximity
• Grouping elements should enhance content and com...
Upcoming SlideShare
Loading in …5
×

Social media

147 views

Published on

Basic social media concerns for the graphic designer

Published in: Design
  • Be the first to comment

  • Be the first to like this

Social media

  1. 1. Web Graphics & Social Media
  2. 2. 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
  3. 3. 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.
  4. 4. 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
  5. 5. 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.
  6. 6. Process 1. Determine: A. communication goals B. constraints C. form of content (text, images, video, interactive, combination)
  7. 7. Process 2. Deal with technical constraints: A. resolution 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 limitations, etc.)
  8. 8. Conceptual Development Visual Design • For visualization, there must be a consistent look and feel with the existing or concurrent design of the brand identity.
  9. 9. 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.
  10. 10. 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.
  11. 11. Micro vs. Macro
  12. 12. 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.
  13. 13. 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.
  14. 14. 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
  15. 15. 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.
  16. 16. 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.

×