Application Design I - Task 4: Final Prototype

January 04, 2026

Application Design I - Task 4: Final Prototype

24/12/2025 - 31/12/2025 / Week 13 - Week 14

Aquela Zefanya Soares / 0374377

Application Design I / Bachelor of Design (Honours) in Creative Media / Taylor's University

LECTURES
INSTRUCTION
TASK
REFLECTIONS

LECTURES

Week 13

User interface – visual elements

Line and shape

use the same style and thickness

Color

highlight things that r important
needs to stay consistent
you don’t need to use the exact same color and shade of the brand everywhere
color plays an important role in branding; depending on the target, the color scheme could be different

Form

users want to know the instruction first (make it big), then the explanations
must have instructions and confirmation, then add supporting instructions to help users understand
provide backup plans

Texture

try to be consistent with the styling
keep 3 effects max, don’t use too many effects, keep it consistent
priority must be visibility, so it’s easier to distinguish important parts from others

Space

decide which elements should stand out, then plan the spacing

User interface – design principles

Text

consider the size, start with 12pt
try not to use too many variations in thickness
10pt is only for things u don’t want ppl to read
keep the hierarchy between header and body text close, but be mindful of font size

Color

try to avoid pure black like #000000; use a “lighter black” like #1f1f1f
keep colors in the same hue, but play around with value
try to avoid 50% gray (choose either 40% or 60%)
color rule: 60–30–10

60% one color (usually background)
30% another (text)
10% primary color (buttons, accents)

Shadow

apply drop shadow to buttons
default (elements): x=0, y=30, blur=50, opacity=10%
clickable: x=0, y=4, blur=4, opacity=25%
use slightly tinted shadows instead of pure black, e.g. #3d4b5c
use the same hue or complementary color for shadows
don’t apply shadows on text (most non-clickable elements shouldn’t have shadows)

Buttons

buttons need to stand out
best height is between 40pt–60pt, never below 40pt (especially final actions)
primary buttons: primary color as background
secondary buttons: use primary color for stroke and text
tertiary buttons can be placed elsewhere
types of buttons:

filled button (solid color or gradient)
line button (outline only)
transparent button

corner radius sets the tone (square buttons feel more serious)
always place the next-step button on the right
make buttons the same width to show sequence and consistency
use clear button text (e.g. “Continue” vs “Complete payment”, it affects decision-making)

Icons

icons should generally fit within a 24pt × 24pt bounding box
match icon weight and width with the text
icons can include text if the meaning is unfamiliar or complex

Photos

ensure content priority remains clear
use overlays when placing text on photos (e.g. gradient from dark/light to transparent)
photos should reinforce the content
try to use images within a similar range so they complement each other
common practice: use image direction to guide user focus to content

Illustrations

easier to work with than photos (depends)
not always effective, so use wisely
give illustrations space (make them bigger)
sources: storyset.com, icons8.com/ouch, streamlineicons.com (free & paid), storytale.io (paid)

Cards

usually used when there’s a lot of content
consider long names or large amounts of information

White space

creates focus on the rest of the content

How to make an element look “clickable”?

add thickness (bold/underline important text)
use different colors to create contrast

User interface – navigational components

Search bar

single-line text input to search information

Breadcrumb

shows the path to the user’s current location
helps users know where they are and go back easily
use arrowheads instead of slashes

Pagination

navigation through pages

Slider

used to set a value or range of values
functions as a filter
shows progress
usually horizontal

Tags

used at a lower hierarchy to find related or previous content
can be color-coded
button-based
usually preset categories

Icons

alternative to text links and buttons
represent categories or items
can include text labels
maintain consistent icon style
prioritize readability; if unclear, add text

Carousel

for skimming items
showcases multiple items
highlights featured content
quick access to items
blocks are usually clickable
efficient use of space
guides user flow (onboarding, collections, product features)

Mobile specs

minimum text size: 16px
increased line spacing
element size: at least 44 × 44px

Form

consider heatmaps
visible labels
avoid multi-column grids
include keyboard slide-up
keep content in 1 column (2 if necessary)

Layout grid

preserve readability
more air/space
max 3 text blocks per column
max 5 items per row
consider using a framework

consider whether a frame is needed or not

User interface – content

Dropdown

for selection
single-line or multiple options
can include images

Radio button

for selection
only one option allowed

Checkbox

vertical arrangement preferred
select one or more options
can be one or multiple columns

Toggle

select between 2 states
1 state is required

Date & time picker

select date and time
calendar dropdown

Grids

improve readability and accessibility
better collaboration

Monetization & gamification

Monetization

any practice or business model that brings money to an app

Why monetize?

creating, maintaining, and operating platforms requires time, energy, and resources
revenue helps sustain and grow the platform

Monetization types

user interaction (ads, remove ads, subscriptions, pay-per-use, freemium)
active purchase (affiliate marketing, sales, microtransactions, in-app purchases)
intellectual property (licensing)
others (sponsorship, donations, data)

Freemium

users sign up for free, then pay for extra features
try first, pay later if needed

Gamification

What is gamification?

the use of game elements in non-game contexts to motivate people and increase engagement
used in education, marketing, business, and more

Game elements

customization
levels
experience
statistics
leaderboards
achievements
medals

Octalysis of gamification

Epic meaning & calling

being part of something bigger
community building, volunteering, beginner’s luck, inner talent

Development & accomplishment

progress
skill development
overcoming challenges

Empowerment & creative feedback

trial and error
exploration
feedback loops

Ownership & possession

accumulating wealth
improving digital identity
collections

Social influence, relatedness & envy

acceptance and belonging
competition and envy
mentorship and companionship
nostalgia and memories

Impatience & scarcity

waiting for something unavailable
limited access, premium content
membership, exclusivity, luxury
paid shortcuts

Unpredictability & curiosity

uncertainty about outcomes
randomness
gambling and risk

Loss & avoidance

fear of losing investment
perceived value of time and effort
emphasizing negative consequences
FOMO

Intrinsic vs extrinsic

extrinsic: enjoying the reward
intrinsic: enjoying the action

Week 14

Portfolio

Modular

pack in advance
pack only what u need
keep ur valuables safe

Outcome first

Respect the viewer’s time

show results first, then the process
allow people to skip
different levels of reading (3 sec, 3 min, 30 min)

Don’t explain the process

explain your results when using the process
managers already know the theory
show that u can apply it

Highs & lows

No smooth ride

what difficulties did u encounter
explain what u tried
show what didn’t work and what did

Storytelling

detail the context, the challenges, and the outcome

Real work

Show dirty work

show the quantity of research and sketches
before vs after

Show your own work

what was your role?
what were u in charge of?
copying is fine for training only
credit everyone
show critical thinking
AI doesn’t count (yet)

Growth

Portfolio is where u were

a snapshot of your past
it shows your growth
helps others see u

It keeps evolving

update it as soon as possible
phase out old content
always show your best work

INSTRUCTION

<iframe src="https://drive.google.com/file/d/1gtSS1J2lpWLbJweA-_xDrukA2R3HCXo9/preview" width="640" height="480" allow="autoplay"></iframe>

TASK

UI kit

High Fidelity prototype

Presentation slides

REFLECTIONS

I learned a lot from this module, from how to make a better prototype, how to utilize Figma more, and how to understand users' preferences through deeper research. To be honest, I've been using the lectures from this module and applying them to other modules, especially when conducting user testing, and it has been really helpful in completing my work. This is also thanks to Mr. Sylvain, who taught me the module and showed real examples, which made it easier for me to understand and learn better.

I know how hard it is to make an application or website, but after trying to design one myself, I realized just how difficult it really is (lol). Even with tons of references, it is still challenging to create something that I genuinely like, and this has increased my respect for professionals in this field.

At the end of the day, I'm quite satisfied with my work and the knowledge I gained from this module. Now that I know how to utilize Figma better and have a clearer idea on how to create a better projects in the future, I will refer back to this project and compare it later to see my growth.

Search This Blog

Aquela Zefanya Soares (0374377)