Application Design I/ Project 2: UI/UX Design Document

on



05.09.2022 - 10.10.2022 (Week 2 - Week 7)
Audrey Gracia Djohari / 0348120
Application Design I
Bachelor of Design (Hons) in Creative Media / Taylor’s University
Project 2: UI/UX Design Document

WEEK 6:

Key takeaways are written in the "Further Reading" section
WEEK 7:

Reading Material

What is a UI style guide?
A UI Style Guide is a resource that contains the necessary details related to your product’s user interface, which ensures continuity throughout the product’s design. It helps define elements like typography, colors, layout, and components that are approved to be used in accordance with brand guidelines.

What should I include in a UI style guide?
  • typography
  • iconography
  • layouts and grids
  • color palette
  • components. 

EXERCISES

WEEK 5:
Exercise Brief

Download one of the apps in the list and re-create the UI design. Select a minimum of 5 screens (not including onboarding) for the task. You're allowed to use any software (Adobe XD, Photoshop, Illustrator, or Figma) for the task. You may use any images from any resources as long as it is appropriate to the design. You need to study and observe carefully the original design and implement it in your crafting. Focus on the details, examine each pixels use in the original UI design and apply it into your own work.

Here is the list:
  • Productive - Habit Tracker
  • Sectograph
  • Trip
  • AirBNB
  • Premier League
  • Strava

Process

Media: Figma
Chosen App: Productive - Habit Tracker

Fig 1.0: Editing in Figma

Final Outcome

Fonts used: Sora & Raleway



Fig 1.1-1.5: Page 1-2-3-4-5 (Recreated)


Page 1: What time do you usually wake up?

Fig 1.6: Page 1

Page 2: Habit

Fig 1.7: Page 2

Page 3: Exercise

Fig 1.8: Page 3

Page 4: Challenges

Fig 1.9: Page 4

Page 5: Today's Schedule

Fig 1.10: Page 5

PROJECT 2: UI/UX DESIGN DOCUMENT


Category: Travel
App: Malindo Air

Figure 2.0: Malindo Air on App Store

Instruction

After locking down their App concept and idea, students are now ready to proceed to UX design. The students are required to produce a comprehensive UX design document which will provide better directions for them to design the app. Based on the information gathered in task 1, students will:
  • Determine and verify their target audiences.
  • Outline the content element of their app, and exercise card sorting
  • method to achieve optimum information architecture.
  • Listing the app features and identifying the app's Minimum Viable Product (MVP).
  • Create wireframes of the screens
    Material design template to be used in your UI design process

    UI Documentation 

    NOTE: 
    • The second Phase of the project will include the UI Documentation. This includes the new concept of the UI design, and a mood board or style guide (Contains specific implementation guidelines, visual references, and design principles for creating the UI design).
    • Also include what kind of icons, buttons, etc.

    Fig 2.1: Creating the UI Documentation, Adobe XD


    I used Adobe XD to create the color palette & UI guide. To determine the size and ratio of the design elements, I take a look at the replication of Productive - Habit Tracker app. From that exercise, I could find the suitable size of the font and other elements. All of the contents in this PDF document below are accurate in size and color for iPhone 11.

    Font Used: Nexa

    Fig 2.2: Malindo Air App UI Documentation (Final & Revised), 24.10.2022

    FEEDBACK

    WEEK 5:

    Specific Feedback
    (Exercise) Try adding gradient in Figma

    General Feedback
    (Exercise) 
    Size does matter especially in designing a button, consider the easiness of the user's thumb when clicking on it.
    In interface design study, usually 2px is the best (applies to shadows)


    WEEK 10:
    Specific Feedback
    (UI Guide) 
    • Avoid using gradients for the interactive elements. If you still want to use it, use a fixed color code and consistent gradient placement.
    • The yellow button is not very clear, try changing the font color. 
    • Make the low-fidelity prototype first and then proceed to the final one.
    • Pay attention to the curve's size. If the outer curve is 16px then the inner curve is 14px.
    • Later test your design to people who are similar to your user persona.

    REFLECTION

    Experience
    I enjoyed the process of this project because I feel like this was the first time I knew how to create a professional design document. The idea of creating the palette and font size in Adobe Xd is very effective because I can just copy and paste the elements into my design canvas for the next project. The articles Mr. Shamsul provided were sufficient for me to create my UI design document. And so far, I'm pretty happy with my design result because it looks cleaner and better than the original app.

    Observation
    After trying out both Figma and Xd, I found Xd more comfortable to use because it has a very good measurement tool (Option Key) and it's less confusing for me personally. However, one thing that I like more about Figma is its plugins, there are so many of them. Other than that, the replicating exercise was very helpful for me to understand apps even more. By doing the exercise, I was able to see the details of the app design such as the font size, the margins, spacing, and their placements.
      
    Findings
    I found that measurement and consistency are very important in creating a user-friendly and aesthetically pleasing app, size really matters. 


    FURTHER READING

    - The 6 Key Principles of UI Design


    Reference: 

    Chappal, M. (2022, July 25). The 6 Key Principles of UI Design. Maze. Retrieved October 12, 2022, from https://maze.co/collections/ux-ui-design/ui-design-principles/


    “User interface design is about using typography, images, and other visual design elements to turn a basic interface into something digestible and usable.”
    –Jonathan Widawski
    • Golden rules of user interface design:
    1. Make user interfaces consistent
    2. Allow users to navigate easily via shortcuts
    3. Provide informative feedback
    4. Design dialog to yield closure
    5. Prevent error as much as possible
    6. Allow users ways to reverse their actions easily
    7. Support internal locus of control
    8. Minimize memory load

    • 6 key UI design principles
    1. Clarity
    You only have eight seconds to grab a user's attention, so make sure you don’t waste those seconds by creating confusion and chaos.

    2. Familiarity
    The best interfaces are familiar to users.
    There are several benefits of incorporating the UI design principle of familiarity in your product:
    - Increases user retention
    - Easier for UI designer
    - Reduces the learning curve for users

    3. User Control
    This basically means giving users different options to go back a step when they feel they’ve made a mistake. 

    4. Hierarchy
    Strong visual hierarchy is a core design principle of a successful user interface. It consists of arranging visual elements in a way that explains the level of importance of each element and guides users to take the desired action. As a designer, your job is to organize UI design elements in a way that makes it easy for users to navigate within your product.
    - color
    - size
    - fonts

    5. Negative Space
    Give your elements some breathing room - don’t cram all the objects and elements together on the screen. Negative space makes important elements pop and stand out.

    6. Flexibility
    Flexibility is a key principle of user interface design. You not only need to make your user interface learnable for new users, but it should also have accelerators that help expert users speed up their processes. From novices to experts, ensure your product is flexible and efficient for all kinds of users.

    • Accessibility
    When designing products and websites, make sure that you meet the requirements of WCAG (Web Content Accessibility Guidelines).
    1. Some easy ways to incorporate the principle of accessibility while designing products are:Use the WebAim Color Contrast checker to create strong color contrasts
    2. Ensure all your images have corresponding alt attributes
    3. Ask yourself if users can easily navigate your website via the tab key on your keyboard


    Comments

    Post a Comment