Show Menu
Cheatography

Веб Дизайн Cheat Sheet (DRAFT) by

Основы веб-дизайна

This is a draft cheat sheet. It is a work in progress and is not finished yet.

Основные принципы

В первую очередь нужно определить ЦА и её потреб­ности
Главная цель дизайна - сделать удобно и функци­онально

Настройки Photoshop

Настройки цвета
RGB: sRGB IEC6...
Стратегии управления цветом - выключить все
Единицы измерения
Линейки и Тест: пиксели
Панели
1. Цвет, История, Образцы
2. Символ, Абзац, Свойства
3. Слои
Показать линейки
Ctrl+R

Сочетания клавиш Photoshop

Инструмент "­Тек­ст"
T
Показа­ть/­скрыть Линейки
Ctrl+R
Перемещать по одной оси / Сохранять пропорции
Удерж. Shift
Заменить цвет текста
1. Выб. цвет
2. Выб. текстовый слой
3. Alt+Ba­ckspace
Скопир­овать объект
Перета­щить, удерж. Alt
Клонир­овать на новый слой
Ctrl+J
Пипетка
Удерж. Alt
Трансф­орм­иро­вание
Ctrl+T
Масштаб
Alt+ко­лесико
Масштаб 100%
Ctrl+1
Перемещние по макету
Удерж. Пробел
Выбор слоя элемента
Ctrl+клик на элемент
Скрыть­/по­казать все панели
Tab

Принципы создания макета

Всегда группи­ровать слои
Для создания эффектов (оверлеи, тени, обводки) исполь­зовать параметры наложения
 

Landing

Весь лендинг должен мотиви­ровать сделать 1-2 действия (оформить заказ, заказать звонок)
Кнопки (например "­зак­аза­ть") обычно дублир­уются в нескольких местах
Часто исполь­зуемые элементы: Форма, Pop-Up, Карта, Преиму­щества, Примеры, Отзывы

Скетч

Скетч лендинга
1. Шапка (логотип+меню+доп);
2. Оффер (УТП) - первый экран, отражающий суть предложения:
слоган+преимущества(опционально, можно в след.б­лок­е)+­CTA­(Призыв к действию - напр.);
3. Остальные инфо-б­локи.
4. Контакты (можно сделать карту на весь экран)­+форма обратной связи.
5. Футер (шрифт уменьшен): копира­йт/лого + меню + телефон.
6. Кнопка "наверх".
7. Всплыв­ающие окна.
Основные элементы сайтов
Кнопки, меню, заголовки, параграфы, списки, хлебные крошки (обычно под заголо­вком), строка поиска, формы и поля форм, блоки предло­жения, модальные окна, триггеры