Interactive design for websites and apps. This project will include a working, navigable website or app plus a document capturing the design and development process.
genre
target audience
delivery system
objective
emotional connectionÂ
Example log line: "In this Storybook Tablet App, three road construction toys, just children themselves, come to life and help each other work through typical emotional trials and tribulations. We aim to teach kids, ages 3-6, how to understand their emotions and move past feelings like frustration and anger to feelings of joy, laughter and purpose."
Find one benchmark for each of these:
Landing/Start Screen Style
Navigation Style
Architecture (Organization)
Content (images, text, etc.)
Color Scheme/ Emotional tone
Include screenshots with links. Describe why you chose each benchmark. Reference this Wheels Benchmarks example. Model yours after the left column (with the benchmarks).
Builder (Wordpress, Wix, Google Site, etc.)
Design tools (Photoshop, XD, etc.)
Create Interaction Stories
Guide and Examples to come
Create a Content Map
Wireframe layouts for all targeted display screens (at correct pixel dimensions). Design Wireframes for all targeted delivery methods (ie: desktop, tablet, phone, vr, etc.)
Complete full color layout of landing page
Don't place in interactive environment yet
Design and integrate any content needed to complete the page
If you are using video or other media yet to be produced - create a custom thumbnail image for it
All pages visual design completed
Don't place into Wordpress yet
Reference These Guides
For every page
Link all navigation
Complete any advanced functional coding
Finish all copy
Allow them to edit your document directly
Write your own notes based on their verbal feedback
Copy and paste notes from email or other correspondence
Include any visual image mark-ups (place them directly in the document)
Review how the site renders in Chrome, Safari, and Firefox browsers
Perform a usability testing with 2-4 people
Run the following software tests
Perform a Google Speed Test
Perform a Google Mobile-Friendly Test
Perform an accessibility test with the WebAim Accessibility Evaluation Tool (the browser extensions work best)
Perform a color-blind test with the Skilltide Chrome Extension: A Skilltide color-blind Chrome Extension or Color Oracle: a native app for MAC and PC that simulates colorblindness for anything currently showing on a display.
Revise as necessary based on user testing
Turn In
A link to the live-public website
Google Slideshow that includes all deliverables listed above