Горячее
Лучшее
Свежее
Подписки
Сообщества
Блоги
Эксперты
Войти
Забыли пароль?
или продолжите с
Создать аккаунт
Регистрируясь, я даю согласие на обработку данных и условия почтовых рассылок.
или
Восстановление пароля
Восстановление пароля
Получить код в Telegram
Войти с Яндекс ID Войти через VK ID
ПромокодыРаботаКурсыРекламаИгрыПополнение Steam
Пикабу Игры +1000 бесплатных онлайн игр Динамичная карточный батл с онлайн-сражениями PvP и PvE. Соберите коллекцию уникальных карточных героев, создайте мощную боевую колоду и бросьте вызов другим игрокам со всего мира.

Cards out!

Карточные, Ролевые, Стратегии

Играть

Топ прошлой недели

  • solenakrivetka solenakrivetka 7 постов
  • Animalrescueed Animalrescueed 53 поста
  • ia.panorama ia.panorama 12 постов
Посмотреть весь топ

Лучшие посты недели

Рассылка Пикабу: отправляем самые рейтинговые материалы за 7 дней 🔥

Нажимая «Подписаться», я даю согласие на обработку данных и условия почтовых рассылок.

Спасибо, что подписались!
Пожалуйста, проверьте почту 😊

Помощь Кодекс Пикабу Команда Пикабу Моб. приложение
Правила соцсети О рекомендациях О компании
Промокоды Биг Гик Промокоды Lamoda Промокоды МВидео Промокоды Яндекс Маркет Промокоды Пятерочка Промокоды Aroma Butik Промокоды Яндекс Путешествия Промокоды Яндекс Еда Постила Футбол сегодня
0 просмотренных постов скрыто
tablepedia

Концепция сайта-десятистраничника с PDF файлами⁠⁠9

10 месяцев назад

Предлагаю обсудить концепцию сайта-десятистраничника (для общественников, учёных и предпринимателей), на котором большая часть информации представлена в PDF файлах. Удобство данного формата состоит в том, что, например, общественник может создать PDF файл, в котором выражено его мнение относительно недавних событий (например, создание мемкоина Trump), а для аргументации он может объединить свой файл с другими (например, в режиме онлайн с помощью combinepdf.com ).

Пока что я предлагаю следующую концепцию:

1. На сайте-десятистраничнике 10 HTML файлов (то есть страниц), каждый из которых имеет меню в верхней части. Например, фон большей части сайта может быть белым, а меню может быть жёлтым.

2. При обновлении сайта допускается оставлять "старые" страницы в формате HTML, но доступ к ним возможен, например, только со страницы "Архив". Желательно, чтобы "старых" страниц было не больше 10.

3. Каждая страница сайта напоминает блог, где каждый "пост" имеет дату, заголовок и текст. Возможны ссылки на PDF файлы и публикации в социальных сетях. Также возможно размещение картинки (фотографии).

4. Возможно наличие страницы "Архив", где можно посмотреть не только "старые" страницы, но и скачать ZIP архив с картинками и документами PDF.

5. HTML и PDF файлы предназначены главным образом для просмотра на смартфоне. Рекомендуемый шрифт - Arial 18.

Если вас интересует конкретный сайт, соответствующий концепции сайта-десятистраничника, то предлагаю посмотреть tablepedia.com (ниже - два скриншота на смартфоне, просмотр через Yandex Browser). Приветствуется конструктивная критика.

Архив - <!--noindex--><a href="https://pikabu.ru/story/kontseptsiya_saytadesyatistranichnika_s_pdf_faylami_12274463?u=https%3A%2F%2Ftablepedia.com%2Farchive.html&t=https%3A%2F%2Ftablepedia.com%2Farchive.html&h=7e7bd9fa736a8fbb2a8a5527a587ca18a34c9a8e" title="https://tablepedia.com/archive.html" target="_blank" rel="nofollow noopener">https://tablepedia.com/archive.html</a><!--/noindex-->

Архив - https://tablepedia.com/archive.html

Биографии - <!--noindex--><a href="https://pikabu.ru/story/kontseptsiya_saytadesyatistranichnika_s_pdf_faylami_12274463?u=https%3A%2F%2Ftablepedia.com%2Fbio.html&t=https%3A%2F%2Ftablepedia.com%2Fbio.html&h=17dd45f520236194b73c028de6da1903cd9a955f" title="https://tablepedia.com/bio.html" target="_blank" rel="nofollow noopener">https://tablepedia.com/bio.html</a><!--/noindex-->

Биографии - https://tablepedia.com/bio.html

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

Показать полностью 2
[моё] Сайт Программа Гайд Приложение Инди Разработка Тестирование Яндекс Pdf Смартфон Android Концепция Исследования Вопрос HTML Zip файл Отзыв Лендинг Сайт визитка Архив Длиннопост Волна постов
6
4
Neurosonya
Neurosonya
Полезные нейросети
Серия Полезность

Нейросеть для генерации сайтов⁠⁠

11 месяцев назад
Перейти к видео

Хороший и удобно настраиваемый инструмент для создания сайтов я не заслуженно обошла вниманием. Это классный инструмент, в том числе, и как помощь веб-дизайнеру. Relume сделает сайт по вашему промту. Это не совсем стандартный AI сервис для создания сайтов, он сначала создает карту сайта, контент для каждого раздела генерирует ИИ. Вы просто описываете, что хотите получить, и сервис быстро выдаст макет, который вы можете отредактировать по своему вкусу, каждую страницу. Например, поменять иконки или загрузить свои изображения. Отлично создает лендинг с нуля и понимает русский язык *.

* Больше проверенных сервисов, как использовать ChatGPT для своих задач и правильно составлять промпты и многое другое -  в Закрытом сообществе Нейроучеба.

Что крутого в Relume:

  • Интуитивно понятный интерфейс

  • Результат можно экспортировать в Adobe Illustrator, Figma и Webflow

  • Можно каждую страницу отредактировать на сайте с помощью ИИ

  • Может сгенерировать многостраничный сайт

  • Использует предварительно разработанные макеты

Что можно сделать бесплатно в Relume:

  • 1 проект - одностраничный сайт, которым можно поделиться ссылкой или выгрузить в Figma

  • Доступно 30 компонентов Webflow, 30 компонентов React и более 1000 компонентов Figma

Хорошее подспорье для веб-дизайнера. Про другие нейросети для создания сайта рассказала в своем телеграм канале.

Подпишитесь на НейроProfit и узнайте, как можно использовать нейросети для бизнеса, учебы и работы, не теряя свое время.

Показать полностью
[моё] Искусственный интеллект Нейронные сети Сайт Бизнес Веб-дизайн Полезное Технологии Дизайнер Лендинг Малый бизнес Фриланс Предпринимательство Видео Без звука
3
8
Neurosonya
Neurosonya
Искусственный интеллект
Серия Полезность

AI сервисы для создания сайта⁠⁠

11 месяцев назад
1/2

Научиться создавать крутые изображения https://neuralprofit.ru/

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

  • Relume сделает сайт по вашему промту. Вы просто описываете, что хотите получить, и сервис быстро выдаст макет, который вы можете отредактировать по своему вкусу, каждую страницу. Например, поменять иконки или загрузить свои изображения. Отлично создает лендинг с нуля и понимает русский язык.

  • Soloist — бесплатный сайт от Mozilla, отличный вариант для первого сайта, и если лень самому заморачиваться в Tilda, делала на него обзор в своем телеграм канале. Сайт генерируя буквально секунд за 20, можно самому все отредактирвоать - кнопки, надписи, блоки, все понятно и просто

  • Framer  конструктор сайтов с искусственным интеллектом, удобный редактор, встроенная CMS, готовые шаблоны, база картинок, готовые цветовые решения и т.п.

  • Coframe - это копирайтер, фронтенд-разработчик и UX-исследователь, ии-дизайнер. Вставляете адрес своего сайта, затем сервис предоставит развернутые советы с метриками.

  • Dorik AI Website Builder - отличный помощник, когда нужно сделать сайт, который легко поправить, например, добавить свои картинки или немного отредактировать текст. Легко настроить настроить ссылки на кнопки и т.д. Идеальный вариант для первого сайта, все очень легко настроить.

  • Screenshot to code - способен сделать сайты по макетам и скриншотам. Более того, если вам понравился чужой сайт, вы можете сделать скрин любой страницы и загрузить в сервис. Взамен вы получаете HTML/Tailwind/JS код. Без знания кода и навыков в дизайне вот так можно создать собственный сайт, вернее копию понравившегося сайта.

Про каждый сервис отдельно я рассказывала в своем телеграм канале:

Подпишитесь на НейроProfit и узнайте, как можно использовать нейросети для бизнеса, учебы и работы, не теряя свое время.

Показать полностью 2
[моё] Сайт Искусственный интеллект Веб-дизайн Полезное Технологии Подборка Сервис Помощь Скриншот Лендинг Бизнес Фриланс Midjourney Картинки
0
oshvin
oshvin

Как Тильда ограничивает дизайнера в создании сайта⁠⁠

1 год назад
Перейти к видео

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

1. Safari не переварит >15 экранов на Тильде

Тильда начинает тормозить на устройствах Apple после 14-16 уникальных блоков (зероблоков) с графикой, Интересное ограничение, вызванное движком именно Safari, чаще всего проявляется на iPhone, iPad, на макбуках проблем меньше. В Chrome на Windows, Android такой проблемы нет.

Источник проблемы не совсем ясен, однако всегда в Safari виден фрейм, который долго грузит javascript и на его работу может уходить до 6-8 секунд до отображения сайта.

Лечение пока только одно - попросить команду маркетинга не выставлять ТЗ на сайты более 12-14 экранов. Также можно поставить прелоадер, но вряд ли кто-то будет ждать 6-8 секунд до частичной загрузки сайта.

2. Тильда сжимает не все картинки

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

Картинки в зероблоках нужно оптимизировать самостоятельно и сайт даже на 6-10 экранов с неоптимизированными картинками может загружаться вечность.

Еще странный момент в том, что самостоятельно загрузить максимально оптимизированные картинки в формате Webp на Тильду нельзя. Просто нельзя и все.

3. Для работы с Тильдой не нужно знать код

Хотите, чтобы текст в формах был больше? Или удобные раскрывающиеся списки?

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

4. Страницы в Тильде не копируются 1 в 1

Если скопировать страницу, полностью сделанную из уникальных блоков - она не будет точно такой же, как оригинал. Могут слететь цвета, отступы, выделения и все это придется поправлять, перед тем как наполнять страницу.

Довольно неудобно, однако на правки редко уходит много времени.

5. Вставка из Фигмы в Тильду работает кое-как

С этим, пожалуй, сталкивался каждый дизайнер, поэтому этот совет разве что для начинающих специалистов или заказчиков.

Если вы тешите себя надеждой, что из Фигмы можно будет быстро перенести информацию в Тильду - отриньте ее. Даже если правильно разметить блоки, на перенос 10-экранного лендинга в Тильду со всем набором разрешений уйдет как минимум день.

6. Сайты на Тильде не бывают Pixel Perfect

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

Однако, в целом, сайты остаются адекватными для просмотра. Просто при желании придраться - такая возможность будет. Не рай для перфекциониста, короче.

7. На Тильду нельзя “натянуть” любой макет

Если есть желание делать быстрые сайты на Тильде - лучше работать с дизайнером, который на ней специализируется и имеет опыт хотя бы в 20-30 сделанных сайтов.

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

В итоге

Да, как и любой инструмент - Тильда не идеальна. Однако, за эту неделю я сделала на ней 3 лендинга и 1 магазин с уникальным дизайном для 2 маркетинговых команд.

Скорость - именно за это Тильду любят и уважают. Это когда сегодня возникла идея, а уже послезавтра уникальный, красивый сайт с анимацией уже принимает заявки. И в этом у Тильды для российского рынка аналогов нет.

С вами была Александра Ошвин, UX/UI/Web дизайнер, подписывайтесь если хотите узнавать больше о дизайне, Тильде и продажах.

Показать полностью 7
Маркетинг Дизайн Бизнес Дизайнер Тильда Сайт Лендинг Веб-дизайн Фриланс Видео Без звука Telegram (ссылка) Длиннопост
11
6
Neurosonya
Neurosonya
Полезные нейросети
Серия Midjourney

Готовые промты для создания дизайна сайтов, с помощью Midjourney⁠⁠

1 год назад

Ребят, обычно выкладываю посты сначала в телеграм, затем сюда. Вот этот человек украл мой пост https://t.me/NeuralProfit/1126, который я разместила ранее, и сделал вот эту статью, почистив мои вотермарки Готовые промты для создания дизайна сайтов, с помощью Midjourney

Но он не учел, что так как это мои генерации, то на сайте Midjjourney они остались, я засняла видео экрана и пролистала, в доказательство, уверена, этого вот этот человек https://pikabu.ru/@a4u.su сделать не сможет:

Перейти к видео

Так что не ведитесь на картинки ужасного качества, после того, как "предприниматель" воспользовался стиранием вотермарок. Кстати, так как я генерю на платном тарифе, то изображения принадлежат мне, а это уже нарушение авторских прав.

Промт для сайта модной одежды:

modern website landing page for a fashion boutique, vibrant colors, sleek and stylish design, white and gold color scheme --ar 9:16

Промт для сайта агентства недвижимости:

full page of a contemporary real estate agency website, inspired by top designs on Behance and Dribbble, blue and white color scheme, UI/UX focused --ar 9:16 --v 6.1

Промт для сайта спортивного питания:

professional website for a sports nutrition store, UI/UX optimized, website, landing page::5 orange and black, white accents:3 clean, modern layout, high-quality graphics, professional design::-2 --v 5.2

Промт для сайта экологической косметики:

eco-friendly website landing page for an organic cosmetic brand, earthy tones, green and beige colors, modern and clean UI/UX design --ar 9:16 --v 6.0

Хотите узнавать о полезных сервисах с искусственным интеллектом для работы, учебы и облегчения жизни? Подпиcывайтесь на телеграм канал НейроProfit, там я рассказываю, как можно использовать нейросети для бизнеса.

Показать полностью 5 1
[моё] Полезное Искусственный интеллект Нейронные сети Midjourney Авторские права Арты нейросетей Маркетинг Сайт Лендинг Бизнес Малый бизнес Предпринимательство Дизайнер Дизайн Технологии Видео Длиннопост
3
12
Neurosonya
Neurosonya
Полезные нейросети
Серия Полезность

Бесплатный сайт от Mozilla⁠⁠

1 год назад
Перейти к видео

Mozilla создала ии-сервис Soloist, который сам генерит сайты

Для примера я взяла условный магазин крафтого пива в Москве. Можете посмотреть на результат https://soloist.ai/craftworld

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

Далее будет предложен шрифт на выбор - их тут 30 штук,  и цвета. Что мне сразу понравилось, можно выбрать, какие блоки включить в сайт, помимо тех, что включены по умолчанию -шапка и подвал. Можно даже видео включить.

Генерится сайт секунд 15-20, далее предлагается внести свои настройки в сайт,  добавить новый текст, фотографии, откорректировать цвета или дополнительные разделы.

Сам сервис просит перепроверить содержимое сайта перед публикацией и предупреждает, что ИИ может допускать ошибки.

Интуитивно простой сервис, просто нажимая на блок, можно его отредактировать. В одном блоке пришлось заменить язык на русский, картинки тоже без проблем можно поменять, добавить свои фото и лого. Легко менять язык кнопок. Все ссылки на кнопках настроены. Можно подключить домен. Даже крутые SEO фичи встроены.

В общем, для тех, кому лень заморачиваться в Tilda. Кстати, там так же можно убрать надпись “Made with…” заплатив. Мне сервис понравился, бесплатно и просто можно создать сайт для начала. Хотите узнавать о полезных сервисах с искусственным интеллектом для работы, учебы и облегчения жизни? Подпиcывайтесь на телеграм канал НейроProfit, там я рассказываю, как можно использовать нейросети для бизнеса.

Показать полностью
[моё] Полезное Искусственный интеллект Нейронные сети Сайт Инновации Бизнес Малый бизнес Предпринимательство Дизайнер Технологии Дизайн Лендинг Создание сайта Фриланс Видео
4
oshvin
oshvin

Для каких сайтов подходит Тильда, а для каких точно нет?⁠⁠

1 год назад

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

Перейти к видео

Дисклеймер. Стоит понимать, что при обращении в студию, которая делает только сайты на Тильде - вам сделают на Тильде даже сложный сайт, однако поддерживать его будет, мягко скажем, сложно.

Тильда в общих чертах

Плюсы

  • Быстро и удобно. Можно собрать что-то простое из готовых блоков за час.

  • Zero block. Можно создать уникальный дизайн самостоятельно или с помощью специалиста. Даже с интересной анимацией.

  • Дешево. Тестируйте идеи всего от 500 руб/мес.

Минусы

  • Стандартных блоков не то чтобы много. Сайты, созданные на готовых блоках часто смотрятся как дешевая копипаста

  • Сложную анимацию не сделать, возможности по ручной оптимизации кода очень ограничены

  • Самое главное: сайты, созданные на Zero block, легко рассыпаются при значительном редактировании контента. Каждый раз дизайнера дергать - дорого.

Так какие виды сайтов стоит делать на Тильде?

1. Промосайт - стоит делать.

Перейти к видео

В галерее Тильды полно промосайтов по 2-10 страниц, которые выглядят клево, быстро грузятся, имеют симпатичную анимацию. Однако, стоит понимать, что какую-либо сложную функциональность вроде подбора квартир на генплане придется или с трудом колхозить, или вообще не подключать.

2. Лендинг - точно стоит.

Перейти к видео

В моей практике десятки компаний используют Тильду для быстрой сборки лендингов для отделов маркетинга, обкатки новых идей и так далее. Стоит помнить, что без дизайнера индивидуальные блоки (zero block) менять будет трудно.

3. Сайт визитка - 50/50.

Перейти к видео

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

4. Небольшой интернет-магазин.

Перейти к видео

Источник: arsvivendi.hermitageshop.ru

Если вы не знаете и не хотите знать что такое рекомендательные системы, не хотите работать над конверсией карточки товара, не интересует индивидуализация карточки - можно выбрать Тильду. То есть условный магазин мерча на 5-30 товаров можно собрать на Тильде за день и радоваться жизни.

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

Какие сайты не стоит делать на Тильде?

  1. Корпоративные сайты. Если нужно часто менять информацию в уникальном сайте - Тильда не подходит, поскольку редактировать ее каждый раз нужно через графическую часть. Нет такого, что просто зашел, поменял текст в поле CMS и все заработало.

  2. Интернет-магазины с >50 товаров. Тильда имеет крайне ограниченный, не расширяемый функционал интернет-магазина. Его достаточно для старта, однако совершенно недостаточно для быстрого развития. Стоит выбрать Opencart, если средств мало, а свободного времени - много. Или 1С Битрикс, если не нужны проблемы.

  3. Порталы. Недостаточно функций, сложности в редактировании контента и так далее.

  4. Сайты с количеством страниц >30. Просто нет смысла - неудобно в редактировании, обновлении информации, дизайна. На поддержку за год уйдет больше денег, чем на 2 сайта на Wordpress.

  5. Сайты с уникальными техническими требованиями. Вряд ли у вас получится подцепить скрипт с нейросетью на 1 экран, товары по API на второй, модуль поддержки на третий и так далее. Короче, если вам нужно нечто по-настоящему уникальное в плане интеграций или сложной анимации - это не к Тильде.

А что в итоге?

Тильда - шикарный инструмент для бизнеса, если:

  • Вы только начинаете бизнес, открываете стартап

  • Вы работаете в одиночку и вам нужен простой сайт-портфолио или визитка

  • Нужно сделать сайт быстро, а средства ограничены

  • Нужно быстро и часто проверять маркетинговые идеи

  • Нужен красивый промосайт в ограниченные сроки

Для всего остального без функциональности магазина - есть Wordpress. Для магазинов - Opencart и 1С Битрикс. НекроCMS или системы управления, не популярные в России, использовать не стоит - есть риск потратить на поиск разрабочика и решение проблем больше времени, чем на сам бизнес.

UPD:

С вами была Александра Ошвин, UX/UI/Web дизайнер, подписывайтесь если хотите узнавать больше о дизайне, Тильде и продажах.

Показать полностью 4
Маркетинг Бизнес Дизайн Креатив Стартап Сайт Лендинг Тильда Стиль Видео Без звука Длиннопост Яндекс Дзен (ссылка)
1
0
oshvin
oshvin

Актуальные стили дизайна сайтов в 2024 году. С моими примерами дизайна агентства Руки Роботы⁠⁠

1 год назад

По делу и профессионально о трендовых стилях 24г. С моими примерами и подробным пояснением. Какие стили рекомендовать заказчикам, чтобы не остаться за бортом. И даже писала не нейросеть.

Скажу сразу, речь пойдет о трендовых стилях. Какой-либо брутализм, где скрепка из Экселя 2003 года люто охотится за пакманом - рассматривать не буду, поскольку это старо как мир и подойдет не всем. Хотя иногда это бывает красиво и очень даже уместно.

Перейти к видео

В ряде своих работ я предлагаю сразу несколько вариантов стилей для первого экрана сайта, особенно если заказчик согласен оплатить весь этот праздник. В этой статье - показываю варианты на примере дизайна для контент-агентства “Руки роботы” в дополнение к вариантам “из интернетов”.

Источник: <a href="https://pikabu.ru/story/aktualnyie_stili_dizayna_saytov_v_2024_godu_s_moimi_primerami_dizayna_agentstva_ruki_robotyi_11616801?u=https%3A%2F%2Fa-dapttraining.com%2Fai-demo%2F&t=A-dapttraining&h=71180d65e1c8de68c6bb607f61597c4afe21c106" title="https://a-dapttraining.com/ai-demo/" target="_blank" rel="nofollow noopener">A-dapttraining</a>

Источник: A-dapttraining

Сайт, подготовленный нейросетями или использующий нейросети (AI-Generated Content and Imagery)

Нейросеть пока не заменила меня, но уже с легкостью заменяет иллюстратора. Сидим пару дней в нейросетях, собираем картинки, чуть-чуть оформляем. Вуаля - дизайн готов. Стилем это можно назвать тогда, когда пользователь явственно видит, что контент подготовлен нейросетями. Это уровень “лайт”.

Уровень “про” - это когда нейросети встроены в сайт таким образом, что реально помогают пользователю закрыть запрос. Это может быть:

  • Видеочат с нейросетью, которая не хуже живого куска мяса отвечает на запрос

  • Панель поиска, в которую можно ввести запрос и получить исчерпывающий ответ: что, почем, когда сделают

  • Нейросеть, которая что-то делает. Например, закидываешь ей план помещения, стиль и в ответ получаешь расстановку мебели, базовый дизайн-проект и КП на подробный дизайн человеком.

Минус уровня “про” - “дораха”. И смысл есть далеко не всегда .

Почему этот стиль на первом месте? Потому что хайп на него велик, а что из него останется спустя 10 лет - решит только время. Одно можно сказать точно: сайты постепенно переходят из состояния статики и “обратитесь по телефону” в динамику и быстрый ответ на запрос.

Источник: <a href="https://pikabu.ru/story/aktualnyie_stili_dizayna_saytov_v_2024_godu_s_moimi_primerami_dizayna_agentstva_ruki_robotyi_11616801?u=https%3A%2F%2Fdribbble.com%2Fshots%2F20391790-Ecommerce-Website-UI-for-Gen-Z&t=Dribble&h=b16f5dada0ac36accfc88ea7e4afaca8b1c7e3ce" title="https://dribbble.com/shots/20391790-Ecommerce-Website-UI-for-Gen-Z" target="_blank" rel="nofollow noopener">Dribble</a>

Источник: Dribble

Зумер-стайл (Gen Z style)

Представьте себе поколение людей, которые выросли с телефоном вместо правой руки. На котором каждые 10 секунд меняется картинка. Представили? Нет? Ладно, понимаю, это просто невозможно, нужно самому быть таким, чтобы это понять.

И вот этим самым людям надо как-то продавать, потому что именно в их руках уже сконцентрирована большая денежная масса. И компании, которые обратили внимание на поколение Z или выпустили для них отдельные продукты - конкретно так в плюсе.

Что использовать?

  • Видео, анимации как способ донести контент

  • Интерактивные сервисы, зумеры не любят ждать

  • Модную, современную графику

  • Эмоджи, сленг, шутки

  • Кейсы, отзывы других зумеров в видеоформате

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

Перейти к видео

Источник: Amazon's


Максимализм

Мода - как качели. Только вчера все пищали от минимализма, сегодня же на сцену под фанфары вылетает максимализм.

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

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

Источник: <a href="https://pikabu.ru/story/aktualnyie_stili_dizayna_saytov_v_2024_godu_s_moimi_primerami_dizayna_agentstva_ruki_robotyi_11616801?u=https%3A%2F%2Fwww.ilabsolutions.it%2F&t=Personal%20portfolio%20of%20ILab%20with%20techno%20centerpiece&h=8639ee473def8e4e49d83f77e4fb9b2eee6d6340" title="https://www.ilabsolutions.it/" target="_blank" rel="nofollow noopener">Personal portfolio of ILab with techno centerpiece</a>

Источник: Personal portfolio of ILab with techno centerpiece

Сторителлинг в жанрах техно и научной фантастики (Techno and Sci-Fi Storytelling Experiences)

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

Добавьте к техно-картинке интересную историю, много анимации и ваш продукт будут отрывать с руками. Штука только в том, что такой сторителлинг вряд ли сделать силами одного дизайнера или даже небольшой команды. Отсюда и ограничения - долго, дорого, сложно кодить и дебажить. Но если сделать - окупится 99%.

Вариант дизайна <a href="https://pikabu.ru/story/aktualnyie_stili_dizayna_saytov_v_2024_godu_s_moimi_primerami_dizayna_agentstva_ruki_robotyi_11616801?u=https%3A%2F%2Frukiroboty.ru%2F&t=%D0%A0%D1%83%D0%BA%D0%B8%20%D1%80%D0%BE%D0%B1%D0%BE%D1%82%D1%8B&h=08113070eb387ebf03aa6d22045d5c547107fb82" title="https://rukiroboty.ru/" target="_blank" rel="nofollow noopener">Руки роботы</a>

Вариант дизайна Руки роботы

Дизайн с акцентом на типографику (Typographic design)

Стилю стотыщ лет, однако в 2024 году все еще видишь множество сайтов с акцентом на типографику от топовых агентств. Существенное отличие от 2022/2023 - появление малого количества акцентных 3D анимаций и увеличение количества анимаций в принципе.

Игры со шрифтами все еще актуальны, так как они позволяют создать узнаваемый и запоминающийся образ сайта.

Перейти к видео

Источник: scrib3.co

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

Не будьте как они, выбирайте стиль ниже.

Вариант дизайна <a href="https://pikabu.ru/story/aktualnyie_stili_dizayna_saytov_v_2024_godu_s_moimi_primerami_dizayna_agentstva_ruki_robotyi_11616801?u=https%3A%2F%2Frukiroboty.ru%2F&t=%D0%A0%D1%83%D0%BA%D0%B8%20%D1%80%D0%BE%D0%B1%D0%BE%D1%82%D1%8B&h=08113070eb387ebf03aa6d22045d5c547107fb82" title="https://rukiroboty.ru/" target="_blank" rel="nofollow noopener">Руки роботы</a>

Вариант дизайна Руки роботы

Параллакс (Parallax Scrolling)

Параллакс еще древнее, чем дизайн с акцентом на типографику и веб еще помнит, как много лет назад некоторые дизайнеры делали 30-50 экранные сайты, которые с помощью параллакса рассказывали целые истории.

В 2024 параллакс переживает новый ренессанс. Почему? Он не так сложен как хитрая JS анимация, не так забагован и, в целом, его применение не сложно, однако - красиво и недорого. Последнее в умах заказчиков часто играет чуть ли не самую важную роль.

Перейти к видео

Источник: The parallax-based Story of Goonies

Для тех, кто забыл - эффекты параллакса предполагают, что фон веб-сайта движется с другой скоростью, чем передний план. Это создает иллюзию глубины, создавая эффект искусственного 3D при прокрутке.

Перейти к видео

Источник: goodweird.com

Эстетика 2000-х (Y2K)

Про Y2K активно заговорили на рубеже 22-23 годов и, по сути, это отсылка к ностальжи по 2000 году. В основе: яркие цвета, металлические текстуры, изображения-наклейки, пиксельные шрифты и футуризм, каким его понимали в двухтысячных. Ну и анимация конечно: бегущие строки, мигающие штуки, гифки.

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

Слабо представляю применение этого стиля где-либо, кроме промо-сайтов или сайтов мероприятий, технологических новинок.

Перейти к видео

Источник: experimentbeauty.com


Ретро-воскрешение (The retro resurrection)

Уважаемый и приятный стиль, сочетание ностальжи и современности. Радует тем, что передает настроение, теплоту, характер дизайну, в отличие от набившего оскомину “Clean & Minimal”.

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

Выбранный заказчиком дизайн <a href="https://pikabu.ru/story/aktualnyie_stili_dizayna_saytov_v_2024_godu_s_moimi_primerami_dizayna_agentstva_ruki_robotyi_11616801?u=https%3A%2F%2Frukiroboty.ru%2F&t=%D0%A0%D1%83%D0%BA%D0%B8%20%D1%80%D0%BE%D0%B1%D0%BE%D1%82%D1%8B&h=08113070eb387ebf03aa6d22045d5c547107fb82" title="https://rukiroboty.ru/" target="_blank" rel="nofollow noopener">Руки роботы</a>

Выбранный заказчиком дизайн Руки роботы

Микро анимация и анимация шрифтов (Micro animation, font animation)

Если из “дизайна с акцентом на типографику” убрать картинки, 3D анимации и оставить только текст - получится вот это. Анимируем сам текст, кнопки, слайдеры, выпадающие меню, добавляем кучу микро-взаимодействий. На этом, в общем, все.

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

Вариант дизайна <a href="https://pikabu.ru/story/aktualnyie_stili_dizayna_saytov_v_2024_godu_s_moimi_primerami_dizayna_agentstva_ruki_robotyi_11616801?u=https%3A%2F%2Frukiroboty.ru%2F&t=%D0%BA%D0%BE%D0%BD%D1%82%D0%B5%D0%BD%D1%82-%D1%81%D1%82%D1%83%D0%B4%D0%B8%D0%B8%20%D0%A0%D1%83%D0%BA%D0%B8%20%D1%80%D0%BE%D0%B1%D0%BE%D1%82%D1%8B&h=1ce35f88f60491b504ab7d7dae8b7792fe28822a" title="https://rukiroboty.ru/" target="_blank" rel="nofollow noopener">контент-студии Руки роботы</a>

Вариант дизайна контент-студии Руки роботы

Бенто (Bento)

Бенто - японское понятие про еду в коробочке, разделенной на отсеки. Активно популяризировать бенто-дизайн начала MS, а за ней - Apple, которая представляет преимущества своих продуктов на сайте именно в таком формате.

Это эстетично, привлекает внимание на счет четкого деления на блоки, функционально, если задаться целью набить блоки чем-то полезным. Однако, мне видится что разумно использовать бенто для части блоков сайта, поскольку иначе получится Windows Mobile со своими плитками, а она не взлетела.

Источник:<a href="https://pikabu.ru/story/aktualnyie_stili_dizayna_saytov_v_2024_godu_s_moimi_primerami_dizayna_agentstva_ruki_robotyi_11616801?u=https%3A%2F%2Featfishwife.com%2F&t=eatfishwife.com&h=b47923ba18285aca6aa1242ee53fbf55429007a2" title="https://eatfishwife.com/" target="_blank" rel="nofollow noopener"> eatfishwife.com</a>

Источник: eatfishwife.com

Возрождение (Heritage revivalism)

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

Использовать надо орнаменты, мелкие детали стилей барокко и рококо 17-18вв, томно лежащих женщин и мужчин, отображающих лень натуры, которой доступно все.

Еще можно вспомнить арт-деко, викторианские мотивы и неоновые палитры современности. Короче, погуляйте по галереям - поймете о чем я.

Я, после изучения трендов

Я, после изучения трендов

В итоге

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

Контент-агентство Руки Роботы, работы для которого фигурируют в этой статье время от времени выбрало смешение стилей максимализма и анимации шрифтов. Мне понравилось работать с ними и главное - им понравился результат. Круто, когда у тебя развязаны руки и ты можешь экспериментировать в разных стилях, а заказчик может провести быстрый опрос ЦА на предмет что им заходит.

Напоследок, хочу опубликовать пару обращений.

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

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

С вами была Александра Ошвин, UX/UI/Web дизайнер, подписывайтесь если хотите узнавать больше о дизайне, Тильде и продажах.

Показать полностью 10 5
Дизайн Маркетинг Дизайнер Бизнес Креатив Лендинг Стиль Веб-дизайн Видео Без звука Telegram (ссылка) Длиннопост
2
Посты не найдены
О нас
О Пикабу Контакты Реклама Сообщить об ошибке Сообщить о нарушении законодательства Отзывы и предложения Новости Пикабу Мобильное приложение RSS
Информация
Помощь Кодекс Пикабу Команда Пикабу Конфиденциальность Правила соцсети О рекомендациях О компании
Наши проекты
Блоги Работа Промокоды Игры Курсы
Партнёры
Промокоды Биг Гик Промокоды Lamoda Промокоды Мвидео Промокоды Яндекс Маркет Промокоды Пятерочка Промокоды Aroma Butik Промокоды Яндекс Путешествия Промокоды Яндекс Еда Постила Футбол сегодня
На информационном ресурсе Pikabu.ru применяются рекомендательные технологии