• Взлом визуальной системы: 11 оптических иллюзий в графическом дизайне

    • Перевод
    Глубока ли кроличья нора?

    image

    Сколько минут вам потребуется, чтобы понять в чем фишка?

    Фрэнсис Бэкон в 1620 году разделил источники человеческих ошибок, стоящих на пути познания, на четыре группы, которые он назвал «призраками» или «идолами» (лат. idola).

    • «Призраки рода» проистекают из самой человеческой природы, они не зависят ни от культуры, ни от индивидуальности человека. «Ум человека уподобляется неровному зеркалу, которое, примешивая к природе вещей свою природу, отражает вещи в искривлённом и обезображенном виде».
    • «Призраки пещеры» — это индивидуальные ошибки восприятия, как врождённые, так и приобретённые. «Ведь у каждого, помимо ошибок, свойственных роду человеческому, есть своя особая пещера, которая ослабляет и искажает свет природы».
    • «Призраки площади (рынка)» — следствие общественной природы человека, — общения и использования в общении языка. «Люди объединяются речью. Слова же устанавливаются сообразно разумению толпы. Поэтому плохое и нелепое установление слов удивительным образом осаждает разум».
    • «Призраки театра» — это усваиваемые человеком от других людей ложные представления об устройстве действительности. «При этом мы разумеем здесь не только общие философские учения, но и многочисленные начала и аксиомы наук, которые получили силу вследствие предания, веры и беззаботности». [Wikipedia]

    Под катом — наглядная демонстрация уязвимости нашего мозга к атакам через визуальный ввод. Представляю вам перевод статьи продуктового дизайнера и фронтэнд-разработчика Balraj Chana, про то как можно использовать/нейтрализовать эффект оптических иллюзий.
    Читать дальше →
  • [Перевод] Круглее круга: оптические эффекты при проектировании интерфейсов

    • Перевод
    Какой «круг»воспринимается как самый «круглый»?

    image

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

    Как создать визуально пропорциональные иконки, правильно расположить объекты разных форм и выполнить идеальное скругление углов. В посте представлено более 50 изображений.
    Читать дальше →
  • Иллюзия скорости

    • Перевод
    Много лет я и мои коллеги убеждали разработчиков, что чем быстрее сайт — тем лучше. Статья не о том. Я не собираюсь показывать вам статистику, насколько больше зарабатывают компании, которые оптимизируют сайт для производительности (а это так). Расслабьтесь, возьмите чашечку шоколада — мы вместе совершим путешествие во времени.

    Настоящее время и воспринимаемое время



    Читать дальше →
  • Твой софт никому не нужен. Или почему разработка ПО требует свежего подхода

    • Перевод
    image

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

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

    Читать дальше →
  • Цвет в дизайне интерфейсов: инструкция по применению

    • Перевод


    Как создать чистый интерфейс, используя всего лишь один цвет? Вы узнаете из этой статьи. Перевод «Я люблю ИП».


    Будучи по большому счёту дизайнером-самоучкой, мне всегда было интересно, почему так много статей и сайтов говорят о теории цвета и цветовых палитрах. По моему опыту, вероятность сделать красивый дизайн, использую «сплит-комплиментарную палитру», стремится к нулю.


    У меня есть другое мнение на этот счёт: теория цвета бесполезна.


    Но если теория цвета не является прочной основой для выбора цвета в дизайне интерфейсов, то что тогда является?


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


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


    Я знаю, что это звучит немного странно. Но послушайте меня, я дам вам практическую инструкцию для адаптации цвета в вашем дизайне.


    Вы готовы? Тогда поехали.

    Читать дальше →
  • Оптическое выравнивание и пользовательские интерфейсы

    • Tutorial


    Привет, меня зовут Иван Греков, я работаю во фронтенд-команде Badoo, занимаюсь вёрсткой пользовательских интерфейсов на проектах компании.


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


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

    Читать дальше →
  • AdBlock похитил этот баннер, но баннеры не зубы — отрастут

    Подробнее
    Реклама
  • Тёмные паттерны — как зловредные интерфейсы пытаются атаковать и обманывать

      Любые покупки — как поход по минному полю. Есть довольно тонкая граница между «не стоит упоминания» и «лучше тебе этого до покупки не знать». Давайте попробуем для начала найти её эмпирически. Вот это лично для меня — очевидный “dark pattern”:



      Вот это тоже:



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

      Теперь давайте посмотрим на менее очевидные вещи.
      Читать дальше →
    • Дизайн таблиц

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

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

      Фиксированные заголовки


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

      image
      Читать дальше →
    • Не находите ли вы неудачной кнопку перехода на страницу номер 100?

        Поговорим про интерфейсы и про то, что видим на этой ленте статей, прокрутив её вниз, до пагинатора.



        Конечно, очевидно, что после кнопки с номером «8», ведущей на страницу номер 8 по стрелке, похожей на стрелку возле слова «Туда» должна идти кнопка, ведущая на страницу с номером 9.

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

        Поможем доказать это.

        1. Почему вредно после кнопки «8» ставить кнопку со стрелкой, похожей на стрелку «туда», но ведущую не туда?

        К примеру, вот очень похожая…

      • Теория близости: главное правило дизайна, которое помогает перейти от субъективных ощущений к конкретике

          Впервые о теории близости я прочитал в 2007 году. Она была сформулирована так: «объекты, расположенные близко друг к другу, воспринимаются связанно». Тогда я подумал: «спасибо, Кэп! Я как-то и сам догадался, что букву “М” нужно вешать ближе к мужскому туалету, а не к женскому». Тогда я не осознал, что это одно из главных правил дизайна, которое помогает подбирать расстояния между элементами, размеры полей, расположение кнопок, размер логотипов и многое другое. А главное, теория позволяет быстро понять, хороший перед вами дизайн или нет, даже если вы не дизайнер.
          image
          Читать дальше →
        Самое читаемое