Как четко и лаконично изложить трехэтапный процесс?

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

Я попытался разбить раздел «Как это работает» на 3 части, при этом второй раздел был выделен только в стилистических целях (не то чтобы он был важнее другого раздела).

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

Если кому-то нужны дополнительные разъяснения, дайте знать!

Спасибо за все любезно предоставленные отзывы, взгляните на исправление и, пожалуйста, дайте мне знатьвведите описание изображения здесь

ОБНОВЛЕНИЕ 3введите описание изображения здесь

ОБНОВЛЕНИЕ 4введите описание изображения здесь

ОБНОВЛЕНИЕ 5введите описание изображения здесь

Значки, которые вы используете, немного малы. Я мог бы попробовать увеличить их и расположить по центру над строками текста или слева от них.
Спасибо за предложение. Какого размера должен быть значок? В два раза больше. 1,5 и тд? Значки уже расположены по центру. Не могли бы вы уточнить второй момент?
Значки выглядят центрированными над текстом, но текст (и, следовательно, значки) не центрируются в полях. Например, в поле 1 левое поле выглядит шире, чем правое. Кроме того, в настоящее время ваш основной текст в поле 1 ниже, чем поля 2 и 3. Выравнивание основного текста сделает его более приятным для чтения.
Неееет. Не делай этого со мнойееееее!. Мой ответ теперь нуждается в шаге 4! Не используйте один и тот же цвет для трех полей, если вы не используете поля для их разделения.
Лучше. Обратите внимание, что ваши шаги расположены по центру. Ваши заголовки расположены по центру. и ваша основная копия выравнивается по левому краю. Что это предполагает?
Хорошо, Рафаэль, я сделал еще одно обновление с другим цветом в середине, так как вы любезно предложили мне, так как нет полей, достаточно ли это хорошо>
О чем говорит ваша критическая самооценка? Ты удовлетворен?
Ну, я не верю в совершенство, но достаточно хорошо, так что я думаю, что это достаточно хорошо, спасибо!
Мне кажется, или средняя ступенька кажется меньше двух других? Я знаю, что это оптическая иллюзия, основанная на цвете средней рамки, но это стоит иметь в виду.
Это правильное замечание, Пол, я отрегулировал поля, так что я думаю, что теперь все одинаково (см. Обновление 4)
Хорошо, взгляните на обновление 5. Используется bac #D7D7D7, более светлая версия #ccc

Ответы (3)

Меньше - больше

  • Удалите крошечные значки из абзацев.
  • Сократите пространство между первым и вторым абзацами в каждой колонке (примерно наполовину).
  • Удалите выделение цветом в центральной колонке. Если вы хотите разделить блоки по цвету, используйте три разных цвета. Но я бы предложил просто использовать один и позволить разделять их пустым пространством.

Оставайтесь последовательными

  • Делайте заголовки одинаковой длины в разных столбцах — занимайте одну или две строки; не оба.
  • Сделайте абзацы одинаковой длины в столбцах.
  • Сделайте числа внутри кругов того же размера, что и заголовки, и, возможно, выделенные жирным шрифтом.
  • Используйте постоянные поля.
  • [Копирайтинг] Используйте постоянный голос и тон.

Пример

Макет из 3-х секций

Спасибо, Пол. Я добавил исправление в свой отредактированный пост, дайте мне знать, что вы думаете!
Привет, Пол, я только что заметил твой пример, и он мне понравился. Какой цвет фона вы используете?
основной { цвет фона: #ccc; }
Спасибо! Некоторые люди думают, что необработанный серый цвет можно рассматривать как унылый фоновый цвет, но я думаю, что это нормально. Мысли?
Я просто выбрал простой серый фон для макета; Я не пытался явно предложить этот точный цвет фона. Но я думаю, что мы говорим о субъективном мнении на данный момент. Цвет или оттенок серого сами по себе не скучны, но различные комбинации цветов или оттенков серого могут выглядеть скучно в зависимости от содержания и контекста. Если вы хотите добавить немного зеленого в серый фон, немного уменьшите значения красного и синего: #caccca.

Выглядит нормально, но читается плохо. Я хотел бы видеть гармоничный стиль письма. Гармония заключается не только во внешнем виде изделия. Параллельное построение в письме очень помогло бы. Некоторые слова, которые вы используете, не существуют. Вербовать?

  1. Получите признание в качестве лучшего разработчика. (Пассивный залог. Активный залог был бы лучше.) Попробуйте «Стать узнаваемым». или «Построить узнаваемость».

2, Дайте рекомендации. (Это активный залог, начинающийся с глагола.) Хорошо, как есть.

3: Получить оплату. (Снова пассивный залог. Сделать что-то для вас слабее, чем прямое действие.) Попробуйте что-то вроде «Использовать комиссионные» или «Отправить счет».

Выравнивание имеет решающее значение. (См. оскорбление в моем ответе выше, чтобы узнать, как незначительные вещи могут быть очень заметными.)

Сетка для копии головы/тела для трех точек не одинакова. Основная копия начинается ниже в 1, чем во 2 и 3, из-за переноса строки для длинного заголовка в точке № 1.

Короче говоря, стремитесь к согласованности во всем макете.

1: добиться признания, 2: рекомендовать другим, 3: получить оплату
Спасибо всем за ваш вклад. Я использую шрифт исходного кода pro, предназначенный для разработчиков.
Я загрузил обновление в свой пост редактирования, дайте мне знать, если вы, ребята, довольны!
Это делает прогресс. Основной текст должен быть более удобочитаемым, например шрифт с засечками. Используйте моноширинные шрифты для представления фактических фрагментов кода. Кроме того, каждый раздел, вероятно, должен быть либо выровнен по центру, либо по левому краю, если только нет веской причины смешивать их таким образом. Абзацы определенно требуют большего количества боковых полей.

Мои 2 цента:

  1. Удалите значки.

  2. Такое большое разделение на абзацы делает их двухэтапным процессом на каждом этапе. всего 6.

  3. Используйте лучший шрифт.

Как четко и лаконично изложить трехэтапный процесс?
СпросиСетьПолитика конфиденциальности1y, 0v