Application Design II - Exercises

-

16.04.20 - 00.00.00 (Week 1 - Week X)
Tamara Audrey Saputra (0335846)
Application Design II
Exercises

Instruction


Exercises

Exercise 1

To warm-up our HTML and CSS coding skills again, Mr. Razif assigned us an exercise where we have to create a mobile-base personal web. It should contain 4 pages which include:

  • Home
  • About Me
  • Portfolio
  • Contact
I then start to code it in Visual Studio Code.

fig 1: coding

Home Page

fig 1.1: Home (Mobile)

fig 1.2: Home (Web)


About Me Page

fig 1.3: About (Mobile)

fig 1.4: About (Web)

Portfolio Page

fig 1.5: Works (Mobile)

fig 1.6: Works (Web)

Contact Page

fig 1.7: Contact (Mobile)

fig 1.8: Contact (Web)

Exercise 2

In the second exercise, we were introduced to Jquery Mobile and were told to make a 3-page mobile app. The structure should use grids as much as possible and other Jquery features.

For this exercise, I decided to create a News App.

fig 2.1: coding

Home Page

fig 2.2: home page

Bookmark Page

fig 2.3: bookmark page

fig 2.4: bookmark page

Account Page

fig 2.5: account page


After showing Mr. Razif all of the above, he suggested to us to add a login page and utilize Jquery's pop-up panels. For the panels, I decided to add it to the bookmark age and account page.


fig 2.6: login page

fig 2.7: pop-up profile

fig 2.7: pop-up panel

After we are done with the layout, Mr. Razif introduces us to Green Sock's animation library. We then proceed to experiment with it and added it to our pages.

fig 2.8: adding animation
Below is a preview of how the animations look like:



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