Project 01
Design and Prototype Implementation of your Web-based Mobile App!
The emphasis will be on the design of your web-based mobile app. The course textbook, “Think 3D” by Charla Pereira, details a design process that applies to all applications, use this to guide you!
Description
Design Challenge
You need to design both 2D and 3D elements for your web-based mobile app.
Implementation Challenge
You only need to focus on the 2D elements. You will provide some proof-of-concept implementation using what you have learned about HTML, CSS, and JavaScript. The 3D elements can stay purely as a design idea, unless you really want to challenge yourself!
Due Date
Project 01 is due YEAR/MONTH/DAY at XX:XX.
In addition, you will be presenting stages of the project in your Mock Interviews as follows:
| Artifact | Mock Interview Week |
|---|---|
| Part I, Items 1-11 | MONTH/DAY |
| Part II, Wireframe and Implementation | MONTH/DAY |
| (Chapters 6 to 9) |
In your Mock Interviews you will discuss your project and showcase your progress. You will also share your thoughts and ideas with your peers.
Part 01 - Think Like A Designer! [22 Points]
What do you need to do?
Using HTML and CSS (and any frameworks you like!), provide your answers to the eleven questions below about your web-based mobile app!
Show off your fancy formatting skills! YES, your answers should be in HTML with CSS styling! Add images and links!
What to submit by YEAR/MONTH/DAY
You will submit your HTML and CSS files, along with screenshots of your web page.
Questions
What is the idea that you have for your app?
What part is 2D and what part is 3D?
What is your original, simple, hypothesis about this app?
Why is this idea important or needed in the world?
How do you plan to use XR emotionally to immerse the user in the experience?
List 3 reasons why this idea is or is not good for XR.
List 3 reasons why this idea is or is not better in 3D.
In what way is each of AR, MR and VR possibly useful for the project?
Auditing your idea (page 61):
Does your idea exist in 2D?
Does your idea exist in 3D?
What could you do in your project in 3D that you can’t do in 2D?
Add some of these design principles to your hypothesis (page 88):
Useful
Usable
Desirable
Valuable
Findable
Accessible and Inclusive
Fill in an Empathy map (page 107) based on observation or your own assumptions about your users.
Part 02 - Code! [26 Points]
What do you need to do?
Using HTML, CSS, and JavaScript (and any frameworks you like!), a prototype implementation of your web-based mobile app. This should include both a wireframe overview in any tool (or paper) you like, and a working prototype consisting of your own code for the web-based mobile app.
Note: The prototype is a web-based mobile app that should support some aspects of your wireframe design, but it does not have to implement the entire design! It is sufficient to demonstrate the use of the mechanisms you have had experience with in the labs so far in the course.
What to submit by YEAR/MONTH/DAY
You will need to submit your wireframe, HTML and CSS files, and JavaScript files. In addition, you will need to submit a 2 minute screen capture video with your voice describing the walkthrough of your web-based mobile app!
Note: The screen capture video with your voice describing the walkthrough can be done using Zoom, or Quicktime (Mac), Stream (Windows) and Snagit (Linux) (or any other screen capture video tool).
How is this different from Part 01?
Part 01 uses web technologies to create a “static” website to describe your design, which is very cool, but you can do much more!
Part 02 of the assignment really shows off your ability to leverage JavaScript to write a preliminary controller for your web-based mobile app. Your JavaScript will be accepting user input and accessing data to provide functionality, not just static information, for your users!
Project 02
Design and Prototype Implementation of your Web-based Mobile App!
The emphasis will be on the design of your web-based mobile app. The course textbook, “Think 3D” by Charla Pereira, details a design process that applies to all applications. Again, whether you are pivoting or refining, use this to guide you!
Description
Design Challenge
You need to (re)design both 2D and 3D elements for your web-based mobile app.
Implementation Challenge
You only need to focus on the (re)implementation of the 2D elements. You will provide another proof-of-concept implementation using what you have learned about HTML, CSS and JavaScript. he 3D elements can stay purely as a design idea, unless you really want to challenge yourself!
Due Date
Project 02 is due YEAR/MONTH/DAY at XX:XX.
In addition, you will be presenting stages of the project in your Mock Interviews as follows:
| Artifact | Mock Interview Week |
|---|---|
| Part I, Items 1-11 | MONTH/DAY |
| Part II, Wireframe (Chapters 6 and 7) | MONTH/DAY |
| Part III, Implementation Stage (Chapter 8) | MONTH/DAY |
| Final Version, Parts 1 and 2 (Chapter 9) | MONTH/DAY |
In your Mock Interviews you will discuss your project and showcase your progress. You will also share your thoughts and ideas with your peers.
Part 01 - Think Like A Designer! [22 Points]
What do you need to do?
Using HTML and CSS (and any frameworks you like!), provide your answers to the eleven questions below about your web-based mobile app!
Show off your fancy formatting skills! YES, your answers should be in HTML with CSS styling! Add images and links!
What to submit by YEAR/MONTH/DAY
You will submit your HTML and CSS files, along with screenshots of your web page.
Questions
What is the idea that you have for your app?
What part is 2D and what part is 3D?
What is your original, simple, hypothesis about this app?
Why is this idea important or needed in the world?
How do you plan to use XR emotionally to immerse the user in the experience?
List 3 reasons why this idea is or is not good for XR.
List 3 reasons why this idea is or is not better in 3D.
In what way is each of AR, MR and VR possibly useful for the project?
Auditing your idea (page 61):
Does your idea exist in 2D?
Does your idea exist in 3D?
What could you do in your project in 3D that you can’t do in 2D?
Add some of these design principles to your hypothesis (page 88):
Useful
Usable
Desirable
Valuable
Findable
Accessible and Inclusive
Fill in an Empathy map (page 107) based on observation or your own assumptions about your users.
Part 02 - Code! [26 Points]
What do you need to do?
Using HTML, CSS, and JavaScript (and any frameworks you like!), a prototype implementation of your web-based mobile app. This should include both a wireframe overview in any tool (or paper) you like, and a working prototype consisting of your own code for the web-based mobile app.
Note: The prototype is a web-based mobile app that should support some aspects of your wireframe design, but it does not have to implement the entire design! It is sufficient to demonstrate the use of the mechanisms you have had experience with in the labs so far in the course.
What to submit by YEAR/MONTH/DAY
You will need to submit your wireframe, HTML and CSS files, and JavaScript files. In addition, you will need to submit a 2 minute screen capture video with your voice describing the walkthrough of your web-based mobile app!
Note: The screen capture video with your voice describing the walkthrough can be done using Zoom, or Quicktime (Mac), Stream (Windows) and Snagit (Linux) (or any other screen capture video tool).
How is this different from Part 01?
Part 01 uses web technologies to create a “static” website to describe your design, which is very cool, but you can do much more!
Part 02 of the assignment really shows off your ability to leverage JavaScript to write a preliminary controller for your web-based mobile app. Your JavaScript will be accepting user input and accessing data to provide functionality, not just static information, for your users!