Какие существуют правила качественного дизайна? Есть три уровня ассоциаций: очевидность, логика и эмоции. Очевидность — используется в простых пиктограммах, чтобы упростить восприятие информации, но такие изображения не несут уникальности. Логика — на этом уровне человек должен связать увиденное со своим опытом и знаниями. Удовольствие, которое испытывает при этом человек, способствует запоминаемости дизайна. Эмоции — строится на архетипах - ассоциациях, которые запоминались ранее человеком при неосознанном восприятии. Использовать этот уровень нужно только в случае, если ЦА точно поймет, в чем скрытая суть изображений.
ИНТЕРФЕЙС
Пользователь должен заранее интуитивно понимать, какое действие выполнит программа после получения команды. Первым делом дизайнер разрабатывает UI Kit, чтобы он был одинаково реализованным на всех страницах сайта. Это интерфейс построения системы.
Описываем пользование Китом с помощью гайда - руководства, чтобы каждый участник проекта мог использовать его в своей работе.
Базовый набор Кита: заголовки; наборный текст списки; таблицы палитра; отступы / расстояния; гештальт. Целостность восприятия достигается за счет принципов: близость; схожесть; целостность; замкнутость; смежность; общая зона.Если вы закончили макет, помните, что он далек от идеала процентов на 50. Не останавливайтесь и попробуйте в несколько заходов улучшить свою работу.
ПРОПОРЦИИ
Золотое сечение = 1,618033 или 1,62. Используется при выборе размеров и размещения объектов на странице.
ЧИСЛА ФИБОНАЧЧИ
Последовательность, в которой каждое последующее число равно сумме двух предыдущих — 1, 1, 2, 3, 5, 8, 13, 21, 34, 55, 89… Эти числа можно использовать как готовы величины ширины и высоты элементов дизайна. Серебряное сечение = 2,41.
ПРАВИЛО ТРЕТЕЙ
При определении зрительных центров, кадр делится линиями, параллельными его сторонам, в пропорциях 3:5, 2:3 или 1:2.
МЕТРИКА
Это сетка, которая делит рабочее пространство на равные элементы. Выберите парное число от 0 до 15 или 5 (лучше - 8) и пользуйтесь им для определения шага сетки в пикселях. Чем меньше шаг, тем бессмысленней метрика. Чем больше шаг, тем меньше возможностей для творчества.
ТЕКСТ
Где брать текст? У клиента; у копирайтера; написать самому.
Заголовок — это ловушка для взгляда человека. Не переусердствуйте с акцентами. Если акцентов слишком много, они перестают быть акцентами.
Точка в конце заголовка не ставится. Если внутри заголовка несколько предложений, то точка не ставиться только в конце последнего.
ЧИСЛА
Следует разделять числа на группы по три цифры справа налево: 34 567; 2 567; 456 678 123. Не разбиваются на группы года и номера, если перед ними стоит знак номера. Например: в 1998 году, №87359.
Слишком большие круглые числа лучше писать в словесно-цифровой форме. Вместо 30 000 000 000 — 30 млрд. Большие десятичные дроби тоже следует группировать по три цифры, но уже слева направо: 23,543; 8 16 764,432 654 87. Иностранный формат числа - 23,432,456.35.
ИНТЕРВАЛЫ
В интервалах принято использовать: многоточие тире знак ÷. В технической или научной литературе используется многоточие и знак ÷ для числовой формы интервала. А тире и предлоги употребляются во всех остальных случаях. Научная и техническая длиной 3…10 метров; ширина 45÷57 мм. Гуманитарная и публицистическая длиной 3—10 метров; длиной от 3 до 10 метров. Художественная: длиной три — десять метров.
Не рекомендуется использовать тире при отрицательных и положительных числах: температура -5—+10 °C — плохо; температура -5…+10 °C — хорошо. Допустимо сокращать большие круглые числа: высота 20—50 тыс. метров — идеально; высота 20 тыс. — 50 тыс. метров — необязательно.
Номера телефонов принято отделять дефисом или пробелом по две цифры справа налево, исключая последнюю цифру, которую в семизначных номерах присоединяют к предыдущей группе цифр из двух знаков; напр.: 299-85-90, 299 85 90; 985-90,985 90.
Телефонные номера с удачным сочетанием цифр типа 222-32-22, оформляются так 222-3-222 (дефисы при этом могут заменяться пробелами: 222 3 222). 123-45-67 — городской номер; 8 (123) 123-45-67 — городской номер с кодом; +7 123 123-45-67 — сотовый.
Адреса принято писать без знака №. Например: Ленина, 15. Двойные номера через косую черту (обратный слэш). Например: ул. Пушкина, 15/19. Буква в номере пишется слитно: Тупиковый пер., 14а. Полный формат стоит использовать только для почтового адреса: 123456, Россия, г. Москва, ул. Такая-то, 15, офис 67, 3 этаж. Можно упростить и совместить почтовый адрес с адресом для обычных людей: Такая-то 15, офис 67, 3 этаж, 123456, Россия, Москва.
Числа и единицы величин пишутся с последней цифрой раздельно, кроме специальных символов.
Правильно: 550 т, 25 °С, 25 %, 10 000 ₽, 25°, 4’44”. При интервале и перечне величина ставиться только после последнего значения: от 10 до 40 м; 10—40 м; CMYK 40, 20, 50 и 60 %; CMYK 43,3; 50; 12,45; 10 %.
Даты и периоды 14.02.2016 г.; 14 февраля 2016 года. 1981—1985 гг. — в пределах нескольких лет; 1950 г. — 1980- е гг. — десятилетия; театральный сезон 2015/16 — все виды некалендарных лет; 10 января по 16 марта 2016 года — период в пределах одного года; 10 января 2015 по 10 января 2016 года — период разных годов.
Ссылки и символы изменение начертания распространяется на соседние символы, если они относятся только к выделяемому тексту. Например: «самый лучший чемодан». Но не распространяется на символы, если они в равной степени относятся и к тексту без изменения начертания. Например: (стерлядь, осётр, пангасиус).
Альт-коды. Тут их больше: … — многоточие; «и» или „и“ — кавычки; − — минус; - — дефис; – — короткое тире; — — тире; • — буллет (маркер списка); · — интерпункт использовался вместо пробела в латинском письме; ° — градус; ₽ — рубль; © — копирайт.
ИНСТРУМЕНТЫ КОПИРАЙТЕРА
Текстовые редакторы: https://www.dropbox.com/paper; https://docs.google.com; https://evernote.com. Плагиатус от Адвего показывает степень уникальности текста, источники текста и процент совпадения текста. Типограф — средство подготовки текстов к web- изданию. Форматирует текст для приведения его к более правильному с точки зрения типографики виду. Главред Максима Ильяхова помогает очистить текст от словесного мусора, проверяет на соответствие информационному стилю.
СЛОВАРИ
Словари эпитетов (подбор подходящих определений к заданным словам): http://slovesa.ru; http://slovopedia.com; словари синонимов: http://synonymizer.ru; http://jeck.ru; https://classes.ru/; сервисы сравнения схожести двух текстов: http://www.topwriter.ru/comparison/; https://utext.rikuz.com/; сокращение длинных ссылок: https://tr.im; https://vk.com/cc; кодировка: http://artlebedev.ru/tools; справочник + самоучитель по HTML и CSS: http://htmlbook.ru; https://webref.ru; статистика ключевых слов на Яндексе: https://wordstat.yandex.ru/; справочник Розенталя: http://rosental-book.ru/; Грамота.ру: http://gramota.ru.
МОДУЛЬНАЯ СЕТКА
Нужна для организации объектов на странице. Помогает правильно расположить объекты на странице: модули могут иметь разные или одинаковые размеры; минимальная единица сетки — это шаг, равный модулю; при построении сетки за основу берется строка текста; высота модуля соответствует определенному числу строк, а ширина - ширине колонки набора.
Модули разделены друг от друга небольшими пробельными шагами, чтобы элементы не касались друг друга и чтобы можно было поместить подписи к ним. По вертикали промежуток между модулями составляет 1, 2 или больше строк. По горизонтали - рассчитывается по ширине блока текста или иллюстрации.
ТЕКСТ И ИЗОБРАЖЕНИЯ В МОДУЛЬНОЙ СИСТЕМЕ
Комфортное чтение напрямую зависит от: размера шрифтов и длины строки интерлиньяжа (межстрочного расстояния). Объема информации. Для комфортного чтения необходимо размещать в строке от 7 до 10 слов. Ширину полосы набора стоит выбирать исходя из наименьшего кегля (высоты литер). Для легкого чтения важен большой интерлиньяж.
Для выбора размера изображений следует отталкиваться от кегля и интерлиньяжа текста, а также от ширины колонки. Таким образом размер изображения зависит от размера модуля. 1 картинка не обязательно должна занимать 1 модуль.
ТИПОГРАФИКА
Как отличить хороший шрифт от плохого? Определиться с задачей шрифта. Для шрифтов заголовков важна внешняя привлекательность, для текстовых шрифтов - читабельность. Буквы должны быть в одном стиле. Каждый символ шрифта должен быть уникальным. Шрифт должен легко читаться.
Выносные элементы не должны быть слишком короткими или длинными.
Форма цифр должна отличаться от формы букв. Хорошие шрифты должны пройти проверку на “Один ай ел” 1IL. При выборе шрифта учитывайте присутствие кириллицы. Шрифт должен иметь веб-версию. Для форматирования текста используйте: https://gridlover.net.
ГДЕ БРАТЬ КАРТИНКИ
Google с правами использования; http://thestocks.im — агрегатор фотостоков под CC лицензией; https://sitebuilderreport.com — поиск по сразу нескольким фотостокам; https://tookapic.com; https://flickr.com — на фликре можно найти много бесплатных изображений; https://unsplash.com — самый модный сток-сервис с неплохими фотками в высоком разрешении; http://resplashed.com; https://deathtothestockphoto.com/join/ — подписка на рассылку пачки фоток каждый месяц или неделю; https://picjumbo.com; https://littlevisuals.co/; https://nos.twnsnd.co/ — олдовые фотки; https://images.superfamous.com/; https://butdoesitfloat.com/; https://gratisography.com/; https://stocksy.com; http://getrefe.com/downloads; https://skuawk.com/; https://nasa.gov — фотки от NASA; pixabay.com; https://search.creativecommons.org — поиск по лицензии и сервису.
ПИКТОГРАММЫ
Это упрощенное графическое изображение. *.svg — это масштабируемая векторная графика для веба. Иконки гораздо выгоднее использовать как раз в этом формате.
КАЧЕСТВЕННЫЕ ПИКТОГРАММЫ
Векторные и растровые иконки https://icons8.com; https://material.io/icons; https://thenounproject.com; https://www.flaticon.com/; https://www.iconfinder.com/; https://iconmonstr.com/; http://svgicons.sparkk.fr; https://fontawesome.com; https://www.flaticon.com. Текстовые иконки: https://fontawesome.com/; https://icomoon.io; https://fontastic.me/; https://fontello.com/; https://ionic.io/ionicons; http://zurb.com.
ПРОЕКТИРОВАНИЕ
Это создание скелета интерфейса с продуманным сценарием взаимодействия для пользователей. Виды проектирования: функциональное (любой объект - лишь носитель функции); оптимальное (совмещает функциональную составляющую и потребности пользователей); системное (решает поставленные задачи комплексно); нисходящее (разработка объекта от общих черт к детальным); восходящее (от частного к общему, красиво — не равно удобно).
Инструменты проектировщика: юзабилити и опыт взаимодействия.
Абстрактные уровни проектирования: уровень поверхности (внешний вид продукта с точки зрения пользователя); уровень компоновки (расположение элементов интерфейса); структура (взаимное расположение элементов, откуда, куда и как будет перемещаться пользователь); уровень возможностей (перечисление функциональных возможностей, которые будут доступны для пользователей); уровень стратегии (узнаем желания и ожидания относительно продукта, как со стороны пользователя, так и заказчика); эмпатия; юзабилити-тестирование; A/B тестирование.
Типы навигации: глобальная — меню; локальная — ссылки внутри разделов страницы, которые помогают переходить на подобные страницы; контекстная — динамическая область сайта, которая предоставляет набор релевантных ссылок.
Как сделать меню более эффективным? Навигация должна быть заметной; бургер только для мобильных; навигация в привычном месте; выделять ссылки; размещать кросс-ссылки (с этим товаром покупают…); навигация должна быть понятной; выделять открытые ранее ссылки; ясная формулировка; чем крупнее объект и чем меньше до него расстояние, тем проще и быстрее с ним взаимодействовать; основное меню должно быть под рукой.
КАРУСЕЛЬ
Ошибки юзабилити при создании карусели: автослайдинг после начала взаимодействия; необходимо переводить на “ручной режим” управление слайдами после начала взаимодействия; переключение набора слайдов по одному (в случае, если на слайд-шоу размещена группа изображений, то нужно переключать элементы не по одному, а сразу группами); непонятное отображение прогресса (пользователю необходимо максимально просто показать этап, на котором он сейчас находится); бесконечный слайдинг (пользователю необходимо понимать, когда он закончил просмотр контента. добавьте ограничитель в виде отключенной стрелки); мелкая зона для взаимодействия (объекты, с которыми нужно взаимодействовать должны быть больше курсора мыши).
КАРТОЧКИ
При построении сайтов используют информационную архитектуру заложенный сценарий, по которому пользователь воспринимает информацию. Карточный дизайн направляет пользователя по логической цепочке. Он опирается исключительно на изображения и это его сильная сторона. Такой сайт хорошо подходит под мобильный дизайн.
ФОРМЫ
То, как выглядит форма определяет успешность ее заполнения. Советы по созданию формы: сделать форму короче; удалить поля о сборе информации, которая может быть получена другим способом; поля для несрочной информации; поля для информации, которая может быть упущена без потери; группируй поля в одну колонку (исключение - адреса, индекс и т.д., такую информацию можно разместить несколькими ячейками в строке); логическая последовательность полей; избегать комментариев к полям внутри самого поля, если после заполнения невозможно прочитать, для какой информации предназначалась ячейка; текстовые поля должны быть того же размера, что и ожидаемые вводные данные; объясни требования к заполнению; избегать кнопки сброса и очистки; сообщения об ошибках показывать с объяснением дальнейших действий; не слишком агрессивно показывать окно об ошибках.
ТИПЫ САЙТОВ
Персональный сайт; блог; портфолио (сайт-галерея с примерами работ автора); корпоративный сайт. представительство компании в интернете со сложной структурой и внутренним интранетом; тематический сайт; каталог/витрина (интернет-магазин без возможности заказа товаров); интернет-магазин; промо-сайт (для продвижения одного товара/услуги/мероприятия); новостной портал; сервис.
Интерфейс — это лишь инструмент взаимодействия. Он не должен быть заметен и, тем более, мешать. Чтобы добиться хорошего эффекта, необходимо не добавлять лишние элементы и добавить естественные анимации.
ПОДАЧА ПРОЕКТА
Для усиления впечатления от проекта можно использовать демонстрацию его на конечном носителе (билборде, девайсе и т.д.). Для этого можно использовать мокапы.
МОКАПЫ
http://getcover.ru; https://mockup.photos; https://placeit.net; https://mockuphone.com/; https://www.apple.com/; https://mockuuups.studio/; http://facebook.design.
ДИЗАЙН-АГРЕГАТОРЫ
http://bm.straightline.jp — японский агрегатор; https://www.awwwards.com/ — всемирный; https://www.typewolf.com/ — агрегатор типографики; http://calltoidea.com — идеи по категориям; https://land-book.com/ — лендинги; https://mediaqueri.es/ — адаптивные сайты; http://storepages.xyz — магазинные страницы; http://bestaboutpages.com — страницы о компании; https://emptystat.es/ — пустые страницы.
