INTERACTIVE EXPERIENCES

Key knowledge

• the collaborative practices of designers working in the fields of user-experience and interaction design

• aesthetic considerations and conceptions of good design relevant to the design of interactive experiences

• the diverse needs of users when interacting with devices, systems and services

• the role of the brief in guiding the development of design solutions

• applications of the VCD design process relevant to user-experience and interaction design projects

• human-centred research methods used to identify interaction design problems and understand stakeholders

• methods, media and materials used to visualise, test and present interaction design solutions

• appropriate design terminology

Key skills

• identify and research interaction design problems or opportunities

• document an interaction design need in the form of a brief

• apply the stages of the VCD design process to resolve an interaction design problem

• select and use manual and digital methods, media, materials and design elements and principles appropriate for the design of inclusive interactive experiences suitable for diverse user needs

• present design concepts for critique, and both deliver and respond to feedback

• annotate design ideas and concepts using appropriate design terminology to explain and evaluate design decisions

• test and evaluate the usability and suitability of design concepts

• select suitable static formats for the presentation of a digital interface solution.

TASK: Tracing - but make it yours.
Tutorial lesson, how do you take inspiration the work of others but make sure you change it enough to make it your own? In this task, you will use Procreate & a sourced image to generate an illustration for your game design using Procreate, tracing a number of times, using layers and opacity changes, making changes each time to take the image farther and farther fromt the source. 

TASK: Wireframing for Interactive Design

- Introduction to wireframing techniques for game interfaces. View detailed information here. 

- List potential screens for your game design: Title/Start screen, Main menu, Settings menu, Character selection/customization, Level selection, Pause menu, Achievement/Progress screen, Store/Inventory, End of level summary, Game over screen, Credits

 - Draft six potential wireframes for their game concepts: Your character/characters/ player will need to navigate through a range of rooms or geographic locations in your game. Use text & simple icons to identify what these locations are. 

- In your draft screens indicate text, icons, imagery, symbols without adding design or illustration. Annotate anything that is not immediately clear. 

- Use a colour to draw prototyping connections between screens. Your line should start on the button or icon to be interacted with, the arrow at the end of your line should attach to the edge of the screen it connects to. 

- Use a star or other indicator in your folio to show which screens you would like to take forward into the mockup stage. 

Part 1: Drafting on Grid Paper

Materials needed:

• Grid paper, A4 or A3

Steps:

1. Define Your Game World:

   • Sketch the overall shape of your game world on the grid paper.

   • Divide the world into distinct areas or levels.

2. Establish a Scale:

   • Decide how much real space each grid square represents in your game world.

   • Mark this scale in a corner of your map.

3. Add Major Landmarks:

   • Sketch in significant locations, obstacles, or points of interest.

   • Consider how these elements will affect gameplay and navigation.

4. Design Basic Icons:

   • Create simple icons for key elements (e.g., player start point, objectives, resources).

   • Ensure each icon is distinct and recognizable at a small size.

5. Plan Interactive Elements:

   • Identify areas where players will interact with the map.

   • Mark spots for pop-up information, clickable areas, or hover-over details.

6. Consider User Interface Integration:

   • Sketch areas where the map will connect with other UI elements.

   • Plan for a legend or key to explain your icons.

7. Think About Map Progression:

   • If applicable, indicate how the map might change or reveal itself as the game progresses.

8. Review and Iterate:

   • Step back and assess your design. Does it clearly communicate the game space?

   • Make adjustments as needed.

Part 2: Refining Screens in Adobe Illustrator

Steps:

1. Set Up Your Document:

   • Create a new document in Illustrator with dimensions appropriate for your game interface - is your game for phone, computer, or television screens? You will need to research the pixel rate of your selected format as outlined in your design brief.  

   • Set up a grid that matches or scales from your paper draft.

2. Create Layers:

   • Background layer for the base imagery

   • Features layer for major features

   • Icons layer for interactive elements

   • UI layer for additional interface elements

3. Create your background. 

   • Use the rectangle tool to fill the frame with a colour or gradient. 

4. Add Feature Details:

   • Use shapes and the Pen tool to add major details.

   • Consider using symbols for repeated elements in your game. Add a second art board to drag copies of these onto as you work. This artboard will form your Visual Identity documentation. 

5. Design Polished Icons:

   • Create your icons using simple shapes for clarity.

   • Use the Pathfinder panel to combine shapes.

6. Implement Colour Scheme:

   • Choose a colour palette that fits your game's theme. Add this to your Visual Identity artboard & use it to eye-dropper colours as you design. 

   • Ensure you have good contrast in your colour palette. Use colour to differentiate areas and enhance readability. Check the accessibility of your colour palette here: https://toolness.github.io/accessible-color-matrix/ 
     Check HEX Codes of colours
     Open the Colour Panel: Go to Window > Color to open the Color panel. Alternatively, you can use the Swatches panel (Window > Swatches) if the color is a saved swatch.
     For Hex codes, you can find this in the Color Picker. Double-click the Fill or Stroke color box in the toolbar, and the Color Picker will appear, showing the hex code (e.g., #FF0000 for red).

7. Add Text Labels:

   • Use appropriate fonts for your game's style.

   • Ensure text is legible at various zoom levels.

8. Create Interactive Areas:

   • Use shapes to define clickable or hover areas.

   • These can be invisible in the final design but used for programming interactivity later.

9. Design UI Integration:

   • Create a legend or key for your icons.

   • Design any additional UI elements that will frame or interact with the map.

10. Apply Visual Hierarchy:

    • Use size, colour, and placement to guide the player's eye to important elements.

    • Ensure the most crucial information stands out.

11. Export for Testing:

    • Export your layers to import into Figma to prototype:
      - Icons & buttons: Select and Export for Screens as assets in SVG format with transparent background.
      - Map & Text Layers as SVG files 

    • Extension: Create different versions (e.g., full map, partially revealed map).