Я дизайнер в агентстве, которое в основном занимается веб-разработкой "PSD в HTML". Я знаю, что некоторые могут возразить, что это не идеально, но в моем агентстве это работает именно так, потому что большинство макетов должны быть одобрены до того, как они будут созданы. Клиенты и руководители просто не доверяют разработчикам производить вещи без согласования.
Обычный рабочий процесс:
Это оставляет «промежуточные» макеты разработчикам, которые обычно могут понять это, но иногда в конечном итоге выглядят неубедительно (например, мобильный телефон с разрешением 320 пикселей выглядит мусором при разрешении 600 пикселей, потому что 640 пикселей — это точка останова для планшетов).
Несмотря на недостатки, большинству в нашем агентстве такой подход нравится, но есть стремление к чему-то, что может обеспечить более близкий / более совершенный до пикселя отзывчивый опыт. Я знаю, что это не будет на 100%, но я надеюсь, что мы сможем стать ближе.
Мой вопрос, в частности, заключается в следующем:
Как мне, дизайнеру, продемонстрировать разработчикам, что должно происходить в промежутках между точками останова, помимо создания десятков макетов для всех промежутков между точками останова (агентство небольшое и у нас нет производственного персонала)?
Я открыт для методов в Photoshop или использования другого программного обеспечения, если оно поможет, если оно позволяет нам создавать макеты до разработки для утверждения клиентом и по-прежнему может создавать интуитивно понятный документ для разработчиков для кодирования в HTML. (как многослойный PSD с подсказками типа и еще много чего).
Спасибо!
Честно говоря, эти промежуточные размеры являются скорее подстановочными знаками, чем что-либо еще. Я бы проектировал в соответствии со «стандартами» (iPhone 5 и 6/Samsung Galaxy), и все, что находится посередине, зависит от возможной настройки самой точки останова (т.е. уменьшается ли разрешение планшета до 600 пикселей, а не 640 пикселей). Если есть что-то среднее, и вам действительно нужно, чтобы оно выглядело определенным образом, для этого потребуется новая точка останова. Это невозможно обойти. Будь то что-то, что нужно продиктовать разработчику, чего клиент никогда не увидит, потому что все это делается в процессе разработки, или вы создаете макет.
Я бы порекомендовал открыто поговорить с разработчиками вашего агентства о том, как они хотели бы получить руководство (вместо множества макетов). Из личного примера мы рекомендуем использовать адаптивную сетку из 12 столбцов для макетов рабочего стола в Photoshop, понимая, что мобильные макеты будут управляться любой используемой структурой CSS, в нашем случае это Bootstrap. Таким образом, креативщики подготавливают макет для рабочего стола, может быть, даже пару мобильных состояний для одного шаблона, креативщики и разработчики совместно проверяют его, чтобы убедиться, что всем понятны правила, определяющие интервалы и перестановку/изменение размера контента для мобильных устройств, а также кодирование. После того, как первоначальная сборка завершена, она проходит внутреннюю проверку с креативщиками агентства, которые могут предоставить конкретные отзывы о любых обнаруженных ими проблемах макета.
Это очень хорошо работает для пользовательских сборок веб-сайтов, сохраняя творческие часы в здравом уме и предоставляя разработчикам достаточное руководство для выполнения сборки.
Чтобы упростить процесс и свести к минимуму взаимодействие между дизайнерами и разработчиками, мы также предлагаем креативщикам запускать свои PSD-файлы через веб-предварительную проверку , чтобы выявить потенциальные проблемы с кодированием до начала разработки.
Марко
Макс Токман