АХ дизайн

АХ дизайн

@khudovadesign
Изображение канала: АХ дизайн
694 подписчика
20 постов
Посты
⚡ Новый тренд веб-дизайна 2025: «Mobile only»
Одним из трендов прошлых лет был так называемый «Mobile first» — это значит что при разработке сайта первой создавалась мобильная версия, а потом от меньшего к большему все остальные разрешения. На сегодняшний день, когда мобильных пользователей в вебе стало больше половины (62% согласно #monthly-202403-202502">statcounter.com), некоторые разработчики сайтов стали руководствоваться принципом, эволюционировавшим из «Mobile first», и называется он «Mobile only». Суть этого нового направления заключается в разработке сайта только под мобильную версию (ну и легкая адаптация под декстоп, которая почти неотличима от мобилки). Привет всем разработчикам страничек на таплинке, которые уже давно были в этом тренде 😁 А если серьезно, то посмотрите примеры сайтов «Mobile only» и вы поймете их отличительные особенности, и что разрабатывать такие сайты может только очень смелый дизайнер 🔥 Примеры: 🔸 https://www.character.studio/ 🔸 https://setki-gurov.ru/ (Сергей Гуров) 🔸 https://www.danhighbrown.com/ 🔸 https://telidchenko.ru/ (Сергей Телидченко) 🔸 https://kidzfrmnowhere.com/ #дизайн #тренды
https://content.desigram.ru/static/acb6d6eb-7cab-450f-bdc2-ca003133b2cd.jpg
🖥 Вкладки (ME602 и ME603) на всю ширину экрана
Микро модификация для того, чтобы растянуть стандартные вкладки Тильды на всю ширину экрана: 🔸 Код работает от разрешения 961рх и более, а на брейкпоинтах меньше 960рх вы устанавливаете внешний вид вкладок в настройках блока. 🔸 Код растягивает вкладки с отступами по 40рх по бокам. Если вам нужны другие отступы — поменяйте соответствующие значения в коде. #модификации #тильда
https://content.desigram.ru/static/5a17a762-52c8-492d-9be6-067e28d58752.jpg
⚡️ Как ускорить адаптацию дизайна в zero-блоках
Поделюсь парочкой своих лайфхаков, как оптимизировать процесс верстки адаптивов в zero-блоке Тильды: 🔸 Прежде всего я адаптирую сайт поблочно. Сверстала десктоп одного блока — и тут же все его мобильные версии. Таким образом, переходя к верстке следующего блока, я могу скопировать повторяющиеся элементы дизайна уже вместе с готовым адаптивом и сэкономить на этом время. Особенно актуально для заголовков или однотипных карточек. 🔸С появлением автолейаутов адаптация сложных массивов элементов стала гораздо легче. Достаточно правильно выставить настройки внутри АЛ, и можно их адаптировать только лишь изменением ширины группы. 🔸В ситуации, когда копии элементов смещаются относительно оригинала на 10рх вправо и вниз на адаптивах, я делаю следующее: растаскиваю элементы как получится, соблюдая только правильный порядок. Затем либо использую шорткаты от аннекса по выравниванию по одной стороне, либо кнопки на панели настроек справа (как на видео). И вторым шагом ставлю расстояние между объектами для упорядочивания. Здесь еще можно сбросить адаптив у элементов, но мне привычнее делать именно так 🙂 🔸Еще я использую всегда различные привязки, не только стандартный left / top. Например, привязав элемент к right / bottom, мне не нужно на каждом новом брейкпоинте его двигать в правый нижний угол — он всегда будет там стоять на своих координатах. Надеюсь, мои советы были вам полезны ☺️ Если у вас есть свои фишки по верстке адаптивов в zero-блоке — поделитесь ими в комментариях 💖 #верстка #тильда
Консультация «Фокус на себя»
Одина из глобальных проблем человечества — отсутствия фокуса на себе и своих целях. 📞Особенно у тех людей, которые публикуют рилсы про личной продуктивности. Там написали пост про очередной успех. Тут похвастались очередным обучением. Здесь опять в отпуске, отдыхает, медитирует. А этот дисциплинированно ходит в фитнес-зал. Да, все они стараются ради лайков, а не ради себя. И возможно половина — одноразка. 👿Из-за того, что контентом наполнены социальные сети, а не жизнь людей, складывается неправильное представление о собственных желаниях и личном счастье. Как будто нам говорят чего мы хотим и как нужно делать, к чему стремиться. На этом фоне появляется отсутствие фокуса, постоянные косяки, плохой сон (или вообще его отсутствие), стресс и в конечном счете непонимание всего, что происходит. Если вам: ➖Сложно переключиться на себя ➖Не удается расставить приоритеты и составить план на ближайшую перспективу (1-6 месяцев) ➖Не понять, какие у вас сильные и слабые стороны ➖Не ясно, с чего начать и что делать ➖Нужно сверить грандиозный план от инфоциган с реальностью и составить новый, свой личный новый план ⚡️То моя консультация «фокус на себе» для вас⚡️ На ней мы вместе с вами: ➕Распутаем этот клубок непонимания и составим четкий план действий по ближайшим целям с дедлайнами ➕Запишем важные детали о ваших сильных и слабых сторонах ➕Обсудим долгосрочные цели и желания и при желании, нарисовать дерево целей Работа серьезная и подходит только взрослым людям, которые осознают вклад этого времени в себя и готовы работать.👁 Время консультации: От 1,5 до 3 часов Стоимость: 5990₽ Чтобы записаться, пишите мне в личные сообщения: @Annvoin ⚡️
https://content.desigram.ru/static/b052c7a2-226c-42b4-a273-a2ff21fac605.jpg
➡️ Свои кнопки-стрелки для галереи zero-блока
Данный код дает возможность листать галерею zero-блока с помощью кнопок с собственным дизайном: 🔸 Для работы кода убедитесь, что у вас подключена библиотека jQuery (Настройки сайта → Еще → Галочка «Подключить jQuery на страницах сайта») 🔸 Кнопке для листания влево присвойте класс zero_gal_prev, для листания вправо — zero_gal_next, а галерее — zero_gal. 🔸 Если у вас на странице несколько блоков с галереями и для каждой своя пара кнопок, продублируйте код, а классы назовите соответственно по группам 🔸 Если нескольким галереям присвоить один и тот же класс, то они все будут листаться при нажатии одних и тех же кнопок. Пример необычного применения такого простого кода вы можете увидеть на странице демонстрации в моей статье. #модификации #тильда
https://content.desigram.ru/static/b39f2e91-44bc-47e9-9ae5-6549d5c28a0b.jpg
📱 Обновление Instagram
На днях Инстаграм у многих обновился, и одно из его обновлений затронуло то, как в профиле отображается лента постов. Теперь превью постов имеют не квадратное соотношение сторон, а прямоугольное вытянутое по вертикали. Если вы, также как и я, заморачиваетесь над дизайном раскладки постов, то для вас это важная новость. Примечательно то, что сами посты пока остаются тех же размеров: квадрат (условно 1080х1080 рх) и прямоугольник (1080х1280 рх). Превью же теперь с соотношением сторон 3:4 (1080х1440 рх), что очень странно на мой взгляд — не соответствует соотношению даже прямоугольных постов 🤔 «Пострадавшие» от этого обновления негодуют в сторис, и я немного в том числе 😅 Я думаю, нас ждет еще какое-то обновление — либо самих постов, либо превьюшек, но то, что мы имеем сейчас — это ад перфекциониста 🫣 Что думаете? )
https://content.desigram.ru/static/fa665d0d-44e2-45c8-93c2-c06e33567d60.jpg
☑️ Инверсия меню в Тильде
Для того, чтобы все элементы шапки инвертировались на фоне вашего сайта, а сама шапка фиксировалась при прокрутке, используйте этот код: Блоку шапки присвойте свой класс, например, uc-diff-header. Если шапку не нужно фиксировать, а просто наложить на первый блок, то замените строку position: fixed; на position: absolute; Обязательные условия, чтобы эффект сработал: ⚡️ Все элементы меню должны быть белого цвета; ⚡️ У шапки не должно быть фона; ⚡️ У каждого блока сайта должен быть задан фон, либо фон всего сайта. Примечание: т.к. свойство инверсии указывается для всего блока, то и фиксировать его над сайтом нужно именно на этом уровне, поэтому внутренние настройки зеро-блока или стандартного для фиксации могут не сработать, их можно не проставлять. P.S. Если у вас есть запросы на какие-либо модификации для Тильды — пишите мне, я постараюсь их реализовать и выложу в открытый доступ 😊 #модификации #тильда
https://content.desigram.ru/static/8077de3f-98ed-4361-a392-e9c85b14ecb1.jpg
🔥 Планы на 2025 год 🔥
Вместо поста про итоги уходящего года я поделюсь с вами своими планами на следующий (итоги у меня так себе и я подвела их сама для себя). Как многие уже знают, я ушла из школы ВВП, и соответственно там закрылись курсы по верстке и коду, для которых я писала лекции. Теперь я собираюсь самостоятельно запустить несколько образовательных продуктов в 2025 году: 1️⃣ Интенсив по дизайну — весна 2025. Давно его планировала, для него уже многое готово, осталось только записать и подготовиться к запуску. В этом недельном интенсиве я расскажу о своем методе работы над дизайном сайтов, а вы сделаете одну домашнюю работу, которую я проверю у всех участников интенсива. Запуски будут регулярными и небольшими группами. Программа интенсива рассчитана больше на начинающих дизайнеров, но подойдет и тем, кому интересно изучить мой подход. 2️⃣ Уроки по HTML и CSS для Тильды — лето 2025. Перезапуск модуля по коду курса по верстке, но с более подробной и интенсивной программой, готовыми конспектами, домашними заданиями и тестами для самопроверки. Это будет сборник лекций для самостоятельного изучения, продажи открытые (т.е. для всех), а студентам, купившим ранее модуль по коду в школе ВВП, предоставляется индивидуальная скидка. 3️⃣ Руководство по верстке на Тильде — дата выхода неизвестна. Пожалуй про этот продукт было больше всего вопросов 😅 Расскажу все подробно ) 💻 Прежде всего про формат: это будет не курс, а сборник лекций для самостоятельного изучения. Как показала практика — учить верстку в формате курса не совсем правильно, ведь верстка только часть процесса разработки, она не существует сама по себе, она идет рука об руку с дизайном. Нельзя просто так прийти на верстку и начать верстать, сначала нужен макет, а это рождает множество проблем: где взять макет для курса по верстке, а если макет не достаточно сложный, а что если он не подходит под конкретный тип верстки и т.д. В итоге я решила сделать не курс, а руководство, которое вы смотрите и практикуете тогда, когда вам надо, когда у вас уже есть реальный макет на верстку. Смотрите уроки по тому типу верстки, который вам нужен и который вам нравится, и не заставляете себя рисовать и учить тот тип, который вам не по душе. Но для вашей практики я подготовлю макеты специально для каждого типа верстки, поэтому для желающих отработать все возможные навыки верстки не будет проблем с поиском подходящего макета. 💡 Теперь о содержании: руководство будет максимально полным. Оно будет включать уроки по Тильде, начиная от знакомства с интерфейсом Тильды и заканчивая самыми сложными способами верстки в зеро-блоке. Будут уроки и по анимации, личным кабинетам, магазину и потокам. Также я запишу лекции и по новому способу верстки — Автолейауты, включая АЛ по Window контейнеру и всему артборду zero-блока, выход которых запланирован на 2025 год. Это будет принципиально новый метод верстки, пятый по счету можно сказать, и на мой взгляд единственно правильный, поэтому буду уделять ему больше всего внимания. Дата выхода данного руководства мне пока неизвестна, т.к. я буду ждать полноценного релиза Автолейаутов. Продажи руководства также будут открытые, а студентам, купившим ранее курс по верстке в школе ВВП, предоставляется индивидуальная скидка. 💖 На этом анонс окончен, если у вас есть вопросы или предложения — пишите в комментариях 😊 #обучение
https://content.desigram.ru/static/efe0457c-2e37-42c8-ba49-468907d6b61f.jpg
Как в горизонтальной zero форме переместить поле с галочкой вниз
По умолчанию горизонтальная форма в zero блоке с галочкой выглядит как на примере сверху. Но мы с вами привыкли рисовать поля формы как на примере снизу. Чтобы переместить галочку вниз, а остальные поля растянуть на оставшееся пространство, используйте этот код: 🔸 Чтобы код заработал, вставьте его в блок Т123 (или в хедер сайта без тегов Обязательно подключите библиотеку jQuery в настройках сайта. Вставлять код нужно в специальные подвал или шапку для карточки товара. Если у вас они не предусмотрены в верстке магазина, создайте пустой подвал, например, и кроме кода ничего там не размещайте (соответственно вместо поп-апа у вас будет отдельная страница товара). Внутри кода вы можете отредактировать верхний отступ табов. Если у вас есть вопросы, дайте знать в комментариях ) #модификации #тильда
https://content.desigram.ru/static/46bf8aee-9212-47ca-b933-babc6e39edf4.jpg
Библиотека «Мои блоки»
В Тильде есть такой функционал, как сохранение любого блока себе в библиотеку, которая привязана к вашему аккаунту и доступна на всех проектах. До недавнего времени я ею не пользовалась, не понимала зачем она нужна, если я каждый свой проект верстаю с нуля и их блоки не повторяются. Но сегодня меня озарило, что там можно хранить все свои коды и модификации! 🔥 Это очень удобно и просто в использовании, не надо каждый раз искать код в закладках телеграма или в архивах старых проектов. Организовать такую библиотеку можно в пару кликов, а кому не лень (как мне), тот может ещё и фирменные обложки блоков нарисовать. Ну красота же 😍 Чтобы сохранить любой блок в библиотеку, перейдите в его настройки и в самом низу будет опция 🔖 «Добавить в библиотеку» #тильда
https://content.desigram.ru/static/6dbc936f-364b-4fc6-ae8b-7a901ab3d2f2.jpg
Еще немного процесса работы над сайтом ювелирного бренда
Иногда бывает так, что прежде, чем нарисовать макет, мне нужно убедиться в том, что я смогу это реализовать на Тильде. И вот от заказчика поступает пожелание "хотим вставлять в каталог в любое место между товарами рекламные баннеры". Я сначала отказала в этой фиче, но потом решила все таки попробовать ее сверстать. (Решение с товаром в виде баннера я не рассматриваю, т.к. считаю его костыльным и неудобным в последующем администрировании каталога) Итог вы видите на скриншоте 😊 Теперь я знаю, как вставить внутрь сетки карточек (модифицированных grid'ом) баннер или любой элемент в принципе. И теперь я сдаю заказчику именно такой дизайн-макет — с баннером внутри каталога. А у вас были какие-то интересные запросы от клиента по части дизайна каталога (или чего-то еще)? Расскажите, может быть я смогу вам помочь ) P.S. Код для вставки баннера выложу однажды в открытый доступ после релиза сайта
https://content.desigram.ru/static/cd2178da-903d-4955-9662-056c64565ce7.jpg
Как выровнять текст возле галочки в zero форме
На скриншоте слева показано положение текста возле галочки по умолчанию. Справа — как я выравниваю с помощью кода, на мой взгляд так смотрится аккуратнее и привлекательнее. Примечательно, что в стандартных блоках надписи у галочек стоят как на форме справа. Код для выравнивания текста чекбоксов: Чтобы код заработал, вставьте его в блок Т123 (или в хедер сайта без тегов