Application Design II // Task 1 // App Design 1 Self Evaluation and Reflection
5/4 - 21/5/23 Week 1 - Week 7
Chan Siew Ni #0352518
Bachelor of Design in Creative Media
Bachelor of Design in Creative Media
Application Design II // Task 1 // App Design 1 Self Evaluation and
Reflection
LECTURES
WEEK 1:
Mr Razif briefed us about the tasks and the module about. Basically, this is a
continuous module with Application Design 1 but in an advanced version. For
this module, we will have to create a workable and contains minor interactions
app.
Tasks that we shall start to do:
1. Look at our previous work on Application Design 1
2. Analysis and give critical comments on our previous work
3. Redesign/ Reimprovement on previous work
4. Minimise workable screen
In-Class Exercise:
To refresh our memories of coding HTML, Mr Razif asked us to create a personal
website in the class.
Figure 1: work progress on making the website
Figure 1.1: work progress on making the website
Figure 1.2: work progress on making the website
Notes:
To create Smooth Scrolling:
html {
scroll-behavior: smooth;
}
scroll-behavior: smooth;
}
WEEK 2:
In-class exercise:
Mr Razif gave us a Figma file and we had to redo it in HTML and CSS using the
assets.
figure 1.3: Work progress on downloading assets
figure 1.4: Work progress on creating the website
figure 1.5: Work progress on creating the website
figure 1.6: Work progress on creating the website
figure 1.7: Work progress on creating the website
figure 1.8: Work progress on creating a responsive website
figure 1.9: Work progress on creating a responsive website
Problem:
1. Couldn't make the text align properly while minimizing the website
2. The Play Button disappear while minimizing the website (already adjusted
the img-fluid, max width and height) (Solved)
LINK:
Week 2 Exercise
Week 3:
Important Points:
1. To make the cursor into a pointer (hand): cursor: pointer;
2. To make ordered-list without a bulleted form:
ul{
list-style: none;
}
Week 4:
figure 1.10: Java Script
This week we learned to use Java DOM.
To Change ID :
document.getElementById("XX").innerHTML=""
This is useful when we need to style the HTML
We learned to change another element by clicking the original
element.
After that, we also learn to make the side panel
Figure 1.11: work progress on making the side panel
To make a side panel can be appearing while clicking and close by
clicking as well.
Notes: One ID should be only used once, always make sure the id is
correct to make it works.
Week 5:
For this week, we have learned to make animation.
We have learned to make animation using a website name
GSAP- Green Sock
Figure 1.12: work progress on making an animation of the navigation bar
Making Splash Screen:
We learned to make splash screens for the preparation for our final
project which is application design.
Figure 1.13: work progress on making the splash screen
Week 6:
Var Timeline
For this week, we leaned to control the element animate by using timeline.
Figure 1.14: work progress on placing timeline
Figure 1.15: work progress on placing timeline
Note: the sequences of placing the elements will affect the sequence they appeared. (on top will play first)
By using this technic, we can now animate more easier and effectively.
Week 7:
Navigation Bar (=Footer) and Animation
Mini Test: For this week, Mr Razif asked us to work for footer, the method doing it is the same as how we did the other things. Then, he also asked us to work on animating the footer. He asked us to do by ourselves to check whether we learned or not.
Figure 1.16: work progress on making footer
Figure 1.17: work progress on styling the footer
Then, Mr Razif asked us to also animate the footer as we did in previous weeks.
Figure 1.18: work progress on animating the footer
1. Width can be set as 100vw to make sure it shows the full width of the screen
2. When we don't know where is the problem, we can set the background colour differently than the other parts, and then we would know the problem and fix it.
Task 1 // App Design 1 Self Evaluation and Reflection
1. Application Design 1 (Previous Work)
App: Weather Bug
figure 2: home page(left), hourly weather (centre), 10-day weather
(right)
figure 2.1: map overview(left), update weather (centre), locations weather
(right)
figure 2.2: login page(left), gallery (centre), share photos (right)
2. Analysis
figure 3: home page
Home Page: this page is to show the current weather and also other
information such as lightning, humidity, wind, and so on. The top will show
that this weather is based on what location, the user can also change the
location by pressing it.
Critical Review: The navigation bar below can be improved as now it's
monotonous and not attractive. Then, the 4 columns of information can be
improved by arranging them more tidily.
figure 3.1: hourly weather page
Hourly Weather page: this page will show the hourly weather and
predicted rain chances. by selecting the date above, the user can also see
other days' weather predictions.
figure 3.2: 10-day weather page
10-day Weather: this page will show the latest 10 days' weather and
also the temperature and chances of rain. Users can be able to plan their
schedule based on the predicted weather.
figure 3.3: map overview page
Map Overview page: this page shows the map overview weather, user can
be able to see the locations that they want on the map. Other than that, there
is also the 1-hour forecast function that is able to show a time-lapse of
weather for the latest past 1 hour. Users can be able to see the weather
changes in this one hour.
Critical Review: To be honest, I will rarely use this function as a user
because my need is to check the weather and this is an extra function. If I
would make improvements, I would make a search bar to let people search the
locations that they want. After that, the map will show the area within a 20km
of distance. Users can focus to see the area and also know the nearby place's
weather.
figure 3.4: locations page
Locations Page: On this page, the user can be able to see the saved
location and also switch locations here. A darker colour location is the
selected location. To select another location, press the column of the
location and select 'confirm', the weather will be shown as the selected
location.
Critical Review: I think can make some improvements such as adding a
background picture in each column and the picture can be the landmark of the
locations.
figure 3.5: login page
Login page: Users can log in and store their pictures inside the app.
Users can also add friends inside the app to share the pictures taken.
Critical Review: I think this page has room for improvement as I think
I have chosen poor colour combinations. Sign up button was not stand out and
maybe the shadow of the boxes should adjust as well.
figure 3.6: gallery page
Gallery page: this page shows the pictures taken by users. Users can
use the features to collect many landscape photos.
figure 3.7: gallery sharing page
Gallery Sharing Page: Users can be able to share their pictures with their
friends inside the app or also through other applications. 
figure 3.8: update/report weather page
Update/Report weather page: When a user sees that the actual weather is different from the reported in the application, the user can send a report to help the application shows accurate data.
figure 3.9: Alert Notifications Page
Alert Notification page: Users can receive some alert notifications such as thunderstorms, floods or other natural disasters. This may help them have the preparation and be alert to the situation.
3. Minimize Screen
1. Home Page
2. Hourly Weather
3. 10-day Weather
4. Map Overview
5. Update/Report Weather
6. Locations of Weather
7. Login Page
8. Gallery Page
9. Share photos page
10. Alert Notification page
4. Improvements
Figure 4: work progress on improving elements
Figure 4.1: Comparison between Before (Left) and After (Right)
Figure 4.2 Comparison between Before (Left) and After (Right)
Application Design II: Final Prototype pages in Figma (PDF)
<iframe
src="https://drive.google.com/file/d/1YDrLOoMhZ0RBhQ2IN4Edf4qpn6wFJU5I/preview"
width="640" height="480" allow="autoplay"></iframe>
FEEDBACK
Week 2: After seeing my previous application design, Mr Razif suggested I
redraw all the icon elements so they can make them consistent in size. Then,
the least important information can be hidden and shown by gestures so that
the whole page would not be packed.
REFLECTIONS
In this exercise, the feeling of doing the prototype is different than previously when I was doing the application design 1 because for now, I will have to think if it's possible or workable for me to code it in the future. I also realised that previously there is so many important parts that I didn't notice and take care of. This includes the alignment, size of each element, and typography.
Comments
Post a Comment