Software Product Development
An iteration on color and design
Before we get in to design, please check out this blog post to understand more about our product! 😃
Apart from using tactics to create an awesome product, an equally important aspect to consider in order to make the product well known and widespread is design and user interface! Let’s jump right in and see the different ways in creating a well designed product!
Color
We use colors to either attract users or drive users attention to somewhere else on the screen. Colors are a great way to to explain the tone and usage of your app.
Hue — Color tone
Saturation — “intensity” or “chroma” of the color.
Value — Darkness or lightness of the color
Temperature — warm and cool colors
The main colors we used in the app were these different shades of green. Green can represent earth, plant life, health, and freshness.
- Green theme to invoke an emotion of earth life, and bright colors to create a sense of happiness.
- Similar shades to improve readability and
- Used a gradient for modernness 😉, improved visual communication, and a shift from light to dark which is commonly found in nature
- Heavy colors to stress on a specific text or design
Strategies to choosing nice colors
- Check your competitors in the market place.
- Choose colors that you like for the app and support it with other color choices.
- Choose color by association.
Typography
- Kerning — The space between characters(makes type more legible).
- Leading — The space between lines. Leading should be smaller on phones than on desktops.
- Font-face — A style of lettering where usually a single typeface is recommended.
- Font-family — Fonts sharing a common design style are grouped into families.
- Font-size — Smaller texts can hurt users eyes while bigger letters can take up too much space on the screen. It is recommended to use a text size of at least 11 points in iOS
Information Hierarchy
We can use typography to claim different hierarchy of a design. Hierarchy is the implementation of styles on text. Without styles, the type is flat and uninteresting. As for our app, we chose to use 2 main levels. These include a headline and a body.
- Headline is used for drawing users attention
- Body is used for readability and informational text
These 2 levels are to show a good hierarchy while maintaining a simple UI. Other hierarchy styles include size, weight, color, and position.
App Logo Design Iteration
For our logo design, we were struggling a bit on which design we could make best represent an app that has something to do with location, maps, and multi users. We went through a few designs at first and you can see down here that we added a light grey background to the image
The iteration process started off with a very simple design using just a single letter representing the app name and having 3 lines to make it look like a road. This design looked too simple and we didn’t like it so we chose a pin point and used the basic blue color. We then improved on the design and added a small gradient on the pin and changed the background to a light grey. The last 4 designs are pretty similar and has only a few changes and touch ups. However, we decided to stick with the last design. I think this best represented the app we are aiming to build with 2 pin points and a light grey background.
Using all these components of design, we were able to create the design of our app!
Thank you for joining us on our journey of creating this product!
A huge thanks to Sarin Swift for making this project fun. 🎈
All feedback is accepted. 😃 Don’t forget to drop some claps! 👏👏👏
