Дипломный проект: Редизайн сервиса Last.fm

1,035 views

Published on

Бесплатно учись веб-дизайну – http://goo.gl/iNr4O5
Школа веб-дизайна Максима Солдаткина

Published in: Design
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
1,035
On SlideShare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
20
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Дипломный проект: Редизайн сервиса Last.fm

  1. 1. Домашнее задание. День четвертый. Алексей Каныгин. Санкт-Петербург. Все ссылки в PDF кликабельны
  2. 2. Кейвижуал
  3. 3. Визуальная рифма Наушники и логотип перекликаются. Цвет бейджа и знака перекликаются.
  4. 4. Форма самолета и электромачт переклекаются. Наземные и поводные растения переклекаются.
  5. 5. Инсайт Проблема: Желание всегда слушать музыку без проблем. Инсайт: Любимая музыка всегда с вами, где бы вы не находились. Проблема: Хочется чего-то нового, но лень искать. Инсайт: Вы просто слушаете, а мы рекомендуем только то, что действительно вам будет интересно.
  6. 6. Чувства Неоходимые ощущения: Удобство, простота, интуитивность, отзывчивость. Ощущение комфортного и легкого взаимодействия. Способы достижения: Комфортная работа с сервисом достигается посредством продуманного ин- терфейса. Все важные функции легко доступны. Отзывчивость достигается плавной анимацией и визуальными эффектами. Благодаря анимации поль- зователь понимает какое действие происходит и что ожидать от интерфейса. Простота и доступность достигается крупными формами, элементами, изо- бражениями. Все на своих местах и легко читается, воспринимается.
  7. 7. Улучшить видимость кнопки воспроизведения Скомпоновать меню по новому Правки
  8. 8. Домашнее задание. День третий. Алексей Каныгин. Санкт-Петербург. Все ссылки в PDF кликабельны
  9. 9. Удобный плеер и список воспроизведения всегда доступны на любой странице
  10. 10. Личный хит-парад и статистика воспроизведения за любое время
  11. 11. Календарь событий и концертов любимых групп
  12. 12. example@gmail.com behance.net/midnightspace dribbble.com/midnightspace fl.ru/users/noirart-ru Вы можете заказать у меня разработку интерфейса. Буду рад ответить на все ваши вопросы.
  13. 13. Добавить иконку воспроизведения во вкладку браузера. Добавить в плеер возможность переключения между альбомами и исполнителями. Добавить возможность выбирать плей-лист в плеере. Добавить возможность соглашаться или отказываться от события. Правки
  14. 14. Добавить контент на баннер. Выровнять меню в шапке относительно текста в баннере.
  15. 15. Воспроизвести библиотеку пользователя. Библиотека это список всех исполнителей ко- торых слушал пользователь. Возможность подтверждения и отклонения событий и кон- цертов
  16. 16. Выбор следующего и преды- дущего альбома Выбор следующего и преды- дущего исполнителя
  17. 17. Иконка воспроизведения во вкладке браузера
  18. 18. behance.net/midnightspace dribbble.com/midnightspace fl.ru/users/noirart-ru Площадки
  19. 19. Источники информации Посмотреть behance.net dribbble.com fromupnorth.com uiparade.com wolda.org pinterest.com serialthriller.com logopond.com Почитать habrahabr.ru medium.com artgorbunov.ru artlebedev.ru/kovodstvo tutsplus.com vk.com/awdee vk.com/4wwweb
  20. 20. Работа мечты cuberto.ru — разработка мобильных приложений cubeline.ru — разработка сайтов, интернет-реклама, веб-аналитика outlanding.ru — продающие страницы nimax.ru — разработка сайтов artw.ru — крупные веб-разработки bquadro.ru — разработка онлайн-проектов
  21. 21. Проекты на фрилансе https://www.fl.ru/projects/2300027/lending-i-logo-k-nemu-.html https://www.fl.ru/projects/2299598/dizayn-posadochnoy-stranitsyi-dlya-onlayn-servisa.html https://www.fl.ru/projects/2284851/dizayn-interfeysa-platejnoy-sistemyi.html https://www.fl.ru/projects/2278803/otrisovat-instruktsiyu-kak-zapustit-fayl-posle-skachivaniya.html https://www.fl.ru/projects/2263419/dizayn-interfeysa.html https://www.fl.ru/projects/2256517/sproektirovat-maket-mockup-prodayuschego-sayta.html https://www.fl.ru/projects/2250916/dizayn-interfeysa-paneli-upravleniya.html
  22. 22. Шаблоны Здравствуйте Антон. С интересом слежу за развитием вашей студии и новыми проектами. Видел у вас опубликованную вакансию дизайнера интерфейсов и она меня очень заинтересовала. Я Алексей Каныгин — начинающий дизайнер интерфейсов. Есть опыт работы в сфере графического дизайна и печатной продукции. Ответственен, внимателен к мелочам и деталям, люблю системный подход к поставленным задачам. Портфолио: behance.net/midnightspace Формальное резюме во вложении. Надеюсь на сотрудничество с вами. Спасибо за внимание. Скайп: mns Телефон: +7 911 123-45-67 С уважением Алексей Здравствуйте. Мне интересна ваша задача, готов обсудить детали и приступить к исполнению. Я Алексей Каныгин — начинающий дизайнер интерфейсов. Есть опыт работы в сфере графического дизайна и печатной продукции. Ответственен, внимателен к мелочам и деталям, люблю системный подход к поставленным задачам. Портфолио: behance.net/midnightspace Надеюсь на сотрудничество с вами. Спасибо за внимание. Скайп: mns Телефон: +7 911 123-45-67 Письмо в студию Ответ на проект
  23. 23. Домашнее задание. День второй. Алексей Каныгин. Санкт-Петербург. Все ссылки в PDF кликабельны
  24. 24. Гарнитура и текст В качестве основной гарнитуры был выбран бесплатный шрифт Clear Sans. Для расчета заголовков был взят размер основного шрифта и множитель 1,2. H5 14px H4 17px H3 20px H2 24px H1 29px
  25. 25. Цвет
  26. 26. Элементы
  27. 27. Фотография для баннера Выбраны фотографии для баннера, теперь нужно примерить их в макете и купить подходящую.
  28. 28. Макет Собираю главную страницу и примеряю фотографию со стока.
  29. 29. Макет Покупаю изображение, перекрашиваю наушники в красный, добавляю цветокоррекцию.
  30. 30. Макет Добавляю изображение, верстаю главную страницу.
  31. 31. Макет Собираю плеер и список воспроизведения.
  32. 32. Макет Верстаю страницу профиля.
  33. 33. Макет 960 px 1320 px https://dl.dropboxusercontent.com/u/6632466/Desktop.png https://dl.dropboxusercontent.com/u/6632466/HD.png
  34. 34. Макет https://dl.dropboxusercontent.com/u/6632466/Profile.png
  35. 35. Интерактивный прототип. Исправления http://youtu.be/y3LDVdm0Ne8
  36. 36. Last.fm — это служба предоставления музыкальных рекомендаций. Оно порекомендует тебе новую музыку, исходя из твоих музы- кальных вкусов. Задача Обновить дизайн и функционал сайта lastfm.ru • Улучшить доступ ко всем функциям сайта. • Добавить полноценную возможность слушать музыку онлайн. • Обновить дизайн в соответствии с современными тенденциями. Домашнее задание. День первый. Алексей Каныгин. Санкт-Петербург. Все ссылки в PDF кликабельны
  37. 37. Исследование lastfm.ru Плюсы • Единственный в своем роде скробблер. • Полная статистика по прослушанным композициям. • Огромная база музыкальных композиций. • Качественные рекомендации. • Биографии исполнителей. • Подробное описание жанров. • Хорошая социальная составляющая. • Наличие приложения. Минусы • Устаревший дизайн, фиксированная верстка. • Неудобный плеер. • Мало композиций для прослушивания. • 30-и секундное ограничение треков в бесплатном режиме. • Запутанная навигация.
  38. 38. grooveshark.com Плюсы • Современный минималистичный дизайн. • Удобный плеер и очередь треков. • Бесплатное прослушивание без регистрации. • Хорошая база музыки. • Составление своих плейлистов. Минусы • Нет подробного описания исполнителей. • Нет описания жанров. • Отсутствие подробной статистики по прослушиванию. • Нет социальной составляющей. • Нет редких и не очень известных исполнителей. • Странное поведение адаптивной верстки.
  39. 39. Яндекс Музыка Плюсы • Современный дизайн. • Очень большая база музыки. • Персональные рекомендации. • Возможность слушать музыку без регистрации. • Удобный плеер. • Наличие приложения. Минусы • Отсутствие подробной статистики по прослушиванию. • Нет описания жанров. • Нет биографии исполнителей. • Нет статистики прослушивания.
  40. 40. rhapsody.com Плюсы • Хороший дизайн. • Биографии исполнителей. • Рекомендации. • Наличие приложения. Минусы • Нет редких исполнителей. • 30-и секундное ограничение треков в бесплатном режиме. • Не очень удобная навигация. • Нет социальной составляющей. • Нет статистики прослушивания.
  41. 41. zvooq.ru Плюсы • Радио • Рекомендации. • Наличие приложения. Минусы • Нет редких исполнителей. • Прослушивание только после регистрации. • Не очень удобная навигация. • Нет социальной составляющей. • Нет статистики прослушивания.
  42. 42. deezer.com Плюсы • Красивый и удобный дизайн. • Редкие исполнители. • Рекомендации. • Наличие приложения. Минусы • Прослушивание только после регистрации. • Ограничение по жанрам. • Нет социальной составляющей. • Нет статистики прослушивания.
  43. 43. soundcloud.com Плюсы • Редкие исполнители. • Рекомендации. • Возможность комментировать треки. • Возможность слушать музыку без регистрации. • Биографии исполнителей. • Социальная составляющая. Минусы • Направленность на музыкантов. • Нет статистики прослушивания. • Маленькая база исполнителей. • Не очень удобный дизайн. • Статичная верстка.
  44. 44. Вывод Были проанализированы самые популярные музыкальные сервисы, предоставля- ющие легальное прослушивание музыки в онлайне. Самыми богатыми возможно- стями по рекомендациям и статистике обладает сайт last.fm, но имеет ряд критич- ных недостатков. Для комплексного улучшения сайта необходимо пересмотреть дизайн и добавить новые функции.
  45. 45. Целевая аудитория Михаил 28 лет Москва Системный администратор Виктория 20 лет Санкт-Петербург Менеджер рекламного агентства Андрей 24 года Петрозаводск Иллюстратор Манифест Максимум организованности и порядка в жизни. Жизненные цели Карьера в большой компании, путешествия, быть в курсе всех технологических новинок. Цели взаимодействия Слушать музыку, находить новые музыкальные группы и жанры, делиться своей статистикой прослушивания. Цели конечные Постоянно слушать музыку, получать рекоменда- ции по новым жанрам и исполнителям, открывать что-то новое, знать что слушают друзья. Манифест Спонтанность и приключения это моя жизнь. Жизненные цели Путешествия и развлечения, жизнь в удовольствие. Цели взаимодействия Быть в курсе популярных музыкальных новинок. Слушать интересные музыкальные чарты и каче- ственные подборки. Цели конечные Слушать музыку на работе и дома без всяких сложностей. Манифест Творчество без границ. Жизненные цели Создавать красивый арт, искать вдохновение в необычных вещах, успешная карьера. Цели взаимодействия Я люблю слушать hоuse и trance, хочу следить за новинками в этих жанрах, не против узнать что-то новое. Цели конечные Слушать любимые жанры музыки, получать качественные подборки и рекомендации.
  46. 46. Сценарии Основные сценарии для прослушивания музыки.
  47. 47. Структурная схема проекта На схеме приведен основной функционал сайта. В высоком разрешении https://dl.dropboxusercontent.com/u/6632466/UC.jpg
  48. 48. Скетчи Поиск идей.
  49. 49. Скетчи Детализация. Основной экран Профиль пользователя Раздел рекомендаций
  50. 50. Состояния плеера. Список воспроизведения Боковое меню пользователя
  51. 51. Лоскутный прототип
  52. 52. Детальный прототип Первостепенная цель сделать удобное управление проигрываемой музыкой с любой страницы.
  53. 53. Профиль пользователя.
  54. 54. Профиль исполнителя.
  55. 55. Раздел музыка.
  56. 56. Раздел рекомендаций.
  57. 57. Интерактивный прототип http://youtu.be/HZpSTMPWNAw Дизайн сайта должен быть полностью «резиновый», но отразить это в прото- типе не получилось. Светло-серая панель меню слева при активации кнопки меню, должна полностью замещаться темной панелью, но реализовать так эффект не получилось, по этому серая панель не скрывается.

×