March 13, 2019Comments are off for this post.

iPhone Typography Guidelines

Here’s a quick summary of styles. See below for visual reference and more in-depth guidelines.

Page titles,
Modal titles
17ptMedium font weight
iOS 10+ page titles are 34pt before scrolling, 17pt once scrolled
Paragraph text,
Secondary text15ptLighter color as well
Tertiary text,
Segmented buttons
13ptSkip a font size between secondary and tertiary text
Text inputs
17ptHighlight important buttons with medium font weight
Action Bar10ptDon't go smaller than this


Let’s break this down element-by-element and look at illustrated examples. We’ll cover not just the actual font sizes, but also how Apple thinks about text styles.

Read more

February 5, 2018Comments are off for this post.

The sizes for custom navigation bar icons

The sizes for custom navigation bar icons are listed in the iOS Human Interface Guidelines here: iOS Human Interface Guidelines — Custom Icons

The sizes are listed as:
iPad Pro, iPad, iPad mini About 44px by 44px
iPhone 6,7,8s, iPhone 6, iPhone SE About 44px by 44px
iPhone 6,7,8s Plus, iPhone 6 Plus About 66px by 66px

The difference is because the iPhone 6,7,8[s] Plus uses the @3x resources while the others use the @2x images. So your @2x and @3x sizes are correct, your @1x image should however be half the size of your @2x image.

October 14, 2017Comments are off for this post.

Choosing between a native, hybrid, or web app for mobile devices

Apple and Android dominate the smartphone market, owning over 90 percent of the industry.

To take advantage of this fact, many companies that already have an app based on one platform look to make it work across both Apple and Android devices. But this isn't as easy as it sounds, and taking shortcuts to do so can have serious consequences.

Read more

October 14, 2017Comments are off for this post.

How to Flash an SD Card for Raspberry Pi

Identify the SD Card - Flashing an SD card is quite straight forward with Mac OS X. Start by pressing CMD SPACE to reveal the Spotlight search bar at the top right hand side of the screen. In this search bar, type terminal and press return to launch the Terminal application.

Read more

October 11, 2017Comments are off for this post.

What are the differences in CSS Font-Sizes: em vs. px vs. pt vs. percent?

It’s easy to understand the difference between font-size units when you see them in action. Generally, 1em = 12pt = 16px = 100%. When using these font-sizes, let’s see what happens when you increase the base font size (using the body CSS selector) from 100% to 120%.

Read more

October 10, 2017Comments are off for this post.

Data drives design

UX design is no longer about designing for a screen, but about designing for the integrated context. When we talk about empathy and our connected experiences, we're talking about something much larger than an Internet of Things. It's really the Experience of Things--everything that we use and interact with in our daily lives is starting to build a computing mesh around us.

October 7, 2017Comments are off for this post.

Practices and design patterns in web typography

Line height (in pixels) ÷ body copy font size (in pixels) = 1.48

1.5 is commonly recommended in classic typographic books, so our study backs up this rule of thumb. Very few websites use anything less than this. And the number of websites that go over 1.48 decreases as you get further from this value.

Read more

© 2017 virtualbrands interactive

© 2018 virtualbrands interactive

© 2017 virtualbrands interactive