• Grid или Flexbox?

    • Translation
    • Tutorial
    Мишель Баркер, автор материала, перевод которого мы сегодня публикуем, говорит, что недавнее обсуждение в Twitter, начатое Крисом Койером, заставило её задуматься о том, как веб-разработчики делают выбор между технологиями CSS Grid Layout и CSS Flexbox Layout при разработке макетов.



    Крис Койер в своём твите задал аудитории вопрос о том, как те, кто знает о том, что такое Grid и Flexbox, предпочитают объяснять разницу между этими технологиями.

    Среди ответов на этот вопрос, что, по словам Мишель, вполне ожидаемо, можно было отметить ценные идеи Рэйчел Эндрю и Джен Симмонс.
    Читать дальше →
    • +32
    • 41.7k
    • 6
  • Мелкий, но вредный UI интернет-магазина. Как испортить репутацию сразу всем товарам на сайте?

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



      Вы бы купили такую книгу?

      Читать дальше →
    • Ajax Systems: универсальная система безопасности для квартиры, дома или офиса



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

        Поскольку таких систем действительно много, то есть и попытки объединить разнообразные датчики в единую систему, которая собирала бы информацию со всех элементов в помещении, обрабатывала и отправляла владельцу в случае необходимости. Мы в Madrobots искали для себя универсальную систему, которая могла бы предложить все и сразу, без необходимости докупать решения от сторонних производителей. Пробовали много вариантов самых разных компаний, пробовали SmartHome и DIY системы. У всех были какие-то проблемы и недостатки, которые с течением времени тяготили все больше. В конце-концов приняли решение установить профессиональную систему безопасности (офис у нас довольно большой, да), которая поддерживает новейшие технологии. Перерыв в Интернете гору информации, остановились на системе от Ajax Systems. О ней сегодня и расскажем.
        Читать дальше →
      • Анатомия тысячи шрифтов

        • Translation


        Перевод статьи The anatomy of a thousand typefaces.

        Даже годы спустя после выхода фильма Avatar остаётся кое-что, с чем не может справиться даже Райан Гослинг — использование шрифта Papyrus в логотипе фильма. В пародии, снятой Saturday Night Live, дизайнер шрифтов открывает меню, перебирает шрифты и случайным образом выбирает Papyrus.


        Главная проблема выбора шрифтов — одновременно слишком много и слишком мало вариантов.

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

        С другой стороны, библиотеки веб-шрифтов с сотнями и тысячами наименований поражают изобилием, что иногда приводит к парадоксальным выборам шрифтов.
        Читать дальше →
        • +31
        • 26k
        • 7
      • Веб-типографика: создаем таблицы для чтения, а не для красоты

        • Translation
        Наталия Шергина, фрилансер-редактор и студентка Нетологии, специально для блога перевела лонгрид Richard Rutter о типографике веб-таблиц.



        Хорошие дизайнеры не жалеют времени на типографику. Они тщательно подбирают шрифты, перебирают множество типографических шкал и скрупулезно применяют пробелы (white space) ради удобства пользователя. Затем появляется соблазн покреативить — и вот все мысли уже не о пользователе. Однако таблицы нужны в первую очередь, чтобы их читали и использовали, а не просто любовались.
        Читать дальше →
        • +32
        • 16.3k
        • 9
      • Pixel Perfect Precision: насколько превосходны ваши пиксели?

        Pixel Perfect Precision 3Многие из вас, кто хоть сколько интересуется играми для iOS/Android, наверняка слышали про Monument Valley. Возможно, вы знаете, что игру разработала компания ustwo — опытная digital студия. Но вряд ли вам известно о руководстве под названием Pixel Perfect Precision, которое на данный момент разрослось до двухсот страниц и получило порядковый номер 3.

        Pixel Perfect Precision — особое отношение и взгляд на то, как компания подходит к работе. От общих советов по командному взаимодействию, до конкретных руководств по Adobe Photoshop и Illustrator.

        Pixel Perfect Precision — своеобразный справочник по digital дизайну, в котором авторы постарались поделиться своим опытом. Под катом небольшой обзор изменений третьей редакции и ссылки на скачивание русской версии.
        Что нового и интересного в третьей редакции?
        • +13
        • 22k
        • 4
      • Мобильный UX-дизайн в 2018 году: тенденции и прогнозы

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


          Читать дальше →
        • Как ускорить процесс выбора

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

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

          image

          Метод позволяющий ускорить решение


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

          Давайте рассмотрим ситуацию:

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

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

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

          Но, на самом деле, ни характер отдельного человека, ни последствия выбора на скорость решения не влияет.

          Читать дальше →
        • Анатомия распределенной команды — процесс подготовки требований

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

            image

            Дисклеймер: Каждая организация уникальна — от внутренней структуры, и до того, как она общается с внешним миром. Так что я не считаю ни один воркфлоу (или бизнес-процесс, как любят говорить на русском) универсальным решением. Пост не претендует на полноту и исключительность, он скорее о том, что подобный подход работает у нас в SkuVault, в текущей конфигурации команды, и демонстрирует положительные результаты. Наша специфика — это 50 человек, 16 из которых оторваны от другой части 10-часовой разницей во времени.
            Читать дальше →
            • +16
            • 6.6k
            • 6
          • Модульная сетка макета с нуля: анализ, расчет и построение

            Intro

            Краткая предыстория


            Привет, Хабр. Я читаю тебя без малого 10 лет, но ни разу не писал статей. Сначала сказать было нечего, потом — некогда. Но сегодня звёзды сошлись и подвернулась подходящая тема. Модульная сетка.


            Казалось бы, набросать сетку — дело пяти минут. Всё разжёвано до нас, и бутстрапы есть на любой вкус, и «Аннушка уже пролила своё масло...». Но на практике у дизайнеров частенько возникают вопросы. Многих вводят в ступор даже небольшие отступления от привычных 12-колоночных сеток, потому что им не до конца понятны принципы построения.


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


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


            Как работает сетка


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


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


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

            Читать дальше →
            • +17
            • 108k
            • 4
          • Slack. Небольшой обзор отличного сервиса



              Некоторое время назад после волшебного пендаля под названием Tolstoy Summer Camp я начал пилить свой стартап.
              Сначала у меня в команде было два разработчика и дизайнер. Потом один разработчик ушёл пилить свой проект. Затем появился другой разработчик. И всё бы ничего, но я сходил с ума от того что не мог найти простых и понятных средств ведения дел в таких маленьких компаниях как моя.
              Я перепробовал тучу всяких Basecamp, Asana, Redmine, Trello, Мегаплан и прочих, массу мессенджеров в разных сочетаниях c он-лайн файлопомойками типа Dropbox и GoogleDrive — ничего мне не нравилось. «Ну, не то это всё, не то!».
              Но, в конце-концов, решение было найдено.
            • Хакинтош: разворачиваем macOS Sierra на Intel-PC подробно и понятно

              ПРОЧТИ МЕНЯ ПОЖАЛУСТО

              Если вы НЕ МОЖЕТЕ распаковать файлы на флешку, пожалуйста, отойдите от кливиатуры и срочно прочитайте книгу «Компьютер для чайников: подробное пособие как пользоваться ПК»!!!



              1. Все файлы залиты на МЕГУ. Кто испытывает с ней проблемы — в комментариях перезалили на торрент.
              2. Пожалуйста, не спрашивайте меня про установку Мака на ноутбуки. Прошу вас. Пожалуйста. Это очень геморройный процесс. Поставьте себе убунту и подключите тему Мака. Тот же экспириенс получите
              3. Я на хабре редко отвечаю, пишите в вк по всем вопросам.


              Данный мануал/гайд/etc написан для тех, кому лень собирать по кускам ту или иную информацию об установке «мака» на PC, все понятно и по полочкам.
              Читать дальше →
            • Цвет в дизайне интерфейсов: инструкция по применению

              • Translation


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


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


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


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


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


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


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


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

              Читать дальше →
            • [Перевод] Круглее круга: оптические эффекты при проектировании интерфейсов

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

              image

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

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

              • Translation
              image

              Веб-дизайн — замысловатая штука. При создании веб-сайта нужно учитывать множество деталей. Чтобы упростить задачу, я подготовил список правил и запретов, которые следует учитывать каждому веб-дизайнеру. Хорошо, что эти принципы довольно просты. Поехали!
              Читать дальше →
              • +8
              • 28.7k
              • 8
            • Самое простое руководство по иконографике

              Светлана Шаповалова, редактор «Нетологии», перевела руководство по иконографике от Tidjane Tall, рассказав о самых простых базовых иконках и объяснив, почему иллюстрация стоит тысячи слов.

              Сколько в среднем времени надо дизайнеру на создание одной пользовательской иконки? Пару минут? Десять? Час, два или три? А что если мы покажем, как сделать 10 крутых иконок менее чем за 10 минут?


              Читать дальше →
            • Красный, белый, голубой: восемь правил подбора цветовой палитры, которые должны знать все

              • Translation
              Взаимодействие человека с компьютером во многом опирается на графические элементы интерфейса, и цвет играет в этом процессе не последнюю роль. Как однажды сказал Pierre Bonnard: «Цвет не просто делает дизайн приятным для глаз, но и подкрепляет его».

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


              Читать дальше →
            • 7 способов улучшить дизайн сайта

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

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


              Читать дальше →
            • Paradigm  —  дизайн-система Mail.Ru Group, часть 1: визуальный язык

                Авторы статьи: Юрий Ветров, Артём Гладков, Евгений Долгов и Андрей Сундиев

                Несколько лет портальная дизайн-команда Mail.Ru Group занимается обновлением и унификацией продуктов. У нас сформировалась дизайн-система, на которой работают медиа-проекты, мобильный веб и частично productivity-сервисы (постепенно подключаются и другие продукты), сформировался стиль пиктограмм и иллюстраций, стандартизируются промо-письма и промо-сайты. Конечно, ещё не во всех сервисах всё хорошо, а где-то первый редизайн не решил всех проблем, но огромный рывок за прошедшие годы трудно не заметить. Чтобы ускорить процесс обновления и сделать нашу работу публичной, мы открываем наружу часть нашей дизайн-системы Paradigm.

                Дизайн-система Mail.Ru Group Paradigm
                Читать дальше →
              • Преимущества интерактивного прототипирования



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

                  Так было раньше и это работало. Я сам прибегал к таким хитростям неоднократно. Однако, мир вокруг стремительно меняется. Современный продукт настолько сложен, что одна картинка не даст понимания и ответов на вопрос “Как это работает?”. Схематичное или wireframe прототипирование тоже постепенно угасает в закате, так как черно-белые линии и прямоугольники не дают клиенту полного понимания. Всё больше желающих сегодня видеть живой прототип, а не серию картинок…
                  Читать дальше →