Ссылки на сайты с коллекциями различного дизайна

Стили качественных дизайнов корпоративных сайтов в design.md

https://styles.refero.design/ — сайт-каталог корпоративных сайтов для каждого из которых есть описания и промты в виде design.md, Tailwind, CSS переменных и JSON токенов. Мне эта ссылка интересна не сколько описаниями для AI вёрстки, сколько тем что там собрано много качественных дизайнов с ясными превьюшками, каталогизацией и просмотром аналогичных дизайнов.

 

Успешность идеального дизайна

Очень сомневаюсь в успешности clean cook дизайна. На мой взгляд дизайн должен быть чуть неряшлив и чуть своеобразен, чтобы было ощущение человеческой руки за ним, как вязанный свитер. А не такой когда всё с иголочки как офисная рубашка, где все отступы, блоки, палитра, шрифты и картинки отточены и при это мало оригинальных ходов, то есть всё решено в рамках типичных компонентов.

Я наблюдал немало проектов-долгожителей, «рубашки» чаще стагнируют. Видел не мало продаж проектов и зачастую продаются именно «свитера». Те, которые затем редизайнили в «clean рубашки» может и получались стабильнее но заметно теряли в любви аудитории. Что при этом первично сложно сказать — ведь менялся не только дизайн но и команда.

Стоит оговориться, что про проекты без дизайнера, я не говорю. Если чувствуется что дизайнерского внимания мало, например, размеры и цвета сохранили ДНК от Bootstrap, или всё какое-то разнородное, чего и начинающий дизайнер не допустит — такой проект не оценить с этой позиции. И речь только про не вербализуемое ощущение, тут нет четкого критерия о том какой проект под это подходит.

Modyfi

Появился инструмент Modyfi https://www.modyfi.com/ Инструмент позволяет генерировать изображения из нескольких накладывающихся фильтров. Фильтров десятки, типа шум, мозаика, искажения, маска глубины.

Фильтры можно анимировать по их параметрам и этим делать моушен дизайн, что значительно проще и незатейливее чем делать подобное по старинке в After Effects. Пример с их канала:
https://youtu.be/fdz2FqTY6oE?si=W55O7CYOjLIxsU67

A Whole New Motion: Introducing Motion Effects in Modyfi

Уже есть много примеров, каждый можно изучить или переделать под свои нужны, а не делать с нуля. Из мастхэв не нашёл там псевдо-3D или работы с камерой/глубиной резкости. Пока ещё редактор регулярно виснет, но изменения не пропадают, просто приходится перезагружать страницу. Думаю, ближайшие полгода-год это всё будет бесплатным, пока все баги не выловят, а потом добавят подписку.

 

WordPress Elementor Crocoblock

Всем веб-девам рекомендую плагин CrocoBlock JetEngine:
https://crocoblock.com/plugins/jetengine/?ref=507
Это движок для кастомных типов записей (CPT) и их использованию. Имеет больше возможностей и лучше чем ACF, Toolset или Pods. По простому, это движок, который раскрепощает WP-блог в WP-любой-сайт.

Связкой WP+Elementor+JetEngine я несколько различных сайтов доводил от нуля до релиза в кратчайший срок, для проектов, которые сперва начинались на OpenCart, Drupal, на Django или Yii. Запуски новых проектов надо делать на чём-то более простом, и это в большинстве случаев это оказывается WordPress.

9avabl

Браться делать на фреймоврке сразу — это изобретать велосипед. И это совершенно не облегчает основную работу — делать красивую верстку и впечатляющий дизайн, что обязательно нужно на старте для привлечения аудитории. На фреймворк надо переходить когда вы осознали архитектуру и поняли в чём WP перестал устраивать.

Также, вместо того чтобы выбирать Tilda я всем рекомендую выбрать WordPress с плагинами Elementor и JetEngine.
Из Тильды через год вы захотите вылезти, потому что почувствуете её потолок и потому что там примитивная CMS за ощутимую стоимость. Но окажетесь в западне миграции контента.

У Crocoblock огромное коммунити на гитхабе (Pro) и на фэйсбуке (казуал), и большой зоопарк сопутствующих плагинов, которые все друг с другом дружат. Тут я об том чуть подробнее расписал: https://podhod.ru/blog/crocoblock

 

WordPress база

Иногда говорят что WordPress медленный. В WP из коробки нет кэширования и оптимизации отдаваемых страниц. Поставьте один любой плагин:

  • WP Super Cache
  • WP Fastest Cache
  • W3 Total Cache

они все примерно одинаковые.

  • А лучше всего LightSpeed Cache в связке c сервером LightSpeed на VPS.

Ещё иногда говорят что WordPress не безопасный. Это просто неправда из мира начинающих пользователей: движок популярный и неумелых установок, которые имеют проблемы больше. Просто поставьте один любой плагин:

  • Wordfence Security
  • All-In-One Security (AIOS)
  • Jetpack (я не использую за излишние функции)
  • Solid Security Basic — самый удачный на мой взгляд.

 

В чём вундерваффе?

Управлять контентом и SEO умеют многие CMS.

Делать красивые страницы из блоков и анимации умеют многие конструкторы сайтов.

Создавать и выводить данные умеют все фреймворки.

Но только у WP с Elementor и Crocoblock есть все эти возможности в единой среде.

 

Продвинутое применение

С Elementor не нужна Figma для прототипирования. Собирать страницы можно сразу в конструкторе из реальных блоков и слайдеров, с переменными цветами, правилами шрифтов, мобильными версиями и пр. То есть аналогичная простота, но на одно звено в пайплайне создания меньше — на превращение рисованного макета в вёрстку. То есть можно сразу всё кликать, реализовывать гипотезы, легко переделывать, и будут видны все проблемы на реальной странице. А когда всё устраивает, то перейти к украшательству. Посмотрите тут: https://podhod.ru/elementor

По красоте с Framer в Elementor сложно тягаться, в нём меньше направленность на анимацию и WOW-эффект. Но повторить это можно, ведь многое решается анимациями при скролле, они есть. Например, моя визитка, собрана за 3 дня:
https://podhod.com/vladimir/
Выбирая Фреймер это замыкает сайт на её неразвитую CMS и малое число платных расширений.

Но главное в WordPress с Elementor и Crocoblock — скорость работы и практичность. Опыт показывает, что сайты на этом стеке быстро уходят в релиз, долго живут, причины сменить их на другой движок не возникают.

Очень важно что новые люди WP легко осваивают. В WordPress есть роли — права редактора, не позволяют менять вёрстку сайта, испортить её, редактор может только править текст в подготовленных дизайнером-разработчиком местах и публиковать. Если дать пользователю права автора, он не сможет опубликовать, сможет только готовить черновики, которые проверит редактор. Есть плагин User Role Editor для создания дополнительных ролей, в котором можно создать любую нужную комбинацию прав.

Важно, что Google и Yandex заточены анализировать страницы на Вордпресс, а на непопулярные CMS нет. На сайте сделанном на фреймворке надо специально заниматься SEO кодом. А для сайта на WP есть несколько мощных бесплатных плагинов для помощи с SEO, которые помогают заполнить и автоматически решают все задачи видимости в поисковиках, это:

  • Yoast SEO
  • All in One SEO
  • RankMath
  • SEOPress — сейчас предпочитаю его, за отсутствие лишнего и детализацию в нужном.

И всё это касается любых сайтов: визитки, лендинги, каталоги, блоги, СМИ, объявления, интернет-магазины, бронирование, дашборды личных кабинетов. Посмотрите эти демо-сайты. Приобретя Crocoblock их можно установить к себе за минуту. У каждого в основе JetEngine: https://crocoblock.com/dynamic-templates/?ref=507