2763
🚀Все о Tilda и дизайне, обновления, лайфхаки. ✅Неофициальное сообщество. 📝Tilda чат: @tildaformschat 🗣Реклама: @litvinov27
Подсветка элементов на линейках
При выборе элемента его размер подсвечивается на линейках. Можно увидеть точные координаты по осям Х и Y, что сделает работу с элементами более удобной. Работает с одним и несколькими элементами, и с группами.
Как включить линейки: Zero Block Settings → Show Rulers.
Zero Block - фиксируем на странице
#обновление
📌Если вам нравится нестандартное расположение элементов с фиксированным меню сайта, то теперь вы сможете это сделать. Надо лишь зафиксировать на странице нулевой блок.
✅Это можно сделать снизу и сверху страницы.
К тому же, у вас также получится настроить появление, спустя Х пикселей, в графе «APPEAR OFFSET». В этом случае вам будут доступны два варианта появления анимации – «Slide uh\down» и «Fade in». Остается лишь выбрать один из них.
Такая функция пригодится, если вы захотите, чтобы шапка на сайте появлялась через пару скроллов, а не сразу.
👉Для того, чтобы настроить фиксацию, зайдите в Settings, а следом в Position and Overflow.
Особенности веб-дизайна в ЮАР
#веб_дизайн_в_мире
🇿🇦Одной из особенностей веб-дизайна в Африке является возвращение к простоте и минимализму, как в дизайне, так и в функциональности. Веб-сайты и приложения обычно имеют простую и интуитивно понятную навигацию, легкий доступ к информации и быстрый доступ к необходимым функциям. Это связано с тем, что многие пользователи на континенте используют мобильные устройства со слабым интернет-соединением.
🔸Еще одной особенностью веб-дизайна в Африке является использование местных традиций и символов в оформлении сайтов и приложений. Например, африканские народы используют специфические символы, паттерны в своих народных ремеслах и культурных традициях, которые могут быть включены в дизайн сайтов и приложений.
🔸Один из главных трендов африканского веб-дизайна - это использование ярких цветов, которые отражают местную культуру и природу континента. Это позволяет создать яркий и запоминающийся образ, который привлекает внимание пользователей.
🔸Еще одна важная особенность - это адаптивный дизайн, который позволяет оптимизировать сайт или приложение для использования на разных устройствах и разных разрешениях экранов. Это особенно важно для мобильных устройств, которые являются наиболее распространенными среди пользователей в Африке.
🔸Еще один тренд - это использование локальных шрифтов и языковых символов, таких как алфавит национальных языков. Это помогает передать местный колорит и дать ощущение принадлежности к конкретной культуре.
Африканские сайты:
1) Правительственный сайт
2) Сайт национального банка ЮАР
3) Сайт Кейптаунского университета
4) Интернет-магазин
5) Автомобильный интернет-магазин
6) Студия веб-дизайна
Расскажите, какие элементы вы бы использовали в своем дизайне.
Принципы подбора шрифтовой пары
#шрифты
В статье приведен перевод работы американского дизайнера Дугласа Бонневиля о том, как правильно комбинировать шрифты и на что нужно обращать внимание при подборе шрифтовой пары.
🔹Измените размер шрифтов, чтобы создать контраст. Различный размер поможет подчеркнуть иерархию и визуальную важность каждого элемента.
🔹Избегайте выбора двух одинаковых стилей шрифтов для создания пары. Но если выбранные шрифты имеют значительные отличия друг от друга, то нарушение этого правила может быть оправданным.
🔹Сочетайте шрифты с засечками и без них, чтобы создать контраст вместо единства. Помните, что более явный контраст между стилями шрифтов приведет к более удачному результату. Однако не стоит считать это правило абсолютной истиной. Главное - избегать выбора слишком похожих шрифтов. Чтобы понять, насколько это важно, можно попробовать сочетание Garamond и Sabon или Helvetica и Univers - это примеры неудачных пар.
🔹Не используйте шрифты из одной категории, например, два рукописных или два брусковых шрифта. Такое сочетание не создаст достаточного контраста, а только вызовет конфликт между шрифтами. Например, Clarendon и Rockwell не сочетаются.
🔹Ищите шрифты из разных категорий, но с схожей высотой строчных букв и шириной глифов. Например, Futura не подходит к Times New Roman из-за значительного отличия ширины глифов. Если вы работаете с узкими шрифтами, большой контраст между шрифтами может решить эту проблему.
🔹Определите конкретные функции для каждого из шрифтов и используйте их соответственно на протяжении всего проекта.
Какие правила используете вы?
#важно
⚡️Сайты на доменах reg.ru «прилегли отдохнуть».
Проблема массовая. Ждем комментариев от представителей reg.ru.
Отключите платный трафик, если таковой имеется.
Особенности швейцарского веб-дизайна
#веб_дизайн_в_мире
🇨🇭Веб-дизайн в Швейцарии славится своей чистотой, минимализмом и точностью. Швейцарский стиль в дизайне, также известный как Школа Базеля, вдохновлен простотой и функциональностью, а также традиционным швейцарским качеством.
👉 Одной из особенностей швейцарского стиля является использование геометрических форм и простых линий, что создает чистый и минималистичный внешний вид. Шрифты также играют важную роль в швейцарском дизайне - они должны быть четкими и легко читаемыми.
👉 Еще одна особенность швейцарского стиля - это фокус на функциональности и удобстве использования. Дизайнеры стремятся создавать удобный пользовательский интерфейс, который позволит легко найти нужную информацию и быстро осуществить действие.
👉 Кроме того, швейцарский дизайн славится своим качеством и детализацией. Дизайнеры внимательно следят за каждой деталью, от цветовой гаммы до расположения элементов на странице. Это создает чувство роскоши и престижа, что особенно важно для швейцарских брендов.
👉 Швейцарский стиль используется в различных отраслях, от моды до архитектуры. В веб-дизайне он проявляется в виде чистых и удобных сайтов с простым и элегантным дизайном. Также в швейцарском дизайне часто используется монохромная цветовая гамма, которая добавляет сайту элегантности и стильности.
В целом, швейцарский дизайн отличается своей точностью, чистотой и минимализмом. Он славится своей функциональностью и удобством использования, а также качеством и вниманием к деталям. Если вы хотите создать сайт в швейцарском стиле, то стоит обратить внимание на геометрические формы, простые линии, четкие шрифты и монохромную цветовую гамму.
Швейцарские сайты:
1) Новостной портал
2) Новостной сайт
3) Национальный медиапортал
4) Туристический сайт
5) Грузоперевозки и логистика
Вам нравится швейцарский стиль в дизайне? Расскажите, какие элементы вы бы использовали в своем дизайне.
Линейки в Zero Block
#обновление
Теперь работа над дизайном блока стала более удобной. Для этого вам всего лишь над включить линейки в Нулевом блоке и достать из них направляющие.
📌Линейки – это горизонтальная (вверху) и вертикальная (с левого края) линии экрана. Они нужны для того, чтобы измерить размер макета. Это делается с шагом 10 пикселей.
Для того, чтобы увидеть линейки, вам необходимо перейти в настройки, которые находятся внутри Zero Block и далее – в Show Rulers.
👉Если вы хотите задать необходимое расположение элементов в макете, сохранять пропорции и размеры элементов, следить за выравниванием и отступами, то в этом вам помогут направляющие и линейки.
В боковой панели навигации и шапке редактора добавлена функция изменения порядка страниц и папок внутри проекта, а также порядка собственных проектов
#for_testers
📌Для перемещения страницы нужно ее зажать и перетащить на нужное место. Если требуется переместить несколько страниц, нужно выделить их, зажав Cmd/Ctrl для выбора конкретных страниц или Shift для выбора страниц, идущих подряд, и переместить их на нужное место. Для перемещения папок и проектов применяются аналогичные действия.
Боковая панель находится в левом верхнем углу и представлена значком волн.
Тенденции маркетинга, которые стоит учитывать при разработке сайта
#интересно
Маркетинг - это процесс позиционирования продукта на рынке и привлечения внимания потенциальных покупателей. Каждый год тенденции в маркетинге меняются, и то, что было популярным в прошлом году, может уже не работать в следующем. Поэтому, разработчикам сайтов следует быть в курсе новых тенденций в маркетинге и адаптироваться к ним.
👉Переход к цифровым каналам продвижения
Большинство компаний, особенно в свете последних событий, ориентируются на онлайн-продажи и поисковую оптимизацию. Разработчикам сайтов следует учитывать эти изменения, чтобы создать оптимизированный и максимально эффективный сайт для своих клиентов.
👉Персонализация
Компании все больше понимают, что клиенты ждут индивидуального подхода и персонализированных предложений. Разработчики сайтов могут помочь компаниям в этом, создавая сайты с персонализированным контентом и функционалом, учитывая личные предпочтения и поведение пользователей на сайте.
👉Использование новых технологий
С каждым годом технологии становятся все более доступными и продвинутыми, и компании начинают их все больше использовать для продвижения своих продуктов и услуг. Разработчикам сайтов следует быть в курсе новых технологий, чтобы создавать современные и привлекательные сайты, использующие все возможности технологий.
👉Уделять больше внимания взаимодействию с клиентами
Компании все больше осознают, что долгосрочные отношения с клиентами являются ключевым фактором успеха. Разработчикам сайтов следует уделять больше внимания функциям, которые позволят клиентам взаимодействовать с компанией.
Какие тенденции вы считаете более важными?
Шрифт Tilda Sans открыт для всех 🥳
Tilda Sans — фирменный вариативный шрифт Тильды. Он был создан в конце 2021 и доступен только для пользователей платформы. С сегодняшнего дня любой человек может скачать Tilda Sans бесплатно и использовать в любых, даже коммерческих проектах. Рассказываем о шрифте подробнее.
Скачать шрифт и познакомиться с ним подробнее — https://tilda.cc/ru/lp/tildasans
А вы используете Tilda Sans в своих проектах? Поделитесь в комментариях 💭
⚫️ Скругление шейпа за угол
Чтобы скруглить шейп, потяните за точку в правом нижнем углу элемента. Точная настройка скругления в цифрах также доступна в настройках элемента.
⚫️ Фиксация Zero block на странице
Теперь вы можете зафиксировать нулевой блок на странице. Это позволит, например, создать фиксированное меню с нестандартным расположением элементов. Его можно зафиксировать сверху или снизу страницы, а также настроить появление спустя Х пикселей (Appear Offset). В этом случае доступна настройка одного из двух вариантов анимации появления — Fade in или Slide up/down.
Где найти: Artboard Settings → Position and Overflow.
Редактирование дизайна страницы регистрации и авторизации в Личном кабинете (Members)
#for_testers
С обновлением Личного кабинета (Members) появилась возможность более гибко настраивать дизайн страницы регистрации и авторизации для пользователей, которым предоставляется доступ к курсам или личному кабинету. Теперь доступно два стиля отображения формы: форма в две колонки и форма по центру.
✅Форма в две колонки
Форма в две колонки представляет собой красивый новый дизайн страницы, где форма для заполнения данных располагается с одной стороны, а с другой стороны - изображение, градиент или цвет.
Этот стиль позволяет настроить ширину колонок в процентах, разместить форму справа или слева на экране, а также задать настройки для подложки формы - цвет, тень и радиус скругления. Отдельно для формы регистрации можно добавить текст, например, о согласии с политикой конфиденциальности компании.
✅Форма по центру
Форма по центру - это привычное расположение формы, которое ранее было в Тильде, но теперь с детальными настройками. Теперь можно настроить ширину формы, выравнивание самой формы и контента в ней, отступы по горизонтали и вертикали, тень и радиус скругления подложки, а также текст под формой регистрации.
Для обоих типов форм доступны настройки фонового изображения для фона и самой формы, типографика, стили полей для ввода и кнопки. Эти возможности позволяют сделать страницу регистрации и авторизации более привлекательной и удобной для пользователей.
📌Как найти страницу?
🔹Перейдите в "Настройки личного кабинета".
🔹Откройте "Настройки страницы регистрации и авторизации".
Как вам такое обновление?
📣Напоминаем вам о нашем конкурсе на #лучшийсайт
Присылайте свои любимые работы на платформе Tilda на голосование в сообщения этого аккаунта @golosovalkinnatilda. Команада экспертов нашего чата выберет 10 интересных проектов. А вы решите, чья работа станет лучшей в специальном опросе.
Победитель получит месячную подписку в Телеграмм Premium 🎉
Конкурс продлится до 6 апреля.
Ручное позиционирование фонового изображения в шейпах
При добавлении изображения на страницу с помощью шейпов, вы можете вручную настроить позицию изображения. Это позволяет более быстро и гибко работать с макетом блока, если стандартные варианты позиционирования не подходят.
Когда размер шейпа указан в пикселях, настраивается точное позиционирование фонового изображения заднего фона. Если размер шейпа указан в процентах, то настраивается «фокус». Это часть изображения, которая будет видна при растягивании шейпа на разных экранах.
Где найти: Выберите элемент Shape → Background image → Position → Edit.
Принципы подбора шрифтовой пары
#шрифты
Продолжаем говорить о сочетании разных шрифтов.
🔹Не забудьте проверить, как выглядит курсив. Использование жирного и обычного шрифтов вместе может создать отличную шрифтовую пару, но сочетание курсивов может нарушить композицию.
🔹Найдите сочетание, которое вам нравится, и изучите, почему оно работает. Интернет поможет вам получить новые знания для создания гармоничных шрифтовых пар.
🔹Выбирайте качественные известные шрифты. Бесплатные или дешевые шрифты могут не содержать важных глифов. Это важно учитывать заранее.
🔹Используйте два семейства шрифтов, но в рамках каждого семейства применяйте разные начертания и стили. Так вы получите восемь шрифтов: нормальный, полужирный, курсив и полужирный курсив для каждого семейства. Если вам нужен третий шрифт, выберите достаточно уникальный и используйте его ограниченно, например, только в заголовке журнала или логотипе. Если вы используете три или более шрифта, это может быть излишне.
🔹Слишком разные шрифты могут не подойти для больших объемов текста, но хорошо работать в логотипе или небольшом тексте. Попробуйте посмотреть, как шрифты будут выглядеть в зависимости от объема текста. Вы заметите, что при разном объеме индивидуальные черты шрифтов выделяются или наоборот становятся менее заметными.
🔹Изучайте классические шрифты самостоятельно. Распечатайте их и рассматривайте в свободное время. Когда вы достаточно хорошо разберетесь в классических шрифтах, подумайте, как они сочетаются с другими шрифтами. Это поможет вам в дальнейшей работе.
🔹Попробуйте найти шрифты из разных категорий с похожей высотой строчных букв и схожей шириной глифов.
Какие правила используете вы?
Владельцам сайтов: изменения в законе о персональных данных
Владельцы сайтов, которые размещают на сайте формы обратной связи, используют системы аналитики, собирают номера телефонов, адреса электронной почты и другую информацию посетителей, обрабатывают персональные данные.
С 1 сентября 2022 года, а также с 1 марта 2023 вступили в силу поправки в закон № 152 «О персональных данных». Никита Володин, консультант компании Б-152, рассказывает, что нужно сделать владельцам сайтов, чтобы организовать сбор и обработку персональных данных и не нарушить новые требования закона 👉 https://tilda.education/articles-personal-data-law
Навигация по страницам в редакторе теперь удобнее благодаря новой функции в хедере
#обновление
🔹Вы сможете перемещаться между страницами проекта с помощью выпадающего списка в шапке редактора.
🔹Там же вы сможете переименовать текущую страницу, добавить новую или перейти к настройкам любой из страниц.
🔹Если вам нужно изменить порядок страниц, просто перетащите их на нужное место.
🔹Когда в проекте накапливается много страниц, вы можете воспользоваться поиском, чтобы быстро найти нужную.
Как вам новое обновление?
#важно
Проблема на стороне защиты от DDoS-атак решена. Сайты должны работать в обычном режиме.
Настройка дизайна страницы регистрации, прикрепление файлов и шапка и подвал в Личных кабинетах (Members)
#обновление
👉 Новые функции для упрощения работы с Личными кабинетами и Курсами:
1️⃣ Настройка дизайна страницы регистрации и авторизации.
Теперь в Личных кабинетах (Members) доступна более гибкая настройка дизайна страницы регистрации и авторизации для тех, кому вы предоставляете доступ к Курсам. Вы можете выбрать один из двух стилей отображения формы - в две колонки или по центру, а также настроить фоновое изображение, типографику, стили полей ввода и кнопки.
Чтобы изменить дизайн, пройдите в Личный кабинет → Настройки личного кабинета → Настройки страницы регистрации и авторизации.
2️⃣ Прикрепление файлов в домашнем задании, сохранение в удобном для вас облачном хранилище.
Это позволит сохранять файлы в удобном для вас облачном хранилище, таком как Google Drive, Dropbox, Яндекс. Диск, Selectel и другие.
Для корректной работы этой функции необходимо указать ключ для Tilda Upload Widget в настройках курса.
3️⃣ Добавление шапки и подвала для страниц со списком групп и курсов и для списка лекций.
Теперь вы можете добавлять заголовок и нижний колонтитул на страницы со списком курсов и групп, а также на страницу списка лекций. Это очень удобно, особенно если у вас много контента и нужно облегчить навигацию для пользователей.
Чтобы установить заголовок и нижний колонтитул на странице, перейдите в Настройки личного кабинета → Настройки проекта → Выберите соответствующие элементы.
💡 Используйте эти новые функции, чтобы улучшить взаимодействие с вашими студентами и облегчить им процесс обучения.
🫂 Комнатам в чате быть!
Мы создали 5 комнат:
🎛 Настройка Tilda
💬 Оцените сайт
📈 Продвижение на Tilda
📷 Интеграции на Tilda
👤 Ищу специалиста
🤟 Какие задачи мы хотим решить при помощи отдельных комнат:
0. Создание комфортных условий для масштабирования чата;
1. Точечное обсуждение конкретных задач участников чата;
2. Больший порядок в чатах;
3. База знаний по конкретным направлениям (настройки, продвижения, интеграции);
4. Появление новых активных участников чата;
5. В будущем создание новых комнат под актуальные задачи;
6. Telegram развивает направление чатов и комнат, значит их команда видит ценность в этом инструменте.
🤌 Какие минусы данного подхода:
1. Необходимо отвязать чат от основного канала (ограничение Telegram)
2. Возможно, оттолкнет некоторых участников. Не все готовы принимать изменения.
🦾 Миссия нашей команды:
Создание дружелюбного комьюнити для совместного роста и развития платформы Tilda.
Вы с нами 🫶?
Создаем квиз на Тильде
#польза
🧐Для начала разберемся, что такое квиз. Квиз – это анкета на вашем сайте, которая повышает конверсию. Она дает возможность узнать, что именно хочет потенциальный клиент. Благодаря этой функции, он получает уникальное предложение.
👉Плюсы квиза
🔹Квиз снижает стоимость каждого лида. То есть, подобный формат опроса клиента повышает его вовлеченность. Посетитель сайта точно оставит свой контакт после прохождения анкеты.
🔹Квиз помогает собрать больше лидов из новых источников, благодаря размещению ссылки на него в различных социальных сетях.
🔹Квиз увеличивает вероятность покупки товара или заказа услуги клиентом, из-за предложения, которое подходит под потребности конкретного потребителя.
Квиз экономит время менеджеров. Они будут тратить меньше времени, чтобы понять, что именно хочет клиент.
💻⚙Создаем квиз
🔸Из категории «Форма», выбираем блок «Пошаговая форма» BF919. Если хотите, чтобы квиз показывался клиентам во всплывающем окне, тогда выбирайте «Поп-ап: пошаговая форма» BF920.
🔸Выбираем количество и тип предполагаемых вопросов. Настраиваем поля и публикуем.
🔸После того, как клиент пройдет квиз, он оставит свой контакт. Его вы сможете увидеть в CRM в разделе «Заявки».
🔸Подготавливаем индивидуальное предложение для посетителя сайта, связываемся с ним и делаем оффер.
Было полезно?
#референсы
🔹Если вы думали, что создать продающий сайт из четырёх блоков и трёх фото невозможно, то вы не видели этот сайт. Это тот случай, когда дизайн идеально сочитается с фотографиями.
🔹Пролистав этот сайт, вам захочется купить себе перчатки, даже если они вам не нужны. Отличное применение 3D анимации.
🔹Если вы любите заморочится с анимацией, то вам точно понравится этот сайт. Большое количество приятных анимаций, которые стоило бы взять на заметку.
🔹Устали от белого фона на сайте и хочется добавить больше цветов с анимациями? Вам точно поможет этот сайт.
Вдохновитесь подборкой интересного дизайна!
Особенности корейского веб-дизайна
#веб_дизайн_в_мире
🇰🇷Корейский веб-дизайн известен своей инновационной и прогрессивной эстетикой. Его особенности заключаются в использовании ярких цветов, графических элементов и нестандартных типографических решений.
✔️Одной из главных тенденций корейского веб-дизайна является анимация. Анимированные элементы на сайте помогают привлечь внимание пользователя и создать более динамичный интерфейс. Кроме того, такая анимация может помочь в визуализации иллюстраций, диаграмм и других данных.
✔️Еще одна тенденция корейского веб-дизайна – это использование градиентов. Градиенты могут быть использованы как на фоне сайта, так и в текстовых блоках, чтобы создать интересный визуальный эффект. В последнее время корейские дизайнеры начали экспериментировать с необычными градиентами, которые создают эффект объема и движения.
✔️Еще одной характерной чертой корейского веб-дизайна является уделяемое внимание типографике. Корейцы используют не только различные шрифты, но и часто играют с их размером, расположением и цветом, чтобы создать более выразительный текст.
✔️Наконец, одной из особенностей корейского веб-дизайна является использование ярких и необычных цветовых решений. Часто дизайнеры создают сайты, которые вызывают яркие эмоции и чувства. Такой подход помогает создавать уникальные и запоминающиеся впечатления у пользователей.
В целом, корейский веб-дизайн характеризуется яркой и экспериментальной эстетикой. Корейские дизайнеры не боятся использовать новые технологии и идеи, чтобы создавать уникальные веб-сайты, которые привлекают внимание пользователей.
Корейские сайты:
1. Крупнейший нтернет-портал и поисковая система Южной Кореи
2. Правительственный портал министерства культуры
3. Социальная сеть
4. Сайт крупнейшей теле- и радиовещательной сети
5. Интернет-магазин
6. Магазин одежды
⚫️ Изменение шрифта для полей ввода текста (input) в формах
Доступна смена шрифта в полях ввода данных в формах.
Где найти: Form Settings → Form Style → Input Font Family.
⚫️ Групповое редактирование анимации
Теперь можно выделить несколько элементов или групп и применить к ним базовую или пошаговую анимацию.
⚫️ Настройка параметра анимации Trigger Offset для разных разрешений экранов
Настраивайте количество пикселей проскролла для старта анимации (параметр Triger Offset) отдельно для каждого разрешения экрана.
Где найти: Step-by-step Animation → Trigger offset.
⚫️ Выключение звука у видео с автоматическим проигрыванием
Для элемента Video при автоматическом проигрывании звук ролика будет отключен. Настройку нельзя изменить, так как большая часть современных браузеров не допускает автоплей со звуком.
⚫️ Линейки
Вы можете включить линейки и «достать» из них направляющие для более удобной работы над макетом блока.
Где найти: Zero Block Settings → Show Rulers.
Компания Pepsi решила сменить свой логотип, впервые за 15 лет
#новости_мира_дизайна
Новый логотип, который представили в конце марта, больше похож на тот, что использовала компания с 1987 по 1997 годы. Он имеет круглую форму, в центре которой располагается надпись Pepsi, в отличие от предыдущей версии, где она находилась сбоку. Шрифт и цвета также были изменены, чтобы передать энергию и уверенность бренда.
Предыдущий логотип использовался с 2008 года, но компания считает, что новая версия более соответствует современным трендам и настроению потребителей. В Северной Америке новый логотип начнут использовать с осени 2023 года, а в остальном мире — с 2024 года.
Ждем реакцию поклонников Pepsi на обновленный брендинг.
На Tilda появились собственный почтовый сервер и общие настройки шрифта и цветов для Личного кабинета (Members)
#обновление
В личных кабинетах теперь используются шрифт и цвета из общих настроек проекта.
Как изменить шрифт и цвет?
🔹Перейдите в Настройки сайта.
🔹Откройте Шрифты и цвета.
🔹Чтобы изменения применились, необходимо зайти в административную панель личных кабинетов, данные обновятся автоматически.
Еще появилась возможность добавить собственный почтовый сервер. Разработчики рекомендует использовать его, если вы планируете отправку более 500 писем в час.
Как включить почтовый сервер?
🔹Перейдите в Личный кабинет (Members).
🔹Откройте Настройки личного кабинета.
🔹Настройки почтового сервера.
🔹Выберите в списке Почтовый сервер.