SlideShare a Scribd company logo
Процесс создания
     сайта
   или «Cайт как гайдлайны»
Ключевые ограничения сайта
как дизайнерского продукта
  Непредсказуемость формата отображения
  Непредсказуемость поведения текста

  Непредсказуемость отображения цвета
  Важность «веса» графики
  Важность сочетания функциональности с эстетикой
  Сайт — продукт коллективного труда
  Сайт часто невозможно закончить...
Кто может
сделать сайт?
«Основной состав»
разработчиков сайта:
  Арт-директор — качество, сроки, клиент
  Дизайнер
  Технический дизайнер?
  Редактор/технический писатель
  Копирайтер?
  Технолог
  Менеджер проекта — деньги, сроки, клиент
Cайт могут сделать
  5—7 человек
«Cкамейка запасных»
при разработке сайта:
  Дизайнер интерфейсов
  Флеш-дизайнер
  Флеш-технолог
  Иллюстратор
  Моделлер
  Визуализатор
  Бета-тестер
Cайт могут делать
и более 10 человек
9 этапов создания
      сайта
    от брифа до хостинга
1. Клиентский бриф
  Знакомство, постановка задачи

   Клиент
   Менеджер
   Арт-директор
   Редактор/копирайтер
2. Структура разделов сайта
  Логика, навигация, масштабируемость

   Менеджер
   Арт-директор
   Редактор/копирайтер
3. Техническое задание
  Обязательные элементы, графические
  и функциональные блоки, технологии

   Редактор/копирайтер
   Менеджер (согласование)
   Арт-директор (согласование)
   Технолог или тех. директор (согласование)
4. Концепция дизайна
 Презентация/информация. Гайдлайны
 и фирменный стиль. Модульная сетка.
 Варианты. Макеты начальной и внутренней
 страниц.

  Менеджер
  Арт-директор
  Дизайнер
5. Шаблоны и тех. графика
  Cоздание шаблонов всех внутренних
  страниц, обработка графики

   Менеджер
   Арт-директор
   Дизайнер
   Технический дизайнер
6. Cоздание текстов (контент)
  Написание и/или редактирование
  текстов для всех разделов сайта

   Редактор/копирайтер
   Менеджер
   Арт-директор
7. Верстка и сборка сайта
  Создание HTML-шаблонов, резка
  и оптимизация графики, верстка страниц

   Технолог
   Менеджер
   Арт-директор
   Дизайнер
   Технический дизайнер
8. Перенос на хостинг
  Тестирование, отладка, физический
  перенос сайта на хостинг

   Технолог
   Менеджер
9. Поддержка и обновление
 Передача сайта внутрестудийной
 группе поддержки или группе поддержки
 со стороны клиента

  Менеджер
Средние сроки
разработки сайта:
  1—2 месяца
Промо-сайт каталога
 ИКЕА на 2005 год
     от сайта до радиопьесы
Клиентский бриф:
 «Анонсировать выход нового каталога
 ИКЕА корпоративным клиентам. Донести
 до них специальное предложение».

  Клиент — ИКЕА
  Менеджер — Вера Дорофеева
  Арт-директор — Антон Ярусов
  Редактор/копирайтер — Юрий Швецов
Концепция дизайна:
 «Каталог выходит осенью, давайте
 оформим анонс в виде осеннего листа
 и вложим его в каталог».
Ответ клиента:
  «Главное не то, что каталог выходит
  осенью, а то, что он новый. Давайте
  думать дальше».
Новая концепция дизайна:
 «Ваши каталоги все видели уже много
 тысяч раз, предлагаем на этот раз дать
 вашим клиентам послушать каталог».
Ответ клиента:
  «Интересно. Будем делать».
Студия. Актеры. Запись.
Дизайн сайта:
Дизайн диска:
И еще...
   Конверт С4 для отправки каталога по почте
   Два макета А4 в журналы
   10 баннеров различного формата
   Директ-мейл
Конец
© 2009—2010 Anton Yarusov, yarusov@gmail.com
For non-commercial use only. Any commercial use of this
 content without the express permission of the author is
                       forbidden

More Related Content

Viewers also liked

P A S E O P O R E L V O L G A
P A S E O  P O R  E L  V O L G AP A S E O  P O R  E L  V O L G A
P A S E O P O R E L V O L G Aguest3bb678
 
Standard 5: The Learning Environment
Standard 5: The Learning EnvironmentStandard 5: The Learning Environment
Standard 5: The Learning Environment
Sonya Price
 
Cuadros De Solrao
Cuadros De SolraoCuadros De Solrao
Cuadros De Solraoguest3bb678
 
Ян Чихольд, Облик книги
Ян Чихольд, Облик книгиЯн Чихольд, Облик книги
Ян Чихольд, Облик книги
Edutainment
 
Ruder tipographica
Ruder tipographicaRuder tipographica
Ruder tipographicaEdutainment
 
The WebQuest
The WebQuestThe WebQuest
The WebQuest
Sonya Price
 
Standard 1: Students
Standard 1: StudentsStandard 1: Students
Standard 1: Students
Sonya Price
 
Презентация мастер-класса Кати Соломеиной
Презентация мастер-класса Кати СоломеинойПрезентация мастер-класса Кати Соломеиной
Презентация мастер-класса Кати Соломеиной
Edutainment
 
Standard 2: Content
Standard 2: ContentStandard 2: Content
Standard 2: Content
Sonya Price
 

Viewers also liked (9)

P A S E O P O R E L V O L G A
P A S E O  P O R  E L  V O L G AP A S E O  P O R  E L  V O L G A
P A S E O P O R E L V O L G A
 
Standard 5: The Learning Environment
Standard 5: The Learning EnvironmentStandard 5: The Learning Environment
Standard 5: The Learning Environment
 
Cuadros De Solrao
Cuadros De SolraoCuadros De Solrao
Cuadros De Solrao
 
Ян Чихольд, Облик книги
Ян Чихольд, Облик книгиЯн Чихольд, Облик книги
Ян Чихольд, Облик книги
 
Ruder tipographica
Ruder tipographicaRuder tipographica
Ruder tipographica
 
The WebQuest
The WebQuestThe WebQuest
The WebQuest
 
Standard 1: Students
Standard 1: StudentsStandard 1: Students
Standard 1: Students
 
Презентация мастер-класса Кати Соломеиной
Презентация мастер-класса Кати СоломеинойПрезентация мастер-класса Кати Соломеиной
Презентация мастер-класса Кати Соломеиной
 
Standard 2: Content
Standard 2: ContentStandard 2: Content
Standard 2: Content
 

Similar to Site creation

Web дизайнер
Web дизайнерWeb дизайнер
Web дизайнерvaxden
 
Netlab
NetlabNetlab
Memo for-webdesigner
Memo for-webdesignerMemo for-webdesigner
Memo for-webdesigner3liblib
 
Типовые менеджерские ошибки
Типовые менеджерские ошибки Типовые менеджерские ошибки
Типовые менеджерские ошибки
Andrey Terekhov
 
11 ключевых ошибок в разработке интернет-проектов
11 ключевых ошибок в разработке интернет-проектов11 ключевых ошибок в разработке интернет-проектов
11 ключевых ошибок в разработке интернет-проектов
borovoystudio
 
Professiya web d
Professiya web dProfessiya web d
Professiya web d
ir_556
 
презентация компании
презентация компаниипрезентация компании
презентация компанииDmitry Galakhov
 
Проектирование пользовательских интерфейсов в компании EPAM Systems
Проектирование пользовательских интерфейсов в компании EPAM SystemsПроектирование пользовательских интерфейсов в компании EPAM Systems
Проектирование пользовательских интерфейсов в компании EPAM Systems
SQALab
 
Портфолио ACE.BY
Портфолио ACE.BYПортфолио ACE.BY
Портфолио ACE.BY
Globinform-S Ltd.
 
04 HappyDev-lite-2015 autumn. Лера Ткачева. О профессии веб-дизайнера.
04 HappyDev-lite-2015 autumn. Лера Ткачева. О профессии веб-дизайнера.04 HappyDev-lite-2015 autumn. Лера Ткачева. О профессии веб-дизайнера.
04 HappyDev-lite-2015 autumn. Лера Ткачева. О профессии веб-дизайнера.
HappyDev-lite
 
FrontEnd: JS + css + html
FrontEnd: JS + css + htmlFrontEnd: JS + css + html
FrontEnd: JS + css + html
Intersog
 
HappyDev-lite-2016 (осень), день 1, 02 Татьяна Шульгина. Процесс разработки в...
HappyDev-lite-2016 (осень), день 1, 02 Татьяна Шульгина. Процесс разработки в...HappyDev-lite-2016 (осень), день 1, 02 Татьяна Шульгина. Процесс разработки в...
HappyDev-lite-2016 (осень), день 1, 02 Татьяна Шульгина. Процесс разработки в...
HappyDev-lite
 
How to create a successful website? REX09
How to create a successful website?  REX09How to create a successful website?  REX09
How to create a successful website? REX09VIS-A-VIS design agency
 
«Правильный процесс дает правильный результат». Как грамотно выстроить работу...
«Правильный процесс дает правильный результат». Как грамотно выстроить работу...«Правильный процесс дает правильный результат». Как грамотно выстроить работу...
«Правильный процесс дает правильный результат». Как грамотно выстроить работу...
borovoystudio
 
составляющие профессионального сайта или перестаньте позорить церковь божью!
составляющие профессионального сайта   или перестаньте позорить церковь божью!составляющие профессионального сайта   или перестаньте позорить церковь божью!
составляющие профессионального сайта или перестаньте позорить церковь божью!Maksym Balaklytskyi
 
составляющие профессионального сайта или перестаньте позорить церковь божью!
составляющие профессионального сайта   или перестаньте позорить церковь божью!составляющие профессионального сайта   или перестаньте позорить церковь божью!
составляющие профессионального сайта или перестаньте позорить церковь божью!Maksym Balaklytskyi
 

Similar to Site creation (20)

Web дизайнер
Web дизайнерWeb дизайнер
Web дизайнер
 
Netlab
NetlabNetlab
Netlab
 
Memo for-webdesigner
Memo for-webdesignerMemo for-webdesigner
Memo for-webdesigner
 
Типовые менеджерские ошибки
Типовые менеджерские ошибки Типовые менеджерские ошибки
Типовые менеджерские ошибки
 
11 ключевых ошибок в разработке интернет-проектов
11 ключевых ошибок в разработке интернет-проектов11 ключевых ошибок в разработке интернет-проектов
11 ключевых ошибок в разработке интернет-проектов
 
Professiya web d
Professiya web dProfessiya web d
Professiya web d
 
Comm predl
Comm predlComm predl
Comm predl
 
презентация компании
презентация компаниипрезентация компании
презентация компании
 
Дизайн сайта
Дизайн сайтаДизайн сайта
Дизайн сайта
 
Проектирование пользовательских интерфейсов в компании EPAM Systems
Проектирование пользовательских интерфейсов в компании EPAM SystemsПроектирование пользовательских интерфейсов в компании EPAM Systems
Проектирование пользовательских интерфейсов в компании EPAM Systems
 
Портфолио ACE.BY
Портфолио ACE.BYПортфолио ACE.BY
Портфолио ACE.BY
 
04 HappyDev-lite-2015 autumn. Лера Ткачева. О профессии веб-дизайнера.
04 HappyDev-lite-2015 autumn. Лера Ткачева. О профессии веб-дизайнера.04 HappyDev-lite-2015 autumn. Лера Ткачева. О профессии веб-дизайнера.
04 HappyDev-lite-2015 autumn. Лера Ткачева. О профессии веб-дизайнера.
 
FrontEnd: JS + css + html
FrontEnd: JS + css + htmlFrontEnd: JS + css + html
FrontEnd: JS + css + html
 
3 Все о разработке интернет проектов
3 Все о разработке интернет проектов3 Все о разработке интернет проектов
3 Все о разработке интернет проектов
 
HappyDev-lite-2016 (осень), день 1, 02 Татьяна Шульгина. Процесс разработки в...
HappyDev-lite-2016 (осень), день 1, 02 Татьяна Шульгина. Процесс разработки в...HappyDev-lite-2016 (осень), день 1, 02 Татьяна Шульгина. Процесс разработки в...
HappyDev-lite-2016 (осень), день 1, 02 Татьяна Шульгина. Процесс разработки в...
 
How to create a successful website? REX09
How to create a successful website?  REX09How to create a successful website?  REX09
How to create a successful website? REX09
 
«Правильный процесс дает правильный результат». Как грамотно выстроить работу...
«Правильный процесс дает правильный результат». Как грамотно выстроить работу...«Правильный процесс дает правильный результат». Как грамотно выстроить работу...
«Правильный процесс дает правильный результат». Как грамотно выстроить работу...
 
Mobile credentials
Mobile credentialsMobile credentials
Mobile credentials
 
составляющие профессионального сайта или перестаньте позорить церковь божью!
составляющие профессионального сайта   или перестаньте позорить церковь божью!составляющие профессионального сайта   или перестаньте позорить церковь божью!
составляющие профессионального сайта или перестаньте позорить церковь божью!
 
составляющие профессионального сайта или перестаньте позорить церковь божью!
составляющие профессионального сайта   или перестаньте позорить церковь божью!составляющие профессионального сайта   или перестаньте позорить церковь божью!
составляющие профессионального сайта или перестаньте позорить церковь божью!
 

More from Edutainment

Презентация Олега Пащенко
Презентация Олега ПащенкоПрезентация Олега Пащенко
Презентация Олега Пащенко
Edutainment
 
Trademark and Symbols
Trademark and SymbolsTrademark and Symbols
Trademark and Symbols
Edutainment
 
Структура визуального текста
Структура визуального текстаСтруктура визуального текста
Структура визуального текста
Edutainment
 
Основы композиции для огурцов и томатов
Основы композиции для огурцов и томатовОсновы композиции для огурцов и томатов
Основы композиции для огурцов и томатов
Edutainment
 
Эмиль Рудер, Типографика
Эмиль Рудер, ТипографикаЭмиль Рудер, Типографика
Эмиль Рудер, Типографика
Edutainment
 
Аллен Херлберт, Сетка
Аллен Херлберт, СеткаАллен Херлберт, Сетка
Аллен Херлберт, Сетка
Edutainment
 
Herlbert the grid
Herlbert the gridHerlbert the grid
Herlbert the gridEdutainment
 
Презентация семинара Владимира Ефимова, часть 1
Презентация семинара Владимира Ефимова, часть 1Презентация семинара Владимира Ефимова, часть 1
Презентация семинара Владимира Ефимова, часть 1
Edutainment
 
Презентация семинара Владимира Ефимова, часть 2
Презентация семинара Владимира Ефимова, часть 2Презентация семинара Владимира Ефимова, часть 2
Презентация семинара Владимира Ефимова, часть 2
Edutainment
 
Kuenstler480
Kuenstler480Kuenstler480
Kuenstler480
Edutainment
 
Interactive space
Interactive spaceInteractive space
Interactive space
Edutainment
 
Interactive space
Interactive spaceInteractive space
Interactive spaceEdutainment
 
Развитие воображения
Развитие воображенияРазвитие воображения
Развитие воображения
Edutainment
 
Оптические иллюзии
Оптические иллюзииОптические иллюзии
Оптические иллюзии
Edutainment
 
Современный язык визуальных коммуникаций
Современный язык визуальных коммуникацийСовременный язык визуальных коммуникаций
Современный язык визуальных коммуникаций
Edutainment
 
Imadesign Creative Branding
Imadesign Creative BrandingImadesign Creative Branding
Imadesign Creative Branding
Edutainment
 

More from Edutainment (16)

Презентация Олега Пащенко
Презентация Олега ПащенкоПрезентация Олега Пащенко
Презентация Олега Пащенко
 
Trademark and Symbols
Trademark and SymbolsTrademark and Symbols
Trademark and Symbols
 
Структура визуального текста
Структура визуального текстаСтруктура визуального текста
Структура визуального текста
 
Основы композиции для огурцов и томатов
Основы композиции для огурцов и томатовОсновы композиции для огурцов и томатов
Основы композиции для огурцов и томатов
 
Эмиль Рудер, Типографика
Эмиль Рудер, ТипографикаЭмиль Рудер, Типографика
Эмиль Рудер, Типографика
 
Аллен Херлберт, Сетка
Аллен Херлберт, СеткаАллен Херлберт, Сетка
Аллен Херлберт, Сетка
 
Herlbert the grid
Herlbert the gridHerlbert the grid
Herlbert the grid
 
Презентация семинара Владимира Ефимова, часть 1
Презентация семинара Владимира Ефимова, часть 1Презентация семинара Владимира Ефимова, часть 1
Презентация семинара Владимира Ефимова, часть 1
 
Презентация семинара Владимира Ефимова, часть 2
Презентация семинара Владимира Ефимова, часть 2Презентация семинара Владимира Ефимова, часть 2
Презентация семинара Владимира Ефимова, часть 2
 
Kuenstler480
Kuenstler480Kuenstler480
Kuenstler480
 
Interactive space
Interactive spaceInteractive space
Interactive space
 
Interactive space
Interactive spaceInteractive space
Interactive space
 
Развитие воображения
Развитие воображенияРазвитие воображения
Развитие воображения
 
Оптические иллюзии
Оптические иллюзииОптические иллюзии
Оптические иллюзии
 
Современный язык визуальных коммуникаций
Современный язык визуальных коммуникацийСовременный язык визуальных коммуникаций
Современный язык визуальных коммуникаций
 
Imadesign Creative Branding
Imadesign Creative BrandingImadesign Creative Branding
Imadesign Creative Branding
 

Site creation

  • 1. Процесс создания сайта или «Cайт как гайдлайны»
  • 2. Ключевые ограничения сайта как дизайнерского продукта Непредсказуемость формата отображения Непредсказуемость поведения текста Непредсказуемость отображения цвета Важность «веса» графики Важность сочетания функциональности с эстетикой Сайт — продукт коллективного труда Сайт часто невозможно закончить...
  • 4. «Основной состав» разработчиков сайта: Арт-директор — качество, сроки, клиент Дизайнер Технический дизайнер? Редактор/технический писатель Копирайтер? Технолог Менеджер проекта — деньги, сроки, клиент
  • 5. Cайт могут сделать 5—7 человек
  • 6. «Cкамейка запасных» при разработке сайта: Дизайнер интерфейсов Флеш-дизайнер Флеш-технолог Иллюстратор Моделлер Визуализатор Бета-тестер
  • 7. Cайт могут делать и более 10 человек
  • 8. 9 этапов создания сайта от брифа до хостинга
  • 9. 1. Клиентский бриф Знакомство, постановка задачи Клиент Менеджер Арт-директор Редактор/копирайтер
  • 10. 2. Структура разделов сайта Логика, навигация, масштабируемость Менеджер Арт-директор Редактор/копирайтер
  • 11. 3. Техническое задание Обязательные элементы, графические и функциональные блоки, технологии Редактор/копирайтер Менеджер (согласование) Арт-директор (согласование) Технолог или тех. директор (согласование)
  • 12. 4. Концепция дизайна Презентация/информация. Гайдлайны и фирменный стиль. Модульная сетка. Варианты. Макеты начальной и внутренней страниц. Менеджер Арт-директор Дизайнер
  • 13. 5. Шаблоны и тех. графика Cоздание шаблонов всех внутренних страниц, обработка графики Менеджер Арт-директор Дизайнер Технический дизайнер
  • 14. 6. Cоздание текстов (контент) Написание и/или редактирование текстов для всех разделов сайта Редактор/копирайтер Менеджер Арт-директор
  • 15. 7. Верстка и сборка сайта Создание HTML-шаблонов, резка и оптимизация графики, верстка страниц Технолог Менеджер Арт-директор Дизайнер Технический дизайнер
  • 16. 8. Перенос на хостинг Тестирование, отладка, физический перенос сайта на хостинг Технолог Менеджер
  • 17. 9. Поддержка и обновление Передача сайта внутрестудийной группе поддержки или группе поддержки со стороны клиента Менеджер
  • 19. Промо-сайт каталога ИКЕА на 2005 год от сайта до радиопьесы
  • 20. Клиентский бриф: «Анонсировать выход нового каталога ИКЕА корпоративным клиентам. Донести до них специальное предложение». Клиент — ИКЕА Менеджер — Вера Дорофеева Арт-директор — Антон Ярусов Редактор/копирайтер — Юрий Швецов
  • 21. Концепция дизайна: «Каталог выходит осенью, давайте оформим анонс в виде осеннего листа и вложим его в каталог».
  • 22. Ответ клиента: «Главное не то, что каталог выходит осенью, а то, что он новый. Давайте думать дальше».
  • 23. Новая концепция дизайна: «Ваши каталоги все видели уже много тысяч раз, предлагаем на этот раз дать вашим клиентам послушать каталог».
  • 24. Ответ клиента: «Интересно. Будем делать».
  • 28. И еще... Конверт С4 для отправки каталога по почте Два макета А4 в журналы 10 баннеров различного формата Директ-мейл
  • 30. © 2009—2010 Anton Yarusov, yarusov@gmail.com For non-commercial use only. Any commercial use of this content without the express permission of the author is forbidden