Коллекцию в дизайне образуют предметы с общей идеей: визуальным языком, материалами, назначением или историей создания. На сайте эту связь нужно показать, иначе посетитель увидит набор отдельных изделий. Идею удобно раскрывать на странице коллекции или в лукбуке, а выбирать и сравнивать изделия — в каталоге.
Что такое коллекция в дизайне?
Дизайнерская коллекция объединяет предметы общим замыслом, который заметен в их облике и описании. Так можно представить серию керамики, мебель для одного интерьера или линейку упаковки. Посетителю не обязательно знать историю работы дизайнера, чтобы увидеть связь: её показывают формы, материалы, цвета и снимки предметов вместе.
Соседства на странице для этого мало. Пальто, ваза и стул не станут коллекцией только потому, что их разместили рядом. Но если автор связал их одной палитрой, материалами и историей, эту связь стоит показать.
В словарной статье «коллекция» Викисловарь даёт определение: «систематизированное собрание однородных (в определенном смысле) предметов». Оно описывает общий признак предметов, но не подсказывает, как представить замысел на сайте.
Коллекцию определяет связь между предметами, а не способ их размещения на странице.
Что объединяет предметы в коллекцию?
Родство предметов можно показать через цвет, форму, пропорции, фактуру или назначение. Нескольких признаков бывает достаточно, но они должны быть видны посетителю. Если керамические изделия различаются по форме, общая глазурь и совместный снимок помогут прочитать их как серию. Описание здесь поддерживает изображения, а не заменяет их.
Заявленные признаки должны совпадать с тем, что видно на странице. Если текст говорит об общем материале, а фотографии этого не показывают, посетителю трудно понять, на чём основана связь.
Дайте описание и фотографии человеку, который не знает проект. Попросите его своими словами объяснить, что объединяет изделия. Ответ подскажет, считывается ли замысел без ваших пояснений.
Если изделия созданы для разных задач и объединены только брендом, разместите их в каталоге. Без общего замысла название «коллекция» не помогает выбрать изделие.
Как выбрать между страницей, каталогом и лукбуком?
Формат зависит от задачи посетителя. Тому, кто впервые видит работы, нужно понять идею и увидеть изделия вместе. Тому, кто выбирает предмет, нужны характеристики и путь к заказу. Поэтому страницу коллекции, каталог и лукбук не стоит считать взаимозаменяемыми: каждый отвечает на свой вопрос и по-своему ведёт к изделию.
| Формат | Главная задача | Как смотрят | Сведения об изделиях | Следующий шаг |
|---|---|---|---|---|
| Страница коллекции | Понять идею и увидеть состав | От общего описания к предметам | Краткие, с переходом к карточкам | Открыть изделие или отправить запрос |
| Каталог | Выбрать и сравнить | Через сетку карточек и, при необходимости, фильтры | Характеристики в карточках | Выбрать изделие или запросить цену |
| Лукбук | Рассмотреть образы и сочетания | Через крупные кадры | Названия и подписи к кадрам | Перейти к изделию |
Если изделия продаются по отдельности, начните с каталога и добавьте страницу коллекции для рассказа об идее. Лукбук дополнит их, но не заменит характеристики: по красивому кадру трудно определить размер предмета.
Для портфолио без продажи отдельный каталог может быть лишним. В таком случае достаточно страницы с описанием проекта, составом коллекции и лукбуком.
Из каких блоков собрать страницу коллекции?
Страница коллекции сначала знакомит с замыслом, затем показывает предметы и помогает перейти к каждому из них. Посетителю не нужно искать названия изделий внутри длинной галереи. Дайте изображениям рассказать о коллекции, а рядом предусмотрите понятный перечень предметов. Порядок блоков можно менять под задачу страницы.
- Обложка с названием коллекции и главным кадром.
- Короткое описание идеи.
- Общие изображения предметов вместе и в окружении.
- Перечень предметов с названиями и ссылками на карточки.
- Сведения, общие для всей коллекции.
- Переход к каталогу или способ отправить запрос.
На общей странице оставьте то, что относится ко всей коллекции. Размеры, состав, цвета и наличие конкретного изделия разместите в его карточке. Если отдельных карточек нет, покажите эти сведения рядом с изображениями предметов.
Из карточки нужен путь обратно к коллекции. Ссылка с её названием понятнее, чем надежда на кнопку «назад» в браузере. Если посетители приходят прежде всего за выбором изделия, поднимите перечень предметов выше подробного рассказа.
Какие изображения нужны и что проверить на телефоне?
У каждого изображения своя задача. Обложка знакомит с настроением коллекции, общий кадр показывает предметы вместе, а снимки отдельного изделия помогают рассмотреть форму и материал. Для вещи, которую выбирают по деталям, одного постановочного фото мало: добавьте крупный план и ракурсы, нужные для выбора.
Сходные фон и свет помогают увидеть родство предметов, но не должны скрывать различия между ними. Подписи уточняют, какое изделие показано на кадре. В alt-тексте общего кадра назовите изображённые предметы. Для декоративных изображений оставьте пустой alt-атрибут, как рекомендует W3C WAI. Рекомендации W3C WAI помогают выбрать подход к описанию изображения.
Картинки сами по себе не решают задачу поиска. О работе с ними Google пишет в рекомендациях по изображениям для поиска. Другие проверки собраны в материале о том, как улучшить позиции сайта в поиске.
На телефоне проверьте путь от страницы коллекции к изделию и обратно. Текст должен читаться без увеличения, а подписи — оставаться рядом со своими кадрами. Если есть фильтры, проверьте, что их можно открыть и увидеть выбранные параметры. Характеристики и способ отправить запрос не прячьте за анимацией.
Что подготовить и проверить перед публикацией коллекции?
Сборка страницы начинается до работы с макетом. Нужны согласованные названия изделий, фотографии и характеристики: иначе карточки и общий перечень быстро разойдутся. Заранее определите, кто будет обновлять состав коллекции. Это особенно важно, если предметы добавляют, убирают или меняют их наличие после запуска сайта.
Подготовьте материалы, которые понадобятся для страницы и карточек:
- название коллекции и описание её идеи;
- перечень изделий с согласованными названиями;
- общий кадр, фотографии отдельных предметов и важных деталей;
- проверенные характеристики каждого изделия;
- ответственного за обновление страницы.
Если коллекций несколько, заранее решите, каким из них нужны отдельные страницы и как посетитель найдёт их в структуре сайта. О разделах и навигации подробнее рассказано в материале об устройстве информационного сайта. После сдачи сайта мы передаём доступы к административной панели, проводим короткое обучение и даём инструкции для самостоятельного обновления содержимого.
Перед запуском откройте каждую карточку и проверьте фотографии, характеристики, ссылки и путь обратно к коллекции. Затем покажите страницу человеку, который не участвовал в проекте: сможет ли он объяснить общую идею без подсказки? Последний проход сделайте на телефоне и ноутбуке.
Если нужны страницы для нескольких коллекций, обсудите дизайн сайта с HUNTERWEB. Расскажите, сколько у вас коллекций и как часто меняется их состав. Это поможет решить, для каких коллекций нужны отдельные страницы и как связать их с каталогом.
Частые вопросы
Ниже — ответы на вопросы, которые возникают при подготовке страницы. Они помогут решить, что считать коллекцией, как её назвать и что показывать до выхода изделий или после завершения продаж.
Сколько предметов нужно, чтобы набор считался коллекцией?
Смотрите на связь между предметами, а не на количество. Если у них есть общий замысел, покажите его в тексте и изображениях. Без такой связи длинный перечень останется ассортиментом.
Как назвать коллекцию, чтобы её запомнили?
Выберите название, связанное с идеей коллекции. Используйте его одинаково на общей странице, в карточках и подписях к снимкам, чтобы посетитель понимал, к какому проекту относится предмет.
Как показать коллекцию, которая ещё не вышла?
Подготовьте страницу-анонс с описанием идеи и доступными изображениями. Не добавляйте характеристики, которые ещё не утверждены. Если планируете сообщить о выходе коллекции, объясните посетителю, как он сможет получить уведомление.
Что делать со страницей коллекции, которой больше нет в продаже?
Если страница нужна как часть портфолио или на неё ведут ссылки, сохраните её и ясно укажите, что изделия недоступны. Рядом дайте переход к актуальным коллекциям.
Источники
Словарное определение приведено для пояснения термина. Рекомендации W3C WAI и Google относятся к изображениям на сайте; выбор структуры страницы и формата представления коллекции — редакционные рекомендации статьи.
- «Коллекция» в Викисловаре
- Images Tutorial: Decision Tree — W3C Web Accessibility Initiative
- Image SEO best practices — Google Search Central
Нужна помощь с сайтом?
Расскажите о задаче, и мы бесплатно предложим решение и состав работ.
