Старт в Figma

#почитать #junior

Figma — это онлайн-редактор графики для дизайнеров интерфейсов и веб-разработчиков. Это удобная, бесплатная альтернатива Photoshop. Большое преимущество платформы — возможность работать прямо в браузере.

Читать статью

Какого цвета интернет (спойлер: синего и немного оранжевого)

#почитать

В сером костюме едем в опенспейс приглушенных тонов, управляя белым авто. Приехав, открываем алюминиевый лэптоп расцветки space gray.
Находят ли оффлайн-тенденции отражение в онлайне — об этом в статье: про цвета в веб-дизайне, их историю, методологию анализа и выводы о будущем.

... резюмируя текущую картину того, что мы увидим на экране, перейдя на условный средний сайт на 2023:
▫️заметное преобладание синего, немного оранжевых и красных тонов
▫️тёмная тема (настраиваемая или используемая по-умолчанию)
▫️элементы интерфейса яркие и насыщенные
▫️небольшая по разнообразию палитра оттенков в целом

Читать статью

Флексы для начинающих

#почитать #junior

Flexbox — инструмент построения крупных сеток и микросеток.
Чтобы превратить блок во флекс-контейнер, ему задают свойство display: flex. Непосредственные потомки такого контейнера — флекс-элементы — становятся гибкими. Они легко сжимаются или растягиваются, меняют порядок, поддаются выравниванию по главной и поперечной осям.

Читать статью

Вышел Chrome 118. Скоуп, прозрачность и мультимедия

#почитать

Новое:
▫️CSS@scope
▫️scripting и мультимедия: prefers-reduced-transparency
▫️Корекция source-панели DevTools

Читать статью

Визуальная коммуникация. Процесс визуального восприятия

#почитать

▫️Визуальная коммуникация — сложнейший процесс, состоящий из большого множества подпроцессов, зачастую неконтролируемых, лежащих в зоне бессознательного.
▫️Любой когнитивный процесс проходит через призму личного опыта!
▫️Наше сознание защищено от “когнитивных перегрузок”. Понимание этого позволяет дизайнеру создавать хорошие продукты, отбрасывая ненужности.

Читать подробнее

Хочешь разбираться в бизнес-анализе?

Для тебя уже всё сделали.

📌 Канал аналитик от бога делится полезными секретами и лайфхаками управления продуктом и бизнес-анализа.

Подписывайтесь и прокачивайте свои навыки: @godofanalysis

10 конструкторов сайтов с ИИ, которые стоит попробовать

#почитать

1️⃣ Framer AI
2️⃣ Durable
3️⃣ 10Web
4️⃣ Dora AI
5️⃣ Wix AI
6️⃣ Bookmark
7️⃣ Kleap
8️⃣ Hocoos
9️⃣ Jimbo
🔟 Unbounce

Читать статью

Четыре новые функции CSS для плавной анимации входа и выхода

#почитать

В Chrome 116 и 117 включены четыре новые функции веб-платформы, которые обеспечивают плавную анимацию и переходы для отдельных свойств:

▫️Возможность анимировать display и content-visibility на временной шкале ключевых кадров (начиная с Chrome 116).
▫️Свойство transition-behavior с ключевым словом allow-discrete для включения переходов дискретных свойств, таких как display (начиная с Chrome 117).
▫️Правило @.starting-style для анимации эффектов входа из display: none и в верхний уровень (из Chrome 117).
▫️Свойство overlay для управления поведением верхнего слоя при анимации (из Chrome 117).

Читать статью

Очень кратко о заголовках и важности ВАЖНОСТИ соблюдения семантики

#почитать

Часто кажется, что заголовок — это простой и понятный тег. Но это впечатление обманчиво, потому что не всегда крупный и выделенный текст на макете является заголовком. При вёрстке сайта важно соблюдать семантику, чтобы все теги использовались корректно и ресурс работал без ошибок. Если напутать уровни заголовков, то структура страницы будет не семантичной.

Читать статью

CSS-фреймворк с набором готовых классов стилизации интерфейсов

#почитать

"Главный плюс: крайне редко нужно обращаться к css файлам, почти все стили мы храним в самой разметке это сильно ускоряет скорость разработки и позволяет не терять фокус при верстке, не нужно постоянно свитчиться между css и файлом с разметкой."

Читать статью

Не только политика конфиденциальности: какие документы должны быть на любом сайте

#почитать

На любом веб-сайте, независимо от его типа или назначения, должен быть набор обязательных и основных документов, чтобы обеспечить правовую прозрачность, безопасность посетителей и установить взаимоотношения между владельцем сайта и пользователями.

Читать статью

Туториал по input file. Стилизация элемента <input type=»file»>

#почитать

Стилизация элемента <input type=»file»> — это способ сделать загрузку файлов на вашем веб-сайте более привлекательной и интуитивно понятной для пользователей. Вместо стандартного внешнего вида кнопки «Обзор» можно создать настраиваемую кнопку, которая лучше впишется в дизайн вашего сайта.

Читать статью

Прокачиваем вёрстку ARIA атрибутами. Атрибут aria-label

#почитать

Хочу рассказать про атрибут aria-label. В статье не будет заумных определений и бездумного копирования стандарта. Я хотел простым языком объяснить, какая польза от атрибута, а также передать свой практический опыт, чтобы вы могли его повторить.

Читать статью

Инструменты для работы со шрифтами: если мало Google Fonts

#почитать

▫️Существуют две основные базы шрифтов — Google Fonts и Adobe Fonts
▫️Поиск понравившегося шрифта: What the Font, Identifont
▫️Браузерное расширение Fount
▫️Для любителей поэкспериментировать есть FontForge — редактор шрифтов с открытым кодом
Также:
▫️Glyphs
▫️FontBase
▫️FontStruct
▫️Microsoft Typography

Читать подробно

Серьезные ошибки в UI/UX

#почитать

▫️кнопки, которые слишком малы для точного нажатия;
▫️ссылки, расположенные слишком близко друг к другу;
▫️меню, в котором трудно ориентироваться;
▫️текст, который тяжело читать;
▫️всплывающие окна, раздражающие своей навязчивостью
и другие

Читать статью

Точка, точка, запятая, или Почему на Госуслугах кое-где отсутствуют пунктуационные знаки

#почитать

Чтобы коммуникация была более эффективной, на Госуслугах введены собственные правила оформления текстов. Одно из них — удаление части знаков пунктуации. Для чего мы это сделали?

Читать статью

em, rem, pt, px, vw, vh, vmin, vmax, ex, ch, и другие юниты. Гайд по единицам измерения в CSS

#почитать

В CSS есть разные единицы измерения. Больше всего применимы пиксели, но есть и другие – не такие популярные, но весьма удобные в некоторых случаях.
В этой статье рассмотрим относительные и абсолютные единицы измерения, а также единицы измерения области просмотра (viewport-единицы).

Читать статью

Друзья, сегодня рекомендуем отличный канал с материалами по тестированию!

🐞Тестировщик от бога — официальный канал сайта testengineer.ru.

Что отличает нас от кучи других каналов по тестированию:

— мы — один из самых крупных каналов по тестированию в телеграм существующий с 2019 года;
— мы пишем свои материалы: составили дорожную карту тестировщика, в которой собрали все, что надо знать для успешной работы;
— подготовили 🔥 большой учебник по тестированию, где собрали огромное количество материалов для обучения;
— мы проводим регулярные холиварные обсуждения — вот, например, подписчики рассказывают, как искали первую работу и какой была их первая зп;
— мы не постим ленту из хабра — все материалы, которые мы пишем или отбираем, мега-полезные. Перейдите в канал и убедитесь в этом сами.
— и многое-многое другое

Подписывайся на тестировщика от бога и узнай уже наконец разницу между тест-планом и баг-репортом 😇