INSTRUCTIONS
LECTURES
Week 1 | August 25th, 2020
Beginning our first class for the module, Mr. Razif briefed us with an introductory session to the Application Design 2 module. As a continuation from Application Design 1, the projects in this module will be front-end orientated as the user interface design had been taken over previously.
We had lectures on the essential background knowledge of how applications are made, which is generally done with 2 main frameworks, the UI and functionality framework. The UI framework as the name suggest is the front-end aspect, while the functionality framework digs deeper into the back-end development. The Application Design 2 module will be focusing on the front-end aspect of application development.
There are 3 ways on how applications can be developed: Native, Hybrid, and Web-based app, all of which requires different languages and has their own advantages/disadvantages. We'll be working with the web-based application from our Application Design 1 product.
Week 2 | September 1st, 2020
Today's lesson started off as Mr. Razif recap about the previous week discussion on mobile application cross-platform development tools. The discussion expanded as we dug deeper into each of the following types (see figure L2.1 below) and their pros and cons. We'll be learning the web development method, which could later be upgraded into the Hybrid Web method (located on the right-hand side of figure L2.1).
 |
| Figure L2.1. Different types of mobile application development tools. |
Once settled with the development tools, Mr. Razif introduced us to Adobe Dreamweaver JQuery Mobile during our tutorial session. We learned to setup JQuery Mobile in Dreamweaver and the essential codes for mobile UI structures as the following:
- data-role="page" this is the page
- data-role="header" for menus, home
- data-role="content" content section
- data-role="footer" main navigation
Week 3 | September 8th, 2020
The tutorial session today focused on practicing jQuery. Heading over to the JQuery official site, we downloaded the latest stable version 1.4.5 to acquire the latest interface design of the jQuery structures due to the reason that Dreamweaver uses a lower version (v1.3) by default. We learned to update the version manually on the coding section after copying the v1.4.5 folder into our working folder.
Mr. Razif later showed us the structure and basic features of jQuery Mobile in Adobe Dreamweaver. To simplify the process, the "Insert" panel enables us to generate any basic JQuery Mobile content within a click.
Week 4 | September 15th, 2020
As a public holiday we continued working on the 2nd exercise (jQuery Mobile Layout) for the session.
Week 5 | September 22nd, 2020
We had a lecture about micro interactions during today's lecture session. Mr. Razif presented a webinar on the particular topic and explained its relevance and importance to the front-end designers (us) and why we should focus on them. I captured the following slides from the webinar as I found them informative and helpful to our projects.
 |
| Figure L5.1. The habit loop. |
Despite seeing the habit loop before, I was unaware and yet intrigued by how it may have a great effect on the user experience of an app or website. The diagram presents how micro interactions may affect our interaction with interfaces in the most basic level in a well-known Habit Loop analogy.
 |
| Figure L5.2. Examples of appropriate micro interaction applications. |
How micro-interactions benefit websites/app
First of all, they improve a UI navigation and make it easier for users to interact with the UI. They provide instant/relevant feedback of a completed action, hence making the experience more erwarding. Those experience encourage sharing, liking, and commenting on the contents. Most importantly, they add emotions to the site.
 |
| Figure L5.3. Revenue difference from an improvement of UI/UX. |
Week 6 | September 30th, 2020
This week's session focused on getting started with GSAP animation for our next exercise. Mr. Razif guided us from the process of installation until the basics of GSAP is covered in class.
The main GSAP animation code that we learned today are gsap .from() which instructs the objects to run the animation from before it is being placed at its initial position, while the gsap.to() was used to instruct the code to run to animation towards a specified destination along with the specified animation effects.
Week 7 | October 6th, 2020
Mr. Razif prepared extra tutorials to work on as a follow up to the previous week to make up for the off session today.
Week 8-9 | October 13th - 20th, 2020
There was no classes in between the stated weeks. We were given time to think of our upcoming projects and practice on the exercises.
Week 10 | October 27th, 2020
Mr. Razif arranged a tutorial session today to teach us about the extra GSAP animation techniques that would be helpful for our final project.
*Week 11 onwards are consultation based sessions.
EXERCISES
Exercise 1 | HTML & CSS
The first exercise revisits the HTML & CSS knowledge we acquired from the Interactive Design module. The exercise tests our ability to use HTML & CSS to create and arrange layouts on a four-pages personal website. The personal webpage must contain:
- real texts & images
- navigation buttons
- clickable/expandable portfolio gallery
- content info page (links to social media, form or google maps)
I started off looking for a few references and sketched the wireframes roughly to achieve a custom layout for my personal website. I personally prefer making a few <div> notes on my wireframes to help me track through my classes and IDs later during the coding phase.
 |
| Figure 1.1. Wireframe sketch and DIV notes: homepage. |
 |
| Figure 1.2. Wireframe sketch: about, work, contact page. |
 |
| Figure 1.3. Assets planning for the personal website. |
After planning for my assets, I decided to make a quick character illustration to display on the landing page to give the website a customised touch and feel.
 |
| Figure 1.4. Hero page illustration progressions. |
Once the assets and contents are all ready, it's now time to put everything together in Adobe Dreamweaver. I went along with a dark theme for my personal website to match the color themes of my illustration and the moodpboard in figure 1.4.
 |
| Figure 1.5. Restyling the HTML and CSS of the bootstrap on Dreamweaver. |
 |
| Figure 1.6. Before and after original theme. |
This is a video walkthrough for the personal website:
Original Bootstrap theme: NewBitz.
Exercise 2 | Mobile App Layout
Using HTML, CSS, and jQuery Mobile, we are required to create a minimum of 3 pages mobile layout with contents of our choice. This exercise focuses on exploring the features and possibilities of JQuery Mobile since we were newly introduced to it from the past weeks.
I started the exercise by practicing and trying out the basic feature of jQuery Mobile in a document. Once familiar with the process, I quickly made a new HTML file on Dreamweaver and structured the jQuery Mobile layout using the data-role codes on my divs. I started adding several features into my content structure and altered the default jQuery CSS styling using an !important code to override its original codes.
After a while, I worked my way through the following outcome in figure 2.1 using several styling sheet codes to achieve the right spacing, text styles, typeface and sections.
 |
| Figure 2.1 The Profile page under progress. |
The following are the finalized layout for the exercise:
 |
| Figure 2.2. Homepage. |
 |
| Figure 2.3. Reading page. |
 |
| Figure 2.4. Profile page. |
 |
| Figure 2.5. Unsuitable codes for the book list thumbnail section. |
Exercise 3 | GSAP Transitions and Micro-Animations Practice
Following our second exercise, Mr. Razif instructed us to add page micro-animations for the pages and buttons we have using the GSAP animation library. We practice on our own times in order to prepare and get ourselves familiar for the final project tasks.
FINAL PROJECT
App Redesign
Before beginning on the app development process for the final project, I made a quick visit to my previous semester outcome from Application Design 1 to have a check up on the design and the UI/UX of the app. From a glance, I could see lots of improvements to be made so I decided to redesign the entire app without changing the original process of the app.
 |
| Figure 3.1. Realigning all spacing. |
 |
| Figure 3.2. Main navigation redesign. |
 |
| Figure 3.3. App onboard and illustration redesign. |
 |
| Figure 3.4. Profile page redesign. |
 |
| Figure 3.5. Notification panel redesign. |
Overall, the app took a big step in the redesigning process as I try to incorporate UI design trending patterns and modernise the original elements. I incorporated the use of gradients into the design to create depth and dimension as part of its charm and visual appeal. I also aim to create a much friendlier UI through adequate use of white space and improved on the flat design of the app. To view the full outcome, I've made presentation panels on Behance from the following link:
https://www.behance.net/gallery/107971283/Shelves-Book-Library-App-UIUX-Design
HTML, CSS, jQuery, GSAP Development
Once done with the redesigning part of the project, I continued to the HTML to start structuring the layout and content, which I transferred from Figma. I've attached screenshots of progress and underline the steps I have gone through in the project below:
 |
| Figure 4.1. Setting up jQuery Mobile and GSAP script plugin on the HTML file. |
 |
| Figure 4.2. Creating the main layout structure for each page. |
 |
| Figure 4.3. Shelves section HTML code. |
 |
| Figure 4.4. Overwriting and customizing navbar to suit my design. |
 |
| Figure 4.5A. Structuring book detail page progress. |
 |
| Figure 4.5B. Structuring book detail page with HTML DIV elements. |
 |
| Figure 4.6. jQuery popup code progress. |
The HTML, CSS, and jQuery Mobile consumed a huge percentage of the remaining time as I try to perfect the app development according to the wireframes I have already prepared for. It was mainly through the learning process of trial and error, and understanding the tools, which in this case was the HTML, CSS, and jQuery Mobile library. I've attached the final forms of the pages I coded below.
 |
| Figure 4.1A. Home page - HTML/CSS. |
 |
| Figure 4.1B. Home page - HTML/CSS (continued). |
 |
| Figure 4.2. Shelves page: featured section - HTML/CSS. |
 |
| Figure 4.3. Shelves page: P section - HTML/CSS. |
 |
| Figure 4.4. Shelves page: reviews section - HTML/CSS. |
 |
| Figure 4.5A. Book detail page - HTML/CSS. |
 |
| Figure 4.5B. Book detail page - HTML/CSS (continued). |
 |
| Figure 4.6. Main carousel codes. |
Final walkthrough video:
Comments
Post a Comment