Не забыть при передаче сайта в разработку
Ниже представлен список всего того, что обычно забывают (или забивают) сделать. Не будет сказано про анимацию при наведении курсора, про разные состояния кнопок и форм и прочее, что само по себе разумеется. Только про самое забываемое, что важно при передаче страницы или целого сайта в разработку:Как появляются загруженные картинки и прочие медиаКак выглядит на разных разрешенияхЭкспортируемые ресурсыШрифтА если страница или сайт находятся на отдельном домене, то еще и:FaviconСтраница 404Перед тем, как будут готовы и утверждены финальные макеты, хорошо бы их показать разработчику, чтобы получить его мнение. Все же это то, с чем ему прийдется иметь дело.А теперь подробнее.Как появляются загруженные картинки и прочие медиаЕсли не запланировать, то разработчик или менеджер проекта сделают это за вас. Они могут и хорошо сделать, или не сделать вообще. В любом случае, это будет упущенный момент в дизайне, который может ухудшить результат.Самое простое, что можно сделать, — проявлять картинки через прозрачность либо по мере загрузки, либо по мере прокрутки.Как выглядит на разных разрешенияхЕсли заранее известно, что страница или сайт не будут адаптивными под разные устройства и разрешения, то это не значит, что смотреть будут только на одном устройстве с одной шириной экрана. Если страница нарисована под экраны шириной 1280, то с огромной долей вероятности, смотреть его будут и на 1366, и на 1920 и прочих ширинах.Если на странице есть элементы интерфейса, которые упираются в край экрана, то надо дать понять разработчику как этот край должен вести себя на других разрешениях.А еще бывает, что интерфейс зависит от высоты экрана.Экспортируемые ресурсыДоговоритесь с разработкой в каком формате будут использованы иконки на сайте. Это могут быть и растровые изображения, и SVG, и шрифт с иконками. В зависимости от выбранного формата следует и подготовить ресурсы для экспорта. Да, всякие Zeplin и Figma позволяют экспортировать и в PNG, и в SVG, но при экспорте в векторные форматы не редко бывают глюки экспорта. Важно проверять иконки, чтобы они при экспорте не портились.Чтобы минимизировать риски экспорта иконок, следует все кривые в иконке перевести в заливку и попробовать обойтись как можно меньшим количеством слоев.ШрифтИспользуете что-то несистемное и не кроссбраузерное? Дайте на этот шрифт ссылку разработчику. Желательно, веб версию шрифта иметь, но можно попробовать обойтись и обычными TTF и OTF.Кстати, перед тем, как начать использовать несистемный шрифт в макетах, сделайте ему тестдрайв на страничке. Браузер рендерит шрифты не так, как графический редактор. И разные браузеры этот делают по разному. И разные операционные системы тоже. Вполне возможно, что некоторые символы вам совсем не понравятся, или шрифт совершенно не подойдет для табличных данных.FaviconНа самом деле, под Favicon понимается целый набор иконок на все случаи жизни: от отображения в результатах поиска в Яндексе и таба в браузере, до отображения на Home screen в iOS.Страница 404На страничку могут просто дать ссылку с ошибкой в последнем символе. Чтобы не потерять такого посетителя, надо сделать специальную страницу, которая бы поясняла что произошло и куда можно пройти (например, на главную страницу сайта).Я Саша Тихонов: дизайнер, арт-директор и сооснователь студии Flyphant.sashatikhonov.com · twitter · facebook · instagram · vkНе забыть при передаче сайта в разработку was originally published in Дизайн-кабак on Medium, where people are continuing the conversation by highlighting and responding to this story.
Ниже представлен список всего того, что обычно забывают (или забивают) сделать. Не будет сказано про анимацию при наведении курсора, про разные состояния кнопок и форм и прочее, что само по себе разумеется. Только про самое забываемое, что важно при передаче страницы или целого сайта в разработку:
- Как появляются загруженные картинки и прочие медиа
- Как выглядит на разных разрешениях
- Экспортируемые ресурсы
- Шрифт
А если страница или сайт находятся на отдельном домене, то еще и:
- Favicon
- Страница 404
Перед тем, как будут готовы и утверждены финальные макеты, хорошо бы их показать разработчику, чтобы получить его мнение. Все же это то, с чем ему прийдется иметь дело.
А теперь подробнее.
Как появляются загруженные картинки и прочие медиа
Если не запланировать, то разработчик или менеджер проекта сделают это за вас. Они могут и хорошо сделать, или не сделать вообще. В любом случае, это будет упущенный момент в дизайне, который может ухудшить результат.
Самое простое, что можно сделать, — проявлять картинки через прозрачность либо по мере загрузки, либо по мере прокрутки.
Как выглядит на разных разрешениях
Если заранее известно, что страница или сайт не будут адаптивными под разные устройства и разрешения, то это не значит, что смотреть будут только на одном устройстве с одной шириной экрана. Если страница нарисована под экраны шириной 1280, то с огромной долей вероятности, смотреть его будут и на 1366, и на 1920 и прочих ширинах.
Если на странице есть элементы интерфейса, которые упираются в край экрана, то надо дать понять разработчику как этот край должен вести себя на других разрешениях.
А еще бывает, что интерфейс зависит от высоты экрана.
Экспортируемые ресурсы
Договоритесь с разработкой в каком формате будут использованы иконки на сайте. Это могут быть и растровые изображения, и SVG, и шрифт с иконками. В зависимости от выбранного формата следует и подготовить ресурсы для экспорта. Да, всякие Zeplin и Figma позволяют экспортировать и в PNG, и в SVG, но при экспорте в векторные форматы не редко бывают глюки экспорта. Важно проверять иконки, чтобы они при экспорте не портились.
Чтобы минимизировать риски экспорта иконок, следует все кривые в иконке перевести в заливку и попробовать обойтись как можно меньшим количеством слоев.
Шрифт
Используете что-то несистемное и не кроссбраузерное? Дайте на этот шрифт ссылку разработчику. Желательно, веб версию шрифта иметь, но можно попробовать обойтись и обычными TTF и OTF.
Кстати, перед тем, как начать использовать несистемный шрифт в макетах, сделайте ему тестдрайв на страничке. Браузер рендерит шрифты не так, как графический редактор. И разные браузеры этот делают по разному. И разные операционные системы тоже. Вполне возможно, что некоторые символы вам совсем не понравятся, или шрифт совершенно не подойдет для табличных данных.
Favicon
На самом деле, под Favicon понимается целый набор иконок на все случаи жизни: от отображения в результатах поиска в Яндексе и таба в браузере, до отображения на Home screen в iOS.
Страница 404
На страничку могут просто дать ссылку с ошибкой в последнем символе. Чтобы не потерять такого посетителя, надо сделать специальную страницу, которая бы поясняла что произошло и куда можно пройти (например, на главную страницу сайта).
Я Саша Тихонов: дизайнер, арт-директор и сооснователь студии Flyphant.
sashatikhonov.com · twitter · facebook · instagram · vk
Не забыть при передаче сайта в разработку was originally published in Дизайн-кабак on Medium, where people are continuing the conversation by highlighting and responding to this story.
