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

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

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

Привет, username!

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

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

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

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

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

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

На дизайн бывает три реакции: да, нет и ОГО! К «ого» и нужно стремиться.

— Милтон Глейзер

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

Интуитивный процесс дизайна

Интуиция – это бессознательное восприятие

— Карл Юнг

Всегда есть люди, отметающие то, что нельзя измерить. Но многие мыслители отдавали должное интуиции. Альберт Эйнштейн, Ричард Бакминстер Фуллер, Карл Юнг, Рэй Бредбери, Стив Джобс и даже Алан Тьюринг, знаменитый логик и криптоаналист, понимали, что математические доказательства основываются на «интуиции и гениальности». Великие мыслители и футуристы отводят интуиции ключевую роль в процессе решения задач. Для дизайнеров интуиция – это не нечто чужеродное, это больше похоже на дыхание. В интуиции, как в воде, плавают многие творцы, в то время, как их интеллект диктует формулу для исполнения и оформления конечного продукта.

Часть 1

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

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

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

— Алан Флетчер

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

Взаимоотношения природных шаблонов и дизайна

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

Недавно мы в «Я люблю ИП» закончили курсы по дизайну от trydesignlab.com. И это одна из самых важных статей, которую нам посоветовал ментор в процессе обучения. Именно поэтому мы решили её перевести. Посмотреть все наши работы с курсов можно в ВКонтакте по тэгу #design101@iloveip.

Вступление

Сначала о главном. Это руководство не для всех. Это руководство прежде всего для:

• разработчиков, которые хотят уметь делать хорошие интерфейсы для себя, если вдруг прижмёт;
• UX-дизайнеров, которые знают, что хороший UX-дизайн продаётся лучше в красивой UI-упаковке.

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

А пока давайте я расскажу, что вы найдёте в этой статье.

Часть 2

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

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

Геометрические инструменты

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



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

Немного геометрии

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

Для меня ни один детский опыт не принёс такой уверенности в собственных исследовательских возможностях, как геометрия.
— Ричард Бакминстер Фуллер

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

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

Недавно мы в «Я люблю ИП» закончили курсы по дизайну от trydesignlab.com. И это одна из самых важных статей, которую нам посоветовал ментор в процессе обучения. Сегодня мы публикуем вторую часть перевода. Посмотреть все наши работы с курсов можно в ВКонтакте по тэгу #design101@iloveip.

Мы говорили о правилах создания чистых и красивых интерфейсов.

Вот эти правила:

1. Свет падает сверху (Часть 1)
2. Сначала черное и белое (Часть 1)
3. Увеличьте белое пространство (Часть 1)
4. Научитесь накладывать текст на изображения
5. Научитесь выделять и утапливать текст
6. Используйте только хорошие шрифты
7. Крадите как художник

Предлагаю вашему вниманию перевод статьи «Responsive Upscaling: Large-Screen E-Commerce Design» автора Christian Holst.

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

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

1. Только 18% из 50 ведущих американских интернет-магазинов, которые мы тестировали ранее, в этом году адаптировали свой дизайн под большие экраны (в то время как у 94% этих сайтов дизайн адаптирован под мобильные устройства).
2. Почти три четверти электронных продаж все ещё совершаются на ПК, а не на мобильных устройствах (смотрите здесь, здесь и здесь).
3. Около трети этих пользователей приходят с экранов шире 1350 пикселей (смотрите здесь, здесь и здесь). (Примечание: Разумеется, есть разница между шириной экрана и шириной браузерного окна — реальное число пользователей с браузером указанной ширины будет ниже. Мы рекомендуем вам отслеживать размеры браузерного окна в вашей веб-статистике для более полной картины того, насколько значителен этот сегмент для вашего сайта.

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



У вас всегда получалось войти на сайт с помощью такой формы с первого раза? Не было никаких проблем? Лично для меня эти формы — боль и страдания. Я пользуюсь огромным количеством разных сервисов, поэтому далеко не всегда помню, на каких уже регистрировался и как именно. А еще у меня 5 адресов почты и минимум 6 соц. сетей. Вы знаете, я даже иногда удивляюсь, когда получается авторизоваться с первого раза. Знакомо? Под катом альтернативный подход к интерфейсу входа на сайт, частично облегчающий жизнь.

Лестницы в бассейнах физически тяжело использовать.

Примерно 8-10% мужчин и 0.5% женщин имеют ту или иную форму дальтонизма. То есть, на каждые 100 посетителей вашего сайта будет 10 таких, которые видят цвета иначе. И как убедиться, что ваш интерфейс одинаково доступен для любых пользователей? Есть много противоречивой информации на тему того, каким должен быть дизайн для дальтоников. Мы сделали выжимку с основными принципами, которые стоит учитывать в дизайне, чтобы добиться цветовой различимости интерфейса.

Как сделать призыв к действию деликатным, но эффективным? Это статья раскрывает несколько простых секретов. Мы постарались воспользоваться ими при создании нового дизайна для нашего сайта «Я люблю ИП». И заодно решили её перевести. Надеемся, эта статья также будет вам полезна.

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

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

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

Это история о том как создавался сайт интернет-магазина Сотмаркет и менялась работа с каналами привлечения трафика по мере роста компании.

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



Данный ленивый подход раскритикован Джоном Грубером, вот что он сказал о Daring Fireball:

Прочитав этот пост, решил поделиться и своим опытом.

В данный момент решены 2 простые задачи:

• все звонки, поступающие на PSTN номер (обычный городской), переадресовываются на мобильный телефон, который у меня всегда в кармане и, одновременно, на SIP телефон, который стоит дома
• с SIP телефона я могу звонить как по России, так и в некоторые нужные мне страны по минимальным тарифам.

Как это сделано?

Привет!

Я много работаю с VoIP-сетями. С коммерческим оборудованием, конечно тоже, но и очень много с OpenSource (статья пишется в контексте использования Asterisk PBX).

В телефонии часто возникает простая задача, разделить маршруты на определённые направления. Ну например, направить вызовы на городские номера в сторону оператора 1, МГ — в сторону оператора 2, МН — в сторону оператора 3.
Задача, в общем-то тривиальная, и реализуется на Asterisk легко:

;Местная городская связь: 7 знаков (в разных регионах РФ от 3-х до 7-ми знаков), и номера экстренных служб.
exten => _0X,1,dial(SIP/itsp1/${EXTEN})
exten => _0XX,1,dial(SIP/itsp1/${EXTEN})
exten => _XXXXXXX,1,dial(SIP/itsp1/${EXTEN})
;Междугородняя и мобильная связь: код выхода на МГ связь (в РФ - "8") + 10 знаков.
exten => _8[348]XXXXXXXXX,1,dial(SIP/itsp2/${EXTEN})
exten => _89XXXXXXXXX,1,dial(SIP/itsp2/${EXTEN})
;Международная связь: код выхода на МН связь (в РФ - "810") + номер телефона в международном формате.
exten => _810X.,1,dial(SIP/itsp3/${EXTEN})

Однако иногда возникает необходимость предоставить абоненту доступ только к мобильным телефонам его области, и здесь простым "_89XXXXXXXXX" не отделаешься.