The Art of Minimalism in Mobile App UI Design by cast

View this thread on steempeak.com
· @cast · (edited)
The Art of Minimalism in Mobile App UI Design
<p><img src="http://storage2.static.itmages.ru/i/16/0801/h_1470082274_7459767_d41d8cd98f.jpg" /></p>
<p>Design is one of the most important drivers of user engagement. As users’ preferences shift toward a simpler interface, stripping the UI to its very basic, necessary elements is the key to success. Minimalism is a perfect marriage of<em>form</em> and <em>function</em>. It’s greatest strength is clarity of form —  clean lines, generous whitespace, and minimal graphical elements brings simplicity to even the most confounding subject matter. That is, of course, if it’s used <em>effectively</em>.</p>
<p>Minimalist design has to be <em>concise</em>, <em>clear</em>, and <em>consistent</em> to be usable. Your interaction system should aim to address problems for your users <em>through clear visual communication</em>. This is why a beautiful minimalist app combined with great usability is so impressive: an easily navigated, simple app can be a very powerful form of communication. But in order to achieve this goal, you need to focus on following moments: </p>
<h1><strong>Simple Color Scheme</strong></h1>
<p>Simplifying the color scheme improves the user experience while <em>having too many colors can have a negative impact upon it.</em> There are a number of predefined color scheme standards that make creating new schemes easier, especially for beginners: </p>
<ul>
  <li><strong>Monochromatic scheme.</strong> Monochromatic color schemes are made up of different tones, shades and tints within a specific hue. By modifying the saturation and brightness of a single hue, you can generate multiple colors, and color scheme it’s not overwhelming on the eye. </li>
</ul>
<p><img src="http://storage9.static.itmages.ru/i/16/0801/h_1470078900_6244267_d41d8cd98f.jpg" /></p>
<p><em>Single-hue blue color scheme. Image credit: Smashing Magazine</em></p>
<p><img src="http://storage8.static.itmages.ru/i/16/0801/h_1470079058_9583070_d41d8cd98f.jpg" /></p>
<p><em> Image credit: Dribbble </em></p>
<ul>
  <li><strong>Analogous color scheme.</strong> <a href="http://babich.biz/a-guide-to-color-and-conversion-rates/" rel="noopener">Analogous schemes</a> are created by using three colors that are next to each other on the color wheel. A minimalist gesture-driven task manager app Clear use analogous colors to visually prioritize important tasks and highlight the most critical ones (the topmost items will be the boldest in color, while items lower on the list will be lighter and more subtle). </li>
</ul>
<p><img src="http://storage9.static.itmages.ru/i/16/0801/h_1470081177_2718838_d41d8cd98f.jpg" /></p>
<p><em> Shades yellow and orange is an example of an analogous color scheme. Image credit: tuts+ </em></p>
<p><img src="http://storage6.static.itmages.ru/i/16/0801/h_1470081109_6861002_d41d8cd98f.jpg" /></p>
<p><em>Clear app for iOS</em></p>
<h1>Blur Effects</h1>
<p>Blur effect arise as a logical solution to a minimal user interface, allowing a certain amount of play with the layers and hierarchy of the interface. It’s a very efficient solution when working with layered UI since it gives the user a clear understanding of mobile’s solution flow. This also gives designers a perfect opportunity to explore different menu and overlay solutions.<br />
<br />
<a href="https://itunes.apple.com/us/app/yahoo!-weather/id628677149?mt=8" rel="noopener">Yahoo! weather app</a> displays a nice photo of each weather location, and the most important data you need is immediately visible while it’s just a single tap to drill down into more detailed data. Rather than cover the photo with another UI layer, the app keeps you in context after you tap — the detailed information is easily revealed and the photo remains in the background. The interaction is so intuitive that it takes nothing more than a second to return to your previous location.</p>
<p><img src="http://storage8.static.itmages.ru/i/16/0801/h_1470081530_1004839_d41d8cd98f.jpg" /></p>
<p>Yahoo! weather app for iOS </p>
<h1>One App, One Typeface</h1>
<p>Mixing several different fonts can make your app seem fragmented and sloppy. Reducing the number of fonts on a screen can reveal the power of typography. When designing an app think about how can you make the typography powerful by playing with <em>weight, style and size</em>, not different typefaces. </p>
<p><img src="http://storage2.static.itmages.ru/i/16/0801/h_1470081639_9011553_d41d8cd98f.jpg" /></p>
<p><em>In general, use a single font throughout your app. Image credit: Apple </em></p>
<p>When you choosing a typeface for your app keep in mind that a safe bet is to rely on the platform’s default font: </p>
<ul>
  <li>Apple uses the San Francisco family of typefaces to provide consistent reading experience across all platforms (the San Francisco font for iOS 9 is called SF-UI).</li>
  <li><a href="https://www.google.com/fonts/specimen/Roboto" rel="noopener">Roboto</a> and Noto are the standard typefaces on Google Android and Chrome. </li>
</ul>
<p><img src="http://storage8.static.itmages.ru/i/16/0801/h_1470081749_4114627_d41d8cd98f.jpg" /></p>
<p><em>Reducing the number of fonts on a screen can reveal the power of typography. Image credit: Dribbble </em></p>
<h1>Data Spotlight</h1>
<p>You should use <em>big font size and striking color</em> to make a <em>certain data</em> the center of focus. Using neutral colors for the general scheme and adding contrasting colors for calls to action, helps the user focus on the action we want them to take. </p>
<p><img src="http://storage9.static.itmages.ru/i/16/0801/h_1470081830_4276865_d41d8cd98f.jpg" /></p>
<p><em>Bright accent color into an otherwise-neutral palette is one of the easiest color schemes to create. It’s also one of the most striking, visually. Image credit: Smashing Magazine </em></p>
<p>Increased font size and an accent color draws the users’ attention to a particular area of the screen without additional visual hints. This provides easier information-gathering experience. </p>
<h1>Icons: Stroke and Fill</h1>
<p>Iconography is a visual language used to represent functionality or content. Icons are meant to be simple, visual elements that are recognized and understood immediately. Since iOS 7 many minimalist UI has stroke and filled icons. In this article we won’t criticize the concept itself, instead we’ll focus on the practical aspect  — stroked and filled type of the same icon:  </p>
<p><img src="http://storage6.static.itmages.ru/i/16/0801/h_1470081934_1980258_d41d8cd98f.jpg" /></p>
<p><em>Clock icons (stroked and filled). Image credit: </em><a href="https://icons8.com/" rel="noopener"><em>icons8</em></a></p>
<p>Let’s take a look on tab bar icons. Because bar icons serve as navigation to other sections of the app, it’s important to indicate which section is currently active by <em>highlighting its icon</em> in some way: a solid version to show an active/selected state and a hollow version to show an inactive/unselected state. This makes recognition of active tabs and controls more straightforward.  </p>
<p><img src="http://storage8.static.itmages.ru/i/16/0801/h_1470082011_6316908_d41d8cd98f.jpg" /></p>
<p><em>Tab bar in AppStore app from Apple. Image credit: viget</em></p>
<h1>Conclusion</h1>
<p>Minimalist interfaces and other design techniques are certainly a way to achieve good design, but they are not the goal. The ultimate goal is to simplify our interfaces and make them <em>more functional and usable</em>. Simple user flows, clear visuals, and forgiving design help create a seamless interaction.</p>
<p>Thank you! </p>
👍  , , , , , ,
properties (23)
post_id397,989
authorcast
permlinkthe-art-of-minimalism-in-mobile-app-ui-design
categoryui
json_metadata"{"links": ["http://babich.biz/a-guide-to-color-and-conversion-rates/", "https://itunes.apple.com/us/app/yahoo!-weather/id628677149?mt=8", "https://www.google.com/fonts/specimen/Roboto", "https://icons8.com/"], "image": ["http://storage2.static.itmages.ru/i/16/0801/h_1470082274_7459767_d41d8cd98f.jpg"], "tags": ["ui", "ux", "design", "minimalism", "mobile"]}"
created2016-08-01 20:11:03
last_update2016-08-01 20:24:39
depth0
children8
net_rshares233,168,290
last_payout2016-09-01 08:13:15
cashout_time1969-12-31 23:59:59
total_payout_value0.000 SBD
curator_payout_value0.000 SBD
pending_payout_value0.000 SBD
promoted0.000 SBD
body_length7,577
author_reputation0
root_title"The Art of Minimalism in Mobile App UI Design"
beneficiaries[]
max_accepted_payout1,000,000.000 SBD
percent_steem_dollars10,000
author_curate_reward""
vote details (7)
@isaac.asimov ·
Flesch Kincaid Grade Level
Hi! This post has a <a href="https://en.wikipedia.org/wiki/Flesch%E2%80%93Kincaid_readability_tests">Flesch-Kincaid</a> grade level of 10.3 and reading ease of 55%. This puts the writing level on par with Michael Crichton and Mitt Romney.
👎  , ,
properties (23)
post_id397,995
authorisaac.asimov
permlinkre-the-art-of-minimalism-in-mobile-app-ui-design-20160801t201127
categoryui
json_metadata{}
created2016-08-01 20:11:30
last_update2016-08-01 20:11:30
depth1
children0
net_rshares-269,679,675
last_payout2016-09-01 08:13:15
cashout_time1969-12-31 23:59:59
total_payout_value0.000 SBD
curator_payout_value0.000 SBD
pending_payout_value0.000 SBD
promoted0.000 SBD
body_length238
author_reputation-982,250,417,825
root_title"The Art of Minimalism in Mobile App UI Design"
beneficiaries[]
max_accepted_payout1,000,000.000 SBD
percent_steem_dollars10,000
author_curate_reward""
vote details (3)
@daysaiyan ·
Upvoted
👎  ,
properties (23)
post_id397,999
authordaysaiyan
permlinkthe-art-of-minimalism-in-mobile-app-ui-design
categoryui
json_metadata{}
created2016-08-01 20:11:39
last_update2016-08-01 20:11:39
depth1
children0
net_rshares-10,823,272
last_payout2016-09-01 08:13:15
cashout_time1969-12-31 23:59:59
total_payout_value0.000 SBD
curator_payout_value0.000 SBD
pending_payout_value0.000 SBD
promoted0.000 SBD
body_length7
author_reputation-593,380,586,275
root_title"The Art of Minimalism in Mobile App UI Design"
beneficiaries[]
max_accepted_payout1,000,000.000 SBD
percent_steem_dollars10,000
author_curate_reward""
vote details (2)
@cheetah ·
Hi! I am a content-detection robot. This post is to help manual curators; I have NOT flagged you.
Here is similar content:
http://babich.biz/the-art-of-minimalism-in-mobile-app-ui-design/
👍  ,
properties (23)
post_id398,008
authorcheetah
permlinkre-the-art-of-minimalism-in-mobile-app-ui-design-20160801t201151
categoryui
json_metadata{}
created2016-08-01 20:11:54
last_update2016-08-01 20:11:54
depth1
children0
net_rshares8,656,540,726
last_payout2016-09-01 08:13:15
cashout_time1969-12-31 23:59:59
total_payout_value0.000 SBD
curator_payout_value0.000 SBD
pending_payout_value0.000 SBD
promoted0.000 SBD
body_length187
author_reputation750,854,098,279,735
root_title"The Art of Minimalism in Mobile App UI Design"
beneficiaries[]
max_accepted_payout1,000,000.000 SBD
percent_steem_dollars10,000
author_curate_reward""
vote details (2)
@cozyone123 ·
Upvoted
👎  
properties (23)
post_id398,060
authorcozyone123
permlinkthe-art-of-minimalism-in-mobile-app-ui-design
categoryui
json_metadata{}
created2016-08-01 20:14:42
last_update2016-08-01 20:14:42
depth1
children0
net_rshares-221,361,223
last_payout2016-09-01 08:13:15
cashout_time1969-12-31 23:59:59
total_payout_value0.000 SBD
curator_payout_value0.000 SBD
pending_payout_value0.000 SBD
promoted0.000 SBD
body_length7
author_reputation-491,033,487,460
root_title"The Art of Minimalism in Mobile App UI Design"
beneficiaries[]
max_accepted_payout1,000,000.000 SBD
percent_steem_dollars10,000
author_curate_reward""
vote details (1)
@greenggc ·
<h1>very interesting article, I voted in favor of your article, please vote for my article</h1> 
- https://steemit.com/steemit/@rggreen/steemit-a-brilliant-idea-or-a-bubble
👎  
properties (23)
post_id398,114
authorgreenggc
permlinkre-cast-the-art-of-minimalism-in-mobile-app-ui-design-20160801t201728658z
categoryui
json_metadata"{"links": ["https://steemit.com/steemit/@rggreen/steemit-a-brilliant-idea-or-a-bubble"], "tags": ["ui"]}"
created2016-08-01 20:17:27
last_update2016-08-01 20:17:27
depth1
children0
net_rshares-535,502,786
last_payout2016-09-01 08:13:15
cashout_time1969-12-31 23:59:59
total_payout_value0.000 SBD
curator_payout_value0.000 SBD
pending_payout_value0.000 SBD
promoted0.000 SBD
body_length172
author_reputation-800,448,386,135
root_title"The Art of Minimalism in Mobile App UI Design"
beneficiaries[]
max_accepted_payout1,000,000.000 SBD
percent_steem_dollars10,000
author_curate_reward""
vote details (1)
@mikeyb ·
Thanks for this; I've been looking into logo design as a hobby, so this was a nice confirmation of what I thought as well.
properties (22)
post_id398,190
authormikeyb
permlinkre-cast-the-art-of-minimalism-in-mobile-app-ui-design-20160801t202110146z
categoryui
json_metadata"{"tags": ["ui"]}"
created2016-08-01 20:21:09
last_update2016-08-01 20:21:09
depth1
children1
net_rshares0
last_payout2016-09-01 08:13:15
cashout_time1969-12-31 23:59:59
total_payout_value0.000 SBD
curator_payout_value0.000 SBD
pending_payout_value0.000 SBD
promoted0.000 SBD
body_length122
author_reputation91,668,942,689
root_title"The Art of Minimalism in Mobile App UI Design"
beneficiaries[]
max_accepted_payout1,000,000.000 SBD
percent_steem_dollars10,000
@good-karma ·
Let me know your logo concept ideas for #eSteem...Interested to see your perspective.
properties (22)
post_id727,327
authorgood-karma
permlinkre-mikeyb-re-cast-the-art-of-minimalism-in-mobile-app-ui-design-20160824t044306622z
categoryui
json_metadata"{"tags": ["eSteem", "ui"]}"
created2016-08-24 04:43:06
last_update2016-08-24 04:43:06
depth2
children0
net_rshares0
last_payout2016-09-01 08:13:15
cashout_time1969-12-31 23:59:59
total_payout_value0.000 SBD
curator_payout_value0.000 SBD
pending_payout_value0.000 SBD
promoted0.000 SBD
body_length85
author_reputation505,048,788,109,758
root_title"The Art of Minimalism in Mobile App UI Design"
beneficiaries[]
max_accepted_payout1,000,000.000 SBD
percent_steem_dollars10,000
@steemitboard ·
Congratulations @cast! You received a personal award!

<table><tr><td>https://steemitimages.com/70x70/http://steemitboard.com/@cast/birthday3.png</td><td>Happy Birthday! - You are on the Steem blockchain for 3 years!</td></tr></table>

<sub>_You can view [your badges on your Steem Board](https://steemitboard.com/@cast) and compare to others on the [Steem Ranking](https://steemitboard.com/ranking/index.php?name=cast)_</sub>


###### [Vote for @Steemitboard as a witness](https://v2.steemconnect.com/sign/account-witness-vote?witness=steemitboard&approve=1) to get one more award and increased upvotes!
properties (22)
post_id78,602,914
authorsteemitboard
permlinksteemitboard-notify-cast-20190801t185435000z
categoryui
json_metadata{"image":["https:\/\/steemitboard.com\/img\/notify.png"]}
created2019-08-01 18:54:36
last_update2019-08-01 18:54:36
depth1
children0
net_rshares0
last_payout2019-08-08 18:54:36
cashout_time1969-12-31 23:59:59
total_payout_value0.000 SBD
curator_payout_value0.000 SBD
pending_payout_value0.000 SBD
promoted0.000 SBD
body_length604
author_reputation38,705,954,145,809
root_title"The Art of Minimalism in Mobile App UI Design"
beneficiaries[]
max_accepted_payout1,000,000.000 SBD
percent_steem_dollars10,000