всем привет дорогие друзья рад
приветствовать вас в новом курсе по
созданию сайта под ключ на заказ и
прежде чем начнем мне хотелось бы
рассказать о новый ферланд бирже lappert
которая заточена полностью под создание
лендинг пейдж
на бирже размещают задания любой
сложности начиная от разработки
технического задания дизайна и верстки
продвижения простого редактирования и
заканчивая созданием лендинг пейдж под
ключ
основные преимущества бирже это удобный
интерфейс
гарантий оплаты быстрый вывод средств
малая комиссия к слову сказать я уже
воспользовался
данная биржей поработал ней и в принципе
мне очень понравилось действительно
очень удобно рекомендую и так
разрабатывать сайт мы будем для компании
ввк строй данная компания занимается
монтажом систем вентиляции и
кондиционирования
итак с чего нужно начинать создание
любого сайта под ключ в первую очередь
необходимо изучить техническое задание
которое отправил вам клиент в данном
случае мне клиент отправил два файла
можно так сказать то есть первое это
структура будущего сайта то есть отсюда
мы можем видеть то есть какая примерно
структура должна быть у сайта что должно
входить что мы должны учитывать при
разработке данного сайта и 2 файлик это
у нас тоже типа текстовая информация
то есть что мы имеем мы имеем два сайта
которые уже есть давайте откроем их
посмотрим что они себя представляют то
есть это файл то есть это сайты которые
уже есть то есть отсюда можем брать
какую-то информацию но не всю структуру
не полностью конечно копировать если мы
полностью скопируем то фактически мы
сделаем тоже самое если требуется
создать новые л.п.
то есть или новый сайт у нас будет сайт
главная страница в виде лендинг пейдж
а остальные страницы просто текстами и
второй сайт 2 ну это не сайт это
наброски то есть наброски
информацией тоже которым может быть нам
полезно так давайте посмотрим что нам
необходимо учитывать
учесть при разработке данного сайта так
в первую очередь это главная страница
должна быть в виде страницы захвата то
есть она должна быть длинная видел
лендинга далее должна быть не
замороченная структура сайта простая
понятная с использованием современных
текстур цветов должны быть какие
дизайнерские фишки там движущие элементы
но или анимация но небольшие
для антуража стиля чтобы все все-таки
подчеркнуть современность но структура
должна оставаться простой и понятной
далее странице основного описания услуг
и продуктов то есть но это отдельной
странице где мы будем описывать
конкретно преимущества каждого продукта
далее на сайте будет описание
предлагаемого оборудования
то есть это будет я так понимаю виде
небольшого такого каталога
то есть добавляться будет постепенно
различные различные айтемы на сайт так
ну система управления должна быть как мы
видим то есть должна быть возможность
добавлять информацию в качестве системы
управления
я обычно для коммерческих сайтов выбираю
модекс
именно на этой 7 из мы будем
на эту всем с мы будем садить нашу
верстку в дальнейшем но обязательно
должен быть адаптивный дизайн я думаю
это у каждого сайта он по умолчанию уже
должен быть далее ключевые направления
или секции то есть это у нас
направлении то есть чем занимается фирма
монтаж проектирование оборудования
систем вентиляции
ну или есть предложение какие то еще то
есть мы в дальнейшем это отобразим
секции маст хэв секций которые должны
быть обязательно на странице захвата это
отзывы
наша команда ну и прочее прочее там и в
дальнейшем тоже рассмотрим
так также необходимо сделать уделить
внимание тому что фирма работает без
предоплаты
бесплатный выезд инженера и расчет
стоимости так это все исходные данные
которые у нас есть с чего стоит начинать
разработку любого сайта в первую очередь
прототипа я разрабатываю прототип
в онлайн программе во фрейм сиси у нас был урок по ним вы можете
найти на канале как ей пользоваться и
так так это все исходные данные ну что
касается
прототипом и вообще в целом дизайна
всего сайта смотрите должна быть
обязательно у сайта шапка из которой нам
должно быть понятно с чем занимается
фирма и о чем вообще пойдет речь в
дальнейшем то иногда знаете бывает
заходишь на сайт и непонятно есть
логотип есть преимущество а чем
конкретно занимается это не учтено не
отображено это ошибка на самом деле в
первом слайде который попадает наше
внимание нам нужно как можно четче
определить
именно направление своего сайта
какую то картинку разместить которое
ассоциируется у нас именно с этим с этой
деятельностью этой фирмы и сделать что
то запоминающееся или
понятно я лучше всего сделать что-то
понятное и так давайте отделим нашу
шапку от всех остальных секций
такой прямоугольник нарисуем сделаем у
маленького потемнее таким цветом
переключения обводки и основной заливки
а водку сделаем непрозрачность наоборот
прозрачно это у нас будет первая секция
значит что дальше он то есть им 1 секцию
но можно назвать первая секция или
header шапка далее что мы сделаем дали
нам нужен логотип логотип manta
абразивным довольно таки просто мы его
сделаем просто картинкой
такое тут единственное что маленький
неудобно это то что нельзя рисовать
поверх прямоугольника которую уже
например есть то есть мы поверх него не
сможем нарисовать мы сможем вот только
передвинуть ну да ладно так ну давайте
нажмем кнопку сэйв чтобы он нам
сгенерирован сгенерировал короткую
ссылку которая будет на этом сервисе
бесконечно долгое время находиться мы
сможем в любое время редактировать также
клиент может сам редактировать давайте
высоту сделан 8000 пикселов на всякий
случай для того чтобы нам можно было
редактировать и не задумываться ни о чем
кроме того в настройках можно можно
отобразить сетку так сетка у нас
почему-то не отображается так это у нас
привязкой к сетке грится из но я думаю
можно сохранить
обновить страницу у нас сетка должна по
идее появится до сетка у нас появилась
видимо какой-то был небольшой гл
так отобразим что касается скетча
или прототипа он у нас должен быть чисто
символическим то есть мы только должны
отобразить положение блоков вы можете
рисовать прототип на листе бумаги они не
в программе какой-то но мне удобнее
набрасывать структуру именно именно в
программе давайте сделаем каким таким
светом будем рисовать ниже этого
квадрата а потом перемещать наверх так
как у нас как видите проблема с тем что
нарисовать на прямоугольники уже нельзя
ну напишем просто логотип строе
так
он таким образом сделаем сделаем
поменьше размер так опять же чисто
символически отобразим что это логотип
его к строй давайте сделаем например
пела его так дальше что у нас идёт
дальше я предлагаю отобразить пункты
меню которые будут вести на другие
внутренние страницы то есть это у нас
главное будет страница
ну и смотрим по ключевым направлением то
есть главное все направления мы
отобразим в нашем л.п.
дальше идет монтаж так дальше у нас идет
проектирование
оборудование
ну и контакты и контакты контакты нашей
фермы давайте разместим здесь меню
сделаем чуть чуть помельче шрифт ну и
нам необходимо отбить друг от друга
пункты меню
чтобы как-то маленько разрядить их
поэтому мы сделаем отдельно каждый пункт
мы сделаем антенна
tash
проектирование
оборудование сразу сделаем поменьше
размером так и последний пункт меню это
у нас контакты
также сделаем поменьше его
ну и друг за другом здесь разместим
проектирование
оборудование
так оборудования и контакты
дело в том что в oriflame . сиси не
понимает количество пробелов если мы
напишем так то он все равно разделиться
всего лишь одним пробелом
а нам нужно отобразить что это
действительно какая-то структурная
единица и отделить немного большим
расстоянием друг от друга их примерно
вот так это у нас все будет выглядеть
так эти элементы можно сгруппировать
обратите внимание если мы введём сверху
вниз у нас появляется возможность
рисовать новые элементы если мы ведем
выделение снизу вверх то мы выделяем
нажимаем shift и удаляем из выделения
фон нажимаем control g и группируем наше
меню то есть теперь мы можем его таскать
отдельно от других элементов и размещать
там где нам необходимо так дальше что
кроме того необходимо в шапке также
отобразить телефон компании
ну и сделать возможно заказать обратный
звонок
так телефон компания
у нас будет вот такой
сразу можно сделать маленько посветлее
нужно белым даже попробовать и заказать
обратный звонок
опять же шрифт маленько поменьше сделаем
так можно чуть-чуть потемнее сделать
чтобы выделить приоритет то что у нас
это не очень приоритетный элемент самый
главный приоритет найти элемент это у
нас телефон ну и отобразить что здесь
должно быть изображение какое-то то есть
любое изображение мы отображаем именно
квадратиком таки квадратиком изображения
это будет говорить нам о том что когда
мы будем рисовать дизайн нам обязательно
нужно будет здесь разместить какую-то
иконку телефона тут я думаю понятно для
чего как и зачем таким образом не
забываем сохранять
так также можно выделить подчёркиванием
заказать обратный звонок
просто делаем линию так
но у нас довольно интересно это
отобразилось что мы ее попробуем сейчас
как мог пододвинуть
так мало на сделаем так
чуть чуть пошире и выделим ее таким же
цветом это у нас свет именно обводки уже
идет вот такой потемнее
маленьком и можно клавишами вперед-назад
передвигать но мы видим что у нас
передвигается вместе с фоном поэтому
фонды сейчас маленько поправил он таким
образом то есть чисто визуально чтобы
было понятно что он подчеркиваться
должен скорее всего в дизайне он будет
подчеркиваться нас именно пунктирная
линия так далее нам необходимо
отобразить
основной заголовок в шапке можно сделать
вот здесь текстом монтаж систем
вентиляции
так
и кондиционирования
так как это у нас основной заголовок мы
делаем его белым цветом и самым крупным
шрифтом выравниваем примерно по логотипу
то есть тут смотрите есть своя сетка но
в принципе чисто визуально достаточно
будет отобразить как это должно у нас
выглядеть так дальше ниже пишем у нас
есть дополнительно туда есть такая
секция то есть мы работаем без
предоплаты на работаем без предоплаты и
кроме того также у компании имеется
скидки 40 процентов на все так работаем
без предоплаты
сделаем такую черточку
скидки до сорока процентов здесь делаем
шрифт поменьше сделаем чуть чуть поярче
но не ярче основного заголовка
так ну а чуть чуть повыше
то есть примерно нужно соблюдать отступы
что было понятно как это в результате
будет выглядеть кроме того у нас в шапке
должна быть кнопка действия
компания предлагает бесплатный расчет
стоимости то есть можно отобразить
кнопку рассчитать давайте определим вид
всех кнопок для начала примерный
знаешь прямоугольник будет у нас без
обводки
но и сделал каким-то таким например
ну это чисто для примера то есть даже
можно потемнее сделать его на которой
будет написано рассчитать стоимость
рассчитать стоимость рассчитать
стоимость сделаем посветлее выделяем оба
элемента и вот сюда примерно то есть что
будет происходить по нажатию на эту
кнопку будет всплывать pop-up в котором
будет предлагаться ввести имя телефон
контактные данные и заголовок будет типа
расчет бесплатный
типа заказать бесплатный расчет оставьте
телефон и мы перезвоним а ну еще можно
добавить какие-то поля например
какова площадь помещения и какие то
другие технические поля которые будут
важны для того чтобы определить именно
стоимость заказа примерно рассчитать
стоимость так только у нас тут ошибочки
2 с так рассчитать стоимость
ну это не определяет только кнопки вы
будут выглядеть в дизайне они вполне
возможно будут совсем по-другому
выглядит ну примерно это будет как-то
так выглядит то есть примерно так то
есть примерно здесь у нас будет именно
находиться кнопка так но я тут подумал
давайте наверное как-то более экономично
использовать то пространство которое у
нас есть и данные элементы которые у нас
находятся слева мы маленькой раздвинем
по краям чтобы здесь и здесь у нас был
примерно одинаковый отступ
примерно вот так
меню меню на сгруппировано поэтому мы
его тоже примерно посередине
размести между этим элементом и от этим
так сохраняем так обратите внимание
здесь я еще нарисовал ну такое
изображение до и тематическое
изображение или фон шапки для чего это
зачем значит смотрите под видео вы
найдете ссылку на хабр
там я писал о создании дизайна лендинг
пейдж как чем нужно руководствоваться
и ключевые моменты именно создания
дизайна лэндинг page
я там отобразил обратить внимание если
это шапка до какого-то сайта
ну неважно лэндинг пейдж отеле сайт
нужно уже в шапке отобразить изображение
того что из себя представляет продукт то
есть человек это зайдет на сайт он
должен захотеть заказать он должен сразу
понимать чем занимается эта фирма если
она пирожками торгуют а тут должны быть
горячие пирожки
или пицца или что то еще или сушу но
картинка должна быть ярко и сочно и
красивая значит здесь у нас шавки будет
тематическое изображение или фон скорее
всего я думаю здесь у нас будет фон
тематический да это будет помещение
какой-то с кондиционером или что то еще
а здесь какая-то модель кондиционера
будет или другого оборудования мы уже
когда будем рисовать дизайн конкретно на
это уже обратим внимание так дальше
преимущества почему клиент должен
обратиться именно в эту фирму
преимущества также необходимо указать
именно вверху страницы то есть
желательно под шапкой или ну можно в
самой шапки если у вас определенно уже
заголовок или можно следующей секции
давайте нарисуем следующую секцию в
которой отобразим преимущества компании
так отключим бордюрчик сделаем секцию
потемнее маленько примерно таким цветом
это у нас будет секция преимуществ как
мы сделаем преимущество она у нас будет
узкая секция в которой будет в котором
будут у нас цифры конкретные цифры
данные цифры можно взять сайтов которые
уже есть например мне понравился вот
этот вот раздельщик небольшой который
уже есть это в к строй в цифрах то есть
здесь конкретно 6 лет успешной работы
более 50 выполнить нам объектов более
120 партнеров более 100 уникальных
решений более 200 250 тысяч квадратных
метров установленных воздуховодов это
замечательное преимущество это эти цифры
нам как раз подходит это то что нужно и
так как мы их значит цифры сами цифры мы
будем сделать делать большими то есть
текст 6
увеличиваем самый большой ставим размер
посветлее ну в принципе ладно посветлее
пока можно оставить так на 6
дальше рядом у нас идет лет слова
шесть лет пока цвет не меняем ничего не
меняем пока делаем так
а внизу уже более подробно к чему
относится успешные
работы и здесь внизу уже делаем мелким
шрифтом так давай теперь поместим это у
нас посветлее надо маленькая сделать ну
ладно сделаем посветлее 6 лет успешной
работы то есть также отталкиваемся от
данного края которые у нас определен
можно чуть-чуть вот так сделать ну то
есть представляем до что у нас такие
разделы и у каждого раздела есть
небольшой отступ примерно таким образом
так можно вот это вот это слово до
которой у нас после цифр идет
стилистически выделите просто сделать у
маленького потемнее когда так например
на
так
kontrol ц control в следующее
преимущество так 150 выполненных
объектов
наш пишем 150 ну да да пока отодвигаем
150 150
так и здесь уже не лет объектов
так и здесь уже конкретизируем то есть
более 150
выполненных объектов
так отлично я думаю маленько пониже ну
как бы общая стилистика не стилистика
структура должна все равно сохраняться
это конечно не конечный дизайн конечный
дизайн будем прорисовывать фотошопе
а именно стилистика должна не стилистика
структура должна быть сохранена поэтому
давайте дальше идем так контру c-cam
другое
следующее преимущество ну тут тоже надо
смотреть чтобы было примерно одинаковое
расстояние я так понимаю что это у нас
будет центральной
при центральное преимущество поэтому
здесь тоже два будут оставаться поэтому
примерно так примерно посередине моего
разместим примерно посередине
примерно так
так следующее преимущество более 120
партнеров и поставщиков значит пишем 120
партнеров тут более 120 партнеров и
поставщиков так и я все таки думаю нас
будет не 5 a4 преимущество поэтому
давайте их маленько
разрядим между собой немножечко
так
приблизительно потом все равно
подровняем еще маленько так kontrol ц
контрола и последнее преимущество у нас
будет так давайте посмотрим что у нас
есть 250 тысяч квадратных метров
установленных воздуховодов прямо так и
напишем то есть давайте партнеров
отодвинем пока
250 тысяч квадратных метров квадратных
метров вырезаем нам нужно цифра к 250000
а здесь уже пишем квадратных метров чуть
подальше
установленных воздуха водов тоже клево и
преимущества
на это нужно обратить внимание можно
даже в одну строку ну видите у нас везде
в по две строки ну и тут тоже пусть
будет в две строки так но такие вот у
нас получились преимущество ну а туда
тоже маленько пододвинем сюда
перфекционизм
все-таки берет свое и нужно чтобы все
было ровненько так ну все теперь просто
супер
так шапка у нас готово с преимуществами
в следующем уроке мы продолжим рисовать
прототип определим какая секция будет
следующая до встречи в следующем уроке