Course User interface - Lesson 2

ПРОЕКТИРОВАНИЕ

ИНТЕРФЕЙСОВ

занятие
№2

Alexander
Lisovsky

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

a.lisovsky@zzphoto.me

facebook.com/alexlisovsky,
pinterest.com/alexlisovsky,

twiOer.com/lisovsky

Разумное
творение

hOp://youtu.be/kkGeOWYOFoA

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

изучать
теорию

hOp://www.slideshare.net/smooﬂes/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/

Антиквенные
шрифты

Это
шрифты
с
засечками.
Их
форма

ведет
свое
происхождение
от

шрифта
древнеримских

монументальных
надписей

(прописные
буквы)
и
от
книжного

гуманистического
минускула
эпохи

Ренессанса
(строчные
буквы).

Первая
наборная
антиква

появилась
в
Италии
и
Германии
во

второй
половине
XV
века.

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

Гротески
и
рубленные

шрифты

Шрифты
без
засечек.
Впервые

наборные
шрифты
без
засечек

появились
в
начале
XIX
века
в

Англии,
хотя
подобная
форма

знаков
применялась
еще
в

надписях
античной
Греции.
Вначале

применялись
исключительно
как

акцидентные,
но
в
ХХ
веке
стали

использоваться
для
набора
текста.


Акцидентные
и

декоративные
шрифты.

К
этой
группе
относятся
шрифты,
не

укладывающиеся
в
предыдущие
группы

классификации,
а
также
специально

предназначенные
для
акцидентного

набора
и
имитирующие
определенный

исторический
стиль
или
декоративную

обработку
формы,
например,
Модерн,

Ар
Деко,
трехмерные,
фактурные,

орнаментальные
и
т.д.


Рукописные
и

каллиграфические

шрифты.

К
этой
группе
относятся

шрифты,
по
рисунку

имитирующие
чей-‐то
почерк

или
каллиграфический
стиль,

но
не
относящиеся
к

готическим
и
древнерусским,

которые
выделены
в

отдельные
группы.


Выбор
шрифта
—
это
в
основном
вопрос

вкуса,
но,
так
как
каждый
шрифт
имеет

свои
качества
и
требования
(или

ограничения),
выбор
шрифта
приводит

ко
множеству
визуальных

и
технологических
последствий.

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

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

Один
не
лучше
другого,
но,
по
разным

причинам,
шрифт
с
засечками
имеет

более
авторитарный
оттенок,
в
то
время

как
шрифт
без
засечек
кажется
более

демократичным.

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

или
без?


Кегль
основного
текста
не
зависит

от
личных
предпочтений.
Он
зависит

от
дистанции
чтения.
Так
как
чаще
всего

компьютеры
расположены
дальше,
чем

книги,
метрический
размер
шрифта

на
рабочем
столе
должен
быть
больше,

чем
размер
шрифта,
используемый

в
печатном
аналоге.

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


С
увеличением
дистанции
чтения,

будет
мудро
делать
межстрочный

интервал
(интерлиньяж)
экранного

текста
немного
большим,
чем

у
печатного.
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/

А

В

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

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

Промо
страница

благотворительного

проекта,
который

распространяет
открытки

и
заработанные
деньги

тратит
на

благотворительность.

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

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

Реверсинжениринг
проекта

из
GUI
до
этапа
модульной
сетки.

hOp://www.popmech.ru/

GUI
—
graphic
user
interface

Адаптивный
веб-‐дизайн

Вместо
создания
нескольких
версий

сайта
для
всех
видов
устройств,
умные

люди
сейчас
делают
один
адаптивный

шаблон,
который
подходит
под
все
все

типы
экранов.
Преимущества
в

стоимости
очевидны.

Дизайн:
Юрий
Нагорный

Верстка:
Дмитрий
Потиха

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

Адаптируем
интерфейс
веб-‐проекта

для
разных
устройств.

hOp://www.popmech.ru/

Pinterest.com

pinterest.com/alexlisovsky

hOp://uxarchive.com/tasks/onboarding

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

a.lisovsky@zzphoto.me

facebook.com/alexlisovsky,
pinterest.com/alexlisovsky,

twiOer.com/lisovsky

Course User interface - Lesson 2

Recommended

Recommended

More Related Content

Similar to Course User interface - Lesson 2

Similar to Course User interface - Lesson 2 (16)

More from Oleksandr Lisovskyi

More from Oleksandr Lisovskyi (20)

Course User interface - Lesson 2