Дизайн веб-сайта Финансовых услуг-11 Примеров для подражания
Как часть индустрии финансовых услуг, вы поможете людям начать интересную часть своей жизни с помощью кредитных карт, сохраняя свои деньги и принимая разумные финансовые решения, которые обеспечат им хорошее. Поиск способа выразить и объяснить все, что вы делаете на своем веб-сайте, может показаться огромной задачей, но в этом нет необходимости.Что такое дизайн веб-сайта финансовых услуг?
Эта область веб-дизайна предоставляет бесшовные цифровые решения, адаптированные для удовлетворения потребностей как будущих, так и существующих клиентов финансовых компаний, консультантов и многого другого.Впереди мы нашли 11 самых передовых примеров того, как должен выглядеть типичный дизайн веб-сайта финансовых услуг.
Независимо от того, хотите ли вы сохранить профессиональный брендинг и сообщения или использовать голос надежного финансового друга, вам понадобятся эти примеры ранее.
- Morgan Stanley
- Adison Partners
- Goldman Sachs
- KeyBank
- Runway Growth Capital
- NerdWallet
- Brightwood Capital Advisors
- Pearl Capital
- Pangea Money Transfer
- BNY Mellon
- Stripe
1. Морган Стэнли
Четкий и чистый дизайн, чтобы вы могли быстрее получить то, что вам нужноMorgan Stanley-один из лучших финансовых институтов в стране. Основанный в 1935 году со штаб-квартирой в Нью-Йорке, этот инвестиционный банк обладает таким славным наследием, что компания не склонна демонстрировать многие из своих веб-дизайнов и наворотов. Давайте исследуем дальше.
Чистый пользовательский интерфейс
Домашняя страница Morgan Stanley пропускает цвет фона, оставляя их девственно-белыми. Их сайт также уделяет мало внимания графике, добавляя их, когда он подчеркивает суть контента или добавляет человеческий фактор в финансы.
Простая навигация, чтобы добраться туда, куда вы хотите попасть
На веб-сайте Morgan Stanley вы можете перейти на страницы всех услуг, включая управление инвестициями, исследования, продажи и торговлю, рынки капитала, инвестиционный банкинг и управление активами.
Все эти меню могут показаться трудными для приведения в порядок, но они представляют собой нечто беспорядочное.
Morgan Stanley перечисляет каждую услугу в раскрывающемся списке "Что мы делаем" в раскрывающемся списке "Что мы делаем". Затем вы можете навести курсор мыши на любое подменю и прочитать дополнительную информацию в текстовом поле справа, прежде чем щелкнуть.
Удобный вход в систему клиента
В правом верхнем углу любой страницы на веб-сайте Morgan Stanley находится логин клиента. К ним относятся логины для Matrix, Исследовательского портала, Stockplan Connect и Morgan Stanley Online. Выберите любой логин из раскрывающегося списка и войдите в систему справа.
2. Adison Partners
Красочная и современная графика и анимацияЗатем Adison Partners описывает себя как"консалтинговую фирму по управлению талантами в бутике", которая предпочитает" редкие таланты"."В их подходе с левым полем вы ожидаете, что дизайн веб-сайта финансовых услуг будет таким же, как вы привлекаете внимание, и Adison Partners не разочарует"."
Сплоченная цветовая гамма
Когда вы заходите на веб-сайт партнеров Adison, вам требуется несколько секунд, чтобы открыть для себя яркую и насыщенную фиолетовую и бирюзово-голубую цветовую гамму. Большая часть их графики и фона отображается фиолетовым цветом с бирюзовым текстом.
Такое яркое цветовое сочетание, несомненно, привлечет даже самых любопытных посетителей сайта и заставит их прилипнуть.
Плавные элементы анимации
Еще одним дополнением к красоте веб-дизайна Adison Partners является использование анимированных элементов. На главной странице изображения людей (товарный знак фиолетового цвета) сдвинуты и обрезаны.
Когда вы нажмете на меню из меню на веб-сайте, вы увидите тот же эффект, что и здесь.
Отличная мобильность
Все мобильные элементы на веб-сайте Adison Partners чистые, аккуратные и быстро загружаются.
Ничто не доставит такого удовольствия, как просмотр их веб-сайта на мобильном устройстве, как выполнение этого на настольном компьютере, и будет раздавлено.
3. Goldman Sachs
сотни лет истории,никакого беспорядкаЕще одна крупная финансовая компания с отличным веб-сайтом, о которой мы хотим поговорить, - это Goldman Sachs. С 1869 года Goldman Sachs стал надежной компанией, предоставляющей финансовые услуги в таких областях, как инвестиционный банкинг, андеррайтинг ценных бумаг, первичное брокерское обслуживание, управление активами, ценные бумаги и управление инвестициями.
Здесь мы более подробно рассмотрим их веб-сайт и то, что заставляет его работать.
Это не мешает навигации.
Как и предыдущий Morgan Stanley, Goldman Sachs имеет богатую историю и еще больше услуг. Размещение меню находится в левой, а не в правой части веб-сайта и состоит из трех строк, которые указывают на выпадающее меню.
Когда вы нажимаете на раскрывающийся список, вас приветствует ряд категорий: Наша компания, чем мы занимаемся, идеи, Гражданство, карьера, инвесторы.Здесь также вы найдете логины клиентов Goldman Sachs.
В каждом меню есть раскрывающийся список, который вы можете просмотреть, щелкнув меню один раз. Черный текст на белом фоне меню делает эту важную часть веб-сайта естественной и простой в использовании.
Предварительный просмотр для мобильных устройств
Вот некоторые уникальные функции веб-сайта Goldman Sachs, которые вы, возможно, захотите добавить в свой собственный. Вместо предварительного просмотра мобильного сайта путем ввода веб-адреса на смартфоне или планшете у Goldman Sachs есть функция предварительного просмотра для мобильных устройств на настольном сайте.
4. Банк Ключей
Эффективный и простой брендингЯвляясь дочерней компанией Keycorp, Keybank является финансовым учреждением и региональным банком, базирующимся в Кливленде, штат Огайо. Он входит в топ-20 банков страны, поэтому их веб-сайт, безусловно, стоит изучить. Вот элементы, которые, по нашему мнению, выделялись больше всего.
Общий брендинг
У KeyBank есть простой, но эффективный логотип:Ключ. Этот ключ отображается на главной странице и на каждой подстранице, включая "что такое финансовое здоровье"? И банк 101.
Также добавляет сплоченности бренду красная, серая и белая цветовая гамма, которая повторяется повсюду.
Удобная функция поиска
Если вы предпочитаете пропустить меню и навигацию, прямо над любой страницей на веб-сайте KeyBank находится строка поиска. "Я ищу его по умолчанию...Но как только вы начинаете печатать, этот текст стирается.
Вы даже можете отфильтровать результаты поиска, чтобы получить индивидуальный контент, который вы ищете.
5. Капитал роста взлетно-посадочной полосы
Современный дизайн с четким призывом к действиюRunway Growth Capital-ведущий поставщик венчурных инвестиций, который проделал отличную работу, демонстрируя, кто они такие, какую работу они проделали и как они могут вам помочь. В дизайне веб-сайта финансовых услуг есть несколько элементов, включая использование социальных данных, истории успеха, решительный призыв к действию и т.д.
Идеальное развертывание CTA
Веб-сайт взлетно-посадочной полосы сразу привлекает внимание пользователя призывом к замечательному действию"Давайте подключимся", размещенному прямо в середине домашней страницы. В дополнение к этому CTA, Взлетно-посадочная полоса также сможет загружать информационные бюллетени, подписываться на их новостную рассылку и получать доступ к их веб-сайту, в том числе напрямую связываться с членами своей команды.
Цветовая гамма
Тонкая реализация неоново–зеленого цвета обеспечит отличный цветовой акцент-выделит важную информацию на всем веб-сайте. Рост взлетно - посадочной полосы имеет очень хорошо зарекомендовавший себя бренд, который заставляет весь веб-сайт чувствовать себя связанным.
Интерактивные элементы
Взлетно-посадочные полосы привлекают пользователей интерактивными элементами на сайте.
Привлеките внимание пользователя, когда появятся фоновые видео и анимированные изображения. Небольшие элементы по всему сайту, такие как простые эффекты затухания и эффекты движения при наведении, оживляют этот веб-сайт
6. NerdWallet
мы упростили веб - дизайн банкаЭто гораздо более новое учреждение, основанное в 2009 году, но с тех пор NerdWallet сделал себе громкое имя. Тон NerdWallet немного отличается от других финансовых услуг, которые мы обсуждали до сих пор. Теперь давайте углубимся в их сайт.
Нежный тон
Сотрудники NerdWallet хотят управлять вашими финансами с меньшими хлопотами. Они упрощают то, что в противном случае может быть сложной проблемой, сохраняя копии простыми и дружественными. Они также классифицируют свои услуги прямо на домашней странице, позволяя вам выбирать, где вам нужна денежная помощь, без навигации. Варианты включают сбережения, личные ссуды, ипотечные кредиты, студенческие ссуды, страхование, инвестиции и кредитные карты.Скачать бесплатно
Расширяйте свою клиентскую базу с помощью этих проверенных стратегийЧтобы получить представление о развитии вашего бизнеса с помощью цифрового маркетинга, прочитайте"Цифровой маркетинг для финансовых консультантов: Как построить свою компанию".
Электронная почта
Скачать сейчас
Организованная навигация сверху вниз
С таким количеством услуг под эгидой одной компании сайт NerdWallet мог бы выглядеть загроможденным, если бы они не оптимизировали свое меню. К счастью, это не так. Меню сайта находится в левом верхнем углу страницы, и там есть выпадающее меню для одной из 8 категорий.
Идеальное развертывание CTA
На домашней странице NerdWallet есть несколько Cta, которые вы можете изучить один или два. Первый CTA предназначен для приложения. В одном разделе на домашней странице NerdWallet есть зеленая кнопка CTA, которая описывает приложение и говорит "Начать".”
Если вы хотите зарегистрироваться на кредитную карту через NerdWallet, далее на странице ниже вы можете выбрать свой кредитный рейтинг в раскрывающемся списке, а затем выбрать финансовый фактор, который беспокоит вас больше всего, во втором раскрывающемся списке. К ним относятся нулевые проценты, низкие процентные ставки, поездки, вознаграждения, кредит на строительство и возврат наличных. Чтобы продолжить, вам нужно нажать кнопку CTA "найти карточки" (зеленая).
Посетите веб-сайт"
7. Консультанты Brightwood Capital
Прокрутка навигации+Графика путешествий=Веселый пользовательBrightwood Capital Advisors-нью-йоркская финансовая консалтинговая фирма с офисами в Далласе, Филадельфии, Миннеаполисе, Беверли - Хиллз и Чикаго. С первых секунд, как вы нажимаете на их веб-сайт, Брайтвуд захватывает вас. Давайте поговорим о том, почему.
Крупногабаритная графика для путешествий
Веб-сайт Brightwood приветствует вас белым деревянным логотипом на синем фоне. Затем слово Brightwood double Os расширяется, приводя вас на домашнюю страницу.
Этот графический трюк - не единственное, что есть в образном рукаве Брайтвуда. При прокрутке снова появятся те двойные ОС, которые образуют знак бесконечности. Когда вы путешествуете с вами, исследуя веб-сайт, графика, безусловно, является одним из способов влияния.
Навигация по прокрутке
С помощью Brightwood Capital Advisors вы можете прокручивать все на веб-сайте сверху вниз и касаться каждого меню на сайте.
Это экономящий время подход, который может понравиться вашей клиентской базе. Вместо того, чтобы нажимать на множество меню, вы можете продолжать прокручивать, пока не найдете то, что вам нужно.
Простое меню доступа и вход в систему
Конечно, мы хотим предоставить зрителям выбор. Вот почему веб-сайт Brightwood сохраняет меню в верхней части страницы, независимо от того, сколько вы прокручиваете. Их ссылка для входа также остается, что позволяет вам удобно нажимать на нее в любое время для входа в систему.
8. Жемчужная столица
Мультяшная графика в профессиональной атмосфереС 2010 года Pearl Graphics из Нью-Джерси предоставляет финансовые рекомендации для финтеха. Их веб-сайт-одна из самых графически интересных вещей, поэтому вы можете использовать более художественный подход к дизайну своего собственного веб-сайта финансовых услуг.
Веселая мультяшная графика повсюду
Pearl Capital размещает свою копию на своем сайте с помощью графики. На главной странице есть карикатура на бизнесмена и бизнесмена с видом на город. У мужчины есть увеличительное стекло, потому что мужчина размером с Годзиллу. Та же самая графика появится в полном размере на странице о компании Pearl Capital.
Далее на главной странице Pearl Capital описывает свои решения для белых этикеток и программу синдикации, а затем иллюстративная графика не очень серьезна, но, по крайней мере, не отвлекает от обмена сообщениями Pearl Capital.
Легко доступная контактная информация
Если вы хотите обратиться в Pearl Capital, чтобы вести с ними бизнес, это финансовое учреждение совсем не затруднит вас. Вы всегда можете перейти по ссылке на социальные ссылки Pearl Capital (YouTube, LinkedIn, Twitter, Facebook и т.д.) Или по электронной почте, переходя со страницы на страницу.Если вы используете facebook и нажмете на социальную ссылку Pearl Capital, вы увидите социальную ссылку Pearl Capital. Зажатый между этими ссылками, вы увидите номер телефона Pearl Capital, чтобы сразу же набрать его.
9. Перевод денежных средств с Пангеи
Гуманизированный подход поощряет довериеДенежный перевод Pangea-это услуга, аналогичная PayPal, которую многие люди уже знают и любят. Конкурировать с такими громкими именами, как PayPal, непросто, но Pangea стоит на своем.
Графика способствует доверию
На веб-сайте Pangaea вы можете найти изображения близких членов семьи и улыбающихся людей. Подобная графика внушает доверие благодаря человеческому элементу.
Интеллектуальное развертывание CTA
Pangea прилагает все усилия, чтобы превратить посетителей сайта в пользователей приложений. Над складкой на главной странице находится неоново-розовая кнопка CTA с надписью "Отправить деньги". Эта кнопка расположена после списка преимуществ использования услуг Pangea.
Этот CTA присутствует во второй раз в середине страницы. Кроме того, когда вы начнете прокручивать веб-сайт Pangea, меню CTA со словами"Отправить деньги"станет розовым, и вам будет предложено нажать на него.
10. Дыня BNY
Высококачественное использование графикиНью-Йоркский банк Меллона был основан семьей Меллон в 1869 году. Сегодня Bny Mellon является холдинговой компанией банковских услуг, полученной в результате слияния финансовой корпорации Mellon и Банка Нью-Йорка.
Привлекательная графика
От образцов вертикальных линий и угловых изображений на домашней странице до изображений городских пейзажей на остальной части сайта, офисных встреч и даже реальных сотрудников на белом фоне BNY Melon Rhino графика захватывает, но не отвлекает ваше внимание от копирования или навигации.
Расширенное Меню Входа в Систему Клиента
BNY Mellon, которая специализируется на управлении активами, управлении инвестициями и инвестиционных услугах, предоставляет множество, множество услуг. Вместо того, чтобы выделять выпадающее меню для входа в систему клиента, у вас есть целая страница. Это довольно уместно.
Здесь вы найдете такие категории, как Управление активами, Финансовые услуги, Услуги NEXEN, услуги по обеспечению ликвидности, Иностранная валюта, депозитарные расписки, корпоративные трасты, рынки капитала, услуги по активам и альтернативные инвестиции.
11. Полоса
Цвет и современность, подходящие для его аудиторииЭта компания из Сан-Франциско была основана в 2009 году и предлагает обработку онлайн-платежей как крупным, так и малым предприятиям.
Цвет в любом месте
Войти на веб-сайт Stripe-все равно что увидеть радугу. Цвета меняются и перемещаются, как лавовые лампы, создавая домашнюю страницу, которая, безусловно, знает, как понять всю суть.
Тематическое исследование для преобразования
Один из способов отвлечь потенциальных клиентов от забора-это тематическое исследование. В нижней части домашней страницы Stripe находится раздел вариантов использования, который включает компании, рынки, платформы и SaaS. Вы можете прочитать некоторые тематические исследования этих отраслей, чтобы увидеть, как Stripe работает в качестве клиента.
У Stripe также есть страница, на которой с гордостью перечислены текущие клиенты, в том числе некоторые известные имена, для дальнейшего повышения доверия пользователей.
Пришло время подумать об обновлении дизайна вашего веб-сайта финансовых услуг
Как компания, предоставляющая финансовые услуги, независимо от того, являетесь ли вы банком, платформой денежных переводов или инвестиционной компанией, вы хотите дифференцировать свою компанию, сохраняя при этом профессиональный вид. 10 примеров фантастического веб-дизайна финансовых услуг показывают, что управлять этой линией очень легко. Вы даже можете использовать эти примеры в качестве стимула для создания веб-сайтов, которые увеличивают конверсию и расширяют вашу аудиторию.