Как за несколько часов создать лендинг страницу
Допустим перед вами стоит задача создать прототип сайта для рекламы каких-то услуг или товара. К таким страницам последнее время все чаще применяют понятия лендинга, или лендинг страницы (от англ. landing page).
Если говорить простыми словами, то лендинг страница - это весь сайт на одной странице. Здесь располагается информация о компании, услугах, товарах, отзывы, контакты и т.п. Но в более широком понятии это не просто страница, а это целая наука, ведь основная задача такой страницы привлечь клиента, а значит для создания такой страницы нужно еще грамотно продумать идеологию. Т.е. начинать надо с изучения целевой аудитории, продумывания какое общее впечатление на посетителя должна производить такая страница, выбора цветовой гаммы, структуры отдельных секций страницы. Но пока все это опустим и поговорим как именно создать такую страницу.
Вообще для создания любого сайта мне нравится Bootstrap фрейморк. Он включает в себя правила по разметке страницы, причем поддерживаются все мобильные устройства, содержит все необходимые стили в своем наборе для оформления заголовков, текстов, таблиц, форм, а также компоненты для быстрого создания меню и еще много всего. В общем, очень удобно и красиво. Ознакомиться с Bootstrap можно на официальной странице http://getbootstrap.com/, там же и скачать необходимый набор файлов.
Можно создавать страницу вручную с использованием обычного текстового редактора, например, Notepad++, но конечно гораздо удобнее использовать какой-то конструктор.
Недавно я открыла для себя одну такую программу - Pingendo. Эта программа предназначена для создания прототипов сайтов, хотя, если постараться, то можно создать и целый сайт, состоящий из набора статических страниц. В ней есть минимальный набор инструментов для определения основных блоков на странице - меню, заголовок страницы, слайдер, блоки для расположения информации на странице шириной в нужное количество колонок, блог галереи, перечня сотрудников компании, а также футер, в котором есть ссылки на аккаунты в социальных сетях.
Скачать программу можно с сайта http://pingendo.com/ Программа на английском языке и никакого руководства у них на сайте нет. Наверное считается, что программа настолько простая, что ей вообще не требуется никакого руководства. И действительно, интерфейс программы интуитивно понятен, за короткое время можно ознакомиться со всеми инструментами и сразу приступить к созданию прототипа своего сайта.
Если вы не знакомы с Bootstrap, то эту программу можно использовать для обучения. Ведь при изменениях в окне конструктора, все изменения тут же отображаются в окне HTML. Код HTML можно исправлять и вручную, и тогда смотреть как изменится сама страница.
При размещении на странице отдельных секций, таких как галерея, перечень сотрудников компании и т.д., в окне отображаться пустые блоги вместо картинок и какой-то заранее заготовленный текст, зачастую это текст "Lorem ipsum...".
Чтобы представить страницу более наглядно, можно воспользоваться картинками, которые расположены на сервере программы и включены в программу. Если у вас еще нет подготовленных картинок для вашего сайта, то это действительно удобно.
В программе можно выбрать цветовую гамму для сайта, но набор цветов здесь крайне ограничен, так что скорее всего придется редактировать CSS. Еще можно подобрать шрифты, а программе для этого предлагаются целые наборы, где подобраны некоторые шрифты для заголовка и основного текста.
Но тут нужно сделать оговорку, что все эти шрифты рассчитаны на латиницу, поэтому когда вы будете добавлять текст на странице на русском языке, то он будет отображаться обычным шрифтом, который содержит кириллицу, например, шрифтом Times New Roman. Но знания HTML, CSS и принципы подключения на сайт сторонних шрифтов помогут решить и эту проблему.
В целом мне программа очень понравилась. Она простая, удобная, и позволяет реализовать многие задумки. И как-то незаметно я ей увлеклась настолько, что у меня получился законченный продукт, т.е. это уже не просто прототип, а законченная страница с работающими ссылками.
Посмотреть итоги моей работы с этой программой можно тут: http://nata.cv.ua/portfolio/repetitor/
Можно посмотреть как оно выглядит на других устройствах - планшетах или мобильных телефонах.
Если же все-таки захочется ознакомиться с обучающими материалами, то их в интернете тоже можно найти, как на английском, так и на русском. Есть и видео уроки, например, вот одно видео на YouTube, в котором барышня в течении часа рассказывает и показывает возможности программы. Правда кроме самой программы присутствует еще и информация не по теме. В начале видео рассказывается о том, что такое landing page, это полезно посмотреть если вы еще не слышали что это за вид страниц. Далее информация про создание домена у конкретного провайдера и загрузка файлов на сервер - вот это как-то тут смотрится не в тему, ведь у каждого может быть свой домен. И потом барышню понесло по поводу важности файла favicon.ico, опять же не в тему. Конкретно по программе - в видео подробно рассказывается как задавать параметры страницы (title, description, шрифты), создавать меню с навигацией, как на страницу добавить блок отзывов, футер. Но, скажу честно, я это видео нашла уже после того, как создала себе сайт, так что смотреть ли его или разбираться самому - решать каждому. В любом случае ссылку на видео даю:
На этом пока все. Если вы знаете похожий инструмент, напишите мне, будет интересно попробовать что-то другое, хотя на данный момент меня и эта программа вполне устраивает.
© KiNata
30.10.2015
0 коммент.:
Примечание. Отправлять комментарии могут только участники этого блога.