Изучая программирование, можно столкнуться с двумя отдельными этапами.
-
Изучение основ. Вы начинаете изучать анатомию компьютерной программы, учитесь думать о простых задачах с точки зрения логических единиц и начинаете формализовать эти единицы в инструкции кода. На этом этапе вы изучаете абстрактные предметы и простую практику. Если все сделать правильно и выделить необходимое количество времени, любой сможет получить четкое представление о понимании и написании простых логических программ на выбранном языке.
-
Второй этап, который большинство людей находит немного более сложным, состоит в изучении экосистемы разработки: естественным следующим шагом после приобретения простых знаний в области программирования является выбор поддомена программирования (веб-разработка, разработка мобильных приложений, встроенных систем и тому подобное). ) и начните узнавать, как решать проблемы с использованием этой конкретной платформы. Трудность здесь в том, что речь больше не идет о том, чтобы охватить набор основ, отработать на практике каждую концепцию и повторить ее. Зачастую невозможно охватить каждый инструмент, каждую технологию и следовать всем принципам. Правильный способ добиться этого — провести достаточное количество экспериментов и исследований. Скорее всего, вам нужно будет приобрести лишь несколько навыков и использовать ряд инструментов, чтобы приступить к выполнению простых задач. Как только вы освоитесь на этом уровне, вы можете попытаться расшириться до нового набора инструментов и постепенно развиваться. Следуя этой методологии, мы попытаемся заложить прочную основу в области веб-разработки путем изучения технологий и инструментов, используемых для создания простых целевых страниц.
В этом сообщении блога мы кратко рассмотрим ландшафт веб-разработки внешнего интерфейса, уделив особое внимание разработке целевых страниц. Мы рассмотрим ряд ресурсов, которые мы рекомендуем вам просмотреть для различных частей разработки, с которыми вы можете столкнуться. К концу этой статьи вы получите гораздо более четкое представление о том, как создать целевую страницу. Посмотрите это дополнительное видео для практического примера.
Ландшафт разработки целевой страницы
Целевая страница — это термин, первоначально используемый экспертами по цифровому маркетингу для обозначения отдельной веб-страницы, используемой в целях маркетинга и рекламных кампаний. Концепция довольно проста: посетитель, заинтересованный в продукте или услуге, предоставляемой компанией, нажимает на ссылку указанного продукта, затем «попадает» на веб-страницу с подробным описанием, сочетающим текст, изображения и т. д. продукта или услуга. Страница содержит кнопку покупки, которая называется «CTA» (призыв к действию), чтобы превратить посетителя в платящего клиента. Как и следовало ожидать, создание хорошего пользовательского опыта имеет первостепенное значение для хорошего коэффициента конверсии.
В этой статье мы узнаем о многих способах и инструментах, которые позволят нам создавать целевые страницы, выполняющие свою роль. Важно отметить, что при создании целевых страниц необходимо учитывать и другие факторы, связанные с SEO (поисковая оптимизация). SEO будет обсуждаться на будущих семинарах.
Вдохновение для дизайна
Независимо от того, имеете ли вы опыт создания целевых страниц или только начинаете, вы обнаружите, что часто бывает трудно точно определить, как вы хотите, чтобы ваш веб-сайт выглядел. Также часто при работе с клиентами они не знают точно, какой дизайн они хотят для своей веб-страницы. Обычно макет дизайна и прототип передаются разработчику веб-дизайнером, специализирующимся на такого рода работах. Может быть полезно иметь надежный источник веб-дизайна. Такие источники позволят вам быть в курсе тенденций дизайна, расширить свой творческий потенциал и… начать работу. Два лучших ресурса, которые вы можете использовать, чтобы получить вдохновение для дизайна вашего следующего проекта, — это Dribbble и Behance.
Дриббл
Dribbble, вероятно, самый популярный ресурс в сфере веб-дизайна. Это сообщество дизайнеров, которые делятся своими работами, чтобы совершенствовать свои навыки, помогать друг другу и получать конструктивную обратную связь. Он содержит широкий спектр дизайнов практически на любую тему и в любой области, созданных творческими людьми со всего мира, а также отзывы сообщества, что делает его идеальным местом для поиска вдохновения.
Беханс
Behance — еще одно популярное сообщество дизайнеров, которое может помочь вам найти вдохновение. Этот веб-сайт предлагает расширенные функции поиска, которые дают вам легкий доступ к конкретной интересующей вас работе с использованием ключевых слов, полей и цветовой палитры. Также важно отметить, что Behance является частью Adobe и аккуратно интегрируется с Adobe Creative Cloud.
Dribbble и Behance — отличные платформы для вдохновения в веб-дизайне, и вы не ошибетесь ни с одним из них. Мы рекомендуем вам начать изучать дизайны и придумать свой собственный!
Прототипирование дизайна
Теперь, когда вас вдохновили работы талантливых дизайнеров, пришло время приступить к созданию прототипа дизайна вашей целевой страницы. Прототипирование — важный этап создания целевой страницы. Его можно определить как экспериментальный процесс, в котором вы воплощаете идеи в видимые структуры, чтобы вы могли уточнить и проверить их со своей командой или клиентом. К концу этапа прототипирования у вас будет дизайн, готовый к воплощению в жизнь на вашей целевой странице.
Существует множество программных решений, которые можно использовать для создания прототипов дизайна. На самом деле их так много, что быстро становится сложно оценить, сравнить и выбрать один инструмент. Мы собираемся использовать Figma, поскольку ее обычно используют дизайнеры ux/ui. Если вы хотите научиться использовать Figma для прототипирования, вы можете посмотреть наш ускоренный курс на YouTube прямо здесь.
Фигма
Фигма — это универсальный инструмент проектирования, который позволяет UX-дизайнерам и разработчикам легко создавать и совместно работать над прототипами дизайна на браузерной облачной платформе. . Figma делает упор на простоту и удобство использования.
Интерфейс Figma позволяет создавать элементы и стилизовать их, управляя внешним видом текста, сеток и других компонентов на странице. Он предлагает широкий спектр дополнительных плагинов, таких как Autoflow для демонстрации пользовательских потоков, Figmotion для анимации и многие другие.
Иконки и шрифты
Иконки типографики и стиля — одни из самых простых функций, которые можно использовать для улучшения внешнего вида любой веб-страницы. Вы хотите использовать правильный шрифт и значки на своей целевой странице, чтобы они соответствовали общей идее, которую вы хотите донести. К счастью, можно легко найти и применить большой выбор шрифтов и значков с помощью Font Awesome или Google Fonts.
Шрифт потрясающий
Font Awesome — это набор инструментов для шрифтов и значков, основанный на CSS и Less . По состоянию на 2020 год Font Awesome использовался 38% сайтов, использующих сторонние скрипты шрифтов, ставя его на второе место после Google Fonts (Википедия).
Font Awesome поддерживается многими внешними библиотеками, такими как Bootstrap, для которых он изначально был создан. Font Awesome делает интеграцию шрифтов и значков на веб-странице такой же простой, как добавление ссылки CDN. Эта простота использования, а также большой выбор шрифтов и значков сделали его самым популярным решением в этой сфере.
Google Шрифты
Google Fonts — это бесплатный веб-сервис с открытым исходным кодом, предлагаемый Google для встраивания шрифтов на веб-сайты. Он предлагает бесшовную интеграцию и высокий уровень гибкости и настроек.
Разверните целевую страницу
Теперь, когда вы создали свою целевую страницу, пришло время поделиться ею со всеми! Последний шаг — развернуть целевую страницу с помощью решения хостинг-провайдера. Github Pages и Vercel — наши лучшие выборы. Они самые популярные и простые в использовании. Vercel — это инструмент, представленный на нашем семинаре, но Github Pages работает аналогичным образом.
Страницы Github
Если вы сейчас учитесь программировать, скорее всего, вы слышали о Github. Github — это платформа для обмена и размещения кода в рамках сообщества открытого исходного кода. Он предлагает функцию под названием GitHub Pages, которая представляет собой услугу хостинга общедоступных веб-страниц, которые могут использовать отдельные лица и организации. Все страницы бесплатно размещаются в домене GitHub github.io или в собственном доменном имени, если оно у вас есть. Страницы GitHub — это простой и эффективный способ бесплатного размещения ваших проектов, если вы уже используете Github для контроля версий.
Версель
Vercel — это альтернатива Github Pages, предлагающая широкий спектр функций и конфигураций. Он поставляется с бесплатной версией. Мы рекомендуем Vercel всем, у кого есть сложный проект, поскольку он обеспечивает отличные условия для разработчиков и предлагает отличную поддержку. Code Labs Academy использует его в процессе разработки.
Заключение
В этой статье представлены полезные инструменты для разработки целевой страницы. Снова! Лучший способ обучения — это действовать, поэтому мы настоятельно рекомендуем вам использовать эти инструменты в своем личном проекте! Большая часть работы разработчика — исследование существующих решений проблем, с которыми он сталкивается, и избегание изобретения велосипеда. Самое замечательное в сообществе программистов — это его совместная природа. Мы призываем вас воспользоваться работой, которой поделились другие, и внести свой вклад!
А если вы хотите узнать больше о проектировании крутых веб-сайтов и их создании, посетите наши UX/UI-дизайн и Веб-разработка. ) Учебные курсы!
