От автора: пропуская слово моды мимо ушей, вы обрекаете свои проекты на заурядность. В веб-разработке все не так, как в моде, в принципе: самыми популярными здесь становятся благодаря эффективности и прогрессивности. Сегодня окунемся в тренды веб разработки 2018 и узнаем, в каком направлении двигаться в настоящее время. Будет одинаково интересно и новичкам, и профессионалам с толстым портфолио: первые узнают, чему поучиться, а профи — к чему стремиться. Не оставим без внимания и те направления развития web-разработки, которые могут погубить ваш проект.
Тренд — направление в развитии
Несмотря на широкое распространение, термин искажен в сознании людей. В нашу жизнь он пришел из математики и других точных наук. Это вовсе не что-то мимолетное и однодневное, как современная мода на казуальные игры или что-то в этом роде. Тренд — это закономерность, с которой изменяются те, или другие объекты. Получается, что правильным будет говорить не во множественном, а в единственном числе, когда мы говорим о web-разработке в целом. «Тренды» разработки — это современные тенденции развития различных ее направлений.
Определить направление, в котором двигается создание web, невероятно сложно. Каждый день появляются новые продукты, которые имеют все шансы стать популярными. Но некоторые основные тенденции проглядываются у всех web-разработчиков мира:
только адаптивная разработка. Современные сайты уже неотрывно связаны со своими мобильными версиями. Человечество проводит большинство интернет-времени в смартфонах и планшетах. Потому новинки стремятся создать с адаптивным дизайном, который одинаково хорошо смотрится на малом и большом экране. В 2018 году трудно сказать, что более негативно скажется на привлечении аудитории: отсутствие версии для смартфона или для ПК;
отсутствие проблем с производительностью. Конечно, даже сегодня большинство иллюстраций стремятся сделать с помощью кода, а не фотографии или нарисованной картинки — таким образом оптимизируется размер сайта или приложения. Но хорошие новости в том, что большая часть пользователей обеспечена высокоскоростным подключением, а их девайсы значительно мощнее, чем среднестатистический компьютер 2006 года. Потому «фишки» дизайна теперь разнообразнее, переходы более красивые, а интерактив ярче;
инструменты оптимизации труда. Конечно, до сих пор существуют апологеты ручной сборки сайта с нуля. Но правда в том, что иногда можно использовать конструкторы с графическим интерфейсом для создания сайта, и код на выходе будет не хуже того, который создал настоящий разработчик. Немного попотейте над ним для лучшей читабельности, и он будет превосходить все ожидания. К тому же, если все вокруг говорят, что GUI-конструкторы — это плохо, то почему популярность растет?
Все это лишь общие черты того, что происходит в мире создания продуктов для web. Теперь пришла очередь рассмотреть тренды, чтобы не только понять, как развивается современная web-разработка, но и иметь представление о том, каким будет web через несколько лет.
Две ветки одного дерева
Весь видимый и невидимый для вас интернет можно разделить на два рабочих потока: дизайн и разработка. Новости в одном провоцируют изменения в другом — этот процесс бесконечен. Рассмотрим тренд в каждом из них, чтобы сформировать полную картину.
В дизайне динамично
Веб-дизайн — это создание видимого пространства интернета. Дизайнеры — это художники, которые делают тривиальный процесс, вроде покупки авиабилетов, приятным занятием, а не унылым щелканьем по диалоговым окнам. Сегодня это настоящее приключение, которое интуитивно понятно и приятно глазу. Но скорость развития дизайна ошеломляет. Полет мысли человека всегда за гранью развития науки и техники (этим и обеспечен прогресс). Потому начинать будем с того, как художники web видят страницы сайтов и приложений.
Морфинг выше остальных
Наблюдать за тем, как элементы веб-сайтов внезапно искривляются и меняют друг друга, стало уже привычным. Новинка дизайна так хорошо влилась, что мало кто знает ее название — морфинг. Его преимущество не только в привлечении внимания пользователей web. Современные исследования показали, что подобный прием имеет мощную психологическую подоплеку.
Представим, что конкретный привлекательный предмет внезапно искривляется и превращается в другой. Если грамотно расставить цвета и скорость перехода, в сознании эти два объекта уже будут неразрывно связаны. Потому метод активно используется в рекламе. Допустим, сначала вы видите привлекательную женщину в черном, а через мгновение картинка «перетекает» в черный спортивный автомобиль. Теперь, красивая женщина и красивый автомобиль для зрителя в одной связке.
Лайфстайл больше, чем товар
Эту тенденцию вы просто не могли не заметить. Множество компаний по всему миру будто преобразились. Теперь быть преданным бренду означает не просто любить качество и внешний вид, а вести определенный образ жизни. И, конечно же, все это отобразилось на web.
Страницы с товаром больше о описывают его характеристики и не демонстрируют то, насколько он хорош в различных условиях. Например, на сайте с внедорожниками продемонстрировано насколько они выносливы и какие препятствия преодолевают. Если это уникальные характеристики, значит такой рекламы достаточно в web.
Но если это просто ботинки, то без внедрения лайфстайла не обойтись. Примером может служить сайт компании Dr. Martens. Если бы вы просто увидели интернет-магазин с обычными разноцветными ботинками винтажного армейского стиля, вряд ли нажали бы на кнопку «buy». Но веб-дизайнер расположил чуть ниже хедера фотографии представителей рабочих профессий, которые выглядят стильно. Они как working-class heroes, а потому, ценник в 120$ уже не кажется слишком высоким за такую обувь.
Сайт, расскажи историю
Они и правда завораживают. Ярким примером может быть сайт http://www.beargrylls.com/. Помимо того, что разработчики решили сделать скролл по Z-направлению, то есть вглубь, сам сайт рассказывает историю приключений, которые случались за весь период работы Беара Гриллса. И хоть это пример некоммерческого сайта, среди коммерсантов такая структура теперь тоже пользуется популярностью.
Эти эффекты очень плотно переплетаются с элементами лайфстайла. Взять даже тематику путешествий. Очень много современных компаний ассоциируют себя с образом свободного путешественника. Потому и добавляют такие фишки в свой веб-дизайн.
Язык программирования для дизайнера
Уже понятно, что тренд — не обязательно что-то модное, правильно? А значит, «трендовым» может быть направление, которое лишь начинает свое развитие. Именно так можно охарактеризовать подарок компании IBM всем дизайнерам мира — IMB Design Language.
Вы привыкли видеть веб-дизайнера с открытым Photoshop и графическим планшетом и не представляете, чтобы он писал код. Но компания IBM решила дать шанс поступить именно так. Эта новость стала ключевой для тех технически подкованных дизайнеров, которые считают, что программное обеспечение сковывает их фантазию. Теперь создание UX в web можно осуществлять с помощью языка, а не программы.
Той популярности, которую пророчили языку IBM, он не получил. Однако работа над продуктом не прекращается, и уже скоро вы сможете увидеть первых кодеров-дизайнеров.
Конечно же, это не все, что делают дизайнеры в web. Разнообразие инструментов делает «рисование» более творческим и менее технологически емким процессом. Если хотите быть в тренде, просто прописывайте в Google «новости веб-дизайна», тогда каждый день будете видеть новый контент.
Веб-кодинг в 2018
Web-разработка — это когда все, что было выше, нарисовал дизайнер, а ваша задача заставить дизайн работать в окне браузера. Что такое фронт-энд и бэк-энд, говорить не будем — лучше сразу поговорим о современной разработке. Кстати, основные технологии, которыми пользуются в наше время, были рассмотрены в одной из наших статей. Сегодня постараемся описать направления развития web-разработки, которые определяют сайтостроение в принципе. И начнем с наиболее прогрессивного.
Скрипты дают силу!
Существует негласный закон, согласно которому все, что может быть написано на JavaScript, однажды будет написано именно на этом языке. Web-разработка на JS позволяет создавать все, что угодно: начиная с взаимодействия с canvas в HTML5, заканчивая работой с серверной частью. Для языка постоянно обновляются фреймворки и библиотеки. Новости стандартизации тоже не заставляют себя ждать.
JavaScript привлекает разработчиков своей простотой в изучении и постоянной поддержкой. Из-за распространенности в web-разработке любую проблему можно решить, спросив у сообщества на форумах или просмотрев документацию. Немаловажно и то, что web-разработкой не ограничиваются возможности языка. Сегодня его применяют даже в создании прикладного программного обеспечения. Многие советуют учить JS, как первый язык.
Между лендингом и приложением
Некоторое время назад у нас был разговор о замене нативных приложений прогрессивными. Теперь пришла очередь рассказать о том, что одностраничники нынче тоже могут иметь высокую функциональную роль.
Современные сайты и приложения, созданные по этому принципу, являют собой одностраничник, который выполняет определенную работу. В основном, его используют предприниматели для оптимизации бизнес-процессов, их прозрачности и взаимодействия работников. Как и «прогрессивы», одностраничные приложения не зависят от платформы, на которой вы их запускаете, и от характеристик устройства. Все, что нужно — это браузер с поддержкой основных технологий.
Интернет не без коммерции
E-commerce, которая заняла значительную часть web-разработки, тоже стала ее трендом. Это явление в чистом виде, ведь исходя из положения дел современной электронной коммерции можно сделать некоторые предсказания.
Существует всего две наиболее популярных e-commerce технологии, которые используются торговыми площадками — Shopify и Magento. Они оснащены необходимым интерфейсом, умеют собирать необходимую информацию и прочее. Но похоже, скоро им придется уступить место.
Этим направлением давно интересуется компания Google, которая готовится представить свою альтернативу. Стоит ли говорить, что с более слабым продуктом они даже не станут претендовать. Существует мнение, что современная площадка для электронной коммерции нового поколения уже активно разрабатывается за стенами компании.
Интернет вещей
Это логический этап развития web-разработки в целом. Сегодня проектом, который может управлять всем вашим домом, никого не удивишь. IoT — это сфера, в которой объединяются все современные устройства, которые могут подключаться к интернету. Это нужно для их наилучшего взаимодействия. Например, холодильник, узнав из сети о температуре на улице, может определить, насколько сильно нужно охладить напитки. А микроволновка, узнав от вашего GPS-трекера о том, как далеко вы от дома, может начать разогрев пищи. Приложения для менеджмента над умным домом и IoT становятся все более популярны. Так что, разработчики ПО и просто Джависты, ваши навыки скоро могут пригодится в web.
Дизайн в движении
Украшает все вышеназванные тренды. Если ранее страницы в web больше напоминали текстовый файл, то сегодня это настоящие видеоролики и игры (о них ниже). Современный разработчик, который создает верстку без Motion UI, уже не считается высококвалифицированным. Вставлять анимацию можно, главное — не переусердствовать. Если вы еще не освоили навык создания анимированных элементов, то, по крайней мере, научитесь подключать готовые решения.
Еще одним трендом можно назвать интерактивные мини-игры. Их активно запускает Google по случаю различных дат. Например, игра к 60-летию сериала «Доктор Кто» даже получила международное признание.
Учиться лучше на чужих ошибках
Ну что ж, с лучшим разобрались, теперь пора перейти к ошибкам, которые допускают при web-разработке. При чем делают настолько массово, что это тоже можно назвать тенденцией развития — трендом.
Меньше — не значит лучше
Высокое расширение экранов позволило создать мелкие элементы web-страницы. Некоторые разработчики даже следуют правилу: можешь сделать меньше — делай. Но скопление всего этого минимализма иногда просто раздражает. Особенно, если на странице немало подобных элементов.
Чтобы сохранить эффект, который создают небольшие детали, используйте их как декор, а не как компоненты системы управления сайтом. Также не размещайте их без необходимости, как и все остальное на вашей странице.
В погоне за оригинальностью
Стандартный макет стал таким не по счастливой случайности. Все сложилось именно так, потому что он хорошо воспринимается пользователями. К тому же, хорошие макеты, созданные с учетом потребностей автора сайта, способствуют комфорту при наполнении.
Желая стать особенными, web-разработчики стремятся не к созданию качественного, а к созданию индивидуального. Но правда в том, что люди уже привыкли к тому, как выглядит блог, как выглядит интернет-магазин, как выглядит фотогалерея. Выдумка велосипеда — порок для web-разработки. Чтобы избежать негативного эффекта оригинальности, лучше использовать нестандартный макет там, где чтение не предусмотрено. Как на сайте Беара Гриллса, который мы показывали выше.
Фотки, как у соседа
Конечно, индивидуальную фотосессию для собственного сайта могут себе позволить не все. Но это не повод использовать стоковую фотографию из раздела «самые популярные». Вы уже потратили силы, время и средства на web-разработку. Разве не стоит потратить еще немного на нормальные изображения?
Если сайта с стоковыми фотографиями все же не избежать, просто не выставляйте их на первый план. Отредактируйте снимки и сделайте их едва заметным фоном. Таким образом, современный пользователь может не заметить, что лица на вашем сайте точно такие же, как на предыдущем.
Выключите музыку
Фоновая музыка сайта — это то, чего автор этих слов пугался первое время. Особенно, если это стильный эмбиент: сидя ночью за компьютером, невесело внезапно услышать таинственную музыку. Google Chrome даже имеет встроенную функцию для блокировки звуков со страницы. Для того, чтобы заблокирован был не ваш сайт, лучше избегайте подобных приемов.
Если вы создали сайт музыкальной группы, и сопровождение просто необходимо, поставьте кнопку с отключением на видное место. Таким образом, вероятность того, что страницу поспешно закроют, значительно снизится. Еще лучше, если на видном месте будет кнопка включения музыки, без сопровождения по умолчанию.
На этом у нас все! Если действительно хотите следить за трендами web-разработки, обязательно посещайте Google Chrome Experiments. Именно там создаются тренды, которые будут популярны через много лет.