Шел 2020 год, роботы танцуют рок-н-ролл, оживают обложки журналов и этикетки вин, Трэвис Скотт дает концерт в Fortnite, no-code разработка сайтов начинает перестраивать целую индустрию, ну а я по работе продолжаю сталкиваться с такими динозаврами🦖🦕🐢
По итогам года смотрим, с чем мы до сих пор живем
.psd макет сайта 🤦♂
Умоляю, с 2015 года уже разработана масса полезного софта, который облегчает дизайн и передачу в разработку макетов, на его базе собираются интерактивные прототипы, создают библиотеки элементов, в том числе векторные иконки. Помимо этого стала доступна командная работа над проектом в режиме онлайн. Автоматическая расстановка отступов при добавлении/удалении блоков... автоматическая, Карл! Плагины автоматизируют также наполнение макетов контентом. Все это – figma 🥰, Adobe XD, Sketch + инструменты для прототипирования и анимации.
До сих появляются лонгриды и видеоуроки "Как нарисовать сайт в фотошоп. Уроки новичкам" Nooooo-o-o-o! Вы уже лет на 5-6 отстаете от рынка. Пробуйте, изучайте новое, не ржавейте. Оставьте фотошоп для графического дизайна, под который он заточен.
Дизайн без проектирования 🤦♂
Кстати, проектирование уже давно включается в себя не только карту сайта 😉
Мы все понимаем, что многое тут зависит от заказчика - "надо вчера, нет времени объяснять, нам не надо". Но мы также понимаем, что от этапа проектирования зависит качество итогового продукта. Составьте хотя бы минимальный набор историй, поймите цель создания сервиса.
Для заказчика:
Проектировщика нужно погружать в бизнес-процессы компании. Взаимодействие с пользователем на сайте – только часть. Карта пути пользователя содержит все точки взаимодействия потребителя и бизнеса. С ее помощью вы поймете, какая фича зацепит пользователя, на что обратит внимание, какие еще задачи/потребности может закрыть веб-сервис.
Проектировщику нужно знать реальную целевую аудиторию. И если главная задача сервиса – это понравиться министру и жене министра – скажите об этом. Если сайт разрабатывается для гендиректора, а не для продвижения компании и ее продуктов, – скажите об этом проектировщику, вот ваша реальная целевая аудитория. Так вы останетесь честны с собой и с исполнителем – профит 🙌
Нечитаемый текст на фото 🤦♂
Речь о новостных материалах, когда на сайте используются шаблоны страниц без возможности редактирования. Чтобы такой шаблон работал, нужна кропотливая подборка фото - не слишком темное, не слишком светлое или рябое, расположение лиц, надписей на фото, чтобы не сливалось с заголовком и тд. Здесь нужно оценить, готов ли заказчик потом затрачивать столько ресурсов? Скорее всего нет, и поэтому текст будет нечитаемы.
Если текст второстепенный и главное, чтобы читался заголовок – зачем засорять изображение? Просто оставьте заголовок. Также встречались любители расставить все по углам на фото: слева вверху дата, справа вверху соцсети, справа внизу автор фото, ну и слева внизу заголовок – красота же, как актовый зал на школьной дискотеке, с расставленными по периметру стульями 😅
Концепты вместо разработки дизайна 💁♀
До сих пор под видом разработки дизайна сайта сдаются непроработанные, но симпатичные концепты, в которых нет места пустым состояниям, ошибкам пользователей, медленному интернету.
Вот пример, когда дизайнер сам загнал себя в угол. Яркий блок с формой запроса:
Но когда спросили о валидации полей, пришли вот такие варианты:
Казалось бы, все верно – сообщения об ошибках в интерфейсе должны подсвечиваться оттенками красного. Но в данном решении текст не читабелен из-за низкой контрастности цвета по отношению к фону. Рекомендации W3C говорят нам, что минимальный уровень контрастности для значимых элементов интерфейса – AA (4.5:1). Рассчитать коэффициент для своего дизайна можно на онлайн сервисах даже с учетом размера шрифта – это быстро и удобно. Вот, например сайт Accessible Colors, который еще и подскажет, как изменить оттенок, чтобы достигнуть наилучшего результата:
Вариант с серым фоном и черным сообщением об ошибке по контрастности лучше, но все так же не дотягивает до минимального коэффициента.
Невнимание к типографике 🤦♂
На сайте много контента. Вы нашли идеальный шрифт для проекта – лаконичный элегантный гротеск. "Мы предлагаем решение с акцентом на шрифтах", – говорим заказчику. Окей, так подберите шрифтовую пару! Главная цель наборного текста - быстрота чтения. Шрифты с закрытым начертанием оставьте для крупных заголовков.
Основной текст должен быть динамичным, дружелюбным. Легкость чтения достигается просто: делите текст на абзацы, интерлиньяж не менее полутора, длина строки не более 80 символов с пробелами, открытый шрифт.
Вместо заключения,
Предлагаю не тащить с собой в новый год лишний багаж 🙂.
Поддержите пост, если вам близка эта тема 🔝🔝🔝 и конечно, важен ваш отзыв. Спасибо!
Ну это не динозавры, а никакущие специалисты. Если бы каждый день выходили статьи о том, что бывают люди, которые плохо выполняют свою работу, vc превратился бы в помойку. А так, статья ради статьи.
статья как минимум ради сокращения psd макетов в веб-дизайне) а также пара советов обратиться к простым полезным инструментам – может быть полезно начинающим специалистам, не "никакущим"
Забавно что в 2021 году приводят пример линейного CJM , содержащий в себе галлюцинации по некому уровню счастья клиента и не содержащий в сеье данных по конверсиям и переходам.
В 21ом)) спасибо, правда пример неудачный, надо заменить
Вы все свалили в одну кучу: технологии, специальности, макеты, дизайн, UI/UX и проблемы у них у всех разные. Кстати, использование PSD вместо более модных форматов - вопрос достаточно спорный ивсе, как всегда, зависит от качества. Если качество отличное, то можно принять работу и сделанную в фотошопе.
Основной текст должен быть динамичным, дружелюбным.Очень субъективный подход. И вообще про каждую из групп проблем можно книгу написать, а вы про шрифты уложились в два маленьких абзаца.
Довольно странно называть индустриальные стандарты «модными» форматами. Странно говорить, что использование фотошопа — спорный вопрос и уповать на качество. Макет в фотошопе в принципе не может быть качественными, потому что это проблемы с инспектированием, прототипированием, с экспортированием ассетов (какой там svg, png и в путь), с тем, что фотошоп — растровый редактор, очень далекий по своему наполнению от веба и других платформ. Если все выше перечисленное кое-как решается костылями — хотя зачем городить костыли, когда есть фигма? — то различные вещи, вроде некорректного отображения шрифтов из-за фотошоповского собственного движка, невозможность превью на целевом устройстве, или отсутствие какого-либо способа делать продвинутую систему компонентов с дизайн-системой (а это значительно упрощает общение с продакшеном даже при дизайне лендосов), не решается никак. Работу в фотошопе принимать решительно нельзя.
спасибо за отзыв!
все верно, проблемы разные. Объединила их здесь, потому что столкнулась с ними в довольно сжатый срок в течение полугода, и хотела Негодую, ведь доступно столько информации и инструментов, но хотя бы не попробовать?
psd макет, каким бы качественным ни был, уступает специализированным инструментам - работа с компонентами, сетками, прототипом, совместная работа на макетом в разы эффективнее.
Да, статья о личном опыте и отношении, субъективна - тут вы снова правы)
Насчет цитаты – а каким объективно должен быть основной текст на сайте?
Под "дружелюбным" я понимаю легкость чтения, "динамичный" - структурированный, с подзаголовками
Комментарий недоступен
Продолжает использовать эмодзи в тексте, мода на которые прошла с уходом аськи
прошла мода на аську, по которой, наверно, скучают люди постарше 😉, а эмодзи как раз свои функции продолжают выполнять независимо от моды )
Функции эмодзи — сигнализировать о том, что человек не владеет речью. Не?
Не.
Точнее передать эмоцию, я же не заменяю ими слова)
Жена недавно жаловалась, что многие типографии требуют макеты исключительно в формате CorelDraw... PDF - низзя.
😀 ничего себе, про corel сто лет не слышала уже
лет десять назад отец учил чертежи для производства делать в нем, это было ужасно))
Просто нужно найти
другую типографию )
в регионах - да корел и фотошоп еще очень популярен
спросила вчера у мужа, - так тоже говорит столкнулся в этом году, типографии в Москве просят корел. Видимо с ПО связано у них как-то. И печать у них выходит дешевле, чем там, где принимают пдф