x
 
Максим Софронов
11 декабря 2012

Что нужно сделать, чтобы фотографии раскладывались красиво в хаотичном порядке и размере как на Яндекс.Музыке?



Заранее придумать несколько красивых «хаотичных порядков».

Во всех трёх ваших примерах отображено по 12 обложек — 10 маленьких и 2 больших, причём два последних примера являются отражениями друг друга. На настоящей Яндекс.Музыке ещё есть раскладки 14 + 1, но если бы их и не было, мало кто заметил бы.

Здорово придумать крутой дизайн. Но если он требует разработки сложных алгоритмов, а тем более — постоянной работы иллюстраторов и редакторов, цена производства и поддержки может сделать нерациональным его внедрение. Поэтому высший пилотаж — придумать дизайн, который выглядит и работает не менее круто, но прост в реализации.

Дизайнер должен думать о технологичности.

Интерфейс и информация — дисциплина Школы дизайнеров. Набор открыт. Чем раньше поступите, тем ниже стоимость и выше шанс на бесплатное место.
 

Поделиться
Отправить

Комментарии

Дмитрий Павлов
11 декабря 2012

Привет!

Расскажу, как всё в жизни было :-)

На самом деле, изначально действительно думали над набором паттернов, чтобы было просто реализовать. Я тут ради интереса приаттачил самый первый кривой набросок идеи.

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

Попробовали сделать — возникла проблема: большие картинки, когда их две, периодически наезжали друг на друга. Ребята-разработчики учли это в алгоритме. Тут вылезла другая штука — белые бордеры. Получалось вот что: у маленьких обложек размер 75, а у больших — 150. Плюс, границы по одному пикселю. Соответственно, когда две маленькие ложились рядом с большой, получалась нескладуха (75 + 2 бордера) × 2 ≠ 150 + 2 бордера. В итоге, придумали просто обрезать маленькие обложки на вёрстке до 74. Незаметно, зато и ложится всё ровно, и интервалы визуально одинаковые. Конечно, если бы бордеров не было, всё было бы проще :-)

Так что всё действительно, как Илья сказал: для начала нужно просто прикинуть схемы расположения картинок, по которым вам бы хотелось их раскладывать. А дальше понять и решить, как реализовать удобнее. Если, скажем, на random не получается повесить именно расположение картинок (проблема с несовпадением размеров, например), то можно сделать набор паттернов, и уже их произвольно ротировать.


Цель рубрики — обсуждение вопросов дизайна всех видов, текста в дизайне и взаимоотношений дизайнеров с клиентами.

Мы публикуем комментарии, которые добавляют к уже сказанному новые мысли и хорошие примеры. Мы ожидаем, что такие комментарии составят около 20% от общего числа.

Решение о публикации принимается один раз; мы не имеем возможности комментировать или пересматривать свое решение, хотя оно может быть ошибочно. Уже опубликованные комментарии могут быть удалены через некоторое время, если без них обсуждение не становится менее ценным или интересным.

Вот такой веб 2.0.

Недавно всплыло

Все уже успели заметить, что вы почти во всех пятничных примерах советуете немного поунижаться 12 Какие законы для текста, который будет восприниматься только на слух? 1 Экран ожидания в поликлинике 6 Выбранные элементы списка, как не забывать принципы из советов бюро и когда нужен логотип 1