Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Веб-дизайнер: учимся делать скетчи

3,939 views

Published on

Видеозапись открытого занятия «Веб-дизайнер:
учимся делать скетчи» можно посмотреть здесь: http://bit.ly/1grRPbe

Скетчинг — один из основных этапов, предшествующих разработке практически любого продукта: от сайта-визитки, до сложной многофункциональной системы.

Создание любого успешного сайта начинается с идеи. Визуализация мысли позволяет перенести перенести идею из ментальной области в реальный мир.

Из презентации вы узнаете:
— Об основных правилах скетчинга.
— Какие инструменты использовать.
— Как рисовать интерфейсы.
— Что еще почитать по теме.

Published in: Design
  • Be the first to comment

Веб-дизайнер: учимся делать скетчи

  1. 1. Открытое онлайн-занятие Веб-дизайнер: учимся делать скетчи Балакирева Станислава проектировщик пользовательских интерфейсов UsabilityLab
  2. 2. БИЗНЕС ПОЛЬЗОВАТЕЛЬ СБОР ТРЕБОВАНИЙ хороший продукт появляется на пересечении требований бизнеса, пользователей и технологий ТЕХНОЛОГИИ
  3. 3. ЧТО ТАКОЕ СКЕТЧИНГ? Скетч — это эскиз, быстрый рисунок Скетчинг — процесс создания скетчей
  4. 4. Неверные установки Я не умею рисовать…
  5. 5. Неверные установки СКЕТЧИНГ ЭТО НЕ РИСОВАНИЕ!
  6. 6. ДЛЯ ЧЕГО ИСПОЛЬЗУЕТСЯ СКЕТЧИНГ Мы используем скетчи, чтобы • • • • • • думать документировать экспериментировать объяснять и общаться совершить 80% ошибок найти верное решение
  7. 7. ВИДЫ СКЕТЧЕЙ Исследовательский • • • его понимаете только вы низкая детализация очень много разновидностей
  8. 8. ВИДЫ СКЕТЧЕЙ Изящный • • • • лучшего качества более детализированный понятен другими более реалистичен
  9. 9. ОСНОВНЫЕ ПРАВИЛА СКЕТЧИНГА • • • • • • Чем быстрее, тем продуктивнее Чем «страшнее», тем лучше Чем больше скетчей, тем больше идей Не критикуйте качество Не стремитесь к совершенству Не фокусируйтесь на деталях
  10. 10. ЗАПАСИТЕСЬ ИНСТРУМЕНТАМИ • • Чернила лучше, чем графит • Цветной маркет для привлечения внимания и выделения самых важных мест Тонкие ручки и маркеры для комментариев, серый маркер для затенения, увеличения глубины
  11. 11. ИНСТРУМЕТЫ
  12. 12. ЗАПАСИТЕСЬ ИНСТРУМЕНТАМИ Выберите блокнот или скетчбук • Вы можете использовать скетчбуки с разметками или с чистыми листами • Если под рукой нет скетчбука, всегда можно взять лист А4
  13. 13. ЧЕМ ПРОЩЕ, ТЕМ ЛУЧШЕ
  14. 14. ИСПОЛЬЗУЙТЕ СТИКЕРЫ
  15. 15. Тренируйтесь
  16. 16. Тренируйтесь
  17. 17. БЕРИТЕСЬ ЗА ДЕЛО • • Линии должны быть прямыми • • • • Используйте серый маркер для придания глубины Жирным выделяйте то, что должно привлекать больше внимания Если напортачили — продолжайте! Если совсем все плохо — возьмите новый лист Начинайте с тонких линий, затем придавайте глубину и объем
  18. 18. ИЩИТЕ ЛЕГКИЕ ПУТИ Элементы интерфейсов • Научитесь рисовать стандартный элементы интерфейсов • Добавляйте тени, объем
  19. 19. ИЩИТЕ ЛЕГКИЕ ПУТИ Элементы интерфейсов Стандартные поля ввода данных
  20. 20. Шапка ЛЕГКИЕ ПУТИ Таблица Текст Пользователь с описание Картинка с описанием Видео с описанием
  21. 21. Выноски с различными ЛЕГКИЕ ПУТИ вариантами тени Слайд-шоу
  22. 22. ДЕТАЛИЗИРУЙТЕ Работайте со слоями • Начните с маркера серого цвета и постепенно добавляйте темные слои (маркеры+ручки) • Не начинайте с ручки, если вы потом добавите маркер, чернила расплывутся
  23. 23. Что почитать? Книги: 1.Bill Buxton “Sketching User Experiences: Getting the Design Right and the Right Design ”. – Morgan Kaufmann; 1 edition, 2007 2. Dan Roam “The back of the napkin”. - Portfolio Hardcover; Expanded edition, 2009 Статьи и презентации: 1. http://uxdesign.smashingmagazine.com/2011/12/13/messy-art-ux-sketching/ 2. http://www.slideshare.net/pboersma/good-design-faster-at-ux-sofia 3. http://www.uxbooth.com/articles/tools-for-sketching-user-experiences/ 4. http://www.uxmatters.com/mt/archives/2010/05/sketches-and-wireframes-and-prototypes-ohmy-creating-your-own-magical-wizard-experience.php 5. http://www.slideshare.net/pubsmith/sketching-interfaces-workshop-interactions12-dublin 6. http://ui-patterns.com/patterns 7. http://uxdesign.smashingmagazine.com/2012/06/06/design-patterns-when-breaking-rules-ok/
  24. 24. Станислава Балакирева Ведущий проектировщик интерфейсов в компании «UsabiltyLab»

×