DIGINOTES
Branding | UX/UI Design
Overview
DigiNotes is a digital note-taking application that allows users to write with a stylus for improved memorization and creative expression while also providing the option to type if preferred. A cohesive brand identity was developed for the application, including visual elements, typography, and color schemes to create a consistent and engaging user experience. The application interface was designed in Adobe XD with a focus on intuitive navigation and functionality, and a promotional website was created using Visual Studio Code to showcase the features and benefits of the application to potential users.
Cilent
Class Assignment
Self Study
Dimensions
App (1080 × 1920 px)
Website (1920 × 1080 px)
Branding Logo
Overview
DigiNotes is a digital note-taking application that allows users to write with a stylus for improved memorization and creative expression while also providing the option to type if preferred. A cohesive brand identity was developed for the application, including visual elements, typography, and color schemes to create a consistent and engaging user experience. The application interface was designed in Adobe XD with a focus on intuitive navigation and functionality, and a promotional website was created using Visual Studio Code to showcase the features and benefits of the application to potential users.
Cilent
Class Assignment
Self Study
Dimensions
App (1080 × 1920 px)
Website (1920 × 1080 px)
Branding Logo
User Flow Diagram
User Experience
Clear Navigation, ability to access notes in various ways and clean organization.
Improve: Confusion on buttons.
User's Goal
Needs a physical way of taking notes with pen and paper, because writing notes helps with memorization and allows for creative freedom to draw.
User Experience
Clear Navigation, ability to access notes in various ways and clean organization.
Improve: Confusion on buttons.
User's Goal
Needs a physical way of taking notes with pen and paper, because writing notes helps with memorization and allows for creative freedom to draw.
Early Concept Development
Brand Identity Assets
Logo
Light
Dark
Tinted
Typefaces
Color Scheme
Primary
Hex: #45B8FF
R: 69 G: 184 B: 255
Secondary
Hex: #114069
R: 17 G: 64 B: 105
Call to Action
Hex: #B2FFF9
R: 178 G: 255 B: 249
Logo
Light
Dark
Tinted
Color Scheme
Primary
Hex: #45B8FF
R: 69 G: 184 B: 255
Secondary
Hex: #114069
R: 17 G: 64 B: 105
Call to Action
Hex: #B2FFF9
R: 178 G: 255 B: 249
Typefaces
Additional Color Schemes
Primary
Hex: #D4B0D3
R: 212 G: 176 B: 211
Secondary
Hex: #430755
R: 67 G: 7 B: 85
Call to Action
Hex: #D551F7
R: 213 G: 81 B: 247
Primary
Hex: #9B7459
R: 155 G: 116 B: 89
Secondary
Hex: #1F1009
R: 31 G: 16 B: 9
Call to Action
Hex: #F4D5B5
R: 244 G: 213 B: 181
Primary
Hex: #D4B0D3
R: 212 G: 176 B: 211
Secondary
Hex: #430755
R: 67 G: 7 B: 85
Call to Action
Hex: #D551F7
R: 213 G: 81 B: 247
Primary
Hex: #9B7459
R: 155 G: 116 B: 89
Secondary
Hex: #1F1009
R: 31 G: 16 B: 9
Call to Action
Hex: #F4D5B5
R: 244 G: 213 B: 181
Wireframes
Onboarding
Promotional Website
Promotional Website on Mobile
Let's Connect!
© Bella Wong. All rights reserved.