SB2 Design For Screen

Brief recap:
Responding to your findings and direction from studio brief 1, need to create an immersive and engaging screen based user experience. How does your brief for studio brief 1 translate into a screen based media?

Want to possibly explore AR.

Process:
1. Brief
2. Research
3. Low fidelity wireframes : Basic skeleton of layouts (sketches)
4. Feedback
5. Workup wireframes digitally
6. Feedback
7. ‘Fleshing out’ – Designing, adding content and working towards final outcome.
8. Feedback
9. Refinement from feedback – prototyping? Interactive PDF Indesign. Prototype and function of this.
10. Pass onto developer

*The low fidelity wireframe is essential as it provides a form of storyboard to show the development of your website.

Start to prototype early on - can just show stills and don't have to spend time exploring how to make the website work (professionally, that's the developer's work.)

The three things you need to evidence the progress of:

1. Low fidelity wireframe - a sketch. Don't need to see the content just need to see where the content will be placed.
2. "Fleshing out" - designing and adding content to these wireframes.
3. The user flow - considering how the user interacts with the outcome - how do you want them to interact? 

Start of with sketches of the low fidelity wire frame, digitalise this, start adding content drafts, sketches of user flow etc.

UX - User Experience

How do users feel when they are interacting with the media? What do you want them to feel based on your theme?

UI - User Interface
The design, the menu, the production considerations.
e.g If you make the type really big (UI), what is that going to do for the UX? Is this going to make it easier to read therefore a happier experience, or is it going to be frustrating?

Navigation, sub navigation, menus, drop-downs, buttons, links, windows, rounded corners, shadowing, error messages, alerts, updates, checkboxes, search fields, text inputs, radio selections, text areas, hover states, selection states, pressed states, tooltips, banner ads, embedded videos, swipe animations, scrolling, clicking, iconography, colours, lists, slideshows, alt text, badges, notifications, gradients, pop-ups, carousels, OK/Cancel, etc.