Once the sitemap and vision were approved by all members, we moved onto researching UI components for the application.
This included color schemes, researching other app's image layouts, fonts, and rounded vs sharp edges.
Colors & Layout:
While looking at Instagram's color palette on the US Brand Colors website, I noticed that they stick to the left hand
side of the color psychology wheel. Their colors include, royal blue ($405DE6), blue (#5B51D8), purple (#833AB4),
dark pink (#C13584), purple-red (#E1306C), red (#FD1D1D), dark orange (#F56040),
orange (#F77737), yellow (#FCAF45), and light yellow (#FFDC80). These colors represent the following:
optimism, loyalty, reliability, power, elegance, excitement, desire, cheerfulness, and stimulation.
Not only do these colors capture what the app represents, it also brings a bright and young look to the app,
capturing user's attention as they tap on the icon to open it.
Flickr on the other hand has only 2 colors: true blue (#0063DC) and bright pink (#FF0084). These colors represent loyalty
and elegance. This tells us that they are bringing trust, professionalism, and an older feel to their app compared to
others. One of the things that Flickr focuses on providing for their users is the ability to share photos with their
friends and family. This can be seen through their older style layout for their image gallery. Their images fully fit in each tile,
with their sizing based on whether the images are portrait or landscape mode. The images also display descriptions at the bottom of
the card when users hover over them with a mouse. Their layout reminds me of Myspace and Facebook's old photo album layout.
As for Pinterest, they use red (#E60023) and white (#FFFFFF). According to the color psychology wheel, the red represents excitement
while the white represents purity and integrity. Pinterest users browse through the app to get new ideas and brainstorm for projects,
which can bring excitement to their research process. With the added title at the bottom of each image, it allows users to
quickly gain more insight of an image that captured their attention. After users select an image, the description section contains links
that allows their users to research more into the image's content.
The team and I briefly discussed the color palette and we all agreed that we wanted subtle colors as the app's secondary colors and black
and white as the primary colors. Instagram's use of bright colors added a youthful and positive feel, but using a bright palette
with more than 3 or 4 colors didn't fit with the professional and older aspect we were leaning towards. Flickr's colors
were closer to the idea we had in mind, especially with their muted tones. Finally, Pinterest colors have the bold style
we wanted in ExposureIO's secondary colors.
However, when designing the digital assets, this color palette did not match the design we created. We wanted it to look more
simplistic and straight forward, and the palette did not have the professional tone we were striving for. This led us to look at colors on
the black and white scale. According to Tailor Brands and Writing Explained, black and white represents a company
having "very defined ideas that will not be changed" and "a clear message and authority". For ExposureIO, black and
white also represents a blank canvas for artists to add color and expression to. In the end, we chose the colors
black (#000000), jet (#313131), gainsboro (#DDDFDE), and white (#FFFFFF). Black and white will be our primary colors while jet and
gainsboro will be our secondary colors. Choosing these four colors gives us a nice gradient to work with. It also allows us to not have to
fully depend on pure white and black, since they can be harsh on the eyes. There was a thought to change the tones for the black
and white so they wouldn't be as harsh, but the boldness of those shades added the strength and depth ExposureIO was looking for. As long
as the primary colors are balanced with all the components of the UI, then those colors should not have that problem.
Fonts:
During my research on fonts, I found that Instagram created and uses their own font called Instagram Sans (Instagram about page).
Flickr uses Frutiger (information retrieved from Fontinlogo), and Pinterest uses helvetica/neue haas grotesk (information retrieved from Sitepoint).
We knew that in order to choose a font for ExposureIO, we have to choose one that makes our app distinctive, legible for all audiences,
and matches the aesthetic of the app. This allowed us to quickly remove any of the free flowing fonts like Chalkboard and cursive,
thin/condensed fonts like Open Sans Condensed, and typewriter fonts. We wanted a modern font that portrays a level of professionalism,
while being plain/subtle enough so that the user's images can stand out. We chose 2 Google fonts each and discussed what drew us to
select them. While all the fonts we chose were very similar to one another, we narrowed it down to oxygen & Rubik because of their small kerning.
In the end, we went with oxygen because it had a lighter weight and narrower lettering compared to Rubik.
Font Selection Notes:
Edges:
For the edges of images and components, I used the guidelines from my previous notes: 'Rounded vs Sharp Edges' (via medium’s ‘Rounded
Corners Over Sharp Corners, Why rounded corners are trending’ by Andrea Perera)
"Much more organic to our everyday objects in physical world, sharp edges can
represent a threat (much more aggressive), rounded corners allow for an easier
flow for our eyes, aesthetically appealing, the sharper the corner the brighter it
appears and the harder it is to look at."" - medium.com
Use round corners for: maps & diagrams, eye-catching elements, content/info
boxes, sign up/buy now buttons (call to action). Do not use: for identical elements & important action elements
Use edge corners for: for important/attention content boxes, emergency/
immediate action buttons, combining different elements, tags/filters/drop down.
Do not use: to differentiate elements & user attraction elements
Each user's uploaded image will have sharp edge corners because they are the 'important content boxes'. We balanced this
out with round corners for the navigation bar, so that it can stand out from the images in order to capture the user's attention quickly.