Эффективная вёрстка в условиях крайнего Севера

1. Эффективная вёрстка в условиях крайнего Севера

2.

3. ВЕДРО ДЁГТЯ:

Подписка 640руб./месяц х 5
= 3 200 руб.
Копия PS 26 000 руб. х 5
= 130 000 руб.

4. ВЕДРО ДЁГТЯ:

Подписка 640руб./месяц х 5
= 3 200 руб.
Копия PS 26 000 руб. х 5
= 130 000 руб.
+ дизайнеры 45 000 x 2 = 90 000 руб.
Итог: 220 000 руб.

5.

6. Фронт-энд разработчик

несёт ответственность
- опрятность UI
- аккуратность
- внимательность
- точность

7.

8.

Дизайнер –– рисует…
…Верстальщик –– верстает.
Решения об особенностях нарезки
макета принимает верстальщик

9.

ПРОЦЕССЫ
ВЁРСТКА НОВЫХ МАКЕТОВ
ДОРАБОТКИ МАКЕТОВ
(ИТЕРАЦИИ)

10.

типичный процесс работы
ПРЕДВАРИТЕЛЬНЫЙ
ПРОСМОТР
ВИЗУАЛЬНЫЙ
АНАЛИЗ МАКЕТА
НАРЕЗКА
n
ВЁРСТКА
ОТЛАДКА
ГОТОВО!

11.

ВИЗУАЛЬНЫЙ
АНАЛИЗ МАКЕТА
процесс с подключением
дизайнера
ФОРМУЛИРОВАНИЕ
И ВЕРБАЛИЗАЦИЯ
ТРЕБОВАНИЙ
ПРОВЕРКА
ВЁРСТКА
ОТЛАДКА
ГОТОВО!
НАРЕЗКА
ПРЕДВАРИТЕЛЬНЫЙ
ПРОСМОТР

12.

ВИЗУАЛЬНЫЙ
АНАЛИЗ МАКЕТА
ПРОСМОТР БРИФА
К ДИЗАЙНУ
ФОРМУЛИРОВАНИЕ
И ВЕРБАЛИЗАЦИЯ
ТРЕБОВАНИЙ
ПРОВЕРКА
ВЁРСТКА
ОТЛАДКА
ГОТОВО!
НАРЕЗКА
ПРЕДВАРИТЕЛЬНЫЙ
ПРОСМОТР
процесс с подключением
дизайнера и составлением
сопроводиловки

13.

типичный процесс работы
ПРЕДВАРИТЕЛЬНЫЙ
ПРОСМОТР
ВИЗУАЛЬНЫЙ
АНАЛИЗ МАКЕТА
5
30
НАРЕЗКА
n
ВЁРСТКА
ОТЛАДКА
ГОТОВО!

14.

ПРЕДВАРИТЕЛЬНЫЙ
ПРОСМОТР
5
60
ФОРМУЛИРОВАНИЕ
И ВЕРБАЛИЗАЦИЯ
ТРЕБОВАНИЙ
ПРОВЕРКА
25
10
НАРЕЗКА
ВИЗУАЛЬНЫЙ
АНАЛИЗ МАКЕТА
ПРОСМОТР БРИФА
К ДИЗАЙНУ
5
ВЁРСТКА
ОТЛАДКА
ГОТОВО!
ожидание

15.

16.

17.

18.

- какой проект
- где находится
- отправить материалы
- что обрабатывать
- как именно обрабатывать

19.

- какой проект
- где находится
- отправить материалы
- что обрабатывать
- как именно обрабатывать

20.

- какой проект
- где находится
- отправить материалы
- что обрабатывать
- как именно обрабатывать

21.

22.

Разработчик – существо последовательное
Возврат назад = временные потери

23.

24.

Типичный процесс разработки
1
АНАЛИЗ
2
НАРЕЗКА
3
ОТЛАДКА
Работа в потоке
не отвлекаясь
6
минут

25.

С привлечением дизайнера
1
10
ФОРМУЛИРОВАНИЕ
И ВЕРБАЛИЗАЦИЯ
ТРЕБОВАНИЙ
ПРОВЕРКА
10
НАРЕЗКА
АНАЛИЗ
1
3
ОТЛАДКА
Выход из потока,
отвлечение
ожидание
15
минут + 10

26.

РАБОТА В ПОТОКЕ:
-
сосредоточенность на задаче
отсутствие внешних раздражителей
удовольствие от процесса
получение качественного результата

27.

РАЗРАБОТКА – ПРОЦЕСС ТВОРЧЕСКИЙ
Неразрывность процесса является
важным критерием качественного
результата.

28. Финансовые показатели

Fr Фронт-энд разработчик: усреднённый доход в день = 1700 руб.
Риски ошибок нарезки = 20%
в час = 212 руб.
Количество ежедневных
в мин. = 3.5 руб.
итераций = 3
Dr Дизайнер: усреднённый доход в день = 2270 руб.
Новых макетов в месяц = 3
в час = 284 руб.
в мин. = 4.7 руб.
Первая итерация
при разработке
новых макетов
Ежедневные потери
Обычный процесс
Без Photoshop
35 мин Fr = 122 руб.
+ риски
122 x 2 = 244 руб.
45 мин Fr = 157 руб.
60 мин Dr = 282 руб.
Итого 439 руб.
+ риски
439 x 2 = 878 руб.
6 мин x 3 = 18 Fr = 63 руб.
15 мин x 3 = 45 Fr = 157 руб.
10 мин x 3 = 30 Dr = 141 руб.
Итого 298 руб.
ОП, в месяц: 244x3 + 63x22 = 2 118 руб.
Без PS, в месяц: 878x3 + 298x22 = 9 190 руб.

29.

30.

Дизайнер – существо ленивое

31.

32. 396px

33.

или
угадывать и
проверять
размеры
просто точно
измерить

34.

35. – инструмент точных измерений для верстальщика, через который он общается с дизайнером

PHOTOSHOP
– инструмент
точных измерений для
верстальщика, через который
он общается с дизайнером

36.

РАБОТА В ЕДИНОЙ СРЕДЕ НЕ ТРЕБУЕТ
ПЕРЕКЛЮЧЕНИЯ ВНИМАНИЯ И
ЭКОНОМИТ ВРЕМЯ

37.

ЭФФЕКТИВНОСТЬ =
СОВОКУПНОСТЬ КАЧЕСТВА
И НИЗКИХ ЗАТРАТ ВРЕМЕНИ

38.

КАЧЕСТВО = ТОЧНЫЕ ИЗМЕРЕНИЯ
МАЛЫЕ ЗАТРАТЫ ВРЕМЕНИ =
ИСКЛЮЧЕНИЕ ПОВТОРЯЮЩИХСЯ
ОПЕРАЦИЙ

39. Набор фронт-энд разработчика:

Firebug + CSS-X-Fire (cssUpdater)
Photoshop
Pixel Perfect
MeasureIt
ColorZilla
Web Developer

40. Firebug + CSS-X-Fire = быстро и удобно

41.

42.

43.

44.

45.

Подписка 640руб./месяц х 5
= 3 200 руб.
Копия PS 26 000 руб. х 5
= 130 000 руб.
+ дизайнеры 45 000 x 2 = 90 000 руб.
Итог: 220 000 руб.

46.

КАК ЖЫ ЖЫТЬ?

47.

Работа с макетом:
PixelPerfect
Измерения размеров:
MeasureIt
Измерения цветов:
ColorZilla
Отладка и вёрстка:
Firebug