Создание сайта-визитки. Дизайн в стиле landing Page
при работе использованы программы векторной графики Corel Draw, Afobe Illustrator, + Photoshop, программа создания прототипов страниц Figma, текстовый редактор Atom+ плагины, + микроразметка кода, оптимизация
Сегодня мне предстоит создать сайт-визитку в стиле лендинг пейдж.
Работаю в привычной уже связке - создание дизайна прототипов сайта сразу мобильной версии и десктопной (стандартного варианта для экрана компьютера) в программеfigma, далее верстка в редакторе atom под стандартную адаптивную сетку bootstrape. Помимо основной задачи создания дизайна сайта есть желание эту связку отработать до необходимого оптимума – т.е. пройти весь путь от проекта до объекта, максимально отработав алгоритм своих действий, дабы в дальнейшем работа сия была наиболее эффективна… такая вот задача предстоит веб-дизайнеру. Потому приступаю и эпистолярно фиксирую свои действия.
Разработка логотипа для лендинга
Для сайта в векторном редакторе необходимо создать логотип, на базе которого потом создается favicon – заставочная иконка для сайта для отображения оного в браузере, а также иконки для мобильных приложений в требуемом формате. Сохраняю в библиотеке иконку сайта в выбранных размерах как png и ico. Сам блок лого в векторном же формате переношу в программу создания прототипов Figma, благо та позволяет работать с svg – графикой. А все проделанное есть уже заявка на то, чтоббы сформировать фирменный стиль клиента.
Дизайн сайта-визитки в стиле landing Page. Разработка дизайна логотипа сайта барбершопа
Функционал посадочной страницы
Поскольку выбран формат посадочной страницы (landing Page), а стиль сайт-визитка то и особой системы управления сайтом нам не потребуется, достаточно все прописать в коде html. Визитка, как формат сайта не предполагает большого объема информации – только ознакомительную часть (представление компании – владельца визитки посетителям этого вебресурса) и контакты оного для обеспечения обратной связи, вот и я предлагаю довести идею визитки до логического абсолюта - решить главную страницу сайта визуально в виде именно визитки, где внешний ее вид состоит как бы из двух половинок, которые в процессе прокрутки превращаются в статичный header, который содержит логотип, меню (навигация по экранам сайта с привязкой к блокам)- т.е. необходимые под рукой элементы интерфейса и подвал –footer, в котором размещены технические ссылки и контактные данные клиента – владельца сайта и как это предопределено правилами веб дизайна.
Формат дизайна веб сайта в стиле лендинга предполагает также наличие «кнопок активности» которые предполагают отправку заявки на обслуживание в режиме онлайн, что в дальнейшем окажет положительный эффект на продвижение сайта
Определение структуры веб сайта
Структурно веб сайт состоит из следующих блоков – главная страница, галерея работ, прайс-лист, интерактивная карта местоположения салона, слайдер, в котором отображены интерьеры салона и его рабочая часть, и контактные данные с формой обратной связи. Для передачи потенциальному клиенту представления о жизнедеятельности салона вполне достаточно. Текстов минимум, все вполне наглядно, просто, но при этом хорошо воспринимается, ибо все блоки содержат интерактивные элементы и анимацию, подключаемую через скрипты в режиме скролинга, позволяющие придать landing page живость и динамику.
Например, галерея решена в виде слайдшоу, где отдельные кадры в кажущемся беспорядке набрасываются на стол (скрипт с указанием тайминга – задержки по времени относительно начала показа первого элемента блока …)
Дизайн сайта-визитки в стиле landing Page. Создание прототипа дизайна страниц в программе figma
Создание прототипа страницы и верстка html
Так как я обещал себе пройти весь путь от задумки до воплощения, делаю презентацию прототипа сайта landing page в программе After Effects, дабы показать динамику страницы, анимацию ее для клиента и разработчика. Заодно и по скриптам определюсь, чего в супе не хватает…
В работе с программой создания прототипов Figma сразу же использую адаптивную сетку bootstrap, что позволит в дальнейшем облегчить верстку страницы веб-сайта. В нашем случае прототипов для версии полноэкранной на 12 колонок и мобильной сетки на 2 колонки вполне достаточно будет для того, чтобы показать как сайт при смене режима отображения «работает». После того, как с прототипом определился, экспортирую все необходимые изображения в оптимизированном для веб формате в библиотеку (соответственно в JPG или SVG, png - что как удобнее передать) и перехожу к текстовому редактору Atom (у меня здесь уже подключены необходимые плагины, делающие работу в редакторе более комфортной для верстальщика) и приступаю к кодовству. Изначально, как и собирался подключаю библиотеки bootstrape (мне не нужно на моем хостинге лишних папок плодить, потому я пользуюсь при этом сторонней библиотекой разработчика в формате cdn), просто подключив их к своему сайту. Прописываю в стандартную разметку страницы также необходимые метатеги и микроформаты для лучшего индексирования поисковиками и собираю код сайта, используя разметку все того же bootstrape. Проверяю в браузере, оптимизирую код html и стили (для которых создаю отдельный подключаемый поверх стандартных bootstrape файл). Готовлю и подставляю нужные скрипты для анимирования компонентов сайта.
Дизайн сайта-визитки в стиле landing Page. Верстка сайта в редакторе atom позволяет ускорить процесс в разы за счет использования плагинов, облегчающих процесс кодирования
Дизайн сайта-визитки в стиле landing Page. МОБИЛЬНАЯ ВЕРСИЯ
Собственно вот…
Просмотров:
