Manipulating Text, Graphics & Images for Online ICT Content

Graphics & Layout Fundamentals

• 5 Basic Principles of Graphics and Layout

  • Proximity

  • Alignment

  • Repetition

  • Contrast

  • White Space

Proximity

• Definition: Grouping related elements to guide viewers through a message.

• Effects

  • Adds unity & continuity even when elements first look scattered.

  • Useful for customizing templates.

• Visual example cues (page text): multiple price tags “19.95”, repeating words “LOREM/IPSUM/DOLOR” & the number “100” are close to one another, implying relation.

Alignment

• Amateur default: center‐alignment; professionals explore additional options.

• Consistent alignment maintains balance.

• Troubleshooting tip: If a layout feels “off,” tweak alignments first.

• Example text: mixed Latin copy, headline "CONSECT TURI O ADIPISCING" alongside repeated price “19.95”.

Repetition

• Reusing visual elements gives emphasis & directs attention.

• Example: Cropped sandwich photo repeated in square masks; repeated red strokes above “PANE.”

• Extra mini‐example text list (author bucket list with numbered steps 1–4) mirrors repetition idea.

Contrast

• Strong contrast separates important information from background noise.

• Techniques: color, size, shape, symbolism (arrows → check mark icon).

• Example slides: Marketing goals presentation dates "2014"; arrows/checks colored differently for contrast.

White Space

• “Very powerful” communication device.

• Uses

  • Highlights direct messages amid clutter.

  • Can itself act as a form of contrast (Robin Williams concept).

• Slide example: Large white margins framing text “Jennifer Devoy.”

Infographics: Visual Message Design

What & Why

• Definition: Visual presentations of information that leverage design to improve comprehension.

• Key virtues

  • Convey complex data quickly & clearly.

  • Self‐contained messages (vs. decorative images).

• Frequent users: scientists, technical writers, mathematicians, educators, statisticians.

Core Purposes

• Communicate a message.

• Compactly present large data sets.

• Analyze data for cause-and-effect insight.

Infographic Building Blocks

• Visual Elements: color coding, graphics, reference icons.

• Content Elements: time frames, statistics, references.

• Knowledge Elements: facts.

Historical Milestones

• Ancient Egypt cave paintings/hieroglyphics (~5000 years ago).

• Nicole d’Orseme (1352–1382): grouped & graphed figures.

• Leonardo da Vinci: graphic/text hybrids in “Treatise on Painting.”

• Fortune magazine & Chicago (partial transcript) popularized in print.

• Gallup Organization first deep corporate adopter.

• Internet era drives mainstream use.

Five Functional Types

1. Cause & Effect

   • Explain causal chains (e.g., US recession → global economy).

2. Chronological

   • Show events through time (sales growth bar chart 1950–2010 timeline).

3. Quantitative

   • Deliver stats fast via charts/graphs/tables.

4. Directional

   • Navigate audiences (traffic symbols, scale maps, arrows, bullets, numbered distances).

5. Product

   • Instructions & data on notice boards, diet/cooking visuals.

Three Visual Delivery Modes

1. Static – all information at once (newspaper graphics).

2. Motion – sequential (cinema, PowerPoint animations).

3. Interactive – viewer‐controlled (web dashboards).

Design Tips (“TIPS FOR DESIGNING INFOGRAPHICS”)

• Simplicity: clean, concise, orderly.

• Emphasize Cause → Effect.

• Draw Boundaries: narrow scope; respect short attention spans.

• Think in Color: guide emotion, hierarchy. “Contrast is king.”

• Layout ≠ only typography: mix fonts (max 2–3), charts, icons. Add logo where relevant.

• Eye Appeal: design for final display size & article context.

• Verifiability: cite sources; enable deeper data dives.

Creative Examples Mentioned

• Oil spill magnitudes (tonnage bars).

• Periodic Table of Typefaces.

• “Biggest Shift Since the Industrial Revolution” bicycle infographic.

• Powering Africa stats (1.5 billion population ref, left/right brain 79 ext{%} illustration).

• Pop‐culture vehicles cost chart: “1 pixel = 1 million \.”

Online File Formats for Images & Text

Key Formats & Uses

• JPG / JPEG (Joint Photographic Experts Group)

  • Common for photos; lossy compression.

• TIF / TIFF (Tagged Image File Format)

  • Lossless; large; pro photography/print.

• PNG (Portable Network Graphics)

  • Lossless; supports transparency; more colors than GIF.

• GIF (Graphics Interchange Format)

  • Lossless; \le 256 colors; supports basic animation & transparency.

Compression Concepts

• Lossy: discards detail → smaller (e.g., JPG).

• Lossless: preserves detail → larger (e.g., PNG, TIF, GIF).

Color Depth Considerations

• Simple logos: 1–2 colors.

• Digital photos: millions of colors.

• GIF best for limited palette; JPEG for millions.

Choosing a Format (Major Criteria)

• Compression quality: lossy vs. lossless.

• Color model: RGB (photos) vs. Indexed (graphics); 16-bit (48-bit RGB) sometimes needed.

• Special needs: transparency, animation, CMYK for prepress, multi-page docs (TIFF).

Offline & Open-Source Image-Editing Software

Combining Text, Graphics & Images (Design Micro-Tips)

• Transparent shapes overlay text (example word “FREEDOM”).

• Mix & Match fonts/backgrounds for motivational quotes: “IF NOT NOW WHEN?”

• Align text with background imagery for cohesion (“Life is Sweet” cupcake pic alignment).

• Keep backgrounds clean/clear when you want the message to dominate (“THE FUTURE IS BRIGHT”).

Uploading, Sharing & Hosting Platforms

Shared Functionalities & Notes

• Most sites auto-generate shareable URLs, embed HTML or Markdown.

• Privacy controls vary (albums vs. individual links).

• Some (Photobucket, ImageShack, Flickr) offer built-in editing; others focus purely on hosting.

• Print services integrated: Photobucket (canvas, metal, gifts), Flickr (via partners).

Ethical & Practical Considerations

• Copyright: Always secure rights or use CC-licensed materials when sharing.

• Data Integrity: Choose lossless formats for archival quality; employ platform backup options.

• Privacy: Understand public vs. private link distinctions; sensitive content may require encrypted storage.

• Accessibility: Contrast & color choices impact readability for color-blind users.

• Sustainability: White space & simplicity reduce cognitive load, echoing minimalist ethical design.

Real-World Connections

• Marketing / social media managers apply alignment & contrast to boost ad engagement.

• Educators convert dense statistics into chronological or quantitative infographics for faster student comprehension.

• Photographers leverage platforms (500px, Flickr) to monetize or license high-resolution works.

• Developers integrate Imgur or Dropbox APIs for seamless image handling in apps.

• Journalists employ motion & interactive infographics in data-driven investigative stories.

Quick Reference Formulas (Design & File Optimization)

• File Size ≈ \frac{\text{Pixels} \times \text{Bit Depth}}{8} (before compression) – guides format choice.

• Contrast Ratio (WCAG) target ≥ 4.5{:}1 for normal text.

• Rule of Thirds Grid: 2 horizontal + 2 vertical divisions – align key elements to intersections.

These notes consolidate all pages of the transcript, expanding on concepts, examples, numbers, historical context, practical tools, ethical implications and real-world relevance in a study-ready bullet-point format.