Вадим Пацев "css3 в руках дизайнера"
DESCRIPTION
28 мая 2011, Я.Субботник в Киеве Вадим Пацев "CSS3 в руках дизайнера" О докладе: Прототипирование на HTML/CSS. Обзор CSS3 техник, которые помогут дизайнерам отказаться от графических редакторов. Сейчас время сложных интерфейсов в вебе. Рисовать их в графических редакторах неэффективно. Современный CSS позволяет делать макеты прямо в браузере. Как это можно сделать? Чем это эффективнее привычных инструментов? Какие плюсы дает этот подход в масштабе всего проекта?TRANSCRIPT
Я.Субботник, Киев, 28 мая 2011 года
Легкий и быстрыйВадим Пацев
CSS3 в руках дизайнера
понедельник, 30 мая 2011 г.
HTML-прототип снимает наибольшую часть вопросов
понедельник, 30 мая 2011 г.
3
А как же кнопки,подложки и градиенты?
понедельник, 30 мая 2011 г.
понедельник, 30 мая 2011 г.
5
Какая из кнопок нарисована в редакторе?
понедельник, 30 мая 2011 г.
6
понедельник, 30 мая 2011 г.
7
http://www.webstuffshare.com/2010/04/photoshop-effect-vs-css3-properties/
понедельник, 30 мая 2011 г.
8
понедельник, 30 мая 2011 г.
8
CSS3 для работы с графикой:— multiple Backgrounds;
— gradients;
— drop shadows;
— rounded Corners;
— RGBA.
понедельник, 30 мая 2011 г.
http://desandro.com
Как в CSS:
— Несколько раз text-shadow
понедельник, 30 мая 2011 г.
http://shakenandstirredweb.com/playground/blur/
понедельник, 30 мая 2011 г.
Как в CSS:
— text-shadow
— transition
— transform
http://shakenandstirredweb.com/playground/blur/
понедельник, 30 мая 2011 г.
http://shakenandstirredweb.com/playground/depth-of-=eld-2/
понедельник, 30 мая 2011 г.
Как в CSS:
— text-shadow
— transform
— box-shadow
— transitions
— border-radius
http://shakenandstirredweb.com/playground/depth-of-=eld-2/
понедельник, 30 мая 2011 г.
12
http://dl.dropbox.com/u/921159/Keyboard/page.html
понедельник, 30 мая 2011 г.
13
http://lab.jeffbatterton.com/iphone-css3/
понедельник, 30 мая 2011 г.
http://graphicpeel.com/cssiosicons
понедельник, 30 мая 2011 г.
понедельник, 30 мая 2011 г.
“Cascading Style Sheets can create a great deal of artwork now, without reliance on bitmap graphics.”
John Nack, Principal Product Manager at Adobe
понедельник, 30 мая 2011 г.
Сейчас с использованием CSS можно создавать в том числе и достаточно сложные графические объекты, не используя растровую графику.
John Nack, Principal Product Manager at Adobe
понедельник, 30 мая 2011 г.
17
Но у меня уже есть инструмент.Зачем мне еще один?
понедельник, 30 мая 2011 г.
18
понедельник, 30 мая 2011 г.
18
Все хорошо, но...
понедельник, 30 мая 2011 г.
19
понедельник, 30 мая 2011 г.
19
А давай попробуем перекрасить все ссылки в черный
понедельник, 30 мая 2011 г.
20
понедельник, 30 мая 2011 г.
20
А как выглядит если будет 100 писем?
понедельник, 30 мая 2011 г.
21
понедельник, 30 мая 2011 г.
21
А давай еще
подкрасим их через
строчку
понедельник, 30 мая 2011 г.
22
понедельник, 30 мая 2011 г.
22
А может сделаем отступ между письмами
понедельник, 30 мая 2011 г.
23
понедельник, 30 мая 2011 г.
23
А как выдвигается
вот эта панелька?
понедельник, 30 мая 2011 г.
24
понедельник, 30 мая 2011 г.
24
А в телефоне как оно будет ?
понедельник, 30 мая 2011 г.
25
понедельник, 30 мая 2011 г.
25
А теперь давай во всех вариантах поменяем иконки
понедельник, 30 мая 2011 г.
26
понедельник, 30 мая 2011 г.
CSS3 для прототипирования:— pseudo classes;
— media Queries;
— transitions;
— animation.
26
понедельник, 30 мая 2011 г.
27
Зебра на CSS3
понедельник, 30 мая 2011 г.
28
Какой следующий шаг?
понедельник, 30 мая 2011 г.
29
понедельник, 30 мая 2011 г.
Печеньки:— можно кликать;
— текст как в браузере;
— в одном прототипе все варианты и экраны;
— в одном прототипе интерфейсы под разные устройства;
— легко редактировать;
— анимация, переходы, эффекты;
— над прототипом можно работать совместно;
— можно использовать в производстве.
29
понедельник, 30 мая 2011 г.
30
Спасибо
понедельник, 30 мая 2011 г.
