web-design: курс для новичков. День второй

Александр Лисовский UX, UI, графический дизайнер

Если бы дизайнеры … h1p://www.youtube.com/watch?v=oxUbXgGnSyA

h9p://hotdesignfor.us/news/pages/dolzhen-‐li-‐ya-‐rabotat-‐besplatno/

Выберите два..

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

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

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

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

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

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

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

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

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

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

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

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

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

h9p://designwashere.com/ design-‐ba9le-‐vector-‐vs-‐raster/

Цвет

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



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

h9ps://kuler.adobe.com

Шрифт

www.typetheory.com

www.typetheory.com

www.typetheory.com

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

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

h9p://web-‐standards.ru/artcles/responsive-‐typography/

h9p://www.myfonts.com

h9p://www.google.com/webfonts

Обычно выбор стоит между шрифтами с засечками и без. Это сложный вопрос сам по себе, но есть простое правило, которое может помочь: «Шрифт с засечками — священник, без засечек — хакер»

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


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

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


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

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



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

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


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

iPhone против iPad



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

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


Персонажи

А. Купер «Психбольница в руках пациентов»

Самый эффективный инструмент проектирования взаимодействия исключительно прост: это точное описание пользователя продукта и его целей


Персонажи – не реальные люди, но они представляют реальных людей в процессе проектирования. Это гипотетические архетипы реальных пользователей. Будучи воображаемыми, они, тем не менее, определяются достаточно жестко и точно. На практике мы не столько «выдумываем» персонажи, сколько обнаруживаем их в качестве побочного продукта процесса расследования. Но мы действительно выдумываем их имена и личные сведения.


Создаем персонажи для сужения диапазона конечных пользователей. Представьте, что проектируете автомобиль, удовлетворяющий вкусам широких масс. Мамочке -‐ безопасная, надежная машина, просторная, с большими дверями, для перевозки детей, собак, пакетов с покупками и т. д. Плотнику -‐ крепкий полноприводный пикап, чтобы в него поместились лестницы, материалы. Младший руководящий работник видит себя в машине спортивного типа с мощным двигателем, жесткой подвеской, откидным верхом и – места в машине должно хватать только на двоих.


Проектируем для одного


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


80% участников фокус-‐группы возненавидели новый пикап Dodge Ram. Но после выхода на рынок машина стала бестселлером, потому что остальные 20% в нее влюбились. Любовь людей к продукту, пусть даже этих людей не очень много, – вот ключ к успеху.



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

Гуттаперчевый пользователь


Программисты писали и пишут бессчетные множества программ для этого мифологического гуттаперчевого потребителя. Когда программист находит удобным познакомить пользователя с файловой системой Windows для поиска нужной информации, то определяет гуттаперчевого пользователя как пользователя, способного адаптироваться, продвинутого, образованного в области компьютеров; в других случаях, когда программист находит удобным провести пользователя через сложный процесс посредством бестолкового мастера, то определяет гуттаперчевого пользователя, как покладистого наивного новичка. Проектирование для гуттаперчевых пользователей дает разработчику разрешение писать код как угодно, лицемерно презирая «юзера». Реальные пользователи не эластичны.


Персонаж должен быть конкретным по мере конкретизации персонажи теряют эластичность. По мере обрастания Эмили конкретными отличительными чертами происходит замечательная вещь: она становится в представлении разработчиков реальным человеком. Персонаж должен быть воображаемым Реальные люди представляют огромный интерес, как база для исследований, однако для самого процесса проектирования они обычно бесполезны, а часто и пагубны. Особенности отдельного индивидуума не характерны для группы. Описание должно быть подробным, а не идеальным Важнее детальность персонажа, а не идеальность ее описания Реалистичный взгляд на уровень подготовленности Продвинутые / Образованные / Когнитивное сопротивление


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


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


Алексей 22 года Семейное положение: встречается уже второй год с девушкой Катей. Профессия: копирайтер Активно использует: Instagramm, Pinterest, Twi9er, Foursquere, Facebook Пользуется: ноутбуком с Windows, iPhone 4s, Canon D600. Много путешествует, часто фотографирует в поездках (чаще на iPhone4s). Нет времени наводить порядок. Хватает только времени слить на внешний винчестер и в лучшем случае обозначить в названии дату и тезисно место или событие. Никогда не печатает фотографии. Хранит на внешнем диске. Использует только online.

h9p://www.youtube.com/watch?v=flJtdkR1P9I

Скетчи

Думать Документировать Экспериментировать

Объяснять и общаться

Быстрее потерпеть неудачу

Найти верное решение

Зачем?

h9p://konigi.com/book/sketch-‐book/

Я не умею рисовать



Чем быстрее, тем продуктивнее! Чем «страшнее», тем лучше! Чем больше скетчеи, тем больше идей!

Не критикуйте! Не стремитесь к совершенству! Не фокусируйтесь на деталях!


Че?


Disney Concert Hall (Carol Highsmith)


Исследовательский скетч + Много разновидностей -‐  Никому не понятно -‐  Низкая детализация

«Изящный» скетч + Более реалистичный + Показываем другим -‐ Долго делать


h9ps://docs.google.com/fileview?id=0B916EDb6727eMGJlNjdhOTEtMmYxNS00OTQ4LTkxMTUtZmZjMjIzYmI4NTMw&hl=en

h9p://hotdesignfor.us/news/2010/04/01/shablony-‐dlya-‐eskiza-‐stranic-‐sajta-‐na-‐bumage/

Примитивы

Формы

Линии

Рыба / Lorem ipsum / ____ __

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

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas adipiscing metus semper libero adipiscing quis suscipit diam mollis. Etam sit amet justo quis mauris viverra condimentum at sit amet diam. Fusce arcu est, fermentum id ultrices non, moleste ut odio. Vestbulum auctor scelerisque elit non vulputate. Quisque suscipit ullamcorper tellus. Proin id ornare tellus. Morbi suscipit sapien et ante eleifend dignissim

Lorem ipsum

Lorem ipsum представляет собой искажённый отрывок из философского трактата Цицерона «О пределах добра и зла», написанного в 45 году до нашей эры на латинском языке. Впервые этот текст был применен для набора шрифтовых образцов неизвестным печатником в XVI веке. h9p://ru.wikipedia.org/wiki/Lorem_ipsum

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas adipiscing metus semper libero adipiscing quis suscipit diam mollis. Etam sit amet justo quis mauris viverra condimentum at sit amet diam. Fusce arcu est, fermentum id ultrices non, moleste ut odio. Vestbulum auctor scelerisque elit non vulputate. Quisque suscipit ullamcorper tellus. Proin id ornare tellus. Morbi suscipit sapien et ante eleifend dignissim

h9p://www.blokkfont.com

h9p://konigi.com/book/sketch-‐book/why-‐we-‐sketch



если не использовать персонажи..

Зачем использовать скетчи?

•  Скетчи дают возможность делать ошибки и мыслить открыто

•  Скетчи могут создаваться на лету: много идей за минимальныи промежуток времени

•  Скетчи позволяют фиксировать идеи, не погружаясь в детали

•  Их легко обсуждать, ими легко делиться, их легко критиковать!

•  Это весело!


Книги: 1.Bill Buxton “Sketching User Experiences: Ge«ng the Design Right and the Right Design ”. – Morgan Kaufmann; 1 editon, 2007 2. Dan Roam “The back of the napkin”. -‐ Por®olio Hardcover; Expanded editon, 2009 Статьи и презентации: h9p://uxdesign.smashingmagazine.com/2011/12/13/messy-‐art-‐ux-‐sketching/ -‐ создание скетчеи при помощи слоев h9p://www.slideshare.net/pboersma/good-‐design-‐faster-‐at-‐ux-‐sofia -‐ презентация Peter Boersma h9p://www.uxbooth.com/artcles/tools-‐for-‐sketching-‐user-‐experiences/ h9p://www.uxma9ers.com/mt/archives/2010/05/sketches-‐and-‐wireframes-‐and-‐prototypes-‐oh-‐my-‐ creatng-‐your-‐own-‐magical-‐wizard-‐experience.php h9p://www.slideshare.net/pubsmith/sketching-‐interfaces-‐workshop-‐interactons12-‐dublin Создание интерактивных скетчеи: ссылка на описание программы h9p://www.infragistcs.com/products/indigo-‐studio/?gclid=CID29LeD27QCFeR4cAodZ0kA2A


Пропорции

А

В

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

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

1.618

Порядок в слоях

В Photoshop существует очень удобный механизм группировки слоёв. Это очень полезное свойство: гораздо легче разобраться в макете, если слои сгруппированы по элементам (например, шапка-‐контент-‐подвал).

Аккуратность

h9p://web-‐standards.ru/artcles/coder-‐vs-‐designer/

Слои, которые не используются в макете, необходимо удалять, а не оставлять отключёнными — верстальщик в процессе работы отключает разные слои, а потом включает всё сразу и может сильно испугаться.



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



Photoshop. Начало

Все понял!..

Перерыв?

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

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

Содержание:

1.  Логотип 2. Слоган (девиз) 3. Иллюстрация 4. О проекте 5. Открытки 6. Где купить 7. Планируем сделать 8. Что сделано 9. Реквизиты для оплаты 10. Координаты 11. SMM (facebook, twi9er)

Для вдохновения: h1p://www.behance.net/gallery/Citroen-‐DS3-‐Cab/5258951

h9p://365psd.com/day/3-‐257/

Сделай сам

1. Правой кнопкой на слое 2. Закладка Drop Shadow

Правой кнопкой на слое

Выбираем слой, который ниже

Ctr+Т -‐ трансформируем

Shi³ -‐ пропорционально

Ctr+U -‐ обесцвечиваем

1. Правой кнопкой на слое 2. Левой кнопкой мыши Кликаем по цветному квадратику, чтобы поменять цвет

Смещаем чуть ниже

Копируем еще раз голубой прямоугольник и перемещаем над фиолетовым слоем

Создаем еще одну копию голубого слоя и делаем поле fill=0

Копируем слой с зайцем

Правая кнопка на новом слое и выбор Clear Layer Style

Пропала Мисси h1p://raven.esiteq.com/2011/10/missing-‐missy/

Александр Лисовский Менеджер продукта в ZZWolf UX, UI, графический дизайнер (063) 304-‐54-‐85 [email protected] facebook.com/alexlisovsky pinterest.com/alexlisovsky