Адаптивный дизайн

Что такое адаптивный дизайн?

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

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

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

Основные принципы

Отзывчивость (Responsive Web Design (RWD)):

• применение гибкого макета на основе сетки (flexible, grid-based layout);
• использование гибких изображений (flexible images);
• работа с медиа-запросами (media queries);

Адаптивность (Adaptive Web Design (AWD)):

• применение постепенного улучшения;
• проектирование для мобильных устройств с самых ранних этапов («Mobile first»)
• плавное перестраивание блоков в отзывчивом дизайне при изменении размера экрана (например, при повороте планшета)

Адаптивность и отзывчивость (Adaptive + Responsive model)

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

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

Адаптивный подход предоставляет предварительно структурированные шаблоны, которые будут обслуживаться на основе пользовательского агента (user agent) и типа устройства. Основное различие между ними заключается в DOM-структуре.  При отзывчивом дизайне у нас одинаковый HTML-код для всех ситуаций (если только вы не используете JS для удаления некоторых узлов DOM), тогда как при адаптивном у нас другая структура кода и потенциально разный опыт.

Методы отзывчивого дизайна

При создании отзывчивого опыта у нас есть три подхода к работе с нашими макетами и контентом:

1. Изменение структуры (Reflow)
2. Изменение размера (Resize)
3. Показать / Скрыть (Show/Hide)

Изменение структуры (Reflow): мы можем изменить структуру макета, чтобы лучше соответствовать области просмотра. В большинстве случаев это приводит к тому, что контент складывается в стек (это не всегда хорошо).

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

Показать / Скрыть (Show/Hide): некоторые части интерфейса скрыты из области просмотра (но они все еще существуют) или отображаются, чтобы заполнить пространство.

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

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

Breakpoints (контрольная точка)

Breakpoints (переломные/контрольные точки) —  изменение условий с одного на другое, при котором внешний вид сайта (раскладка) изменяется. Часто встречается в адаптивной вёрстке с использованием медиавыражений.

Основные размеры экранов:

0 – 600px: телефон

600 – 900 пикселей: планшет в книжной ориентации

900 – 1200px: планшетный пейзаж

[1200 – 1800] – это то, где применяются наши обычные стили

1800px + : большой рабочий стол

Сначала мобильные («Mobile first»)

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

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

Как работает адаптивность в figma?

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

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

Работа с меню Constraints

У каждого объекта есть панель свойств, которая появляется сбоку при щелчке по форме. С её помощью можно производить разные действия – масштабировать, менять цвет и так далее. Один из параметров является Constrains, он позволяет делать привязку к краям. Для этого существуют раскрывающиеся списки меню. Каждое ключевое слово привязывает к определенному краю: left/слева, right/справа, top/сверху, bottom/снизу, center/центр. Также присутствуют пункты, где можно произвести настройку сразу по двум параметрам. Left and Right и Top and bottom.  

Во всех случаях объект будет привязан к определенному краю, кроме пункта, где указано сразу два условия. 

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

Scale – придает объекту свойство увеличиваться пропорционально фрейму. Масштабируются не только формы, но и отступы по краям. 

Если нужно сделать центрирование контейнера, то для этого существует center, который настраивается в двух плоскостях (высота и ширина). Container будет придерживаться центра того места, где был размещен. 

Крупный проект состоит из интерфейса и вложенных друг в друга блоков. Функция выравнивания пригодится, если существует задача сделать центрирование, ориентируясь на один из блоков. В таком случае стоит помнить, что манипуляция с привязкой осуществляются только внутри фрейма. Поэтому вначале создаем frame и придумываем ему имя block-1. Если он был создан за пределами макета, то переносим его на макет, у которого, предположим, название main-frame. В итоге у нас получится следующее:

Теперь rectangle (прямоугольник): применяем свойства Constrains, и квадрат будет выравниваться по отношению к block-1.

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

Для создания адаптивного дизайна потребуется инструмент Auto-Layout. Он позволяет создавать динамические фреймы. Они меняются в зависимости от содержимого, если вы напишете текст, то область расшириться. Чтобы включить опцию auto-layout нужно выбрать frame и в правой панели нажать плюс, как показано на скриншоте ниже:

Если frame гораздо больше, чем текстовое поле, то при копирование в него текста произойдёт автоматическое сжатие. В нашем случае слой под названием frame-1 примет более компактный вид, как показано на картинке:

Обратите внимание на отступы по бокам, они были проставлены в настройках по умолчанию. Для их изменения следует открыть окно, нажав на иконку “Alignment and padding”. Посередине находится выравнивание, здесь предлагается сделать выравнивание по левому и правому краю, а также центру, по вертикальной плоскости и по горизонтальной, соответственно. Чтобы протестировать, рекомендуется увеличить размер области и попытаться выровнять текст внутри.

По бокам от опции “alignment” присутствуют четыре поля с цифрами. Если поменять значения, то расстояния от края до элемента изменятся. Другой способ, переназначить отступы, это воспользоваться Mixed, здесь все цифры требуется записать, как в стилях CSS, т.е. через запятую. 

На панели есть две иконки “стрелки”, они указывают направление расположения “блоков”. Чтобы посмотреть, как это работает, рекомендуется разместить сразу несколько объектов, например “Rectangle”. Перед размещением нужно выключить auto-layout, если рабочая область недостаточного размера, то её следует растянуть, и уже потом размещать. Активируем снова auto-layout и  в настройках меняем “alignment” по центру, а дальше щелкаем по направлению и смотрим результат:

У нас теперь несколько блоков. Над квадратами можно производить дополнительные действия, например: 

1. Spacing between items – отступ между прямоугольниками.
2. Space between – автоматически проставляется расстояние между объектами при изменении области. Если оставить второй пункт в этом списке, то параметр первого изменится на auto. 

В правой панели есть раздел resizing, он используется, когда требуется убрать пустое пространство. На выбор два раскрывающихся списка по “ширине” и “высоте”. Чтобы уменьшить область, нужно щелкнуть по “Hug contents”. На скриншоте показан пример “до” и “после”. 

Примечание: наглядно можно увидеть, что если создать frame, расширить его, добавить несколько объектов, после этого применить auto-layout, то ключевые объекты будут отображены по центру, а остальное пространство будет убрано.   

Внутренние примитивы также могут изменяться. Свойство Fill Container растягивает объект по всему холсту. Доступно два варианта по горизонтали и вертикали. В resizing также присутствует квадрат настроек, если на него навести мышкой,  то появятся стрелки. Щелкая по ним, примитивы будут меняться в размерах. 

Функцию Fill container можно использовать только на внутренних объектах фрейма. Для главной области есть hug container. Но при разработке, встречаются задачи, где требуется задействовать сразу два этих свойства. Рассмотрим пример, создадим frame и назовём его  page-1, второй объект разместим внутри и дадим название left-frame. Нарисуем несколько примитивов, для каждого фрейма применим свойство auto layout, как показано ниже. Опция автоматически уменьшит слой page-1, поэтому размер width следует проставить вручную. 

Щёлкнем по left-frame и настроим параметры resizing. Теперь в опции выбираем пункт, указанный на скриншоте ниже. После этого дочерний frame растянется на всю область. При изменении height у page 1, внутренний блок также будет увеличиваться или уменьшаться в размерах. 

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

С текстовыми полями нужно производить те же действия. Например, при добавлении текста блоки расположенные ниже должны смещаться вниз. Как этого добиться? Для начала добавим еще frame, придумаем название container-text. Сделаем так, чтобы местоположение в иерархии было выше остальных слоев, начинаем заполнять область текстовыми полями их будет всего два. 

1. Краткое описание (description) статьи.
2. Ссылка “читать полностью”.

В text-1 находится фрагмент статьи, взятый с официального сайта figma, а в text-2 ссылка для перехода, где можно полностью ознакомиться со статьей. Ниже показан образец, как это выглядит. 

Container-text следует преобразовать в auto-layout и в resizing установить опцию fill container.  

Чтобы text-2 сдвигался в зависимости при увеличении текстового поля, следует в text-1 поменять значение на Hug contents. 

Ниже предоставлен пример, где при заполнении текстового поля text-1 надпись “Читать подробнее” сдвигается вниз.

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

Начнем создание нового фрейма назовём его category-frame. Укажем размеры 1500 на 1000 пикселей. На главной области нужно добавить еще три фрейма. Имя объектам рекомендуется дать article-frame (1,2,3). Внутренняя часть карточек будет содержать превью, картинку и текст с описанием. Имя прямоугольников preview-(1,2,3). Полностью макет выглядит как на картинке:

Теперь в catеgory-frame добавим auto layout и, соответственно, то же самое нужно сделать с внутренними слоями. Внешний frame “направление по горизонтали”, внутренний – по вертикали. 

При добавлении auto layers в article-frame(1-3) произойдёт сжатие объекта до минимальных размеров, вам потребуется вручную отредактировать высоту. На оставшееся пространство следует разместить два текстовых поля. Одно – это краткое описание статьи, второе – “читать подробнее”. Если вставить целый абзац, то текстовое поле расширится и верстка собьётся, как показано ниже:

Чтобы исправить проблему в свойствах параметра “W”, нужно указать значение “400”. Текстовое поле назовём text-1, дальше делаем дубликаты text-2 и text-3. Разместим их в соответствующие фреймы, кроме того, нужно у карточки указать место для перехода на полную статью, например, “Читать подробнее”. Для выделения ссылок в тексте надо использовать синий цвет. Наша категория со статьями почти готова, осталось только у text(1-3) изменить значение на “hug contents”  Результат на картинке ниже:

После заполнения любого текстового поля с именем text-(1-2-3), надпись “читать подробнее” сместится вниз. 

Особенности адаптивного дизайна для мобильных устройств

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

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

1. ПК – 1920 на 1280 пикселей, последний параметр можно сделать и 1440.
2. Планшеты 1024 (768) на 1000.
3. Смартфоны 480 (320), в некоторых случаях делают единый интерфейс на 360, тогда потребуется проверить корректность отображения верстки.

Рассмотрим задачу, где требуется разместить иконки. Для начала создадим frame для смартфона. Заходим и выбираем подходящее устройство, например, “iPhone 11 Pro Max”. 

Создадим первые icons (для этого можно использовать инструмент rectangle) и упакуем их в frame. Быстрый способ это сделать – выделить объекты и нажать (Ctrl+ALT+G). Придумываем названия row-frame-1. Дальше делаем дубликаты row-frame-2, row-frame-3 и так далее, пока полностью не заполним.  

К главному фрейму применим Auto-layout и в панели Design установим в Spacing Between Items 10 пикселей.

Чтобы адаптивный дизайн умел подстраиваться под все размеры цифровых устройств, можно сделать растягивающуюся верстку. Для начала у всех фреймов с названием row-frame-(1-9) установим Resizing “fill container”. То же самое нужно сделать с каждой иконкой. При увеличении размера внутренние объекты также будут менять ширину и высоту.   

Вся иерархия состоит их этих настроек:

1. IPhone 11 Pro Max-1 – “Fixed width и height”.
2. Row-frame-(1-9) – Fill container (vertical и horizontal).
3. Rectangle-(1-36) – те же настройки, что и во втором пункте.

Для того, чтобы получить доступ к опции Rectangle, нужно добавить Auto-layout во все слои с названием row-frame. 

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

1. Row-frame-(1-9) – Alignment and between нужно настроить на space between.

1. Rectangle-(1-36) – resizing нужно настроить на fixed width и height.

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

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

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

Последнее, что требуется сделать, это в content-frame добавить Auto-Layout, после этого frame расширится до нужных размеров. Дальше пользователь может вписывать текст или стирать его, контентная часть будет автоматически масштабироваться по вертикали. 

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

Figma mirror

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

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

Responsive Design vs. Adaptive Design: What’s the Best Choice for Designers?

Google has always recommended responsive web design (RWD), especially after rolling out a big update on 4/21/15 which ranked mobile-friendly sites higher.

It doesn’t specify in the update that you must use responsive design though, just that a site be accessible on mobile, with good UX and performance.

With that in mind, let’s examine the pros and cons of adaptive vs. responsive design with regards to performance and UX design.

One of the biggest debates that we’ve seen since the rise of mobile is whether you should choose to develop a responsive, adaptive web design (AWD) or standalone mobile site (with its own m. URL). For the purposes of this discussion, we’ll leave out standalone mobile sites as it appears to be the least favorite solution for designers and businesses since they must be created separately (which accrues more upfront cost and maintenance costs).

What’s the Difference between Adaptive and Responsive Design?

So first up, what are the key differences between responsive and adaptive design?

Responsive vs Adaptive Website Design

Put simply, responsive is fluid and adapts to the size of the screen no matter what the target xdevice. Responsive uses CSS media queries to change styles based on the target device such as display type, width, height, etc., and only one of these is necessary for the responsive website to adapt to different screen sizes.

Adaptive design, on the other hand, uses static layouts based on breakpoints that don’t respond once they’re initially loaded.

Adaptive works to detect the screen size and load the appropriate layout for it – generally you would design an adaptive site for six common screen widths:

• 320
• 480
• 760
• 960
• 1200
• 1600.

On the surface, it appears that adaptive requires more work as you have to design layouts for a minimum of six widths. However, responsiveness can be more complex as improper use of media queries (or indeed not using them at all) can make for display and performance issues.

The latter in particular has created a lot of discussion over the past few years as it’s been the case that many sites deliver the full desktop model which, even if it’s not loading on the mobile device, slows sites down considerably. To get around this, you can use media queries–but there will be a few tradeoffs since a responsive site is never going to be as quick as a dedicated mobile site.

Why Use Adaptive Web Design?

Adaptive is useful for retrofitting an existing site in order to make it more suitable for mobile phones. This allows you to take control of the design and web development for specific, multiple viewports. The number of viewports that you choose to design for is entirely up to you, your company, and your overall budget. It does, however, afford you a certain amount of control (for example over content and layout) that you won’t necessarily have using responsive design.

Generally, you would begin by designing for a low-resolution viewport and work your way up to ensure that the UI design doesn’t become constrained by the content, and that usability isn’t lost.

As mentioned previously, it’s standard to design for six resolutions. However, you can make a more informed decision by looking at your web analytics for the most commonly used devices and then designing for those viewports.

If you want to design an adaptive website from scratch, that’s OK too. Start again by designing for the lowest resolution and work your way up. You can then use media queries to expand the layout for higher resolution viewports. However, if you do UI design for different screen sizes, you may find that this causes the layout to ‘jump’ when resizing a window to a smaller or bigger device screen.

It can be extra work designing and developing a site with adaptive for multiple viewports so it’s usually used for retrofitting.

Why Use Responsive Web Design?

The majority of new sites now use responsive, which has been made easier for less experienced designers and developers, thanks to the availability of themes accessible through CMS systems such as WordPress, Joomla, and Drupal.

Responsive doesn’t offer as much control as adaptive, but takes much less work to both build and maintain. Responsive layouts are also fluid, and whilst adaptive can and do use percentages to give a more fluid feel when scaling, these can again cause a jump when a window is resized. For example, in the image below, which shows a fluid layout, the designer is using percentage widths so that the view will be adjusted for each user.

With responsive, you will be designing with all layouts in mind and this, of course, can confuse the process and make it quite complex. This means that you should focus on creating a viewport for mid-resolution and you can then use media queries to adjust for low and high resolutions later on.

So in essence, it’s usually better to use responsive for new projects, and adaptive for retrofits.

Considerations to Take into Account

As discussed earlier, responsive sites can suffer when it comes to site speed (if they aren’t properly implemented).

Responsive also requires more in the way of coding in order to ensure that the site fits each and every screen that accesses it. However, the extra work is debatable (compared to adaptive design) since adaptive design requires that you develop and maintain separate HTML and CSS code for each layout. Modifying adaptive sites is also more complex since it’s likely you’ll have to ensure that everything is still working sitewide (such as SEO, content, and links) when it’s time for implementation.

You should, of course, also consider the user experience. Because responsive essentially shuffles the content around in order to fluidly fit the device window, you will need to pay particular attention to the visual hierarchy of the design as it shifts around.

According to Nielsen Norman Group, “Responsive design often turns into solving a puzzle — how to reorganize elements on larger pages to fit skinnier, longer pages or vice versa. However, ensuring that elements fit within a page is not enough. For a responsive design to be successful, the design must also be usable at all screen resolutions and sizes.”

So there are no shortcuts to whichever technique you decide to use – both require the work that comes with creating a site that’s essentially one-size-fits-all. Responsive has a slight edge, as you won’t, going forward, need to spend an awful lot of time in site maintenance.

The Decision – Responsive vs Adaptive Design

When it comes down to it, the key is to consider your audience first and foremost no matter what design technique you adopt. Once you know exactly who they are and what types of devices they tend to access the site on, then it’s easier to design with them in mind when it comes to different layouts, content, and so on.

When it comes down to it, the key is to consider your audience first and foremost no matter what design technique you adopt. Once you know exactly who they are and what types of devices they tend to access the site on, then it’s easier to design with them in mind when it comes to different layouts, content, and so on.

It will also depend largely on whether you have an existing site to work with or you’re starting from scratch. Responsive design has become the go-to design technique and it’s thought that around 1/8 websites now use responsive (while there’s little to no data on how many use adaptive). Adoption rates for responsive are growing quickly too and have almost reached the same level as standalone mobile sites.

With all of that in mind, it’s safe to say that responsive is usually the preferred technique if only because of the ongoing work that adaptive design demands.

However, if a client or company has the budget, then adaptive might be a better choice, according to a test carried out by Catchpoint. They built two web pages in WordPress, one using the standard WP TwentyFourteen responsive theme and the other using a plugin called Wiziapp.

The plugin serves a mobile theme to users depending on the device they’re accessing the web pages from and also offers advanced configuration options so that you can further streamline the process.

The results in load time speak for themselves:

It should be pointed out that no optimization was carried out at all, but this does show that the responsive site is downloading everything that is required for the desktop computer. So right out of the box, the theme doesn’t offer a very good performance at all.

Again, this can be overcome using media queries, but the above serves as a good example of why responsive UX design – whilst being a popular choice – is not always the best for smartphones. Until something better comes along though, it’s difficult to know what we can do about it other than learn how to properly code and implement a great responsive site.

So the conclusion?

Responsive design will remain popular, but that might be because we have not yet found a decent solution to the heavy maintenance that adaptive demands. Adaptive web design hasn’t died out though, despite the web’s apparent love of responsive, so it’s possible – in theory at least – that we’ll see some improvements emerge yet that will blow responsive web design out of the water.

Design UI in UXPin

If you’d like to start mocking up your own adaptive user interface design, you can do so with UXPin. The collaborative platform comes with pre-set and custom breakpoints. Once you’re done, activate Spec Mode to automate your design handoff to developers.