что делать после верстки интернет магазина
Как сверстать свой первый сайт и зарабатывать на этом
Собственный сайт сейчас – парадная пользовательская дверь большей части бизнесов. Цифровая платформа стала входной проверкой сервиса (или магазина) на качество, и аудитория слабо доверяет брендам, не представленным в интернете. Поэтому веб-дизайн каждый день получает клиентов: запросы идут от новых студий и от давних «жителей» рынка, решивших расширить своё онлайн-представительство. А значит для многих, пришло время освоить навык, легко конвертируемый в доход, и если Вы прямо сейчас в поисках новой профессии или просто хотите эффективно задействовать свободное время, советуем присмотреться к дизайну и вёрстке сайтов.
В статье мы расскажем о сервисах, которые помогут и новичку, и профессионалу создать свой первый (или уже очередной) сайт, заработать на его продаже бизнесу и поставить дело «на рельсы».
Минутка мотивации: за создание сайта на популярных платформах предлагают от 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://synapticstimuli.com. Галерея самых разнообразных проектов.
http://www.designmadeingermany.de/sites-we-like/. Сайт с авторскими подборками удачных сайтов. Вы можете предложить добавление Вашего сайта в их библиотеку.
http://paletton.com. Генератор цветовых палитр с максимально гибкими пользовательскими настройками.
https://www.materialpalette.com. Сервис для подбора палитры работает очень просто: выбираете два основных цвета, и сайт предлагает вам расширенную цветовую схему.
https://coolors.co. Онлайн-генератор цветовых схем для сайта создает подборку из пяти оттенков.
https://colorfulgradients.tumblr.com. Библиотека сочетаемости тонов и градиентов.
Кроме того, не забывайте, что Вы всегда можете найти базы, специализирующиеся на любых узких темах веб-дизайна, в которых Вам понадобились помощь или вдохновение: логотипы, типографика и шрифты, работа с анимацией. Советуем подписаться на тематические медиа и дайджесты, чтобы оставаться в курсе изменения трендов в индустрии!
Как сверстать веб-страницу. Часть 1
Уважаемый читатель, этой статьей я открываю цикл статей, посвященных вёрстке.
В первой части будет описано, как это сделать с помощью стандартных средств на чистом HTML и CSS. В последующих частях рассмотрим как сделать тоже самое, но с помощью современных фреймворков и CMS.
Часть 1. Верстка стандартными средствами
Преимущество данной верстки состоит в том, что код получается более «чистым», а значит быстрее загружается и легче изменяется под специфические нужды. Недостаток такой верстки заключается в том, что она требует значительно больше времени, чем при использовании фреймворков.
Итак, давайте приступим. В качестве нашего подопытного мы возьмем бесплатный psd шаблон Corporate Blue от студии Pcklaboratory.
Структура файлов
Первым шагом давайте создадим простую структуру файлов для наших файлов.
Предварительный осмотр
После создания структуры файлов открываем psd файл в Photoshop. Важно внимательно осмотреть шаблон и оценить его. Нам нужно понять следующие вещи:
Только после того, как вы мысленно себе ответите на эти вопросы, можно переходить к нарезке изображений и написанию кода. Давайте рассмотрим эти вопросы по-порядку.
Общие изображения
На данном этапе нужно нарезать и сохранить только общие изображения, которые будут на всех страницах сайта и не относятся к контенту. В нашем случае это будет светло-серый фон страницы, фон заголовка, пустое изображение, два логотипа и кнопки социальных сетей.
Сохраним логотипы следующим образом:
/images/logo.png
/images/footer-logo.png
В качестве пустых картинок из макета будем использовать однопиксельное серое изображение, которое будем растягивать по необходимости
/images/ sample.png
Повторяющиеся фоновые изображения необходимо вырезать минимальным кусочком достаточным для образования полного изображения повторением по вертикали и горизонтали.
/images/bg.png
/images/h1-bg.png
Иконки социальных сетей с одинаковыми размерами удобно сохранить в один файл и использовать как спрайты для более быстрой загрузки. Для этого можно склеить картинки вручную в Photoshop, а можно сначала нарезать по одной, а затем склеить с помощью специально сервиса, например http://ru.spritegen.website-performance.org. В итоге получится два файла:
/images/social.png
/images/social-small.png
Общее правило при именовании изображений заключается в том, что мелкие и простые картинки, такие, как иконки, логотипы и т.д. сохраняются в формате png, а фотографии в формате jpg.
Основные стили
И только теперь можно начинать писать код. Но начнем мы это делать не с привычного HTML, а с переноса правил в CSS.
На данном этапе желательно перенести все визуальные стили из дизайна в CSS, которые будут применяться по умолчанию для каждого тега.
Основной цвет фона примерно соответствует цвету #f8f8f8. Он будет показан в случае, если фоновая картинка не загрузится. Наверху страницы находится серая дизайнерская полоска. Применим ее через свойство border для body.
Основным шрифтом является тот шрифт, которым написан текст в области контента. Чтобы узнать его стили нужно выделить его в Photoshop’е и посмотреть свойства шрифта. В данном случае это Tahoma 12px с цветом #8f8f8f. Так же в этом макете параграфы имеют увеличенные отступы.
Прописываем все эти стили в styles.css:
В дальнейшем мы все стили будем писать в этот же файл, поэтому будем называть его просто «стили».
Каркас HTML
И вот, наконец, мы можем попрактиковаться в написании HTML кода. Запишем в index.html следующее:
Здесь мы указываем, что используем разметку HTML5, кодировку utf-8, страница называется Whitesquare. Также подключаем наш файл стилей и внешний файл со стилями шрифтов.
В последнем блоке в секции head мы подключаем специальный скрипт, который позволяет поддерживать Html5 теги в браузерах Internet Explorer меньше 9 версии. Мета-тег X-UA-Compatible сообщает, что в случае использования браузера Internet Explorer, он должен отразить сайт самым современным способом.
Весь html код в дальнейшем будет относиться к этому же файлу, поэтому специально указывать куда прописывать html код автор больше не будет.
Макет
В данном случае, мы видим, что сайт состоит из двух колонок: основного контента и сайдбара. Над ними находится шапка (header), в которой располагаются три горизонтальных блока: логотип с поиском, меню и название страницы. В самом низу под колонками располагается серый горизонтальный блок футера (footer).
Опишем это в теге body:
Wrapper используется для объединения блоков и их выравнивания по центру страницы.
Затем укажем стили блоков:
Логотип
Вставляем логотип в тег header:
Дополнительных стилей не требуется.
Поиск
Вставляем форму поиска в тег header:
И стили выравнивания по правому краю для нее:
Для отображения меню необходимо создать список со ссылками внутри тега nav:
CSS стили для него будут следующие:
Здесь мы указали, что для всех навигаций ссылки не будут иметь подчеркивания, убрали стандартные отступы для элементов списка, отобразили список горизонтально и указали нужные цвета и шрифт.
Заголовок страницы
Заголовок страницы помещается в div с идентификатором heading
Заголовок имеет следующие стили:
Рисуем серую полоску фоном на div’e, и в нее вкладываем инлайновый h1 с нужным шрифтом и фоном цвета страницы, чтобы создалось впечатление прозрачного фона для h1.
Колонки
Для того, чтобы создать колонки страницы нужно прописать следующие стили:
Здесь мы задали фиксированную ширину 250 пикселей для сайдбара, прибили его к левому краю и отодвинули колонку с контентом вправо на 280 пикселей от левого края. Также добавили отступ у контента снизу.
Подменю
Подменю создаем аналогично главному меню. Для этого в теге aside прописываем следующее:
И применяем к подменю следующие стили:
Для подменю применяется более тонкий шрифт и квадратные маркеры. Для отображения разделителей рисуем верхнюю границу у каждого элемента списка, кроме первого.
Контент сайдбара
В контенте сайдбара помимо подменю в макете располагается также изображение с расположением офисов.
В html это выглядит так:
В стилях укажем шрифты, цвета и отступы:
Данные стили применяются только к заголовкам и параграфам, лежащим непосредственно внутри сайдбара, но не глубже.
Цитата
Вёрстку контента начнём с добавления цитаты.
Добавим код цитаты в раздел section
И применим для него стили:
Здесь нет ничего нового, так же — шрифты, фоны и отступы.
Контент
Все стили для текста контента мы уже добавили. Поэтому остается добавить только три параграфа с самим текстом после
Следующим шагом нужно добавить два изображения, которые находятся в конце текста контента. Делается это с помощью тега :
, которому зададим следующие стили:
Здесь мы убрали стандартные отсупы у figure, отобразили его как инлайновый блок и применили нужный шрифт. Изображение отображаем как блочный элемент с белой рамкой. Вторую серую рамку можно сделать через css-свойство outline. Самое интересное находится в последнем правиле, которое задает левый отступ у всех figure кроме первого внутри тега section.
Блок «Our team»
При верстке этого блока добавим сначала заголовок:
А затем два блока-строки с карточками сотрудников
Таким образом, карточка (figure) состоит из фотографии (img), подписи (figcaption) с именем сотрудника и его должностью (div). Карточки будут иметь следующие стили:
Здесь мы задали шрифт и отступ для подписи, размер и цвет должности, добавили верхний отступ для карточек и указали, что для всех карточек в строке, кроме первой, должен быть отступ слева.
Футер
Футер состоит из четырёх больших блоков: ленты Твиттера, карты сайта, социальных ссылок и логотипа с копирайтом.
Для начала создадим контейнер футера с этим блоками:
И применим к нему оформление:
Контейнер с находится внутри тега footer, это даёт нам возможность через тег footer задать серую область по всей ширине экрана, а через внутренний div отцентрировать с максимальной шириной 960 пикселей. Также этот div задает обоим блокам высоту 90 пикселей.
Лента Твиттера
Верстаем содержимое ленты Твиттера:
Из интересных моментов здесь следующее: подчеркивание у заголовка мы сделали через нижнюю границу, а сам блок твиттера, как и последующие блоки выровняем по левому краю и задаём ширину.
Карта сайта
Карта сайта представляет собой два блока со ссылками:
Ссылкам задаем цвет и оставляем подчеркивание только для наведённых.
Колонки со ссылками делаем через инлайновые блоки и затем свойством #sitemap div + div отодвигаем вторую колонку от первой.
Социальные ссылки
Вставляем набор ссылок в контейнер
Здесь мы применили технику спрайтов – когда один файл с изображением применяется для разных картинок. Все ссылки разделились на большие иконки (.social-icon) и маленькие (.social-icon-small). Мы задали этим классом отображение в виде инлайнового блока с фиксированными размерами и одинаковым фоном. А затем с помощью css сдвинули этот фон так, чтобы на каждой ссылке отобразилось соответствующее изображение.
Копирайт
Блок с копирайтом и логотипом – это картинка со ссылкой и параграф с текстом под ним.
Стили делают аналогично предыдущим блокам с той лишь разницей, что блок прибивается к правому краю и выравнивание внутри него так же по правому краю:
На этом наши работы закончены. Готовый проект можно скачать здесь.