Техническая сторона дизайна: от макета до продуктаДоклад: Пятаев Николай

Дизайн: Форматы макетов

● Растровый ● Векторный ● Комбинированный

Дизайн: структура слоёв

Хорошо Не очень...

Дизайн: сопроводительная документация

Шрифты

Макеты

Мокапы

Палитра

Типографика

Общее описание

Вёрстка

Вёрстка: основные форматы графики

PNG — Альфа канал, полупрозрачность, большой вес

GIF — Альфа канал, 256 цветов, анимация

JPG — компрессия, для фотоизображений

SVG — Текстовый векторный формат

Вёрстка: работа с фоном

Вёрстка: Трюки с градиентами

➔ http://enjoycss.com/gallery/gradient_patterns➔ http://bennettfeely.com/gradients/➔ http://lea.verou.me/css3patterns/

Вёрстка: «Принцип Цикады»

Эта текстура построена по принципу цикады и до повтора своего цикла имеет длину в 56 869 px

➔ http://habrahabr.ru/post/117160/

Вёрстка: Типографика

Шрифты;

Выравнивание;

Цвет;

Начертания;

Интервалы и расстояния;

Размеры: относительные и абсолютные.

➔ http://habrahabr.ru/post/117160/

Вёрстка: Адаптивность

Брейкпоинты — это значения ширины или высоты экрана в пикселях, при переходе которых переключаются наборы стилей.

➔ http://mediaqueri.es/

Основные координаты брейкпоинтов:

Large: от 1920х1080px

Small: 1366x768px (эта странная цифра на данный момент самое популярное разрешение — лэптоп)

Tablet: 1024x768px

Mobile: всё что меньше 768px

Вёрстка: Адаптивность

Пример работы брейкпоинтов

➔ Больше тут: http://mediaqueri.es/

Программирование

Вёрстка: Тестирование

Тестирование в браузерах

Тестирование на различных разрешениях

Тестирование на различных ОС

Тестирование на различных устройствах

Запуск: Контент

Основные пункты Технического Задания для контент-менеджеров:

ГрафикаТекст

Браузеры

Браузеры: Лидеры

Google Chrome

Apple Safari

Mozilla Firefox

Opera

Internet Explorer (Spartan/Edge)

Браузеры: Графика

JPG

GIF

PNG

SVG

WebP

Браузеры: Видео

MP4

WebM

Браузеры: Звук

MP3

OggVorbis

Браузеры: Шрифты

OTF

TTF

WOFF

EOT

SVG

Woff2

Браузеры: Веб-Шрифты

➔ http://www.fontsquirrel.com/tools/webfont-generator

Генератор Веб-Шрифтов

➔ https://www.google.com/fonts

Наборы Веб-Шрифтов

UI/CSS frameworks

UI/CSS frameworks: Модули, Плюсы и Минусы

Основные модули:

● Сетка● Типографика● Таблицы ● Формы ● Изображения ● Адаптивность ● UI-kit

Плюсы:● Стандартизация● Скорость

разработки● Исключение

ошибок

Минусы:● Объём кода● Возможные

конфликты с оригинальным дизайном

UI/CSS frameworks: Примеры

● Yahoo Inc.

● Компоненты: Все основные

●

● http://purecss.io/

● Google Inc.

● Компоненты: Сетка, Формы, Таблицы, UI-kit.

● Ориентирован на стилизацию интерфейса

● http://www.getmdl.io/

● Twitter Inc.

● Компоненты: Все основные

● и много чего ещё :)

● http://getbootstrap.com/

Список других фреймворков со сравнением можно посмотреть тут: http://usablica.github.io/front-end-frameworks/compare.html

Спасибо за внимание!