course user interface - lesson 2

ПРОЕКТИРОВАНИЕ ИНТЕРФЕЙСОВ

занятие №2

Alexander Lisovsky Co-‐Founder at ZZ Photo, UX/UI designer

[email protected]

facebook.com/alexlisovsky, pinterest.com/alexlisovsky, twiOer.com/lisovsky

Разумное творение hOp://youtu.be/kkGeOWYOFoA

Конечно, давайте продолжим изучать теорию

hOp://www.slideshare.net/smoofles/interface-‐design-‐basics-‐2182094

Основные правила дизайна

Линии



Текст

Пункт первый Пункт второй Пункт третий Пункт четвертый Пункт пятый Пункт шестой

Пункт первый Пункт второй Пункт третий Пункт четвертый Пункт пятый Пункт шестой



Объект и пространство



Контраст



Текст



Символы

Добавить Закрыть/отменить

I can not believe…


Цвета

iOS colors

hOps://developer.apple.com/library/ios/documentawon/ UserExperience/Conceptual/MobileHIG/ColorImagesText.html

Android colors

hOp://developer.android.com/design/style/color.html

Хорошее сочетание цветов

hOp://www.artlebedev.ru/tools/colors/

hOps://kuler.adobe.com

Шрифт

Антиквенные шрифты Это шрифты с засечками. Их форма ведет свое происхождение от шрифта древнеримских монументальных надписей (прописные буквы) и от книжного гуманистического минускула эпохи Ренессанса (строчные буквы). Первая наборная антиква появилась в Италии и Германии во второй половине XV века.

hOp://www.paratype.ru/help/class/

Гротески и рубленные шрифты Шрифты без засечек. Впервые наборные шрифты без засечек появились в начале XIX века в Англии, хотя подобная форма знаков применялась еще в надписях античной Греции. Вначале применялись исключительно как акцидентные, но в ХХ веке стали использоваться для набора текста.


Акцидентные и декоративные шрифты. К этой группе относятся шрифты, не укладывающиеся в предыдущие группы классификации, а также специально предназначенные для акцидентного набора и имитирующие определенный исторический стиль или декоративную обработку формы, например, Модерн, Ар Деко, трехмерные, фактурные, орнаментальные и т.д.


Рукописные и каллиграфические шрифты. К этой группе относятся шрифты, по рисунку имитирующие чей-‐то почерк или каллиграфический стиль, но не относящиеся к готическим и древнерусским, которые выделены в отдельные группы.


Выбор шрифта — это в основном вопрос вкуса, но, так как каждый шрифт имеет свои качества и требования (или ограничения), выбор шрифта приводит ко множеству визуальных и технологических последствий.

Выбор гарнитуры

hOp://web-‐standards.ru/arwcles/responsive-‐typography/

hOp://www.myfonts.com

hOp://www.google.com/webfonts

Один не лучше другого, но, по разным причинам, шрифт с засечками имеет более авторитарный оттенок, в то время как шрифт без засечек кажется более демократичным.

Шрифт с засечками или без?


Кегль основного текста не зависит от личных предпочтений. Он зависит от дистанции чтения. Так как чаще всего компьютеры расположены дальше, чем книги, метрический размер шрифта на рабочем столе должен быть больше, чем размер шрифта, используемый в печатном аналоге.

Какой размер?


С увеличением дистанции чтения, будет мудро делать межстрочный интервал (интерлиньяж) экранного текста немного большим, чем у печатного. 140% — это хороший стандарт, но, конечно, это зависит от используемого шрифта.

Межстрочный интервал и контраст


Если сравнить одинаковый кегль любого шрифта для iPhone с версией для iPad, можно заметить, что размер шрифта не совпадает.

iPhone против iPad


1.  iPad мы держим дальше от глаз 2. Экрану iPhone доступна гораздо меньшая площадь, из-‐за чего приходится вносить правки.

Почему для iPhone и iPad используется разный кегль?


Растр vs. Вектор

Программы растровой графики работают с точками экрана (пикселями). Точки не знают, какие объекты они представляют — окружности, линии, прямоугольники. Компьютер запоминает цвет каждой точки, а пользователь из таких точек собирает рисунок, как в детской мозаике.

Растровая графика

Растровые редакторы являются наилучшим средством обработки фотографий и рисунков, т.к. обеспечивают высокую точность передачи градаций цветов и полутонов.

Достоинства растровой графики:

1.  Занимают много памяти. 2. Растровые изображения невозможно увеличивать для уточнения деталей. Так как изображение состоит из точек, то увеличение приводит к тому, что точки становятся крупнее, что визуально искажает иллюстрацию. Этот эффект называется пикселизацией.

Недостатки растровой графики:

Программы векторной графики хранят информацию об объектах, составляющих изображение в виде графических примитивов: прямых линий, дуг окружностей, прямоугольников, закрасок и т.д.

Векторная графика

Преобразования без искажений. Маленький графический файл. Независимое редактирование частей рисунка. Высокая точность прорисовки (до 1 000 000 точек на дюйм).

Достоинства векторной графики:

Векторные изображения выглядят искусственно. Ограниченность в живописных средствах.

Недостатки векторной графики:

hOp://designwashere.com/ design-‐baOle-‐vector-‐vs-‐raster/

That's incredible

Пропорции

А

В

Скрипка Страдивари, 1708 год

Модульная сетка

Промо страница благотворительного проекта, который распространяет открытки и заработанные деньги тратит на благотворительность.

hOp://media.konigi.com/tools/graphpaper/pdf/konigi-‐wireframe-‐portrait-‐cyan.pdf

Практическое задание: Реверсинжениринг проекта из GUI до этапа модульной сетки. hOp://www.popmech.ru/

GUI — graphic user interface

…amazing

Адаптивный веб-‐дизайн Вместо создания нескольких версий сайта для всех видов устройств, умные люди сейчас делают один адаптивный шаблон, который подходит под все все типы экранов. Преимущества в стоимости очевидны.

Дизайн: Юрий Нагорный Верстка: Дмитрий Потиха

Практическое задание: Адаптируем интерфейс веб-‐проекта для разных устройств. hOp://www.popmech.ru/

Вдохновение

Pinterest.com

pinterest.com/alexlisovsky

Behance.net

Dribbble.com

Pwrns.com

hOp://www.awwwards.com

ui-‐cloud.com

hOp://psd.tutsplus.com

hOp://uxarchive.com/tasks/onboarding

Copyright

hOp://www.corbisimages.com

Очень дорого, но очень качественно

hOp://www.geOyimages.com

Очень дорого, но очень качественно

hOp://www.istockphoto.com

Доступно (7-‐60$/1), качественно

hOp://www.shuOerstock.com

Доступно (5-‐60$/1), качественно

hOp://sxc.hu

Бесплатно, мало качественного

hOp://www.photl.com

Бесплатно + платно, стараются

Ok, I almost got it!..

Alexander Lisovsky Co-‐Founder at ZZ Photo

UX/UI designer

[email protected] facebook.com/alexlisovsky, pinterest.com/alexlisovsky,

twiOer.com/lisovsky

course user interface - lesson 2

Design