APPLICATION DESIGN II- PROJECTS

16/4/20- 22/7/20 (Week 1- Week 15)
Andrea Vie Choong Jia Qi (0331945)
Application Design II
Project 1 | Project 2 | Final Project
Proposal/Document | App Progression | Completed App
_____________________________________________________________________________

LECTURES

Lecture 12: -

18/6/20 (Week 10)

We had no lecture this week but we asked Mr. Razif individually on what we need to show when designing our app in Dreamweaver.

Lecture 13: -

25/6/20 (Week 11)

There was no lecture this week so we were told to carry out with our app design. 

Lecture 14: -

2/7/20 (Week 12)

There was no lecture this week so we were told to carry out with our app design. 

Lecture 15: -

9/7/20 (Week 13)

There was no lecture this week. 

Lecture 16: -

16/7/20 (Week 14)

There was no lecture this week. 

__________________________________________________________

INFORMATION

Module Information Booklet (MIB)



__________________________________________________________

PROJECT 1: PROPOSAL/DOCUMENT

Re-layout Previous Application Design

1/5/20 (Week 3)

This week, I redesign and change some background images and elements in my previous app design for Application Design I. 

Here is the link to the updated app design: 

https://drive.google.com/open?id=1SJnr-cXXbvi8NLRoe9Shlz4UdP7J106- 

Re-adjust layouts, colours elements in app

8/5/20 (Week 4)

After the feedback given, I made some changes to the logo, layout, colour and elements in my app design. 

Fig 2.1 Progress in readjusting logo slogan/tagline

Fig 2.2 Progress in readjusting layout, colour & elements

22/5/20 (Week 6)-5/6/20 (Week 8)

I change the navigation menu of my app to the footer navigation and make some changes to the menu by revising the ratings and setting. Besides that, I changed the text input to white and placeholder to light grey.

Fig 2.3 Change navigation to footer and side panel for settings

Fig 2.4 Change text input boxes to white and placeholders to light grey #1

Fig 2.5 Change text input boxes to white and placeholders to light grey #2

__________________________________________________________

PROJECT 2: APP PROGRESSION

Progress on the splash screen, login/register screens

12/6/20 (Week 9)

I started to design my app in Dreamweaver using the things I learned from my exercises. I did on the welcome screen, login, sign up, social sign in and forgot password screens.

Progress on the home & upload clothes screens

19/6/20 (Week 10)

This week, I worked on the home screen and some screens for the upload clothes section.

Progress on the upload clothes, style generator screens | App Icon Design Progress 1

26/6/20 (Week 11)

I continued to finish up the rest of the upload clothes screens and moved on to the style generator screens. I added some screen transitions to enhance the user experience. 

I also went to design the app icon for my StyleMe app in Canva. I came up with two types of designs. I referred to the app icon size for Google Play Store (512 x 512 px).

Here is the progress below:

Fig 3.1 Initial Idea #1

Fig 3.2 Initial Idea #2

I tried out both ideas on the Android and iOS Phone home screens to see which idea looks better. This would be when the user has installed StyleMe app into the phone.

Fig 3.3 App Icon Mockup (Phone Screens): Idea #1

Fig 3.4 App Icon Mockup (Phone Screens): Idea #2

I prefer the first idea as it is much more easier to see the letters in the app icon.

Fig 3.5 Final Outcome of App Icon

Progress on style generator, calendar, planner & profile screens 

3/7/20 (Week 12)

This week, I continued from the style generator screens and moved to design the planner screens, profile screens and rating screens.

Once all the screens are designed already, I went on to add some animation where it is necessary to enhance the user experience of StyleMe.

Here is my progress so far animating the login to the style generator screens.

App Animation Progress 2

10/7/20 (Week 13)

I continued with the animation for the planner screen, profile screen and rating screen. 

Here is the progress:

__________________________________________________________

FINAL PROJECT: COMPLETED APP

Final Submission 

17/7/20 (Week 14)-22/7/20 (Week 15)

Here is the final outcome of the app icon & mockup:

Fig 4.1 Final App Icon Design

Embedded PDF of Icon Design & Mockup Compilation

Google Drive link to the project files:

https://drive.google.com/drive/folders/12bivcqZOeXmUqzkCkv-xo-FhFsQG0afZ?usp=sharing

Web Server Link to App:

http://thedesignschool.taylors.edu.my/newmedia/appdesign2/andrea/

And here is the screen capture of the app walkthrough for StyleMe. I decided to screen capture on the browser.

Video Capture on Browser

When I screen capture through my mobile screen, there was a problem in the layout design and it did not fit according to my phone viewport. Besides that, there are some problems in scrolling down the some of the screens.

Video Capture on Mobile

__________________________________________________________

FEEDBACK

8/5/20 (Week 4)

Specific feedback: Mr. Razif suggested that the logo looks better in the landing screen rather than the one in the sign in screen as it looks messy. The slogan" solely for your fashion" would look readable if it is more aligned as it is now clashing with the hanger hook. For the text to look more readable, change the text in Sign In > email box to grey. The "Done" button in Ratings does not lead to anywhere. Maybe link it to the suggested outfit or home page. In the menu, add a home button to go back straight to the home screen without having to use the menu screen all the time.

14/5/20 (Week 5)

There was no feedback this week.

19/6/20 (Week 10)

Specific feedback: I asked Mr. Razif about how should I design the calendar for my app. He said to refer to this website (https://www.w3schools.com/howto/howto_css_calendar.asp). The calendar doesn't have to show how the user clicks on the date. It can be static but you'll need to show how the user can plan their outfit for a specific day highlighted in the calendar. He also mentioned that we only need to do the necessary screens. For instance, the screens that are linked to almost the same layout screen can be combined. 

26/6/20 (Week 11)

There was no feedback this week.

2/7/20 (Week 12)

Specific feedback: Mr. Razif said for the CSS dropdown, you can type in !important if the code doesn't work. You can refer to the class/ID in the console to know which one to put in the CSS for the dropdown. He suggested to add div id to the buttons so it won't mess up with the dropdown CSS. He suggested to remove the icon carat part as it will disrupt the other CSS coding.

9/7/20 (Week 13)

Specific feedback: I had a problem with some button click and Mr. Razif suggested to break down into different files. For instance,  1st file should be "index.html" and another file "closet.html". In the button, the code should be a href="closet.html" with rel="external" added. The only thing affected is the data-transition between the different files as it won't work anymore. Just make the 1st page have a content animation using gsap. 

16/6/20 (Week 14)

There was no feedback this week.