WebDEV
11.6K subscribers
1.27K photos
1.53K links
Сообщество веб-разработчиков.

На канале можно найти: видео-уроки, полезные статьи, новости из мира IT и веб-разработки.

Ссылка: @Portal_v_IT

Сотрудничество: @oleginc, @tatiana_inc
Download Telegram
Советы по созданию качественного веб-продукта

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

Чтобы облегчить процесс разработки сайтов, мы подготовили цикл статей о том, на чём следует акцентировать внимание во время работы над веб-проектом. Будет полезно не только дизайнерам по профессии, но и тем, кто пытается совместить в себе несколько ролей при создании сайта и не знает, за что зацепиться.

#tips #design #ux
Сделайте интерфейс однородным для всего проекта

Главный принцип хорошо продуманного UX — однородность или согласованность интерфейса на всех страницах. Цветовые схемы, шрифты и стиль письма могут положительно влиять на удобство пользования и на пользовательский опыт при правильной комбинации.

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

Итог: сначала проектируйте, а затем добавляйте стиль.

#tips #design #ux
Разработайте простую для использования навигацию

Подумайте над тем, как пользователю будет удобнее перемещаться внутри проекта. Хорошая навигация играет важную роль: она может быть как путеводной звездой, так и Иваном Сусаниным.

Практические советы:

— Используйте меню навигации верхнего уровня только для наиболее значимых страниц проекта. Не добавляйте больше семи элементов в это меню. Лучше добавьте навигацию нижнего уровня, с более ясными категориями.
— Используйте стандартные слова в меню, так пользователю будет проще;
— Сократите объём времени на путь до нужного места. Сделайте, так, чтобы человеку не скучал, кликая по ненужным ему разделам;
— Меню в футере. Не забывайте о нём, обычно клиенты хотят там найти контактную информацию, соглашения и условия пользования продуктом.

#tips #design #ux
Изменяйте цвет посещённых ссылок

Пользователь может запутаться и кликнуть на одну ссылку дважды, если вы не подсветите её после посещения. Будет печально, если из-за этого человек уйдёт с вашего сайта.

#tips #design #ux
Сделайте страницу простой для сканирования глазами

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

Практические советы:
- Избегайте «текстовых стен». Разделите информацию на группы для облегчения восприятия. Добавьте больше заголовков и пунктов.

Выделите и/или добавьте важные элементы, например, кнопки или меню входа в систему.

#tips #design #ux
Минимизируйте количество вариантов выбора

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

#tips #design #ux
Относитесь к содержимому сайта серьёзно

Основная задача дизайнера — убедиться, что результат его работы дополняет содержимое сайта и улучшает восприятие информации. Хороший дизайн и качественный контент — основные признаки проекта, сделанного с умом и заботой.

Практические советы:

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

#tips #design #ux
Ведите пользователя вниз по странице

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

#tips #design #ux
Называйте кнопки в соответствии с их функциями

Название кнопки не должно вводить пользователя в заблуждение. Не всегда людям комфортно нажимать на кнопки с непонятным значением.

#tips #design #ux
UX-дизайн: то, что вы наверняка забыли сделать

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

Представляем вам чеклист более чем из 30 пунктов для самопроверки. Вот примерные подразделы:
1. Логин и регистрация
2. Профиль
3. Важные детали
4. Запуск

#ui #ux #design
Девять правил о том, как писать нормальные UX-тексты

Чек-лист и примеры до и после, которые помогут писать тексты для интерфейсов.

#design #ux
5 трендов UI/UX-дизайна в 2020 году

Сегодня почти каждый, кто работает с ПК слышал о UI/UX-дизайне. Они так тесно связаны, что иногда грань между понятиями размывается. Поэтому обычно проектированием интерфейсов занимается один дизайнер и его профессия пишется через слеш.

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

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

#article #design #trends
Clarity — это опенсорсная система дизайна, созданная VMware. Она представляет собой комбинацию из реализации рекомендаций по UX-дизайну, HTML/CSS фреймворка и компонентов для Angular. Clarity даёт разработчику обширный набор высокопроизводительных компонентов с привязкой данных.

Демо | GitHub

#library #angular #ux #design
7 популярных трендов типографики в веб-дизайне сайтов в 2020 году

В настоящее типографика стала неотъемлемым элементом веб-дизайна. В этой статье мы рассмотрим актуальные для данного направления тенденции дизайна, что появились в 2019 и уверенно идут в 2020 год.

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

#article #design #typography
Particles.js — небольшая javascript-бибилиотека, с помощью которой можно немного приукрасить свой сайт. Напоминает это старые добрые 90-е, когда модно было делать подобные js-скрипты с летающими звездочками, бабочками и прочей нечистью. Тогда это смотрелось круто, сейчас не вызывает ничего кроме раздражения. Однако частицы, которые создает particles.js весьма приятны для глаза и что самое главное — ненавязчивы. К тому же они интерактивные, что заставляет пользователя ненадолго «залипнуть» в этот интересный эффект.

Демо | GitHub

#js #web #design
Forwarded from Daily Coding 🔥
Finaci Financial Debit/Credit UI Card

Это высококачественный комплект для Photoshop из 30 дебетовых/кредитных карт, который создан таким образом, что все компоненты легко редактировать и использовать. Все слои сгруппированы и имеют свои названия.

Скачать бесплатно по подписке можно в нашем боте @ui8_bot.

Скачать в боте | Купить на сайте (16$)

#design #file @ui8_bot
7 практических советов по улучшению дизайна

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

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

#article #design #web
📦 Abstract Shapes collection

Это набор из более 100 разнообразных элементов дизайна. Геометрические фигуры разных форм и стилей. Неважно над чем вы работаете: выделяющийся дизайн постера, оформление логотипа или принт для футболки — Abstract Shapes collection предоставляет вам возможность сделать продукт динамическим и интересным.

Скачать бесплатно можно по подписке в нашем боте.

💾 Скачать (бесплатно) | 💸 Купить (25$)

#png #psd #design @ui8_bot
Безлимитный доступ к UI8

📑 Самый полезный сервис для дизайнеров и программистов

В этой статье мы расскажем вам о замечательном сайте UI8 и о боте в телеграме, который предоставляет альтернативный доступ к этому сайту намного дешевле.

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

#design #article
📦 Food Icons Set

Набор из 64 иконок еды. Идеально подойдет для мобильных приложений, игр и сайтов.

Этот и тысячи других файлов можно скачать бесплатно по подписке в нашем боте. Просто пришлите ссылку на файл, а бот пришел ссылку для скачивания.

💾 Скачать | 💸 Купить (32$)

#design #file @ui8_bot