Как сверстать свой первый сайт и зарабатывать на этом

Собственный сайт сейчас – парадная пользовательская дверь большей части бизнесов. Цифровая платформа стала входной проверкой сервиса (или магазина) на качество, и аудитория слабо доверяет брендам, не представленным в интернете. Поэтому веб-дизайн каждый день получает клиентов: запросы идут от новых студий и от давних «жителей» рынка, решивших расширить своё онлайн-представительство. А значит для многих, пришло время освоить навык, легко конвертируемый в доход, и если Вы прямо сейчас в поисках новой профессии или просто хотите эффективно задействовать свободное время, советуем присмотреться к дизайну и вёрстке сайтов.

В статье мы расскажем о сервисах, которые помогут и новичку, и профессионалу создать свой первый (или уже очередной) сайт, заработать на его продаже бизнесу и поставить дело «на рельсы».

Минутка мотивации: за создание сайта на популярных платформах предлагают от 24 000 рублей, за доработку – от 6 000 рублей при сравнительно небольшом сроке работы верстальщика (если Вы сейчас находитесь на стороне заказчика, можете присмотреться к фирмам, содержащим целый штат дизайнеров, где стартовая цена шаблонного сайта-визитки – около 5 000, но будьте готовы к её увеличению в процессе коммуникации).

Итак, допустим, Вас привлекли цифры, и решение принято. С чего начать? У веб-дизайнера есть два пути: можно освоить языки программирования, сложные алгоритмы работы с анимацией и создавать по-настоящему уникальные проекты, глубинно прорабатывая каждую деталь. А можно сэкономить деньги на оплату курсов, время на их прохождение, которое не принесёт Вам моментальной прибыли, и освоить конструкторы сайтов — некоторые из них, например, онлайн-сервис Pixli, могут перекрыть функционал сложных программ, требующих владения языками программирования, и за счёт большого количества доступных плагинов, обширных библиотек Вы соберёте из блоков сайт, не отличимый от написанного вручную. А теперь подробнее о каждом способе.

На первом пути обратиться в онлайн-школы. К примеру, курсы «Веб-дизайн с нуля до PRO» от университета Skilllbox, подобные программы в «Geek Brains» и других компаниях. Здесь мы не будем подробно останавливаться на площадках, так как на каждом курсе студентам, как правило, предлагаются 2-4 конкретных сервиса, и обучение затачивается под них. Отметим только разницу функционала у наиболее популярных сервисов. На часто предлагаемых Sketch, InVision Studio, Adobe XD и Figma мастер сможет создать прототип будущего проекта и отработать дизайн в целом /отдельных элементов в последующем интегрируя их в сборку на других сервисах, для работы с макетами некоторые дизайнеры используют Adobe Photoshop, но сверстать сайт целиком здесь невозможно. Лучше будет воспользоваться конструкторами, о которых расскажем ниже.

Если по каким-то причинам Вам не подходят курсы, можно попробовать формат самостоятельного образования с помощью множества YouTube-, Telegram-каналов и открытого доступа к части профессиональных сообществ. Ниже некоторые из них:

спnзжу design (14449 подписчиков) – на этом канале агрегируются оригинальные и переводные статьи о дизайне, можно найти ссылки на самые полезные сервисы, советы профессионалов и новости индустрии.

AIC Brave Designers (1466 подписчиков): канал дизайн-студии AIC, где Вы найдете статьи, исследования и интервью с российскими и зарубежными дизайнерами.

Наука дизайна (12227 подписчиков) образовательный проект. Здесь собрана информация именно про то (и для того), как начать изучение и практику веб-дизайна.

Now How Channel (13727 подписчиков) «Сайты с хорошим дизайном со всего света каждый день 🤟 + скидки на курсы, анонсы тусовок, розыгрыши билетов на мероприятия и фесты», — как они сами о себе говорят. А Вы сможете прокачать свою «насмотренность» и говорить, что у Вас намётан глаз!

Продуктовый дизайн (UX/UI), брендинг и аналитика – блог о продуктовом дизайне с почти 17 тысячами читателей. Это площадка профессионального сообщества веб-дизайнеров, где ежедневно публикуются тематические материалы. Там же можно найти предложения обучения и ссылки на другие полезные источники информации.

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

Phlearn – сайт для любителей Photoshop. Здесь публикуются видео-гайды о функциях программы.

Just Creative Статьи о брендинге, дизайне логотипов, фотографии, веб-дизайне, социальных сетях и о многом другом.

Tuts+ — сток бесплатных обучающих видео по веб-дизайну и разработке от опытных преподавателей.

How Design University – сайт нацеленный на обучение дизайнеров.

A Beginner’s Guide to SEO — руководство по SEO для веб-дизайнеров: в пределах одной страницы и в контексте всего сайта.

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

Конструктор сайтов – это сервис для веб-вёрстки, который предлагает пользователям целый пакет сервис-возможностей: редактор, хостинг, набор готовых шаблонов. На такой платформе действия дизайнера понятны интуитивно даже новичку: регистрация – выбор стиля и шаблона – «подстройка» предложенного варианта под уникальный заказ в простом и удобном редакторе. Дизайнеру не нужно беспокоиться о технической стороне публикации – этот вопрос решается нажатием одной кнопки; не нужно писать код – в библиотеках есть набор фреймов и элементов под любые нужды. Обращать внимание при выборе подобной платформы следует на тарифную линейку и набор специфических функций в части взаимодействия разработчика с заказчиком. Мы расскажем о четырёх наиболее популярных сервисах, их особенностях и преимуществах, а Вам остаётся выбрать, какие оригинальные предложения будут комфортными лично Вам.

Pixli — единственный абсолютно бесплатный сервис на рынке на данный момент, что может быть связано с его «возрастом»: запуск произошёл не так давно, и платформа ещё набирает свою аудиторию.

В бесплатной версии у пользователя нет ограничений на количество проектов, страниц на сайте, посещений и заявок с форм. Нет платных виджетов, инструментов или хостинга для проектов. Вы пользуетесь библиотекой шаблонов и элементов, не оборачиваясь на тарифный план. Количество шаблонов стабильно растёт: связанный с небольшим «возрастом» программы объём библиотеки компенсируется регулярными обновлениями с добавлением новых элементов/макетов, но и пользователь может продавать свои шаблоны на платформе.

Одна из главных особенностей сервиса – это конструктор, по своим возможностям максимально приближенный к ручной верстке. У пользователя есть возможность реализовать более креативные и сложные идеи, чем даст любой другой конструктор, но это влечёт за собой высокий «порог входа», и Lite режим (предусмотрены два режима работы: профессиональный и упрощённый) все равно не позволяет новичку свободно пользоваться сервисом без дополнительного изучения.

Современная анимация реализована на платформе без необходимости работы с JavaScript. В Pixli вы может создать эффекты «затухания», «смещения», настроить сложное взаимодействие между элементами и гибкое изменение их стилей и свойств, управлять этими функциями на временной шкале.

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

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

Чистый код, который оптимизируется, обеспечивая быструю загрузку у пользователя.

Подключение собственного доменного имени и SSL-сертификата. Ваш сайт будет идеально оптимизирован под все виды поисковых систем.

Для коммерческого, «потокового», создания сайтов у Pixli предусмотрены возможности многопользовательского доступа к аккаунту (благодаря этому команда, если разработчиков несколько, сможет сэкономить время и удобно вносить все изменения параллельно), копирования между проектами (при большом количестве проектов и повторяющихся элементов Вы сможете дублировать их, экономя время для более эффективной работы), функция white label — передача сайта от дизайнера заказчику в отдельный личный кабинет. Контроль конверсии на уже рабочем сайте реализован через уникальные лендинги.

При этом главный недостаток Pixli – отсутствие функционала E-commerce, и для работы с интернет-магазинами сейчас придётся выбрать другую платформу. Но разработчики выпускают регулярные обновления, за которыми стоит следить.

Nethouse – конструктор с возможностью создания сайтов разного формата: от визитки до многостраничного «тяжелого» магазина. Но сильная его сторона всё же электронная коммерция: интернет-магазины, цифровое представление бизнеса. Здесь представлен рекордно широкий функционал в оформлении заказов (с возможностью ручного редактирования), проведении платежей (добавлена функция «резервирования» денег клиента, заморозки сделки для удобства продавца при больших объемах), встроенный магазин приложений, импорт/экспорт товаров в Excel (CSV)и т.д. Для работы с бизнесом с обширным сервисом следуюет в первую очередь присмотреться к конструктору Nethouse.

Оформление интерфейса и рабочей поверхности простое, но кардинально отличающееся от других платформ, поэтому переход с Nethouse на любой другой сервис может вызвать некоторые затруднения и потребовать времени. Обратите внимание, что платформа предоставляет массу справочной информации, чтобы помочь пользователю разобраться в системе и смежных темах (например, коммерциализации).

Бесплатное подключение SSL-сертификата к домену.

Интеграция со сторонними сервисами: на Nethouse можно подключиться к программам учёта от 1C и др.

Платформа предлагает бесплатную тестовую версию для одного проекта, но следует обратить внимание на ограничения (на сайте может быть не более 5 товаров, 20 фотографий), которые присутствуют и для контента, и для обслуживания. Тарифная линейка реализована в трех категориях и в зависимости от оборота (если речь об интернет-магазине), срока единовременной оплаты и объема ограничений цена колеблется в диапазоне 0-650 рублей в месяц.

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

Интерфейс простой, не перегруженный, но некоторые функции (например, расширение пространства макета) реализованы неочевидным путём, и новым пользователям могут понадобиться гайды для быстрого освоения.

Для взаимодействия с аудиторией на готовом сайте встроена поддержка CRM, инвойсов и сбор заявок, SEO wizard.

Возможность добавления кода HTML на страницы: кроме стандартного редактора дизайнер может выбрать режимы WIX ADI (упрощенная разработка) или Wix Code. Последний открывает доступ к добавлению на сайт кода HTML, JavaScript, базы данных.

Wix logo Maker – фирменный «умный» конструктор логотипов. За несколько простых шагов, предоставив сайту только логотип и сферу его деятельности, Вы получите несколько лого на выбор, а дальше сможете корректировать и донастраивать понравившийся. Итоговое изображение будет доступно не только для использования на платформе, но и для выгрузки и добавления на бланки / мерчендайз.

Бесплатное подключение SSL-сертификата к домену.

Тарифы для сайтов Wix начинаются от 150 рублей в месяц, но у пользователя будут ограничения пропускной способности и объема хранения данных. Кроме того, для интернет-магазинов и реализации бизнес-функционала подходят только три топовых тарифа.

Основным недостатком платформы пользователи считают тарифную линейку: при использовании большей части платных предложений встроенная реклама сохраняется; подключение функционала eCommerce доступно только в премиальных тарифах.

Tilda Publishing — конструктор сайтов, работа с которым может быть полностью построена на последовательном размещении блоков из библиотеки. Шаблонов на данный момент предусмотрено 180, блоков – более 480, и каждый из них уже адаптирован для отображения на устройствах разного формата. Удобству добавления собственного контакта помогает Drag-and-drop интеграция изображений.

Отличают Tilda прежде всего типографика и дизайн-контроль. На платформу не только предзагружена библиотека шрифтов (но дизайнеры могут добавлять собственные файлы шрифтов, использовать TypeKit или Google Fonts), для каждого блока на Tilda прописаны рекомендованные характеристики контента: начертание, интерлиньяж, кегль для повышения читабельности и стильного преподнесения зрителю.

На платформу встроен Zero Block — графический редактор, предоставляющий возможность профессиональным дизайнерам трансформировать все элементы сайта на свой вкус или создавать собственные блоки.

Для интернет-магазинов на Tilda встроен функционал Ecommerce: взаимодействие с различными платежными системами — оплата карточкой, мобильным телефоном, Яндекс.Деньгами или через PayPal. Передачу данных легко привязать к Google Drive или в CRM. Для лендинга представлены 12 сервисов сбора данных, а для контроля трафика можно подключить Google Analytics и Яндекс.Метрику.

На Tilda предусмотрен один пробный бесплатный проект с ограниченным функционалом. Для реализации запросов бизнесов этот формат не подойдёт, зато будет удобен, чтобы попробовать платформу и решить, насколько она подходит Вам по интерфейсу и теоретически доступным возможностям. На момент выпуска материала предлагаются всего три тарифа в ценовом диапазоне: 0-1250 рублей в месяц.

Обратим внимание на некоторые недостатки платформы:

- Все шаблоны одностраничные.

- Кастомный CSS только для Zero Block Нет возможности редактировать стили стандартных блоков.

- Передача доступа для редактирования страниц доступна только в платных версиях.

- Ограниченный экспорт сайта: для перевода сайта на свой хостинг понадобится экспорт, доступный только в тарифе Business.

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

Идеи и вдохновение:

Pinterest https://www.pinterest.ru. Один из первых сайтов в работе любого дизайнера внутри и за пределами веб-индустрии. База изображений с удобным поиском и возможностью создавать собственные тематические доски, подписываться на актуальные темы или сборки интересных Вам людей.

https://www.designspiration.net. База примеров удачного дизайна.

https://synapticstimuli.com. Галерея самых разнообразных проектов.

http://www.designmadeingermany.de/sites-we-like/. Сайт с авторскими подборками удачных сайтов. Вы можете предложить добавление Вашего сайта в их библиотеку.

Работа с цветом:

http://paletton.com. Генератор цветовых палитр с максимально гибкими пользовательскими настройками.

https://color.adobe.com/ru/create/color-wheel/. Сервис работы с палитрами от компании Adobe.

https://www.materialpalette.com. Сервис для подбора палитры работает очень просто: выбираете два основных цвета, и сайт предлагает вам расширенную цветовую схему.

https://coolors.co. Онлайн-генератор цветовых схем для сайта создает подборку из пяти оттенков.

https://colorfulgradients.tumblr.com. Библиотека сочетаемости тонов и градиентов.

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