О проекте

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

Задача

Караоке — это развлечение в компании, часто в полутёмном зале и с микрофоном в руке. Интерфейс должен хорошо читаться с расстояния, а путь от включения до первой песни — быть максимально коротким. Нам нужно было спроектировать каталог, плейлисты и экран исполнения в едином ночном стиле, который поддерживает атмосферу вечеринки.

Вход

Экран приветствия разделён на две части. Слева — «Добро пожаловать!» и крупные кнопки: «Войти», вход через Facebook или Google и регистрация. Справа — логотип заведения, фотография поющей компании со звуковой волной и три коротких преимущества про микрофон, звук и приложение. Тёмный фон с фиолетовыми бликами задаёт настроение всего продукта.

Поиск песен и плейлисты

Навигация вынесена в узкую колонку иконок слева: поиск, главная, профиль, видео и настройки. Экран поиска начинается со строки «Поиск песен» и фильтров по сортировке, жанру и году выпуска с кнопкой сброса. Ниже — блок «Лучший результат» с обложками треков и их рейтингом и подборка плейлистов. Крупные обложки позволяют узнать песню с первого взгляда, даже не читая название.

Страница плейлиста — например, «Новинки недели» — показывает нумерованный список треков с обложкой, названием, исполнителем и длительностью. Выбранная песня подсвечена градиентной рамкой, а справа появляется её большая обложка, оценка пользователей звёздами и две кнопки: «Петь» и «В избранное».

Исполнение

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

Результат

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