Дизайн и вёрстка Факультет Интернета МФПУ СИНЕРГИЯ Курс «Веб-разработка» Илья Ершов

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

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

Программируемый дизайн Приемущества Недостатки Легко переносится в 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

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

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

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

Вёрстка

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

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

Илья Ершов Веб-разработчик, руководитель интернет-проектов Skype: ershov.ilya Ссылки и дополнительные материалы на странице:

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