Главная Другое
Экономика Финансы Маркетинг Астрономия География Туризм Биология История Информатика Культура Математика Физика Философия Химия Банк Право Военное дело Бухгалтерия Журналистика Спорт Психология Литература Музыка Медицина |
страница 1![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() LIFE PATTERNS Бриф на дизайн сайта Июнь, 2012
ОглавлениеОписание продукта 3 Домашняя страница 3 Страница категории / результатов поиска 4 Страница паттерна 5 Целевая аудитория 7 Требования к дизайну 7 UPDATE 2 10
Описание продуктаЛьвиная доля запросов в поисковиках начинается со слов “Как [сделать что-то]”. Редко когда сразу получается найти адекватное решение. В лучшем случае придется проанализировать содержимое пары десятков ресурсов на тему. Когда же набираешь “Что такое [нечто]” одной из первых ссылок попадаешь на Википедию. Целью проекта является создание ресурса, который будет агрегировать ответы на вопросы “как делать”. В настоящее время в сети существуют сотни сервисов, которые позволяют делиться разного рода контентом. Так SlideShare позволяет публиковать презентации, Flickr фото, YouTube видео. Подобным образом Life Patterns позволит публиковать паттерны решений тех или иных вопросов. Простым удобным способом крутой бордер сможет поделиться с новичками нюансами выбора снаряжения, заядлый путешественник расскажет, как самостоятельно спланировать маршрут и забронировать отель, а заядлый собачник даст совет, как не попасть впросак при покупке породистого дога. Вместо плоского списка в текстовом редакторе носителю знаний понадобится оформить набор простых слайдов и указать зависимости между ними, после чего паттерн станет доступен:
Такую инструкцию будет проще читать, ею легко будет поделиться, она будет отличаться определенной интерактивностью. На данном этапе сервис находится на стадии прототипа и стоит задача реализовать в дизайне базовый функционал. К базовому функционалу можно отнести следующие страницы:
Остановимся подробнее на каждой из них. Домашняя страницаОсновные функции домашней страницы:
Обязательные элементы страницы:
* - элемент, который должен присутствовать на всех страницах сайта Страница категории / результатов поискаФормально страница категории ничем не будет отличаться от страницы результатов поиска. Страница категории должна выглядеть так, будто наименование категории вбили в поисковую строку и наоборот, результаты поиска должны выглядеть так, будто пользователь открыл категорию с таким наименованием как содержимое поисковой строки. Основная функция данной страницы – предоставить пользователю доступ к паттернам по определенной теме. Обязательные элементы страницы:
* - данные элементы можно опустить, если того потребует дизайн
Страница паттернаОсновная функция страницы – дать возможность ознакомиться с выбранным паттерном. Обязательные элементы страницы:
Остановимся на виджете более подробно. Под виджетом следует понимать компонент, который может быть встроен на любую веб-станицу любого стороннего сервису сайта, чтобы посетители этого сайта могли пользоваться контентом сервиса, не переходя на сайт самого сервиса. Примерами таких виджетов являются видеоролики Youtube или презентации SlideShare публикуемые на страницах форумов и блогов. В случае с Life Patterns виджет будет “проигрывать” слайды паттерна. Паттерн должен одинаково выглядеть, что на сайте Life Patterns, что на стороннем сайте. Единственным отличием будет наличие/отсутствие наименования паттерна в шапке виджета (на сайте Life Patterns наименование будет элементом страницы, а не элементом виджета). Конструкцию виджета можно разделить на две части:
Проигрыватель состоит из следующих элементов управления:
Паттерны будут состоять из связанных определенным образом друг с другом слайдов. Структура паттерна может быть линейной, древовидной или вообще циклической:
Слайд 4 Слайд 3 Слайд 2 Слайд 1
Слайд 4.1 Слайд 3.1 Слайд 2.1 Слайд 1 Слайд 3.3 Слайд 4.3 Слайд 4.2 Слайд 3.2 Слайд 2.2
Слайд 4.1 Слайд 3.1 Слайд 2.1 Слайд 1 Слайд 4.2 Сами слайды в большинстве своем будут иметь следующую структуру:
Роль контента могут выполнять: изображение, видеоролик, карта с маршрутом, ссылка на файл, список вариантов чего-либо на выбор и т.д. и т.п. Целевая аудиторияЦелевой аудиторией являются активные интернет-пользователи 15-45 лет. Требования к дизайну
Нужно реализовать в дизайне:
P.S. Попытка “не дизайнера” сделать сайт в стиле метро (может поможет понять куда следует идти). ![]() UPDATE 2Я решил сэкономить мое и ваше время и максимально детально описал каждую из страниц. Текст разбавлен комментариями относительно ваших вариантов дизайна, комментарии начинаются с “#11” и “#9”.
На рис. 1 представлена принципиальная схема главной страницы. ![]() Где:
1 – шапка страницы 2 – описание сервиса 3 – закладки 4 – паттерны 5 – подвал страницы
Разберем подробно каждый из блоков. Блок №1. Шапка сайта В зависимости от того, просматривает страницу зарегистрированный или анонимный пользователь, шапка сайта должна выглядеть по-разному. Анонимный пользователь должен видеть: лого, строку поиска и кнопку “Sign in”. Зарегистрированный пользователь: лого, строку поиска, кнопку “добавить паттерн”, имя пользователя (или его юзерпик) и кнопку “Sign out”. #9: Название сервиса лучше разделить на два слова и сделать его чуть более “легким”. Расстояние между шапкой и контентом слишком мало. Кнопку “Sign in” возможно (решайте сами) стоит оформить в виде ссылки (в интерфейсах WP7 и сайтах Microsoft больше используется почему-то такой вариант). “Find a pattern” можно опустить, а вместо него в самом поле ввода отображать пример запроса или пояснение как Фэйсбуке или Вконтакте. Может быть перед строкой поиска стоит поставить “How to” (решайте сами). #11: Не стоит заморачиваться дизайном логотипа. Вероятнее всего название сервиса претерпит изменение, поэтому можно обойтись простой надписью подходящим шрифтом. Что касается входа в сервис, я решил, что не стоит перегружать шапку лишними элементами – достаточно ссылки “Sign in”. Поисковая строка смотрится неплохо, но не очень органично из-за желтого баннера справа. Желтый баннер, я так понимаю, относится к описанию сервиса – его мы обсудим ниже. Блок №2. Описание сервиса Под описанием имеется в виду баннер типа того, что можно наблюдать под шапкой на главной странице Loopt’а (https://www.loopt.com/). Текст баннера пока в разработке, но содержимое будет примерно таким же + большая кнопка/ссылка “Sign up”. #9, #11: Нужно разработать баннер и расположить его согласно принципиальной схеме на рис.1. Блок №3. Закладки Под закладкой будем понимать ссылку на ленту с паттернами, удовлетворяющими какому-либо определенному критерию. В первоначальной версии брифа роль закладок играли “категории”, но теперь мы переосмыслили их. Закладки (“Bookmarks”) должны быть оформлены в виде метро-плиток и могут быть трех видов:
Т.е. в блоке №3 у зарегистрированного пользователя могут соседствовать плитки категорий (н-р “Sport”, “Tourism”, “Food”), плитки отдельных авторов (н-р “John Galt”, “ Barack Obama”) и плитки с сохраненными запросами (н-р запрос “How to make lasagne”, сохраненный под именем “Lasagne”). Вне зависимости от того, к какому виду относятся плитки, выглядеть они должны одинаково: наименование + бэкграунд (необязательный). Для категорий роль бэкграунда могут играть пиктограммы или любые другие изображения, для авторов – их фотографии. Наименование закладки может быть двустрочным и даже выходить за поля – это не страшно и абсолютно не мешает (как давний пользователь Windows Phone’a, смею вас в этом заверить). Вернемся к описанию Блока №3 главной страницы. Анонимные пользователи, зайдя на страницу, должны видеть закладки с популярными категориями. Закладки должны отображаться в две колонки, их общее количество не будет превышать 8-10 штук. #9: Категорий, в конечном счете, будет много, и присваивать каждой из них свой цвет, наверное, будет лишним. Разным цветом можно отображать разные типы закладок (на ваше усмотрение). #11: Отлично реализовано. Единственное, я бы поплотнее друг к другу плитки сделал и надписи сделал чуть мельче. Ну и “all categories” переобозвал бы в “more” и убрал бы стрелочку. Блок №4. Паттерны Данного блока небыло в первоначальной версии брифа. В данном блоке пользователь должен наблюдать список популярных паттернов. Описание элементов списка, фигурирующее в первоначальной версии брифа, актуально и сейчас. #9: Если рассматривать список паттернов, который на странице с результатами поиска, то к нему есть несколько замечаний. Текст можно сделать более крупным. Автор тоже должен быть в виде ссылки. Социальные кнопки здесь нужны для извещения пользователя о количестве лайков и публикаций данного паттерна в соответствующих социальных сетях, т.е. нужен вариант лого соцсети + цифра. #11: Отлично реализовано, за исключением нескольких штрихов. Кнопка “Read more” встречается в метро-интерфейсах только в контексте “показать больше элементов” списка. Доступ “внутрь” элементов списка производится по клику на сами элементы, а в нашем случае на их заголовки. При этом заголовки, по идее, должны быть цвета остальных ссылок на странице, чтобы вызывать соответствующие ассоциации. “Show more results” лучше сделать ссылкой, я думаю. Блок №5. Подвал сайта Описание подвала сайта, фигурирующее в первоначальной версии брифа, актуально и сейчас. #9: Подвал немного захламлен. #11: Идеальный подвал.
![]() Где:
1 – шапка страницы 2 – закладки 3 – паттерны 4 – подвал страницы Рис. 2 Данный шаблон будет использоваться следующими страницами:
Т.е. любая закладка будет вести на страницу, реализованную на базе этого шаблона. На рис. 2 представлена принципиальная схема такой страницы. Шапка и подвал сайта описаны выше, поэтому разберем только особенности блоков №№2,3. Блок №2. Закладки Отличий закладок на данной странице от закладок на главной практически нет. Можно отметить лишь следующее:
#9, #11: Требуется добавить данный блок на соответствующие страницы, а лишнее убрать. Блок №3. Паттерны Данный блок будет несколько отличаться от подобного блока на главной странице, но отличия будут касаться только шапки списка. Можно назвать три основных отличия:
Не забудем про “Show more patterns” для подгрузки новой порции паттернов и отличия на этом заканчиваются. #9: Очень понравилось “search result for …” на странице с результатами поиска, но боюсь, в данном стиле придется сделать табы, а наименование сделать шрифтом побольше и с заглавными. #11: О том, что список выглядит отлично, я уже говорил – вам нужно лишь поработать над шапкой списка, добавив в нее недостающие элементы.
Описание страницы, фигурирующее в первоначальной версии брифа, актуально и сейчас. Добавлю лишь несколько пожеланий:
Пример организации пространства в виджете можно посмотреть на рис.3. Рис. 3 ![]() #9: Нужно перерисовать виджет и слайды, учитывая пожелания озвученные выше. Кроме того социальные кнопки стоит как-то вынести из области с основным контентом виджета. #11: Вам так же нужно перерисовать виджет и слайды в соответствии с озвученным выше списком. Социальные кнопки нужно вынести за основную область. Слайд с выбором вариантов не подразумевает множественного выбора. По пиктограмме“Send to email” не очень понятно, что она делает. Смотрите также: Когда же набираешь "Что такое [нечто]" одной из первых ссылок попадаешь на Википедию. Целью проекта является создание ресурса, который будет агрегировать ответы на вопросы "как делать"
129.51kb.
1 стр.
Эссе «Моя педагогическая философия» Когда поет душа? Когда её не душат
44.18kb.
1 стр.
Вопросы и ответы
642.14kb.
4 стр.
3. Саунд не похож на тот звук, который обычно получается во Фрутике
342.46kb.
1 стр.
Нечто среднее между избеганием и осуждением
137.15kb.
1 стр.
Урок Службы Интернет Что такое службы?
134.14kb.
1 стр.
-
7512.83kb.
39 стр.
Для начала. Структура рассмотренного вопроса
131.43kb.
1 стр.
Что такое DoS?
73.3kb.
1 стр.
Что такое вич/спид? Вич
43.09kb.
1 стр.
Религиозно-философская публицистика Л. Н. Толстого
973.36kb.
6 стр.
Что такое водно-болотные угодья? 23.77kb.
1 стр.
|