Final Application Design II

Khansa Raudlatus Syahiidah / 0374511

Course: Bachelor of Design (Honours) in Creative Media

Module: Application Design

Task: Final Application

   Table of Contents:
  1. Compilation
  2. Module Information
  3. Flutterflow
  4. Feedback
  5. Reflection
1. COMPILATION
  • TASK 1: LINK
  • TASK 2: LINK
  • TASK 3: LINK
  • Final Application Slide Presentation - LINK
  • Video Presentation - LINK
2. MODULE INFORMATION

3. FLUTTERFLOW

Flutterflow Progress:

1. User Authentication


2. Database Integration:
    - User Flow -

    One of the main user flows of my book app is the upload feature. My book app is not only to track books you have read and book reviews from others but also a community center where readers can interact with each other. Through the plus icon in the bottom centre of the app, users can click that in order to upload an article post or post a story.


 
    One of the first tasks I tried to work on for my main flow was the “upload photo” feature. However, after many tries, I find it difficult to make the "upload photo" action work, so it also made it harder to continue and work on the other action. Therefore, I decided to delete this feature, and started the "create article" page from beginning.

 
    After constant errors and problems in my flow to “post an article”, I decided to create a new page and did it from the beginning again. When creating this page, the action that I used was “create document”.  I also made the max lines to blank so users have no limit on how many words to write in the article body section. After finishing the writing, the post button will lead to another page.

    However, as I accidentally delete an action in the post button, there were some changes made in the action. Such as the "snackbar" I added when nothing is written and users have clicked post. This allows users to be alerted that in order to go to the next page, filling in the title and body in mandatory.

    Using page parameters, I was able to add in a notification when users had successfully published an article to the “social page”. This way, the notification on successfully publishing an article can only appear when users actually go through writing and posting an article. For example, if users click the “people” icon to go straight to this page, it won’t appear. Users can then click which will lead to their actual written article post page. Currently the trouble I am facing here is that the data I have written to publish an article won’t show up in the specific article page. I tried to link it, but I'm still struggling. Despite the others working smoothly, I will still need to find the problem and solution in this area.

    I also added in another bottom sheet for the post options. This way, not only will the flow be on posting an article, but also to either edit or delete the post. I also made the background slightly darker as the bottom sheet appears.

    - Animation -

    I also added a scale effect to my “post button” to make the app feel more responsive.


Final Presentation:
4. FEEDBACK

5. REFLECTION

Comments

Post a Comment

Popular posts from this blog

Minor - Cooling the Heat, Healing the Mind [Group 10]

Image
Khansa Raudlatus Syahiidah / 0374511 Advanced Typography / Bachelor of Design (Honours) in Creative Media Module: Minor Table of Contents: 1. Links     2. Introduction 3. Project: Cooling the Heat, Healing the Mind 4. Feedback 5. Reflection 1. Links Figjam board Main Google Drive Figma app link  (view only) Group 10 final proposal 2. Introduction 3. Project: CHHM Weekly progress Week 1-2: We were proposed the assignment guidelines of the assignments throughout this module and we also formed groups. Then were given the google sheets for the different projects to choose from.  Topic chosen:  Cooling the heat, Healing the mind  Team members :   Khansa Raudlatus Syahiidah As-Sajad (0374511) (team leader) - UI/UX  Erin Samantha Fenner (0381696) - Graphic Design  Feilyc...
Read more

Design Principle TASK 3 - DEVELOPMENT & DESIGN

Image
Khansa Raudlatus Syahiidah / 0374511 Course: Bachelor of Design (Honours) in Creative Media Module: Design Principles Task 3: Development & Design Table of Contents: Lectures Instruction Task 3 Feedback 1. Lectures 2. I nstruction 3. TASK 3 - DEVELOPMENT & DESIGN Task 1 & 2 recap: On our previous task, we had to sketch 3 different ideas while still applying the design principles. These sketches also referred to our ideation based on the selected design poster we did. After we have all 3 sketches done, Mr. Fauzi gave us feedbacks on what's good and could be better. Through this session, we were then able to continue further to task 3 using the chosen poster my Mr. Fauzi. Task 3 recap: For our final task, we had to develop further / refine our chosen sketch  through colour exploration, composition, typeface, positioning  with design principles in mind. Task 3 design process:     -  Original sketch     -  Refine process Final De...
Read more

Advanced Interactive Design - Exercises

Image
K hansa Raudlatus Syahiidah / 0374511 Course: Bachelor of Design (Honours) in Creative Media Module: Advanced Interactive Table of Contents: Lectures Instruction 1. Lectures Week 1: During our first week of class, Mr. Shamsul gave us an introduction on how and what we will be working on in the next 14 weeks. He showed us past seniors work to give as the idea on what we will be doing. 2. Instructions 3. Exercises 3.1 Exercise 1 - Asset Creation Sketch:     During our week 5, Mr. Shamsul gave us a task to sketch a character to use as our Adobe Animate exercise. I started of my sketch using paper before starting straight in Adobe Animate. I was able to proceed with digitalizing it after consulting my character idea with Mr. Shamsul. Digitalization:     Initially, I tried tracing my paper sketch to Adobe Animate, however it wasn't really helping. Therefore, I majority was done without tracing. I often used "transform" to ensure both sides of my character are align. I als...
Read more