Разработайте программное обеспечение, которое позволяет повторно использовать общие элементы, такие как принцип программирования DRY.

Часто, когда я занимаюсь дизайном для Интернета (будь то макеты или полные развороты веб-сайтов), у меня есть много повторяющихся элементов в моем документе. Я хочу следовать философии Don't Repeat Yourself ( DRY ).

Один случай: я разрабатываю макет, чтобы проиллюстрировать путь пользователя по веб-сайту. Я делаю это, начиная со страницы tabula rasa, которая включает состояние веб-сайта по умолчанию. Затем я копирую эту страницу и настраиваю ее, чтобы она соответствовала следующему шагу взаимодействия с пользователем. Затем изменится какой-то небольшой аспект страницы (например, цвет заголовка), и я буду вынужден вносить это изменение в каждый шаг своего макета.

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

Это что-то вроде партиалов из Rails или Microsoft MVC, если вы знакомы, но для программного обеспечения для проектирования.

Вы исключили/учитывали Fairworks и Photoshop (с использованием смарт-объектов или композиций слоев)?
Я не знаю ни одной аббревиатуры или слогана в мире дизайна, эквивалентной DRY, но эта концепция знакома под общим заголовком повышения производительности с помощью шаблонов, повторно используемых ресурсов и записанных действий. Вы можете найти полезную информацию о производительности дизайна. Это также будет хорошо знакомо любому дизайнеру, который много кодирует на CSS...

Ответы (5)

В большинстве программ Adobe Creative Suite/CC есть инструменты для таких вещей. Вот некоторые из основных:

  • Все приложения

    • Actions , похожие на записываемые макросы — сохранение набора действий, а затем их выполнение с помощью одной кнопки.
  • Фотошоп:

    • Смарт-объекты (наборы слоев и векторных данных, которые можно использовать повторно)
    • Корректирующие слои (слои, целью которых является изменение слоев под ними, оставаясь при этом независимыми от слоев под ними — удобно для повторного использования)
    • Основные стили абзацев и символов для текста
  • Иллюстратор:

    • Символы (которые можно сохранить как библиотеки символов и загрузить в документы)
    • Размещение внешних документов ( File > place, размещает ссылку на внешний документ, чтобы несколько документов могли использовать один элемент)
    • Графические стили (позволяет сохранять элементы внешнего вида элемента, применять их ко многим элементам и обновлять одновременно), а также стили символов и абзацев для текста.
  • Индизайн:

    • Главные страницы (позволяет страницам наследовать одни и те же элементы; главные страницы могут наследовать от других главных страниц)
    • Размещение внешних документов (как Illustrator, но используется гораздо шире)
    • Стили для большинства типов элементов: очень сложные стили абзацев (включая правила GREP, которые автоматически применяют стили символов), стили символов, стили объектов, стили таблиц, стили ячеек таблиц...

Люди иногда используют InDesign для создания макетов веб-сайтов — даже несмотря на то, что он предназначен для печати документов — из-за перечисленных выше функций, которые помогают создавать шаблоны и избегать повторений. Дополнительная информация: Какое программное обеспечение лучше всего подходит для дизайна графического интерфейса?

У Adobe Fireworks также были/есть некоторые похожие полезные функции, но Adobe никогда серьезно не относилась к Fireworks, в нем есть ошибки, и недавно они объявили, что убивают его и заменяют ничем, кроме расплывчатой ​​маркетинговой чепухи .

Интерактивные инструменты прототипирования, такие как Axure, разработаны специально для этого.

Если мы говорим о веб-дизайне, прототипирование в HTML — мой предпочтительный метод, так как повторное использование элементов становится очень простым.

Как заявляли другие, многие продукты Adobe также предлагают эту возможность из самого инструмента дизайна.

Существует специальное программное обеспечение для макетов пользовательского интерфейса. В Visio есть набор графики, Balsamiq Mockup , Microsoft Expression Blend (хотя это немного продвинуто), а быстрый Bing/Google for UI Mockup Tools дает массу результатов, многие из которых бесплатны.

Похоже, в Sketch 3 есть эта функция. Они называют это многоразовыми элементами .

Демо: https://www.youtube.com/watch?v=DLQ1BAvJYNE


Также для Sketch, но версии 2 я встречал плагин Symbols, который имеет аналогичный функционал, но на самом деле не имеет для этого графического интерфейса.

Сайт: https://github.com/tisho/sketch-plugins/tree/master/Символы

Вы можете быть довольны композициями слоев в Photoshop, но это может быть довольно неприятно, если вы тщательно не организуете свои слои. Если у вас нет особой методологии, возвращение к композициям, которые вы разработали таким образом, может сбивать с толку.