8. Принципы
1) Нужно выносит цифры в заголовки! Они цепляют взгяд!
2) Первый принцип "Группировка" (или близость) - Нужно группировать объекты между собой, чтобы понять, как они взаимодействуют друг с другом. Кто близко друг к другу, те взаимодействуют, а кто далеко, те нет
3) Разделять объекты между собой можно с помощью отступов, дивайдеров, обводки вокруг групппы объектов, с помощью единого фона
4) Второй принцип "Контраст" - должен быть хороший заметный контраст!
5) Есть контраст формы, цвета, размера
6) Третий принцип "Сходства" - объединять какие-то категории, тем самым отделяя от других
7) Четвертый "Края" - если хочешь что-то продать, ставь это или первым, или последним в списке!!!
8) 5- Главное - выделяем! Или размером (делаем крупно), или цветом (делаем подложку цветную).
10) 6 - Якорные объекты - распологаем объекты по углам (так глазу легче зацепится), или один в центре
11) Фото - это якорь! На фото всегда обращают внимание! (Или голова)
12) Лучше распологать сначала фотку, потом текст!
13) Блоки на сайте можно и нужно объединять стилистически между собой
14) 7 - ВВ! Внутреннее-внешнее! Внутри меньше (или так же) чем снаружи!
15) Над заголовком всегда больше!
16) ВВ работает в карточке, а не в сетке!
17) Круги забирают на себя всё внимание!
18) Дизайн нужно делать без учёта раскрывашек! Так как 90% времени они закрыты, и вместо них будет дырка на странице
19) Не бывает пустой радио-кнопки!
20) Логотип возвращает на главную страницу!
22) Ctrl +Z (отмена действия), Ctrl + Shift + Z (действие вперёд)
23) Добавить товар в корзину можно нажав на корзину
24) Просмотр страницы: F и Z паттерн. Распологать объекты нужно учитывая это!
25) Самое важное ставим выше! Так как только первое или вначале просматривается и читается
26) Дейтпикер - дату выбрать можно через него. Типо дроплиста, но справа не галочка, а значок календаря, и соответственно, выпадет тоже календарь, в котором можно удобно выбрать дату
27) Чем меньше полей, тем выше конверсия
28) Лэндинг - 8 блоков (стандартный объем лендинга)
29) 1.Справа от лендинга - референс на стилистику
30) 1.Слева - реф на структуру. Узкая полоска с подписью блоков , и рядом с самим лендингом, но тоже слева, фишечки
32) Стилистику можно выбрать любую! Это работа в портфолио! Делать скрин сайта целиком!
33) Нужно взять любой продающий лендос
34) Только одна страница. С этой страницы не нужно никуда уводить (нет личного кабинета)
35) Продающий лендос - когда на первом экране кнопка (99%)
36) Продающий лендинг - когда расхваливается товар или услуга
37) На первом экране - продающий сеошный заголовок, чтобы было понятно, о чём эта страница, и обязательно кнопка (либо спускает до формы, либо открывает попап)
38) Стандартные блоки лендоса - преимущества, прайс лист, отзывы, ОБЯЗАТЕЛЬНО в самом конце форма! FAQs (вопрос-ответ),
39) 1) Head - первый экран; 5) Прайс лист; 6) FAQs; 7) форма; 8) футер (50% что будет )
40) Стилистика - это тип и вид шрифта (крупный шрифт, большой вытянутый), ретро стиль (бордер это тень), скругления, как выглядят блоки. Однопиксельные расстояния между блоков, и скругления.
41) 3. Тему брать другую от рефов!
42) Важно попаст в референс! Если в рефе прямоугольные фотки с определенным скруглением, такое же надо делать у себя! Не другое! Цветовое решение тоже как в рефе (не такой же цвет, а стиль цвета)
43) Продающий ленд - не про тексты! Люди не любят читать! Не должно быть много тестов!
44) 3.4. Другая тема и другое КОЛИЧЕСТВО контента!
46) 6. 6я домашка. Под каждый блок 2-3 рефа. И из них нужно сделать в свой ленд ЧТО-ТО СРЕДНЕЕ
47) Обязательно выписать, что понравилось в рефе!
48) 7. 7 Фишечек (например, бегущая строка, большой графический элемент, кнопки стоят вплотную, бабулевая операция с фоткой, эффект стекла на фотке, красная строка, заголовок (залитый текст и текст с обводкой), карточки в заголовке, текст в виде волны)
49) Фишечка должна повторяться, чтобы не было эффекта ради эффекта
50) Нельзя использовать однородный фон! Нельзя, чтобы все блоки лежали на одном фоне!
51) Нельзя делать слоёный пирог (2ч 44мин) (одинаково располагающиеся фоны)
52) Нужно использовать интересные шрифты!
53) Добавить кнопку не только на первом экране, и в конце, а и по середине! Кнопка через один блок! (4 кнопки)
54) не должно быть всё огромным размером! (Текст не больше 20px, не делаем конские кнопки)
57) всё стоит ровно, а не тяп-ляп
58) у фото по y хорошие размеры
59) размер кнопок нормальный, не более 20 рх
60) пропорции нормальные, не вертикальные, не сжатые, по формуле 123
63) ховер показать в хедере и футере (есть кликабельной элементы)!
64) если что-то скрыто, нужно показать, как оно выглядит раскрытым!
65) если что-то скрыто, нужно показать ещё как оно выглядит при ховере!!!
66) в faq обязательно показать закрытое состояние, при ховере, и открытое!
67) курсор палец, а не стрелку!
68) над заголовками всегда больше!
69) длинных мелких строк текстов нет! Ширина текстового блока max 850 px!
70) нормальный интерлиньяж (130%)
71) белое на черном в большом количестве не делать! (Небольшое это только заголовок) Текст приглушить!
72) серый текст на цветном не делать!
73) использовать плагин сбол типограф!
74) всё, что повторяется 2 и более раз - в компонентах!
75) faq один раскрытый не нужно компонентить! НЕ нужно во все компоненты добавлять тест, и в раскрытом его включать
76) иконки в квадратных фреймах лежат отдельными компонентами, и их можно свапать!
77) поставила скриншоты и 7 фишечек сверху
78) подписала блоки в структуре, которые использую
79) расписала стилистику рефа!
81) рефы в нормальном размере! В 100% зуме!
82) форму сделать в самом конце! В форме показать фокус! В форме 2 поля!
83) прочекать весь чек-лист, потом чат с правкам, и потом только отправлять домашеньку 💖
84) ФИШКИ МОЖНО И НУЖНО ДЕЛАТЬ В КОНЦЕ!
85) атомы обязательно вынести!
86) нельзя - футер с большим количеством ссылок! Можно только копирайт, политика конфиденциальности, пользовательское соглашение, иногда соц сети, и иногда контакты
87) нельзя блок новостей! нельзя делать ленд продажи туров! Нельзя делать портфолио! Не использовать лк и поиск!
88) нельзя много стилей у текста!
89) не нужно во второй блок добавлять много текста! Можно выписать цифры, факты, буллиты
90) САМОЕ ГЛАВНОЕ ОТЗЫВ! Нужно делать акцент на словах самого отзыва! Ещё можно на оценках (Не надо писать имя, возраст, фотку)
92) если много текста, не делать ховер жирнее, так текст увеличивается, и будет рябить
93) заголовки делать без предлогов! Особенно без "ваши/наши"