Как побороть перфекционизм и делать сайты быстрее (база)
Выверенный до пикселя дизайн требует огромного количества времени и сил. При этом слишком быстрое проектирование может привести к посредственному итогу. Оба этих варианта создают проблемы для бизнеса и затрудняют получение конкурентных преимуществ.
Найти баланс легче сказать, чем сделать, потому что качество и скорость субъективны. Однако, поработав над срочными дизайн-проектами для многих инфопродуктов, я считаю, что правильный баланс существует — это называется прагматичным подходом.
Следите за "весом"
Большинство предпринимателей, с которыми я работал, не обращали внимание на скорость загрузки страницы, однако, этот фактор оказывает поразительное влияние на конверсию. Google учитывает скорость страницы в своих рейтингах, а это означает, что низкая производительность может снизить рейтинг вашего сайта в поисковой выдаче и снизить количество просмотров. Нужно уложится в 2 секунды, пять — это уже недопустимо!
Вы можете бесплатно провести аудит своего веб-сайта с помощью Google Lighthouse.
Не надо изобретать колесо
Если вы работаете с конструкторами сайтов типа Тильды, то знаете о множестве готовых решений под любые нужды клиента. Так вот, не пренебрегайте ими, покупая сторонние модули и скрипты. В очень редких случаях вам действительно понадобится помощь программиста. Это уже что-то на уровне сервисов с базами данных и прочими серверными штуками — мы тут ребята попроще.
Ограничитесь использованием фирменных цветов и типографики. Оригинальный контент и функциональность сыграют, как по нотам, благодаря вашей работе (типа вы дирижер, поняли?).
О деталях пользовательского интерфейса
Одна из областей, в которой вы не должны идти на компромисс, — это качество и согласованность визуальных деталей на вашем сайте. Соблюдение стандартов содержания предотвращает путаницу и делает продукт интуитивно понятным в использовании. Изображения, макет, формы и контент должны быть "в едином стиле". Здесь я еще люблю выражение "будто из одного пака".
Например, каждый атрибут каждого компонента в Фигме, включая интервалы, заголовки и поля, выравнивание, атрибуты шрифта, цветовые атрибуты, тени и эффекты — всё должно подчиняться какому-то правилу. Это правило вы должны определить сами для каждого проекта и строго ему следовать!
Зацикливание на этих деталях может показаться излишним. В таком случае, я попрошу всех дизайнеров, кто читает это, поиграть в эту игру:
Стремитесь к "достаточно хорошему" качеству изображения
Размытые изображения, конечно, должны быть заменены или пропущены через апскейлер (рекомендую Topaz Gigapixel). При сохранении в фотошопе не ставьте максимальное качество. Вы не поверите, но эти лишние килобайты копятся и тормозят загрузку страницы, lazyload спасает не всегда. Если вы не можете сразу заметить разницу между двумя изображениями разного качества, то пользователи этого не заметят 100%.
Используйте готовый набор значков
Существует много способов выделить продукт, но "иконография" к ним не относится. Упаси вас тратить время на отрисовку иконок! Для первичного эскиза используйте библиотеку значков, подобную Material Symbols от Google, а затем идите на https://icon-icons.com/ и будет вам счастье!
Дело в том, что Material Symbols это 2500 универсальных значков с открытым исходным кодом. Не думаю, что вам за всю жизнь попадется больше пары клиентов которые будут настаивать на уникальных иконках.
Анимация aka Свистелки-перделки
Анимация в графическом дизайне может привлекать и направлять внимание, повышать удобство пользования, улучшать понимание читателями информации и усиливать моменты восторга (вспомните достижение нового уровня в видеоигре или совершение покупки).
Но в веб-интерфейсах причудливые анимации чаще всего отнимают время или рассеивают внимание от действительно важных элементов. Это же касается и, казалось бы, безобидной параллаксной прокрутки или плавной прозрачности — пожалуйста, используйте всё это очень дозированно, убедившись, что основной месседж блока будет усвоен в первую очередь!
Любая анимация в пользовательском интерфейсе должна быть целенаправленной. Это люксовые бренды, для которых "визуальное великолепие" является обязательным условием, могут позволить себе творить что угодно. Но для 99% страниц лучше всего использовать минимальную анимацию, чтобы избежать проблем с юзабилити.
Не тратьте время на оптимизацию для каждого возможного размера экрана
Существуют бесконечные комбинации размеров устройств, разрешений экранов и плотности пикселей. Если брать Тильду, то прагматичный подход заключается в идеальной оптимизации сайта только для двух крайних точек — десктоп и мобильная версии (рекомендую зацепить еще и следующую за мобильной). В 99,9% случаев этого достаточно для демонстрации проделанной работы, а дальнейшей полировкой можно заняться потом.
Я вижу, что многие предприниматели стремятся к скорости и снижению затрат, а не к качеству. Ничего страшного, и на этом тоже можно выиграть. Нужно всего лишь реально быстро показать работающую страницу. Для большинства неожиданным образом важен хоть какой-то показанный результат, нежели полноценный функционал. Заказчик видит, что в общем всё работает, и легко соглашается на ещё пару дней для полировки — в это время можно закончить с оптимизацией, мета-тэгами и тд.
Мы делаем сочные лэндинги за три дня, пишите!