Создание узнаваемого Boston.gov
Мы много говорили о новом облике и дизайне Boston.gov — мы даже опубликовали наши руководящие принципы бренда . Сегодня мы углубимся в небольшой, но важный аспект нового сайта: наши значки.
Должен признать, что на старом сайте у нас было некоторое беспорядком с иконками. Вместо единого, согласованного подхода мы позволили отделам делать все по-своему, и это создавало странное впечатление. Без единообразия было сложно понять, действительно ли информация, которую вы получали, исходила от города Бостона.
С новым сайтом Boston.gov мы подняли планку. Вы найдете около 300 уникальных значков по всему сайту, в том числе на страницах отделов и на главной странице . Даже с такими маленькими значками мы следовали нашим стратегическим принципам. Мы хотим выглядеть уютно, но при этом официально, создавая атмосферу, которая побуждает вас кликать и исследовать наш сайт.
Благодаря иконкам мы можем передавать смысл, не обращаясь к языку. Помимо того, что они помогают вам ориентироваться на сайте, наши иконки также добавляют немного индивидуальности Boston.gov.
- Last updated:
-
Иконы, основанные на опыте
Один из основных типов значков, которые вы встретите на Boston.gov, — это «опытовые» значки. Эти значки с жирными линиями используются для обозначения конкретных действий, которые может захотеть предпринять гражданин, например, оплатить штраф за парковку или зарегистрироваться для голосования.
Иконки, передающие эмоции, также дают нам возможность добавить немного юмора и личного стиля в нашу работу. Они создаются с использованием линий шириной три пикселя и обычно (но не всегда) имеют четкие края.
Значки отделов
В рамках ребрендинга Boston.gov мы присвоили каждому департаменту свой собственный значок для сайта. Вы можете увидеть каждый из этих «департаментских» значков в нашем каталоге департаментов . Эти значки предназначены для обозначения более подробного контента или могут просто вести вас на страницу конкретного департамента. Они никоим образом не призваны заменить существующие значки и логотипы департаментов. Они служат ориентиром, позволяющим пользователям определить, какой департамент создал тот или иной контент на Boston.gov.
Эти значки проще и состоят из сплошных форм, чтобы их легко могли распознать постоянные пользователи. Они заполнены цветом Charles River Blue и выделены жирной чертой цвета Freedom Trail Red. Хотите узнать, что означают «Freedom Trail Red» и «Charles River Blue»? Узнайте больше о наших цветах .
Другие значки на сайте Boston.gov
Вы также найдете небольшие круглые значки в профилях мест, но на самом деле их можно использовать везде, где они нужны. Для этих значков в строке текста мы используем стиль, похожий на наши значки в социальных сетях. Они окружены кругом с радиусом три пикселя и заполнены цветом Charles River Blue. Они используются для описания особенностей места.Отличные примеры значков в строке текста можно увидеть в боковых панелях страниц общественных центров Boston Centers for Youth & Family (прокрутите страницу немного вниз).
Изучение кейса, посвященного иконе
Вдохновение для создания значков черпается из множества источников. Для значка Комиссии по памятникам архитектуры, изображенного выше, наша команда сначала изучила достопримечательности города. Мы использовали Pinterest, поиск изображений Google и собственные знания. Мы быстро остановились на церкви Святой Троицы на площади Копли как основе для нашего дизайна. Почему Троица? В таком проекте, как Boston.gov, полезно разрабатывать один значок для многократного использования. Мы выбрали Троицу, потому что, помимо памятников архитектуры, она может представлять церкви, общественные пространства, старые здания и многое другое.
Мы также считали, что церковь Троицы будет легко узнаваема для тех, кто не говорит по-английски. В Бостоне говорят более чем на 140 языках. Около 34% жителей города говорят на другом языке . Это, конечно, не считая многочисленных туристов, которые посещают Бостон каждый год. Такие значки, как церковь Троицы, привлекают внимание, но также дают человеку общее представление о том, какую информацию он собирается получить. Это помогает нам — пусть и в небольшом масштабе — преодолеть языковые барьеры на сайте Boston.gov.
Какой лучший способ проверить что-либо? Выпустить это в мир и посмотреть, что скажут люди. Когда наша команда показала этот значок представителям общественности, они быстро поняли, что это такое и что он может представлять. В тот момент мы поняли, что у нас есть победитель. Во время запуска Boston.gov мы создали около 300 значков всего за несколько месяцев. Несмотря на этот сжатый срок, мы все равно тестировали наши значки с реальными людьми, чтобы убедиться, что мы не работаем в вакууме.
Иконки, возможно, не кажутся чем-то важным, но именно в них легко допустить ошибку при создании сайта. Мы планируем со временем расширять и дополнять набор иконок по мере добавления нового контента и тем на сайт. Используя иконки с похожим внешним видом и стилем, мы надеемся избежать путаницы и удивить вас приятными решениями в дизайне.
Наша главная цель — чтобы вы получали удовольствие от посещения Boston.gov и чувствовали, что пользуетесь сайтом, созданным людьми для людей.
- Last updated:
-
