Самое отвратительное приветствие в вебе

Терпеть не могу подлиз и жопализов, а тут целый поп-ап такой:

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

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

Пожалуйста, не делайте так никогда.

6 июля   бесит   веб   дизайн   интерфейсы

Что такое антидизайн? — часть первая

Часть первая
Часть вторая
Часть третья

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

Откуда берется плохой дизайн?

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

Раньше я не замечал того, что творится с нашими городами. С приходом в дизайн мне стало физически тошно смотреть на объемы дерьма, которое слоилось из каждой вывески или рекламы.
В заметке о проклятье я писал:

Я больше не могу спокойно ехать в автобусе и думать о таких вещах, как личная жизнь, учеба или работа. Еду и смотрю на дизайн. [...] Смотрю на людей, что взаимодействуют в условиях, заложниками которых оказались.

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

После заметки о самой тупой странице Яндекса я начал думать о плохих решениях — почему они возникают? Это же просто бессмысленно: создавать дерьмо в таком количестве.

Оказывается страница нужна для детского поиска — потом как-нибудь расскажу

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

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

Хуевый дизайн работает

Ничего с этим не поделать — он работает и все тут. Наши люди привыкли к плохой верстке и воспринимают ее как «свою». Модный, новый, инновационный, странный и прочий дизайн не работает с ними. Они его не принимают и не понимают. Молодая гвардия шарит, люди из бывшего совка — нет. Разумеется, я говорю не обо всех. Постепенно люди прошариваются и это прекрасно. Думаю, объяснять не нужно когда закончиться эра откровенного говна и безвкусия.

Умышленное создание «своего» говеного дизайна — результат антидизайна. Ну и конечно на это влияет вкус, воспитание и скилл. Сейчас мы говорим о говне ради высшей цели. Мы к этому вернемся чуть позже, давайте сначала разберемся с дизайном.

Подписывайтесь на канал в телеграме — там много говно-дизайна

Займемся дизайном?

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

Возьмем эти две работы:

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

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

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

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

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

И это должен понимать любой дизайнер в самом начале работы!

Итак, ребята, хотели заняться дизайном? Вот он, но теоретический. Мы создали условия, окунулись в них, сформулировали задачу. Если мы тру — задачу нужно щелкнуть.

У нас есть несколько путей понимания задачи и ее решения. Разные дизайнеры в зависимости от своего скилла и опыта будут делать следующие вещи:

  1. Ужасный дизайнер сверстает еще одно говно-объявление.
  2. Плохой дизайнер сверстает опрятное объявление (уборка в макете).
  3. Дизайнер средней руки опишет в объявлении способы спастись из маршрутки.
  4. Хороший дизайнер разработает окно, из которого без труда выберется любой человек.
    Он продумает возможные сценарии, учтет пути людей, разработает систему пожаротушения и сверстает понятное объявление
  5. Охуенный дизайнер придумает новые способы предотвратить пожар без выкидывания из маршрутки.

Итак, какой мы дизайнер сегодня? Плохой, средний или охуенный? Примерно так работают дизайнеры во всех сферах — в разных зависимостях погружаются в задачу. Ах, да, совсем забыл:

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

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

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

Вот что отличает плохого дизайнера от хорошего. Плохой дизайнер вообще не понимает, что такое погружение в задачу — он как печатная машинка: делает, что говорят. Хороший дизайнер смотрит на задачу, формулирует, переформулирует, узнает тайны и подробности. Он погружается. Он докапывается до проблемы и решает ее.

Продолжение следует

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

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

2 июля   антидизайн   дизайн   теория

Очень плохая реклама в мобильном Яндекс.Дзене

Подписывайтесь на канал в Дзене, иногда там выходит эксклюзивчик

С недавних пор я подключил монетизацию в своем канале Дзена. Реклама меня никогда сильно не напрягала, особенно если она адекватная. Однако в мобильном Дзене она ведет себя очень плохо. Берем обычную заметку:

Плохая реклама Яндекса

Обратите внимание на структуру поста:

  1. Логотип и название канала
  2. Заголовок заметки
  3. Данные о заметке
  4. Первый абзац (текст связан с изображением)
  5. Изображение калькулятор Гугла
  6. Изображение калькулятора Яндекса
  7. Продолжение заметки...

Это точно тот порядок, который был задуман мной. Этот порядок раскрывает смысл — абзац не будет работать без картинок. Что делает Яндекс с моей заметкой на мобильном телефоне? Открываем тот же пост с телефона:

Плохая реклама Яндекса

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

Яндекс, почему вы так бессовестно используете мой текст? Нельзя вытаскивать куски из моего материала и вставлять вместо них рекламу — это моветон. Нельзя использовать первые картинки в качестве заглавных изображений. Ладно, если бы вы дублировали, но вы поменяли местами рекламу и изображение. В чем тогда смысл ведения блога, если замысел автора теряется из-за рекламы?

Очень часто в своих заметках я использую следующую модель повествования:

Плохая реклама Яндекс.Дзена

Такой вид публикаций материала самый популярный в интернете. Далеко ходить не надо, спросите Артемия Лебедева, Сергея Долю или Илью Варламова.

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

А как же пользователи? Автор в своей заметке хотел сказать одно, а из-за рекламы получилось другое. Так делать неправильно. Уверен, что в вашей команде не хватает блогера.

Предлагаю следующие решения проблем

1. Никогда не трогать материалы авторов
Не передвигать и не менять местами контент, не удалять и не вносить никаких правок без ведома автора.
Я понимаю, что рекламодателям не понравится такой мув, но иначе никак — читатели и авторы важнее. Или я неправ?

2. Выделять сильнее рекламу

3. Установить галочку (чекбокс) во время добавления любого изображения:

  • Если автор захочет использовать свое изображения в качестве заглавного — пусть поставит галочку.
  • Разумеется по умолчанию чекбокс должен быть выключен. Мы же не хотим ввести автора в заблуждение?
  • Кнопочка-вопросик объяснит автору в чем прикол.
  • И еще кое-что: поправьте верстку этого всплывающего окна, а то смотреть страшно.

Этим постом я не хочу спровоцировать войну с Яндексом, не хочу обидеть сервис или кого-то еще. Напротив, я хочу сделать его лучше. Яндекс — самая большая, технологичная компания в России. Я рад, что появился Дзен и верю, что Дзен — новый ЖЖ. Уверен, что отдел продуктовых дизайнеров сможет придумать способ сделать рекламу в Дзене умнее и лучше. Я описал проблемы и предложил базовые решения.

Спасибо за внимание.

19 июня   дзен   дизайн   интерфейсы   яндекс

Новый логотип и личная айдентика для блога

Сделал для своего блога новый логотип и шикарный стиль. Логотип решил не трогать — лишь обновить. Цвет, формы и взаимодействие стилей — мое общее настроение. Эта работа буквально кричит о том, что у меня внутри. Хаос, паника, ужас, сила, дерзость, пиздец — основные темы.

Стиль нащупал во время работы с иллюстрациями. Развил и расширил во время разработки логотипа.

Смотрите проект на сайте

29 мая   Блог   дизайн   личная айдентика

Самая тупая страница Яндекса

Я заскринил самую глупую страницу Яндекса и начал думать.

Блог Вениамина Векка

Такой результат абсурден — очевидно, что это пустой поисковый запрос, зачем об этом писать? Зачем для этого страница и какой-либо результат? Почему бы не показывать все на главной странице? Почему бы не выводить сообщение о пустом поисковом запросе без перехода?

Не важно пустое поле или нет — гугл-кнопка одного вида. Ответной реакции на нажатие нет

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

Не важно пустое поле или нет — гугл-кнопка одного вида. Ответной реакции на нажатие нет

Если бы я имел какое-то отношение к дизайну Яндекса, то отключал бы кнопку:

Блог Вениамина Векка

Включал бы при заполнении поля:

Блог Вениамина Векка

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

Однако я не могу отделаться от мысли, что дизайнеры Яндекса оставили страницу неслучайно. Мозгов у меня не хватает, чтобы придумать причину. Есть идеи? Зачем нужна эта страница?

25 мая   дизайн   интерфейсы   яндекс

Клиентские проекты помогают мне расти

В этом посте я использую абстрактный термин «понимание». На моем языке — это часть эмпатии, которая помогает разобраться с проблемой. «Понимание» прокачивается с опытом и возрастом.

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

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

В начале 2015 года я начал с личных проектов — выдуманных. Я совсем не зарабатывал и очень медленно развивался. Дело в том, что я не решал никаких задач. Я пытался овладеть инструментами и придумывал всякое, чтобы хоть как-то окунуться в профессию. Только с появлением первых клиентских проектов я почувствовал что значит быть дизайнером. Это действительно сложная работа, в первую очередь связанная с головой.

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

Личные проекты, дипломы и курсы никогда не научат пониманию. Они чуть-чуть помогут вникнуть в тему и набить руку. Клиентские проекты серьёзно влияют на собственное видение. Благодаря им открываются удивительные знания в области бизнеса, переговоров и дизайна. Разумеется, сходу я не смогу их перечислить. Мне трудно это передать словами или текстом — в моей голове это намного красочней и понятней. Попробую обобщить:

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

Впервые я это понял, работая над сайтом для одной небольшой компании. Мы тогда с клиентом спорили на тему того, зачем нужны хлебные крошки. Я был против крошек, а ему казалось, что они помогают в СЕО. Тогда я поставил перед собой задачу — «избавиться от крошек с помощью навигации сайта». Мне удалось показать клиенту, что навигация отлично работает, а костыли в виде крошек не нужны. Мне помог небольшой опыт в СЕО, разработке и верстке. После сайт превратили в лютое говно, но опыт остался — я научился работать с возражением, решил проблему и победил плохое решение. Этот опыт мне пригодится в дальнейшей работе.

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

Опыт работает очень странно и неожиданно. Вот я впервые узнаю о проекте, приезжаю на встречу. Выслушиваю задачу, или кучу инфы от клиента. Задачи чаще всего размыты, нужно их сформулировать. Во время общения с клиентом я ловлю какие-то флешбеки с предыдущих кейсов. Я вспоминаю решения, которые делал ранее, и моментально их выдаю. Клиент их принимает, обдумывает и привязывает к своему бизнесу. Спустя время мы раскапываем задачу, определяемся с направлением работы и временем. Я беру пару дней на «понимание» и стараюсь записывать все, что происходит в моей голове относительно этого кейса. Затем проект заканчивается и помимо всех радостей жизни, у меня остаются маленькие дизайн-фишешчки проекта. Эти фишечки — самое важное в проекте. Именно они приходят в голову в виде флешбека. Больше проектов — больше фишечек. Наверно, это так работает.

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

Участвуя в клиентских проектах я прокачивал и другие области. Я понял, что умение красиво рисовать, прекрасно верстать и разбираться в шрифтах — лишь отвертки и молоточки. Главный инструмент — голова. Никакие курсы по фотошопу и скечу не сделают из меня «того самого» дизайнера. Только реальные клиентские проекты, опыт, эмпатия, понимание задач и усердная работа. Конечно, инструменты очень важны, но ими может овладеть любой балбес. А вот научиться вникать в бизнес, разбираться с проблемами и искренне помогать — сможет не каждый. И я счастлив осознавать, что у меня начинает получатся. Пусть даже и чуть-чуть.

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

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

14 апреля   дизайн   задачи и решения

Не отдаляйте макет, вы же не художник

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

Художникам так делать можно, веб-дизайнером — нельзя. Нельзя оценивать дизайн не в реальных условиях. Отдаленный макет — нереальные условия. Как часто вы изменяете масштаб сайта на 40-50%?

В отдаленном макете плывет все:

  1. Текст становится неразборчивым.
  2. Изображения выглядят слишком мелкими.
  3. Воздуха подозрительно много.
  4. Отступов подозрительно мало.
    ...

После отдаленного макета хочется все увеличить. Чтобы не сбивать себя с толку работаете в 100% масштабе. Вы же не картины рисуете, что там оценивать? Цветовую гамму?

10 апреля   дизайн
Ранее Ctrl + ↓