↗️ Веб-дизайн с нуля

Я знаю, что в канале много ребят, кто хочет зайти в дизайн, но пока не понимает, с чего начать. Хочется в креативную профессию, желательно без кода, с понятным входом и нормальной практикой, а не просто посмотреть лекции и потом самому пытаться собрать это в систему. У Нетологии как раз стартанула программа «Веб-дизайнер» 20 марта. Она рассчитана на новичков, так что можно зайти вообще без опыта в дизайне и без знания кода. Учат Figma, Tilda, композиции, UX, адаптивам, а на расширенных программах еще дают 3D, анимацию, HTML/CSS и нейросети. 👍 Почему полезно Есть интерактивный Figma тренажер с обратной связью, проекты в портфолио на основе кейсов от МТС, Lamoda и ВсеИнструменты.ру, плюс можно собрать до 11 работ. То есть на выходе будет не только теория, но и что реально показать работодателю или клиенту. Еще нормальный плюс, что после учебы не оставляют один на один с рынком. Помогают с резюме, карьерным планом, откликами и собеседованиями, проводят эфиры с HR и поддерживают еще 12 месяцев после окончания курса. 💎 Преподаватели Тут тоже не случайные люди, а ребята из сильных продуктовых и агентских команд. Например, Олег Зильберг, дизайн-директор AGIMA. Андрей Верёвкин, Lead Designer в Газпромбанке. Сева Шапошников, Digital Growth Designer в Miro. Ярослав Трегубов, продуктовый дизайнер hh.ru. Плюс есть эксперты из Ubisoft, Mish.design, AFFINAGE, MateÇa и других компаний. В общем, учить будут те, кто сам каждый день работает с реальными продуктами и клиентскими задачами. 🎤 По формату тоже ок: все онлайн, можно совмещать с работой, занятия проходят до 2 раз в неделю после 19:00 мск. По длительности есть 3 варианта, на 6, 12 или 14 месяцев, в зависимости от того, насколько глубоко хотите зайти. И да, по промокоду NETONEW10 в марте действует дополнительная скидка 10% на эту или другую программу Если давно хотели в веб-дизайн, но все откладывали, вот вполне понятная точка входа. 🔠 Влиться в веб-дизайн 🔠 Влиться в веб-дизайн 🔠 Влиться в веб-дизайн
Изображение поста

♿ 40-60% интерфейса Moni требует доработки для незрячих пользователей, но большинство проблем не сложные

Незрячий разработчик разобрал доступность web3-проекта Moni. Доступность в финтех и web3 редко рассматривается как обязательная часть архитектуры. Внимание уделяется визуальной составляющей, а сценарии использования без мыши или без экрана остаются вне фокуса. Выяснил: примерно 40-60% интерфейса требует доработки с точки зрения accessibility. Большинство проблем не архитектурно сложные, это вопросы корректного использования aria-атрибутов, логичной структуры заголовков и поддержки клавиатурной навигации. Внутри: – Кнопки без описания: под полем «Check account» должна быть кнопка поиска, но есть элемент "По щелчку" без описания; – Заголовки на каждой строке: неудобно слушать текст, когда каждая строка это заголовок уровня 1 или 2; – Таблицы представлены кнопками: столбцы это кнопки, нет нормальной HTML-таблицы с table, tr, th, td; – Слияние строк без пробелов: «Ethereum$395.790.1 ETH100%+0%», «L117.62%-1.93%», «Smarts244+1»; – Курсор не попадает в модальные окна: после клика по «Manage filters» курсор не переходит к настройкам; – Поиск недоступен с клавиатуры: ввел HYPE, что-то появилось на экране, но с клавиатуры не смог поймать и перейти; – Кнопки навигации без названий: первая и последняя в постраничной навигации неподписанные, лучше «First» и «Last»; – Решения простые: использовать aria-label=«Name» у элементов, tabindex=-1 и .focus в JS для фиксации курсора, разделять блоки h2 и h3 заголовками. ➡️ Читать статью ——— 💻 Курс по поиску работы 😍 Про дизайн 🔥 Вакансии дизайнерам 🎨 Референсы
Изображение поста

Ребята из 01.tech ищут Middle+/Senior Product Designer

Ищут специалиста с продуктовым мышлением, вкусом и амбициями задавать уровень в iGaming и за его пределами. 📢 Что ожидают: - Более 3 лет опыта на аналогичной позиции и портфолио с продуктовыми кейсами; - Практический опыт с User Story, CJM, JTBD, качественными и количественными исследованиями; - Понимание HTML/CSS и JS; - Использование AI-инструментов для ускорения работы; - Плюсом будет умение в анимацию; - Плюсом будет интерес к крипте. 😍 Что предлагают: - Удаленку из любой точки мира; - Конкурентную заработную плату; - Английский, профильное обучение, компенсацию спорта и психолога; - Нескучную корпоративную культуру: киберспорт и воркшопы; - Реальное влияние на UX-стратегию продуктов холдинга; - Свободу принимать решения и тестировать гипотезы; - Среду, где можно расти быстрее через ответственность и сильную команду рядом. 🔠 Откликнуться в боте 🔠 Откликнуться в боте 🔠 Откликнуться в боте
Изображение поста

Junior+ IT-Project Manager в WIM.Agency

WIM.Agency — агентство CRM-маркетинга. Наши клиенты: Яндекс.Плюс, Додо Пицца, Перекресток и другие классные проекты. Задачи: — настраивать сценарии и цепочки коммуникаций в Bloomreach: уточнять требования, проводить тесты и валидацию — формировать ТЗ для разработки — вести коммуникацию с клиентом — тестировать результаты, следить за качеством, готовить отчётность Ожидания: — проживание вне РФ — опыт работы Project Manager в IT от 1 года — опыт с Bloomreach или другими CDP/ESP — умение ставить задачи разработчикам, понимание ролей в IT‑команде — понимание CJM, веб‑аналитики и логики интерфейсов — базовое знание HTML/CSS — приветствуется опыт с AI‑инструментами — английский B2 Условия: — опыт работы с международным рынком и крупными брендами — официальный контракт с первого дня, зарплата в USD — удалёнка 5/2, график 9:00–18:00 по мск — 4 дополнительных дня отдыха в год Контакт для отклика: e.likhotina@wim.agency
Изображение поста
Marka Email Generator
Плагин генерирует HTML шаблон электронного письма из выбранного фрейма. Install
Изображение поста
🎯 Какие навыки реально нужны продуктовому дизайнеру в 2025
Каждый лид скажет своё: один требует исследования, другой сильный UI, третий «аналитический склад ума». А что на самом деле пишут в вакансиях? Я вот честно не особо вникал, пока не увидел эту статью. Илья Чирков из 2ГИС проанализировал 100 вакансий от 68 компаний: Яндекс, ВК, Сбер, Т-Банк и другие. Вытащил все требования, посчитал частотность и составил рейтинг. Топ хардов: проектирование, исследования, контроль разработки, аналитика, Figma. Но есть нюанс: сильный UI упоминается только в 20% вакансий, при этом слабый визуал часто становится причиной отказа. Внутри: – Пять главных хард-скиллов с разбором, как их качать; – Три ключевых софта: коммуникация, аргументация, проактивность; – Должен ли дизайнер проводить исследования; – Почему знание основ HTML и CSS всё ещё актуально. Вы когда последний раз смотрели детально, что там пишут в ваках в целом?)) ➡️ Читать статью ——— 💻 Курс по поиску работы 😍 Про дизайн 🔥 Вакансии дизайнерам 🎨 Референсы
Изображение поста
CRM-маркетолог middle в WIM.Agency
Задачи: — сегментация клиентских баз, внедрение персонализированных коммуникаций — настройка цепочек и массовых рассылок — сбор аналитики отправок, построение дашбордов и выводы для оптимизации — проведение А/Б тестов для повышения эффективности рассылок — взаимодействие с поддержкой ESP/CDP по вопросам реализации и проблемам Ожидания: — опыт работы с базами данных, базовый SQL — опыт запуска маркетинговых кампаний — работа с ESP/CDP-платформами — основы HTML/CSS, понимание работы HTML-препроцессоров — понимание настроек DKIM/DMARC/SPF — английский на уровне Intermediate Условия: — работа с известными брендами и возможность создать сильное портфолио — официальное трудоустройство с первого дня и своевременные выплаты — поддержка команды и наставничество от Team Lead — удаленная работу из любой точки мира — график 5/2, с 10:00 до 19:00 по мск Контакт для отклика: @likhotinakatya #маркетинг
Изображение поста
Osmo. Свежее современное оформление сайта с материалами для веб-дизайна на Webflow и HTML.
В сервисе Stitch от Google появилась функция Redesign Agent. Она позволяет загружать изображения интерфейсов или работать со скриншотами приложений и с помощью текстовых команд перерабатывать дизайн.
Агент работает на базе Nano Banana Pro 🍌 и умеет превращать получившиеся редизайны в рабочий HTML-код. Помимо этого, в Stitch появилась возможность мгновенно оценивать распределение внимания на экранах с помощью тепловых карт.
Email2Go — тестируйте свои электронные письма без знания HTML.
email2go.io/features/email-template-testing-tool
🖥 HTML-верстка для дизайнеров (интенсив)
Как и обещал, проведем для вас интенсив по HTML-верстке. Дизайнеру важно понимать, как технически реализуются макеты — это помогает заранее продумывать дизайн так, чтобы он корректно собирался в разработке. Интенсив пройдет 26 и 27 ноября, на нем мы вместе с командой Taptop разберем: • основы HTML-верстки • основные термины • как правильно передавать макет в разработку 📌 Плюс будет практика, где вы сможете самостоятельно сверстать проект на визуальном редакторе кода Taptop. Он позволяет работать по принципам реальной верстки, при этом не требует знания кода. Подробная программа на 2 дня интенсива: 🗓 26 ноября: ⬥ Расскажем, почему дизайнер, который понимает верстку, становится сильнее, дороже и востребованнее, и зачем вообще дизайнеру разбираться в логике кода. ⬥ Разберем частые ошибки дизайнеров в макетах. ⬥ Объясним, как думает разработчик: что для него важно, почему он “ломает” макет, как он считывает структуру, что такое чистый код. ⬥ На примере Taptop разберем, что такое логика визуальной верстки и почему дизайнеру важно понимать структуру. ⬥ Рассмотрим, что такое HTML простым языком: структура страницы, теги, div, DOM. ⬥ CSS в понимании дизайнера: позиционирование, построение структуры, работа flex и grid, поведение блоков, связь дизайна и кода. ⬥ Принципы адаптации дизайна: mobile-first и desktop-first, брейкпоинты, базовые правила адаптива. ⬥ Посмотрим и разберем реальные кейсы студентов и партнеров, а также вы получите практическое задание 🗓 27 ноября: ⬥ Разберем ваши работы: рассмотрим типичные ошибки, расскажем, как сделал бы разработчик, а также подарим вам чек-лист передачи макета. ⬥ Практика: сборка макета в Таптоп, создание адаптива и мобильной версии. ⬥ Подведем итоги и подарим бонусы участникам: чек-лист передачи макета, методичка по терминологии, а также запись практики. ⚡️ Зарегистрироваться на интенсив P.S. В видео к посту — реализованные сайты студентов Uprock на Taptop, посмотреть их подробнее можно по ссылкам 👇 ➤ Тигран Шагоян — Shagoyan ➤ Наталия Кузнецова — Laguna Al-Sha'ab ➤ Наталья Лебедева — Бризант
Коллеги, сейчас завершаем интенсив по логотипам и уже пора планировать следующие активности для вас.
Думаю, будет очень полезно провести интенсив по HTML для дизайнеров. Достаточно знать базовые принципы: как строятся блоки, что может быть в интерфейсе, а что — нет. И когда вы поймете эти основы, ваши макеты станут чище, логичнее и проще в сборке. А значит — будет меньше правок и меньше стресса после передачи проекта в разработку. Что думаете, интересна вам такая тема? Поставьте 🔥 к этому посту, кто хотел бы поучаствовать в таком интенсиве с практикой и разбором ваших домашних заданий.
Изображение поста
🚀 Кто хочет разобраться в HTML так, чтобы вас понимал верстальщик и чтобы вы сами понимали, как реально сверстать ваш дизайн-макет?
На самом деле, вам не нужно разбираться во frontend-разработке или знать, что такое Vue, чем отличается Vue от Angular и т.д. Нужно знать только общие принципы, а это реально сделать за один-два вебинара с практическим заданием. 📌 Тема важная и нужная, хочу провести для вас интенсив по ней. Давайте соберем 300 🔥 на этот пост, чтобы понимать интересно ли вам и имеет смысл готовить контент для этого интенсива. Если активности будет достаточно, то предварительно на следующей неделе проведем интенсив.
Изображение поста
Rocket.new. ИИ-платформа для создания мобильных и веб-приложений.
Позволяет создавать приложения с помощью промтов на простом языке либо по дизайну из Figma. Достаточно даже короткого запроса в одно предложение. Приложение генерируется сразу вместе с бэкендом, чтобы его можно было быстро развернуть на домене и подключить всё необходимое. Поддерживает работу с HTML, Next.js, React и Flutter. Есть интеграции с GitHub, Figma, а также моделями OpenAI, Anthropic, Google и другими. Есть бесплатная ограниченная версия. Цена — от 25 $ в месяц. #инструменты@zhurnalus_lite
Изображение поста
Ищем веб-разработчика на «1С-Битрикс»
Меня зовут Артем Кузьмин, я программист студии. Нам требуется веб-разработчик на «1С-Битрикс». Минимальные требования к кандидату: — уверенное владение PHP, SQL и «1С-Битрикс»; — знание HTML, CSS, JavaScript. Чтобы получить приглашение на собеседование, нужно написать нам о себе, своем опыте, навыках и карьерных планах, сопроводив рассказ ссылками на выполненные работы. Подача заявки: artlebedev.ru/job/web-bitrix-11
В начале были лайны: как мы собрали кейвижуалы и несколько HTML5-баннеров с ресайзами за 4 дня
Узнайте, как мы помогли разработчикам Авито Авто создать Ключевой Взгляд для сервиса проверки автомобилей. Без лишних деталей, только результаты Читать на дизайнерс | #кейс
Изображение поста
📱 Как писать скрипты для Тильды с помощью ChatGTP
Зачастую мне приходится прибегать к помощи нейросети для написания скриптов (сама я знаю JS не на столько хорошо, чтобы писать скрипты с нуля самостоятельно). Недавно я писала модификацию для калькулятора на Тильде с помощью чата GTP. Когда я ставила ему задачу, я набила несколько шишек, из-за которых код получался не совсем подходящим. В этом посте я собрала для вас несколько советов по составлению более корректного запроса к ChatGTP на написание скриптов для Тильды: ⭐️ Обязательно начинайте запрос с фразы "Напиши скрипт на чистом JS", чтобы в коде не использовалась библиотека jQuery, это слегка ускорит загрузку вашего сайта ⭐️ Для того, чтобы код применялся к конкретному элементу, заранее найдите его уникальный класс в разметке Тильды и добавьте к запросу фразу "элемент с селектором .calc_form .t-input" (даже для запроса все равно придется немного разобраться с html 🥲) ⭐️ Тщательно и по шагам опишите логику работы кода (не забываем про классы и селекторы). Например: "Элемент с классом .название_класса должен появляться из полной прозрачности за 0,5 секунд при клике на кнопку с селектором .ID_блока .класс_кнопки" ⭐️ Если вы пишите скрипт к элементу зеро блока, магазина или любого другого объекта, загружающегося на Тильде с задержкой, то в конце запроса добавьте фразу: "Скрипт также должен предусматривать случай, если нужный элемент появляется с задержкой, поэтому пусть скрипт отслеживает появление элемента в DOM структуре с использованием MutationObserver." Дополнительные рекомендации: ⭐️ Можно сделать приписку в запросе, что сайт собран на Тильде, это поможет ChatGTP учесть ее некоторые особенности и, возможно, предложить какие-то улучшения кода ⭐️ Если вы пишите несколько скриптов для одной страницы и составляете запросы в разных диалогах ChatGTP, то надо учесть имена глобальных переменных в коде. Они ни в коем случае не должны повторяться! Глобальные переменные обозначаются с помощью слов var, let или const перед ними. Например: let value = this.value.replace(/[^\d ]/g, '').slice(0, MAX_LENGTH); здесь value — это имя глобальной переменной, и такое имя ChatGTP может использовать в своих кодах очень часто. Поэтому не допускайте повторов в именах переменных при нескольких запросах к чату GTP: "Не используй в качестве имени глобальной переменной value, оно уже занято". ⭐️ Если вам нужно, чтобы код работал только на определенном разрешении экрана, то также напишите об этом в запросе, чат GTP добавит в код медиа-запрос (отключение видимости блока с кодом в настройках Тильды не сработает). Например: "Код должен работать только на экранах размером от 960px и более" ⭐️ Если хотите отладить код и посмотреть в консоле его работу «на лету», добавьте в запрос фразу: "Добавь к коду консольное логирование". Пример полного запроса к ChatGTP: Напиши скрипт на чистом JS для сайта на Тильде, который будет выполнять следующее: - код должен запрещать вводить в инпут с селектором .calc_form .t-input любые знаки кроме цифр и пробела - также код должен ограничить максимальную длину вводимого текста в этот инпут до 7 знаков - скрипт должен предусматривать случай, если таких полей несколько на странице Не используй в качестве имени глобальной переменной input, оно уже занято. Скрипт также должен предусматривать случай, если нужный элемент появляется с задержкой, поэтому пусть скрипт отслеживает появление элемента в DOM структуре с использованием MutationObserver. 🌸 Поделитесь и вы своим опытом в составлении запросов чату GTP в комментариях. Есть ли у вас свои фишки и приемы в общении с ним? Также можете прислать примеры своих сработавших некорректно запросов, я попробую их улучшить для вас 😊 #тильда #нейросети #модификации
Изображение поста
Посмотрите, что нашли!
В рубрике «Находка» мы делимся интересными инструментами, сайтами и приложениями, о которых знают единицы. → Огромная библиотека UI-элементов 🎙 Сокровищница с кнопками, карточками, инпутами — и ещё много чем. Быстрый поиск, живые превью и мгновенное получение кода — HTML/CSS, Tailwind, React. На сайте можно потрогать любой элемент — смотреть анимацию, менять на темную тему и настраивать цвет фона. У ребят постоянно проходят челленджи на разнообразные темы, которые пополняют базу знаний свежими решениями. Сохрани в закладки — пригодится, когда захочешь оживить интерфейс 🦮
Изображение поста
Стажировка для фронтендеров
Команде собственных цифровых продуктов студии нужны фронтендеры-стажеры. Стажировка начнется зимой и продлится 3–6 месяцев. Кандидатам нужно быть крайне внимательными к деталям и справляться с проектами уровня «пиксель-перфект». Минимальные требования: — знание HTML, CSS, JavaScript и Git; — хороший уровень владения Vue.js; — умение создать и развернуть сборку на Docker. Опыт коммерческой разработки — существенный плюс. Для получения тестового задания требуется написать о себе, своем опыте, навыках и карьерных планах, сопроводив рассказ ссылками на выполненные работы. Подача заявки: artlebedev.ru/job/frontend-developer-intern-7
Первый в мире веб-сайт
#Индустрия Пару дней назад в Гардиане вышла статья с мыслями о будущем интернета от самого создателя интернета. Интернет задумывался местом свободы. Однако, позже в дело вступили компании, которые начали продавать доступ к сервисам и зарабатывать на рекламе. Пользователи стали продуктом этих компаний и дальше будет только хуже. В конце статьи есть альтруистичный призыв вернуть былой веб, но все мы понимаем, что этого не будет. А пока я всё это читал, захотелось мимолётно вспомнить как был создан интернет, и как выглядел первый веб-сайт. Первый в мире веб-сайт запустил 34 года назад Тим Бернерс-Ли, которому тогда было 34 года. Тим работал в Европейской организации по ядерным исследованиям (ЦЕРН — там, где находится большой адронный коллайдер) в Швейцарии. 6 августа 1991 года он разместил в интернете описание своего проекта. Задачей сайта было объяснение, что такое «Всемирная паутина», как установить веб-сервер, как создать веб-страницу и как найти информацию. Первый в мире веб-сервер, на котором был запущен этот сайт, работал на компьютере NeXT — рабочей станции, разработанной компанией Стива Джобса после его ухода из Apple. На этом компьютере Тим Бернерс-Ли также написал и первый в мире веб-браузер, который назывался «WorldWideWeb». Сайт был текстовым и очень простым. Он не содержал никаких изображений, цветов или «красивостей». Только гипертекст — ссылки, которые вели на другие страницы. Основные разделы сайта: — Что такое World Wide Web? Простое объяснение новой технологии. Там описывалось, как веб-браузер превращает гипертекст в интерактивный документ, и как можно использовать ссылки для навигации. — Технические детали. Для тех, кто хотел создать свой собственный веб-сервер, была предоставлена вся необходимая информация, включая программное обеспечение и инструкции. — Список гипертекстовых проектов. Это был, по сути, первый в мире веб-каталог, ссылающийся на другие сайты (которые тоже были в основном справочными и создавались в ЦЕРНе). — Список людей, участвующих в проекте. Так появились первые персональные веб-страницы. Главная идея проекта звучала примерно так: «Всемирная паутина (World Wide Web) — это широкомасштабная гипермедийная инициатива, целью которой является предоставление всеобщего доступа к большой вселенной документов.» Тим представил три фундаментальные технологии, которые до сих пор являются основой современного веба: 1. HTML (HyperText Markup Language) — язык разметки для создания веб-страниц. 2. URI (Uniform Resource Identifier), позже известный как URL — уникальный адрес для каждого ресурса в сети. 3. HTTP (HyperText Transfer Protocol) — протокол для передачи данных между клиентом (браузером) и сервером. Он был первым. До него не существовало понятия «веб-страница» или «веб-сайт». Он дал старт всей современной интернет-эпохе. Он был открытым. ЦЕРН не стал патентовать технологию, а сделал её общедоступной, что позволило ей развиваться беспрепятственно и глобально. Веб-сайт Тима не был ни коммерческим продуктом ни развлекательным порталом. Он скорее представлял из себя научную статью, технический мануал и манифест, который навсегда изменил мир. ЦЕРН восстановил и сохранил копию того самого первого сайта. Вы можете зайти на него и увидеть, с чего всё начиналось. Это живой исторический артефакт, который позволяет заглянуть в самый момент рождения того интернета, каким мы его знаем сегодня. → Посетить первый в мире веб-сайт
Изображение поста