USER INTERFACElesson №6

Alex LisovskyCo-Founder at ZZ Photo, UX/UI designer

alexander.lisovsky@gmail.comfacebook.com/alexlisovsky, pinterest.com/alexlisovsky,

twitter.com/lisovsky

The iOS Design Cheat Sheet

http://iosdesign.ivomynttinen.com/

Resolutions & Display Specifications

http://ivomynttinen.com/blog/the-ios-7-design-cheat-sheet/

Difference between Points and Pixels

http://iosdesign.ivomynttinen.com/

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.

PPI

PPI

App Icons

http://iosdesign.ivomynttinen.com/

App Icons

http://iosdesign.ivomynttinen.com/

http://iosdesign.ivomynttinen.com/

Grid system

http://iosdesign.ivomynttinen.com/

Color Palette

http://iosdesign.ivomynttinen.com/

Bar Button Icons

http://iosdesign.ivomynttinen.com/

Navigation BarNav Bar in iPhone 6 portrait mode

http://iosdesign.ivomynttinen.com/

ToolbarNav Bar in iPhone 6 portrait mode

http://iosdesign.ivomynttinen.com/

Tab Bar

http://iosdesign.ivomynttinen.com/

Table View

http://iosdesign.ivomynttinen.com/

Table View

http://iosdesign.ivomynttinen.com/

Table View

http://iosdesign.ivomynttinen.com/

Table Viewwith subtitle

http://iosdesign.ivomynttinen.com/

Table Viewwith value

http://iosdesign.ivomynttinen.com/

Actions sheets

Alerts

http://iosdesign.ivomynttinen.com/

Edit menu

http://iosdesign.ivomynttinen.com/

Popover

http://iosdesign.ivomynttinen.com/

Segment controls

http://iosdesign.ivomynttinen.com/

Sliders

http://iosdesign.ivomynttinen.com/

Stepper

http://iosdesign.ivomynttinen.com/

Switch

Smart Home iOS app

Практическое задание:

Создаем интерактивный прототип приложения Smart Home в proto.io:- Экран входа- Главный экран- Экран истории событий

http://www.ex.ua/842370777173

Alex LisovskyCo-Founder at ZZ Photo

UX/UI designer

alexander.lisovsky@gmail.comfacebook.com/alexlisovsky, pinterest.com/alexlisovsky,

twitter.com/lisovsky