Диджитал-агентство из Санкт-Петербурга. Разработчики онлайн-сервисов с упором на UX. Подписывайтесь, читайте и комментируйте.Диджитал-агентство Wemakefabhttps://teletype.in/atom/wemakefab2026-04-08T07:12:57.784Zwemakefab:Q1Y6LQeFd9S2022-06-17T07:26:03.679Z2022-06-19T10:09:50.812Z

<img src="https://img4.teletype.in/files/3d/ea/3deace44-46e6-43a1-82ae-c4f1fa44fd5d.png">UI/UX дизайн Разработка Брендинг

<p id="3BVZ"><strong><em>UI/UX дизайн<br />Разработка<br />Брендинг</em></strong></p> <h2 id="YcUf">Проект</h2> <p id="856a">Корпоративный сайт для одной из крупнейших судоходных компаний России c 80-летней историей.</p> <p id="c5EQ">Поиск грузов, отслеживание судов, технические характеристики кораблей, услуги и новости компании. Стояла задача — грамотно уместить этот массив информации на сайте и не превратить все в кашу.</p> <p id="iahk">Поэтому мы убрали всё лишнее и добавили свободного пространства. Внутренние страницы сайта не давят на пользователя, но в то же время раскрывают все преимущества.</p> <figure id="R4Pe" class="m_column"> <img src="https://img4.teletype.in/files/3d/ea/3deace44-46e6-43a1-82ae-c4f1fa44fd5d.png" width="1180" /> </figure> <h2 id="P5mE">Технические фишки</h2> <p id="v63v">Мы старались сделать не просто красивый информационный сайт, а площадку, которая будет полезна. Поэтому кроме яркого дизайна мы плотно занимались техническим оснащением.<br /><br />Например, внедрили систему отслеживания грузов в режиме реального времени по номеру коносамента. Это такой документ, который перевозчик выдает грузовладельцу.<br /><br />Оборот этого документа происходит через определенный сервис, который не подключить к сайту по кнопке «connect».<br /><br />Поэтому мы связались с разработчиками этого сервиса и предоставили пример файла, по которому необходимо получать информацию. Они загрузили файл на сервер, чтобы мы получали информацию автоматически в онлайн-режиме. Затем эти данные попадали на специальную страницу «отследить груз». <br /><br />Также мы продумали другие приятные функции:<br /><br />— отображение времени в разных часовых поясах;<br />— возможность скачать информацию о корабле и грузе в формате pdf c помощью всего одной кнопки на сайте.<br /></p> <figure id="Rs5K" class="m_column"> <img src="https://img1.teletype.in/files/c9/63/c9636402-05fa-422a-bddd-6d9f2a3ca746.png" width="1558" /> </figure> <h2 id="Xpgk">Мобильная версия</h2> <p id="s0AT">Сохранены 100% функций, удобный интерфейс и яркий дизайн.</p> <p id="mAWe">Нужно отправить несколько тонн товара на корабле? Теперь это не сложнее, чем вызвать такси в Uber. С обновленной мобильной версией сайта Сахалинского морского пароходства.<br /></p> <figure id="8Jiq" class="m_column"> <img src="https://img2.teletype.in/files/96/a7/96a7beee-6f73-4440-a99e-3b38781f7bf0.png" width="1245" /> </figure> <h2 id="RNcX">Брендинг</h2> <p id="zNSe">Создали универсальный фирменный стиль, который легко масштабируется на любые носители.</p> <p id="vc9F">Красный цвет и острые углы отражают характер и силу. Строгие линии ясно дают понять — перед вами лидер рынка.</p> <figure id="IE4N" class="m_column"> <img src="https://img2.teletype.in/files/16/32/16326253-7523-4a6a-b0d5-d72916540257.png" width="1800" /> </figure> <h2 id="ghf3">Признание</h2> <p id="964e">Проект собрал множество положительных отзывов от пользователей и сотрудников компании, а также получил престижные награды в отраслевых конкурсах.<br /></p> <figure id="wCsv" class="m_column"> <img src="https://img1.teletype.in/files/4c/72/4c728925-7a59-4620-86f4-870092c4a725.png" width="1654" /> </figure> <blockquote id="aING" data-align="center"><strong>Хотите, чтобы мы сделали такой же крутой продукт для вас?<br />Пишите на почту: hello@wemakefab.ru</strong></blockquote> wemakefab:wL5m9_oVngC2022-06-01T09:12:34.063Z2022-06-02T15:41:42.300Z

<img src="https://img3.teletype.in/files/23/a0/23a0878b-cd4a-4b23-a550-c55852c2bc1e.png">Fontshare — онлайн-сервис бесплатных шрифтов для личного и коммерческого использования.

<h3 id="Oowm"><strong><em>UI/UX дизайн<br />Брендинг</em></strong></h3> <h2 id="NNZ0"><strong>О проекте</strong></h2> <p id="Q4L6">Fontshare — онлайн-сервис бесплатных шрифтов для личного и коммерческого использования.</p> <figure id="M6ag" class="m_column"> <img src="https://img3.teletype.in/files/23/a0/23a0878b-cd4a-4b23-a550-c55852c2bc1e.png" width="1104" /> </figure> <h2 id="DQzg">Визуальное воплощение</h2> <p id="iVQS">Разработали все интерфейсы и логотип. Собрали визуальный код проекта с нуля. Главные черты: лаконичность, контрастность, умышленное отсутствие декора.</p> <figure id="MgZz" class="m_column"> <img src="https://img3.teletype.in/files/2f/63/2f637523-ed53-427e-b676-9f362a9089ed.png" width="1072" /> </figure> <h2 id="QPGq">Юзабилити</h2> <p id="4I5q">Минималистичный интерфейс помогает пользователю быстро решать свои задачи. При разработке мы ориентировались на удобство конечного клиента.<br /></p> <figure id="MAYU" class="m_column"> <img src="https://img2.teletype.in/files/d0/a2/d0a2a14c-6ab4-49d8-b602-77ee759c0f90.png" width="754" /> </figure> <h2 id="u4O6">Адаптивность</h2> <p id="OJGc">Полнофункциональная мобильная версия с удобным интерфейсом. Десятки каталогов шрифтов с простой навигацией в вашем телефоне.<br /></p> <figure id="ihei" class="m_column"> <img src="https://img2.teletype.in/files/93/a9/93a97e81-f406-4c1d-add7-de486c75b279.png" width="1175" /> </figure> <h2 id="JUJh"><strong>Интерактивность</strong></h2> <p id="xd2H">Играться со шрифтами теперь проще.</p> <p id="UGDO">Fontshare — сайт, на котором вы можете ввести любой текст и посмотреть, как он будет выглядеть с разными шрифтами.</p> <p id="JZfG"><a href="https://www.fontshare.com/" target="_blank">Попробуйте.<br /></a></p> <h2 id="jyE2">Признание</h2> <p id="mFmb">Проект получил 7 наград на международных конкурсах, а также был отмечен жюри Behance.</p> <figure id="vPUV" class="m_column"> <img src="https://img3.teletype.in/files/24/60/24605c67-876a-454c-8831-d26760d076c0.png" width="1733" /> </figure> <p id="A6a2"><strong>Создадим продукт, которым вы будете гордиться. <br />Пишите: hello@wemakefab.ru</strong></p> wemakefab:bS_RnijohbQ2022-05-23T14:52:14.614Z2022-05-24T12:44:40.186Z

<img src="https://img2.teletype.in/files/1e/d3/1ed3d8a3-8762-4174-ae50-6152372c61b0.jpeg"> Golden Suisse — это единый центр, предоставляющий возможность безопасного приобретения, хранения или обмена золота и серебра. Всего в несколько кликов любой желающий может открыть банковский счет и начать осуществление операций.

<h3 id="ztwW"><em><strong>Разработка сайта и приложения<br />Веб-дизайн<br />Брендинг</strong></em></h3> <h2 id="o7JT">О проекте</h2> <p id="DvCD"><a href="https://www.goldensuisse.com/" target="_blank">Golden Suisse</a> — это единый центр, предоставляющий возможность безопасного приобретения, хранения или обмена золота и серебра. Всего в несколько кликов любой желающий может открыть банковский счет и начать осуществление операций.</p> <figure id="inW5" class="m_column"> <img src="https://img2.teletype.in/files/1e/d3/1ed3d8a3-8762-4174-ae50-6152372c61b0.jpeg" width="1152" /> </figure> <h2 id="oUZy">Смыслы<br /></h2> <p id="0CAd">Фактически этот продукт — многофункциональный центр в кармане пользователя. Отсюда в логотипе компании появились лучи (многофункциональность) и объединяющая точка в центре, на которой сходится движение. Также в знаке легко читается буква G.<br />⠀<br />Компания работает с Английским и Швейцарским золотом, что также нашло свое отражение в логотипе. Есть прямые ассоциации с Швейцарским крестом и флагом Великобритании.<br /><br /></p> <figure id="bU99" class="m_column" data-caption-align="right"> <img src="https://img2.teletype.in/files/9f/dc/9fdc254a-93cf-4ab2-85ee-bdb10f8e218a.jpeg" width="3200" /> </figure> <h2 id="eYRA"><br />Визуальный код<br /></h2> <p id="aDES">Надежность, профессионализм и высочайшие стандарты сервиса — базовые ценности компании, которые мы передали с помощью визуальных образов на сайте компании.<br />⠀<br />Строгость линий, минимализм и продуманный интерфейс подчеркивают премиальность и качество предлагаемого продукта.</p> <p id="ajYn">В данном проекте мы были серьезно ограничены в контенте, поэтому вся дизайн-концепция базируется на продуманной композиции и внимательной работе с типографикой.<br /><br /></p> <figure id="hBGl" class="m_column"> <img src="https://img3.teletype.in/files/2a/7e/2a7e7b30-182b-41f0-a588-115bc9eba27c.jpeg" width="1080" /> </figure> <h2 id="Bqsb"><br />Брендинг<br /></h2> <p id="pmH6">Мы на старте разработали айдентику, которая встраивается в дизайн-концепцию сайта и адаптируется на другие, нужные клиенту носители.</p> <p id="DfIj">Благодаря продуманной композиции, разработанный стиль прекрасно живёт не только в онлайне, но и в оффлайне.<br /></p> <figure id="q1wc" class="m_column"> <img src="https://img4.teletype.in/files/77/61/77615dda-6629-4dc2-b40b-d20412898d2c.png" width="1800" /> </figure> <h2 id="gCLU"><br />Адаптивность<br /></h2> <p id="xhCs">Мобильные пользователи — ядро аудитории. Поэтому сохранены 100% функций веб-версии и разработан удобный и функциональный интерфейс.<br /><br /></p> <figure id="pQ4m" class="m_column"> <img src="https://img4.teletype.in/files/33/44/3344aafe-76af-4345-8d42-97501be8c56c.png" width="1251" /> </figure> <h2 id="oeCi"><br />Признание<br /></h2> <p id="c4It">Проект получил престижные награды в отраслевых конкурсах:<br /><br /><a href="http://2020.goldensite.ru/work/site-business-support-and-investment/6933/" target="_blank">Золотой сайт </a><br /><a href="https://www.awwwards.com/sites/golden-suisse" target="_blank">Awwards</a><br /><a href="https://www.cssdesignawards.com/sites/gs-project/37511/" target="_blank">CSSDA</a><br /><a href="https://www.behance.net/gallery/92937733/GS-Project" target="_blank">Behance</a><br /></p> <figure id="SkiT" class="m_column"> <img src="https://img3.teletype.in/files/68/0a/680ad825-f7c3-4795-969a-149fb3a6005a.jpeg" width="1679" /> </figure> <section style="background-color:hsl(hsl(24, 24%, var(--autocolor-background-lightness, 95%)), 85%, 85%);"> <p id="9zb4"><strong>Хотите, чтобы мы сделали такой же крутой продукт для вас? <br />Пишите на почту: hello@wemakefab.ru</strong></p> </section>