Есть ли такой инструмент для дизайна веб проектов или нужно изобретать свой велосипед?
В течении нескольких лет, разрабатывая разные сайты/проекты, поймал себя на мысли, что часто делаю одно и тоже. То есть делаю разными способами, но прихожу к одному результату. Желаемому результату - дизайн.
Конкретно - дизайн сайта выраженный в css. Тут не про верстку, а про оформление элементов - кнопок, меню, чекбоксов и т.д. Цвет, форма, размер, эффекты.
Решил как то это всё систематизировать, организовать чтобы было удобно и относительно быстро.
Может, пора создать свой велосипед? Или такой инструмент уже есть?
Прежде всего планирую создать инструмент для себя т.к. существующие решения не полностью удовлетворяют текущие потребности.
Идея такая - приложение/сайт для разработки/кастомизации элементов веб дизайна (кнопок, меню, чекбоксов). Визуальный интерфейс с просмотром результата в текущем времени. Изменил цвет кнопки - увидел как это будет выглядеть.
Но подобное уже есть. Разумеется, за несколько лет я перепробовал многие инструменты, но у каждого есть свои минусы. А задача - точнее результат часто одна - css файл с оформлением.
1 Куча онлайн инструментов - генераторы кнопок, чекбоксов. Разный функционал, разные настройки. Куча сайтов - неудобно. Нет единства.
2 Фотошоп. Макет - перенос в css. Не быстро. Нет возможности просмотра эффектов, поведения элемента при наведении/нажатии. Да так и делают сайты, но тут основное макет, композиция. Это больше про конкретный сайт, а не про элементы.
3 Пишем руками CSS, обновляем (можно и плагином) страницу. Долго. Запоминать цвета, тут один цвет, там другой, размеры.
4 Scss + Prepros (или аналоги) вышеперечисленное. Уже есть переменные, миксины и т.д. Уже что то похожее, но всё равно пишем код руками. Код и пишут руками, но когда он разный.
А тут стандартный и в 90% однотипный код - границы элемента (border), цвет, размер. И даже их значения часто наследуются, например один цвет границы у всех кнопок.
5) Фреймворки. Идут вместе со всем-всем-всем. Править это руками - можно но долго. Даже зная что где находится, сложно создать хороший дизайн в силу отсутствия единства. Тут цвет задал цвет зеленый, там красный, граница толще - тоньше, отступ больше меньше. Долго.
Так или иначе, у шаблонного дизайна есть закономерности. Условные, но всё же есть.
Определенное количество цветов, однообразное оформление элементов, одинаковые отступы/шрифты/размеры и т.д. Часть сайтов, в плане дизайна, представляют из себя веб приложения. Композиция не нужна.
Нужно просто задать базовые цвета, размеры, отступы, эффекты, однотипное поведение при наведении/нажатии и т.д.
Есть ли такой инструмент для дизайна веб проектов или нужно изобретать свой велосипед?
Для разработки десктопного ПО (скины/визуальные элементы) есть скингенераторы реализующие часть вышеописанного функционала.
Услышал тут про Figma, и хотелось бы вступиться за нее. Инструмент создан для разработки дизайна интерфейсов, и полностью используется как приложение, а не "конструктор сайтов". На Figma есть куча UI-kit, которые в свою очередь поделены на компоненты. Через командную библиотеку, любой пользователь может использовать эти UI-киты и конструировать интерфейс. Весь результат можно смотреть в CSS:
spoiler
Более того, большинство больших компаний уже перешло на Figma.
Тут можно создавать и стили текста для всего документа, и стили кнопок, и стили цветов, и стили теней - и все это использовать в виде одного компонента, применяя стили к любым элементам.
Нет. Но быстро посмотрел прямо сейчас.
Webflow напоминает конструктор сайтов.
figma - вроде тоже что то похожее.
Моя идея не делать конструктор, а предоставить визуальный инструмент для удобного создания css файла со всеми необходимыми стилями элементов.
Ведь в 90% случаев много и не надо. Кнопка, чекбокс, панель, слайдер - у любого фреймворка ну пусть 15-20 таких UI элементов.
Вот прямо сейчас пишу на php и использую свой css-ui со стилями.
Пока делаю его на Scss + Prepros, возможности которых в виде переменных и миксинов натолкнули меня на эту идею. Ведь для этого и делали переменные - единообразие.
Изменили шрифт у кнопки - изменился и в заголовках. Изменили цвет границы - изменился везде. Используем миксины для наследования.
Евгений Иванов, эм фигма конструктор сайтов?...
Если дизайнер правильно использует фигму, то он делает фреймы которые копируются и наследуются, т.е дизайнер меняет в одном месте, и все наследуемые элементы тоже изменились по всему проекту. Можно создать страницу брендбука (вроде так называется) где описаны все заголовки(их размеры и цвета), шрифты, кнопки(их поведение), просто цвета сайта... Отсюда уже наследуются стили к заголовкам на другие фреймах. Изменил в бренбуке, изменилось везде.
P.S Я не дизайнер, а фигму знаю только в режиме просмотра, но все же...
Средний
