Web Design
726 subscribers
119 photos
11 videos
524 links
Полезные статьи по Веб дизайну (web design)

По всем вопросам: @un_ixtime
Download Telegram
System.css — это библиотека CSS для создания ретро-интерфейсов на основе операционной системы Monochrome System от Apple, которая работала с 1984 по 1991 год.
https://shly.link/ghCPBX
100 анимаций подчеркивания/наложения | Лучшая коллекция CSS 🥇

Устали искать анимацию для пунктов меню и ссылок? Не ищите больше! Вот список из более чем 100 различных анимаций. От простого к более сложному, вы обязательно найдете то, что хотите.

Без SVG, без JS, без дополнительных тегов, без псевдоэлементов, без ключевых кадров... Все они выполняются с использованием фона, перехода и только одного элемента. Просто добавьте класс и наслаждайтесь.

https://shly.link/devee0z
6 ЛУЧШИХ ВАРИАНТОВ CMS ДЛЯ ВЕБ-ДИЗАЙНЕРОВ В 2022 ГОДУ
________________________________

CMS (система управления контентом), которую вы используете как веб-дизайнер, значительно повлияет на то, какие веб-сайты вы сможете создавать. Хотя практически все эти инструменты позволяют упорядочивать контент, редактировать темы и реализовывать различные функции, некоторые из них более гибкие и продвинутые, чем другие.

https://shly.link/TGmgn
Шпаргалка по CSS Tailwind
______________________________

Быстро найдите все имена классов и свойства CSS с помощью этой интерактивной шпаргалки. Единственная шпаргалка по Tailwind, которая вам когда-либо понадобится!

https://tailwindcomponents.com/cheatsheet/?ref=producthunt
Теория адаптивного дизайна
Отзывчивый/адаптивный дизайн оптимизировал взаимодействие с пользователем независимо от размера экрана, позволяя вашему приложению поддерживать телефоны, планшеты, складные устройства и устройства с Chrome OS, портретную и альбомную ориентацию, а также конфигурации с изменяемым размером, такие как многооконный режим.
https://shly.link/dQ6rE
Красивые SVG-иконки, созданные вручную создателями Tailwind CSS.
__________

Создатели Tailwind CSS выпустили Heroicons 2.0 , набор из 264 созданных вручную SVG-иконок для Интернета. Вы можете либо скопировать SVG прямо с веб-сайта Heroicons в свой проект, либо использовать сторонние библиотеки React и Vue

https://shly.link/6L76B
Хороший дизайн против плохого: почувствуйте разницу

https://shly.link/mdmosN8
Отличный список фреймворков и ресурсов CSS/SCSS
____

https://github.com/MarketingPipeline/Awesome-CSS-Resources
This media is not supported in your browser
VIEW IN TELEGRAM
Каждый UX/UI-дизайнер должен знать эти веб-сайты 👇

1. Fontshare.com 2. Storyset.com 3. Iconmonstr.com
📚Подборка тематичеких каналов для программистов📚

СИСТЕМНОЕ АДМИНИСТРИРОВАНИЕ

🐧 Новости и информация из мира Linux
https://xn--r1a.website/linux_sup
⚙️ Контейнеры, оркестраторы, мониторинг и др.
https://xn--r1a.website/dev_ops_info
🕸 Сетевая архитектура и администрирование
https://xn--r1a.website/network_arch

ПРОГРАММИРОВАНИЕ

🧑‍💻 Разработка внешнего интерфейса
https://xn--r1a.website/Frontend_now
🎨 Веб дизайн
https://xn--r1a.website/goodw_design
🔺 Все что связано с Angular, Vuejs
https://xn--r1a.website/Angular_Vuejs
⚛️ Все что связано с reactjs
https://xn--r1a.website/react_prog
🐍 Программирование Python
https://xn--r1a.website/Welcome_Python
🐍⌨️Код Python
https://xn--r1a.website/pycodings
☕️ Программирование Java
https://xn--r1a.website/java_sup
📲 Все по мобильной разработке: iOS, Android
https://xn--r1a.website/imobile_dev
🗃 Базы данных SQL/NOSQL
https://xn--r1a.website/database_group
🌥 Облачные сервисы, вычисления и безопасность
https://xn--r1a.website/cloud_comp
🔬 Data Science, Big Data, Machine Learning
https://xn--r1a.website/bigdata_world
🔬📜Проекты Data Science, Big Data, Machine Learning
https://xn--r1a.website/ML_programming
🤯 Программирование для новичков
https://xn--r1a.website/easy_program
🪲 Тестирование программного обеспечения
https://xn--r1a.website/testin_new
🪛 General programming (инструменты и руководства для программистов)
https://xn--r1a.website/generalprog
📚Шпаргалки для айтишников (шпаргалки и руководства для системных администраторов, программистов, специалистов по безопасности и т.п.)
https://xn--r1a.website/itcheat_sheet

НОВОСТНЫЕ РЕСУРСЫ

🚀 Новости HighTech
https://xn--r1a.website/htech_news
🕰 Последнии новости из мира науки
https://xn--r1a.website/gmorning_news

GITHAB

🐍 Python (гитхаб тренды)
https://xn--r1a.website/pythonghub
☕️ Java (гитхаб тренды)
https://xn--r1a.website/javaghub
🟨 Javascript (гитхаб тренды)
https://xn--r1a.website/Jsghub

БУДНИ ПРОГРАММИСТА (ЮМОР) 📌

😁 Daily Dev Jokes
https://xn--r1a.website/dev_jokes

ЗАЩИТА ВЗЛОМ БЕЗОПАСНОСТЬ

🔒 Информационная безопасность
https://xn--r1a.website/crypto_security_lab
👨‍✈️ Новости из мира хакинга
https://xn--r1a.website/Hackme_news

ВИРТУАЛЬНАЯ РЕАЛЬНОСТЬ, РОБОТОТЕХНИКА

👓 Компьютерное зрение, виртуальная реальность
https://xn--r1a.website/AR_VR_vision
🦾 Канал о Робототехнике и автоматизации
https://xn--r1a.website/robotics_scince
🕹 IOT (мир интернета вещей)
https://xn--r1a.website/IoTprog
ЗАХВАТЫВАЮЩИЕ НОВЫЕ ИНСТРУМЕНТЫ ДЛЯ ДИЗАЙНЕРОВ, ИЮЛЬ 2022 Г.
____________

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

Если в вашем ящике с цифровыми инструментами еще есть место, чтобы впихнуть туда еще несколько жемчужин, вот что мы с нетерпением ждем в этом месяце.

https://shly.link/uT9Cy
Овладение этими 7 базовыми навыками работы с CSS сделает вас мастером внешнего интерфейса 🧙
______

Люди относятся к Frontend-разработке как к мифическому зверю, которого могут приручить лишь немногие. Но правда в том, что это не так сложно.

Как гласит известное изречение:

Мастер — это не тот, кто отрабатывал 10 000 различных движений, это тот, кто отрабатывал одно движение 10 000 раз.

Вам просто нужно освоить несколько базовых навыков CSS , и вы сразу же станете мастером внешнего интерфейса .

https://shly.link/devNdap
This media is not supported in your browser
VIEW IN TELEGRAM
Бесплатный онлайн-редактор бесшовных паттернов.

https://shly.link/aJqcC
Penpot — надежная альтернатива Figma с открытым исходным кодом, на которую стоит обратить внимание!

Penpot — это бесплатное решение с открытым исходным кодом в качестве альтернативы Figma и аналогичным инструментам дизайна. Что вы думаете?
https://shly.link/DksAg
5 бесплатных альтернатив Figma с открытым исходным кодом

Это впечатляющая платформа, на которую полагаются многие профессионалы. Однако в 2021 году Figma изменила свой бесплатный план, наложив определенные ограничения. Хотя это заставило некоторых пользователей искать альтернативы, для многих это все же было приемлемо.

К сожалению, в 2022 году объявление Adobe о приобретении Figma за 20 миллиардов долларов оттолкнуло многих пользователей. Итак, все начали искать альтернативы, которые являются бесплатными и потенциально открытыми.
https://shly.link/CmjG9
Процесс проектирования и 5 причин, почему это важно

Подумайте о любом цифровом опыте или продукте, которым вы наслаждались в своей повседневной жизни, например, часами прокручивая Instagram или TikTok, читая Reddit в туалете, ища места для путешествий в Google или заказ продуктов через Amazon или Instacart. У этого списка нет конца. Каждый из этих цифровых продуктов имеет бесчисленное множество продуманных и высокопроизводительных функций, но так было не всегда.
Каждая часть этих продуктов, вплоть до углового радиуса кнопки, начиналась как концепция. Оттуда каждая концепция прошла через процесс проектирования, который привел к тому, что вы видите и испытываете сегодня.
В этой статье мы поговорим о том, как выглядит процесс проектирования и почему для дизайнерских команд важно создать процесс, который способствует развитию лучших их творческих идей от концепции до окончательного дизайна.

https://shly.link/X588b
Penpot : бесплатная альтернатива Figma с открытым исходным кодом

Предназначен для дизайнеров и
любим всеми

https://shly.link/h4c9g
Взгляните на Logo Rank — систему искусственного интеллекта, разработанную Brandmark, которая учитывает ваш логотип и помогает с его дизайном. Инструмент обучен более чем миллиону изображений логотипов, чтобы дать вам советы и идеи. Его также можно использовать, «чтобы узнать, черпал ли ваш дизайнер вдохновение из стандартных иконок».

https://shly.link/dtYzf
Глубокое погружение в CSS Grid minmax()

В этой статье мы углубимся в minmax(), узнаем, как, когда и зачем его использовать. В конце статьи я ожидаю, что у вас будет полное представление о ней. Давайте погрузимся!
https://shly.link/G7zV1
Текстовые поля в дизайне пользовательского интерфейса: 7 распространенных стилей

Текстовое поле — один из самых популярных элементов пользовательского интерфейса. Несмотря на то, что это относительно простой объект, он может иметь разные стили. Стиль текстового поля может различаться в зависимости от собираемых данных и контекста, в котором оно используется. В этой статье я рассмотрю семь популярных типов текстовых полей.

https://shly.link/YMYtk