tilion
@tilion
Веб-дизайнер

Как UI-дизайнеру с PSD макетами тестировать интерфейсы на экранах разных размеров?

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

Подозреваю, что подойдёт какой-нибудь WYSIWYG-редактор, но в том же Adobe Muse такой адаптивности вроде нет.
Как я это вижу: нарисовал макет, экспортировал элементы и фоны командой Quick Export to PNG, накидал их и тексты в редакторе/веб-приложении, меняешь ширину страницы, подгоняешь размеры и расположение, показываешь верстальщику. Такое возможно? Может есть другой способ без необходимости изучать адаптивную вёрстку и какой-нибудь Bootstrap?
  • Вопрос задан
  • 1498 просмотров
Пригласить эксперта
Ответы на вопрос 5
paulradzkov
@paulradzkov
Дизайнер, верстальщик, начальник отдела UI
Такое возможно.

Если у вас все основные состояния уже нарисованы, экспортируйте дизайн в Adobe Edge Reflow
https://www.adobe.com/ru/products/edge-reflow.html

Тут вы сможете «докрутить» адаптивность на промежуточных брейкпоинтах без изучения кода.
Ответ написан
lavezzi1
@lavezzi1
Привет.

Между брейкпонтами блоки должны быть резиновыми. Какие брейкпоинты и их кол-во зависит от проекта\макета.(https://uxpin.s3.amazonaws.com/responsive_web_desi...

Но хотелось бы увидеть сайт на большем количестве экранов в виду того, что, нужно немного отходить от подхода "5 брейкпоинтов, а дальше как покатит". Та же история с мобильными приложениями (как мне кажется, хоть опыта здесь маловато).


Ты неверно мыслишь. 5 брейкпонтов это нормально и должно хватать за глаза (мобильные, планшет, ноутбук, пк, широкие мониторы). Если тебе хочется добавить еще какую то точку скажем в 545px то проблема с твоим макетом, потому что с точки зрения верстки это головная боль и точки нужно создавать именно под размеры экрана устройств, например (320, 480, 768, 1024, etc).

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

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

И да, конечно же UI дизайнеру нужно знать верстку (html5&css). Обязательно. Плюсы:
Сэкономишь в будущем много времени на объяснениях.
Будещь понимать как и что работает, рисую какой то компонент.
Станешь ценнее как сотрудник
и т.д.
Ответ написан
Nekto_Habr
@Nekto_Habr
Чат дизайнеров: https://t.me/figma_life
Возможно, адаптивные функции в Adobe InDesign помогут? Да, в индизайне есть функционал для прототипирования интерфейсов)
Ответ написан
Комментировать
В последнем photoshope появилась такая функция отображения макет на гаджете, правда только на гаджетах продукции apple. В appstore есть приложение Device preview
Ставишь на смартфон и подключаешь его к компу через шнур в photoshope включаешь расширение с аналогичным название и после подключения можно на гаджете смотреть макеты
Ответ написан
@GreatRash
Как я это вижу...

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

Подозреваю что изначально все ваши проблемы возникли из-за того, что макет не под "резину" рисовался. Опять же сетка, скорее всего, кривая (или её вообще нет). Про принцип mobile first слышали? Есть подозрение, что тоже нет.

Поправьте если не прав.
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы