In this article I want to share my insights and some time saving techniques for use when designing data-heavy interfaces with Sketch.

Creating Pie & Donut Charts

One of the most common chart type used to illustrate numerical proportions is the pie chart. While simple in theory, it is sometimes a bit tricky to design, especially when real-life data needs to be used. I currently use two different techniques, each of which has its advantages.

Segmented Circles Plugin

The first technique requires the amazing Sketch Plugin “Segmented Circles” built by German Bauer. It is, by far, the most advanced plugin I have come across for generating different types of pie charts within seconds. Since all segment values are entered into a single text field, one can simply copy and paste real data directly, e.g., from Excel.

Abusing Angular Gradients

I have to admit that this technique is a bit messy – but it’s incredibly useful when you need many pie charts of the same style and want to change the values of the slices quickly without the need to redraw the entire chart.

Simply add a circle and apply an angular gradient as the background. Then add two hard color-stops for each segment and align them accordingly. This is great for quickly duplicating charts, as you can simply copy and paste the style onto each circle and then adjust the color stops.

Creating Line Charts

Line charts are involved in pretty much any analytics-related interface design, as they are one of the best available options for presenting a series of data points. They can, however, be beasts to design and maintain, as detailed line charts can easily grow to hundreds of layers and groups. In order to keep all these layers structured – including the line grid, legends, marker points and graphs – organization and simplification is key.

Use Numbers or Excel

This is amazing since it saves an enormous amount of time “faking“ a nice looking graph within Sketch and allows you to design with real data. Just use your favorite spreadsheet application to create a line chart and export it as a PDF. When opening the PDF with Sketch, you can select each individual element of the chart, since they are all exported as vector graphics and organized in layer groups.

If you don’t have a set of data ready to create a diagram within Numbers or Excel, simply generate a random set of numbers using the RANDBETWEEN function.

Create symbols for points and shared styles for lines

Since the most annoying part of customizing line charts has always been finding and selecting the correct layers to adjust, it’s a good idea to automize that step as much as possible by creating symbols for each variation of data point as well as shared styles for each colored line. In this way, you can update aspects like color and border width for all charts in the design simply by updating the symbol or shared style.

Make it resizable!

Since Sketch version 39, it has been possible to create actual responsive designs that scale up and down like magic, without distorted elements. Applying resizing rules to the elements of a line chart is a good idea when there’s a possibility that the dimensions of the parent container might some day change.

Distribute layers and vector points

When drawing a line chart manually, use the vertical and horizontal distribution function to distribute the data points, lines for the x-axis, and all the labels such that they have an even amount of space in between them.

Tables

Designing tables can often turn into a real nightmare, with the need to create and organize hundreds of text and vector layers for cell data, and row, column, and border styles. Whenever we need to add or remove a column, change the width of the table or of a specific column, or change cell data – it always affects all the other elements of the table and we spend way too much time fixing visuals after small changes… until now.

Since Sketch version 39, just like with graphs, we can now resize tables seamlessly by assigning resize rules to each cell and the containing elements. In addition, it makes sense to structure table rows in a specific way and heavily use shared styles to make updating and changing the content and visual styling easier and faster.

Organizing cells and rows

To make resize rules work correctly, all the containing elements, such as text, buttons, cell background and borders, need to be grouped together.

Cell backgrounds as well as the cell text layer should be set to “Resize object”, while elements (like sort indicator arrows) that need be pinned to the left or right border should be set to “Pin to corner”.

Reduce the amount of layers

The fewer layers we need to deal with the better. I usually try to limit them to two layers per table cell – one for the text and one for background and border effects. To create border lines between rows and columns, I use inner 1px shadows with Blur set to 0. This has two advantages: there’s no need to add additional layers to create borders, and you can use shared styles for all table cells, which allows you to change something like border color or cell background effects with one click for all the cells.

Generating Content

The most time-consuming task when designing a table is filling each row with individual data. With Craft, a Sketch integration by inVision, we can automate that task completely.

Fill cells with random data

To fill each cell with random data, create one row, select each text layer and assign one of the various data formats from the Craft Data panel. Then select the row group and open the Craft Duplicate panel and choose the amount of rows you want to create. Craft clones the row X times and inserts randomly generated but individual content.

Fill cells with real data from your API

When working on designs for, e.g., a web or iOS application that already has a database and an API that serves content via JSON, you can import real data through the Craft data panel.

If the API is public, you can simply import JSON by inserting the URL for an API call. If the API requires a key or authentication, you will need to download a JSON file and import it manually, since the Sketch integration does not yet support authentication.

After successfully importing the JSON data, select a text layer and then assign a JSON value from the data tree view. Repeat this for each cell and then proceed with duplicating the row as often as you need. When duplicating rows via the Duplicate panel, Craft will fill each table cell with real data from your API.

A new design, same old vision

My old site was receiving tons of great feedback, was featured on various design award sites and since I launched it about two years ago, visitor counts increased by more than 10 times. Still, I felt like I needed to redesign to reflect my ever-evolving personal style and focus on a different customer clientele. I did not go full nuclear with the redesign this time and kept the simplicity, the previous structure and most of the content intact. This time, it’s a visual refresh, not a completely different direction.

In addition I’ve made a huge update on my portfolio itself. I removed a lot of old projects that are simply not relevant anymore (extremely outdated, dead projects or personal side projects that I did not have the time to continue working on, etc.), but also added a lot of my more recent projects.

Written from scratch

I’ve coded my new site from scratch with a focus on full responsive and resolution independence. The new custom grid system scales well from a tiny smartphone screen up to a 27-inch display. Due to the heavy usage of SVG, code-generated graphics and srcset images, all the illustrations and photography appears in full clarity on normal, retina and 5K displays.

KirbyCMS

After working with Kirby on various client projects before I decided to now use it for my personal site as well. It’s a stellar flat-file CMS and flexible as hell.

Colophon & Credits

Apps used

Sketch 3, Atom, Photoshop CC, CodeKit, Letterspace

Fonts

If needed (not already installed on the machine), fonts are served via Fonts.com.

• Headlines, interface and teaser texts: DIN Next™ by Linotype
• Regular paragraphs: Neue Helvetica® by Linotype

Standards, Languages, Libraries, and Preprocessors

• HTML5, CSS3, jQuery, LESS
• Animate Plus, particles.js, Slick, prism.js, Animsition, Headroom.js.

Photography

• Home page header photo by Olu Eletu via Unsplash
• Blog page header photo by Volkan Olmez via Unsplash

These guidelines describe how to design apps that follow the official HIG for iOS by Apple, not what you can do with custom controls. Sometimes it makes sense to break the rules. The purpose of this document is to guide you, not to provide solutions for complex and unique design problems.

This unofficial documentation will be updated and extended regularly.

Resolutions and Display Specifications

Difference between Points and Pixels

Pixels are the smallest physical element that we can control on a digital display. The more pixels can be fitted into a specific screen size, the higher the PPI (pixels-per-inch), and the clearer the rendered content becomes.

Points are a resolution-independent measurement. Depending on the screens pixel density, a point can contain multiple pixels (e.g., 1 pt contains 2 x 2 pixels on a regular retina display).

When you are designing for various display types, you should think in points, but design in pixels. This means you will still need to export all your assets in 3 different resolutions, no matter in which resolution you are designing your app.

Downsampling on the iPhone Plus

Rendered pixels and physical pixels are equal on all iOS devices, with one exception: the Retina HD screen of the iPhone 6, 7 and 8 Plus. Because its screen has a lower pixel resolution than what would be a natural @3x resolution, the rendered content is automatically resized to approximately 87% of the original size (from 2208 x 1242 pixels to fit the display resolution of 1920 x 1080 pixels).

The iPhone X safe area

The iPhone X requires some special attention from designers. Unlike all other iOS devices, it features a display with round corners and also has a cut-out at the top of the screen where you can find the front cameras, sensors and speaker. The width of the screen is the same as on the iPhone 6, 7 and 8, but it’s also 145pt taller. When designing apps for the iPhone X you have to be aware of the safe zone and layout margins to ensure your app user interface doesn’t get clipped by the device’s sensors or corners.

App Icons

Automatically applied effects

App icons assets are generally added to the application package as plain, squared PNG files in various dimensions. When rendered on a device, iOS applies various effects to app icons.

Rounded Corners

The old simple radii values for rounded corners are gone. Since iOS 7, app icons have been using the shape of a superellipse. When designing app icons for iOS, I recommend to use the official app icon templates provided by Apple.

The rounded corners should not be included in the final exported assets, but you might need them in your design process if you want to add effects, such as a stroke or shadows, that are aligned to the corner of the icon.

Border stroke (in some situations)

If the app icon you are using has a white background, a 1 pixel gray border stroke will be applied to make it easier to recognize the edges of the icon. This is only done in the settings app (if your application is listed there) and the AppStore.

Legacy effects (iOS 6 and previous versions)

On older iOS versions, these effects are applied automatically: rounded corners (not the same shape as iOS 7+ icons are using), drop shadows on the home screen and a gloss effect that can be disabled.

Grid system

Apple developed a golden ratio grid system that can be used to size and align elements on your icon correctly. Nevertheless, even Apple designers are not following the grid system very strictly with the native apps’ icons. Feel free to break the rules if your icon simply works better without aligning all elements strictly to the grid.

Typography

The default system font on all iOS versions previous iOS 9 is Helvetica Neue. With the release of iOS 9, Apple introduced a brand new font called San Francisco, which replaced Helvetica Neue as the default font. San Francisco comes in two shapes: „SF UI Display“ and „SF UI Text“, while „Display“ is primarly used for UI components, „Text“ features a wider letter spacing and should be used for longer texts. You can download the San Francisco fonts here if you are a member of Apple’s Developer program. In addition to the default font, many alternative font faces are available to use. You can find a complete list of pre-installed typefaces here.

Font Sizes

Custom Fonts

Technically, any True Type Font (.ttf) can be used within an iOS app, but be careful about licenses. It should be safe to use fonts that are completely free for commercial usage. App licenses for commercial fonts are rarely available, and if they are, securing them can turn out to be somewhat expensive. MyFonts currently offers the biggest collection of fonts that can be licensed for mobile app usage.

Color Palette

Since iOS 7, Apple has been using a vibrant color palette for the interface of the OS and pre-installed apps. While you can use the default iOS color palette listed above, you can also (and probably should, if you want to stand out) use your own colors.

Iconography

In iOS apps, icons have always been a great way to support text labels with a visual relationship to the performed action or to replace text completely (often for very common actions such as „New“, „Delete“, etc.). Usually, we are dealing with icons that are part of the Navigation Bar, Tool Bar or Tab Bar.

Bar Button Icons

Icons used in Navigation Bars and Toolbars should be in outlined style with a stroke width of 1 or 1.5pt. Since iOS 11 Apple recommends to use a new solid („glyph“) icon style for Tab Bar icons.

You should never include any additional effects such as a drop-shadow or inner shadows on button icons because these are relicts from previous iOS versions (before the iOS 7 redesign). Button icons should be drawn in one solid color on a transparent background—the shape of the icon is used as a mask, and the color will be applied programmatically.

Activity View Icons

Icons in the Activity View (also known as Share Popover) used to be designed in outline style, but since iOS 8, Apple has reverted back to solid fill icons on a plain white background.

Commonly used design elements

iOS offers a great collection of ready-to-use views and controls that allow app developers to quickly build interfaces. Some elements can be customized to a certain level, but other cannot and probably also should not be. When designing an application for iOS, you should know your set of tools and stick to them whenever possible. However, in some cases, it might be worthwhile to build a custom control because you need a more custom look or want to change the functionality of an already existing control (danger zone). Almost anything is possible,and sometimes it makes sense to break the rules, but always think twice before doing so.

Status Bar

The Status Bar contains basic system information such as the current carrier, time, battery status and more. It’s visually connected to the Navigation Bar and makes use of the same background fill. To match the style of your app and guarantee readability, the content of the status bar comes in two different styles: dark (black) and light (white).

On the iPhone X, the status bar is taller than on all other iOS devices. Due to the notch that cuts into the display area, the new status bar is split in two parts.

It is possible to hide the Status Bar, but think twice before doing so. For example, users might be interested in knowing if they are connected to a WiFi network when the app regularly downloads web content or if Bluetooth is enabled when the app requires a Bluetooth link to third-party hardware. A valid reason to hide the Status Bar is when you want to remove all distractions from a single element, for example, when displaying full screen content such as an image gallery.

Navigation Bar

The navigation bar contains the controls for navigating through the applications views and optionally to manage the content of the current view. It will always appear at the top of the screen, right below the status bar. By default, the background is slightly translucent and blurs content underneath the bar. The background fill of the bar can be set to a solid color, a gradient or a custom bitmap-pattern.

With the release of iOS 11, Apple introduced a new navigation bar style: when the app content is at scroll position zero (at the top), the title is moved into a separate line underneath the original navigation bar area and is massively enlarged. Once the user starts scrolling down, the title slowly fades out and snaps back into it’s original size and position.

The elements should always follow a specific alignment pattern.

• Back button should always be aligned to the left side.
• Title of the current view should always be centered in the bar.
• Action buttons should always be aligned to the right side. If possible, there should never be more than one primary action to avoid missed clicks and to maintain simplicity.

Toolbar

A toolbar contains a set of actions for managing or manipulating the content of the current view. On the iPhone, it will always appear aligned at the bottom edge of the screen, while on the iPad, it can also be displayed aligned at the top of the screen.

Similarly to the navigation bar, the background fill of toolbars can be modified, is translucent and blurs the underlaying content by default.

Toolbars should be used when a specific view requires more than three primary actions that would hardly fit or would look messy in the navigation bar.

Search Bar

Search bars come in two different styles by default: prominent and minimal. Both versions do have the same functionality.

• As long as no text was entered by the user, a placeholder text is shown inside the bar, and, optionally, a bookmarks icon that can be used to access recent or saved searches.
• Once a search term is entered, the placeholder disappears, and a clear button to delete the entered value appears on the right edge.

Search bars can make use of a prompt — a short sentence to introduce the functionality in the context of the search. For example, „Enter a city, zip code or airport.“

To provide even more control over a search query, it is possible to chain the search Bar with a scope bar. The scope bar will use the same style as the search bar and might be useful when there are clearly defined categories for the search results. For example, in a music app, the search results could be filtered again by interpreters, albums or songs.

Tab Bar

The tab bar is used to allow the user to quickly navigate through the separate views of an application, and it should only be used for this purpose. It always appears at the bottom edge of the screen. By default, its slightly translucent and uses the same system blur for underlaying content as the navigation bar.

A tab bar can only contain a fixed maximum number of tabs. Once there are more tabs than the maximum count, the last tab displayed will be replaced by a „More-tab“ that will lead to a list of hidden tabs, with an option to re-order the displayed tabs.

While the maximum amount of tabs displayed is five on iPhones, it’s possible to display up to seven tabs on the iPad while avoiding a more-tab.

To notify users about new information on a view, it sometimes makes sense to apply a badge count to a tab bar button. If a view is temporarily disabled, the related tab button should not be completely hidden; instead, it should be faded out to visually communicate the disabled state.

Table View

Table views are used to display small to large amounts of list style information in a single or multiple columns and with the option to divide several rows into separate sections or to group them.

There are two basic table view types that should be used, depending on the type of data you are presenting.

Plain

A plain table contains a number of rows that can have a header on the top and a footer after the last row. It’s possible to display a vertical navigation on the right edge of the screen to navigate through the table, which makes sense when presenting a big data set that could be sorted in some way (e.g., alphabetically descending).

Grouped

A grouped table allows you to organize rows in groups. Each group can have a header (best used to describe the context for the group) as well as a footer (good for help text, etc.). A grouped table needs to contain at least one group, and each group needs to contain at least one row.

For both table view types, a few styles are available to present the data in a way that allows users to easily scan, read and probably modify it.

Default

A table row in default style has an optional image aligned on the left and a title.

With Subtitle

The subtitle table style enables a small subtitle text underneath the row title. It is useful for further explanations or short descriptions.

With Value

The value table style allows you to display a specific value that is related to the row title. Similar to the default style, each row can have an image and a title that are both aligned to the left. The title is followed by the right aligned label for the value, which is usually displayed in a slightly more subtle text color than the title.

Large Cells

When displaying subtitles in a table view you should consider using the larger table cell style. The amount of information and controls you can display with these is the same as with other table cell styles, but due to the increased paddings the table doesn’t look as busy.

Modals, Popovers and Alerts

iOS provides various styles of temporary views that can be used to display, edit and manipulate data in a way that fits best in a given situation. While each temporary view exists for a very specific purpose and each one looks different, all temporary views still have one thing in common: When displayed, it’s the highest index layer on the current view (they appear on top of everything else), and content underneath is overlayed by a translucent black background.

Activity View

An activity view is used to perform specific tasks. These tasks can be default system tasks such as share content via the available options, or they can be completely custom actions. When designing icons for custom task buttons, you should follow the same guidelines as for the active state of bar button icons — solid fill, no effects, on a transparent background.

Actions

Action Sheets are used to perform one single action from a list of available actions and to force the user of an app to confirm an action or cancel it.

In portrait mode (and on small landscape screen resolutions), actions are always displayed as a list of buttons sliding in and staying at the bottom edge of the screen. In this case, an action sheet should always have a cancel button to close the view and not perform any of the listed actions.

When there is enough space available (e.g., on iPad screens), action sheets visually transform into popovers. A button to close the view is not required anymore because tapping a target anywhere outside the popover will close it automatically.

Alerts

The purpose of alerts is to inform the user about critical information and optionally to force the user to make a decision about some action.

An alert view does always contain a title text, which should not be longer than one line and one (for pure informational alerts, e.g., „OK“) or two (for alerts that require a decision, e.g., „Send“ and „Cancel“) buttons.

Also, you can add a message text, if needed, as well as up to two text input fields, one of which can be a masked input field, which is appropriate for sensitive information like passwords or PINs.

Edit Menu

The Edit Menu allows users to perform actions such as Copy, Paste, Cut, etc., when an element is selected (text, images, others). While it is possible to control which operations the user can choose from, the visual appearance of edit menus is set and not configurable unless you build your own completely custom edit menu.

Popover

Popovers are useful when a specific action requires multiple user inputs before proceeding. A good example is adding an item, which has a few attributes that need to be set before the item can be created.

In a horizontal environment, popovers reveal underneath the related control (such as a button) with an arrow pointing to that control while opened. The background of a popover uses a slightly reduced opacity and blurs the content underneath, just as many other UI elements have done since iOS 7.

A popover is a powerful temporary view that can contain various objects such as its own navigation bar, table views, maps or web views. When a popover grows in size due to the number of contained elements and reaches the bottom edge of the viewport, it is possible to scroll within the popover.

Modals

Modals are a useful view for tasks that require multiple commands or inputs by the user. They appear on top of everything else, and, while open, block interaction with any other interactive elements underneath.

The typical modal usually provides:

• a title to describe the task;
• a button to close the modal without saving or performing any other actions;
• a button to save or submit any entered information; and
• various elements for user input in the modal body.

There are three different modal styles available:

1. Full screen: covers the entire screen.
2. Page sheet: In portrait mode, the modal covers the underlaying content only partially, leaving a small portion of the parent view visible underneath the translucent black background. In landscape mode, the page sheet modal acts just like a full screen modal.
3. Form sheet: In portrait mode, the modal appears in the center of the screen, keeping the surrounding content of the parent view visible underneath the translucent black background. The position of the modal adjusts automatically when a keyboard needs to be displayed. In landscape mode, the page sheet modal acts just like a full screen modal.

Controls

iOS provides a wide range of controls for basically any required input type you can think of. Listed below you will find the most important (commonly used), but for a full list of the available controls, you should look at the iOS Developer Library.

Buttons

Probably the most used control overall is the good old button. Since iOS 7, the default button design hasn't really looked like a button anymore, but rather more like a plain text link. The button control is highly customizable and allows you to style everything from text style, drop shadows and color to an icon that is either prepended or centered if there is no text label, as well as fully custom backgrounds.

Keep in mind that a button can have several states, which should be communicated with visual language: default, highlighted, selected and disabled.

Pickers

Pickers are used to select one value from a list of available values. The web equivalent would be a select box (which the picker control is also used for when touching a select in Safari). An extended version of picker is the datepicker, which allows the user to scroll through a list of dates and times and select values for (configurable) day, month and time.

Except for the background color, it is not possible to change the visual style or size (same as keyboard) of a picker control. Most often, they appear at the bottom of the screens, where keyboards appear as well, but it is possible to use them in other positions.

Segment Controls

A segment control contains a set of segments (at least two) that can be used for things like filtering content or to create tabs for clearly categorized content types.

Each segment can contain a text label or an image (icon), but never both. In addition, using a mixed set of segment types (text and images) in one segment control is not really recommended. The width of one segment changes automatically based on the number of segments (two segments: 50% of total control width, 5 segments: 20% of total control width).

Sliders

The slider control allows the user to choose one specific value from a range of allowed values. Since choosing a value works pretty smoothly and without any steps, sliders are recommended for selecting an estimated, but not exact, value. For example, a slider would be a good control for setting the sound volume, since the user can hear the difference and can see the difference between loud and very loud, but a text input to set an exact dB value would be impractical.

It is possible to set icons for the minimum and the maximum value, which are displayed on the start and end edge of the slider control, thereby allowing you to visually embrace the purpose of the slider.

Stepper

Steppers should be used when the user should enter an exact value from a limited range of possible values (e.g., 1-10). A stepper always contains two segmented buttons, one for lowering and one for raising the current value.

Visually, the stepper control is highly customizable:

• you can use your own icons for stepper buttons;
• when maintaining the native iOS look, you can customize the color of borders, background and icons by using a tint color, which automatically sets the color for each of these elements; and
• if you want to go further, you can use completely custom background images for the stepper buttons as well as for the separator.

Switch

A switch allows the user to quickly toggle between two possible states: on and off. It’s the checkbox for iOS apps. It is possible to customize the color for the on and off states, but the appearance of the toggle button and size of the switch are set and cannot be changed.

Keyboards

There are various keyboard types available to provide the best possible keyboard for a specific text input. While it is possible to build your own completely custom keyboard, default keyboards cannot be customized in style or size.

Further Reading and Resources

These guidelines only provide basic information to get you started with iOS design. Once you dig deeper, you might be interested in more details. These articles and resources should help you.

Please introduce yourself and how you got into design.

Hello, I’m Ivo, an interface designer from Germany who is currently living in Bangkok, Thailand. I’ve been running my own little design studio for the last three years, but since January 2015, I’ve worked full-time for everchron, designing a case management application for lawyers.

I started to design (really ugly) things at the age of 15, when I got my hands on Macromedia Fireworks. I’ve never received a formal education in design – I just learned it by doing.

Do you still use Adobe products or is Sketch your single weapon-of-choice?

I avoid Adobe products whenever possible, and I could actually uninstall the whole Creative Suite, but from time to time, someone sends me a PSD or Illustrator file that I need to open and then convert into SVG, if that's possible.

Which other tools do you use?

• Pen and paper whenever I need to sketch something really quickly
• Coda for anything code related
• framer.js for prototyping animations
• Slack to communicate with my team
• iA Writer Pro for writing longer texts in Markdown

What is your favorite part of Sketch?

It’s lightweight and truly native. Whenever I open Photoshop or Fireworks, it feels like I’m clicking myself through a jungle of buttons and sliders in an UI layer that was just stacked on top of another interface.

Sketch, on the other hand, just feels like a fast, native and well-thought-through OSX application.

Where does it fail?

For any project that is bitmap editing related—but that’s fine. Pixelmator fills that gap. I just wish there were better compatibility between these two great design applications.

Do you sometimes feel that the Sketch team should fix the bugs rather than working on new features?

I think the latest stable releases (3.1 and 3.2) fixed a lot of the old annoying bugs. Recently, I very rarely come across critical bugs. Besides that, who doesn’t love new features? I’m happy to see new functionality in future releases, as long as they are well tested and not introducing more bugs.

I wish they would do better testing and quality assurance before pushing out new versions to the public. I’ve noticed a few times that for a resolved bug, a new bug gets introduced. That’s totally fine for beta versions, but toxic for stable releases since designers need a reliable application that does the job.

If there was one thing you could change about Sketch, what would it be?

Nothing particularly about Sketch, but more in terms of customer support in general. I know that the people at Bohemian Coding are usually replying to questions via email, but apart from that, their whole support and community management approaches are rather obscure. Instead of a messy Facebook group, I would really prefer an official portal for bug reporting (and tracking!), feature requests, etc.

Did you come across any other app lately that could follow in Sketch’s footsteps?

Pixelmator and Affinity Photo are very interesting and much better for doing bitmap editing. Every few months, some interesting application pops up that's aimed to fill the gap that Fireworks left. For me, Sketch already provides the best possible (at the moment) solution for my design problems.

THANKS FOR THE INTERVIEW!

Income Report

First, 2014 was the most successful year of the three years I’ve been freelancing. I was able to increase total earnings by 14% compared to 2013 ($147,000) and by 134% compared to 2012 ($71,550).

Total combined income 2014 $167,597.00 (124.170,00 €) before taxes.

Total spendings 2014 $4,319.19 (3.199,40 €) excluding taxes.

Tracked hours 2014 1,610

This year, I’ve not really raised my rate overall, but I’ve sorted my clients into separate hourly rate tiers. This allowed me to increase overall revenue while still working with clients who are either short on budget (but have great projects) or can provide work me with on a regular basis (basically a discount for long-term clients).

In addition to my income from consulting, I’ve generated a little passive income from my blog basically by displaying FusionAds and some referral links to my articles. Overall, my blog generated $900 over the last 12 months.

Client base

Over the past year, I was mainly working with clients I’ve also worked with in the years before. A few great long-term clients are always the best foundation for a solid freelance business. In addition, I worked with a few new startups and helped design, build and iterate their products.

While I generated a few more leads in Europe and enjoyed working on products that are focused especially on the German market, the major income stream is still coming straight out of the United States (85% California), just as in years before.

My website

In September, I completely redesigned and rebuild my website. It was incredibly time-consuming, but I’m really happy with the result. I’ve received tons of compliments from clients and other designers about the new site. Thanks for that!

The traffic on my site increased slightly compared to last year, but I hit the magical number of one million page views this year.

A great highlight from my blog are „The iOS Design Guidelines“, the longest article I’ve ever written, which was shared more than 5,000 times by readers on Twitter and Facebook.

Total Air Miles 38,506

What’s next?

This is likely my last freelance report. On the 1st January of the new year, I’m joining everchron as a Lead Designer to work full-time on a product that lawyers will love. There is not a lot to show and tell at the moment, but since I’m working with the guys at everchron for more than two years, I know that they are just as enthusiastic as I am about bringing clean and modern designs into the dark corners of corporate products. I’m excited.

New design

I started by collecting some inspiration. Drawing the first wireframes back on February, I created a mood board containing more than 100 website screenshots, photos and code snippets of things I liked about other portfolio sites, magazines, photography and copywriting. I was finally able to completely redesign my site in June.

Goals

1. My new site should tell a little bit more about me than the current one. Potential clients keep asking me basic things like, “What have you done before? Have you worked with a client from industry X before? Have you ever designed for this device?” Those are questions that a personal site and portfolio should answer so the client will not need to contact me.
2. A fresh look. My personal style has evolved over the past two years.
3. Professional copywriting. I’ve always written my own copy for all pages of my site, which has resulted in amateur-style designer speech. Of course, I will keep writing my own blog posts and some basic copy (e.g., for the work sub pages), but I wanted something professional for the main pages.
4. An updated portfolio with my latest work.

New code

I once again seriously underestimated the amount of time I would need to build a really great website that works on all possible resolutions, devices and pixel densities.

Goals

1. Completely rewrite anything. Don’t repeat the same mistake like I did the last time when I did a redesign, when I just fixed the new code on the old one without generally refactoring.
2. Responsive and full retina support.
3. A more flexible development environment, an easier way to publish new content without losing control and automatic deployment from the master branch.

CMS

Nope. I researched this a lot, but somehow, all existing solutions were either missing some important feature or are simply too much for a site like this (I’m looking at you, Wordpress). I was really hoping to use Anchor 1.0, but unfortunately it’s not done yet and the idiot who’s building it seems to be busy with other things.

What I did instead is a self-build “semi”-CMS: flat content containing files, a few template helpers and some basic functions for routing and providing the correct assets.

Development environment

For a project of this scale, a great environment for development is a real time-saver. Grunt is now watching my files, and a few plugins are automatically compiling my LESS code, automatically prefixing the CSS, and minifying and validating the JS as well as compressing PNGs and JPGs.

There’s no more uploading changed files manually via FTP. Development of new features happens on feature branches that are merged into staging once completed. Staging is automatically pushed to a testing domain, and commits on master are automatically deployed at the live site.

What’s next?

I’m planning to be a bit more active on my blog. I’m currently working on a massive improvement of the iOS Design Cheat Sheet that will evolve into a real design documentation and on my first ebook: “Mastering Design with Sketch”.

Income Report

The past year was, for me, the most successful ever from the perspective of income – I almost doubled my income from 2012, when I worked for four months as a full-time employee and freelanced for the other eight months. I increased my rates twice, first in January, from 50,00 € per hour to 65,00 €, and due to the increased request for my services, again in July – this time, from 65,00 € to 75,00 €. I do have special rates for selected clients (decreased rates for long-term projects or increased rates for guaranteed monthly available hours), which are sometimes lower or higher than my usual rates. I have also had a small, additional passive income from my blog, which is essentially from ads served by FusionAds.

Split by month, it looks like this:

Something I do feel that I have to talk about is payment fees. I‘m really tired of paying -actually, my clients are paying this, but this money could have been used for something more useful - PayPal or banks 2.0-4.0% or a flat rate of up to 50,00 € for an international bank transfer.

Client base

Over the past year, I have continued to work with some of my fantastic, long-term clients, as well as gaining a few new ones, all of whom have introduced me to exciting projects. Some of these are not yet ready for the public, but I‘ll let you know when they are. I have also “fired” one client.

Because I usually worked for startups in San Francisco and the surrounding areas, it is not surprising that the most of my clients, and their referrals, come from that area. In 2013, I worked for the first time for certain companies in Australia, which was a positive experience. I also generated a new lead in Germany, but I have to admit that I have quite a small client base here, given that this is the country in which I live and work. This is something that can definitely be improved but, as I enjoy working with international clients, I don’t really see the reason for becoming more active in terms of generating local leads.

Split by country, my income looks like this:

I have experienced three unpleasant situations with clients this year, but was able to avoid my first law-suite. I had two late-payers (one was 4 months late, the other about 1 month late) and one client who was an active micro-manager, had poor taste in design and who changed the basic requirements for the project about three times after the work was done. I am not going to go too much in detail here but, after I discussed my issues with the client and he was still not prepared to change anything concerning our working relationship, I returned his deposit and cancelled the contract.

Luckily, all my other clients are great! They pay quickly, behave professionally, and enjoy working with me.

My website

In January, I redesigned my site and I am still generally happy with the design – something that does not happen too often. Of course I made some adjustments, but nothing too drastic. In 2012, I redesigned it twice.

In 2013, my original aim was to publish at least one article per month but, as it turned out, I don’t have too many interesting things to say – at least, none that that haven’t already been posted elsewhere. It is also difficult to find free time to sit down and write something you care about between client projects.

Overall, traffic on my blog has increased significantly.

Vacations

Even more important than work is what you are doing when you‘re not working, in other words finding a balance between working and taking a rest. When I am not working, I enjoy traveling. In the past year, I have visited Sweden, Thailand, and the Canary Islands (Spain).

Next year, I plan to go skiing with friends in the Austrian alps, escape the hard German winter by staying 3 weeks in Thailand and the Philippines in February, followed by a trip to Jamaica or once again to South East Asia in autumn.

The Future

I will continue to work in the manner that I do at present, since it really works well for me. In 2014, I will try to focus more on iOS design instead of web applications, and I want to spend more time traveling. I will work more on personal projects - one of which will be announced in a few weeks - instead on contract work for my clients. As a long-term goal for 2014-2015, I am looking forward to hiring my first full-time employee, renting an office that is actually not part of my own apartment, and starting a “real” agency. Let’s see if and when it works out – I’ll keep you posted!

Thank you!

Thanks to everyone who supported me over the past year.

My thanks go particularly to my amazing clients of 2013 – Applovin, everchron, Bewo Kompakt, LabGenius, Airspaced, Event Market, Stitch, Bright, Sonico GmbH, Pagevamp, Felix Andersen, Crowdbooster, Autodesk, and Classmate.

To all the people who have read, commented, shared, liked, and re-tweeted my articles, my followers on Twitter & Dribbble who have always been helpful when I had any design-related questions or needed some feedback, my profuse gratitude!

PSDs or Sketch files are much easier to “read”

Since flat design often includes dramatically fewer effects like shadows, gradients and other filters, there is simply less you have to take care of when transforming a design straight from Photoshop, Sketch or any other graphic design software into HTML/CSS layouts. Personally, when I design something in a minimal style I’m also using less “help layers” - layers that don’t really have a semantic sense, but are required to achieve a special effect because they are overlaying or masking other layers in some way.

Having a well organized design file without a wide variety of layer masks, layer styles and colour filters is pure gold. It dramatically speeds up the workflow of exporting assets and transforming layer styles into CSS.

Less assets in general

Since flat design is focused on the content, heavily depends on great typography and often uses a broader colour palette to increase contrast between different areas and interactive elements, we have to deal less with image assets such as background textures. Pretty much anything can be replicated with simple CSS or…

SVG assets and icon fonts

Due to simpler and minimal illustrations, we can make heavy usage of scalable vector graphics and icon fonts instead of jpg or png image sprites. This leads to real resolution independence and eliminates the need for multiple image sprites in different resolutions (usually normal resolution and doubled resolution for retina displays).

In addition, SVGs as well as icon fonts can be manipulated by simple CSS or JS, which allows us to create some really great looking animations (without the need of additional assets except some lines of code) and reuse the same asset in different environments simply by restyling it.

In most cases, using this technique leads to less required assets as well as smaller file sizes in general, which can drastically reduce performance and page load time.

Easier theming of interfaces

Let’s say your web application or website needs to support different themes a user can choose from. If you’ve ever created different themes for a skeumorphic design, you will already know that this can be an extremely time consuming task - exporting a whole new set of graphics and creating new CSS files to apply alternate or new effects requires a serious amount of additional work. With a flat design these problems are almost completely gone - in most cases you would just need to change some colour values (which becomes even easier when you are using a CSS preprocessor like LESS, SASS or stylus that supports CSS variables). Amazing!

Less hassle with older browsers

It's probably not worth mentioning, but in some cases we might still have to support old browsers that cannot handle stuff like CSS gradients and box-shadows. Since such visual effects do not appear very often in minimal designs, we don’t have to add so many fixes to make our sites look good on older browsers. Anyways, old problems might disappear but you can be sure to find new ones, for example scalable vector graphics do not work outside the box in Internet Explorer 8 and lower.

Conclusion

Overall, I think flat design can really speed up a developers workflow and make life easier. Despite this, a minimal design might sometimes not be the best option and there are other options to consider when it comes to designing and developing a modern web-site/app.

Read more about this topic

• A guide for creating a better retina web
• Flat And Thin Are In by Adrian Taylor

What Exactly Changed?

For a long time, the og:image was displayed next to the text description, with a 1:1 image ratio. The new image is four times bigger on mobile and eight times bigger on desktop, due to a ratio shift to 1.91:1. In addition, if you provide a really high resolution image, it will be used on devices with a retina display (which means no more blurry images).

The new recommended image dimensions are 1200 x 630px or greater.

You can still use images that are smaller or have a different ratio but that means your preview image will either get cropped or be displayed in the old post format. Facebook is currently working on new technology that recognizes people’s faces in Open Graph images and sets these as the center point of the image in case cropping is required – needless to say, this is only really interesting when a lot of your Open Graph images are showing people.

How to Prepare your Website for the New Link Posts Format

First of all, og:images are still using the same HTML snippet which means there is no need to touch the source code of your site:

<meta property="og:image" content="http://ivomynttinen.com/theme/img/og/blog.jpg" />

The image itself should be 1200 x 630px in size, or at least 600 x 315px (non-retina). Older images with the 1:1 aspect ratio and smaller resolutions are still compatible but will be displayed in the old post format.

By the way, you should like my page on Facebook!

This article is outdated.

The data presented on this Cheat Sheet does not contain the latest updates of iOS 8 and the new Apple devices released mid 2014 (iPhone 6, 6 Plus, iPad Air 2).

View the new version

With the release of iOS 7, app designers and developers will need to adjust their visual language to match the new "flat" design of iOS. In addition to the grid system, the dimensions of icons and commonly used elements, typography and iconography has been updated by Apple in many ways. That‘s why the old iOS Design Cheat Sheet that I published last year with the release of the iPad mini needs an update now. I decided to shift away from pure value-based tables about sizes of design elements towards a simple guide that should help to get you started with iOS 7 app design. As always I will update this guide over time, and if you think there is something important missing here, just let me know.

Since iOS 7 is not supported on older models of the iPhone and iPod (only 4+), this guide will only cover the supported devices. If you are looking for information related to these devices, you should take a look at the older iOS Design Cheat Sheet v2.

Resolutions & Display Specifications

Resolutions

Displays

App Icons

One of the biggest changes in iOS 7 is the new dimensions and the visual language used for app icons. Apple introduced a grid system, increased the general size of icons on your home screen and also masked icons with a different shape.

Dimensions

Rounded corners

The old simple radii values for rounded corners are gone. Apple introduced a new shape, named "superellipse". Since Apple did not release an official template of the shape, you will have to use one of the unofficial templates out there, which are replicating the shape in more or less accurate ways. The best I‘ve came across so far is the App Icon Template, which is definitely a very good starting point when you‘re designing an app icon for iOS 7. As always, the rounded corners should not be included in your final exported assets - but you might need them while your design process if you want to add effects, such as a stroke or shadows, which are aligned to the corner of the icon.

Grid system

Apple developed a golden ratio grid system, which can be used to size and align elements on your icon correctly. Anyways, the grid template got criticized a lot by the design community, and it seems like designers (even Apple designers) are not following the grid system very strictly. Feel free to break rules if your icon looks better without taking care of the new grid system.

User Interface

The biggest change in iOS 7 is definitely the all new flat user interface design language used across the whole operating system. While pretty much all gradients and shadows got removed from UI elements, the sizes of commonly used design elements got changed in some cases as well.

Commonly used design elements

Status Bar

While the size of the status bar is the same as in iOS6, the appearance of its content was slightly changed. You can control the background color to match the look of your app design or use the default color themes (white and black). In a lot of the default iOS 7 apps, the status bar is visually connected with the Navigation Bar without any separations.

Navigation Bar

The Navigation Bar usually includes a title as well as basic navigation and action buttons (such as back to previous view, create, edit, etc.). In landscape orientation, the height of the Nav bar is usually shrunk a bit (to 32pt) to allow more content to be displayed below it.

Table Views

Tables (or lists) are using the full width of the display now and are not any longer surrounded by a container that separates tables from each other. The only visual separation between different table views are headlines which appear on top of the table (as known from previous iOS versions) on top of the main app background texture/color. Items within a table are separated by a simple 1px line, which has a margin of 15pt to the left side of the screens but connects directly with the right side of the screen. Each item has an inner padding of 15pt to both sides.

Iconography

Apple makes massive usage of icons without a fill color but only outlines with a thickness of 1pt, but "classic" icons with a color fill are still present and widely used in iOS 7. An often used style for active icons in the tab bar are inverted colors – while the inactive icon has often only outlines, the active one get‘s filled with a solid color while some strokes disappear or are inverted.

Typography

Helvetica Neue is still the default font in iOS, but normal text is usually displayed in the Light face instead of Regular or Bold now. Text that should appear more prominent is often displayed in Medium face (eg. the title in Navigation Bar). Of course, there are still a lot of alternative font faces available to make use of instead of Helvetica Neue. You can find the whole list here. In general (and likely because of the increased usage of Light font faces) the font size was increased for most design elements. Buttons often appear as simple colored text links. Now, they are no longer surrounded by a shape, which supports its metaphor.

Default Font Sizes

Further Reading & Resources

This article will only provide some basic information to get you started with iOS 7 design. Once you dig in deeper, you might be interested in some more details. These articles and resources should help you out: