• 32 отличия дизайна мобильного приложения под iOS и Android

      image

      Железный дизайнер из Redmadrobot Design Lab Артур Абраров делится наблюдениями.

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

      Чтобы адаптировать дизайн правильно, нужно соблюдать гайдлайны платформ: Human Interface Guidelines (HIG) у iOS и Material Design у Android. И общаться с разработчиками, в идеале подключать их к дизайну как можно раньше, чтобы они могли сразу задать технические ограничения.

      Но в чём именно отличается дизайн под iOS от дизайна под Android? В этой статье я разберу 32 конкретных отличия дизайна под iOS и Android. Они поделены на четыре группы:

      1. Базовые отличия.
      2. Отличия в навигации и паттернах (UX).
      3. Отличия в компонентах (UI).
      4. Прочие отличия.

      Особенности iOS будут слева, а Android — справа или сверху/снизу.

      Базовые отличия


      Human Interface Guidelines vs Material Design


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

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

      image

      image
      Читать дальше →
    • Acronis Design: Дополнительные инструменты дизайнера



        Я Сергей, ведущий дизайнер в компании Acronis. В этой статье я расскажу о тех инструментах, которые мы не только внедряем, но разрабатываем для других дизайнеров внутри компании. Речь пойдет о плагинах для Sketch, консольных утилитах и расширениях для Chrome.

        Читать дальше →
      • Полное руководство по правильному использованию анимации в UX

          Предлагаю вашему вниманию перевод очень крутой статьи по анимации интерфейса.
          The ultimate guide to proper use of animation in UX автора Taras Skytskyi.



          В настоящее время трудно впечатлить или даже удивить анимацией интерфейса. Она показывает взаимодействие между экранами, объясняет, как использовать приложение или просто направляет внимание пользователя. Изучая статьи об анимации, я узнал, что почти все они описывают только конкретные варианты использования или общие факты об анимации, но я не сталкивался с какой-либо статьей, где все правила, касающиеся анимации интерфейсов, были бы четко и практически описаны. Но, в этой статье я не буду писать ничего нового, я просто хочу собрать все основные принципы и правила в одном месте, так что другим дизайнерам, которые хотят запускать анимированные интерфейсы, не нужно было искать дополнительную информацию.
          Читать дальше →
        • Как сделать gif-анимацию для Behance и Dribbble?

          • Tutorial


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

          Есть много статей о том, как быстро сделать анимацию в Principle, Flinto и других редакторах, но нет ничего о том, как её готовить конкретно для Behance и Dribbble.

          Мы протаптывали эту тропинку сами и поняли, какой способ для нас оптимальный. Статья будет полезна тем, кто ещё не разобрался.
          Читать дальше →
          • +6
          • 30.3k
          • 2
        • Дизайн-система. Определение понятия



            В российском дизайн-сообществе сформировалось и все чаще встречается мнение о том, что возникший в последние годы хайп вокруг дизайн-систем — не более, чем пузырь, раздутый вокруг давно существующей темы, а вовлеченные в это дело авторы спекулируют на старых понятиях.
            Читать дальше →
            • +28
            • 26.1k
            • 4
          • Прототипирование — это просто, как собрать пазл. Мультикомпоненты дизайн системы в Figma

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


              Узнайте, как ускорить дизайн-процессы
            • Дизайн-система Acronis. Часть первая. Единая библиотека компонентов



                Меня зовут Сергей, я работаю старшим дизайнером в компании Acronis. В отделе дизайна продуктов для бизнеса я отвечаю за разработку и внедрение единой библиотеки компонентов.


                Так как у нас много продуктов и сервисов, а дизайн в этих продуктах и сервисах сильно отличается, мы решили его унифицировать и привести к единому UI. Зачем? Все просто: такой подход дает возможность оптимизировать работу отдела, сосредоточить дизайнеров на UX, ускорить процесс разработки и запуск новых продуктов, снизить нагрузку на отделы тестирования и значительно сократить количество багов на стороне front-end. В этой статье я расскажу о нашем опыте, остановлюсь на инструментах и покажу, как устроена библиотека изнутри.

                Читать дальше →
              • Создание Tinkoff Design System. UI Kit, версионирование и витрина компонентов

                  image

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

                  • Translation
                  image

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

                  Я планировал пообщаться со старшими ребятами, рассказать то, что считал действительно крутым в своей работе, поделиться каким-то интересным опытом, но в итоге меня попросили провести урок с учениками подготовительной группы (примерно 4-5 лет). Несмотря на то что сначала я был скорее разочарован, это оказалось очень интересной задачей!

                  Главная особенность работы с детьми такого возраста в том, что ты не можешь ничего рассказать о брендах с которыми работал. Четырехлетние дети не будут восторженно реагировать на истории о работе на Channel 4, BBC и Disel. «Я получал награды BRIT, и даже разработал веб-сайт, на котором получил запись imdb!» — дети не поймут, о чем я вообще говорю. Поэтому нужно было в самых простых выражениях объяснить то, что я сделал, и почему это так важно. Я подумал: было бы здорово показать детям дизайн во всех его формах.

                  Что я сделал?

                  Читать дальше →
                • Персональные данные (Краткий FAQ)


                    Что такое персональные данные?


                    Персональные данные - любая информация, относящаяся к определенному или определяемому на основании такой информации физическому лицу, в том числе:  
                    — его фамилия, имя, отчество, 
                    — год, месяц, дата и место рождения, 
                    — адрес, семейное, социальное, имущественное положение, образование, профессия, доходы, 
                    другая информация (см. ФЗ-152, ст.3).
                    Например: паспортные данные, финансовые ведомости, медицинские карты, год рождения (для женщин), биометрия, другая идентификационная информация личного характера.
                    В общедоступные источники персональных данных (адресные книги, списки и другое информационное обеспечение) с письменного согласияфизического лица могут включаться его фамилия, имя, отчество, год и место рождения, адрес, абонентский номер и иные персональные данные (см. ФЗ-152, ст.8).
                    Персональные данные относятся к информации ограниченного доступа и должны быть защищены в соответствии с законодательством РФ. При формировании требований по безопасности систем персональные данные разделяют на 4 категории.
                    Читать дальше →
                  • Полный путеводитель по созданию лендингов, которые продают

                    • Translation


                    Мы продолжаем знакомить вас с лучшими статьями по веб-дизайну. Сегодня мы перевели свежую статью на Medium о создании эффективных посадочных страниц. Перевод выполнен «Я люблю ИП».

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

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

                    Читать дальше →
                    • +7
                    • 56.2k
                    • 2
                  • Бутстрэппинг — бизнес с нуля. Часть 1


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

                        Советов новичкам про то, как начать карьеру дизайнера, в интернете масса. Гораздо интереснее становится, когда понимаешь, что уже не готов просто рисовать картинки. Наш бывший коллега Павел Батурин, который 2,5 года работал в AT Consulting на проекте «Электронное правительство», рассказал, почему важно уметь продавать свою работу, как с нуля организовать отдел и поделился другими практическими советами, которые помогут тем, кто достиг потолка в дизайнерской профессии.


                        Читать дальше →
                      • Мои правила дизайна хорошего интерфейса

                          image

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

                            image

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

                            Поэтому мы запускаем конкурс и предлагаем вам попробовать свои силы. Задача: сделать видеочат мечты. Для этого вам нужно при помощи редизайна сместить акценты в интерфейсе продукта в сторону видеосвязи. Это может быть общение один-на-один, видеоконференция или онлайн-трансляция. Главное, чтобы создавалось впечатление простоты и привычности видеообщения. Разумеется, любимый текстовый чат должен остаться под рукой. Лёгкость, комфорт и немножечко магии — вот что должен ощущать пользователь ICQ.
                            Читать дальше →
                          • Люди, навсегда изменившие мир: Джерри Харви

                              Стив Джобс, Роберт Нойс, Макс Фактор — люди навсегда изменившие Мир… В один ряд с ними можно смело поставить еще одну личность, легенду — американского звукорежиссера Джерри Харви.

                              Читать дальше →
                            • 12 отличных примеров email-рассылок для брошенных корзин



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



                                Очередное исследование, проведенное американскими специалистами показало, что 67,45% посетителей бросают оформление заказа. А это значит, что вы получаете только ⅓ потенциальных продаж интернет-магазина.


                                Читать дальше →
                              • Хороший дизайн интерфейсов. Часть 3

                                • Translation
                                • Tutorial
                                Это третья часть переведённых заметок «Good User Interface». Первые 16 частей уже ранее перевели наши коллеги из ADV на Хабре, а вторые 11 перевели мы.

                                Идея 28


                                Используйте варианты по-умолчанию, не заставляя людей выбирать


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

                                Остальные 10 заметок далее