Шрифты
Как всегда, начинаю работу с подбора шрифтов.
Группа немецкая. Поэтому, хотелось использовать готический шрифт, с отсылками к средневековью, фэнтези и «нордическому» характеру группы.
Для заголовков выбрал UnifrakturMaguntia, а в пару к нему — максимально нейтральный Roboto.
Страница группы
Разработку дизайна начинаю с внутренних страниц.
В данном случае — со страницы группы.
Для начала накидываю примерную структуру блоков и пробую вставить текст.
Кажется, выглядит неплохо.
Сложно понять, какой из них брать для дальнейшей проработки, поэтому решаю поставить выбранный для заголовков шрифт, добавить немного цвета и элементов оформления: может, станет понятней...
Ставлю тексты, работаю над блоками. Хочу сделать пару вариантов для сравнения.
В процессе работы понял, что первый вариант нравится.
Второй даже полностью не отрисовываю.
Но блок с музыкантами хорошо получился. Запомню его — может, ещё пригодится...
В итоге, взял его за основу для оформления блока с группой на главной странице
Детализация: несмотря на то, что шрифты определены, на всякий случай пробую несколько вариантов.
Выбранный шрифт и фото участников группы
Альтернативный шрифт и фото участников группы
Альтернативный шрифт и фоновая картинка вместо фотографий
Шумно
Нужно уменьшать количество семейств, стилей и цвета шрифтов; плашек, подложек и графических элементов.
Кручу блок с музыкантами: пробую совместить фоновую картинку с фотографиями участников, ставить цветные пятна, вместо фоновой картинки; работаю с композицией блоков.
Решаю добавить блок с дискографией.
Пробую несколько вариантов
Третий — самый удачный и компактный; беру его.
Финализирую страницу, делаю адаптивы.
Страница исполнителя
Структуру блоков не делаю, сразу интегрирую текст в выбранную сетку, но пробую разную компоновку блоков.
Оба варианта нравятся.
Надо детализировать, сравнивать, выбирать, что пойдёт в финальный вариант.
Из трёх детализированных вариантов собираю итоговую страницу и делаю адаптивы.
Страница дискографии группы
Кажется, довольно простая страница; сразу накидываю вариант а перехожу к детализации.
Но при детализации становится понятно, что не всё так просто...
Хочу часть альбомов выводить интерактивным списком, чтобы страница была компактней.
Пробую несколько вариантов.
Не нравится как выглядят списки.
Но во втором и третьем вариантах неплохие наброски для плитки. Ухожу делать плитку, финализировать страницу и делать адаптивы.
Страница альбома
Сразу перехожу к детализации страницы, без предварительных набросков.
Выводить тексты всех песен альбома сразу — страница получается очень длинной; давать список песен с разворачиванием текста по клику — скучно, не красиво, не удобно.
Решаю показывать часть текстов, остальные подгружать по кнопке.
Финализирую, делаю адаптивы.
Страница «мультяшные сказки»
Скетчи из жизни музыкантов и их маскотов: Слепого хранителя и дракона Имбракора.
Громоздкая таблица. Не нравится, надо перевестать.
Переверстал таблицу: сделал компактней и наглядней; собрал карточки.
Нормально, но карточкам можно немного разнообразия добавить и кнопка огромная здесь не к месту.
Перехожу к финализации и адаптивам.
Главная страница
Тут уж совсем всё просто: сетка «устаканена», визуальные ходы определены; довольно быстро собираю страницу.
1,5 месяца работы и можно приступать к оформлению проекта в портфолио: Blind Guardian website redesign
