Ланч-тайм 118: краткий перевод свежих статей о digital

Содержание

• Визуальные разделители контента в мобильном UI
• 5 фраз, которые сорвут сделку
• Тренд в дизайне — двухцветные изображения: советы и примеры

#539. Визуальные разделители контента в мобильном UI

Visual Dividers in Mobile UI Design

Фото: beachcamera.com

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

Традиционные разделители

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

Успейте купить корпоративный пакет COSSA-2025 со скидкой!

Cossa анонсирует главный рекламный формат на весь 2025 год: сразу 8 различных опций.

Пакет идеально подходит для онлайн-сервисов, стартапов, интернет-компаний и digital-агентств.

Успейте приобрести пакет до повышения цены!

Full-bleed разделители: такой способ разделения информации подходит, когда вам нужно чётко отделить блоки друг от друга — как в примере ниже. Используйте Full-bleed разделители в случаях, когда элементы содержат не привязанный к контексту контент: биографические детали в контактной информации, письма и т.д.

Inset разделители: подходят, когда элементы со схожим контентом можно объединить в группы. Как в телефонной книге, где контакты сгруппированы и помечены иконкой или буквой алфавита. Элементы в группе не разделены, идут непрерывным потоком и мотивируют пользователя скроллить страницу.

Альтернативные способы рисовать разделитель

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

Белое пространство: с использованием белого пространства интерфейс станет привлекательнее и проще. Пространство вокруг элементов служит разделителем и делает интерфейс менее захламлённым.

Цветовой контраст: цвет — мощный инструмент дизайна, используйте его умело. Выберите два контрастных цвета и выделите ярким то, к чему хотите привлечь внимание пользователей.

Тени и высота: с помощью теней добавьте глубины приложению и визуально отделите элементы друг от друга. Приложение Google Календарь — отличный пример использования теней вместо линий.

Для разделения изображений линии не нужны

Изображения не нуждаются в разделителях, потому что сама сетка создает визуальное разграничение. Достаточно добавить отступы между элементами и заголовки для групп.

Вывод: Суть юзабитили — в мелочах, о которых даже не думаешь, что нужно думать. Зато теперь вы в курсе.
Вы сэкономили 10 минут.

#540. 5 фраз, которые сорвут сделку

5 Phrases That Will Kill Your Sales Deal

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

Вот пять фраз, которые не должен произносить продажник.

1. «Поверьте мне»

Лучше сразу напишите клиенту на лбу: «Я дурак». Эта избитая фраза из телемагазинов и рекламы моющего средства. Говоря так, вы как будто требуете доверия пассивно-агрессивным способом.

Если вы уже выстроили доверительные отношения с клиентом, такая фраза вам не нужна. В таком случае она даже звучит как оскорбление. Клиент может подумать, что ему не доверяют. А вы будто уклоняетесь от ответа или что-то скрываете. Это вызывает подозрения.

2. «Если честно...»

Все, что написано выше, относится и к этой фразе. Но если вы скажете: «Честно говоря...» — будет гораздо хуже.

«Подождите... То есть он врал мне первые 25 минут?» — подумает клиент.

Доверие и честность не нужно подавать как что-то особое. Они должны быть в разговоре всегда, с самого начала.

Фото: thisismoney.co.uk

3. «Хм... Я думаю, мы можем это сделать»

Так можете или нет?

Сомнения — это нормально. Но не нормально уходить от ответа. Признайте, что клиент задал хороший вопрос. Прям так и скажите: «Хороший вопрос!». И дайте ему понять, что ответите, но позже.

Не давайте ответ, в котором сомневаетесь. Неверный ответ гораздо хуже для репутации и доверия, чем ожидание ответа.

4. «Вы принимаете решение?»

Это просто оскорбление! Если тот, с кем вы ведете переговоры, не принимает решения — не ставьте его в неудобное положение. Более того, не заставляйте говорить об этом вслух.

5. Использование профессиональных терминов

Вы, как профессионал, по уши в своей сфере и понабрались профессиональных словечек. Но помните, что они не знакомы клиентам. Старайтесь не употреблять профессионализмы в разговоре. Чтобы вас понимали, говорите на языке клиента.

Велика вероятность упустить сделку, использовав в разговоре не те слова. Будьте честны и открыты и избегайте фраз, которые ставят под угрозу вашу репутацию и успешность переговоров.

Вывод: Не наглейте и не ждите от клиента, что он будет с вами на одной волне с первой минуты разговора. Будьте гибкими, белыми и пушистыми.
Вы сэкономили: 15 минут.

#541. Тренд в дизайне — двухцветные изображения: советы и примеры

Duotone Color: Tips & Examples for This Vibrant Trend

Благодаря Spotify двухцветный дизайн с каждым днём набирает популярность. С таким эффектом фото сразу бросается в глаза!

Что такое дуотон?

Дуотон — использования двух цветов в изображении. Название и техника появились в полиграфии, где для печати использовали только 2 цвета.

Дуотон визуально интересен и делать его — элементарно. Эффект создается в Фотошопе или с помощью приложения по типу Colofilter.css.

Так полиграфическая техника нашла место в интернете. Возможно, вы уже заметили эту тенденцию в сети.

Заглавное фото

Используйте двухцветное фото на главной странице — как New Deal Design, которые выбрали смелые цвета и смешные образы. Не бойтесь выйти из зоны комфорта — используйте несочетаемые цвета. Главное — создать контрастное изображение, притягивающее внимание пользователей.

Чтобы достичь максимального эффекта:

• Выберите два контрастных цвета. Круто, если это будут цвета бренда.
• Возьмите фото с объектами, на которых можно сфокусироваться. Пейзажи сложнее использовать.
• Используйте качественные изображения. Размытые фотографии низкого качества — не вариант.
• Создайте контраст.
• Определите место для кнопок и текста.
• Выбирайте цвета, которые отражают настроение фотографии.
• Добавьте цветную рамку или параллакс-эффект.

Простая цветовая палитра

Дуотон — не обязательно что-то сложное. Иногда яркие примеры просты по своей природе.

Assurity Life Insurance используют два оттенка красного и простой шрифт. По скроллу появляется ещё несколько полутонов. Красный привлекает внимание пользователей.

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

Повышенная читабельность

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

Акцент

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

Плюс использования техники в маленьком пространстве — здесь больше свободы. Можно экспериментировать, даже если вы не уверены, что дуотон будет работает.

Фон

Это идеальный способ использовать фирменные цвета. И еще дуотон поможет сделать сайт современнее без кардинальных изменений.

Join Radio использует чуть заметный градиент для фона. Цвета гармонируют с пользовательским интерфейсом. Простая анимация и переход от светлого цвета к темному побуждают скроллить страницу.

Дуотон — возможность экспериментировать, соединять несовместимые цвета. А результат всегда выглядит классно и работает.

Вывод: Оригинальное — не значит сложное. Особенно в эпоху минимализма. Берите фотошоп (или даже приложение для телефона) и креативьте трендовый дизайн.
Вы сэкономили: 15 минут.

Поздравляем, вы стали мудрее на целый ланч-тайм. Храните секрет своей мудрости и никому не говорите, откуда вы все знаете. А за новой порцией свежих статей возвращайтесь через неделю. Чао!

Читать по теме: Ланч-тайм: краткий перевод свежих статей о Digital (все выпуски)