Московский: Дизайн & Тимлид: заметки с тегом дизайн

Дизайн мобильных приложений. Летний интенсив в Британке

Sun, 21 Jun 2020 14:33:25 +0100

После обучения в Бюро Горбунова я хотел попасть на обучение в Британку. Это случилось на летнем интенсиве 2019. Расскажу про свой опыт и проект, который мы там делали.

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

В ходе обучение было весело, было сложно и было сжато. На что уходит месяц, нужно было сделать за 4 дня и применять новые знания, которые параллельно нам рассказывались.

На лекциях было много информации от разных спикеров.

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

Наша презентация не обошлась без юмора

Наш концепт Яндекс Почты

Один из слайдов из презентации

Мое мнение: на интенсив я пошел уже имея за плечами почти год работы в Яндексе. Там еще раз прошелся по знакомым темам и структурировал знания. Узнал, что-то новое, но многое уже знал. Плюс прокачал навык презентации. Новичкам советую. Ссылка на интенсивы

Как дизайнеру перестать думать статически

Sun, 21 Jun 2020 13:28:47 +0100

Когда я начинал свой путь в дизайне, главное что меня беспокоило — как сделать финальную картинку. О том, как будет эта страница вести себя в цепочке остальных — я не задумывался. За полгода обучения в школе Горбунова, таких задач не возникало: мы проектировали не многостраничные сервисы, а что-то простое, одностраничное.

Образно, как я думал над макетом

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

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

Мой наставник по стажировке дал мне совет, в духе «начни представлять как будет работать интерфейс, что будет в динамике». Полностью прочувствовал этот совет совсем недавно :-)

Теперь для меня интерфейс — это история, которая движется во времени. Я прокручиваю в голове идеальный путь пользователя, как покадровая анимация. Затем ищу затыки, редкие кейсы, которые могут произойти у пользователя.

Проектируется не страница, а история

Для меня следующий этап, это продумывание анимации и микровзаимодействия, которая помогает связать экраны между собой и приносит удовольствие от использования. Буду рад советам, что почитать или посмотреть на эту тему?

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

Дизайн счетчика баллов в репетиторе

Sat, 29 Feb 2020 23:06:25 +0100

Какое-то время назад я помогал сервису Яндекс Репетитор повысить вовлеченность учеников. Для этого команда предложила сделать счетчик баллов. В итоге появился блок с баллами, блок и раздел с достижениями ученика.

При выполнении задания счетчик растет, можно перейти в достижения и посмотреть свою статистику

При наведении на каждый из предметов можно увидеть статистику по предмету: сколько баллов за сегодня и вклад за неделю

При достижении определенных значений — выдается награда с анимацией

Вопросы для страницы при проектировании дизайна

Thu, 23 Jan 2020 09:07:20 +0100

— Постоянно забываю нарисовать какую-то фигню для разработчиков, а они меня потом достают ?
— Держи чек-лист!

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

Чек-лист для дизайнера перед сдачей макетов

Состояние выделения у всех элементов, на которые можно нажать: кнопок, ячеек таблицы, инпуты.
Пустые экраны: когда пользователь первый раз зайдет, когда у него ничего не будет, когда он все удалит, если нет аватарки.
Что будет показываться, когда у пользователя медленный интернет: скелетон, картинка мелким размером, которая при дозагрузке станет четкой.
Проверить текст на реальных данных. Что будет если текст не влезет, что если будет на других языках.
Состояния ошибок, уведомления о действиях, алерты, попапы, 404 ошибка и т. д.
Ну и само собой, если нарисовали веб-версию, не забываем про тачи и про ширину 320 px.
Подробно об этом рассказывали в этом видео.

Чек-лист для проверки решения

А еще я для себя составляю чек-лист для этапа проверки своего решения, у кого есть идеи пишите в комментарии

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

Нужны ли полоски внутри таблицы

Wed, 20 Nov 2019 14:54:12 +0100

Решил разобраться как лучше сделать с полосками или нет.

Сперва смотрю на сайте бюро: нашел статью про черезполосицу, они предлагают её убирать. А вот мнение Ильи Бирмана насчет линий. И у него же отличный пример таблицы без полосок:

http://biathlontime.com/2018-2019/cup/women/nations/

Нужно взглянуть на примеры других сервисов:

В моем случае решил выбрать 1 вариант:

Пример с работы: между строчек есть или нет разделительной линии (шапку замазал, чтобы ни кто не догадался)

Для себя нашел такие зависимости:

Если в таблице 2-3 значения цифр то можно обойтись и без полосок: смотрится вполне хорошо.
Когда много цифр и они находятся на непредсказуемом расстоянии друг от друга, по всей длине экрана — то полоски лучше использовать.
Черезполосицу просто так использовать не стоит, но в анализе финансовых показателей этот приём может обозначать рост и падение акций.
Если делать полоски, то делать их незаметными, серенькими.

Как оценивать UX дизайн бесплатно и без исследований

Sun, 03 Nov 2019 22:00:33 +0100

Предположим у нас есть 2 варианта пути пользователя. Как определить, что один из них лучше другого? В моем примере ниже — это очевидно: чем меньше экранов, тем лучше.

Два варианта сценария покупки

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

Метод GOMS

Более продвинутую методику я услышал от одного из спикеров на Media & Design Conference. Они так же считают количество действий пользователя, но еще переводят действия в секунды и оценивают финально сколько пользователь тратит времени на каждый экран. Самое интересное — расчеты времени пользователя.

K = 0,28 c — нажатие клавиши клавиатуры;
B = 0,2 с — клик мышью;
P = 1,1 с — среднее время нахождения любого объекта на сайте;
H = 0,4 с — перемещения руки с клавиатуры на мышь (или обратно);
M = 1,35 с — ментальная пауза (время на обдумывание следующего шага).

Почему то запись этого доклада пропала, но я для себя наскриншотил самое важное:

С помощью этого способа можно доказать удобство одного из вариантов, но этот метод имеет свои исключения: например огромную форму для заполнения лучше разбить на несколько экранов.

Как проводить UX исследования

Mon, 26 Aug 2019 10:22:13 +0100

Недавно я был на интенсиве в Британке. Необходимость проведения исследований над продуктом подчеркивал каждый лектор. И это правильно: наша модель мира, модель мира нашей команды может сильно отличаться от реальных пользователей. Материал интенсива и знания из опыта я попробую описать в этой статье.

Твой мир может сильно отличаться от мировоззрения других

Необходимо замерять показатели эффективности.

Когда я открыл магазин матрасов, было мало конкурентов. Покупатели находили пару сайтов, выбирали и шли ко мне. Покупатели были, прибыль была → магазин рос. Но все изменилось через пару лет. Когда конкурентов стало много → клиенты стали реже приходить. Как понять где причина, что стало меньше покупателей? Я стал измерять показатели: сколько людей заходят на сайт, сколько времени они тратят, сколько из них звонят, приходят в магазин и создают заказ.

Воронка продаж в моем представлении

Горькая правда: Даже 1 шаг, который людям придется сделать, чтобы воспользоваться вашим продуктом, может стоить вам бизнеса.

Пример про такси: таксисты 90% времени простаивали. В то время как клиенты искали их на остановках, звонили по телефону диспетчеру. Диспетчер искала водителей по рации. Водители соревновались у кого лучше рация и реакция. Когда появилось приложение для водителей, водители видели где клиент, а клиентам не нужно звонить диспетчерам. Все в выигрыше!

Так должен себя вести идеальный продукт: Чтобы воспользоваться вашим продуктом, люди вообще ничего не должны «делать». Это ваш бизнес должен незаметно интегрироваться в человеческую жизнь.

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

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

Я часто искал подтверждение своего решения

Исследования помогают:

— найти проблемы интерфейса;
— выявить и описать потребности пользователей;
— правильно сформулировать бизнес-требования;
— проверить эргономику решения.

Качественное или количественное исследование

Количественные — проверка решения на большом количестве респондентов. Например, сравнить два варианта дизайна и выбрать лучший. В этом помогает Яндекс Толока. Там много пользователей за копеечку сравнивают картинки. Для заказчиков — это возможность сравнить дизайн, опросить пользователей. Когда из 100 опрошенных, 70 выбирают вариант, который тебе казался хуже, это удивляет.

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

Виды качественных исследований:
— Интервью: узнаем боли и потребности
— Юзабилити-тестирование: замеряем удобство
— Карточная сортировка: говорим о структуре
— Наблюдение: изучаем контекст
— Опрос: узнаем мнение.
— Соц сети/звонки/поддержка: читаем обратную связь.

При проведении интервью следим, чтобы:

— у нас были открытые вопросы,
— мы молчим и слушаем, больше говорит респондент,
— не задаем вопросы с вариантами ответа,
— не поддакиваем пользователю, не говорим: «да нажимайте сюда...»
— не используем профессиональный лексикон,
— придерживаемся плана интервью, тратим не более 45 мин,
— исследовать опыт пользователя, без вопросов (а если бы... вы купили?),

Пользователи врут

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

Большая картинка

Большая часть материалов составлена на основе лекции Алины Ермаковой. А вот её курс.

Мой телеграмм канал
P.S: волшебные фразы при тестировании: «мы тестируем интерфейс, а не вас. Тут нет неправильных ответов или правильных», «А как вам кажется, что это?»,

С лекции «Другие миры» день 2 Эш Торп

Wed, 17 Jul 2019 21:26:45 +0100

Был на двух днях на Стрелке. Спикеры рассказывали про знаки в фильмах (на примере Контакт), раскодровки анимации Рик и Морти, а Эш Торп рассказал о том, как работает. Я решил законспектировать именно её. В конце ссылки на полное видео с лекций.

Как избавиться от творческих блоков

Работать сразу над 2-3 проектами, когда в тупике над одним проектом, переключается на второй.
Важно иногда отвлечься, делать перерывы.
Находиться в кругу братьев по оружию.
Избегать плохих привычек и ритуалов.
Довести до конца начатое.

Списки. Отчетность перед самим собой

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

Записывать все: что хочешь достичь, в чем заинтересован, что нужно сделать и т. д.
Избавляться от того, что требует ненужного внимания. (ухожу из компаний, где не интересно, не отвечаю на какие-то письма).
Расставлять приоритеты между делами, фокусироваться только на том, что нужно и что приносит удовольствие.
Расписать цели по порядку их выполнения.
Эш заводит будильники и контролирует время.
Доводить запланированные цели до конца.

Ежедневник на 6 дней. Обычно вечером каждый день составляет что хочет сделать на следующий день.

Эш постоянно читает.

Список книг, которые он рекомендует

Правила Эша

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

день 2

день 1

Воркшоп от Яндекса: интерфейс покупки криптовалюты

Sun, 01 Apr 2018 22:20:05 +0100

Задача: разработать интерфейс покупки криптовалюты.

Решение с анимацией:

Интерфейс покупки криптовалюты

Подробно:

Решение, которое я отправил в Яндекс на проверку

Результат

Приглашение на воркшоп

Верстка плаката про туризм

Thu, 12 Oct 2017 22:35:29 +0100

Я подписан на рассылку дизайнера Лёши Рева. Как-то в рассылке получаю задание сверстать плакат. Результат нужно отправить на почту и получу обратную связь.

Письмо с заданием

Я решил попрактиковаться. На верстку потратил примерно полчаса: быстренько нашел картинку с туристом, текст редактировал по ходу, подвигал там-сям и получился простенький плакат с приглашением:

Макет плаката про туризм

На следующий день получил обратную связь. Спасибо Лёше за его внимательное отношение к обучению:
https://monosnap.com/video/MAYrDXPWxOZvKGWhwMRkdOTLkKAwiC

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

Плакаты из телеграмма https://t.me/posterino

Мне говорили, чтобы так верстать нужно насмотренность и опыт. Буду рад наводкам, что почитать на эту тему.

Дизайн-выходные в Нижнем Новгороде

Thu, 05 Oct 2017 00:13:15 +0100

Самая спонтанная поездка: о событии я узнал в пятницу в 15 часов, а в 21 час уже садился на поезд. К сожаления, смог побывать только на первом дне, но узнал много нового. В статье коротко опишу выступления, а внизу будут материалы для просмотра и скачивания. Полезно для дизайнеров.

Как делать плохую рекламу: инструкция по неприменению

Антон Котовский на примере роликов показывал как плохо и как хорошо сделана реклама.
Роликов было много, но смог найти только три.

Реклама пельменей

Реклама курсов языка

Плохая реклама курсов языка

Частые ошибки в видео рекламе:

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

Немного опыта: как мы делаем сценарии и креативные концепции для сайтов

Что важно для создания сайта

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

Запись выступления:

Creativ-people-pro-sayt.mp3

Совмещение эффектности и эффективности: серия 2

Фото презентации Сергея

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

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

Понятие эффектности — способность производить впечатления.
Четыре типа эффектности:

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

функциональная — пример сервиса, который позволяет рисовать крутые иконки https://www.autodraw.com/
коммуникационная — то как продукт говорит с пользователями.

Мой пример банк Точка

Часть записи выступления:

Sergey-andronov.mp3

Материалы, которые выложили

Как согласовывать макеты

Основы менеджмента для дизайнеров

Презентации:
Михаил Губергриц: «Мятный Гусь, Имбирный Лось...»
Сергей Мосякин: «Сезон метафор»
Сергей Рассказов: «Шрифты без правил»

Лекция Людвига в Рязани: «Как я выхожу из тупиков»

Mon, 25 Sep 2017 21:19:01 +0100

Людвиг не учит, а делится опытом

Тупик 1: акушерство и больничная горячка.

Свою лекцию Людвиг начал с примера контринтуитивного мышления. Вена 1823-1847 гг. Если бы вы попали на стол к врачу, то с большой вероятностью могли умереть. 60% умирало, если требовалось вмешательство хирурга. Это было характерно для того времени, но именно в этом городе возникла интересная ситуация. Там была клиника, которая занималась акушерством, и два отделения. В одном из родительных отделений смертность была выше в 5 раз, чем во втором.

Люди стали искать ответ, почему умирают роженицы (автор называет такие решения слабым ходом):

бог дал — бог взял,
дурная слава: умирают, потому что знают, что все тут умирают,
в 1 отделении ходил священник, и думали, что умирают от страха перед ним,
в 2 отделении принимали роды женщины, и решили, что женщины не стесняются женщин, поэтому выживают.

Эти решения никак не помогали, пока не появился Игнац Зиммельвейс. Он начал изучать статистику. В какой-то момент у него умирает знакомый коллега с теми же симптомами, что и роженицы. И он предположил, что врачи могут заражать пациентов. В 1 отделении был доступ к моргу, и хирурги резали трупы, а кровь просто вытирали о фартук. И чем был замызганней фартук — тем круче был врач. Они не мыли руки, принимали роды и заражали пациенток.Он начал заставлять врачей мыть руки. Изобрел антисептик. И смертность упала в десятки раз.

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

Но 18 лет спустя получилось у другого врача, который научно обосновал знания микробов. Теория была принята, в итоге — «антисептик это хорошо, давайте мыть руки».

Этот пример показывает, насколько сильное сопротивление возникает, когда находится выход из тупика. Если из тупика можно было выйти просто так — люди вышли. А если они в нём находятся, то нужен очень странный дикий прорыв.

pro-vrachey.mp3

Тупик 2: прыжки в высоту.

Советский плакат о том, как прыгать в высоту. (Вначале изображен «классический способ», а ниже альтернативный новый способ)

Раньше все прыгали перекатом, то есть животом вперед.
Слабое решение: упираться, бороться за сантиметры, чтобы прыгнуть выше.
Появился чувак и попробовал прыгнуть иначе: спиной вперед. Его результат стал лучше, потому что легче перекидывать центр тяжести. Так он одержал победу в первой Олимпиаде.
СМИ: ха-ха-ха, спортсмен, прыгает как обезьяна и выиграл. Однако ведущие спортсмены перехватили этот стиль. И он постепенно вошёл в моду.

pro-prichki-spinoy.mp3

Возникает вопрос, где искать решения?
Из примера с ребенком и носком есть два способа: получить опыт из вне или открыть способ самому. Чтобы получить контринтуитивный прорыв — учитель не нужен. Просто делай бред:

primer-pro-nosok.mp3

Тупик 3. Тортик

Фильм сахар, после которого Людвиг решил сократить сладкое.

Людвиг выработал теорию «А чё, так можно было?». Тупик про тортик: приходишь в кафе, и предлагают тортик. На витрине тортики вертятся, они подсвечены и говорят тебе: «Дааа, съешь меня». Тут можно применить 2 стратегии и обе проигрышные:

«Нет, я не буду тортик». И тут ты понимаешь, что проиграл, потому что он вкусный.
«Да, я буду тортик». Ты кушаешь его, но чувствуешь себя ничтожеством, потому что сорвался.

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

primer-pro-tort.mp3

Итого

itogi-1-chasti.mp3

Общие ошибки мышления

У всех есть ошибки мышления. Хороший пример ФОА (фундаментальная ошибка атрибуции): когда какой-то чувак бьет автомат с водой, мы думаем что он «истеричка». А если ты попадешь в такую же ситуацию — то этого не замечаешь. Ты зависишь от ситуации, а все остальные так себя ведут, потому что «истерички».

primer-foa-taksi.mp3

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

pro-ekonomist-i-ballast.mp3

Людвиг перечислил психологические затыки, которые бывают.

Ошибки мышления: индивидуальные особенности

Дихотомическое мышление. «Если я не добьюсь успеха во всем, то я неудачник».

Катастрофизация. «Я так расстроюсь, что не смогу вообще ничего делать».

Обесценивание позитивного. «Действительно, мне удалось выполнить эту работу. Но это вовсе не означает, что я способный — мне просто повезло».

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

Навешивание ярлыков. «Я неудачник», «Он зануда»

Преувеличение и преуменьшение. «Средняя оценка говорит, что я неспособный. Оценка „отлично“ не говорит о том, что я умный».

Мысленный фильтр. «Один плохой результат по тесту (наряду с несколькими хорошими) свидетельствует о том, что я лентяй, который не смог как следует подготовиться».

Чтение мыслей. «Он думает, что я ничего не смыслю в этой работе».

Сверхгенерализация. «Поскольку я чувствовал себя не в своей тарелке на встрече, я не умею знакомиться с людьми».

Персонализация. «Мастер по ремонту нагрубил мне потому, что я сделал что-то не так».

Долженствование. «Ужасно, что я ошибся. Я должен во всем добиваться успеха».

Приемы решения затыков:

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

Тупик 4: рассеянность, несобранность, неудача.

Людвиг рассказал, что не может долго концентрироваться: «иду чистить зубы, вижу открытую стиралку, иду в комнату, чтобы взять майку и бросить в стирку, вижу в ноутбуке новое письмо, сажусь отвечать. И тут возникает вопрос: что делает зубная щетка у меня в руке?».

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

soveti-ne-rab.mp3

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

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

Полный список материалов собрал Александр Машков.

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

Fri, 08 Sep 2017 00:07:00 +0100

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

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

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

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

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

Восстановленный по фото плакат

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Fri, 11 Aug 2017 16:50:34 +0100

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Fri, 14 Jul 2017 22:00:48 +0100

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Sat, 01 Jul 2017 09:47:20 +0100

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Напоследок

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

Полезные ссылки для дизайнера

Thu, 15 Jun 2017 11:14:19 +0100

Дизайн в целом
Школа дизайна Яндекса
примеры страниц
паттерны мобильного дизайна

Бюро
О наращении окончаний числительных
О выборе полей
О вёрстке ссылок
Оформление копирайта по-русски
Совет о правиле внутреннего и внешнего
Правило якорных объектов
Приём «смешать комки»
Базовые элементы вёрстки
Заголовки
Иллюстрации
Подписи

Мобильные
32 отличия дизайна мобильного приложения под iOS и Android

Эффективность
Окружение, тело и мозг: опыт повышения продуктивности до 200 часов в месяц

Присылайте в телегу ссылки, к которым вы обращаетесь время от времени

Дизайн для магазина матрасов

Sun, 26 Mar 2017 18:39:13 +0100

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

Fri, 03 Mar 2017 23:18:24 +0100

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

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

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

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

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

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

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

Sat, 03 Dec 2016 21:53:13 +0100

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Видео

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

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

35

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

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

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

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