10 заметок с тегом

дизайн

Как улучшить дизайн предвыборного плаката

Дизайн предвыборных плакатов однообразен. Это я заметил, когда поехал отдыхать в соседний город: мелькали одни и те же рекламные щиты. Может у кандидатов мало времени — не до дизайна. А может быть, то, что опишу — делают только профессиональные рекламные агентства. Я не хочу оскорбить депутатов, цель статьи показать, как можно сделать лучше. 

Пока ехал, встретил 3 плаката: 

Плакаты депутатов в Рязани

Только плакат не убедит человека проголосовать за него. Его главная цель — напомнить человеку о депутате. В идеале, человек захочет узнать о кандидате больше: посмотреть сайт, программу или ютуб. Поэтому нужен комплексный подход. Не пытайтесь в плакат впихнуть всё подряд. 

Давайте посмотрим, что в этом плакате не так:

Восстановленный по фото плакат
  1. Фон не несет полезную информацию и ухудшает считывание на большом расстоянии. 
  2. Нет управления вниманием: не понятно, что тут главное и второстепенное.  
  3. Текст набран прописными буквами. 
  4. Имя сливается с фоном. Особенно на большом расстоянии. 
  5. Логотип в 3D.

Очистим фон и уберём лишнее:

Считывается лучше, но не вызывает интерес.

Рассказываем историю через фото

Над плакатом работают комплексно: 

продумать позиционирование → написать лозунг → сверстать черновик → придумать как проиллюстрировать позиционирование → сфотографировать → протестировать → тиражировать. 

Этот вариант стоит дороже, но отдача выше. 

Фотография — самый сильный элемент на плакате. Она бывает «для галочки» или интересной: фото на паспорте скучное, а вот удачный кадр с отдыха — радует глаз. Продумайте детали, чтобы рассказать историю через фото:

Депутат в военной форме с медалями, вызывает больше доверия, чем тот же человек в пиджаке. 
В плакате Сталина художник продумал детали: человек в форме работает для Родины (источник getimg.germany.ru)

Проделаем подобное. В учебных целях взял фото с сайта chita.ru, где депутат общается с рабочим. Удалим лишние детали с фото, расставим лозунг и акценты:

Такой плакат вызывает больше интереса, чем с белым фоном.

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

8 сентября   верстка   депутаты   дизайн   как лучше   как надо

Учебные проекты в бюро Горбунова

За вторую ступень Школы дизайнеров бюро Горбунова сделал огромное количество сайтов, но самое главное — быстро. На каждую работу у нас было 4 дня, потом критика и ещё 4 дня на доработку. И за эти 4 дня нужно успевать работать, тратить время на семью и отдых.

Одноэкранный сайт о себе

За 4 дня нужно было успеть написать текст о себе и спроектировать страницу. Правильно расставить якорные объекты и подчеркнуть выразительность автора.

Самое важное в работе — это фото. Но перефоткаться я не успел.

Информационный текст для сайта

Написать текст на заданную тему. Ну и раз мы дизайнеры — сверстать текст красиво и подобрать картинки. В бюро очень правильный подход к тексту — он не может быть без картинок. Цель автора рассказать историю, в том числе и через картинки.

Максим высоко оценил мою работу. Но сильно снижал за шаблонные картинки кофе и не жизненные картинки.

Вёрстка сложного документа

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

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

Проектирование сайта

Пожалуй, это был самый интересное для меня задание. Для себя я сделал 3 интернет-магазина и мне было интересно узнать мнение эксперта к моему подходу. Спасибо Илье Бирману за советы.

В странице всё должно быть направлено на продажи товара. Но выставить товар мало — нужно о нем рассказывать.

Вёрстка многоэтажной веб-страницы

Текст из 2-го задания нужно сверстать красиво. Задание мне с трудом даётся. Почему тут «тяжело», «страница перевесила» — я понимал с трудом. Под конец второй недели понимание стало по чуть-чуть приходить.

Нужно все правильно сбалансировать и вызвать эмоции.

Вопросы, замечания, предложения — пишите на почту sxep@yandex.ru или в телеграмм @geksin.

11 августа   бюро Горбунова   дизайн   как работаю   обо мне

Проект «Септики»

Полезное действие: показать какие бывают септики, как они работают, сколько стоят и предложить оставить заявку.
ЦА: владельцы частных домов, «дачники». Чаще всего мужчины 30-50 лет.

Первый экран сразу все рассказывает про септики

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

Скриншот первого и второго экрана

Самый кайф в анимации:

Посмотрел на анимацию и понял принцип работы

Приятная деталь для широких мониторов:

Крот в углу монитора вылез посмотреть

Важная информация на 1-м месте

Дизайнеры с фриланса прячут текст, таблицы. А для бизнеса важно показывать цифры, описания, названия моделей и т. д. Поэтому у нас картинка, описание и понятная таблица:

Информация о каждом септике и полная информация по ссылке

Культурное предложение спросить совета у профессионала, без крика, красной кнопки «купить» и счетчика.

Форма сбора контактов и опубликованный договор с важными пунктами

Над проектом работали:
Дизайн, проектирование и написание текстов: Дмитрий Московский, Илья Трунин.
Программирование: Андрей Тиньков.
Благодарность за активное участие и терпение Михаилу Екишкину.
Для связи: sxep@ya.ru

15 июля   дизайн   проекты

Обучение в школе стажеров 1 ступень

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

Сертификат по окончанию

Как меня учили «дизайну»

До бюро я проходил распиаренный вебинар для дизайнеров. По их мнению дизайнер только рисует картинки. При проектировании страниц их подход был что-то вроде «крадите расположение элементов страницы у конкурентов». Текст даст заказчик, а сейчас можно вставить стандартный набор букв. И всё в таком духе.

Скриншот презентации школы «дизайна»

Другой подход у школы

По мнению бюро, дизайнер — «эталон квалификации, самостоятельности и порядочности. За ним идёт охота работодателей, потому что растить свои кадры никто не хочет и не умеет, а во всех прочих учебных заведениях учат неизвестно чему».
Меня учили разбираться в личном планировании, организации изменений на фирме клиента, написанию текстов в информационном стиле, правильном иллюстрировании текста, вопросах авторских прав, договорах и юридических аспектах, умению вести переговоры, пониманию как выруливать из сложных ситуаций. И только 2 из 6 дисциплин посвящены непосредственно дизайну: типографика и верстка, интерфейс и информация.

Дисциплины школы

Тестирование и дедлайн.

Каждую неделю нас ждало тестирование по разным предметам + задание (написать текст или сделать форму заказа). А вот тесты больше пугали, чем задания: в тестах могло быть 4 варианта ответа и из них может быть 4 правильных — не сообщается сколько в вопросе правильных ответов. Чтобы лучше решать, тесты я их распечатывал, решал в начале недели, один день отдыхал и перерешивал снова.

Однажды у меня получилось ответить на все вопросы правильно.

Дедлайн был в пятницу в 23:59. Это приучило работать и соблюдать дедлайн до конца недели. Один раз я не успел и заработал штраф. Под конец научился сдавать тесты и задание немного с запасом.

Курсовая работа и итоги

Самое веселое, что курсовую работу я делал в самолете, в хостеле, в автобусе, в кафе и ни разу не дома в спокойной обстановке. Курсач и поездка в Европу у меня совпали. За курсовую работу очень внимательный к мелочам Илья Бирман поставил мне 4 балла за логику, идею и эстетику. Честно говоря ожидал более низких оценок.

Курсовая: редизайн мебельного сайта

С 11 места я поднялся до 5-го из 53 студентов:

Скриншот рейтинга

Если бы полученные знания можно было сравнить с мышцами, то было бы как-то так:

Источник: 24warez.ru

Напоследок

  1. В школе ответственность на том, кто учится. Не понимаешь — твои проблемы. Обратной связи почти нет: были 2-3 вебинара и то по инициативе преподавателей, работы каждого студента не разбираются. Знания приходится выцеживать. Это сложно для тех, кто к этому не привык.
  2. Если дать этот материал без тестов, я бы ничего не запомнил. Самое глубокое погружение в тему было именно в моменты, когда я искал ответы на вопросы.
  3. Дизайнер — это очень-очень широкое понятие. Школа учит мыслить не вокруг оформительства, а вокруг подхода. Если раньше я думал, как красиво оформить форму заказа, то сейчас я думаю как убрать форму заказа, чтобы чаще заказывали.

Грубые ошибки в дизайне сайтов

Уже 3 недели учусь в школе стажеров Бюро Горбунова. За это время узнал про правило внутреннего и внешнего, теории близости, какие базовые элементы верстки есть и всё. Но самое главное: я стал видеть это в своих и чужих работах.

Правки по реальному проекту

Красным отметил дизайнерские замечания, в синей рамки — смысловые.

Сайт, предлагающий услуги по пескоструйке

В самом дизайне ещё есть много замечаний. Я отметил самые явные. Что-то еще смущает, пишите в комментарии.

P.S: Хотите получить комментарий по своей работе? Пишите.

2017   дизайн   комментарии

Проект ai-кухни

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

Особенности: ай-кухни стараются делать хорошие кухни на долгий срок. Они используют качественное ЛДСП, внутри оно только белого цвета. Фурнитура немецкая, ручки на выбор и тоже качественные. Отверстия просверлены с умом, ничего не скрипит. При желании фасады можно снять и купить на их место новые. Замена очень простая. В общем они стараются делать хорошие кухни. Однако, стоимость хорошей кухни выше, чем кухни «из гаража». Поэтому главная задача у продавца — показать качество товара при приходе в магазин или при общении по телефону.

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

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

Прототип сайта

Решаем сфотографировать магазин и показать его на 1-м экране.

Количество фотографий

Собираем панорамной фото для 1 экрана. Есть 2 варианта:

Панорамные фото

Работаем с текстом: приводим штампованный текст к более человеческому:

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

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

Показываем клиенту.

Акцентные места для согласования

Итоговый сайт

Видео

Маркетинговые показатели

Сайт должен приносить клиентов, поэтому мы считали обращения. К сожалению, точно отследить откуда человек пришел в магазин так и не получилось. Люди говорили, что с сайта, но с нового или старого никто не говорил. Поэтому сколько человек с сайта в итоге купили — неизвестно.

35

обращений
за месяц

За июль 2017 было 35 обращений: 18 из которых заполнили форму на сайте, остальные позвонили.
При этом количество переходов на сайт 1139. Средняя цена клика 21,75 р.

Cкриншоты почты и директа

Адрес сайта: http://ай-кухни.рф
Проект выполнили: Московский Дмитрий и Трунин Илья
Программист: Андрей Тиньков

Книга сто советов дизайнеру

Обложка

Важные цитаты из книги фотками

Часть первая

Самые основные мысли:

Предпочтительно округлые формы, чем острые.
Если люди — то симметричные
Для привлечения внимания в периферийную область разместите изображения вызывающее опасность
Упрощаем дизайн ближе к краям
Кроме взгляда нужно, что бы человек изображал удивление для совершения действия
Фотографии близкие к теме и актуальные помогают убедить человека
Существительные больше побуждают к действию, чем глаголы
Омофоны предопределяют поведение

Часть вторая

Самые основные мысли:

Люди читают 60% инфы, точнее просматривают.
Истории сильнее активизируют мозг, особенно если история ассоциируется с человеком
Вступление — Завязка — Кульминация — Поворот — Развязка
Что бы вызвать эмоцию — покажите картинку человека с этой эмоцией
Ограничения способствуют творчеству (заданные цвета, ограниченный размер, определенная форма, набор проектирования, строгие временные рамки)
Оплата картой менее болезней, чем наличкой.
Самый дорогой товар сверху
Меньше альтернатив = хорошо

2016   дизайн   книги

Почему лучше подавать информацию через историю?

В книге «Сто советов дизайнеру» нашел интересное исследование, в котором через МРТ анализировался мозг людей получающих информацию в чистом виде или через историю. В первом случае активировались участки мозга, отвечающие за анализ слов (информация диктовалась). А во втором, так же подключались участки мозга, отвечающие за личный опыт и переживания. Рассказанная история запоминалась лучше, чем сухая выжимка фактов.

То же работает и в презентации дизайна: если мы приносим конечный продукт без пояснений, без историй и умозаключений, как мы к этому пришли, то он вызывает недоверие. Вот история логотипа одного из клиентов.

Конечная вариант логотипа

Логотип одного из наших клиентов

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

Презентация логотипа клиенту через историю

Анализируем, что есть

Варианты логотипов, которые прислал клиент
Ассоциации и варианты логотипов конкурентов

Ассоциации дороги: темный цвет, белая или желтая разметка.
Начинаем поиск идеи...

Две полосы смотрятся интересно, желтый ― подходящий по тематике акцент.
Прорабатываем игру слов.

«Иконки с дорогой неплохие, но название сложное»

Задача ― вызвать ассоциации с укладкой асфальта, и иметь возможность масштабировать услуги в другие ниши

Берем название ДелоМир и упрощаем логотип, соединяем всё в одном элементе.

Конечная версия логотипа

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

Логотип на визитках

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

2016   дизайн   мысли