Егор Поляков – Векторная графика для начинающих: теория и практика технического дизайна (страница 3)

Шрифт

Краткость передачи рекламного сообщения

Реклама должна быть краткой и емкой: всего в десяти словах.

• Уберите тексты-пояснения (кроме необходимых по закону о рекламе): лишние фразы раздражают и не раскрывают подробной информации о продукте.

• Оставьте один контакт для связи с рекламодателем: телефон, ссылку, QR-код.

• Проверяйте читаемость рекламного сообщения в дизайн-макете на цветных и черно-белых распечатках с учетом контраста текста и фона (как в правиле «черным по белому» или, наоборот, «белым по черному»).

Запомните: на чтение вашей рекламы у проезжающих и прохожих есть не более 7 секунд.

В качестве эксперимента возьмите половину листа А4 и посмотрите на рекламу с расстояния вытянутой руки. Если сообщение воспринимается комфортно, в большинстве случаев аналогичный эффект будет на улице.

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

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

Для закрепления материала лекции в практикуме студенты смогут самостоятельно отформатировать текст и размеры глифа. Метрические установки будут предложены.

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

Теория необходима для обоснования выбора визуальных и технических решений при согласовании дизайн-макета с заказчиком – особенно если в ТЗ были неточности.

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

Лекция № 2

Веб-интерфейсы с применением глифов

Мы все чаще решаем повседневные задачи с помощью Сети. Это экономит время и деньги – в том числе при поиске лучшего предложения товаров и услуг. В науке это направление описывается следующими терминами:

• системы массового обслуживания (сокр. СМО, с точки зрения механизмов управления очередью заявок на обработку);

• веб-сервис (с точки зрения точки доступа и взаимодействия с пользователем);

• service on demand (англ. услуга по запросу, описывает процессы обработки заявок из веб- и мобильных приложений).

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

Рисунок 2.1 – Дизайн-макет главной страницы корпоративного сайта CIS. Local Counsel Forum для всероссийского юридического форума в Сочи.

Источник: http://sochilegal.com/en/

Цифровые устройства с наиболее удобными интерфейсами имеют наивысший рейтинг по отзывам клиентов. Он напрямую соотносится с маркетинговым показателем – индексом потребительской лояльности (сокр. англ. NPS). С помощью этого индекса руководство компании-производителя эконометрически оценивает отношение потребителей к коммерческому продукту. Это влияет на развитие цифрового продукта (с расширением функционала для заинтересованных пользователей).

Ключевые факторы оценки качества исполнения веб-интерфейсов

Начнем с основ технического дизайна по специализации user interface.

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

1. Простота восприятия интерфейса.

2. Адаптивность интерфейса.

3. Масштабируемость функционала в интерфейсе.

4. Детализация визуальной оболочки и интеллектуальных решений интерфейса.

5. Доступность для мультиплатформенного использования.

6. Мультиязычность интерфейса.

7. Уникальность или наследуемость интерфейса.

Последовательно детализируем каждый критерий.

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

Мартин ЛеБланк, основатель популярного графического веб-сервиса IconFinder.com, как-то сказал: «Interface like a joke. No needs to explain» («Интерфейс, как и шутка, не требует объяснений»). Либо просто и понятно, либо плохо сделано.

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

Адаптивность интерфейса – интуитивно более легкий критерий для реализации и оценки. Заявленный функционал веб-интерфейса должен четко укладываться в один (первый) экран до прокрутки (скроллинга) с учетом изменяемой ширины любого экрана (вертикальная и горизонтальная ориентации).

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

Уровень требований заказчика ограничивается согласно спецификации к продукту. Допустимо выбирать версии браузеров не старше трех лет: иначе могут возникнуть проблемы на старых версиях Android и iPad (iOS).

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

Детализация визуальной оболочки и интеллектуальных решений интерфейса – критерий, сходный с адаптивностью интерфейса. Но есть дополнительный смысл: возможность надстройки визуальных эффектов (в развитие продукта), детализация с визуальной точки зрения (под retina экраны). Здесь применяется масштабируемая SVG графика, построение визуального диалога (с иллюстрациями) для связи между пользователем и системой (по реакции на логический выбор пользователя). Такая связь (система – пользователь) должна быть понятна и эмоционально окрашена.

Рисунок 2.2 – Форма заявки для клиентов компании Platinum Data Recovery выполнена в виде последовательных шагов при заполнения анкеты. Вспомогательные вопросы и ответы сделаны в виде раскрываемого аккордеона с детализацией ответа по выбору из списка FAQ (сокр. от Frequently Asked Questions – часто задаваемые вопросы)

На рис. 2.2 слева используется глиф комментария с подписью FAQ для подсказки пользователю. Источник: https://platinumdatarecovery.com/request-a-quote

Доступность для мультиплатформенного использования – сложный критерий оценки, сходный с адаптивностью интерфейса. Требует правильного решения для масштабирования продукта на другие платформы – с веб-версии в мобильные приложения iOS, Android и стационарные touchscreen-системы информационных помощников (например, в аэропортах). Речь идет о стандартизации файловой структуры и взаимозаменяемости форматов графических файлов с SVG на аналогичные форматы (без потерь): PDF, PNG и т. д. – в зависимости от требований к интеграции веб-интерфейса на другие платформы.

Мультиязычность интерфейса важна при переводе функционала с одного языка на другой.

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

Уникальность веб-интерфейса важна, если на рынок выходит новый, технологически революционный продукт. Интерфейс должен быть визуально новым, привлекательным для потребителя, но в какой-то части и наследовать веб-интерфейс. Наиболее сложная задача – уложить максимум функционала, системно сгруппированного по блокам функций одного назначения — в рамках экрана до прокрутки, удобно и логично для пользователя.

Рисунок 2.3 – Варианты дизайна веб-интерфейса авторизации для приложения Lillup

Функциональная роль глифов в веб-интерфейсах

Перейдем к роли глифов в создании визуальной оболочки цифровых продуктов. Веб-интерфейс обеспечивает диалог между пользователем и ИТ-системой. Приведем несколько доступных примеров из повседневной жизни.

Рисунок 2.4 – Меню стиральной машины на дисплее для управления программами стирки

Рисунок 2.5 – Интерфейс мобильного приложения для заказа такси с выбором типа кузова автомобиля на основе представленных глифов

Рисунок 2.6 – Интерфейс адаптивного меню корпоративного сайта с векторными глифами для визуализации разделов веб-сайта.

Источник: https://n-trade.spb.ru/

2 3 4 5 Вперед