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

Насмотренность: что это такое

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

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

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

Зачем развивать насмотренность веб-разработчику

Конечно, этот навык будет очень полезен тем, кто непосредственно занимается работой с визуалом: дизайнерам, фотографам, видео мейкерам, UX/UI-проектировщикам. Однако, если в вашей работе хоть иногда требуется проявлять креативность и самостоятельно, то базовая насмотренность будет важна и вам. Например, веб-разработчикам часто приходится продумывать логику работы интерактивных элементов, анимации, вносить изменения в дизайн в соответствии с техническими возможностями. Все это требует не только владение техническими навыками, но и определенной насмотренности. Плюс, чем больше у вас так называемого “визуального опыта”, тем легче генерировать интересные и нестандартные идеи.

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

Часто визуальные стили могут переходить из одной сферы деятельность в другую, особенно, если эти сферы между собой уже как-то связаны. Пример: веб-разработка и мобильная разработка. Лучше всего, когда насмотренность развивается сразу в нескольких направлениях – так проще генерировать и применять новые идеи. Рассмотрим пример с мобильной и веб-разработкой: дизайнер дал готовый макет страниц, но забыл скинуть или не сделал мобильную версию сайта. Если разработчик видел много примеров качественного дизайна мобильных приложений и сайтов, то сверстать удобную и красивую мобильную версию сайта без референсов от дизайнера ему будет несложно.

Насмотренность влияет и на креативность без привязки к какому-то конкретному проекту. Чем больше у вас визуального опыта, тем выше шанс того, что вы сможете придумать и применить нестандартные решения в своей работе. Даже несмотря на то, что вы уже это где-то видели, на выходе получите уникальные и интересный продукт. Плюс, это может пониманию без необходимости изучения теории дизайна, почему то или иное решение хорошее или плохое. Такое понимание очень полезно для веб-разработчика, даже если вы вообще не имеете никакого отношения к дизайну и проектированию.

Как развивать насмотренность

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

К сожалению, одним только выбором полезных ресурсов дело не ограничится. Как минимум, нужно выделить время на ежедневной основе, когды вы могли бы смотреть работы веб-дизайнеров и разработчиков. Дополнительно нужно научиться не просто определять “хорошие” и “плохие” работы, но и проводить их анализ: что в конкретном проекте реализовано не очень, а что хорошо. Процесс формирования навыка насмотренности можно условно поделить на 3 этапа.

1 этап: выделить время в графике

Для начала определитесь, какое время вы готовы выделить в своем графике. Рекомендуется смотреть и анализировать чужие работы каждый день и выделять на это хотя бы по 10-20 минут. Слишком много времени тоже на это тратить не нужно, так как количество не перейдет в качество – вам просто наскучит долго смотреть чужие работы и вы не сможете адекватно определить разницу между ними, а ведь еще очень желательно научиться анализировать, а не просто отмечать про себя интересные решения.

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

2 этап: выделить площадки

Выберите себе несколько площадок, где дизайнеры и разработчики размещают свои работы. Это, кстати, могут быть не только профессиональные ресурсы, но и YouTube-каналы, аккаунты профессиональных дизайнеров в разных социальных сетях, лента рекомендаций, которая подстроилась под ваши запросы (например, такое может быть в TikTok). Вы все равно время от времени заглядываете в социальные сети и скролите новостную ленту, так почему бы не разнообразить ее интересными решениями в сфере веб-разработки?

Конечно, основной упор рекомендуется делать на профессиональные площадки для дизайнеров и веб-разработчиков, а социальные сети оставить в качестве дополнительного варианта. Дело в том, что на профессиональных ресурсах:

  • проект показывается более полно, а не просто одной картинкой или коротким видео;
  • часто к проекту идет описание или даже целая презентация, где объясняется, почему были выбраны те или иные решения;
  • у проекта есть секция с комментариями, где другие люди могут оставить свое мнение и дать советы.

Подробнее площадки для развития насмотренности в сфере веб-разработки разберем ниже.

3 этап: научиться анализировать

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

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

Такое “сканирование” поможет вам не только просматривать работы и группировать их по принципу “понравилось – не понравилось”, но и понимать логику принятия решения. Следовательно, вы сможете ее применять и в своей работе.

На каких площадках развивать насмотренность

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

Далее разберем несколько таких площадок.

Dribbble

Площадка преимущественно для веб и мобильных дизайнеров. Зарегистрироваться и смотреть чужие работы можно бесплатно и без каких-либо ограничений со стороны сервиса, а вот загружать свои работы можно только при регистрации по приглашению. Показываются только “превью” проекта, то есть главный экран, в лучшем случае главная страница проекта. Какие-либо презентации разъяснения не даются. Эта платформа чисто для того, чтобы просто посмотреть.

Главная страница Dribbble с рекомендациями

Tilda Publishing #madeontilda

Здесь, по хэштегу #madeontilda, можно посмотреть наиболее красивые сайты, сделанные на Tilda частично или полностью. Здесь доступен поиск по дополнительным тэгам, например, бизнес-визитки, интернет-магазины и так далее. Примечательно, что вы не просто смотрите на картинку дизайна сайта, но и можете переключиться на сам сайт, то есть посмотреть, как там все работает. К сожалению, описаний к разработке сайтов и возможности комментирования работ здесь нет.

Примеры сайтов по тэгу #madeontilda на главной странице конструктора Tilda

Awwwards.com

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

Рейтинг одного из макетов на awwwards.com

OnePageLove

Многофункциональный проект, где можно не только показывать часть готового результата, но и продавать собственные разработки. Начинающие веб-разработчики могут видеть не только красивую картинку, но и то, как работает готовый сайт на демонстрационном стенде.

Пример шаблона с демо-вариантом на OnePageLove

Behance

Знаменитая “социальная сеть для дизайнеров”. Здесь можно найти работы, связанные не только с веб-разработкой, но и вообще дизайном. Примечательно, что большинство проектов, выставленных на общее обозрение, дополнительно сопровождаются презентацией или хотя бы описаний процесса разработки: почему была выбрана именно эта цветовая гамма, какие варианты оформления предлагались помимо финального и так далее. Проекты, выставленные на обозрение, можно оценивать, комментировать, сохранять на отдельные мудборд-доски, чтобы вернуться к ним в будущем.

Главная страница Behance

Заключение

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