CSS Loaders — коллекция готовых анимированных загрузчиков, которые можно скопировать в один клик

Веб-дизайнеру полезно знать основы JavaScript, так как он позволяет использовать больше визуальных инструментов в работе. 🎆 ФотоГуру

Расширение CSS Peeper выводит в своих окнах информацию о шрифтах, коды цветов, а также все изображения и иконки с сайта. Ссылочка на расширение — CSS Peeper Дайте знать своими реакциями, если вам нравится подобный контент 🖤

Узнайте, как ежемесячный дайджест от Агентства.Анкора поможет вам прокачать насмотренность и получить крутые идеи для проектов Читать на дизайнерс | #дайджест

Узнайте, как ежемесячный дайджест от Агентства.Анкора поможет вам прокачать насмотренность и получить крутые идеи для проектов Читать на дизайнерс | #дайджест

Install

copy-paste-css.com 💙 Профессия Дизайнер

«Будучи студентом 4-го курса, я учился на промышленного диза, у нас была дисциплина притянутая за уши к веб-дизайну, что-то среднее между рисованием, Corel/Flash и голым HTML+CSS. Вёл её некий "Борода", препод, имени которого я уже не помню, но его лекции/семинары пролетали как 3 минуты, и слушать его было очень интересно. На одной из лекций он порекомендавал книгу Стива Круга – "Не заставляйте меня думать”. Я учился на классического промщика и интерфейсам нас особо не учили. А меня всегда тянуло к техническому/инженерному и красивому. В середине нулевых сайты были как произведения искусства, модные, с анимациями, тенюхами, музыкой и квестами. А хотелось красивой простоты. И иногда я забавлялся верстая сайты. Простой принцип описанный в книге – не замучивай пользователя своими сложностями. Делай проще простого – чтобы понятно было даже ребенку. А как проверить простоту решения? Дай потыкать интерфейс человеку из фокус-группы. Тот самый метод, который нашел отражение в моей практике сильно позже, когда я стал ближе к интерфейсам и продуктовому дизайну. Зачем? Да потому что если не понятно, то никто не будет юзать твой продукт/сайт. ❤️Главные принципы книги, не потерявшие актуальность и сегодня Простота и ясность. Пользователи должны легко воспринимать и использовать сайт. Если они сталкиваются с трудностями, это может привести к тому, что они просто уйдут. Будьте проще. Интуитивно понятный дизайн. Стремитесь к тому, чтобы элементы интерфейса были понятны, предсказуемы и однозначны в понимании. 0 когнитивной нагрузки. Упростите информацию и навигацию, чтобы пользователи могли сосредоточиться на задачах, которые они хотят выполнить. Тестирование с пользователями. Проведите тестирование интерфейса с реальными пользователями, чтобы выявить проблемы и улучшить их опыт взаимодействия. ❤️Советы от Стива Круга Используйте ясные метки. Сделайте названия кнопок и ссылок понятными и описательными, чтобы пользователи знали, чего ожидать. Создавайте визуальную иерархию. Выделяйте важную информацию, чтобы пользователи могли быстро находить то, что им нужно. Сокращайте количество кликов. Упростите навигацию, чтобы пользователи могли быстро добраться до нужной информации. Дайте обратную связь. Старайтесь, чтобы пользователи получали подтверждение о том, что их действия были успешными, например, при отправке формы. А если хотите почувствовать то, что испытывают многие пользователи сталкиваясь с интерфейсами – тогда попробуйте эту игру». 😀 Ни кодим, ни дизайним…

cssfx.netlify.app 🏛DESIGN HUB

Вчера буквально 2.5 часа я провел в поисках ошибки, которую можно было решить за 1 минуту. Одна из моих учениц сказала что у нее отвалились шрифты на сайте, в блочной теме конечно же. Вчера вообще массово какая то шрифтовая веселуха была у другой ученицы они тоже отвалились, но там по другой причине. Но вернемся к случаю со скобкой. В блочных темах есть стайлбук, это такое место где можно сделать определенные стили для элементов и потом применять их к заголовкам к примеру. Очень удобная штука и ускоряет работу. Проблема была в том что в редакторе стили шрифтов отображались а на фронтенде, готовом сайте их не было. Я уже чет только не делал, и кеш чистил, и через инструмент разработчика искал стили, и https микс контент изучил, короче нет и все. Короче пришел к выводу что это проблема только из-за стайлбука. Думаю может плагин не обновлен, поставил новый и все тоже самое, не работает и все. Начал изучать стайлбук подробно, смотрю а там в стилях она прописала код кастомный, там редактор встроен небольшой чтобы CSS писать, я чисто механически код удалил оттуда и как обычно проверил страницу. И все заработало!!! В первую очередь я подумал что это баг редактора, и решил перенести код в другое место. Вставил и получаю ошибку CSS синтаксиса. Это была скобка внутри мобильной адаптации… Маленькая закрывающая скобка, которая привела к тому что весь файл стайлбука просто не подключался на фронтенд. Вывод простой: Будьте внимательны по написании кода и проверяйте его через VS Code хотя бы, там будет показываться ошибка если где-то не закрыта скобка. И конечно ставьте 🔥 Давайте наберем 30 штук и я расскажу про вторую ошибку шрифта на другом сайте и как мы ее решили.

doodad.dev/pattern-generator/#beautiful-dingbats

Влад уже 6 лет живёт в Черногории и работает поваром. Но с 2023 идея вернуться в разработку, которой он когда-то уже занимался, не отпускала. Сначала пробовал чистый код — HTML, CSS, JS. Но хотелось собирать сайты уже сейчас. Тут как раз попалась реклама нашего бесплатного интенсива. Не дождавшись конца бесплатника, Влад сразу взял курс Webflow Basic с Upwork. Что дало основной результат: — Он не стал углубляться в кодинг и сразу ушёл в Webflow — Заваливал нашу поддержку вопросами, поэтому не залипал долго над сложностями — Не смотря на то, что долго делал выпускную работу и не успел на Битву верстальщиков, не сдался. Взял проект с прошлой битвы и доделал как раз к началу спринта по Upwork! — Уже во время спринта взял первый проект — А дальше просто не остановился и начал бустить навыки Про опыт Влада на спринте Upwork Этот спринт — полноценный буткемп. Вместе с ребятами настраиваем профиль, собираем портфолио, учимся искать заказы и писать отклики. «В спринте Паша наглядно показывал, как работает биржа, как правильно оформлять аккаунт и увеличивать конверсию. Каждый этап сопровождался поддержкой и правками. Это позволило создать качественное портфолио» Буквально на вторую неделю спринта Влад взял свой первый заказ за $600. Задача — привести сайт к единому стилю и сделать style guide. Здесь можно чекнуть финальный результат 🔥 После этого он продолжил работать на Upwork. За 3 месяца взял ещё 3 проекта, а первый клиент стал постоянным и заказывает новые доработки. Сейчас Влад совмещает работу повара с ноукод-разработкой — и планирует сделать второе своей основной профессией. Влад — пример того, что даже без IT-бэкграунда и из другой сферы можно начать перестраивать свою карьеру! Ставьте ❤️, если согласны с нами)

Когда начинаешь проект с нуля, может понадобится удобная и понятная система цветов для применения в интерфейсах. Open Source Color System — бесплатная базовая палитра с шаблоном в Figma Community и готовыми стилями в CSS. https://opensourcecolorsystem.design/ ↗ 🖼️ Хороший интерфейс 🖼️ Концепты интерфейсов 🖼️ Офферы для дизайнеров

Утилита проверяет цветовой контраст: читается ли текст на фоне и соответствует ли всё стандартам доступности. Поддерживает даже новые CSS-форматы и умеет конвертировать цвета между ними. #цвет Людочка, дизайн – ресурсы для дизайнеров

📌В новой статье «Полезные ресурсы для дизайнеров» вас ждет подборка для прокачки UX/UI-скиллов: — инструмент для быстрой обработки изображений, — крупный фотобанк с открытой лицензией, — крупнейшая галерея CSS-градиентов. Кириллическая подборка 🖌 на все случаи: — брутальный шрифт как типографское заявление, — традиционный, но при этом свежий вариант, — экспериментальный шрифт нового жанра Unispace, — гротеск с индустриальным 🏢 характером, — шероховатый рукописный шрифт. ***** Бесплатные курсы по UX/UI: 🔥 Продвинутая Figma: Cайты 🔥 Продуктовый дизайн Телеграм-каналы: ⚡️ UX и продуктовый дизайн ⚡️ UX/UI, Фриланс, Коммерческий дизайн ⚡️ Плакаты: Вдохновение и рефы ⚡️ Личный канал Евгения UPROCK Полезные материалы: ✨ Бесплатные кириллические шрифты ✨ Бесплатные мокапы ✨ Вакансии для дизайнеров

Самые креативные и стильные сайты мая'25 отобраны для CSS Design Awards. Узнай, кто вышел вперед среди номинантов Читать на дизайнерс | #дайджест

Самые креативные и стильные сайты мая'25 отобраны для CSS Design Awards. Узнай, кто вышел вперед среди номинантов Читать на дизайнерс | #дайджест

Самые креативные и стильные сайты мая'25 отобраны для CSS Design Awards. Узнай, кто вышел вперед среди номинантов Читать на дизайнерс | #дайджест

Самые креативные и стильные сайты мая'25 отобраны для CSS Design Awards. Узнай, кто вышел вперед среди номинантов Читать на дизайнерс | #дайджест