Теория графического дизайна, стоящая за целевой страницей

Вините в этом фреймворки сетки, такие как 960.gs и Bootstrap. Они упростили создание точного макета:

http://getbootstrap.com/examples/carousel/

Эти фреймворки решили многие проблемы макета CSS и облегчили веб-разработчикам и дизайнерам создание структурированного сайта на основе сетки, который был удобным, знакомым и простым в использовании.

Затем тематические сайты начали продавать вариации готовых версий такого макета и сделали его безболезненным даже для обычного Джо или Джейн. Этот общий шаблон дизайна просто стал де-факто представлением, которое большинство людей ассоциируют с «веб-сайтом» в наши дни.

Твит пользователя Twitter @jongold довольно лаконично резюмирует это :

Я думаю, что эта статья из NNG полезна в этом конкретном случае, особенно для макета «одна страница»:

https://www.nngroup.com/articles/page-fold-manifesto/

Короче говоря, вам нужно дать своим читателям/пользователям причину прокручивать вашу страницу, используя текст/контент, который «зацепит их». Размещая элементы, вызывающие интерес, например изображения для новых разделов, появляющиеся чуть выше сгиба, вы создаете потребность в сознании пользователя. Это ничем не отличается от продажи, и вам нужно дать людям повод инвестировать свое время в ваш веб-сайт, вместо того, чтобы предполагать, что они будут прокручивать или читать его только инстинктивно.

Примеры, которые вы видите в предоставленных ответах, не имеют за собой реальной теории и являются просто шаблонами, и как дизайнер вы всегда должны стремиться к оригинальности.

Ваш контент должен диктовать поток страницы. Прочитайте и поймите свой контент, тогда идеальное место размещения должно прийти к вам. Для меня не существует универсального решения для разработки веб-страницы. Есть элементы или макеты, которые вы можете включить, но их можно определить только путем расширенного исследования и понимания контента, который у вас есть в настоящее время.

Это хороший вопрос, но не хватает сути. Речь идет не о теории дизайна «хорошей» домашней страницы, а о периоде подхода к дизайну — логическом творческом решении, которое наилучшим образом соответствует целям / аудитории клиента, будь то веб-сайт, брошюра, приложение для сенсорного экрана и т. д. Вы должны начать с то же место для основных элементов вашего проекта (я разрабатывал свой процесс в течение многих лет). Это будет включать основу клиента / бренд / цвета / шрифт / изображения и, самое главное, то, чего они пытаются достичь в краткосрочной / среднесрочной / долгосрочной перспективе.

Это ключевой пример: однажды мне пришлось построить стенд для международной конвенции, я никогда раньше этого не делал, выиграл стенд на выставке. Почему? Потому что я не начал с дерева, стекла, ковра, широкоформатной графики, плазменных экранов, как другие (т.е. шаблон начальной загрузки домашней страницы). Клиент хотел выйти на рынок с новым продуктом. У них был отличный персонал по продажам, поэтому задача заключалась в том, чтобы люди стояли на стенде на протяжении всего мероприятия, чтобы мы могли поговорить с ними — вот и все. Я спроектировал стенд вокруг кибер-кафе с мягкими креслами, дорогим кофе и чаем (бесплатно), точкой доступа к сети и электронной почте (бесплатно) и широкоформатным экраном для демонстрации (со звуком и подсветкой). Я также поставил башню посередине, которая не доходила до потолка на 6 дюймов, с вывеской, обращенной к NSEW, это было видно из любой точки зала. Стенд трамбовали 3 дня.

Вернуться на ваш сайт. Я начинаю с того, чего клиент пытается достичь с помощью сайта, и как это согласуется с его более широким планом онлайн- и офлайн-маркетинга. Очевидно, что у разных клиентов будут разные цели, даже если есть общие элементы, такие как услуги/контакты. Дело в том, что они не продаются сами по себе, поэтому вам не следует начинать с них. Выражение преимуществ и преимуществ будет привлекать пользователей, поэтому узнайте своего клиента и то, что они пытаются сделать с бизнесом. Например, общим стремлением может быть поддержка социальных сетей и разработки контента ИЛИ полное цифровое преобразование с переводом услуг и форм в электронный вид ИЛИ это может быть в первую очередь информация/данные с точки зрения местных органов власти.

Другой вопрос: является ли мобильность ключевым направлением? Это может показаться спорным, когда 80% трафика идет в этом направлении, хотя коммерчески настольные / широкоэкранные приложения живы и здоровы и МОЖЕТ БЫТЬ основной аудиторией ваших клиентов — например, в HNW Finance мобильные устройства еще не приняты из соображений безопасности. Во всех случаях вам нужно знать это ПЕРВЫМ, прежде чем принимать решение о своем UX, плане сайта, каналах/каналах, навигации и приоритетах домашней страницы .

Пара кратких примеров - Финансы (Коммерческий оффшор) и Местные органы власти (водоснабжение).

Ключевое требование финансовой компании: (1) продвигать персонал / опыт (2) оффшорная выгода (3) разъяснять, чем они занимаются и в каком секторе рынка (4) управление (основное, регулируемое, активное / дальновидное мышление, уровень / способности) (5) стремление новое мобильное присутствие (появляются приложения) Вышеизложенное направлено на мою домашнюю страницу, показанную ниже. Меню очень простое и ведет к команде и контакту (гамбургер для остальной части сайта), четкий логотип и герой квалифицируют, кто они и оффшорные (без карусели), краткий вступительный абзац резюмирует предложение с (максимум 2 абзаца) основания / о тексте следующие направо. Четыре панели CTA (призыв к действию) обеспечивают прямые каналы для получения ключевой информации в поддержку управления. Открывает Sans для тела 85% черного цвета - подходит для мобильных устройств. ВЫПОЛНЕНО.

Требование местных органов власти: (предоставление услуг и информации по водоснабжению/дренажу). Несмотря на то, что организация была сильна в области окружающей среды и маркетинга, включая ежедневные публикации в социальных сетях, реальным приоритетом внутри было (1) переход на цифровые услуги и ePay (2) линия экстренной помощи (3) переход на мобильные устройства в качестве основного информационного канала (4) 24/7 живое уведомление о текущих работах и ​​проблемах, в том числе от инженеров на земле. На основе аналитики и исследования клиентов были определены 3 ключевых канала: (а) услуги водоснабжения (б) канализация (в) консультации / поддержка (помощь клиентам, чтобы помочь себе, включая информационные бюллетени, часто задаваемые вопросы, медиацентр, чтобы сократить количество телефонных звонков)

Решение ниже следует этому примеру. Нет героя как такового, нет карусели - пространство используется для введения электронных услуг и ссылок. 3 основных канала + поиск по сайту с удобными для мобильных устройств значками находятся во вторичном меню под основной панелью навигации (белого цвета), чтобы этот основной канал был очень четким, имея только экстренную ссылку и гамбургер сайта. Розовый представлен как целевая аудитория, состоящая из 75% женщин (плательщиков счетов), и хорошо работает против голубого и голубого (вода). Иконки на заказ, простые четкие. Основные уведомления (управляемые Twitter) следуют за этим на главном экране. Сильный цветовой контраст / разборчивость для регулирования доступности (строгие правила государственного департамента). Управление CMS, в том числе адаптация к мобильным устройствам.

Наконец, не ведитесь на тренды на сайтах-шаблонах и бутстрапе. В настоящее время (осень 2016 г.) существует тенденция использовать белый текст на светлом фоне, тонкие шрифты заголовков (например, Helvetica Ultra Light) и <60% черного цвета для основного текста, т. е. серого. Они исходят из полиграфического дизайна, хотя и создают множество проблем с доступностью (например, для слабовидящих и для отображения на мобильных экранах). Помните, что ваше обучение дизайну, форма и функция — это баланс, который особенно важен с коммерческой точки зрения на экране. Вы дизайнер, а не лемминг. Руководствуйтесь логикой, не следуйте слепо за другими.

Я потратил время, чтобы написать это, потому что я принципиально верю в этот подход и хочу помочь вам и другим. Не зацикливайтесь на моем дизайнерском стиле или креативе, у вас будет свой - подумайте над подходом к решению. Он работал у меня почти 20 лет в сфере полного обслуживания, и я успешно создавал веб-сайты с 1997 года на MacII, когда у нас было всего 40 тысяч страниц и 256 цветов для игры :).

Желаем удачи в вашем путешествии

Лендинг пейдж — это презентация в лифте. И большинство веб-сайтов в наши дни представляют собой не что иное, как целевые страницы. Каждая страница тщательно разработана, чтобы направлять людей к покупке.

Для многих людей это означает заголовок, презентацию, кнопку для покупки. И теоретически для многих компаний это работает. Проще говоря, это называется «выше сгиба». Но это не совсем так.

«Над сгибом» происходит от газетной терминологии, где буквально сгиб в газете. Рекламные объявления над складкой превосходят те, что ниже. Это не совсем так в веб-дизайне — исследование за исследованием докажут, что это потому, что они не проводят правильных исследований. Прочтите эту статью о Kissmetrics — Почему фолд — это миф для лучшего изучения.

Глядя на него правильно, вы увидите, что он не столько о том, «Что люди видят, когда загружается моя страница», сколько о следующем:

• Представлял ли я преимущества своего продукта?
• Легко ли найти призыв к действию (CTA) и хорошо ли он сформулирован?

Поскольку маркетологи лучше понимают это, они хотят, чтобы дизайн соответствовал этим критериям. ТОГДА появляются такие шаблоны, как Grid и Bootstrap. Не заблуждайтесь — неважно, насколько красив шаблон, если бы он не конвертировался в продажи, никто бы его не использовал .

Введите эти шаблоны и другие. Это быстрый и простой способ для дизайнеров или даже не дизайнеров создать достойную страницу. Хороший маркетолог будет использовать его как основу, но либо изменит его в соответствии со своими потребностями, либо наймет кого-то, кто изменит его в соответствии со своими потребностями (история из моей жизни!).

Затем действительно хороший маркетолог проведет A/B-тестирование с небольшими изменениями либо в дизайне, либо в тексте. Тщательная доработка для повышения коэффициента конверсии. У большинства предприятий нет ресурсов для этого. Но угадайте, что, изучая большие сайты и создавая шаблоны, вы уже на правильном пути.

Резюме

Есть ли за этим теория дизайна? Немного, но теория дизайна, особенно на целевой странице, исходит из исследования рынка и теории больше, чем из теории дизайна. В конечном счете, целевые страницы — это инструменты конверсии. Независимо от того, используете ли вы проверенные методы, которые вы уже привыкли видеть, или что-то совершенно другое, в конечном итоге он будет жить и умирать в зависимости от того, насколько хорошо он конвертируется.

Похожие вопросы

Действительно ли интерфейсы должны «хорошо выглядеть»?

Этот тип макета, который вы описываете, может быть опробован и испытан, но я считаю, что он потерял влияние, которое он когда-то имел в 2012 или 2013 году. шаблоны, многие из которых используют Bootstrap.

По моему опыту, это макет, который очень легко изящно уменьшить. Не случайно в 2012 году или около того смартфоны дешевели, становясь доступными для всех, равно как и планшеты.

К сожалению, мне становилось все труднее взять это базовое размещение элементов и усовершенствовать его во что-то визуально интересное, и я начал пересматривать идеи компоновки, которые у меня были до этой тенденции, и улучшать их.