🖥 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 ➤ Наталья Лебедева — Бризант

Я тут вспомнил, что давно не писал дизайн-дайджесты с премии CSS Design Awards. Напомню, что я там участник международного дизайн-жюри и должен смотреть и оценивать минимум 10 проектов в неделю. Так я и делаю, а вот про выпуск даджестов — подзабыл. Или подзабил, но это очень и очень зря. Возвращаюсь с ежемесячными отчетами. Сегодня опубликовал статью на портале https://dsgners.ru/ancora/18852-dizayn-daydjest-css-design-awards-sayt-mesyatsa-oktyabr-25">Дизайнерс, кто стал номинантом на награду Сайт Месяца в октябре и кто ее получил. Проектов среди номинантов было 9, я отобрал свой Топ-5. Среди них есть и пара проектов с российскими корнями, которые достойны внимания. Статья доступна по ссылке ниже 👉🏼 https://dsgners.ru/ancora/18852-dizayn-daydjest-css-design-awards-sayt-mesyatsa-oktyabr-25 Приятного вам чтения и просмотра проектов. После прочтения — проголосуйте в статье за проект, который лично вам больше всего понравился. Обнял и приятных выходных 🏆 Саша из Анкоры

Дима из Voximplant написал руководство по использованию инструментов разработчика для дизайнеров. Главная мысль: открыть DevTools это как поднять капот у автомобиля. Не нужно разбирать двигатель, достаточно понимать, где что находится. Самая полезная функция для дизайнера это инспектор элементов. При наведении на элемент DevTools подсвечивает отступы цветом: зелёный показывает padding (внутренние отступы), оранжевый показывает margin (внешние). Вкладка Computed показывает финальные значения после всех вычислений браузера, а Styles показывает исходные CSS-правила и откуда они пришли. В Responsive Design Mode можно проверить адаптив, выбрав конкретное устройство или задав размеры вручную. Справа есть ручка для плавного изменения ширины, чтобы заметить момент, когда начинаются проблемы с вёрсткой. Внутри: – Как быстро достать SVG-логотип через Copy element; – Зачем нужна вкладка Network для скачивания защищённых изображений; – Как тестировать идеи прямо в браузере без Figma; – Почему изменения видны только вам до обновления страницы; – Какие пять основных зон есть в интерфейсе DevTools; – Как конкретные значения отступов упрощают фидбек разработчикам. ➡️ Читать статью ——— 💻 Курс по поиску работы 😍 Про дизайн 🔥 Вакансии дизайнерам 🎨 Референсы

Все говорят о кризисе: бюджеты режут, рынок сжимается, конкуренция растёт. В digital это ощущается сильнее всего – давление на эффективность и сроки стало нормой. Но паника ничего не меняет. Мы видим ситуацию иначе. Когда рынок штормит, выигрывают не те, у кого больше ресурсов, а те, кто умеет быстро перестраиваться, усиливать процессы и работать точнее. Мы знаем, как проходить спад: что оптимизировать, что автоматизировать, какие метрики реально важны, что помогает удерживать клиентов, а что – только создаёт иллюзию контроля. В итоге несколько авторов digital-каналов решили объединиться и собрать всё полезное в одну папку — «https://t.me/addlist/mUVeZHwtrzc0NWYy">https://t.me/addlist/mUVeZHwtrzc0NWYy">Документы для тех, кто в digital» 🔴 Там 30 файлов, которые помогают выстроить управление, аналитику и внутренние процессы: – Мотивация сотрудников в IT, – Контроль сроков диджитал-проекта, – Шаблон CSI, – Фреймворк для проведения исследований через ИИ, – Как создать продающее КП. 📂 Ссылка на папку: https://t.me/addlist/mUVeZHwtrzc0NWYy">https://t.me/addlist/mUVeZHwtrzc0NWYy А чтобы добавить немного азарта — среди подписавшихся разыграют: 🥇 iPhone Air; 🥈 Яндекс Станцию Лайт 2; 🥉 HUAWEI Freebuds 5. Как участвовать: 1. Подпишись на папку: https://t.me/addlist/mUVeZHwtrzc0NWYy">https://t.me/addlist/mUVeZHwtrzc0NWYy 2. Подтверди участие в боте 🗓 Итоги — 25 ноября.

Все говорят о кризисе: бюджеты режут, рынок сжимается, конкуренция растёт. В digital это ощущается сильнее всего – давление на эффективность и сроки стало нормой. Но паника ничего не меняет. Мы видим ситуацию иначе. Когда рынок штормит, выигрывают не те, у кого больше ресурсов, а те, кто умеет быстро перестраиваться, усиливать процессы и работать точнее. Мы знаем, как проходить спад: что оптимизировать, что автоматизировать, какие метрики реально важны, что помогает удерживать клиентов, а что – только создаёт иллюзию контроля. В итоге несколько авторов digital-каналов решили объединиться и собрать всё полезное в одну папку — «https://t.me/addlist/mUVeZHwtrzc0NWYy">https://t.me/addlist/mUVeZHwtrzc0NWYy">Документы для тех, кто в digital» 🔴 Там 30 файлов, которые помогают выстроить управление, аналитику и внутренние процессы: – Мотивация сотрудников в IT, – Контроль сроков диджитал-проекта, – Шаблон CSI, – Фреймворк для проведения исследований через ИИ, – Как создать продающее КП. 📂 Ссылка на папку: https://t.me/addlist/mUVeZHwtrzc0NWYy">https://t.me/addlist/mUVeZHwtrzc0NWYy А чтобы добавить немного азарта — среди подписавшихся разыграют: 🥇 iPhone Air; 🥈 Яндекс Станцию Лайт 2; 🥉 HUAWEI Freebuds 5. Как участвовать: 1. Подпишись на папку: https://t.me/addlist/mUVeZHwtrzc0NWYy">https://t.me/addlist/mUVeZHwtrzc0NWYy 2. Подтверди участие в боте 🗓 Итоги — 25 ноября.

Все говорят о кризисе: бюджеты режут, рынок сжимается, конкуренция растёт. В digital это ощущается сильнее всего – давление на эффективность и сроки стало нормой. Но паника ничего не меняет. Мы видим ситуацию иначе. Когда рынок штормит, выигрывают не те, у кого больше ресурсов, а те, кто умеет быстро перестраиваться, усиливать процессы и работать точнее. Мы знаем, как проходить спад: что оптимизировать, что автоматизировать, какие метрики реально важны, что помогает удерживать клиентов, а что – только создаёт иллюзию контроля. В итоге несколько авторов digital-каналов решили объединиться и собрать всё полезное в одну папку — «https://t.me/addlist/mUVeZHwtrzc0NWYy">https://t.me/addlist/mUVeZHwtrzc0NWYy">Документы для тех, кто в digital» 🔴 Там 30 файлов, которые помогают выстроить управление, аналитику и внутренние процессы: – Мотивация сотрудников в IT, – Контроль сроков диджитал-проекта, – Шаблон CSI, – Фреймворк для проведения исследований через ИИ, – Как создать продающее КП. 📂 Ссылка на папку: https://t.me/addlist/mUVeZHwtrzc0NWYy">https://t.me/addlist/mUVeZHwtrzc0NWYy А чтобы добавить немного азарта — среди подписавшихся разыграют: 🥇 iPhone Air; 🥈 Яндекс Станцию Лайт 2; 🥉 HUAWEI Freebuds 5. Как участвовать: 1. Подпишись на папку: https://t.me/addlist/mUVeZHwtrzc0NWYy">https://t.me/addlist/mUVeZHwtrzc0NWYy 2. Подтверди участие в боте 🗓 Итоги — 25 ноября.

В сфере B2C-продуктов, где рынок перенасыщен конкурентами, близкими между собой и в ценах и в ассортименте, на выбор клиента начинают влиять дополнительные аспекты. Как UI влияет на метрики? 🔵Доверие: Customer Acquisition Cost Для когорты новичков, не имеющих опыта с продуктом, особенно важно, как он выглядит — «встречают по одёжке». Когда пользователь взаимодействует с некачественно свёрстанным интерфейсом у него подсознательно формируется негативное ощущения. Повышается вероятность ухода к конкуренту с более качественной реализацией UI при прочих равных. Учитывая, что каждый привлечённый пользователь стоит компании денег, каждый ушедший клиент — это прямая финансовая потеря. 🔵Удобство и порядок: Conversion Rate Качественный UI делает интерфейс интуитивно понятным и простым в использовании, что снижает когнитивную нагрузку и помогает пользователю быстрее достигать своих целей (Time On Task), в итоге повышая конверсию в покупку. 🔵Конкурентоспособность: Retention Нельзя полноценно конкурировать, не выйдя хотя бы на общий уровень качества, не говоря о том, чтобы стать на уровень выше. Став продуктом, UI которого безупречен также как у конкурентов из первой лиги, можно повысить CSAT, NPS, а вместе с этим и возвращаемость с удержанием. 💦💦 Вопреки мнению многих продактов, оунеров и разработчиков, то, как выглядит бренд и его промо-материалы, как выглядит UI продукта в проде, часто становится важным, а иногда и решающим фактором выбора пользователей и имеет высокое влияние на экономику продукта.

Миша Шамин сделал бесплатный курс о проектировании дизайн-систем, но не про базовые вещи вроде теней и сеток. Он сразу предупреждает, что не будет учить создавать компоненты или настраивать цвета. Вместо этого курс раскрывает закулисье: какая работа скрывается за красивыми кнопочками и тенюшками. Курс построен на цитате инженера Дейва Акина о том, что необходимое количество итераций всегда на одну больше, чем уже сделано. Развитие дизайн-системы это бесконечный процесс, поэтому курс закладывает фундамент из принципов и учит самостоятельно развивать проект дальше. Научитесь вайб-кодить, использовать GitHub, Cursor и Docusaurus, перелинкуют Storybook с Figma и бэклогом, узнают про библиотеки pre-commit и lint-staged. Внутри: – Как настроить окружение и сформулировать первые задачи в бэклоге; – Зачем нужно экономическое обоснование дизайн-системы; – Как контролировать входящие изменения и версионирование; – Что такое линтинг документации через markdownlint и cspell; – Почему важны бэкапы и автоматизация деплоя; – Как работать с фичреквестами и метриками. ➡️ Пройти курс ——— 💻 Курс по поиску работы 😍 Про дизайн 🔥 Вакансии дизайнерам 🎨 Референсы

Теперь скрипт не только ищет артборды для навигации по ним, но и может выгрузить данные в табличный CSV или простой TXT. При экспорте сами выбираете, какие колонки нужны: номер, название, ширина или высота. Под списком добавил счётчик Found — сразу видно, сколько результатов нашлось. Ещё с первых версий скрипта в поле поиска можно вводить регулярные выражения. Вот несколько примеров, как это можно использовать: • black|red — найдёт все артборды, в названии которых есть хотя бы одно из этих слов; • ^\D$* — покажет артборды, в названии которых нет цифр; • ^a — артборды, которые начинаются на букву «a»; • ^(3|9) — артборды, размер которых начинается с 3 или 9. Подробнее о скрипте #illustrator #artboard

Сегодня дарю вам шаблон коммерческого предложения для дизайнера-разработчика сайтов на Тильде (подойдёт как для фрилансера так и для команды) ✨ ❤️ ID шаблона: 87847526 Шаблон выполнен в виде странички на Тильде, сверстан он на стандартных блоках (с щепоткой CSS кода). Я отдала предпочтение именно стандартным блокам, чтобы их было легко редактировать и кастомизировать под свой фирменный стиль, и не надо было заморачиваться над адаптацией. Уникальный дизайн это, конечно, хорошо, но в переговорах и продажах важнее все таки скорость и мобильность, нежели красивая обёртка. Поэтому, когда вас попросят срочно отправить КП, вы сможете сделать это незамедлительно 🔥 ⭐️ В шаблоне некоторые блоки представлены в двух вариантах для различных схем работы. ⭐️ Также я добавила навигацию по странице КП, т.к. оно получилось довольно объемным. ⭐️ Все шрифты установлены «по умолчанию», поэтому когда вы добавите шаблон себе в проект — подключатся ваши установленные шрифты. Не призываю всех и каждого делать свое КП только по этой схеме, однако мой шаблон сможет послужить вам отличной основой для формирования своего собственного КП со своими уникальными текстами и предложениями. Инструкция по добавлению шаблона в проект на Тильде: ⭐️ Зайдите в ваш проект, где вы хотите разместить КП и нажмите «+ Создать новую страницу» ⭐️ Пролистайте страницу с шаблонами до самого низа, где будет располагаться кнопка «Указать ID шаблона» ⭐️ Нажмите на нее и в появившемся поле введите идентификатор моего шаблона КП: 87847526. И страница с КП у вас в проекте! Вы великолепны! 🌸 По всем вопросам или замечаниям по шаблону добро пожаловать в комментарии 😊 P.S. Не забудьте скрывать ваши КПшки заказчикам от индексации #документы #freebie

Меня зовут Артем Кузьмин, я программист студии. Нам требуется веб-разработчик на «1С-Битрикс». Минимальные требования к кандидату: — уверенное владение PHP, SQL и «1С-Битрикс»; — знание HTML, CSS, JavaScript. Чтобы получить приглашение на собеседование, нужно написать нам о себе, своем опыте, навыках и карьерных планах, сопроводив рассказ ссылками на выполненные работы. Подача заявки: artlebedev.ru/job/web-bitrix-11

«Газпром нефть» и VK Tech объединяются, чтобы поговорить о самом сложном — проектировании опыта и сбора метрик по продуктам, которые ничего не продают — B2E решениях. Обсудим опыт конструирования UX и сбора метрик по продуктам с экстремально небольшим количеством пользователей и в технически сложных продуктах, при работе с которыми может потребоваться помощь переводчика. СПИКЕРЫ И ТЕМЫ: Измерение комфорта. Как работать с UX-метриками на внутренних продуктах Евтеева Екатерина, Газпром нефть Стартовая диагностика юзабилити на примере методики SUM: как сделать немодерируемое исследование продуктивным как по цифрам понять, что пользовательский сценарий нужно доработать "добивание" пользователя и бэклога рекомендациями: связь с качественными исследованиями определение ключевых пользовательских сценариев отслеживание динамики юзабилити на примере CSI —— UX в облаках: как не сойти с ума в технически сложных продуктах Дарья Петруняк, VK Tech Глубокое понимание пользователя — основа. Не технические навыки, а умение говорить на языке пользователей, понимать их задачи и вызывать уважение — главное для исследователя. Доверие команды — ключ к качественным данным. Понимание работы разработчиков приводит к более честным и полезным ответам от них. Качество рекрутинга — 50% успеха. Исследование бессмысленно, если привлечены не те пользователи. Команде нужен не просто интересный инсайт, а четкий приоритизированный список проблем, готовый к работе. Быть «переводчиком». — главная задача — транслировать потребности пользователей на язык бизнеса, дизайнеров и разработчиков. UX — это выгода. Удобный интерфейс экономит деньги за счет снижения ошибок и обращений в поддержку. Исследования должны быть системными. Это не разовая акция, а постоянный процесс, так как проблемы пользователей могут скрываться даже в самых, казалось бы, очевидных местах. —— FinOps Design: как создаются закрытые продукты Ольга Останина, VK Tech Зачем дизайн в мире цифр и регламентов? История, как мы вообще решились зайти в FinOps. Обратная связь на вес золота. Что делать, когда пользователей мало, а каждый — как целый рынок. Регуляторный контроль. Как работать с продуктом, где правила меняются с частотой прогноза погоды. Все говорят на разном языке. Как бизнес, девы и дизайнеры научились понимать налоговиков и друг друга. Главное открытие. Почему без сильного дизайна закрытые продукты не просто неудобные, а убыточные —— Дизайн цифровых продуктов в нефтянке Артем Автандилян Газпром нефть Что из себя представляют цифровые продукты в нефтедобывающей отрасли, как они появляются и зачем они нужны. Как измерить качество интерфейса, когда привычные продуктовые метрики не работают. Что делать, когда пользователей настолько мало, что количественные метрики не собрать. В чем сложность работы с продуктом без аналогов. С какими трудностями можно столкнуться при разработке внутренних сервисов.  Как внедрять улучшения в условиях ограниченного времени. Что делать, если в бэклоге нет места для задач по улучшению сервиса, а эти улучшения нужны. А ПОСЛЕ — ИНТЕРАКТИВ! Вторая часть мероприятия — воркшоп по методологии Lego Serious Play. Обменяемся опытом и поищем решения для исследования и проектирования нишевых продуктов с помощью любимого с детства конструктора. БОНУСЫ ДЛЯ УЧАСТНИКОВ: Вкуснейший кофе от Neva Coffee Roasters Крутой мерч за лучшие вопросы спикерам! УЧАСТИЕ БЕСПЛАТНОЕ, НО КОЛИЧЕСТВО МЕСТ ОГРАНИЧЕНО   Регистрация на митап «UX на двоих: как проектировать нишевые ИТ-решения» 10 ноября 10:00–15:00 Санкт-Петербург БЦ «Невская ратуша», Дегтярный переулок, 1Б (Конференц-зал 4 корпуса на 1 этаже) —— UPD: Для сотрудников компании регистрация на портале знаний. 💙 Регистрация на ОЧНОЕ УЧАСТИЕ Регистрация на ТРАНСЛЯЦИЮ

Создайте полную цветовую палитру для Tailwind CSS, используя HEX-код, цвет в формате HSL или случайное значение. Формируйте и изменяйте группы цветовых переменных на основе полученной шкалы. #Plugin ОТКРЫТЬ

Install

Команде собственных цифровых продуктов студии нужны фронтендеры-стажеры. Стажировка начнется зимой и продлится 3–6 месяцев. Кандидатам нужно быть крайне внимательными к деталям и справляться с проектами уровня «пиксель-перфект». Минимальные требования: — знание HTML, CSS, JavaScript и Git; — хороший уровень владения Vue.js; — умение создать и развернуть сборку на Docker. Опыт коммерческой разработки — существенный плюс. Для получения тестового задания требуется написать о себе, своем опыте, навыках и карьерных планах, сопроводив рассказ ссылками на выполненные работы. Подача заявки: artlebedev.ru/job/frontend-developer-intern-7

Новинки с Awwwards, CSSDA и FWA в сентябре от SALT AND PEPPER. Все горячие тренды в дизайне и разработке от лучших студий Читать на дизайнерс | #дайджест

Новинки с Awwwards, CSSDA и FWA в сентябре от SALT AND PEPPER. Все горячие тренды в дизайне и разработке от лучших студий Читать на дизайнерс | #дайджест

Команда Daybreak Studio рассказала о проектировании типографической системы Atlas для продукта Adaline и поделилась приёмами и подходами, которые решают многие проблемы типографики в вебе. Веб-типографика редко подчиняется тем же законам, что и печатная. Линии плавают, межстрочные интервалы считаются по рамке шрифта, а не по базовой линии, а визуальный ритм часто теряется в сетках и токенах. Чтобы вернуть оптическую точность и читабельность, команда создала систему, где все параметры подчинены восприятию, а не математике. В статье детально разобраны принципы такого подхода — от подбора кегля и межстрочного интервала до настройки вертикального ритма, адаптации под CSS и создания гибкой модели токенов. #статья@zhurnalus_lite

На многих наших проектах вы можете увидеть буквы из шрифтового бутика type.today. Студия CSTM Fonts, стоящая за этим, в графическом дизайне занимается тем же, чем мы в литературе, то есть рассказывает параллельную историю культуры. Тем более логичным было обратиться к ним за помощью с логотипом нашего издательства — и мы узнали о себе больше, чем знали ранее В сердце логотипа — идентичность пишущих машинок середины 20 века, периода американской культуры, в котором сформировался не только канон прошлого века, но и фундамент этого. И несмотря на изменчивость инструментов и медиумов, от письма в блокнот до проговаривания AI-ассистенту, именно пишущая машинка и ее печатные литеры остаются непоколебимыми и универсальными символами печатного слова. Ещё раз спасибо Юрию и Илье за трудный (со знаком плюс) выбор. А уже с завтрашнего дня закладки с новым лого можно будет бесплатно взять во «Все свободны».

• Понедельник, 6 октября • 19:00 (GMT+3) Представим: вы владелец студии, ваши дизайнеры создают бренды, интерфейсы, айдентику… и каждый проект и публичный жест — это не просто работа, а политический, моральный, философский акт. В новом эфире встречаемся с потрясающей Наташей Колесниковой — дизайн-исследовательницей, консультанткой по корпоративной социальной ответственности (CSR), креативной директоркой и владелицей студии нового поколения Buttnhand — Radical Responsibility Branding Agency. Вместе со Стефаном и Наташей, обсудим, как принимаются и могут приниматься трудные решения в студии, где деньги, клиенты и ценности часто сталкиваются лоб в лоб. Когда стоит сказать «нет», чтобы в будущем сказать «да» важному. Может ли отказ от токсичных проектов открыть неожиданные возможности; и почему иногда моральный выбор студии или её владельца влияет не только на команду, но и на всю индустрию. Эфир состоится в зуме, ссылку опубликуем перед началом мероприятия. Модератор встречи 🥺 Виолетта Постнова