Crafting the color palette and solidifying the app's identity are crucial aspects of branding. During the development of the greyscale wireframes, I compiled a collection of words that I believe encapsulate my brand, drawn from insights gathered during interviews and research.
Additionally, to enhance the clarity of my brand's identity, I have created a "MORE A THAN B" list, delineating what my brand aspires to embody compared to what it deliberately avoids.
.png)
Process Of Making The Moodboard & Fianlizing Colours
Step 1
I picked the 7 strongest keywords relevant to the brand's identity and vision. Then, I collected 5-6 images based on each keyword and proceeded to construct a moodboard incorporating these visuals.
Step 2
.png)
Step 3
After generating different kinds of neighborhoods, I decided to choose one neighborhood to continue the process..
Wholesome Haven
Rustic Homestead
Pebble Pathway
Electric Skyline
Organic Oasis
After creating the initial moodboard, I developed a color palette featuring a wide range of shades. This palette, inspired by the moodboard's diverse hues. After building the initial color palette, my next step is to generate neighborhoods.
Step 4
Organic Oasis
Why Did I Choose This Neighbourhood?
I chose this neighbourhood because it aligns best with the brand identity. It feels like these earthy hues give an ethical feeling and align with my whole concept
Step 5
Then I recreated the color palette by selecting the most relevant images that align with my neighborhood. Keeping my target persona's preferences and interests in mind, I opted for visuals featuring neutral and fresh colors to create an aesthetic that is both aspirational and accessible. The keywords I chose strongly reflect the moodboard's essence and were instrumental in shaping the final version.
.png)
Step 6
After utilizing the extracted colors, I refined the tone and crafted a calibrated color palette for further exploration.
Step 6
Calibrated colors
Subsequently, I began pairing two colors together to conduct additional experiments.I aimed for a combination of two pop colours and a neutral tone.
Then I started testing various color pairings while adhering to the 60-30-10 color method.
Step 8
After thorough experimentation with various colors, I've reached a definitive conclusion. My chosen brand colors are now finalized: #FBE5D6, #648A60, and #404040. These hues perfectly embody the essence and identity I envision for my brand.
Finalized Moodboard and Brand Colors
.png)
Building UI Color Palette
The brand colors for our mobile app, khaki green and light pink, were chosen to enhance accessibility and readability. Khaki green 500 aligns with the sustainability theme and is consistent in the navigation bar. Light pink 100 provides clarity on screens like the Home Screen. White and black balance the palette, emphasizing details. Distinct colors signify actions: bright green for success, yellow for warnings, and red for errors. This deliberate scheme ensures user comprehension. For example, bright green 900 indicates the user's position within a
series of screens. Overall, the curated palette communicates app elements effectively, contributing to an intuitive and visually pleasing user experience.
.png)
Typography: UI Library
.png)
Atoms: Iconography
Atoms: Buttons, Inputs, and Controls
Molecules
Organisms
Building The Wordmark
Step 1
-
After the voting session, I chose the brand name "Ecoparency" and began sketching the wordmark using pencil and paper.
-
The name blends "eco" and "transparency," reflecting a dedication to eco-friendly practices and transparent sustainability efforts.
-
Eager to showcase my initial sketches, I experimented with diverse handwritten fonts and logo styles, exploring various weights and alignments.
-
This phase involved testing different designs to eventually refine and choose the optimal option for the future.
-
I began by exploring various font styles in Figma and utilized Figma's pen tool in certain designs to modify different fonts.
-
Initially, I used the "Inter" typeface, as it was the one, I chose for my prototype, but I wanted to explore different fonts for my wordmark instead of solely relying on it.
-
Throughout this process, I employed a variety of techniques.
-
With my background in graphics, I used Photoshop and Illustrator to create some wordmarks.
-
Additionally, I digitized handwritten fonts by scanning and refining them in Photoshop before adding them to Figma.
-
As shown in the pictures, I experimented with multiple fonts and shapes, adjusting their weights to alter their boldness.
-
This approach was crucial in developing a wordmark that perfectly complements my design solution.
Step 3
-
After the initial stages of the wordmark development, I focused on the letter “O” in the word "Ecoparency," shaping it to resemble the Earth and thereby integrating the concept of sustainability.
-
After numerous sketches and digital iterations, I chose a particular “Earth” design to refine.
-
This involved adjusting details like the space between the arrows around the Earth, the dark regions within it, and the overall design weight.
-
My process began with hand-drawing the sketch, then scanning and redrawing it in Illustrator and Photoshop.
-
Subsequently, I used Figma and its pen tool for further development.
-
The top part of the page displays various initial designs, while the bottom part reveals more intricate experimentation with the same design.
-
Upon closer inspection, one can observe subtle variations that contribute to a more in-depth development of the design.
Step 4
-
I experimented with various font styles for the 'O' shape in Ecoparency to complete the wordmark.
-
I selected my top few designs and gathered feedback from my colleagues.
​​
-
Following a voting session, I reached a decision and finalized my wordmark design.
​​
How Did I Build My App Icon
​​
​Upon completing the wordmark for my design solution, I transformed it into an app icon. Providing context, an app icon serves as the visual representation of the app in the app store and on users' devices. Its primary role is to swiftly convey the app's purpose and functionality to users.
​​
-
My inspiration was largely drawn from Facebook's effective utilization of various shades of blue to establish its brand identity.
-
Following this approach, I explored different tones of a single color during my design process. This led me to choose a final app icon that reflects this concept.
-
The aim was to create an icon that stands out on the main home screen of a user's phone. I selected a khaki green shade, in line with my color palette's focus on sustainability.
-
The contrast between a darker and a lighter green shade in the design represents transparency.
-
Additionally, I finalized this app icon specifically for iOS.
​Final App Icon
