Как я встретила динозавров в 2020

Шел 2020 год, роботы танцуют рок-н-ролл, оживают обложки журналов и этикетки вин, Трэвис Скотт дает концерт в Fortnite, no-code разработка сайтов начинает перестраивать целую индустрию, ну а я по работе продолжаю сталкиваться с такими динозаврами🦖🦕🐢

По итогам года смотрим, с чем мы до сих пор живем

Умоляю, с 2015 года уже разработана масса полезного софта, который облегчает дизайн и передачу в разработку макетов, на его базе собираются интерактивные прототипы, создают библиотеки элементов, в том числе векторные иконки. Помимо этого стала доступна командная работа над проектом в режиме онлайн. Автоматическая расстановка отступов при добавлении/удалении блоков... автоматическая, Карл! Плагины автоматизируют также наполнение макетов контентом. Все это – figma 🥰, Adobe XD, Sketch + инструменты для прототипирования и анимации.

До сих появляются лонгриды и видеоуроки "Как нарисовать сайт в фотошоп. Уроки новичкам" Nooooo-o-o-o! Вы уже лет на 5-6 отстаете от рынка. Пробуйте, изучайте новое, не ржавейте. Оставьте фотошоп для графического дизайна, под который он заточен.

Кстати, проектирование уже давно включается в себя не только карту сайта 😉

Мы все понимаем, что многое тут зависит от заказчика - "надо вчера, нет времени объяснять, нам не надо". Но мы также понимаем, что от этапа проектирования зависит качество итогового продукта. Составьте хотя бы минимальный набор историй, поймите цель создания сервиса.

Проектировщика нужно погружать в бизнес-процессы компании. Взаимодействие с пользователем на сайте – только часть. Карта пути пользователя содержит все точки взаимодействия потребителя и бизнеса. С ее помощью вы поймете, какая фича зацепит пользователя, на что обратит внимание, какие еще задачи/потребности может закрыть веб-сервис.

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

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

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

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

Вот пример, когда дизайнер сам загнал себя в угол. Яркий блок с формой запроса:

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

Казалось бы, все верно – сообщения об ошибках в интерфейсе должны подсвечиваться оттенками красного. Но в данном решении текст не читабелен из-за низкой контрастности цвета по отношению к фону. Рекомендации W3C говорят нам, что минимальный уровень контрастности для значимых элементов интерфейса – AA (4.5:1). Рассчитать коэффициент для своего дизайна можно на онлайн сервисах даже с учетом размера шрифта – это быстро и удобно. Вот, например сайт Accessible Colors, который еще и подскажет, как изменить оттенок, чтобы достигнуть наилучшего результата:

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

На сайте много контента. Вы нашли идеальный шрифт для проекта – лаконичный элегантный гротеск. "Мы предлагаем решение с акцентом на шрифтах", – говорим заказчику. Окей, так подберите шрифтовую пару! Главная цель наборного текста - быстрота чтения. Шрифты с закрытым начертанием оставьте для крупных заголовков.

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

Предлагаю не тащить с собой в новый год лишний багаж 🙂.

Поддержите пост, если вам близка эта тема 🔝🔝🔝 и конечно, важен ваш отзыв. Спасибо!

#дизайнсайта #сайтвфотошопе #psdмакетсайта #дизайнсайта2020 #вебдизайн #новичкам #начинающим