Как создать худший сайт 2020 года: 8 вредных советов веб-дизайнеру

Осторожно, сарказм! Сайт, созданный по этим советам, вряд ли будет претендовать на звание «сайта года» по версии CSS, Awwwards или FWA — но это и не нужно, верно?

Авторы собрали 8 самых сочных решений веб-дизайнеров, которые способны испортить любой проект. Вместе они могут сделать 2020 год ещё хуже, но взамен потребуют так много времени и сил, что шансов на воплощение у такого сайта почти нет. Хотя, как говорится, дорогу осилит идущий.

Дизайн

1. Забудь о визуальном весе и иерархии цвета.

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

2. Поработай над самым абсурдным интерфейсом.

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

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

4. Расскажи на сайте о том, как прошёл твой день.

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

5. Думай, как разработчик.

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

6. Модальных окон много не бывает.

Обязательно спрячь все важные элементы под модальным и всплывающими окнами. Например, “Политика файлов Cookies” идеально скроет главную СТА-кнопку, а чат-бот закроет собой часть навигации.

7. Придумай квест с поиском контактной формы.

Почему бы не разнообразить рутинный процесс заполнения скучных форм? Все любят интерактивы, поэтому не поленись запрятать форму быстрого ответа как можно дальше. Пусть пользователю придётся пройти через десяток мемов из 2010-х, расшифровать календарь майя и встретиться с Морфеусом. За референс можешь взять сайт User Inyerface — здесь и обычную регистрацию сумели превратить в незабываемую игру.

8. Не трать время на тестирование и оптимизацию.

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

Источник: https://vc.ru/design/161945-kak-sozdat-hudshiy-sayt-2020-goda-8-vrednyh-sovetov-veb-dizayneru

​​С наступающим Новым годом! 

Пусть вместе с 2021 к нам непременно заглянет вдохновение, интересные проекты, новые идеи.

И заглядывайте в гости

• 👨 Дизайн-Телега  
• 💣 PSD | Дизайн-пространство  
• 💼 Дизайн биржа 
• 🤖 Диджитал работа  
• 🏞 Behancer 
• 📝 Дизайн-переводчик 
• 🏆 Design Awards 
• 📓 Magazine Design 
• 🎁 Package Design

UX от А до Я — Ошибки: 14 советов, как справиться с неизбежными ошибками

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

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

Профилактика лучше, чем лечение

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

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

2. Отображение состояния системы
Одна из эвристик юзабилити Neilsen – обеспечить видимость состояния системы. Удобный способ добиться этого с помощью Rich Visual Modeless Feedback (RMVP – богатый визуальный немодальный фидбек) [5]. Богатый с точки зрения предоставления подробного отчета о том, что происходит. Немодальный в отношении того, что пользователю не требуется взаимодействовать с продуктом для получения упомянутого визуального фидбека.

3. Берите за основу знакомые паттерны и компоненты
Использование стереотипных UX-компонентов и иконок, знакомых пользователям, повышает предсказуемость правильной функциональности.

4. Используйте аффордансы
Аффордансы – это характеристики объекта, которые подсказывают, как с ним можно взаимодействовать. Первоначально эта концепция применялась к физическим объектам: классическая дверная ручка «позволяет» пользователю тянуть, а ручка в виде пластины «позволяет» толкать. Этот же принцип применим и к цифровым продуктам.

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

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

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

8. Устраните двусмысленность
Приложение Trainline ловко заставляет пользователя указывать именно то, что нужно. Прежде всего, оно заставляет пользователя точно указать детали поездки, например, местоположение и время.

9. Тестируйте, тестируйте, тестируйте
Лучшая форма предотвращения ошибок– это протестировать дизайн.

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

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

12. Проектируйте хорошие сообщения об ошибках
Несмотря на все шаги, описанные выше, все же может возникнуть необходимость добавить сообщения об ошибках. Это само по себе может стать темой для отдельной статьи! Но есть несколько правил высокого уровня, которым нужно следовать.

Источник

Тренды дизайна для брендов на 2021 год

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

Вот какими будут основные тенденции в дизайне бренда этого года:

— Приглушенные цвета
— Минимализм
— Асимметрия
— Визуализация данных
— Плоские иконки и иллюстрации
— Простые и классические шрифты
— Моушн лого
— Перекрывающиеся дизайны
— Геометрические фигуры
— Темный режим
— Доступный дизайн
— Использование слайдов в соц. сетях
— Текстовые видео
— Естественный дизайн
— Аутентичность

В статье о каждой из этих тенденций в дизайне более подробно.

Читать статью: https://design-glory.com/6563/trendy-dizajna-dlya-brendov-na-2021-god

Актуальный лого-2021: десять трендов

1. Минимализм
Казалось, что упрощать логотип Intel больше некуда? Но дизайнеры решили убрать окружавший надпись эллипс и укрупнить шрифт. Этот пример показывает, что минимализм не собирается сдавать позиции. В 2021 году лучше избавиться от лишней графики и других украшений. У такого приема есть бонус: изображение легче адаптировать к цифровым форматам, например, превратить в иконку мобильного приложения или разместить на онлайн-баннере.

2. Необычные шрифты
Отличный способ выделить текстовый логотип. Этот прием особенно подойдет творческим проектам: берите пример с Deep Purple, Swoon Mixers или Tweag. Оригинальные завитки букв, готический шрифт или пиксельное начертание — выбирайте любую типографику, которая передаст характер бизнеса. Но не забывайте: креатив лучше контролировать, чтобы сохранить читаемость надписи.

3. Градиент
Переходы оттенков все так же актуальны, но с некоторыми оговорками. Они становятся более плавными и незаметными, чтобы сделать эмблему живой и объемной. Обратите внимание, как с этой задачей справились Messenger, Avon или Autism Speaks. Еще один вариант — добавить контрастный монохромный цвет, как True Car. Не бойтесь экспериментировать, но помните, что градиент сложно передать при печати, особенно на черно-белых документах.

4. Исчезающие надписи
Этот тренд практически не ограничивает фантазию. Разорвите слово посередине, «забудьте» дописать хвосты букв, уберите перекладину в «А», как сделали Scholar, Sartorius или Sailor. Недосказанность обращает внимание на надпись и заставляет всмотреться внимательнее. Главное — чтобы, несмотря на разрывы, лого оставался разборчивым.

5. Нагромождение элементов
Тренд, который позволяет создать по-настоящему уникальную эмблему, ведь приемы наслоения не ограничены. Дублируйте графику, как Skyeng, попробуйте раздвоить элемент, как GoDaddy, или наложить друг на друга разные фигуры, как Spot. Используйте разные цвета, формы, размеры — и получите нестандартную эмблему, которая точно не останется незамеченной.

6. Отрицательное пространство
Этот прием сделает лого интеллектуальным и уникальным: заложит в него двойной смысл, который привлечет внимание к изображению. Подумайте, как использовать пустое пространство между символами. К примеру, WST изящно вписала человека с бильярдным кием между буквами «S» и «T», а Pollination «закольцевала» надпись, превратив круги в буквы «О».

7. Очень тонкие линии
Еще одна разновидность минимализма: ультратонкие линии, напоминающие карандашный рисунок. Такой логотип выглядит стильно, лаконично и остается разборчивым и на билборде, и на экране мобильного. Чтобы придать эмблеме оригинальности, слегка разорвите буквы, как The Practice, или добавьте немного геометрии, как Yema или Una Europa

8. Иллюзия хаоса
В 2021-м игра против правил становится еще смелее. Посмотрите, сколько приемов использовали CETT, ALSO или Savannah Philharmonic. Тут и хаотичный разброс букв, и их зеркальное расположение, и игра с цветами и формами. Проявите креатив по максимуму, чтобы показать индивидуальность бренда и вызвать эмоции у потенциальных клиентов. Только учтите, что эмблема должна оставаться легко читаемой.

9. Гармония
Этот тренд словно уравновешивает все сумасшедшие тенденции в дизайне, предлагая создать сдержанный и элегантный лого. Добавьте симметрию в надписях или рисунках, как Autoaibe, Denver Art Museum или Onward. А чтобы изображение не выглядело скучно, используйте необычную типографику или цветовые решения. Такая эмблема останется узнаваемой и при печати, и на экранах компьютеров.

10. Монограммы
К классическому приему добавляются актуальные тенденции. Dolby превратил первую букву в геометрическую фигуру и дублировал ее, Conservative использовал отрицательное пространство, а Gmail нашел новое цветовое решение. Все это — эффективные способы разнообразить обычную монограмму и сделать лого актуальнее.

Источник

10 мобильных UX трендов на 2021 год

1. Рост популярности суперприложений
2. Видео взаимодействия
3. 3D графика функционального назначения.
4. Борьба с фейками и дезинформацией
5. Продвинутый голосовой помощник
6. Фокус на оптимизации кроссплатформенных приложений
7. Полезная визуализация данных
8. Изящные неоморфные детали
9. Новое поколение приложений дополненной реальности
10. Безопасность и конфиденциальность данных

Читать статью: https://ux.pub/10-mobilnyh-ux-trendov-na-2021-god/

​​Надоело мониторить сотни ресурсов в поисках годных мокапов и шрифтов?📝

Сегодня открылся доступ к закрытому дизайн-боту Дизайн-складу, в котором более бесплатных 1000 материалов.

Что внутри бота?

— 200+ шрифтов
— сотни мокапов
— шаблоны и материалы
— полезные ресурсы для дизайнера

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

Подписаться на бота: @design_sklad_bot

Метод поиска отличных идей в работе и жизни

Далее о методе, который регулярно использует автор для поиска идей. У него не было задачи «Найти способ улучшить [продукт]». Он ставит задачу «Найти 10 способов улучшить [продукт]».

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

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

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

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

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

Продолжайте думать.

Источник

Шрифт как голос бренда

Если стиль — это душа вещи, то айдентика — это душа компании.

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

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

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

Цвет. Он играет очень важную роль в формировании узнаваемости. Опять-таки в рамках нашего эксперимента перекрасим рекламный макет Альфа-Банка в зеленый, а «Тинькофф» — в синий, и все — это уже не «Альфа» и не «Тинькофф». Очевидно, что цвет очень важен, но проблема в том, что палитра ограничена семью цветами и их оттенками, и отстроиться от конкурентов сложно. Например, в свое время появление Тинькофф Банка стало настоящим вызовом для «Райффайзена», который буквально «потерял» свой желтый и был вынужден искать характер в других элементах.

Фотостиль и графика. Не являются надежной базой для узнаваемости. В этой области сложно создать что-то уникальное, а создав, непросто соблюдать и поддерживать, особенно на долгой временной дистанции. Конечно, у некоторых компаний, например Tele2, черно-белый фотостиль играет важную роль в формировании визуального языка. Пожалуй, и все. Попробуйте вспомнить какие-то узнаваемые фотообразы, связанные с конкретным брендом! Можно вспомнить каких-то знаменитостей, но не сам фотостиль как прием.

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

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

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

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

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

Подробнее в статье

С чего начать обучение UX-дизайну и как стать профессионалом

Проанализировали опыт в UX-дизайне, разложили по полочкам, и рассказали с чего лучше начать в UX-дизайне первым делом.

UX-дизайнер – изобретатель цифровых продуктов призванных улучшить что-либо в текущей реальности.

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

Содержание статьи:

- Чем зажигает UX-дизайн и в чем его ценность
- C чего лучше начать первым делом в UX-дизайне
- Кто может стать UX-дизайнером
- Как начинали в UX-дизайне

- Как начинают в UX-дизайне с дизайнерским бэкграундом

Как начинал в UX-дизайне графический дизайнер: история дизайнера из Google
Как начинал в UX-дизайне промышленный дизайнер: история основателя Airbnb
Как начинал в UX-дизайне креативный директор: история дизайнера и основателя Tilda
Как начинали в UX-дизайне дизайнеры: история дизайнеров из Rambler
Как начинали в UX-дизайне дизайнеры спецпроектов: история дизайнеров из Look At Media

- Как начинают в UX-дизайне с инженерным бэкграундом

Как начинал в UX-дизайне фотограф и инженер: история основателя Photoshop
Как начинал в UX-дизайне специалист по электроизмерительным приборам и информатике: история основателя Amazon

- Как начинают в UX-дизайне не дизайнеры и не программисты

Как начинал в UX-дизайне филолог: история основателя ВКонтакте и Telegram
Как начинал в UX-дизайне менеджер по продажам: история основателя Salesforce
Как начинал в UX-дизайне специалист техподдержки: история специалиста из стартапа, который купил Shopify

- В изучение каких инструментов следует вкладывать время?
- Какими техническими и нетехническими навыками должен обладать UX-дизайнер на старте?
- Над какими UX-проектами можно работать самостоятельно?
- Какие UX ресурсы вы можете порекомендовать
- Вывод: Как учиться UX-дизайну

Читать: https://ux-journal.ru/s_chego_nachat_obuchenie_ux.html