OCR J834 Creative iMedia · R093: Creative iMedia in the Media Industry

Stretch tasks R093 TA2: Style, Content, Layout and Media Codes

Task 1

Quiz Challenge

A quiz game against four computer players, then short and long written answers.

  1. Quiz Blitz12 questions against the clock
  2. Quick Fire4 short answers
  3. Big Think2 long answers

About 20 minutes

Task 2

This or That

Pixel the cat asks 8 questions. Each has two answers: pick the right one.

  • Two answers to every question
  • A fish treat for every right answer
  • Streaks win Pixel shades, then a party hat

About 4 minutes

Task 3

Memory Match

Flip the cards two at a time to match each term card to its meaning card.

  • 12 cards: each term has a meaning
  • One peek at every card
  • Combo points for pairs found in a row

6 pairs, about 4 minutes

Task 4

Sort It

Sort each statement into the right box, like the tick-box tables in the exam.

  • 12 cards to sort into 3 boxes
  • Drag a card, tap a box or press its number
  • Combo points for cards sorted in a row

12 cards, about 4 minutes

The games need JavaScript. Every question is below, with the answers at the end.

Read the lesson: R093 TA2: Style, Content, Layout and Media Codes

R093 TA2: Style, Content, Layout and Media Codes: the questions

Quiz Challenge, round 1: Quiz Blitz

  1. Which colour is commonly linked with trust and finance?

    • Red
    • Yellow
    • Purple
    • Blue
  2. Colour associations are the same in every culture.

    • True
    • False
  3. What is the minimum contrast ratio for body text under WCAG?

    • 1:1
    • 2:1
    • 10:1
    • 4.5:1
  4. Which typeface style has small strokes on the ends of the letters?

  5. What is leading?

    • The space between two letters
    • The boldness of type
    • The size of type
    • The space between lines of text
  6. Which type style should never be used for body text?

    • Sans serif
    • Serif
    • Monospace
    • Display
  7. Placing the subject on the lines of a 3 by 3 grid follows which rule?

  8. What does a low angle shot usually convey?

    • Power or threat
    • Vulnerability
    • Neutrality
    • Calm
  9. Which of these is a technical code?

    • A slogan
    • Camera angle
    • Costume
    • The colour of a set
  10. Where do users expect the navigation on an app screen?

    • Only on the first screen
    • At the bottom, within thumb reach
    • Hidden in the footer
    • In the middle of the screen
  11. Which TWO are symbolic codes?

    Tick 2.

    • Setting
    • Fast cutting
    • Camera movement
    • Shot size
    • Costume
  12. Why must colour never carry meaning on its own?

    • Around 8% of men are colour blind
    • Colour slows pages down
    • Printers cannot print colour
    • Colour is banned on signs

Quiz Challenge, round 2: Quick Fire

  1. Explain the difference between technical codes and symbolic codes, with an example of each. [2 marks]

  2. A horror film poster uses bright yellow and a rounded, playful font. Explain why it fails. [2 marks]

  3. Explain how white space and visual hierarchy improve a poster. [2 marks]

  4. Explain why a designer should use only two typefaces in a product. [2 marks]

Quiz Challenge, round 3: Big Think

  1. Analyse how a director could use technical codes in the opening shot of a thriller trailer to create tension. [6 marks]

  2. A bank wants a new web page for young savers aged 16 to 18. Justify choices of colour, typography and layout for this audience. [6 marks]

This or That: tick the right answer

  1. Body text: sans serif or script?

    • Script
    • Sans serif
  2. What does red often mean in China?

    • Danger
    • Luck
  3. A high angle shot: power or vulnerability?

    • Vulnerability
    • Power
  4. What does fast cutting suggest?

    • Calm and memory
    • Energy and urgency
  5. Lighting a cheerful advert: high key or low key?

    • Low key
    • High key
  6. Which pattern do eyes follow when scanning a web page?

    • The Z pattern
    • The F pattern
  7. Is breaking a convention always a mistake?

    • No, if it is deliberate
    • Yes, always
  8. 'A low angle shot was used.' Enough for top marks?

    • No: add its effect
    • Yes: it names the code

Memory Match: match each term to its meaning

TermMeaning
A Leading1 Colour, objects, setting and costume
B Kerning2 Deliberate emptiness for focus
C Rule of thirds3 Camera, lighting, editing and sound
D White space4 Space between two specific letters
E Technical code5 Space between lines of text
F Symbolic code6 Subject placed on a 3 by 3 grid line

Sort It: tick one box in each row

Which type of media code is each one?

StatementTechnicalSymbolicWritten
A slow dissolve
An informal tone of voice
A rundown city setting
A slogan
A caption under a photo
A low angle shot
A villain dressed in black
A punning headline
Crossed arms
A red rose on a pillow
Fast cutting
Low key lighting
Answers

Round 1: Quiz Blitz

  1. Blue Blue suggests trust, calm and stability.
  2. False White signifies mourning in parts of East Asia, and red is lucky in China.
  3. 4.5:1 Contrast is about legibility, not style.
  4. serif Sans serif means without those strokes.
  5. The space between lines of text Tight leading is the most common legibility error.
  6. Display Display type is designed for headlines only.
  7. rule of thirds It is more dynamic than centring the subject.
  8. Power or threat The subject looks down at the viewer.
  9. Camera angle Technical codes cover camera, lighting, editing and sound.
  10. At the bottom, within thumb reach Conventions are what the audience expects.
  11. Costume; Setting Symbolic codes are colour, objects, setting, costume and body language.
  12. Around 8% of men are colour blind Add a label, icon or pattern as well.

Round 2: Quick Fire

    • Technical codes: camera, lighting, editing and sound
    • Symbolic codes: colour, objects, setting and costume
    Model answer

    Technical codes come from how the product is made: camera angle, lighting, editing and sound, such as a low angle shot. Symbolic codes come from what is shown: colour, objects, setting and costume, such as a character dressed in black.

    • It contradicts the genre conventions the audience expects
    • So the audience cannot tell what the product is
    Model answer

    Horror audiences expect conventions such as dark colours, low key imagery and sharp or distressed fonts. Bright yellow and a playful font contradict those codes, so the audience reads it as a comedy or a children's film and cannot tell what the product is.

    • Hierarchy uses size, weight and position so the eye reads in order
    • White space removes clutter and creates focus
    Model answer

    Visual hierarchy uses size, weight and position so the eye reads the most important element first, then the next. White space around elements removes clutter and creates focus, so the key message stands out and the poster looks premium.

    • One for headings and one for body text gives a consistent system
    • More would look messy and harm readability
    Model answer

    Two typefaces, one for headings and one for body text, used at a few defined sizes, give a consistent system. Five typefaces look messy and assembled rather than designed, and make the product harder to read.

Round 3: Big Think

    • Low key lighting, with deep shadows
    • Which creates mystery and threat
    • A close up or extreme close up
    • A low angle to make a figure threatening
    • A high angle to make a victim vulnerable
    • Editing pace, such as fast cutting
    • Sound, such as silence or a building score
    • The effect on the audience
    Model answer

    The director could open with low key lighting, leaving most of the frame in shadow, which creates mystery and a sense of threat. An extreme close up on a character's eyes shows fear in detail, while a high angle makes the victim look small and vulnerable. A low angle shot of a figure in a doorway then makes them look powerful and threatening before any dialogue. The editing could start slowly, then switch to fast cutting as the music builds, and the sound might drop to silence before a sudden noise. Together these choices keep the audience anxious and on edge, in suspense about what happens next.

    • Blue, because it signals trust
    • A bright accent colour for energy
    • Strong contrast, so it is accessible
    • A clean, modern sans serif
    • One typeface for headings and one for body text
    • Web conventions, collapsing to one column on phones
    • Hierarchy and white space lead to one call to action
    • Choices traced to teenagers and their phones
    Model answer

    Blue suits a bank because it signals trust and stability, and a bright green accent adds energy for teenagers opening their first account. Text must have strong contrast, at least 4.5:1, so it is accessible. A clean, modern sans serif suits a screen, with one typeface for headings and one for body text at a comfortable size. The layout should follow web conventions, with the logo top left and navigation across the top, collapsing to one column on phones, because most of these students will visit on a phone. A clear visual hierarchy and plenty of white space lead the eye to one call to action button.

This or That

  1. Sans serif Script has poor legibility in quantity.
  2. Luck Colour associations are cultural, not universal.
  3. Vulnerability Looking down on a subject makes it look small.
  4. Energy and urgency A slow dissolve suggests calm, memory or time passing.
  5. High key High key lighting feels open, safe and cheerful.
  6. The F pattern The Z pattern is for posters. The F pattern is for web pages.
  7. No, if it is deliberate Conventions can be broken for effect, but only on purpose.
  8. No: add its effect Name the code and the effect it has on the audience.

Memory Match

  • A 5 Leading: Space between lines of text
  • B 4 Kerning: Space between two specific letters
  • C 6 Rule of thirds: Subject placed on a 3 by 3 grid line
  • D 2 White space: Deliberate emptiness for focus
  • E 3 Technical code: Camera, lighting, editing and sound
  • F 1 Symbolic code: Colour, objects, setting and costume

Sort It

  1. Technical A slow dissolve A transition is an editing choice.
  2. Written An informal tone of voice Tone of language is a written code.
  3. Symbolic A rundown city setting Setting is symbolic.
  4. Written A slogan A slogan is written.
  5. Written A caption under a photo Captions are written codes.
  6. Technical A low angle shot Camera angle is a technical code.
  7. Symbolic A villain dressed in black Costume is symbolic.
  8. Written A punning headline Headlines are written codes.
  9. Symbolic Crossed arms Body language is symbolic.
  10. Symbolic A red rose on a pillow An object carrying meaning is symbolic.
  11. Technical Fast cutting Editing pace is technical.
  12. Technical Low key lighting Lighting is technical.