Форм дизайн: Онлайн конструктор веб-форм, опросов, квизов и калькуляторов для Вашего сайта – Правила создания качественных форм — Дизайн на vc.ru

Содержание

Правила создания качественных форм — Дизайн на vc.ru

Самые распространённые ошибки дизайна и способы их исправления. Перевод статьи от Эндрю Койла.

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

Формы должны идти столбцом

Несколько столбцов нарушают вертикальный импульс пользователя.

Заголовки — строго сверху

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

Группируйте заголовки с полями ввода

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

Правила дизайна форм для веб-сайта

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

Правила дизайна форм для веб-сайта

Формы должны быть в одной колонке

Формы должны быть в одной колонке 

Метки полей должны располагаться над полями ввода

Формы должны быть в одной колонке 

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

Группируйте метки с полями

Группируйте метки с полями

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

Избегайте капса

Группируйте метки с полями

Написание всех меток заглавным текстом затрудняет визуальное сканирование формы.

Показывайте все доступные метки, если их меньше шести

Группируйте метки с полями

Включите контекстный поиск в раскрывающемся списке, если имеется более 25 опций.

Размещайте чекбоксы только друг под другом

Это упрощает визуальное сканирование и проверку выбранных вариантов.

Снабдите кнопки описанием действия

Размещайте чекбоксы только друг под другом

Выделяйте поля с ошибками

Выделяйте поля с ошибками 

Укажите пользователям, в каком поле допущена ошибка и снабдите описанием для решения проблемной ситуации.

Выделяйте правильное заполнение полей

Выделяйте поля с ошибками 

Не используйте проверку во время ввода пользователем — если это не улучшает взаимодействие.

Не скрывайте справочный текст

Не скрывайте справочный текст

Предоставляйте вспомогательный текст везде, где это возможно. Для сложного вспомогательного текста продумайте, возможность его размещения рядом с полем вводом во время сфокусированного состояния.

Выделяйте основные и второстепенные действия

Не скрывайте справочный текст

Использовать длину поля равную количеству знаков

Использовать длину поля равную количеству знаков

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

Не помечайте опциональные поля символами

Не помечайте опциональные поля символами

Пользователи не всегда знают, что подразумевается под маркером (*). Вместо этого лучше указать необязательные поля текстовым описанием.

Группируйте схожую информацию

Не помечайте опциональные поля символами

Создавая логические группы, пользователь будет лучше понимать смысл формы, и это упростит заполнение.

Необходимость полей и форм ввода

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

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

 
Источник

Понятие формы в концептуальном дизайне — Look At Me


21 марта главный редактор сайта Кувь – Игорь Гончаренко вместе с редактором Евгением Князевым дали лекцию в киевской галерее «ХудГраф». Темой лекции стало понятие формы в контексте концептуального дизайна.


На протяжении 2 часов мы рассказывали как прийти к сложным концепциям через простые формы, также был предоставлен иллюстративный материал и проведены тесты. Отдельную благодарность мы выражаем куратору проекта - Ростиславу Соколовскому за предоставленную возможность выступить.

Предлагаем вам подробный план лекции, так как мы приветствуем дистанционное обучение.
 

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

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

1. Разработка форм для предметного дизайна

2. Разработка концепций для архитектурного и интерьерного дизайна

3. Разработка персонажей.



Форма

Понятие Формы в философии  — понятие философии, определяемое соотносительно к понятиям содержания и материи.

Понятие формы предмета — взаимное расположение границ (контуров) предмета, объекта, а также взаимное расположение точек линии.

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

Слово форма имеет смысл образа, очертания и визуализации предмета.  То есть, форма – это причина существования предмета. Если нет формы, то вещь не существует в пространстве и времени.

 

Формы бывают простые и сложные.

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

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

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

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

Соответственно вы можете начинать поиски своей формы с визуальных соотношений противоречивых форм. Большое - малое, высокое - низкое, толстое - широкое, много - мало, шероховатое - гладкое, мягкое - твердое, светлое - темное, легкое - тяжелое и др.


 

Если коснутся искусства, то все авангардисты и сюрреалисты стремятся к тому, что б найти свою собственную форму.

Например художник Apl 315 , в граффити:

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

 

Форма, содержание и материал.

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

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

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

Внешняя форма – это нечто материальное, это то, что можно увидеть или потрогать. Внутренняя форма – это ее духовное наполнение.

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

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


Гармоническая форма и понятие композиции

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

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

Процесс создания гармоничного произведения носит название "композиция".

Материал

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

Пропорциональность и ритм

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

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

МАСШТАБНОСТЬ является важной характеристикой предмета. Большие организмы, так же как и малые обладают своими присущими им особенностями, на основе этого у человека и утвердились определенные представления, отражающие объективную связь между величиной предмета и его строением. Возможность видоизменять и варьировать внешнюю форму. (ПР телефонные аппараты, разные виды стаканов)

Цвет и цветосочетания

Цвет влияет на наше восприятие реального пространства: Цвета теплогоспектра (кр, ор, зел), зрительно приближаются. Темные цвета делают предмет весомее. Выбор цвета может быть и обусловленным. При помощи цвета решается и другая задача - снижение нервного напряжения.

Цель дизайна,  или художественного конструирования 🙂 - в формировании гармонической предметной среды, которая наиболее полно удовлетворяет материальные и духовные потребности человека.

Предметы, которые являются результатом деятельности дизайнера, должны ответить следующим требованиям:

1. должны быть функциональными, т.е. в совершенстве выполнять свое практическое предназначение;

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

3. должны быть эстетически выразительными, т.е. иметь информационно-выразительную форму и быть целостными композиционно.

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

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

Концепции в предметном дизайне.

Один из первых прославившихся концептуальных дизайнеров это немало известный Ора Ито который покорил мир своей дерзостью и креативностью. 

Ora Ito (ora ito – построение нереального) - это псевдоним 29-летнего французского дизайнера Ито Морабито. В 21 год Ито решил создать несуществующие продукты для известных брендов. Он придумал кучу разных вещей. От дизайна камуфлированного лаптопа для Mac до стиля сумок Louis Vuitton. Хотя ни один из этих продуктов не существовал в реальности, Ora Ito нагло опубликовывал их в прессе, используя настоящие бренды и логотипы. С развитием интернета и успехом, пришедшим благодаря андеграундным французским журналам, коллекция фиктивных продуктов обошла весь мир и завоевала репутацию первого истинного виртуального бренда. Фикция стала реальностью, когда люди со всего мира начали заказывать эти несуществующие товары.


Его стиль, который он называет Simplexity (сложная простота) – сочетание простоты и сложности. Когда все излишества убираются, остаётся только чистая сущность. Простые и ясные формы, окружающие нас в повседневной жизни, объединены для создания кухни будущего для дня сегодняшнего, завтрашнего и послезавтра. Простые линии отображают контуры будущего, видение, которое стало реальностью. 

ОРА: «Просто создавайте, даже если это будет просто на бумаге – ваша идея уже начнет существовать.»

 
 
Эксклюзивное интервью с Ора Ито вы можете прочесть на страницах нашего журнала


Следующий дизайнер, чьи работы мы хотим вам представить - это Антон Реппонен. 

Антон Реппонен родился в Санкт-Петербургe, вырос и учился в Таллинне. В течение последних 3 лет живёт и работает в Стокгольме, Швеции и Нью-Йорке. Ему принадлежит множество самых разных проектов (Nike Dunk «All Weather», OZO Watch, Kiwi Footwear, Geo Shoes, Socks Anatomy), многие из которых являются лишь концептами. Однако, оттого они не становятся менее интересными и увлекательными. 
 



Сайт Антона Реппонина

А вот работы разработанные в студии креатива и дизайна KUVSTUDIO.
Все работы имеют коммерческую основу. Это либо заказные иллюстрации для различных журналов либо концепции для рекламных роликов. 


Данные концепции были разработаны для эксклюзивного оформления мобильных телефонов салоном "ROSKOSH".


Эти часы- концепция анимации для рекламного ролика лечебного средства от болей в горле"Гексорал". Заказчик - московская пост продакшн студия "Даго".



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


Концепция превращения оперного театра в Одессе в самое крупное казино в Украине. А также однорукие бандиты в виде Дюков. Заказчик журнал "Хроники Азарта"


Концепция брэндового инвентаря для приготовления шоколада. Заказчик - московская студия продакшн студия"Даго".


Концепция Конструкции в виде дирижабля времени со специальными бонусами для рекламного ролика "Мегафон". Заказчик - московская пост продакшн студия "Даго".


Концепция и реализация шрифта в виде булочек. Заказчик компания "Shezgara"

Концепция формы и длижения "Фастум линии" для рекламы "Фастумгеля". Заказчик - московская  пост продакшн студия "Даго"


Поиск формы с последующим утверждением для музыкального лаундж проекта "Молния". Заказчик - группа Молния.


Концептуальные идеи в архитектуре

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

Конструктиви́зм — советский авангардистский метод (стиль, направление) в изобразительном искусстве, архитектуре, фотографии и декоративно-прикладном искусстве, получивший развитие в 1920 — нач. 1930 годов.

 Характеризуется строгостью, геометризмом, лаконичностью форм и монолитностью внешнего облика. В 1924 году была создана официальная творческая организация конструктивистов — ОСА, представители которой разработали так называемый функциональный метод проектирования, основанный на научном анализе особенностей функционирования зданий, сооружений, градостроительных комплексов. Характерные памятники конструктивизма — фабрики-кухни, Дворцы труда, рабочие клубы, дома-коммуны указанного времени.

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

 
 Деконструктивизм — направление в современной архитектуре, основанное на применении в строительной практике идей французского философа Жака Деррида. Другим источником вдохновения деконструктивистов является советский конструктивизм 1920-х гг. Для деконструктивистских проектов характерны визуальная усложнённость, неожиданные изломанные формы, подчёркнуто агрессивное вторжение в городскую среду.

 В качестве самостоятельного течения деконструктивизм сформировался в конце 1980-х гг. (работы Питера Айзенмана и Даниэля Либескинда). Теоретической подоплёкой движения стали рассуждения Деррида о возможности архитектуры, которая вступает в конфликт, «развенчивает» и упраздняет саму себя. Дальнейшее развитие они получили в периодических изданиях Рема Колхаса. Манифестами деконструктивизма считаются пожарная часть «Витра» Захи Хадид (1993) и музей Гуггенхейма в Бильбао Фрэнка Гери (1997).

Один из самых известных примеров рождаемости концептов в стиле деконструктивизм в архитектуре – это  Заха Хадид.
 

Заха Хадид родилась в Багдаде в 1950 году в семье промышленника, одного из основателей Национальной Демократической партии Ирака, представителя ориентированной на Запад крупной буржуазии. Уже в 11 лет она решила, что хочет стать архитектором. 
В 1972 году, после окончания математического факультета Американского Университета в Бейруте, Хадид приехала в Лондон и поступила в архитектурную школу Архитектурной Ассоциации. Там ее преподавателями были Рем Колхас и Элиа Зенгелис.
Сильное влияние на нее как архитектора оказал советский архитектурный авангард 1920-х годов, но ее творческий язык остается ярко оригинальным. Колхас назвал ее "планетой на своей собственной орбите". Зенгелис считает ее самым талантливым человеком, который когда-либо у него учился. Но, по его воспоминаниям, ей требовалась помощь при разработке второстепенных деталей - особенно с лестницами, которые в ее студенческих проектах всегда упирались в потолок.

В 1977 она присоединилась к мастерской Колхаса ОМА, в 1980 - основала собственную архитектурную фирму "Zaha Hadid Architects". 

 

Концекпции персонажей

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

Современные персонажи выполняются в 3Д, однако их очень сложно выполнить без первичных эскизов или 2х мерной прорисовки в фотошопе.

Предлагаем примеры персонажей, выполненных специально для журнала КУВЬ. Каждый из них имеет свой характер, а также ведет персональную рубрику.
 


Рыбарак – философ, мечтатель. Он пытается найти тайный смысл мироздания и познать законы Вселенной. Стремится завоевать мир, чтобы донести до человечества идею Космического Разума. В период новолуния общается с духами предков по средствам своей клешни, иногда исполняя непредсказуемые прихоти космоса. Появился на свет от слияния рака и рыбы, поэтому считает, что эволюция построена на экспериментах и извращениях. Латентный фетишист, любит надевать на себя странные вещи и предметы.

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

Ро-Бот – персонаж собранный из болтиков и гаек Рыбараком и Ацкой Ватой для порабощения человеческой расы. Отличается редкой любвеобильностью и страстью к предметам бытовой техники. Ищет свою спутницу жизни, чтобы оставить после себя потомков. Иногда в процессе борьбы с человечеством Ро-Бота замыкает и он вырубается. Прославился изобретением неадекватных девайсов и секс игрушек.

Ж.И.Ж.А – (Жидкая Иностранная Женщина А) иностранная гостья привезенная Ацкой Ватой из будущего. По его мнению: женщина. Обладает специфическим взглядом на мир из-за плавающих в жидкости глаз. Мечтает разобрать Ро-Бота, чтобы извлечь частичку Ку и построить с помощью нее машину времени для возвращение в будущее. Модница, меняет цвет жидкости под настроение.

И конечно же пример самой уникальной формы нашего времени - это форма логотипа Кувь. В ней всегда найдется место для креативного заполнения и свободного времени 🙂

 

Большое спасибо за внимание. Большое спасибо Ростиславу Соколовскому за предоставленную возможность выступить. 
 
Если у вас возникло желание провести курс лекций по дизайну, форме, цветовосприятию или композиции вы можете обратиться за информацией по телефонам:

+38 068 2552527 - Игорь Кувь
+38 068 1364907 - Ростислав Соколовский

выбор цвета для фона полей и основной части

Особенности дизайна веб формы: Цвет

От автора: ниже приводится краткий отрывок из нашей книги Разработка UX: Формы, написанной Джессикой Эндерс. Это полное руководство, в котором представлена разработка и дизайн веб форм, ключевой элемент эффективного UX. Подписчики плана SitePoint Premium имеют возможность получить к ней доступ напрямую, или вы можете приобрести экземпляр в магазинах по всему миру.

На данный момент наша форма не содержит разнообразных цветов:

Особенности дизайна веб формы: Цвет

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

Использование большого количества различных цветов в попытке сделать форму более «веселой» или «интересной» может на самом деле ухудшить опыт пользователя:

Особенности дизайна веб формы: Цвет

Веб-дизайн. Быстрый старт

Изучите курс и узнайте, как создать дизайн и протопип сайта в Figma

Узнать подробнее

Особенности дизайна веб формы: Цвет

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

Особенности дизайна веб формы: Цвет

Ядовитые цвета в этой форме могут раздражать глаза некоторых людей.

Будьте очень осторожны при выборе цвета

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

Особенности дизайна веб формы: Цвет

Важные сообщения, такие как сообщения об ошибке:

Особенности дизайна веб формы: Цвет

Ссылки:

Особенности дизайна веб формы: Цвет

Индикаторы прогресса заполнения:

Особенности дизайна веб формы: Цвет

Рубрики:

Особенности дизайна веб формы: Цвет

Фон формы:

Особенности дизайна веб формы: Цвет

Элементы брендинга, например, логотипы и стандартные заголовки:

Особенности дизайна веб формы: Цвет

Возможно, вы заметили, что я не включила в этот список красную звездочку, обозначающую обязательные для заполнения поля (*). Это связано с тем, что я не рекомендую использовать красные звездочки для указания обязательных для заполнения полей. Дополнительную информацию см. ниже в разделе «Обязательные и необязательные поля».

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

Особенности дизайна веб формы: Цвет

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

Какие цвета нам следует использовать?

Обычно компания имеет палитру цветов, на которую вы можете ссылаться. Для моего Enders Bank бледно-зелёный цвет является основным, как вы можете видеть на изображении ниже. Давайте используем этот цвет, чтобы выделить основную кнопку действия в нашей форме:

Особенности дизайна веб формы: Цвет

Веб-дизайн. Быстрый старт

Изучите курс и узнайте, как создать дизайн и протопип сайта в Figma

Узнать подробнее

Особенности дизайна веб формы: Цвет

Теперь мы задали для формы цвет.

Дальтонизм

Разные источники приводят разные цифры, но вполне вероятно, что у 4-10% пользователей вашей веб-формы может присутствовать некоторый недостаток в способности воспринимать цвета (обычно, но неточно, называемый дальтонизмом). Наиболее распространенная форма дальтонизма — красно-зеленый, когда человеку трудно различать эти два цвета.

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

Особенности дизайна веб формы: Цвет

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

Гораздо лучший подход — просто сказать людям, какие поля являются необязательными (как описано в разделе «Обязательные и необязательные поля» ниже):

Особенности дизайна веб формы: Цвет

Аналогично, сообщения об ошибках должны сопровождаться символами или затенением фона, а не только выделяться красным цветом текста (см. главу 5 «Валидация»):

Особенности дизайна веб формы: Цвет

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

Цветовая контрастность

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

Особенности дизайна веб формы: Цвет

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

Особенности дизайна веб формы: Цвет

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

Особенности дизайна веб формы: Цвет

Элементы формы должны быть достаточно контрастными. Чтобы добиться этого, я рекомендую вам ознакомиться с такими ресурсами:

И лучше придерживайтесь сочетания темно-серый или черный на белом фоне:

Особенности дизайна веб формы: Цвет

Цвета в нашей форме достаточно контрастны.

Автор: Jessica Enders

Источник: https://www.sitepoint.com/

Редакция: Команда webformyself.

Особенности дизайна веб формы: Цвет

Веб-дизайн. Быстрый старт

Изучите курс и узнайте, как создать дизайн и протопип сайта в Figma

Узнать подробнее Особенности дизайна веб формы: Цвет

Веб-дизайн. Быстрый старт

Изучите курс и узнайте, как создать дизайн и протопип сайта в Figma!

Смотреть видео

Дизайн форм регистрации для детей / UXDepot corporate blog / Habr

Представляю вашему вниманию перевод статьи под названием "Designing Web Registration Processes for Kids" от Deb Gelman. Перевели в компании UXDepot специально для пользователей Хабрахабра с одобрением издания A List Apart.

Современные дети растут очень быстро и изучают технологии еще быстрей, а еще термин «дети» достаточно емок и неоднозначен. Однако в данной статье мы будем говорить про маленьких пользователей в возрасте от шести до восьми лет.

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


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

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

Правильная форма регистрации для детей обладает несколькими важными свойствами:

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


Конкретность вместо абстрактности


Детям в рассматриваемом нами возрасте трудно воспринимать и визуализировать абстрактные понятия. Поэтому таким пользователям перед началом регистрации нужно показать конкретные преимущества зарегистрированного пользователя. Как заявил нам один маленький пользователь во время тестирования: «Зачем мне нужно делать эту реги… регистрацию? Для того чтобы просто поиграть? Я могу поиграть просто так без этой вашей регистрации на других сайтах, зачем я должен делать это здесь?». Для этого парня концепция «поиграть в игры» была слишком абстрактной. Если бы он увидел, какие именно игры доступны зарегистрированному пользователю, а также другие возможности, например, возможность добавить результаты своей игры в рейтинг, он сразу бы понял зачем ему регистрироваться и с большей вероятностью сделал бы это.

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

Рисунок 1. Регистрация на сайте Barbie Girls.

Перед началом регистрации дети видят наряды, в которые они могут одеть свой аватар и также видят, как они могут изменить вид сайта по своему вкусу. Таким образом ясно передается одно из главных ценных предложений сайта: создание и настройка собственного присутствия в интернете. Это гораздо эффективнее и проще для понимания, чем если бы создатели сайта сказали что-то вроде «Создайте свою Барби».

LEGO использует аналогичный подход в своем процессе регистрации, необходимой для получения LEGO ID. Анимированный человечек Лего объясняет маленьким пользователям преимущества регистрации. Дополнение известного персонажа (знакомого образа) текстом и голосом подкрепляет ценное предложение сайта.

Рисунок 2. Регистрация LEGO ID на втором анимационном экране.


Предоставление возможностей для творчества


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

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

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

Рисунок 3. Создание имени пользователя на PBS KIDS GO!.

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

Poptopica, детский виртуальный мир, созданный силами Pearson Family Education Network, также предлагает детям множество возможностей для творчества в самом начале процесса регистрации. Для того чтобы получить базовую информацию от маленьких пользователей, сайт предлагает им создать своего персонажа-аватара. Он проводит их через процесс, побуждая их делиться своими личными данными таким образом, что детям это нравится.

Рисунок 4. Создание персонажа на Poptopica.


Картинки


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

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

На сайте PBS KIDS GO! картинки используются вместо секретного вопроса для восстановления пароля. Детям предлагается выбрать их самые любимые объекты из трех рядов изображений. Это не только делает процесс восстановления пароля развлечением, а также требует от детей распознавания образов вместо вспоминания, т.к. дети понимают, что изображено на картинках и знают, какие картинки им нравятся больше.

Рисунок 5. Изображения для создания секретного кода на сайте PBS KIDS GO!

Стоит отметить, что хотя использование картинок очень полезно, с символами и иконками могут быть проблемы, т.к. дети в этом возрасте только учатся мыслить абстрактно. Если для взрослых иконка с видеокамерой означает то, что они могут посмотреть видео, то дети вполне могут подумать о том что она предлагает им создать видео. На недавнем юзабилити-тесте, оценивавшем популярные сайты для детей, шестилетняя девочка прямо так и заявила: «Уау, круто! Это значит что я сейчас нажму на кнопочку и смогу снять видео чтобы поделиться им с друзьями?». Она не смогла экстраполировать настоящее значение иконки, основываясь на контексте и содержимом сайта.


Личная информация


Не смотря на то, что современные дети с сетью на «ты», они все равно испытывают перед интернетом небольшой страх. Их родители напугали их до смерти тем, что нельзя рассказывать свою личную информацию никому в сети. Как результат, дети опасаются указывать любые личные данные, даже такие как пол или возраст. Подавляющее большинство детей говорят неправду о своем возрасте в сети. Смышленая восьмилетняя девочка, когда сайт Candystand предложил ей ввести дату своего рождения, сказала «Я напишу что мне 12. Ну и пусть совру, я просто не очень хочу чтобы в этом интернете знали обо мне». Не смотря на то что сайт не просит от нее никакой идентификационной информации (имени, адреса или электронной почты), она все равно боится сообщать что-то о себе.

А другой семилетний мальчик отказался вводить в форму сайта Club Penguin адрес своей электронной почты и заявил буквально следующее: «Нельзя ничего указывать о себе в интернете, иначе они узнают твой адрес и украдут что-нибудь у тебя из дома».

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

Интересный способ собрать личные данные придумали в Funbrain Math Arcade. Для того, чтобы начать игру, ребенку нужно ввести пол и возраст. Эта информация выбирается в двух интерактивных виджетах. С точки зрения ребенка это выглядит безопаснее, так как ему не кажется, что он вводит какие-то данные, он просто играет в игру. Во время тестирования этого сайта шестилетняя девочка заявила: «Это круто! Игра просто хочет узнать девочка я или мальчик а также спрашивает мой возраст. Мне кажется это нужно для того чтобы моя игра не была для меня слишком простой или наоборот, слишком сложной».

Рисунок 6. Поля в регистрации в виде игры на сайте Funbrain Math Arcade.

Потом сайт дает ребенку пароль, для того, чтобы в следующий раз он мог продолжить игру там, где остановился. В отличие от других сайтов для детей, Funbrain просит ввести только автоматически сгенерированный пароль, без имени пользователя. С точки зрения ребенка это выглядит безопаснее, так как от него не требуется ввести никакой информации. Плохо только что пользователь не может сам придумать свой пароль, а запомнить сгенерированный не очень легко. Шестилетний тестер сказал так: «Мне нравится что они придумывают пароль за меня и мне не нужно вводить свой настоящий пароль. Но я думаю что забуду его, даже если запишу».

Рисунок 7. Экран пароля на сайте Funbrain Math Arcade предлагает сгенерированный пароль..


Язык


Когда дело доходит до веб-терминологии, дети оказываются не по годам умными. Они знают что значит «зарегистрироваться», «войти» и «ввести пароль». Однако некоторые термины, привычные для взрослых пользователей сети, для детей оказываются трудноватыми — например, «имя пользователя», «секретный вопрос», «отправить» (submit). Они смущают и дезориентируют. Одна девочка, увидев слово «отправить», спросила что это означает: «Отправить? Как «отправить письмо»?». Лучше использовать слова, напрямую связанные с текущим действием, например «войти», «начать», «узнать больше» вместо таких самоотносимых команд как «отправить», «нажмите здесь» или «читать дальше».

Дети также не любят когда с ними общаются менторским тоном. К примеру, называть других игроков или пользователей «друзьями» дерзко и самонадеянно. Одна восьмилетняя девочка, играя на сайте Webkinz, воскликнула: «Никакие они мне не друзья! Сайт не знает моих друзей!». С другой стороны, упрощение слова «пароль» до «секретного кода» или «личного когда» не только смотрится слишком по-детски, но еще и путает. Семилетний мальчик сказал в таком случае: «Какой еще секретный код, пароль что ли?»

Кроме того, дети в таком возрасте все еще немного эгоцентричны, из-за чего с трудом понимают косвенные обращения. К примеру, слова «моё», «мне» или «меня» сбивают их с толку. Во время тестирования шестилетний мальчик спросил: «Кто это говорит?». Когда его попросили уточнить свой вопрос, он сказал: «На сайте говорится «Мое имя». Чье это моё? Кто это?». Он не понимает что «мое» значит его.

Вот несколько слов на дружелюбном для детей языке, которые следует использовать для обозначения веб-терминов:
«Присоединиться» вместо «Регистрация».
«Войти» вместо «Авторизация».
«Начать» вместо «Отправить».
«Ник / Имя на сайте» вместо «Имя / Имя пользователя».
«Ты / Твой» вместо «Я / Мой».
«Пароль» вместо «Секретный код».
«Друзья на сайте» вместо «Друзья» или «Другие игроки».


Заключение


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

.
PS от переводчиков: Надеюсь, вам понравилась статья. Мы будем рады, если вы укажете нам на ошибки в переводе, чтобы мы могли их оперативно исправить. Пишите мне в личку, пожалуйста 🙂

Практические примеры формы и цвета в дизайне логотипа

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

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

 

Психология в дизайне логотипа

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

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

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

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

 

Цвет в дизайне логотипа

Исследование, проведенное Colorcom, показало, что для принятия подсознательного суждения о продукте требуется всего 90 секунд, и от 62% до 90% этой оценки зависит только от цвета. Вот почему успех бренда во многом зависит от цветов, выбранных для дизайна логотипа.

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

Общие значения цветов, принятые во всем мире:

Красный. Уверенность, молодость и власть.

Оранжевый. Дружелюбный, теплый и энергичный.

Желтый. Счастье, оптимизм и тепло.

Зеленый. Мир, рост и здоровье.

Синий. Доверие, безопасность и стабильность.

Пурпурный. Роскошный, креативный и мудрый.

Черный. Надежный, утонченный и опытный.

Белый. Простой, спокойный и чистый.

 

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

Форма в дизайне логотипа

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

Квадрат и прямоугольник: дисциплина, сила, храбрость, безопасность, надежность.

Треугольник: волнение, риск, опасность, равновесие, стабильность.

Круг, овал и эллипс: вечность, женщина, вселенная, магия, тайна.

Спираль: рост, творчество, спокойствие, интеллект.

Природные формы: оригинальность, органичность, баланс, освежение.

Абстрактные формы: двойственность значения, уникальность, сложность.

 

Создавая логотип, дизайнеры должны работать над формой, а также обращать внимание на шрифт.

 

Практические примеры

Давайте рассмотрим примеры дизайна логотипа, применяющие психологию цвета и формы, разработанные дизайнерами студии Tubik.

 

LunnScape

Компания LunnScape специализируется на услугах по озеленению коммерческих объектов, таких как офисные и дворовые помещения, парки и т. д. Знак бренда представлен в виде талисмана —  стрекозы. Компания LunnScape базируется во Флориде, и это существо является идеальным представителем региональной фауны. Кроме того, логотип с насекомым помогает клиентам понять характер услуг.

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

 

Andre

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

Binned

Это знак компании под названием Binned, основная деятельность которой – уборка мусора. Логотип снабжен буквенным знаком, обозначающим B, который ассоциируется с брендом. Линии в письме принимают форму волн, вызывающих ощущение воды и чистоты. Выбранный шрифт простой, но смелый, выглядит аккуратным и отражает настроение бренда.

Цветовая палитра включает в себя оттенки синего и зеленого цветов, которые вызывают ассоциации с чистотой и свежестью. Кроме того, синий цвет — это цвет доверия. Он обычно показывает надежность.

Reborn

На логотипе представлен китайский ресторан с самообслуживанием Reborn. Основная философия бренда — это современный способ автоматизированного заказа продуктов питания в ресторанной индустрии, и установление связи между традициями здорового питания и инновациями.

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

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

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

 

Motion 

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

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

Эта концепция логотипа обеспечивает разнообразие цветовых характеристик, демонстрирующих гибкость общей стратегии бренда. Представленные варианты включают желтый, зеленый и синий цвета. Желтый — основной цвет, который приносит теплые и игривые эмоции. Зеленые и синие цвета символизируют баланс и гармонию.

 

OrBeat

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

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

 

Whizzly

Логотип создан для социальной сети Whizzly, созданной для обмена творческими проектами. Талисман — обезьяна, которая выглядит довольно претенциозно из-за солнцезащитных очков. Выбор характера можно объяснить общими ассоциациями, связанными с этим животным. Обезьяны — энергичные смешные представители фауны, и они знают, как привлечь внимание. Закругленные формы делают изображение динамичным и дружелюбным.

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

 

fOxygenic

Вот концепция, использующая символ брендинга для значка приложения. Это логотип для fOxygenic, мобильного приложения, которое представляет собой социальную сеть для людей, любящих активную жизнь, и спортивные мероприятия под открытым небом. Как вы видите, талисман имеет круглую форму. Он может устанавливать разные уровни ассоциации по сходству с буквой «O» для слова «кислород», применяемого в фирменном наименовании. Также идет отсылка к движению и активной жизни, кругу друзей. Яркий теплый оранжевый цвет отражает не только традиционное видение лисицы, но и идею динамичной жизни, радости и отличного настроения. Кроме того, цвет хорошо заметен.

SwitchUp

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

Meditrack

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

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

 

Источник

Статьи по теме

Узнать больше интересного:

Психология форм в дизайне UX

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

форма спирали в дизайне

Психология форм

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

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

Многолетние исследования и тесты помогли специалистам определить, какое значение привносит каждая форма и как она может влиять на восприятие человеком. Давайте посмотрим поближе.

Психология форм в дизайне UX

Значение геометрических фигур

Услышав слово «форма», большинство людей сначала думают о геометрических фигурах. Есть много геометрических фигур, которые люди видят ежедневно, включая квадраты, круги, прямоугольники и другие. Но что они означают? Посмотрим.

Квадраты и прямоугольники

Эти две формы считаются наиболее часто используемыми. Мы видим их много раз в день. Стены и мебель, книги или мониторы, сотовые телефоны и камеры, а также многие другие повседневные вещи имеют квадратную или прямоугольную форму. Прямые линии и прямые углы этих двух форм дают ощущение надежности и безопасности. Люди сильно ассоциируют квадраты и прямоугольники с практическими вещами, поэтому они приносят чувство доверия и авторитета.

Общие значения:

  • дисциплина;
  • прочность;
  • мужество;
  • безопасность;
  • надежность.
квадратные формы в дизайне

Треугольники

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

Общие значения:

  • волнение;
  • риск;
  • опасность.

Круги, овалы и эллипсы

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

Общие значения:

  • вечность;
  • женственность;
  • вселенная;
  • магия;
  • тайна.
Круги, овалы и эллипсы в дизайне ux

Спирали

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

Общие значения:

  • рост;
  • креативность;
  • спокойствие;
  • интеллект.
форма спирали в дизайне

Психология форм в дизайне UX — значение естественных форм

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

Общие значения:

  • оригинальность;
  • органичность;
  • баланс;
  • отдых.
Психология форм в дизайне UX - значение естественных форм

Значения абстрактных форм в дизайне

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

Общие значения:

  • двойственность значения;
  • уникальность;
  • сложность.
Значения абстрактных форм в дизайне

Психология форм в дизайне UX — практическое применение

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

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

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

Значения абстрактных форм в дизайне

 

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

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

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *