Владимир Кравчукhttps://teletype.in/atom/kravchuk2026-06-17T09:51:11.805Zkravchuk:xC-M7nyyU2020-08-01T12:12:07.820Z2020-08-01T12:12:07.820Z

<img src="https://teletype.in/files/2b/38/2b38f092-c65a-4145-875b-eeba4d236ff8.png">The-Village обновили дизайн главной страницы сайта и добавили новый раздел — «Коротко» ака сторис.

<p><a href="https://new.the-village.ru/" target="_blank">The-Village </a>обновили дизайн главной страницы сайта и добавили новый раздел — «Коротко» ака сторис.</p> <figure class="m_original"> <img src="https://teletype.in/files/2b/38/2b38f092-c65a-4145-875b-eeba4d236ff8.png" width="1568" /> <figcaption>Обновленная страница The-Village</figcaption> </figure> <p>«Коротко» — это небольшие карточки с актуальными событиями дня. В них есть ряд визуальных проблем:</p> <ol> <li>Большой акцент на время публикации. </li> <li>Если нет заголовка — получаем огромную дырку. Это видно на карточке «Австрия готова принять россиян» </li> <li>Все карточки однотипны в подаче, меняется только цвет, которые не несет никакой смысловой нагрузки.</li> <li>Текст новости не всегда совпадает с реальностью.</li> </ol> <p>С этими проблемами мы и попробуем побороться.</p> <h2>Акцент на время</h2> <p>Раздел «Коротко» описывает актуальные события дня. То есть дольше 24 часов карточка висеть не будет. Пользователю в этом случае вообще не нужно знать, когда был опубликован материал. Просто бездумно скопировали с инстаграма. </p> <figure class="m_original"> <img src="https://teletype.in/files/27/2c/272c9be2-89eb-46f0-84f8-5d9958ee3025.png" width="1068" /> <figcaption>Убрали время публикации — стало легче </figcaption> </figure> <h2>Огромная дыра</h2> <p>Без заголовка такие карточки смотрятся бедно и грустно. Решаем проблему, добавив визуальную составляющую. </p> <figure class="m_original"> <img src="https://teletype.in/files/76/65/7665574f-6262-42cd-bb6b-170f3d1cc97b.png" width="957" /> <figcaption>Визуал помогает читателю быстрее понять смысл новости</figcaption> </figure> <h2>Однотипная подача без логики</h2> <p>Все сторисы делаются по одному шаблону — градиент. Цвет не подбирается по смыслу, а используется по вкусу дизайнера. Это не верный подход. Все составляющие материала должны быть связанны друг с другом. Желто-оранжевый цвет никак не подходит к новости, связанной с арбузами.</p> <figure class="m_original"> <img src="https://teletype.in/files/0b/b2/0bb27642-9ab2-4d9b-8b40-57e0361ca001.png" width="986" /> <figcaption>Поменяли цвет фона на зелено-салатовый и оживили стиль градиента</figcaption> </figure> <h2>Текст изменяют под дизайн, а не наоборот</h2> <p>Прочитал текст карточки и не до конца понял суть. В итоге нашел еще с десяток таких же материалов на других площадках и понял, что там не только про арбузы, но еще и про дыни. Редакторы из The-Village придумали &quot;прикольный&quot; заголовок и решили забить на полную новость.</p> <p>Это финальная часть, где мы редактируем весь текст. Объясняю почему так.</p> <ul> <li><strong>Арбузный сезон открывается → Арбузы и дыни в Москве</strong></li> </ul> <p>Уже говорил, что в реальной новости не только про арбузы. Есть те читатели, которые ждут больше дыни. А мы их теряем из-за неточного заголовка.</p> <ul> <li><strong>Московские бахчевые развалы начнут работу с 3 августа → Бахчевые развалы открыты с 3 августа</strong></li> </ul> <p>О том, что действие в Москве, рассказали в предыдущем тексте. «Начнут работу» это сложно, нужно писать проще «открыты». </p> <p>Мне, не живущему в Москве, сложно понять, что такое «Бахчевые развалы». Оказывается, это специальные сертифицированные киоски, где арбузы и дыни хранятся в правильных условиях, а продавцы имеют санкнижки. Местный все поймет, а приезжий — нет. Можем понять на «бахчевые киоски».</p> <h2>Финальный результат</h2> <p>Добавил вместо времени публикации сноску, что это за карточка. В данном случае «Событие», может быть «Новость», «Мероприятие» или «Творчество». Вариантов много, зависит от целей сайта. </p> <figure class="m_original"> <img src="https://teletype.in/files/44/a9/44a9f4a9-555c-42f8-bc0d-1b560d16d407.png" width="1007" /> <figcaption>Стало — Было</figcaption> </figure> <figure class="m_original"> <img src="https://teletype.in/files/6b/9d/6b9d516d-991e-4531-92e5-69cda7fdde08.png" width="1047" /> <figcaption>Вписываем результат в рабочее пространство</figcaption> </figure> <p>В результате пользователю легко считать карточку и понять, что его ждет внутри. Старайтесь думать не дизайном, а пользой.</p> <blockquote data-align="center">Не забывай подписываться на мой канал <a href="https://t.me/whereclient" target="_blank">@whereclient</a></blockquote> kravchuk:eiEyMJnXe2020-07-13T18:17:06.353Z2020-07-13T19:28:05.186Z

<img src="https://teletype.in/files/9b/29/9b297f29-a264-4377-a17f-aa5e307400d3.png">Несколько дней редакторы трудились над задачей улучшить попап на сайте страховой компании. Это было задание на трехдневном воркшопе, на который был набор пару дней назад.

<p>Несколько дней редакторы трудились над задачей улучшить попап на сайте страховой компании. Это было задание на трехдневном воркшопе, на который <a href="https://t.me/whereclient/41" target="_blank">был набор</a> пару дней назад. </p> <h2>Задача</h2> <p>Когда клиент проверяет действительность своего полиса на сайте страховой, он может получить вот такое уведомление:</p> <figure class="m_custom"> <img src="https://teletype.in/files/9b/29/9b297f29-a264-4377-a17f-aa5e307400d3.png" width="693" /> <figcaption>Оригинальный вариант на сайте компании</figcaption> </figure> <p>С этим окном были проблемы: неудачная фотография, неудачный текст, неудачная полоса пробивающая голову и много еще чего неудачного.</p> <p>Участникам нужно было переделать это окно или придумать другое взаимодействие с клиентом, которое принесет пользу и будет логичным. Каждый решил задачу по разному, от этого и интереснее! </p> <hr /> <h3>Алена Винокурова №1</h3> <figure class="m_original"> <img src="https://teletype.in/files/cc/a5/cca5b561-e370-4d40-ba6b-8d19369f68bb.png" width="741" /> </figure> <p>Полная работа по ссылке: <a href="https://www.figma.com/file/bhGJAaw3sofHaFd1BS6IgE/" target="_blank">https://www.figma.com/file/bhGJAaw3sofHaFd1BS6IgE/</a></p> <hr /> <h3>Александр Кудряшов №2</h3> <figure class="m_original"> <img src="https://teletype.in/files/c9/b1/c9b1ec74-e525-43b8-836a-e0cfe6f91bb9.png" width="614" /> </figure> <p>Полная работа по ссылке: <a href="https://www.figma.com/file/o6CJYvr4ssnSLEND4SOMWR/" target="_blank">https://www.figma.com/file/o6CJYvr4ssnSLEND4SOMWR/</a></p> <hr /> <h3>Саша Саенко №3</h3> <figure class="m_original"> <img src="https://teletype.in/files/21/ad/21ad6ad8-3585-4ab7-ba04-976e36a1c521.png" width="692" /> </figure> <p>Полная работа по ссылке: <a href="https://docs.google.com/document/d/1_UxsaTp_JOWS99SJV70Ro3wPdpv1rEiKoFYN_VBvnTU/" target="_blank">https://docs.google.com/document/d/1_UxsaTp_JOWS99SJV70Ro3wPdpv1rEiKoFYN_VBvnTU/</a></p> <hr /> <h3>Tetiana Pokotylo №4</h3> <figure class="m_column"> <iframe src="https://giphy.com/embed/IbN92eXYfxZB5Bcnf0"></iframe> </figure> <p></p> <hr /> <h3>Julia Se №5</h3> <figure class="m_retina"> <img src="https://teletype.in/files/0e/4a/0e4ac460-c458-4e83-af1e-2a5ae3d4f6c2.png" width="621" /> </figure> <hr /> <h3>Ярослав Дорохин №6</h3> <figure class="m_original"> <img src="https://teletype.in/files/88/fd/88fd55b7-5ca8-4afd-b764-12f94e5f611b.png" width="708" /> </figure> <p>Полная работа по ссылке: <a href="https://www.figma.com/file/3rbtnX4JRdWRJ0KiOxZJjG/" target="_blank">https://www.figma.com/file/3rbtnX4JRdWRJ0KiOxZJjG/</a></p> <h2>Голосование</h2> <p>В течении суток будет идти голосование на канале <a href="https://t.me/whereclient" target="_blank">@whereclient.</a> Вы можете пересылать пост с голосованием своим друзьям, публиковать в соцсетях и просить отдать голос за вас. </p> <p><strong>Важно!</strong> На канале мы говорим о редактуре и UX/UI, поэтому оценивайте работы по большей мере за решение задачи, а не красивый дизайн. </p> <p>По истечению 24 часов определим первого победитель в категории «Выбор комьюнити». А в среду я определю второго победителя, который получит ачивку «Оседлал попап». </p> <p><em>Номера участникам выданы в алфавитном порядке и не показывают их место в рейтинге или голосовании.</em></p>