Дизайн интерфейса (визуализация данных)

Бюджет: 40 000 /заказ

[21.03.2012 | 20:18] [внесены изменения: 26.03.2012 | 15:42]

Безопасных сделок: 6

Отзывы фрилансеров: + 7 - 0

Зарегистрирован на сайте 14 лет и 8 месяцев

Существует приложение – www.gapminder.org/world на флеше.
Делаем аналог на JS – fom.ru/vis/poll-viewer/

Сейчас дизайн сделан по программерски. В рамках поиска постоянного партнера по разработке дизайна сложных интерфейсов и дашбордов проводим конкурс. Нужно разработать дизайн интерактивного приложения fom.ru/vis/poll-viewer/.

Требования:
1) 2 режима размера (текущий и фулскрин)
2) отображение на fom.ru (см скрины с другими графиками) и как отдельного приложения
3) добавить текст вопроса, ответа и ед измерения ("%", "руб", "$", "шт") к осям. Сейчас, только смотря на барабан, можно понять, что по оси Y или X. Хорошо реализовано у www.gapminder.org/world
4) Добавить возможность следить за выбранными пузырьками в динамике. Он будет оставлять хвост как здесь – www.gapminder.org/world
5) Сохранить режимы "Пузырьковая диаграмма" и "Сравнить регионы"
6) Всплывающее окошко в идеале должно отображать только название региона
7) Добавить возможность самому задавать размер диаметра пузырька по умолчанию. См www.gapminder.org/world
8) Сделать тач интерфейс. Чтобы было удобно пользоваться на айпаде. Сейчас пальцем трудно попадать в пузырьки.

Победитель получает всю сумму.

Разделы:

Дизайн / Интерфейсы

Конкурс

Посмотреть другие конкурсы

Настоящий конкурс не является публичным конкурсом в соответствии с гражданским законодательством Российской Федерации. Участие в данном мероприятии не гарантирует определение победителя, а также выплату вознаграждения. Площадка FL не является организатором конкурса. Нажимая кнопку «Принять участие в конкурсе», вы подтверждаете, что согласны участвовать на описанных условиях.

Участники

Всего участников: 17
Кандидатов: 1
Забаненных: 0

Статистика по конкурсу

Сегодня опубликовано 0 работ и 0 комментариев

Конкурс окончен 08.04.2012

Конкурс длился с 21.03.2012 до 08.04.2012

Победители объявлены

Конкурсные работы

Женя Волков [21.03.2012 | 21:11] [внесены изменения: 06.04 2012 | 18:46]

Пока сделал целиком по заданию. Есть картинка, в сайте как выглядит, и подробная с объяснениями.

По поводу тач-скрина: Можно реализовать увеличительное стекло при длительном нажатии, как это реализовано везде в iOS, например.

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

Добавлено 06.04.2012 в 18:46
Добавлено 01.04.2012 в 17:55
Добавлено 06.04.2012 в 18:46

Женя Волков [04.04.2012 | 15:11]
Кирилл, какие-нибудь комментарии?

Кирилл, какие-нибудь комментарии?
- Ссылка
- Вверх
- Kirill B [05.04.2012 | 00:34]
  бегаю как белка в колесе. комментарии завтра от моего лица напишет девушка продюсер Ксения. я ей голосом скажу)) спасибо за трудолюбие Женя. По твоей инфографике много позитива. Жди еще одну напрямую уже :)
  
  бегаю как белка в колесе. комментарии завтра от моего лица напишет девушка продюсер Ксения. я ей голосом скажу)) спасибо за трудолюбие Женя. По твоей инфографике много позитива. Жди еще одну напрямую уже :)
  
  Ссылка
  
  Вверх
- Kirill B [06.04.2012 | 13:05]
  про шкалы:
  кандидаты там для примера просто. смысл пузырьковой диаграммы в том, что она дает возможность сравнивать объекты (в нашем случае регионы) по 5 параметрам одновременно:
  -положение по оси X (например: "Наш взгяд положение дел в регионе хороше, нормальное или плохое? Ответ: ПЛОХОЕ")
  -положение по оси Y (например: "Положение в регионе улучшается, не меняется или ухудшается? Ответ УХУДШАЕТСЯ")
  -диаметр (например: "Вы хотите участвовать в акциях протеста? Ответ: ДА")
  -цвет (принадлежность в фед округу)
  -дата (положение пузырька во времени)
  
  Так мы увидим картину в целом по России и посмотрим на корреляцию желания протестовать и ощущения неудовлетворенностью дел в регионе. Таких примеров может быть масса. По оси можно откладывать например цену на водку в регионе, вдруг есть корреляция с протестными настроениями)) или например взять по оси Х проголосовавших за Зюганова, а по оси Y средний возраст жителей региона. Может быть есть прямая зависимость тем выше ср возраст тем больше процент голосующих за Зюганова. Сочинять можно сколько угодно)))
  
  По дизайну: в целом все правильно, но выглядит немного как скейтч на дизайн. Не хватает мелочей. И еще нет средних значений по фед округам.
  
  про шкалы:
  кандидаты там для примера просто. смысл пузырьковой диаграммы в том, что она дает возможность сравнивать объекты (в нашем случае регионы) по 5 параметрам одновременно:
  -положение по оси X (например: "Наш взгяд положение дел в регионе хороше, нормальное или плохое? Ответ: ПЛОХОЕ")
  -положение по оси Y (например: "Положение в регионе улучшается, не меняется или ухудшается? Ответ УХУДШАЕТСЯ")
  -диаметр (например: "Вы хотите участвовать в акциях протеста? Ответ: ДА")
  -цвет (принадлежность в фед округу)
  -дата (положение пузырька во времени)
  
  Так мы увидим картину в целом по России и посмотрим на корреляцию желания протестовать и ощущения неудовлетворенностью дел в регионе. Таких примеров может быть масса. По оси можно откладывать например цену на водку в регионе, вдруг есть корреляция с протестными настроениями)) или например взять по оси Х проголосовавших за Зюганова, а по оси Y средний возраст жителей региона. Может быть есть прямая зависимость тем выше ср возраст тем больше процент голосующих за Зюганова. Сочинять можно сколько угодно)))
  
  По дизайну: в целом все правильно, но выглядит немного как скейтч на дизайн. Не хватает мелочей. И еще нет средних значений по фед округам.
  
  Ссылка
  
  Вверх
  - Женя Волков [06.04.2012 | 14:26]
    
    Про параметры совершенно согласен. Единственное мое предложение — заранее разграничить возможные параметры для каждой оси, чтобы было как можно меньше повторений между осями. Так и смысл всего графика будет крепче и четче.
    
    Насчет мелочей, в принципе да, надо доделывать многие вещи, они выглядят сумбурно. Но в целом я пытался сохранить стиль сайта — цвета и шрифт взял из основного дизайна.
    
    Про параметры совершенно согласен. Единственное мое предложение — заранее разграничить возможные параметры для каждой оси, чтобы было как можно меньше повторений между осями. Так и смысл всего графика будет крепче и четче.
    
    Насчет мелочей, в принципе да, надо доделывать многие вещи, они выглядят сумбурно. Но в целом я пытался сохранить стиль сайта — цвета и шрифт взял из основного дизайна.
    
    Ссылка
    
    Вверх
  - Женя Волков [06.04.2012 | 17:34]
    
    А средние значения по округам это что? Усредненное с Х, Y и размера?
    
    А средние значения по округам это что? Усредненное с Х, Y и размера?
    
    Ссылка
    
    Вверх
  - Женя Волков [06.04.2012 | 18:47]
    
    Обновил первый скриншот и добавил пояснения по работе некоторых контролов
    
    Обновил первый скриншот и добавил пояснения по работе некоторых контролов
    
    Ссылка
    
    Вверх

Ekaterina Milkinska [21.03.2012 | 22:35]

Добрый день.
Готова поучавствовать.

Eugene Guroff [21.03.2012 | 22:50]

☻

Владислав Китов [22.03.2012 | 08:45]

Владислав Китов [22.03.2012 | 16:55]
Есть несколько вопросов:
Каковы минимальные размеры для интерфейса?
Планируется ли его встраивание на какой нибудь сайт?
На сколько допустимо изменение расположения элементоа?

Спасибо

Есть несколько вопросов:
Каковы минимальные размеры для интерфейса?
Планируется ли его встраивание на какой нибудь сайт?
На сколько допустимо изменение расположения элементоа?

Спасибо
- Ссылка
- Вверх
- Kirill B [22.03.2012 | 19:22]
  1. Минимальные размеры по ширине можно посмотреть здесь – st.free-lance.ru/projects... (см ширину блоков с графиками) у меня получилась 706px. Минимальную по высоте задать слету не смогу, думаю надо отталкиваться от требования, что продукт должен обладать тач-интерфейсом для айпада, а также нормально отображаться на сайте fom.ru. Размеры айпада 1024х768px, а область видимости на стандартных мониторах не более 700px. Наверно надо учесть ограничение по области видимости на мониторах и ноутах, поэтому давайте ограничим высоту где то до 680px. Итого высота – 680px, ширина – 706px
  2. Будет встроен на сайте fom.ru (см скрин из описания).
  3. Расположение, формы, дизайн все на ваше усмотрение.
  
  1. Минимальные размеры по ширине можно посмотреть здесь – st.free-lance.ru/projects... (см ширину блоков с графиками) у меня получилась 706px. Минимальную по высоте задать слету не смогу, думаю надо отталкиваться от требования, что продукт должен обладать тач-интерфейсом для айпада, а также нормально отображаться на сайте fom.ru. Размеры айпада 1024х768px, а область видимости на стандартных мониторах не более 700px. Наверно надо учесть ограничение по области видимости на мониторах и ноутах, поэтому давайте ограничим высоту где то до 680px. Итого высота – 680px, ширина – 706px
  2. Будет встроен на сайте fom.ru (см скрин из описания).
  3. Расположение, формы, дизайн все на ваше усмотрение.
  
  Ссылка
  
  Вверх

Дмитрий Зверев [22.03.2012 | 12:49]

Iuliana Maxim [23.03.2012 | 20:14]

Александр Дорофеев [25.03.2012 | 11:19]

Елена Харлап [25.03.2012 | 15:04]

Ольга Саенко [26.03.2012 | 18:25]

Иван Савон [27.03.2012 | 00:10]

Андрей Клочков [28.03.2012 | 11:39]

Денис Манжиков [28.03.2012 | 13:23]

Inna Meshcheryakova [28.03.2012 | 17:55]

Andrey Kamensky [04.04.2012 | 14:32]

Владимир Голдобин [04.04.2012 | 23:18]

Serg Evseev [06.04.2012 | 08:52]

Интерфейс будет готов завтра.

Станислав Бондаренко [06.04.2012 | 23:26] [внесены изменения: 07.04 2012 | 23:48]

Стиль можно поменять

Добавлено 07.04.2012 в 23:47
Добавлено 07.04.2012 в 23:47
Добавлено 07.04.2012 в 23:47

Свернуть все ветви комментариев (8)

Женя Волков [21.03.2012 | 21:11] [внесены изменения: 06.04 2012 | 18:46]

Пока сделал целиком по заданию. Есть картинка, в сайте как выглядит, и подробная с объяснениями.

По поводу тач-скрина: Можно реализовать увеличительное стекло при длительном нажатии, как это реализовано везде в iOS, например.

Еще отмечу, что для шкал необходимо отобрать какие-то определенные параметры, так, чтобы в одной шкале не встречались параметры другой шкалы. В этом случае график будет принимать форму линии и ценности представлять не будет. Точно так же необходимо и определить какие величины могут кодироваться размером, и это явно должны быть величины, отсутствующие в шкалах. Потому что сравнить двух кандидатов, например по шкалам можно, но если третьего добавить как размер пузыря, то не понятно как сравнивать, совсем другая размерность.
- Добавлено 06.04.2012 в 18:46
- Добавлено 01.04.2012 в 17:55
- Добавлено 06.04.2012 в 18:46
- Ссылка
- Вверх
- Свернуть ветвь (6)
- Женя Волков [04.04.2012 | 15:11]
  Кирилл, какие-нибудь комментарии?
  
  Кирилл, какие-нибудь комментарии?
  
  Ссылка
  
  Вверх
  - Kirill B [05.04.2012 | 00:34]
    
    бегаю как белка в колесе. комментарии завтра от моего лица напишет девушка продюсер Ксения. я ей голосом скажу)) спасибо за трудолюбие Женя. По твоей инфографике много позитива. Жди еще одну напрямую уже :)
    
    бегаю как белка в колесе. комментарии завтра от моего лица напишет девушка продюсер Ксения. я ей голосом скажу)) спасибо за трудолюбие Женя. По твоей инфографике много позитива. Жди еще одну напрямую уже :)
    
    Ссылка
    
    Вверх
  - Kirill B [06.04.2012 | 13:05]
    
    про шкалы:
    кандидаты там для примера просто. смысл пузырьковой диаграммы в том, что она дает возможность сравнивать объекты (в нашем случае регионы) по 5 параметрам одновременно:
    -положение по оси X (например: "Наш взгяд положение дел в регионе хороше, нормальное или плохое? Ответ: ПЛОХОЕ")
    -положение по оси Y (например: "Положение в регионе улучшается, не меняется или ухудшается? Ответ УХУДШАЕТСЯ")
    -диаметр (например: "Вы хотите участвовать в акциях протеста? Ответ: ДА")
    -цвет (принадлежность в фед округу)
    -дата (положение пузырька во времени)
    
    Так мы увидим картину в целом по России и посмотрим на корреляцию желания протестовать и ощущения неудовлетворенностью дел в регионе. Таких примеров может быть масса. По оси можно откладывать например цену на водку в регионе, вдруг есть корреляция с протестными настроениями)) или например взять по оси Х проголосовавших за Зюганова, а по оси Y средний возраст жителей региона. Может быть есть прямая зависимость тем выше ср возраст тем больше процент голосующих за Зюганова. Сочинять можно сколько угодно)))
    
    По дизайну: в целом все правильно, но выглядит немного как скейтч на дизайн. Не хватает мелочей. И еще нет средних значений по фед округам.
    
    про шкалы:
    кандидаты там для примера просто. смысл пузырьковой диаграммы в том, что она дает возможность сравнивать объекты (в нашем случае регионы) по 5 параметрам одновременно:
    -положение по оси X (например: "Наш взгяд положение дел в регионе хороше, нормальное или плохое? Ответ: ПЛОХОЕ")
    -положение по оси Y (например: "Положение в регионе улучшается, не меняется или ухудшается? Ответ УХУДШАЕТСЯ")
    -диаметр (например: "Вы хотите участвовать в акциях протеста? Ответ: ДА")
    -цвет (принадлежность в фед округу)
    -дата (положение пузырька во времени)
    
    Так мы увидим картину в целом по России и посмотрим на корреляцию желания протестовать и ощущения неудовлетворенностью дел в регионе. Таких примеров может быть масса. По оси можно откладывать например цену на водку в регионе, вдруг есть корреляция с протестными настроениями)) или например взять по оси Х проголосовавших за Зюганова, а по оси Y средний возраст жителей региона. Может быть есть прямая зависимость тем выше ср возраст тем больше процент голосующих за Зюганова. Сочинять можно сколько угодно)))
    
    По дизайну: в целом все правильно, но выглядит немного как скейтч на дизайн. Не хватает мелочей. И еще нет средних значений по фед округам.
    
    Ссылка
    
    Вверх
    - Женя Волков [06.04.2012 | 14:26]
      
      Про параметры совершенно согласен. Единственное мое предложение — заранее разграничить возможные параметры для каждой оси, чтобы было как можно меньше повторений между осями. Так и смысл всего графика будет крепче и четче.
      
      Насчет мелочей, в принципе да, надо доделывать многие вещи, они выглядят сумбурно. Но в целом я пытался сохранить стиль сайта — цвета и шрифт взял из основного дизайна.
      
      Про параметры совершенно согласен. Единственное мое предложение — заранее разграничить возможные параметры для каждой оси, чтобы было как можно меньше повторений между осями. Так и смысл всего графика будет крепче и четче.
      
      Насчет мелочей, в принципе да, надо доделывать многие вещи, они выглядят сумбурно. Но в целом я пытался сохранить стиль сайта — цвета и шрифт взял из основного дизайна.
      
      Ссылка
      
      Вверх
    - Женя Волков [06.04.2012 | 17:34]
      
      А средние значения по округам это что? Усредненное с Х, Y и размера?
      
      А средние значения по округам это что? Усредненное с Х, Y и размера?
      
      Ссылка
      
      Вверх
    - Женя Волков [06.04.2012 | 18:47]
      
      Обновил первый скриншот и добавил пояснения по работе некоторых контролов
      
      Обновил первый скриншот и добавил пояснения по работе некоторых контролов
      
      Ссылка
      
      Вверх
Ekaterina Milkinska [21.03.2012 | 22:35]

Добрый день.
Готова поучавствовать.
Eugene Guroff [21.03.2012 | 22:50]

☻
Владислав Китов [22.03.2012 | 08:45]

+
- Ссылка
- Вверх
- Свернуть ветвь (2)
- Владислав Китов [22.03.2012 | 16:55]
  Есть несколько вопросов:
  Каковы минимальные размеры для интерфейса?
  Планируется ли его встраивание на какой нибудь сайт?
  На сколько допустимо изменение расположения элементоа?
  
  Спасибо
  
  Есть несколько вопросов:
  Каковы минимальные размеры для интерфейса?
  Планируется ли его встраивание на какой нибудь сайт?
  На сколько допустимо изменение расположения элементоа?
  
  Спасибо
  
  Ссылка
  
  Вверх
  - Kirill B [22.03.2012 | 19:22]
    
    1. Минимальные размеры по ширине можно посмотреть здесь – st.free-lance.ru/projects... (см ширину блоков с графиками) у меня получилась 706px. Минимальную по высоте задать слету не смогу, думаю надо отталкиваться от требования, что продукт должен обладать тач-интерфейсом для айпада, а также нормально отображаться на сайте fom.ru. Размеры айпада 1024х768px, а область видимости на стандартных мониторах не более 700px. Наверно надо учесть ограничение по области видимости на мониторах и ноутах, поэтому давайте ограничим высоту где то до 680px. Итого высота – 680px, ширина – 706px
    2. Будет встроен на сайте fom.ru (см скрин из описания).
    3. Расположение, формы, дизайн все на ваше усмотрение.
    
    1. Минимальные размеры по ширине можно посмотреть здесь – st.free-lance.ru/projects... (см ширину блоков с графиками) у меня получилась 706px. Минимальную по высоте задать слету не смогу, думаю надо отталкиваться от требования, что продукт должен обладать тач-интерфейсом для айпада, а также нормально отображаться на сайте fom.ru. Размеры айпада 1024х768px, а область видимости на стандартных мониторах не более 700px. Наверно надо учесть ограничение по области видимости на мониторах и ноутах, поэтому давайте ограничим высоту где то до 680px. Итого высота – 680px, ширина – 706px
    2. Будет встроен на сайте fom.ru (см скрин из описания).
    3. Расположение, формы, дизайн все на ваше усмотрение.
    
    Ссылка
    
    Вверх
Дмитрий Зверев [22.03.2012 | 12:49]

+
Iuliana Maxim [23.03.2012 | 20:14]

+
Александр Дорофеев [25.03.2012 | 11:19]

+
Елена Харлап [25.03.2012 | 15:04]

+
Ольга Саенко [26.03.2012 | 18:25]

+
Иван Савон [27.03.2012 | 00:10]

+
Андрей Клочков [28.03.2012 | 11:39]

+
Денис Манжиков [28.03.2012 | 13:23]

+
Inna Meshcheryakova [28.03.2012 | 17:55]

+
Andrey Kamensky [04.04.2012 | 14:32]

+1
Владимир Голдобин [04.04.2012 | 23:18]

+
Serg Evseev [06.04.2012 | 08:52]

Интерфейс будет готов завтра.
Станислав Бондаренко [06.04.2012 | 23:26] [внесены изменения: 07.04 2012 | 23:48]

Стиль можно поменять
- Добавлено 07.04.2012 в 23:47
- Добавлено 07.04.2012 в 23:47
- Добавлено 07.04.2012 в 23:47