APPLICATION DESIGN Ⅱ / EXERCISES

29.8.2023 - 0.0.2023  Week 1

Fadil puthiya madathummal peedikakandy / 0354579 / Bachelor Of Design (Hons) In Creative Media

Application Design Ⅱ

Exercises

LECTURE

Week 1Briefing

So in this module, we have to use the same application with low and high-fidelity prototypes that were built in Application Design 1 and then code all that and publish a working application using HTML and CSS 

Mr. Razif reviewed my Figma app design this week and provided feedback on whether or not I should make changes. He then gave me feedback and instructed me to identify the issues with my prototype design.

Problems I found before I started designing this in application design I 

Information architecture before designing

Designing, testing and prototyping the wireframes

Final design

Link to the prototype: https://www.figma.com/proto/u4Y0Oud7VTUvVoOhlcaOlt/Kumpool-high-fidelity-wireframe?page-id=0%3A1&type=design&node-id=3-1007&viewport=-5003%2C844%2C0.44&t=7kS0GqVSOqgevwqo-1&scaling=min-zoom&starting-point-node-id=3%3A1007&mode=design

Link to the design : https://www.figma.com/file/u4Y0Oud7VTUvVoOhlcaOlt/Kumpool-high-fidelity-wireframe?type=design&node-id=3%3A1007&mode=design&t=duD7pI2kzexLsl7u-1

Changes I made for App Design II

Login page now a better-sized buttons and colours to differentiate situations

All the main floating buttons have been improved and the size is more convenient And the drop shadows has been changes for a more visually appealing aesthetic

Added headings to the map map so that users can already know which location theyre using the time

Changes made to the line spacing for better click interaction

Changes made to clustered and confusing buttons

Added consistency to button colours

Exercises

EX- 1 

Layout design

Mr razif gave us some images and told us to make two rows and columns to separate and properly layout the design using HTML and CSS

I forgot to take pictures and I couldn't save the design file so i cant add any images but basically i finished the design

Week 3

Copy this layout design from figma and turn it into a full layout using html and css

I used Adobe Dreamweaver to do this

coding the design

Final outcome

Week 4

Add interactivity to the play/pause button and do some other things such as enlarging the image and try to add a drawer

Coding the design

Final outcome (working play/pause button with additional drawers and features)

Reflections

Experiences

My proficiency in HTML and CSS has room for improvement, but I'm excited about the progress I'm making through this module. It's been valuable in enhancing my skills in creating appealing layouts and adding interactivity to my designs. Moreover, I'm continuously acquiring new knowledge, and I'm eagerly anticipating the moment when I can bring my Figma designs to life solely through coding.

Observation

I want to express my thoughts candidly, without intending any offence towards Mr. Razif. I've found the teaching approach in this module somewhat challenging and underwhelming. It seems there's a lack of clear instructions, and the overall organization could be improved a lot because it feels very unprofessional. However, despite these challenges, I'm gradually gaining a deeper understanding each week. I'm learning valuable skills on translating designs into code and troubleshooting errors, which is quite rewarding.

Findings

In the App Design 1 module last semester, I found the instructions to be exceptionally clear, and the project submissions and exercises were enjoyable, thanks to Mr. Shamsul's teaching approach. I believe that this current module could become more engaging and less challenging if we were provided with more comprehensive guidance and instructions, along with additional learning materials.

Currently, I'm in the process of making numerous adjustments to my design because I believe there's room for improvement in terms of the user experience. Throughout this module, I'm committed to enhancing both my design concepts and ideas as I work on developing the app further.