Структура сайта-это последовательность доведения информации до пользователя задача сделать не просто красивую картинку, а четкое и правильное донесение информации-ключевой фактор в принятии решении о покупке.
Задача дизайнера - усилить эффект коммерческого предложения. Не дизайн делает конверсию!
I Этап. Текстовый прототип.
Первоначально задача дизайнера сайтов состоит в том чтобы выделить ключевую информацию о бизнесе.
Как выделить ключевую информацию?
1. Разговор с клиентом,бриф (подробное описание бизнеса), в ходе разговора необходимо обратить внимание на сильные и слабые стороны что не получается и какие результаты в работе.
2. Анализ коммерческих предложений. Если компания ранее не была представлена в интернете, то необходимо проанализировать все те промо-предложения которые были направлены контрагентам компании с которыми они сотрудничают или предполагали сотрудничество.
3. Анализ текущего сайта.
Далее с помощью логики нужно структурировать полученную информацию (картинка тестовый прототип), отфильтровать самую важную информацию, которая будет представлена в итоге на сайте.
На основе собранной, структурированной и отфильтрованной информации делается текстовый прототип сайта.
Дизайн сайта подстраивается под текстовый прототип но не обратно.
Очень важно даже при редизайне сайта начинать с текстового прототипа. Редизайн это в первую очередь переосмысление и новый сбор информации а не просто перерисовка новых блоков со старой информацией.
В текстовом прототипе сайта прописывается досконально вся отобранная и отфильтрованная информация и в точности как будет представлена на сайте, это очень важно чтобы в итоге когда сайт будет сверстан не возникло вопросов у заказчика о размещенной информации.
Основные этапы создания текстового прототипа:
1.Выделение основных заголовков;
2.Выделение подзаголовков;
3.Описание каждого раздела;
4.Выделение служебной информации (шапка, подвал, всплывающие элементы). Эти элементы не влияют на принятие решения пользователя сайта. Элементы в этом пункте нужны для удобства навигации.
Пример текстового прототипа
II Этап. Визуализация блоков
Макеты я создаю в Figma. Как пользоваться инструментами в Figma я рассказывать не буду, этого материала предостаточно в свободном доступе.
Чтобы визуализировать блоки нужно понять как их правильно создавать.
Сразу отрабатываем навык на практике перерисовываем все блоки. Учится лучше сразу на хорошем и для примера можно брать работы лучших дизайнов по рейтингу рунета https://ratingruneta.ru/
На что следует обратить внимание:
- отступы (внешние и внутренние)
- управление вниманием
- визуальная красота
Итак с чего начинаем:
- выбираем понравившийся сайт, к примеру такой http://miraris.ru/
- далее для удобства скриншотим первый блок шапку, я это делаю при помощи программы Joxi и вставляем на рабочий стол
- перерисовываем каждый блок
Каждый элемент в дизайне – это некий блок, и все отступы и расстояния внутри этого блока должны быть меньше, чем снаружи. Например если от заголовка до карточки товара отступ 50 пикселей, значит внутри самой карточке все отступы должны быть меньше. Например.
Главная задача в этом этапе научится видеть дизайн, видеть отступы, замечать как происходит управление вниманием.
Что такое управление вниманием на примере
На макете нужно управлять вниманием пользователя. На каждом экране показывать первое, второе, третье и четвёртое. Польза этого в том, что ты ведёшь человека к нужному действию:
Первый шаг в управлении вниманием — создание визуальной доминанты. Это большой объект на экране. У него простая задача — привлечь взгляд и объяснить суть. Чтобы сделать доминанту, достаточно пройти 4 шага.
Шаг 1. Поставить объект на якорную точку
Визуальная доминанта заметна, если расположена на якорной точке: по центру или в углах прямоугольника.
Вот «ваза» на якорных точках:
Если расположить объекты там, где кажется красивым — будет неразбериха:
Шаг 2. Увеличить размер
Размер определяет порядок иерархии: сначала человек изучает крупный объект, и только потом мелкие. Поэтому доминанта должна быть большой и важной:
Доминанта на макете должна быть одной, иначе непонятно откуда смотреть:
Шаг 3. Добавить контраста
Человеческий глаз замечает яркие цвета на фоне блеклых. Когда нужно акцентировать внимание на конкретном объекте — используй цветовой контраст:
Без дополнительного акцента пользователь может пропустить важную информацию:
Шаг 4. Добавь «воздуха»
«Воздух» — это пустота вокруг объекта. Чем меньше элементов соседствует с объектом, тем больше к нему внимания:
Без воздуха доминанту труднее считать:
Что должно быть визуальной доминантой?
Визуальная доминанта — это самое важное, что должен увидеть человек на странице. Ему нужно объяснить, куда он попал и чем полезен блок. Для этого не годятся второсортные подробности вроде логотипа или нудных описаний. В доминанте всё четко и по-делу.
Инструментов для раскрытия смыслов много, вот пара из них.
- Лаконичный заголовок о продукте:
- Фотография, которая демонстрирует продукт:
Используй доминанту, чтобы создать точку входа. Человек сразу поймет, куда попал. Чтобы раскрыть подробности, веди взгляд от крупных объектов к мелким, от контрастных к менее контрастным.
Управляй вниманием
Для тех, кто любит шпаргалки
- Поставить объект на якорную точку
- Увеличить в размере
- Добавить цветовой контраст, если нужно
- Добавить «воздуха»
Обучение дизайну – во многом визуальный процесс. Ваш на него взгляд имеет решающее значение. Вы должны научиться обращать внимание на детали, чтобы определять визуальную иерархию. Если вы видите это на других сайтах, то сможете повторить и на своем.
Просто доверяйте своим глазам. Создайте список своих любимых сайтов и проанализируйте каждый из них. Определите самые удачные элементы и их влияние на весь дизайн. Это поможет вам оценить эти концепции с точки зрения UI/UX, а не пользователя.
Не бойтесь экспериментировать. Никто еще не добивался успеха, просто читая статьи о дизайне. Они помогают, но без практики нельзя понять, что работает, а что нет.
Научитесь анализировать макеты сайтов и воссоздавать их. Со временем у вас накопится целая библиотека элементов, которая значительно упростит процесс создания новых сайтов.
Проработка UI-элементов идет на этапе mood board
Что можно показать на мудборде
Поскольку мудборд — это своеобразное превью дизайн-проекта, имеет смысл отобразить на нем все элементы, из которых должен состоять будущий дизайн. Мы перечислим основные, но в вашем мудборде их может быть больше или меньше — в зависимости от задач дизайна.
Цветовые сочетания
Если одной из задач дизайн-проекта является выбор цветовых решений, покажите предлагаемые цвета на мудборде в отдельных блоках. Правильный выбор палитры цветов — тот, который передает зрителю нужные ощущения. При выборе цветовых сочетаний следует учитывать характер цвета, его значение в культурных традициях аудитории. К цветовым мини-блокам можно сделать уточняющие надписи, чтобы передать их значение с точки зрения ассоциаций.
Вот как дизайнер Nikki Clark подобрала и обозначила палитру для дальнейшей работы над фирменным стилем бренда пляжной одежды. Ее вдохновляли образы коралловых рифов, прибоя, тропических цветов и мохито.
С помощью генератора палитры вы сможете подобрать удачные цветовые сочетания для своих мудбордов.
Фото, иллюстрации
Фото и иллюстрации помогают передать настроение и нужную эстетику. Если проект предполагает проведение фотосъемки, обязательно включите в мудборд релевантные референсы. В мудборде не зазорно использовать фото с вотермарками фотостоков, ведь на этом этапе вы находитесь в поиске нужной идеи. Если одной из задач проекта является создание уникальных иллюстрированных изображений или персонажей, подберите несколько удачных примеров от которых будет отталкиваться иллюстратор, как это сделали Louise Love Print Studio:
Составляя мудборд в Canva, вы можете использовать бесплатные фото от Pexels и Pixaby. Для доступа к каталогам фото выберите соответствующую опцию в меню «Еще».
Шрифты
О типографике, которая станет частью дизайн-проекта, следует задуматься заранее. Шрифты, как и изображения, помогают создать определенное настроение, задают тон и стиль дизайна. Прежде всего, подумайте, какие ассоциации должно передавать начертание текста. К примеру, декоративные рукописные шрифты (такие, как LeoHand Light или Euro Script) не подходят для текста в блоге или верстки годового отчета компании, но вполне уместны для оформления иллюстраций или афиши к детскому фестивалю. Убедитесь в том, что предлагаемые шрифты читаемы и понятны. Для подбора шрифтов можно обратиться к специальным ресурсам, например,Google Fonts и Fontstorage.
В редакторе Canva вы сможете найти более 180 кириллических шрифтов.
Текстуры
Некоторые образы можно передать с помощью фоновых текстур (дерева, мрамора, кирпича, складок ткани, растительных ландшафтов и так далее). Текстуры могут становиться отправной точкой для выбора палитры и стиля. Текстурные фоны часто используются при создании фотоконтента, особенно в предметной съемке. Стоит включить этот элемент в мудборд, если дизайн-проект предполагает создание меню или каталога товаров.
Слоганы, цитаты
Если у вас или заказчика уже есть утвержденный слоган, используйте его, чтобы продемонстрировать, как подкрепляют его смысл предлагаемые образы. Либо разместите на мудборде цитаты и словосочетания, которые будут созвучны выбранным образам.
Логотипы
Здесь так же, как и в случае со слоганом, вы либо размещаете имеющийся лого, чтобы подкрепить его визуальными образами, либо предлагаете удачные варианты для редизайна или создания нового логотипа.
Паттерны
Если задача проекта — разработать фирменный стиль компании, можно включить в мудборд несколько вариантов паттернов. Паттерн — важный элемент фирменного стиля, который используется при оформлении упаковки, пакетов, бланков писем и так далее. Это набор повторяющихся в определенном порядке элементов, которые вместе составляют уникальный узор. Паттерн «работает» на узнаваемость бренда (все мы знаем фирменные узоры Louis Vuitton и Burberry).
Посмотрите на мудборд от Gooseberrymoon:
В редакторе Canva вы сможете найти примеры графики, с помощью которых легко составить простые паттерны. Для этого выберите соответствующую опцию в меню «Элементы». Паттерн может частично повторять лого или дополнять его, как в проекте у Sapunova Food&People:
В редакторе Canva вы сможете найти примеры графики, с помощью которых легко составить простые паттерны. Для этого выберите соответствующую опцию в меню «Элементы».
Как приступить к делу?
- Определитесь с задачей и стилем
Задачи дизайн-проекта часто исходят из задач продукта, для которого создается проект. Подумайте, о чем должна говорить концепция, какие вызывать ассоциации. Это станет подсказкой к выбору стиля и цветовых решений. Единый стиль вашего дизайна поможет сделать работу визуально цельной.
Marina собрала мудборд для дальнейшей разработки интерфейса мобильного приложения, которое помогало бы пользователям находить точки продаж мороженого с учетом геолокации. Задача продукта — привести клиента в точки продаж. Задачи дизайна: вызывать позитивные эмоции, желание получить удовольствие от вкуса мороженого и обращаться к приложению вновь.
Вы можете показать задачи и стиль вашего будущего проекта, используя шаблоны Canva:
- Используйте все доступные ресурсы
Определите конкурентов продукта и посмотрите, как они решают аналогичные задачи в дизайне. Обратитесь к успешному опыту коллег: просмотр портфолио других дизайнеров (например, на Behance) может подсказать вам идеи, которые вы сможете переработать, улучшить и адаптировать к текущей задаче. Удачные примеры дизайна и фотоконтент можно найти на Pinterest и Dribbble. Платформа siteInspire может быть полезна не только web-разработчикам — там можно найти примеры дизайна, вдохновляющие эстетикой и точностью в решении задач. Чем больше площадок вы охватите при подготовке к проекту, тем лучшим может стать результат.
- Подумайте о качествах бренда
Мудборд может включать в себя вещи, которые не имеют прямого отношения к продукту и проекту, но визуально представляют качества бренда или просто иллюстрируют определенные чувства и эстетику.
Дизайнер Vivek Venkatraman, составля мудборд для заказчика, взял за основу некоторые качества, с которыми бренд соотносил себя: тепло, лето, отдых на открытом воздухе. Он подобрал тематические фото: летний опен-эйр, банки с освежающими напитками, солнцезащитные очки. Эти фото не говорят о компании напрямую, но создают нужные ассоциации, говоря о ее ценностях, аудитории и стиле. Это дает отправную точку для работы дизайнера.
Мы попробовали передать ассоциации с условным брендом минеральной воды, используя шаблон Canva, и вот что у нас получилось:
- Выделите доминанту
Определите центральный объект или доминирующий цвет в палитре, к которому будете подбирать подходящие цветовые сочетания и образы.
LovelyConfetti предлагают дизайн-решения для оформления женских блогов. В этом мудборде четко обозначена доминанта — черный цвет. Он становится «точкой притяжения» для других цветов и текстур, отсылает к истокам моды, а образ Одри Хепберн передает винтажную атмосферу. Так из мудборда…:
…создается тематическое оформление «Audrey»:
Не перегружайте мудборд элементами. Попробуйте сконцентрироваться на центральном объекте и выстроить композицию вокруг него.
- Добавьте пояснения
Чтобы объяснить и улучшить визуальный посыл мудборда, добавьте короткие текстовые пояснения. Этим вы можете убить двух зайцев: прояснить значение выбранных образов с точки зрения будущей концепции и продемонстрировать шрифты, которые могут быть использованы в дизайне. Пояснения могут быть развернутыми или тезисными, как у Covet Group:
Мы составили мудборд для решения условной задачи — разработки каталога туров для туристического агентства, и добавили несколько пояснений к нему (все фото взяты из галереи бесплатных фото в Canva):
- Сделайте больше
Не стоит ограничиваться одной доминантой или стилем. Предоставьте выбор себе и заказчику — создайте несколько мудбордов. Дизайнер Jared Erickson представил 3 вариации мудборда в для решения задачи — разработать бренд-концепцию и логотип заказчика Brooklyn Creative:
- в первом использовал теплую цветовую палитру, исторические и современные фото Бруклинского моста;
- во втором представил ретро-образы и приглушенные цвета;
- в третьем сделал ставку на урбанизм и динамику современной жизни.
Эти мотивы он перенес в начертание вариантов лого:
В результате был утверждена концепция, которая объединила в себе идеи первого и второго мудборда:
Вы можете создавать несколько мудбордов, используя один и тот же шаблон, как это сделали мы:
- Повеселитесь!
Подойдите к задаче с легкостью и хорошим настроением и получите удовольствие от процесса. Некоторым дизайнерам настроиться на рабочую волну помогает «высмеивание» задачи: когда вы впустите в сознание самые безрассудные идеи и хорошенько над ними посмеетесь, в нем освободится место для рабочих идей.
Вы можете сделать подготовку мудбордов частью вашей повседневной жизни, даже не имея конкретной задачи в текущий момент: листать Pinterest, сохранять понравившиеся посты в закладки в Instagram, читать Telegram-каналы топовых креативных агентств и подписаться на публикации в профессиональных блогах. Вся эта информация попадет в копилку и выстрелит в нужный момент.
Второй урок на подходе )