Советы по улучшению дизайна вашего веб-сайта.

В процессе создания веб-сайта проходит несколько этапов. Если бы мы упростили его и посмотрели на стандартный веб-сайт, этапы были бы такими:

1. Необходимость - Кому-то по той или иной причине нужен веб-сайт.
2. Мозговой штурм - определение общей структуры, целей и прочего.
3. Предложение - Клиент находит фрилансера или агентство для создания сайта.
4. Контент - статьи, изображения и т. Д., Все, что можно найти на целевых страницах, картах сайта и т. Д.
5. Дизайн - человек / команда работает над дизайном и макетом на основе контента.
6. Разработка - человек / команда разрабатывает функциональную часть сайта на основе дизайна.

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

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

Что следует учитывать дизайнеру

«Должны ли дизайнеры уметь программировать?» это распространенный и вполне разумный вопрос. Если дизайнер понимает код, лежащий в основе, и в идеале он может создать его (в определенной степени), то он / она может помочь всей команде в их стремлении завершить проект быстрее.

Вот несколько причин, почему это так:

1 - В конце концов, все это попадает в браузер.

Любые дизайны, которые вы создаете в Figma, Adobe и т. Д., Будут отображаться в браузере. Все браузеры используют язык программирования, известный как HTML / CSS, для визуализации страницы. Если используется Javascript, вы можете сделать свои проекты интерактивными.

Из этого следует важное замечание: любой дизайн должен быть реализован в HTML / CSS. Многие талантливые разработчики интерфейсов могут реализовать практически все, что позволяет технология. Но помните, - это не всегда вопрос «Сможете ли вы это сделать?», Это вопрос «Сможете ли вы сделать это хорошо и сделать его поддерживаемым».

2 - Последовательность

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

Несколько советов веб-дизайнера:

• Дизайн с учетом компонентов. Большинство инструментов теперь предоставляют эту функцию (Figma, Adobe XD, Sketch). Заставьте себя использовать их чаще, пока это не перестанет раздражать.
• Хорошо выровняйте элементы. Подобные участки должны иметь одинаковое расстояние между собой. Например, 80 пикселей - хорошее разделение для сохранения. Не размещайте секции случайным образом, используя 80 здесь, 86 там, 92 на третьей и 78 на другой. Держите его в чистоте и порядке.
• Используйте сетку! Все инструменты имеют сетку. В идеале используйте сетку из 12 столбцов.
• Продемонстрируйте свой дизайн на широких экранах (1920 пикселей и более). Это помогает разработчикам понять, как работает каждый раздел и его предыстория.

3 - Вес сайта

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

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

Как помочь разработчикам?

Одна из ваших целей как дизайнера - упростить и ускорить разработку, сохранив при этом внешний вид сайта.

Вы должны подумать о том, что легко сделать в Интернете.

• Коробки - это все коробки. Вы можете закруглить некоторые углы, да, вы можете сделать эллипсы (которые определены в рамке) и многое другое. Однако когда вы используете более сложные формы, которые взаимодействуют с макетом, все становится сложно.
• Трудно анимировать точное положение. Представьте, что вы хотите щелкнуть изображение, а затем переместить его на другую сторону текста? Звучит «просто», но это не так. Положение, в которое будет перемещаться изображение, должно оставаться относительно контейнера сайта, который изменяется в зависимости от области просмотра и других факторов. А что будет тогда, если изображение будет больше?
• Размеры анимационного блока влияют на макет. Это относится к любому изменению порядка элементов во время анимации. Это может быть очень тяжелым для браузера и часто приводит к огромным задержкам.

Считайте разный контент!

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

Создавайте свои проекты в таких инструментах, как Zeplin

Большинство инструментов дизайна, таких как Figma или Adobe XD, позволяют «делиться» проектами с разработчиками. Оттуда команда внешнего интерфейса может проверять цвета, настройки типографики, интервалы и другие визуальные свойства слоев, что позволит им очень точно придерживаться дизайна.

Предоставьте другие ресурсы, такие как шрифты или видео

Если вы использовали на сайте определенный шрифт, предоставьте его разработчикам. Если он лицензирован и доступен по определенным URL-адресам, обязательно поделитесь им. Разработчику важно с первого дня работать с правильными шрифтами. Если есть видео - обязательно поделитесь ими! Будут ли видео размещаться на YouTube, Vimeo или самостоятельно?

Не выбирайте «идеальный пиксель»

Идея сохранения окончательного внешнего вида сайта совершенно таким же, как и дизайн, - это простой способ заставить вашу команду разработчиков ненавидеть вас и может уничтожить любые шансы на запуск вовремя. Почти в каждом случае дизайн НЕ будет идеальным. Невозможно быть на 100% уверенным, что перед каждой кнопкой у вас ровно 18 пикселей? А не 19px? Или что каждый заголовок имеет размер 38 пикселей, а не 37 пикселей? Или, может быть, каждая граница #ddd и что нет ни одной черной, но с непрозрачностью 15%?

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

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

Оставляйте комментарии в дизайне

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

Думай как пользователь

Когда вы закончите, остановитесь на секунду и представьте, что вы используете сайт. Читайте сверху вниз, прокрутите вниз, щелкните где-нибудь, чтобы увидеть больше. Есть ли что-нибудь, чего может не хватать в рабочем процессе? Есть ли вид определенного элемента, который изменяется при взаимодействии с пользователем? Если это правда и дизайна нет, то вы оставляете своих разработчиков разбираться с этим, что добавляет напряженности работе. Если сроки сжатые, вы можете поделиться общими файлами со своей командой и сообщить им, что ожидается несколько «государственных» просмотров (обязательно укажите, какие именно).

Адаптивные просмотры

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

В итоге

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

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