Application Design II - Final Project

-

16.04.20 - 17.07.20 (Week 1 - Week 14)
Tamara Audrey Saputra (0335846)
Application Design II
Final Project

Instruction


Final Project

Week 1

This week we are given the chance to re-design our app from Application Design 1 if we'd like to.

Below is the XD link of the app design we did last semester:
https://xd.adobe.com/view/b372697c-1594-4450-5594-3d4ec51f2175-c543/?fullscreen

Application Desing 1 Blog Link:
https://tamaraaudrey.blogspot.com/2019/09/application-design-exercises.html

Week 2 - Week 3

I changed some of the colors and added decorations to make the layout less dull.

Below is the XD link of the revised app design:

Week 6

For the final, we were told that we don't need to make all of the screens but instead take those that share the same layout as or represent the remaining screens.

Below are the chosen layouts that basically represent the rest of the screens:

fig 1: Page layout

Week 9 - Week 14

After I know which pages I'll have to make, I then focus on coding the app in Visual Studio Code since I don't have Dreamweaver.

fig 2: HTML Code

fig 3: CSS Code


After finishing all of the HTML and CSS, I then start to animate the app using the Green Sock.

fig 4: Animation Script

Here is the preview of how it looked like when I view it on the browser with iPhone X resolution:

fig 5: Preview on browser

Below are the screenshots of the pages in details:

Splash Screen & Onboarding Pages


fig 6: Splash screen

fig 7: Onboarding screen

fig 8: Onboarding screen

fig 9: Onboarding screen

Registration  & Login Page


fig 10: Register page
fig 11: Login page



fig 12: Form page

Home Page


fig 13: Home page

Watchlist Page


fig 14: Watchlist page

fig 15: Watchlist page

Rewards Page


fig 16: Rewards page

fig 17: Rewards page

Account Page


fig 18: Account page

fig 19: Account info page

fig 20: Account notification page

Availability Page


fig 21: Availability page

fig 22: Availability page

Use Now Page


fig 23: Use now page

Use Later Page


fig 24: Use later page

Payment Page


fig 25: Payment

fig 26: Payment completed

Timer Page


fig 27: Timer page

Blog Page


fig 28: Blog page

Tag Page


fig 29: Tag label page


After I was done with all of the pages, I then tested on my phone. When I tested on my phone it turns out that although the phone I was using for the preview is iPhone 11, the app was displayed in an iPhone 6/7/8 Plus resolution when it's launched on the browser. It's was a problem because while developing it, I was styling it based on iPhone X resolution.

Below are the problems that arose:

fig 30: Problem 1

fig 31: Problem 2

fig 32: Problem 3

fig 33: Problem 4


I then went back to my codes and adjusted some of the layout positionings as some of the elements shifted. Such as adjusting the width, height, adding margin, and re-structuring the codes.

Final Outcome


Below is the video walkthrough of the app when I open it from my phone with the adjusted resolution for iPhone 6/7/8 Plus:

Reflection

After completing and reviewing my work, I do realize that there are minor details that would be much better if it would be fixed and adjusted and that this is far from being totally complete. For example, like the vertical scrolling on pages that should have fit exactly to the screen height. I would have to look further into the problem as based on the preview on the browser, it perfectly fits the height. However, due to the time constraint, the ideal version as to how I intended it to be could not be achieved. On the other hand, throughout this module, it was fun to learn new things especially the animation part and it was nice to be introduced to Jquery mobile as before I was too comfortable with  Bootstrap only.

Comments

Post a Comment

Popular posts from this blog

Advance Typography - Final Compilation & Reflection

-
Image
Tamara Audrey Saputra (0335846) Advanced Typography Final Compilation & Reflection Instruction Exercises Project 1 - Troublemakers Manifesto Colloquium Project 2 - Troublemakers Manifesto Colloquium (Collateral) Final Project - Design Exploration Submissions Typographic System fig 1.1: Axial #1 fig 1.2: Axial #2 fig 1.3: Modular #1 fig 1.4: Modular #2 fig 1.5: Grid #1 fig 1.6: Grid #2 fig 1.7: Bilateral #1 fig 1.8: Bilateral #2 fig 1.9: Random #1 fig 1.10: Random #2 fig 1.11: Radial #1 fig 1.12: Radial #2 fig 1.13: Dilatational #1 fig 1.14: Dilatational #2 fig 1.15: Transitional #1 fig 1.16: Transitional #2 Type & Play (Part 1) fig 2.1: "L" - Final fig 2.2: "Y" - Final fig 2.3: "E" - Final fig 2.4: "C" - Final fig 2.5: "F" - Final Type & Play (Part 2) fi...
Read more

Advanced Typography - Exercises

-
Image
02.04.19 - 02.07.19 (Week 1 - Week 14) Tamara Audrey Saputra (0335846) Advanced Typography Exercises Lectures Lecture 1: Introduction to Advanced Typography 02.04.19 (Week 1) The class started with a brief introduction to the module outline and what to expect in the coming 13 weeks. We're then assigned into groups to do a short presentation regarding our given topic - Axial. Moreover, we were also shown several good examples of our seniors' projects to give us a rough idea of what's good and bad. Lecture 2: Typographic System 09.04.19 (Week 2) This week, we were introduced to the 7 Typographic System. Our group presented the Axial System. The following is the compilation of the whole class presentation. Lecture 3: - 09.04.19 (Week 3) No lecture is held this week. We focused on refining our work and were briefed about the next exercise. Lecture 4: Compressed History of Roman Alphabet 23.04.19 (Week 4) In today's class, some of our c...
Read more

Advance Typography - Project 1

-
Image
14.05.19 - 21.05.19 (Week 7 - Week 8) Tamara Audrey Saputra (0335846) Advanced Typography Project 1 - The Troublemakers Manifesto (Key Artwork) Lectures Lecture 7: Designing Type 14.05.19 (Week 7) In today's class, several of our classmates presented a presentation regarding Designing Type. We then continued with our first project, Troublemakers Manifesto key artwork. Lecture 8: - 21.05.19 (Week 8) No lecture today. We continued with our key artwork and started developing our collateral. Instruction Project 1 - The Troublemakers Manifesto (Key Artwork) In this project, we were expected to create a key artwork of an upcoming conference called The Troublemakers Manifesto: A Design Colloquium . The key artwork will later be used across the collaterals. The collaterals range from: Poster (Statistic and Animated) Invite (Interactive) T-shirt, Sticker, Pin Badge, etc We were also provided the meaning behind  The Troublemakers Manifesto...
Read more