![]() |
![]() |
|||
|
||||
15 требований к оформлению прототипаПрототип интерфейсов (в нашем случае сайта) — это не только один из этапов проектирования, но и самостоятельный продукт, с которым далеко не всегда работает та же команда, что его создавала. Поэтому мы составили требования к оформлению прототипов. Сначала они были внутренними, но как только мы начали поиски новых проектировщиков, оказалось, что эти требования могут быть полезны не только нам, и мы сделали этот материал.
Необходим сайт, мобильное приложение, услуги по SEO или контекстной рекламе?
Тендерная площадка WORKSPACE поможет выбрать оптимального исполнителя. База проекта насчитывает более 10 500 агентств. Сервис БЕСПЛАТЕН для заказчиков.
Глубина проработки1. Все повторяющиеся элементы должны быть сделаны через мастера. Мастера должны быть разложены по папкам и проименованы в соответствии со своим предназначением. 2. Обязательно использовать встроенный редактор стилей — все стили текста в прототипе задаются только через него. Чем стилей меньше, тем лучше, отталкиваемся от семантики текстов и стандартных HTML-тегов: h1, h2 и т.д. 3. Интерактивные элементы нужно программировать и, если срабатывание не очевидно, то помечать их для заказчика специальным знаком — у нас принят треугольник. 4. Необходимость залинковки прототипа обсуждаем с менеджером проекта. Если прототип залинкован частично, то отмечаем элементы, на которые можно нажать, треугольником. Не забываем подчеркивать псевдоссылки пунктирной линией. 5. Однотипные разделы можно не дублировать, показывая один раз. Тем не менее, если для них есть контент, размещение которого необходимо планировать, то делаем все страницы. Внешний вид6. В основе прототипа должны быть сетки. Удобнее всего использовать классические сетки 12/16 колонок, но лучше всего согласовывать это с арт-директором, который будет курировать дизайн. Все объекты прототипа располагаются по сетке, далее дизайнеры сохраняют такое размещение. 7. При наличии реальных текстов, их можно и нужно использовать в прототипе. Запрещено использовать Lorem Ipsum и другие тексты, не имеющие отношения к проекту. 10. Используйте осмысленное цветовое кодирование в прототипе. Другое13. Файлы, страницы, мастера и пр. необходимо именовать только латиницей. При выгрузке прототипа на сервер, не работает все, где использована кириллица. Над иллюстрациями с статье работал Юрий Панасюк. От редакции
Если у вас амбициозная задача, которую необходимо наполнить креативом и качественно реализовать – изучите рейтинг креативности веб-студий. Рейтинг представляет собой топ-100 из самых креативных команд России, Украины и Беларуси, а также подрейтинги относительно побед, одержанных в каком-либо конкретном конкурсе из шести: «Рейтинг Рунета», «Золотой сайт», Webby Awards, CSS Design Awards, Awwwards и FWA. Прототип интерфейсов (в нашем случае сайта) — это не только один из этапов проектирования, но и самостоятельный продукт, с которым далеко не всегда работает та же команда, что его создавала. Поэтому мы составили требования к оформлению прототипов. Сначала они были внутренними, но как только мы начали поиски новых проектировщиков, оказалось, что эти требования могут быть полезны не только нам, и мы сделали этот материал.
Необходим сайт, мобильное приложение, услуги по SEO или контекстной рекламе?
Тендерная площадка WORKSPACE поможет выбрать оптимального исполнителя. База проекта насчитывает более 10 500 агентств. Сервис БЕСПЛАТЕН для заказчиков.
Глубина проработки1. Все повторяющиеся элементы должны быть сделаны через мастера. Мастера должны быть разложены по папкам и проименованы в соответствии со своим предназначением. 2. Обязательно использовать встроенный редактор стилей — все стили текста в прототипе задаются только через него. Чем стилей меньше, тем лучше, отталкиваемся от семантики текстов и стандартных HTML-тегов: h1, h2 и т.д. 3. Интерактивные элементы нужно программировать и, если срабатывание не очевидно, то помечать их для заказчика специальным знаком — у нас принят треугольник. 4. Необходимость залинковки прототипа обсуждаем с менеджером проекта. Если прототип залинкован частично, то отмечаем элементы, на которые можно нажать, треугольником. Не забываем подчеркивать псевдоссылки пунктирной линией. 5. Однотипные разделы можно не дублировать, показывая один раз. Тем не менее, если для них есть контент, размещение которого необходимо планировать, то делаем все страницы. Внешний вид6. В основе прототипа должны быть сетки. Удобнее всего использовать классические сетки 12/16 колонок, но лучше всего согласовывать это с арт-директором, который будет курировать дизайн. Все объекты прототипа располагаются по сетке, далее дизайнеры сохраняют такое размещение. 7. При наличии реальных текстов, их можно и нужно использовать в прототипе. Запрещено использовать Lorem Ipsum и другие тексты, не имеющие отношения к проекту. 10. Используйте осмысленное цветовое кодирование в прототипе. Другое13. Файлы, страницы, мастера и пр. необходимо именовать только латиницей. При выгрузке прототипа на сервер, не работает все, где использована кириллица. Над иллюстрациями с статье работал Юрий Панасюк. От редакции
Если у вас амбициозная задача, которую необходимо наполнить креативом и качественно реализовать – изучите рейтинг креативности веб-студий. Рейтинг представляет собой топ-100 из самых креативных команд России, Украины и Беларуси, а также подрейтинги относительно побед, одержанных в каком-либо конкретном конкурсе из шести: «Рейтинг Рунета», «Золотой сайт», Webby Awards, CSS Design Awards, Awwwards и FWA. Автор: Никита Михеенков, Nimax (Руководитель) Комментарии экспертов
![]() Рекомендуем: |
![]() |
![]() |
||
Реклама
© 2006-2018 CMS Magazine Правовая информация Статьи партнеров Реклама
CMS Magazine – электронное СМИ. Эл № ФС 77-32705. Статьи партнеров Рейтинг Рунета: рейтинг веб студий, рейтинг seo компаний, рейтинг CMS. |
![]() |
![]() |