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

Question

[Сергей Тилион]

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

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

Answer 1

[Павел Радьков]

Такое возможно.

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

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

Comments

[Сергей Тилион]

Спасибо, недавно читал про эту программу, смотрел ролики, но не удалось скачать.

Answer 2

[lavezzi1]

Привет.

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

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

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

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

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

И да, конечно же UI дизайнеру нужно знать верстку (html5&css). Обязательно. Плюсы:
Сэкономишь в будущем много времени на объяснениях.
Будещь понимать как и что работает, рисую какой то компонент.
Станешь ценнее как сотрудник
и т.д.

Comments

[Артем]

Обязательно между брейкпоинтами резину делать? В том же бутстрапе есть container (фикс) и container-fluid, я сейчас использую фиксированный и вроде норм..

[Нерон Лордов]

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

[Артем]

Liquidos: спасибо! а то я растерялся даже :)

[Сергей Тилион]

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

[lavezzi1]

Артем: Liquidos: Читайте, пожалуйста, внимательнее. Я не говорил про резиновость контейнера, я говорил про блоки (колонки), а они в бутстрапе по умолчанию в процентах, то есть резиновые.

Сергей Тилион: причем тут количество брейкпоинтов? Можно с 2-3 сделать адаптивный сайт. Ты не понимаешь верстку, от этого у тебя полное не понимание как это работает. Возьми простой адаптивный макет от бутстрапа и разбери его, как все в нем работает. Если тебя это не устроит, то стоит написать разработчикам фреймворков, что их работа это тупик.

[Сергей Тилион]

lavezzi1: вы профессиональный дизайнер?

[lavezzi1]

Сергей Тилион: Да, UI/UX дизайнер

[Сергей Тилион]

lavezzi1: Вы сначала были верстальщиком или осваивали будучи дизайнером? Тяжело было?

[Артем]

lavezzi1: но если контейнер фиксированный, то и колонки в процентах - фиксированные. если же контейнер резиновый, то колонки тянутся.

[lavezzi1]

Артем: Колонки в процентах не могут быть фиксированными. Фиксированный контейнер, это контейнер у которого задана max-width; достигая 1170рх он дальше не ползет и колонки соответственно тоже. Если меньше 1170рх то контейнер резиновый и колонки тоже.

Сергей Тилион: Осваивал будучи дизайнером. Абсолютно не сложно, порог вхождения html\css низкий. Зная эти два языка можно смело за boottrap браться, чтобы его освоить нужно пару дней. Там все просто и куча готовых решений, куча ответов в коммьюнити.

[Сергей Тилион]

lavezzi1: Можете посоветовать как учить? Какие сайты или книги вам подошли? Как практиковались?

[lavezzi1]

Сергей Тилион: Я сразу с практики начинал. А потом уже читал про семантику, какие теги нужно использовать в каком месте и т.д. Книги в самом начале не читал, так как убивает всякое желание. Литературу потом, для более глубокого познания. Для начала я просто создал html и css файл и пробовал создавать блоки на странице, потом брал какой нибудь сайт и пытался сделать такой же. Потом нарисовал макет и сверстал его. И т.д. Все в практике приходит, возникает вопрос - гуглишь. Кстати, видео уроки на youtube очень помогли. Пробуй, это не сложно. Удачи!

[Сергей Тилион]

lavezzi1: спасибо за развёрнутые объяснения. И вам удачи).

Answer 3

[Нерон Лордов]

Возможно, адаптивные функции в Adobe InDesign помогут? Да, в индизайне есть функционал для прототипирования интерфейсов)

Answer 4

[Павел Анплеенко]

В последнем photoshope появилась такая функция отображения макет на гаджете, правда только на гаджетах продукции apple. В appstore есть приложение Device preview
Ставишь на смартфон и подключаешь его к компу через шнур в photoshope включаешь расширение с аналогичным название и после подключения можно на гаджете смотреть макеты

Comments

[Сергей Тилион]

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

Answer 5

[GreatRash]

Как я это вижу...

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

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

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

Comments

[lavezzi1]

Все верно.

[Сергей Тилион]

Неверно.
- mobile first знаю, он не поможет увидеть поведение всех элементов на 10+ размерах.
- макет "под резину".
- как сетка поможет увидеть? Никак.

Или ваш ответ можно сформулировать как "не надо видеть"? Я не понял, поясните.

[GreatRash]

Сергей Тилион:
- принцип mobile first поможет понять какие элементы как будут вести себя на определённых разрешениях
- не видя макета рассуждать трудно, вы бы показали его что ли?
- сетка поможет добиться предсказуемого поведения любых элементов макета, опять же она поможет избавиться от выдуманных из головы значений типа 57px справа, 33px сверху и т.п. (из вашего ответа я понял, что сетки у вас таки нет?)

Покажите всё же макет (хотя бы 2 итерации: мобила и десктоп), чтобы можно было более конкретно пообщаться.

[Сергей Тилион]

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