TILDA EDUCATION
Введение в веб дизайн, построение прототипа сайта и создание собственного лендинга
Где брать материалы
Основные ресурсы, где можно взять фотографии хорошего качества, векторные изображения. Отличия и зоны применения
Структура построения лендинга
С чего следует начинать создание собственного проекта: идея, интервью, прототип, поиск материалов, Tilda
Обработка картинки и расположения фонового изображения,
Зависимость видимости изображения от ее расположения.
Шрифты
Шрифты в шаблонах, какие использовать
Создание лендинга
Создание блоков, исходя из условий прототипа
1
Веб дизайн
С чего начать при создании лендинга.
определение
Чем отличается сайт от страницы?
Сайт может состоять как из нескольких страниц (сайт-портфолио, журнал, блог), так и из одной страницы (лэндинг пейдж, лонгрид).
Разница в настройках: стиль (шрифты, цвета) назначается сайту, к нему же подключается домен. Таким образом, если вы делаете несколько интерактивных статей (лонгридов), выдержанных в едином стиле (шрифты, цвета) и размещенных на одном домене, то вам будет достаточно одного сайта. Если же вы хотите сделать несколько независимых страниц с разными стилями, подключенные к разным доменам (например, посадочные страницы для разных клиентов), то вам понадобятся несколько сайтов..
Разница в настройках: стиль (шрифты, цвета) назначается сайту, к нему же подключается домен. Таким образом, если вы делаете несколько интерактивных статей (лонгридов), выдержанных в едином стиле (шрифты, цвета) и размещенных на одном домене, то вам будет достаточно одного сайта. Если же вы хотите сделать несколько независимых страниц с разными стилями, подключенные к разным доменам (например, посадочные страницы для разных клиентов), то вам понадобятся несколько сайтов..
Материалы для создания лендинга:
UNSPLASH -
сайт с коллекцией фотографий под лицензией Creative Commons Zero, что означает, что вы можете копировать, модифицировать, распространять и использовать фотографии бесплатно, включая коммерческое использование, без запроса на разрешение и без обязательного указания автора.
Мы предоставляем исключительно сервис по поиску фотографий на данном вебсайте. Мы не имеем имущественных или других прав на изображения и не гарантируем отсутствие претензий со стороны правообладателя.
FREEPIK -
сайт, на котором есть бесплатные векторные, растровые изображения, иконки и иллюстрации. Также этот сайт интегрирован с ShutterStock. В случае, если фрипик не сможет найти картинку, предложит перейти на шаттерсток.
ПОИСК ПО КАРТИНКЕ -
включила этот способ, как ресурс, потому что он помогает найти похожие картинки и фотографии. Например, в шатеррстоке или у подруги мы взяли любую картинку (фото,иконка). Она с водяными знаками или плохого качества. Вставляем ее в поисковое окно и получаем результаты таких же или похожих работ со всего мира, а главное разного качества.
UNSPLASH -
сайт с коллекцией фотографий под лицензией Creative Commons Zero, что означает, что вы можете копировать, модифицировать, распространять и использовать фотографии бесплатно, включая коммерческое использование, без запроса на разрешение и без обязательного указания автора.
Мы предоставляем исключительно сервис по поиску фотографий на данном вебсайте. Мы не имеем имущественных или других прав на изображения и не гарантируем отсутствие претензий со стороны правообладателя.
FREEPIK -
сайт, на котором есть бесплатные векторные, растровые изображения, иконки и иллюстрации. Также этот сайт интегрирован с ShutterStock. В случае, если фрипик не сможет найти картинку, предложит перейти на шаттерсток.
ПОИСК ПО КАРТИНКЕ -
включила этот способ, как ресурс, потому что он помогает найти похожие картинки и фотографии. Например, в шатеррстоке или у подруги мы взяли любую картинку (фото,иконка). Она с водяными знаками или плохого качества. Вставляем ее в поисковое окно и получаем результаты таких же или похожих работ со всего мира, а главное разного качества.
Векторные изображения
изображение, сформированное большим числом отрезков коротких прямых,каждый из которых имеет определенное направление, цвет и координаты точки, из которой он исходит иточки, в которую входит.
.
.
Растровые изображения
это картинки, состоящие из большого количества цветных точек (пикселей). Любая цифровая фотография - это растровое изображение. Для обработки таких изображения используют растровые редакторы, такие как Adobe Photoshop или Photo Paint. Основной недостаток растровых изображений - это то, что изображения искажаются при изменении размера.
Так, какие изображения выбрать?
Оптимальный размер изображения:
Лучше всего фотографии подготавливать со следующими параметрами:
Формат: jpg
Размер по ширине: 1680 px
Цветовая модель: RGB
Для фотографий, иллюстрирующих текст, или в галерее: 1160px (12 колонок) или 760px (8 колонок) по ширине.
Вне зависимости от того, какого рода изображения используются — фотографии, рисунки или чертежи — их все можно разделить на две категории иллюстраций: документальные и художественные.
Лучше всего фотографии подготавливать со следующими параметрами:
Формат: jpg
Размер по ширине: 1680 px
Цветовая модель: RGB
Для фотографий, иллюстрирующих текст, или в галерее: 1160px (12 колонок) или 760px (8 колонок) по ширине.
Вне зависимости от того, какого рода изображения используются — фотографии, рисунки или чертежи — их все можно разделить на две категории иллюстраций: документальные и художественные.
Документальные
Документальные изображения имеют прямое отношение к тому, о чем вы сообщаете в тексте, и представляет собой, по сути, вещественное доказательство. Например, сайт о новом коттеджном поселке. В этом случае документальными иллюстрациями будут фотографии коттеджей или их стройки, прилегающих территорий, чертежи и схемы местной инфраструктуры.
Художественные
Художественные изображения не имеют прямого отношения к содержанию текста, а являются средством передачи его смысла — метафорой. Художественная иллюстрация не должна полностью дублировать смысл текста — это лишает ее какой-либо ценности.
Колористика
Подборка цвета и его предназначение. Сложные цвета. Как формируется цвет ( RGB, CMYK)
RGB
(сокращение от Red, Green and Blue – красный, зелёный, синий) представляет собой цветовую схему, используемую при отображении изображения на мониторе вашего компьютера.
Если брать html, то черный цвет будет #000000, красный #FF0000, зеленый #00FF00, синий #0000FF, а белый как#FFFFFF. Серый цвет буде что-то вроде #d3d3d3.
Если брать html, то черный цвет будет #000000, красный #FF0000, зеленый #00FF00, синий #0000FF, а белый как#FFFFFF. Серый цвет буде что-то вроде #d3d3d3.
CMYK
это аббревиатура от Cyan, Magenta, Yellow and Key (голубой, пурпурный, желтый и черный). Смешивание этих четырёх цветов в определённых пропорциях дает различные цветовые оттенки при печати. Изображения такого рода вы можете найти во всех печатных изданиях.
Ширина макета лендинга
Для большого экрана от края до края это 12 колонок. обычно при создании сайта для ПК ориентируются на них. Для создания мобильной версии их может быть меньше. От количества колонок зависит более точное местонахождения элемента интерфейса
основная логика создания лендингов
Структура построения
Очень важно следовать этой логике, иначе придется возвращаться и создавать проект сначала.
Современные технологии позволяют создавать сайты довольно легко, поэтому есть соблазн немедленно начать воплощать смутную, интуитивную картинку, которая есть в голове, без предварительного эскиза.
Так получаются бестолковые и нефункциональные сайты, которые потом надо переделывать. А «переделыванием» очень сложно вывести непродуманный изначально сайт на новый уровень качества. И не нужно. Что нужно на самом деле — так это построить сайт до того, как вы приметесь за его наполнение.
Так получаются бестолковые и нефункциональные сайты, которые потом надо переделывать. А «переделыванием» очень сложно вывести непродуманный изначально сайт на новый уровень качества. И не нужно. Что нужно на самом деле — так это построить сайт до того, как вы приметесь за его наполнение.
Этапы создания
"Сначала посмотрю, как получается, а потом передела". Это не работает: заниматься визуальным оформлением сайта — совсем не то же самое, что его проектировать. Проект — основа для дизайна; без проекта дизайн работает как декорация, маскирующая отсутствие четкой структуры.
1. Постановка цели и аудитория
На этом этапе необходимо получить ответ на вопрос, для чего нужен сайт. Если этот сайт должен продавать продукт или услугу, то будет он дополнительно нести информационный характер, или его цель только продать.
2. Структура и исследование
На этом этапе нужно определить потенциальных посетителей, на которых и будет рассчитан новый сайт. Нельзя забывать, для кого он создается. Если есть представление.
3. Эскиз сайта,контент и работа в TildA
Необходимо понять, из каких разделов будет состоять сайт, в чём основная идея и задача.
2
Тильда и её возможности
В основе этого конструктора есть платная и бесплатная версии. Возможности кардинально отличаются от того, какой версией пользуешься.
АДАПТИВНОСТЬ
Как настроить лендинг для мобильной версии и с какими проблемами мы можем столкнуться
Что делать если не помогает пункт адаптивности
В таком случае можно нужный блок сохранить как картинку и вставить его в блок фотографий. Тогда он растянется по ширине любого экрана. Есть ключевой минус - Качество снижается. Поэтому данный способ следует использовать в редких случаях, когда нам нужна таблица или сравнение двух элементов.
3
Создание собственного лендинга
Сначала нарисуем проект. обсудим с заказчиком и сделаем лендинг
практическое задание
Откройте ваши проекты Тильда и создайте пустой шаблон
