Skip to main content

Application Design - 202003

Application Design - 202003

04.16.2020
Joseph (0336620)
Application Design
Exercises and Projects


Exercises

HTML AND CSS RECAP

Our first exercise was recapping on our HTML and CSS skills, this was too get us to warm up on what is to be expected from the upcoming exercises. For this exercise I made a very mini personal website, nothing to crazy.

Fig 1.1 Page 1

Fig 1.2 Page 2


Jquery Mobile

For this exercise we are to learn jquery mobile codes and minor gsap animation to build this website,  we also learn some minor Javascript coding for this exercise.





Project 1-2-Final Project

This is a continuous project, for this project we are to make our app that we designed during our last semester. For my app, I decided to make an News Reading with an alarm clock in it. However that idea was cut short and I only made a News Reading App, and its called ReadMeUp. This idea was made with the idea of having a less complicated UI and focused more on Minimalism. Other applications such as Flipboard or Infact have complicated UI that looks and feels really cluttered and heavy.

So for my design I wanted to focus more on the minimalist style of things. So here are the design of the application layout that was intended. 











 

Those are the intended design, however due to limitations from Jquery Mobile, some of the design ideas have to be scrapped out.

Sign in Page

Due to the limitations in Jquery Mobile, the input form has its own styling from Jquery Mobile and the only that can be changed is the background of the Input form.


Home Page

There was a thought of making smaller boxes in the For You section, but I figured it would be easy for the eyes if it was the same giant boxes.



Comments

Popular posts from this blog

Advanced Typography - Exercise and Lecture

Advanced Typography - Exercises 26.09.2019 Joseph (0332260) Advanced Typography Exercises  LECTURE (26.09.19) This is the start of what I can say a very stressful course to go through again but no worries its not Taylor's University or any University if it's not hard. For our first week, we start the course by being introduced to the MIB (Module Information Booklet). We were explained by Mr. Vinod what are the assignments going to be like and what are the projects going to be like. After that, we continued on by making presentations and explaining the lecture to the lecturers. We learned about the 8 Typographical Systems, we have :" Axial, Radial, Dilatational, Random, Grid, Modular, Transitional, and Bilateral. These are the slides of presentation that each of our group makes. INSTRUCTIONS EXERCISE Week 2 (02.09.2019) For our first exercise, we were asked to make 2 art designs based on the presentation that we did for the first week. The...

Advanced Typography - Final Compilation and Reflection

Advanced Typography - Final Compilation and Reflection 25.11.2019 Joseph (0336620) Advanced Typography Final Compilation and Reflection SUBMISSIONS Exercise Project 1 - The Troublemakers Manifesto Colloqium (Key Artwork)   Project 2 - The Troublemakers Manifesto Colloqium (Collaterals) Final Project - Design, Exploration, and Application EXERCISE Typographic Systems Fig 1.1 Axial Design Fig 1.2 Bilateral Design Fig 1.3 Dilatiational Design Fig 1.4 Grid Design Fig 1.5 Modular Design Fig 1.6 Radial Design Fig 1.7 Random Design Fig 1.8 Transitional Design Type and Play 1 Fig 1.9 Extracted Picture. Fig 2.0 X (Final) Fig 2.1 M (Final) Fig 2.2 N (Final) Fig 2.3 V (Final) Fig 2.4 A (Final) Fig 2.5 Type and Play 1 (Final) Type and Play 2 Fig 2.6 Type and Play 2 (Final) PROJECT 1 - The Troublemakers Manifesto Colloqium (Key Artwork) Fig 2.7 Key Artw...

Advanced Interactive Design - 202003

Advanced Interactive Design - 202003 04.16.2020 Joseph (0336620) Advanced Interactive Design Exercise Week 1 We started with the MIB briefing, and then we proceeded to learning the Adobe Animate. Unfortunately, I haven't got the software yet. So I proceeded to take notes based on what our lecturer said about the software. Mr.Lun then proceeded to explaining our project one, which is actually shocking because he said that its due week 5 and we were pretty much rushing things. Our project was that we have to create an animation flow for a certain online shop. So for this weeks objective we were told to update our blogs, and start working on what we wanna animate (online store or service). After that we are expected to make an animation workflow and a wireframe for the week. So for my wireframe, I didn't exactly know what sort of apps or services or online stores that I wanna do, we were told to gain inspiration from a website called  UI Movement  and sort go th...