Дизайн и вёрстка (05)

Дизайн
Графический
Программируемый

Графический дизайн
Приемущества
Недостатки
Полная свобода дизайнера
Можно внедрять всякие «завитушки»
Старая школа
Для создания адаптивного дизайна нужно прорисовывать отдельный макет
Сложно точно воспроизвести градиенты, тени

Программируемый дизайн
Приемущества
Недостатки
Легко переносится в CSS свойства
Можно импортировать как SVG
Удобно создавать адаптивные сайты
Удобно анимировать
Ограничение творческого потенциала дизайнера

Технологии
Старая школа
Макет в .PSD
Язык разметки текста HTML5
Таблицы стилей CSS3
JQuery
Новая школа, Hard режим
Макет в .AI, .EPS, .PDF
Язык разметки текста HTML5
CSS3, SASS, LESS
JavaScript + фреймворки JQuery, Bootstrap, GSAP и другие
Node.js, bower, gulp, yo
Система контроля версий Git

Важна ли адаптивность?

Принцип: HTML
HTML код:

Принцип: стили
CSS код:

Принцип:
Фреймворк Bootstrap
HTML код:

Растровые картинки vs правила CSS

Растровые картинки vs правила CSS

Растровые картинки vs правила CSS

Растровые картинки vs правила CSS

Растровая картинка: 300 байт
(со сжатием)

CSS правило: 53 байта
В этом примере эффективность выше в 6 раз.
Это значит, что страница сайта будет загружаться в 6 раз быстрее

Дизайн-макет

Дизайн-макет

Дизайн-макет

Вёрстка

Результат вёрстки
Набор файлов: HTML, CSS, JS

Результат вёрстки

Илья Ершов
Веб-разработчик, руководитель интернет-проектов
[email protected]
Skype: ershov.ilya
www.ershov.pw
Ссылки и дополнительные
материалы на странице:
www.j.mp/mfpa-links