Как сделать карточку проекта
Создать и оформить, сделать ведро, подготовить и залить превьюшки, настроить шаринг в соцсетях и опубликовать на главной странице бюро.
Что сделать сначала
Согласуйте с ведущим дизайнером или арт‑директором адрес карточки. Например, «bureau.ru/projects/playstation‑site».
Узнайте у ведущего дизайнера даты старта, пуска проекта и имена участников для титров.
Убедитесь, что у вас есть доступ к редактированию страниц сайта бюро. На главной бюро вы должны видеть карандашик в правом верхнем углу:
Если доступа нет, попросите у сапорта: support@bureau.ru
1. Создайте новую карточку
В адресную строку браузера впишите адрес карточки и добавьте «/new». Например, «bureau.ru/projects/playstation‑site/new». Создастся карточка и откроется редактор кода:
2. Скопируйте части кода для рубрик портфолио, описания, продукта, превьюшек, титров, ведра и лайков
Копируйте со страницы шаблонов.
Скопируйте части кода в свою карточку, соблюдая порядок, как на скриншоте:
Укажите рубрики, добавьте описание и название продукта. Пример:
По поводу выбора рубрик проконсультируйтесь с ведущим дизайнером или арт‑директором.
В описании оберните в тег «sрan» то, что хотите сделать ссылкой. Например, название проекта:
Заполните титры:
3. Наполните карточку, используя готовые шаблоны
Используйте готовые шаблоны раскладок со страницы шаблонов.
Выберите шаблон расположения заголовка, въезда и заглавной картинки
Скопируйте код шаблона в свою карточку. Напишите заголовок и описание проекта. На скриншоте выделен один из шаблонов заголовка:
Загрузите картинку, если она нужна. Для этого в своей карточке перейдите во вкладку «Files» в правом верхнем углу страницы. Перетащите туда картинку с рабочего стола.
Кликните по картинке правой кнопкой мыши и нажмите «Copy URL».
Вставьте скопированный адрес в нужное место кода, как на скриншоте:
Загрузите фавыконку, вставьте ссылку на сайт, приложение, файл или то, что хотите показать читателю. Если фавыконка и ссылка не нужны, удалите эти строки:
Наполните карточку картинками и текстом
Скопируйте нужные шаблоны раскладок себе в карточку и вставьте свои картинки и текст по аналогии с этажом заголовка. На скриншоте выделен один из шаблонов:
Чтобы посмотреть, что получается, кликните на превью карточки в правой части страницы:
4. Если нужно что‑то нестандартное, сделайте сами или попросите разработчиков
Можно изменять стандартные шаблоны и писать что‑нибудь новое. Поищите подобные штуки в уже существующих карточках. Скопируйте код, адаптируйте для своей карточки. Если подобного нет, сделайте сами или попросите у сапорта: support@bureau.ru
Если разработчики не могут вам помочь или требуется их серьёзное вмешательство, обсудите это с ведущим дизайнером или арт‑директором. Возможно, стоит сделать по‑другому или отказаться от этой фичи.
5. Создайте и наполните ведро
Чтобы создать ведро, к адресу вашей карточки допишите «/recycled/new». Например, «bureau.ru/projects/playstation‑site/recycled/new». Создастся страница ведра и откроется редактор кода:
Ведро наполняется аналогично карточке, но не стоит делать его сложным. В идеале, нужно просто чередовать текст и картинки. Пример: ведро газеты УНП.
Пока страница не опубликована, ссылка на ведро в карточке работать не будет. Заработает после публикации.
6. Сделайте превьюшку ведра
Откройте этот файл в бюрошной Фигме: Обёрточная вёдер
Соберите превьюшку по инструкции:
Сохраните её в формате ПНГ с прозрачным фоном и названием «vedro.png», оптимизируйте и загрузите в карточку во вкладке «Files». Превьюшка ведра появится в карточке.
Если в вашей карточке не будет ведра, удалите «+bucket».
7. Проверьте мобильную версию карточки и ведра
Проверьте, правильно ли расположены картинки и заданы вертикальные отступы. Для этого включите режим адаптивного дизайна в браузере и просмотрите карточку на телефоне. Совет по теме: как работать в веб‑инспекторе.
Стандартные шаблоны адаптируются к телефонам автоматически. Если вы изменяли шаблоны или добавляли что‑то сами, проверьте, как это выглядит на телефоне.
Можно сделать, чтобы картинки на десктопе стояли в ряд, а на телефоне — друг под другом. Для этого используйте модификатор «transposeOnMobile»:
Например, код на скриншоте выше выводит фотографию и ставит две других фотографии в ряд под ней:
А на телефоне все три фотографии встают друг под другом:
8. Сделайте превьюшки карточки
Сделайте превьюшки в трёх размерах: 1760×864, 1534×864, 860×864 пикселя. Можно пропорционально больше. Пример:
Сохраните превьюшки в джипеге или ПНГ. Назвать их нужно следующим образом:
_cover‑full
_cover‑three‑quarters
_cover‑half
Загрузите превьюшки во вкладке «Files. Пропишите их в коде:
Превьюшки из нескольких картинок
Превьюшка может состоять не из одной картинки, а из нескольких, наложенных друг на друга. Например, на картинке ниже превьюшка плаката Актиона — это одна картинка, которая помещается в прямоугольник с пропорциями 430:432, а превьюшка стикеров «Мэри Трюфель» состоит из двух: красного квадрата и невесты со сковородкой, которая наложена поверх и торчит за края квадрата:
Превьюшка Мэри Трюфеля прописана в код следующим образом:
9. Проверьте, как превьюшка смотрится на главной и странице проектов
В своей карточке впишите код «mod: 'noindex'» в месте, указанном на скриншоте ниже. Это нужно, чтобы никто, кроме бюрошников, не увидел вашу превьюшку на сайте. После этого нажмите кнопку «Publish» в правом верхнем углу экрана.
Зайдите в черновик главной страницы бюро.
Отредактируйте его, как вам нравится: добавьте превьюшку своей карточки, переставьте перебивки и превьюшки других проектов. Виды этажей смотрите в совете Миши Нозика о шаблонах раскладок. Раскладку проектов и перебивок в черновике главной странице утверждайте у ведущего дизайнера или арт‑директора.
Не нажимайте кнопку «Publish» в черновике главной, чтобы никто не увидел изменения раньше времени.
Чтобы посмотреть, что получается, зайдите в черновик главной.
10. Добавьте картинку для соцсетей
Загрузите картинку в пропорции 1,91:1 для шаринга в соцсетях. Минимальная ширина 1600 пикселей, формат джипег.
Найдите её во вкладке «Files» и кликните по ней. Она откроется в отдельном окне. Скопируйте её адрес и вставьте в код:
Заголовок, описание и ссылка для шаринга подставятся автоматически из заголовка страницы и въезда. Но вы можете прописать их вручную, например:
Чтобы проект хорошо шарился в соцсетях, вставьте адрес страницы в отладчик Фейсбука и нажмите «Отладка». Если всё хорошо, то отладчик покажет превью результата:
Проверьте, как проект шарится в Телеграме. Отправьте адрес страницы Вебпейдж боту, проверьте превью и обновите при необходимости.
11. Подготовьте новость
В адресную строку браузера впишите адрес новости и добавьте «/new». Например, «https://bureau.ru/news/2023/playstation-site/new». Создастся новость и откроется редактор кода.
Заполните новость. Для примера используйте другие новости:
Во вкладке «Files» загрузите кавер в двух размерах: 2160×1217 и 2160×2160 пикселей. Загрузите от 3 до 10 скриншотов проекта в формате джипег или ПНГ, в размере 2000×2000 пикселей.
Утвердите новость у арт‑директора.
12. Опубликуйте карточку
Публикуйте карточку только после утверждения у Артёма Горбунова.
Пропишите в коде дату выхода карточки на сайте в двух местах. Первое место почти в самом начале кода:
Второе в этаже заголовка страницы:
Уберите из кода «noindex» и нажмите кнопку «Publish».
Затем опубликуйте ведро. Точно так же уберите из кода «noindex», если есть, и нажмите «Publish».
13. Всё проверьте после публикации
Включите в браузере режим «Инкогнито» и проверьте, что превьюшка карточки стоит правильно на главной и странице проектов. Проверьте, что превьюшка на цветном фоне в своей рубрике на странице проектов отображается нормально.
Зайдите в карточку, проверьте десктопную и мобильную версию.
Проверьте, как карточка расшаривается в соцсетях.
Если что‑то непонятно, есть пожелания и идеи, как улучшить инструкцию, пишите Мише Нозику: nozikm@bureau.ru