💻 Про брейкпоинты на Тильде. Чать 1: Автоскейл

В этой серии постов, состоящей из двух частей, расскажу какие брейкпоинты (сокращенно БП) я чаще всего беру при верстке на Тильде в zero блоке. Количество и значения БП у меня зависят от: 1. выбранного типа верстки; 2. конкретного дизайна; 3. и моих личных предпочтений. Про второй и третий пункт опустим, это слишком ситуативно, рассмотрим обобщенно значения БП в зависимости от типа верстки. В первой части поста расскажу про свои типовые БП для Автоскейла: 360, 640, 960 (или 980), 1200 и 1600 (или 1800). 🔸 360 Меняю стандартный 320 на 360 по нескольким причинам: ● Удобнее верстать на чуть большем экране, и в размер 360 легко ложится 4-х пиксельная сетка, по которой я рисую дизайн. ● На экране 360 соответственно все делаю чуть крупнее и благодаря этому тексты можно не мельчить и делать размером от 12рх и выше. Это важно для поисковой оптимизации сайта: если на мобильной версии шрифты меньше 12рх (если я не ошибаюсь, то именно 12рх) поисковики занижают такой сайт в выдаче. ● Для крайнего левого БП при автоскейле работает технология даунскейла — масштабирование в меньшую сторону. Поэтому БП 360 уменьшится до более маленьких экранов телефонов, и нет необходимости верстать еще и на 320. 🔸 480 убираю совсем. Горизонтальную ориентацию телефонов не рассматриваю в качестве актуального разрешения для просмотра сайтов, считаю его вымирающим форматом. В случае если заказчик настаивает на адаптивной вёрстке под такое разрешение, отказываю ему по причине низкой востребованности и невозможности технически корректно адаптировать под горизонтальный формат современных телефонов с соотношением сторон примерно 5:2. 🔸 640 Оставляю для вертикальных планшетов, верстаю этот формат как расширенную версию телефона. Не убираю этот БП, т.к. смотреть с планшета гигантский мобильный дизайн неприятно. Да, % просмотров с такого устройства очень мал, но я лично предпочитаю верстать под все адекватные форматы вне зависимости от их популярности — не зря же мой слоган это «Ювелирное качество верстки», вот я ему и соответствую 😉 🔸 960 (или 980) При необходимости сочетать zero блок с диапазонами видимости стандартных блоков меняю 960 на 980. Этот БП оставляю для горизонтальных планшетов, т.к. именно в такой ориентации с них смотрят сайты чаще всего, И так как у современных планшетов достаточно большие экраны и высокое разрешение, то верстаю под них почти что десктопную версию, но слегка упрощенную и с более крупными кликабельными элементами. 🔸 1200 БП для ноутбуков, на котором я стараюсь верстать блоки ближе к соотношению сторон 16:10 (чуть ближе к квадратному). Именно для этого БП я рисую дизайн макет. 🔸 1600 (или 1800) Ввожу дополнительный БП специально для широкоформатных мониторов, в котором я слегка меняю дизайн и композицию из предыдущего БП под соотношение сторон 16:9 или 2:1. А также подгоняю шрифты и отступы таким образом, чтобы на больших экранах они не выглядели гигантскими. 🔹 Почему я задаю последнему БП именно такие значения, а не как разрешения мониторов — 1680рх или 1920рх: Дело в том, что не редки случаи, когда браузерное окно развернуто не на весь экран, либо браузер имеет дополнительные боковые панели, уменьшающие область просмотра сайта. В таких случаях мы получаем вьюпорт не 1920рх, а, например, 1919рх, 1902рх или 1880рх. И получается, что наш БП 1920рх здесь не сработает, и будет показываться версия сайта из БП 1200, хотя смотрим мы сайт с большого монитора. По этой причине я делаю запас в значении БП для больших экранов. Для 1800 довольно большой запас выходит, но тут я специально беру такой размер, чтобы удобно было верстать этот БП на моем обычном FullHD мониторе. Продолжение про БП при резиновой вёрстке в следующем посте, а все вопросы по данной теме вы можете задать в комментариях ☺️ #тильда #автоскейл #верстка
Изображение поста

Как начать работать с цветом осознанно — и перестать подбирать палитры наугад? 🎨

Цвет в интерфейсах — это не просто «вкус» или интуиция. Это инструмент: он управляет вниманием, помогает считывать структуру, задает настроение. И влияет на то, насколько «дорого» и профессионально выглядит ваш макет. 📅 19 и 20 июня пройдет бесплатный интенсив по цвету в UX/UI. За два вечера разложим все по полочкам — от теории до практики. Что будет: ✔️ Как устроена логика цвета: контрасты, насыщенность, психология восприятия ✔️ Почему одни палитры смотрятся грязно, а другие — чисто и дорого ✔️ Приемы, которые помогут вам уверенно работать с цветом в любом проекте ✔️ Практика и обратная связь — чтобы закрепить результат ➡️ Зарегистрироваться на интенсив Реклама. ИП Кузьмин Е.Л. ИНН: 634502641730, erid: 2VtzqvifrKx
Изображение поста

Привет я Менеджер Рекламного Кабинета WB

📎 Категории товаров: ✅Одежда / Электроника / Дом / Текстиль / Огород / Сезонка / БАДЫ / ЕДА 💰Успехи: 🔋Занимаюсь именно продвижением товаров / кабинетов на ВБ через внутреннюю рекламу. Ведением рекламы на ВБ. 🔋В ТОП по собственной методике / которая хорошо работает. Есть кейсы ▪️О менеджере 🕹️Работаю более 3х лет с ВБ и Ozon 🕹️Увеличиваю продажи за счет внутренней рекламы 🕹️Удаленно ▪️Какого селлера ищу 🛢Ваш товар более менее массовый 🧯Ваш товар в рынке по категории по цене продажи 🔋У вас уже есть обороты на ВБ 🔋Готовы на долгосрочное сотрудничесво 🔋С вероятностью 90% смогу точно помочь вашим карточкам и заберу все работы по рекламе на себя. 📍 📍Пишите в ТГ / присылайте ссылку на карточку / сразу проанализирую @akravtsov
Изображение поста

👩‍💻 Дизайнеры, внимание!

Ищете ресурсы, чтобы ускорить свою работу и повысить качество проектов? Мы нашли для вас топовые каналы с полезными материалами: Макеты сайтов Figma актуальные макеты для верстки. Экономьте время с готовыми решениями. Шаблоны презентаций Power Point — множество готовых шаблонов для создания презентаций. Шаблоны постов и сторис — графические шаблоны для соц. сетей: Instagram, Вконтакте, Facebook, YouTube, Linkedin и других. Шрифты лучшие шрифты для любых проектов. Скачивайте прямо с канала. Логотипы — высококачественные векторные логотипы, легко редактируемые и масштабируемые. Архив Pro Дизайнера — архив всех файлов. Не тратьте часы на поиск нужных материалов. Подписывайтесь на каналы и получайте всё необходимое для работы и творчества! 🗂 Добавить папку с каналами 🗂
Привет я Менеджер Рекламного Кабинета WB
📎 Категории товаров: ✅Одежда / Электроника / Дом / Текстиль / Огород / Сезонка / БАДЫ / ЕДА 💰Успехи: 🔋Занимаюсь именно продвижением товаров / кабинетов на ВБ через внутреннюю рекламу. Ведением рекламы на ВБ. 🔋В ТОП по собственной методике / которая хорошо работает. Есть кейсы ▪️О менеджере 🕹️Работаю более 3х лет с ВБ и Ozon 🕹️Увеличиваю продажи за счет внутренней рекламы 🕹️Удаленно ▪️Какого селлера ищу 🛢Ваш товар более менее массовый 🧯Ваш товар в рынке по категории по цене продажи 🔋У вас уже есть обороты на ВБ 🔋Готовы на долгосрочное сотрудничесво 🔋С вероятностью 90% смогу точно помочь вашим карточкам и заберу все работы по рекламе на себя. 📍 📍Пишите в ТГ / присылайте ссылку на карточку / сразу проанализирую @akravtsov
Изображение поста
Создавайте себя, свою жизнь, свое будущее.
Начните с малого. Сделайте первый шаг. И сегодня мы поделимся возможностью, которая может стать таким первым шагом для многих из вас. Особенно для тех, кто любит творчество и мечтает о свободе. Речь о бесплатном курсе по дизайну от Yudaev School. Это не просто обучение - это погружение в профессию с поддержкой опытных наставников. За 5 дней вы создадите 4 работы в портфолио, освоите Figma, научитесь основам анимации интерфейсов. Но самое главное - вы получите четкое понимание, как превратить это в профессию. Как найти первых клиентов, как оформить портфолио, как начать зарабатывать. Если вы чувствуете, что пора что-то менять в своей жизни - начните с этого курса. Это бесплатно, это онлайн, и это может стать началом вашего нового пути. Регистрируйтесь — https://clck.ru/3MczBG
Изображение поста
Создавайте себя, свою жизнь, свое будущее.
Начните с малого. Сделайте первый шаг. И сегодня мы поделимся возможностью, которая может стать таким первым шагом для многих из вас. Особенно для тех, кто любит творчество и мечтает о свободе. Речь о бесплатном курсе по дизайну от Yudaev School. Это не просто обучение - это погружение в профессию с поддержкой опытных наставников. За 5 дней вы создадите 4 работы в портфолио, освоите Figma, научитесь основам анимации интерфейсов. Но самое главное - вы получите четкое понимание, как превратить это в профессию. Как найти первых клиентов, как оформить портфолио, как начать зарабатывать. Если вы чувствуете, что пора что-то менять в своей жизни - начните с этого курса. Это бесплатно, это онлайн, и это может стать началом вашего нового пути. Регистрируйтесь — https://clck.ru/3MczBG">https://clck.ru/3MczBG
Изображение поста
Сегодня в рубрике #НеймингШмейминг в честь Международного дня суши сервис доставки суши и роллов
Изображение поста
Создавайте себя, свою жизнь, свое будущее.
Начните с малого. Сделайте первый шаг. И сегодня мы поделимся возможностью, которая может стать таким первым шагом для многих из вас. Особенно для тех, кто любит творчество и мечтает о свободе. Речь о бесплатном курсе по дизайну от Yudaev School. Это не просто обучение - это погружение в профессию с поддержкой опытных наставников. За 5 дней вы создадите 4 работы в портфолио, освоите Figma, научитесь основам анимации интерфейсов. Но самое главное - вы получите четкое понимание, как превратить это в профессию. Как найти первых клиентов, как оформить портфолио, как начать зарабатывать. Если вы чувствуете, что пора что-то менять в своей жизни - начните с этого курса. Это бесплатно, это онлайн, и это может стать началом вашего нового пути. Регистрируйтесь — https://clck.ru/3MczMD
Изображение поста
Magic Face Retouching
Пресет Photoshop для ретуши лица. 🦄 Скачать: t.me/mokaposhnayazip/850
Ретро-футуризм в работе студентки курса «Моушн-дизайнер» Лены Астровой.
Анимация выполнена по брифу телеканала 2х2. → У студентов BBE есть возможность познакомиться с представителями классных брендов еще на этапе обучения. Присоединяйтесь к комьюнити школы!