Существуют ли какие-нибудь фреймворки для ВЕБ-ДИЗАЙНЕРОВ?

Здравствуйте, уважаемые!

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

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

Вот, к примеру, у верстальщика есть bootstrap (и другие фреймворки). У бэкэндщика есть Symfony (если говорить про PHP + другие фреймворки + другие фреймворки на других разных языках).

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

Заранее благодарю Вас за ответы!

С уважением,

portered
  • Вопрос задан
  • 1166 просмотров
Решения вопроса 2
@ppskmg
web design
Если коротко – формируются свои.

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

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

У меня работа выглядит так, работаю со sketch:
Создаю artboard, эта процедура делается один раз для одного типа макетов, в моем случае это LP.
  1. Typography
  2. Button
  3. Pop up
  4. Footer
  5. Header
  6. LP – идет основная страница над которой работаем ее оставляем пустой или по умолчанию добавим footer и header.


В artboard header, footer, pop up складываем с десяток вариантов отображения этих блоков, можно еще варианты для body добавить, к примеру, часто повторяются блоки в 3–4 колонки с заголовками и куском абзаца.
По умолчанию в artboard уже должны быть вами созданы стили для заголовков, созданы символы для кнопок, фонов и прочих элементов, которые могут дублироваться. В скетче со стилями очень удобно работать.

Как пример нашел, не мой, но суть должна быть понятна.
8328439feec041f48bde8bdbee6aad4d.png

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

9999d5962d804b36921cca6f627ae648.png

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

«Но только не сегодня» выделяем все заголовки открываем менюшку со стилями

328460ad776b454bb5b7a731da2220e2.png

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

d79649490f4c4ea0b3f906e7c21ebedb.png

Теперь, если нужно изменить параметры у заголовков просто изменим шрифт у одного слоя и он поменяется у всех слоев с тем же стилем. Останется только с формами блоков поиграться.

Идем дальше создается кнопка из символа и, к примеру, дублируете ее на 10 раз измените что-то у одной измениться и у остальных.

67a670e697704386a014da17da03fd6d.png

Аналогично назначение стиля на цвет фона, например, для перекраски всех иконок сразу.

f4daeda82168485eb8fae09d085a032d.png09c79db81541450da7649c9283451d26.png154b48d4b2264f808a6cb77248e2111f.png

+ куча полезных плагинов.

Частично подобное можно и в PhotoShop реализовать, но там имхо многое сделано через известное место.

Еще перед каждым новым проектом после скачки т3 от клиента, запускаю скрипт Automator который по типу gulp собирает мне проект:
  • Ищется т3 в загрузках и переносится в папку проекта или предлагается создать новый файл (если переписка в скайпе то просто копирую в него т3)
  • Создает дерево папок
  • Ставятся рабочие теги для удобства поиска
  • Сбрасываются папки в док для быстрого доступа (папка текущего проекта, папка img и папка с т3)
  • Создается дерево типичных задач по проекту в Task менеджере
  • Делается пометка в календаре старт-дедлайн.
  • Создается новый документ в sketch с именем проекта

В итоге имею определенную структуру из проекта в проект.
0fa09f39a7024ab5a676a558f00b609d.png
и тд.

Вот такой вот фреймворк.

Успехов!
Ответ написан
IonDen
@IonDen
JavaScript developer. IonDen.com
Тут конечно не только для дизайнеров, но в целом полно всего полезного: www.bypeople.com
Например в разделах: www.bypeople.com/gui или www.bypeople.com/freebies
Ответ написан
Пригласить эксперта
Ответы на вопрос 3
@teslor
Обычно само слово "фреймворк" подразумевает написание какого-то кода. Для веб-дизайнеров есть такие программы как Adobe Dreamweaver и Fireworks, думаю у них есть подобный функционал, как вы хотите. Есть еще куча отдельных сервисов и инструментов для создания макетов: framebox, balsamiq, mockflow, mockingbird, pencil и т.д.
Ответ написан
paulradzkov
@paulradzkov
Дизайнер, верстальщик, начальник отдела UI
Платные дизайн-фреймворки — designmodo.com/shop
Обратите внимание на Startup Design Framework — designmodo.com/startup
На момент выхода он очень хорошо продавался и в результате пошла мода на дизайнерские фреймворки.

Есть и бесплатные, но это уже просто «UI kits» — designmodo.com/freebies/ui-kits
Ответ написан
Ваш ответ на вопрос

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

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