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

Содержание

Слайд 2

Дизайн

Графический

Программируемый

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

Слайд 3

Графический дизайн

Приемущества

Недостатки

Полная свобода дизайнера
Можно внедрять всякие «завитушки»

Старая школа
Для создания адаптивного дизайна нужно

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

Слайд 4

Программируемый дизайн

Приемущества

Недостатки

Легко переносится в CSS свойства
Можно импортировать как SVG
Удобно создавать адаптивные сайты
Удобно

Программируемый дизайн Приемущества Недостатки Легко переносится в CSS свойства Можно импортировать как
анимировать

Ограничение творческого потенциала дизайнера

Слайд 5

Технологии

Старая школа

Макет в .PSD
Язык разметки текста HTML5
Таблицы стилей CSS3
JQuery

Новая школа, Hard режим

Макет

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

Слайд 6

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

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

Слайд 7

Принцип: HTML

HTML код:

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

Слайд 8

Принцип: стили

CSS код:

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

Слайд 9

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

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

Слайд 10

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

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

Слайд 11

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

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

Слайд 12

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

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

Слайд 13

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

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

Слайд 14

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

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

Слайд 15

CSS правило: 53 байта

В этом примере эффективность выше в 6 раз.
Это значит,

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

Слайд 16

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

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

Слайд 17

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

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

Слайд 18

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

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

Слайд 19

Вёрстка

Вёрстка

Слайд 20

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

Набор файлов: HTML, CSS, JS

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

Слайд 21

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

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

Слайд 22

Илья Ершов

Веб-разработчик, руководитель интернет-проектов
ershov.ilya@gmail.com
Skype: ershov.ilya
www.ershov.pw

Ссылки и дополнительные
материалы на странице: www.j.mp/mfpa-links

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