# Minimalism

## Authors
* Niels Gerritsjans (@NielssG)
* Thomas Bakker (@ThomasBakker)

## Intro
To find out more about UX we have researched Minimalism and how it can be implemented and used for designing an app or website using a few key principles. In this research, we will be looking at what minimalism is, what you should do / should not do and how to use it. Since this specialization is primarily focused on mobile app development we will talk mostly about Apps and not about Websites.

## Sub questions
* What is minimalism?
* What are good and bad examples?
* What are common mistakes and misconceptions about minimalism?
* How could you approach a minimalistic design, what should you watch for

## Table of contents
* What is minimalism
* What are good and bad examples
* Good examples
* Bad examples
* Common mistakes or misconceptions about minimalism
1. Hiding every action you can behind a menu
2. Everything should look the same
3. Minimalism == Simplicity
* How could you approach a minimalistic design, what should you watch for
* Borders
* Displaying data
* Using simple icons
* References
* Scientific
* Other
* Useful links

## What is minimalism
Minimalism is a style of technique that is characterized by extreme spareness and simplicity. In the core meaningful and simple.

Minimalism is, according to [Telepathy](https://www.dtelepathy.com/blog/design/we-want-more-by-seeing-less#attachment_10041):
> It’s not about stripping away elements, it’s about adding just enough to let them tell your story.

Minimalism is, according to [this scientific paper](https://dl.acm.org/citation.cfm?id=3335104),
> Minimalist design stands for reducing a design to its most important elements

According to [Tubik](https://tubikstudio.com/lean-and-mean-power-of-minimalism-in-ui-design/) the main features of minimalism often mentioned are:
- Simplicity
- Clarity
- Expressive visual hierarchy
- High attention to proportions and composition
- Functionality of every element
- Big amount of spare space
- High attention ratio to core details
- Typography as a significant design element
- Eliminating non-functional decorative elements

## What are good and bad examples
### What are good examples?
**NS**
The NS app only shows the most used functions on the home screen. This makes the app look very clean and easy to understand. There are only a few common and useful features shown such as setting the departure time to now which can be done by simply tapping on a button. If you want more advanced options you can simply tab on an "Extra" button to enable more advanced options. The yellow header also shows you where your primary focus should be. What's also nice is that when you look at the departure the label "Departure" and the actual time are in one box and the only difference is the font weight of the label.


**Play Store**
The Play Store uses a minimalistic design by reducing the number of elements on the screen and applying a lot of white tints, which gives the user a peace of mind and lets the user focus on what is really important. Information can be found by just tapping a button instead of showing it directly to the user.


**Instagram**
Instagram lets the user focus on the content rather than the app itself. Every aspect of the app has been designed with black and white in mind, reducing the distracting components and letting the focus remain on the content. The icons are also outlined to give a more white appeal, which also reduces the distractions for the user. Instagram, in comparison to a lot of other apps, conceals ads as a post rather than an ugly banner or popup, which also adheres to a minimalistic and consistent look.


### What are bad examples?
**Aliexpress**
Aliexpress show a lot of content, confusing the user where to look for. Every part of the screen is used to display the content, which gives it a cluttered feel. The layout is also inconsistent and uses a lot of different colors, which is very confusing and distracting.


**GPS Guide**
This app is really bloated. The color scheme doesn't make a lot of sense and there is so much information being showed on the screen that you have no idea what you are looking at.


## Common mistakes or misconceptions about minimalism

1. **Overcomplicating by hiding functionality**
The common perception when designing with minimalism in mind is that people often try to put as few as possible options at a screen. The intention of minimalism is not to diminish, but to distinguish the needed functionality from the extra functionality. When needed functionality is hidden, users often have to search for it, which is a sign of a bad UX.
2. **Everything should look the same**
When you are going for a minimalistic design, you would like to use the same colors for everything, as it simplifies the layout. When this happens, the elevation of elements is often forgotten, which creates a crucial misunderstanding of the UI. Elements that conceal an action should have a [elevation](https://material.io/design/environment/elevation.html) (can be applied using a shadow) to mark their use and importance. Check out the image below to see the difference between using an elevation vs no elevation at all.<br/>
<br/><br/>
3. **Minimalism == Simplicity**
Minimalism is often confused with simplicity, as it is relatively close to each other. Simplicity means that a state or action should be simple, while minimalism is a style in which the simplest and fewest elements are used to create the maximum visual effect possible.

## How could you approach a minimalistic design, what should you watch for

For mobile web development the most popular way to create an app with minimalistic design is to use the Material Design guidelines from Google. Material design is Google's contribution to the minimalist design trend. It is founded on the philosophy of tactile reality, which is inspired by the fundamentals of ink and paper.

**Borders**
Don't use too many borders when you want to separate elements. Borders aren't the only way to distinguish two elements from one another. Using too many borders can make your design feel really busy and cluttered.


**Displaying data**
Below you see an example of a card with some information about a house. Both cards display the same information except the right one is a lot clearer and focusses more on the important content. Also, some data is presented in a more useful way like the age of the house, it is displayed as "5 years old" instead of "Year of construction 2012". The bedrooms and bathrooms are more human readable by combining the label and value.


**Use simple icons**
[Don't use over-detailed icons](https://iconsmind.com/top-10-mistakes-designers-makein-icon-design/), but rather use a simple abstract icon that conveys the action behind it. Adding too much detail or text to an icon will render the icon unreadable on smaller screen devices. Ideally you should choose between filled icons or outline icons, and avoid multi-colored icons as it adds too much complexity and distraction. Instagram, for example, uses outline icons for their UI (see good examples) to emphasize on the content rather than the icons.

**Colors**
[The primary and secondary colors](https://material.io/design/color/) for your app help to create a theme that is harmonious, ensures accessible text and distinguishes UI elements and surfaces from another. Having only 2 or 3 colors enhances your app because it provides a simple and consistent experience for the user.

To choose your colors, Google made a [theme editor](https://material.io/resources/theme-editor/) which also checks if the contrast meets the accessibility requirements. You can also only choose a single color after which the tool auto-generates a pallet for you of 10 other color values.

If you don't want to create an entire theme, Google also made a basic [color tool](https://material.io/resources/color/).

**Typography**
Don't use multiple fonts on the same screen, but rather choose a main font to use with an additional font for special occasions, as it achieves an organized and consistent look for the user. You can really emphasize headers or titles by making it bold, to let it stand out from the rest of the content. When you are displaying long blocks of text, changing the line height from the default 1 to about 1.5 will improve readablity for the user.


## References
### Scientific
Soderstrom, U., Carlsson, L., & Mejtoft, T. (2019, September 10). Comparing Millennials View on Minimalism And Maximalism in Web Design. Retrieved at 10-09-2019 from https://dl.acm.org/citation.cfm?id=3335104

### Other
Google. (n.d.). Elevation. Retrieved at 07-09-2019 from https://material.io/design/environment/elevation.html

Wathan, A., & Schoger, S. (2019, January 16). 7 Practical Tips for Cheating at Design. Retrieved at 07-09-2019 from https://medium.com/refactoring-ui/7-practical-tips-for-cheating-at-design-40c736799886

Mikael, A. (2017, August 1). The Rise of Minimalism in App Design. Retrieved at 08-09-2019 from https://blog.prototypr.io/the-rise-of-minimalism-in-app-design-91524d3fdf4b

Jong, F. de. (n.d.). We Want More By Seeing Less. Retrieved at 09-09-2019 from https://www.dtelepathy.com/blog/design/we-want-more-by-seeing-less

Chapman, C. (2019, January 24). Simplicity is Key – Exploring Minimal Web Design. Retrieved at 10-09-2019 from https://www.toptal.com/designers/ui/minimal-web-design

Yalanska, M. (2018, September 11). Lean and Mean: Power of Minimalism in UI Design. Retrieved at 10-09-2019 from https://tubikstudio.com/lean-and-mean-power-of-minimalism-in-ui-design/

Icons Mind. (n.d.). Retrieved at 11-09-2019 from https://iconsmind.com/top-10-mistakes-designers-makein-icon-design/

Google. (n.d.). The color system. Retrieved at 11-09-2019 from https://material.io/design/color/#

Wathan, A., & Schoger, S. (n.d.). The Book. Retrieved at 11-09-2019 from https://refactoringui.com/previews/line-height-is-proportional/

## Useful links
[We Want More By Seeing Less](https://www.dtelepathy.com/blog/design/we-want-more-by-seeing-less)
[Minimalist design trend & history](https://creativemarket.com/blog/minimalist-design-trend)
[Theme editor](https://material.io/resources/theme-editor/)
[Color picker](https://material.io/resources/color/)