Как стать автором
Обновить
28.07

Веб-дизайн *

Дизайн спасет мир

Сначала показывать
Порог рейтинга
Уровень сложности

Руководство по проектированию интерфейсов с Drag and Drop

Уровень сложности Средний
Время на прочтение 22 мин
Количество просмотров 4.1K

Всем привет! Меня зовут Александр Григоренко, я фронтенд-разработчик, и я часто сталкиваюсь с разработкой веб-интерфейсов с использованием Drag and Drop. В своей предыдущей статье про Drag and Drop я рассказывал про историю появления и развития этого подхода: появившись в первом в мире графическом интерфейсе, Drag and Drop продолжает быть одной из самых актуальных технологий и на сегодняшний день. В этой статье я хочу поговорить об особенностях проектирования дизайна и юзабилити интерфейсов с Drag and Drop. В первую очередь, я буду приводить примеры и говорить об особенностях Drag and Drop в рамках сложившихся практик в современных веб-интерфейсах, но многое из этого будет справедливо и для интерфейсов классических настольных приложений.

Устроиться поудобнее и читать далее
Всего голосов 9: ↑9 и ↓0 +9
Комментарии 4

Новости

HTML: плохие стороны

Уровень сложности Простой
Время на прочтение 12 мин
Количество просмотров 3.3K

Вероятно, вы слышали заявления типа «HTML и так по умолчанию обладает accessibility» или «Не нужно изобретать заново этот абсолютно идеальный элемент управления HTML». Я считаю, что это общие заявления, а не универсальные истины. Веб-разработчикам крайне важно осознавать недостатки платформы, поэтому я решил собрать несколько примеров того, когда у HTML возникают трудности как с точки зрения accessibility, так и usability.

Это неполный список и он не включает в себя недостатки ARIA. Мне хотелось найти баланс между широко известными проблемами и чаще встречаемыми (но менее известными), а также добавить в список то, что мы воспринимаем, как должное. В каждом из разделов я укажу степень серьёзности проблемы, альтернативные решения и ссылки, по которым можно найти более подробную информацию.

Читать далее
Всего голосов 16: ↑15 и ↓1 +14
Комментарии 16

Без углов и стресса: Формула успешного дизайна, или как правильно скруглить внутренние углы фигур

Уровень сложности Средний
Время на прочтение 2 мин
Количество просмотров 2.5K

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

Читать далее
Всего голосов 14: ↑7 и ↓7 0
Комментарии 8

Tilda и чат-бот: пример интеграции

Уровень сложности Средний
Время на прочтение 6 мин
Количество просмотров 901

Привет, друзья! Сегодня мы поговорим о том, как  добиться эффективной обработки заказов, оформленных на сайте стандартного интернет-магазина на Tilda. Я на примере своего проекта (интернет-магазин карликовых кроликов) расскажу, почему менеджерам неудобно работать с заявками, которые приходят из Tilda напрямую, а также покажу, как можно подключить к обработке заказов чат-бота на примере сервиса ChatApp. Мы поговорим о принципе этой интеграции (то есть о механизме веб-хука) и о проверенных на практике сценариях использования бота. Статья будет полезна тем, у кого уже есть сайт на Tilda (или скоро будет), и кто хочет автоматизировать коммуникацию так, чтобы она была комфортна и заказчику, и менеджерам, и конечно, владельцу проекта.

Узнать, как конкретно...
Всего голосов 7: ↑7 и ↓0 +7
Комментарии 3

Истории

Управление проектами в работе и жизни

Уровень сложности Простой
Время на прочтение 4 мин
Количество просмотров 4.4K

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

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

«А» — начальная точка проекта. Любой проект должен начинаться с правильной постановки задачи. От постановки и понимания задачи зависит результат, за который отвечает исполнитель. Важно услышать саму потребность, с которой к вам пришел заказчик, и интерпретировать её в постановку задачи. Запросить необходимые материалы и задать достаточное количество вопросов для качественного результата — зона ответственности исполнителя. Постановкой задачи является формулировка пользы и способа ее достижения в конкретные сроки. Польза должна быть сформулирована в мире заказчика, а не в мире исполнителя. Финальную постановку задачи нужно согласовать с заказчиком, чтобы убедиться, что вы правильно друг друга понимаете. Выявленное полезное действие в проекте будет служить вам надежным инструментом для конструктивного диалога и принятия верных решений.

«Б» в проекте — это сделанная работа. Делать ≠ сделать. Для заказчика результат либо есть, либо его нет. Путь из точки «А» в точку «Б» существует только в мире исполнителя. Если вы профессионал и цените свою репутацию, то ваши критерии к выполняемой работе должны быть выше, чем у заказчика. Работу нельзя делать плохо, даже если это устроит клиента или он не сразу заметит. Сделать ≠ сдать, сделать — это действительно сделать, вовремя запустить качественный проект и принести пользу.

Читать далее
Всего голосов 15: ↑12 и ↓3 +9
Комментарии 2

Как писать более чистый CSS: дюжина советов от банальных до неочевидных

Уровень сложности Простой
Время на прочтение 9 мин
Количество просмотров 12K

Если CSS для вас все еще боль и страдания, добро пожаловать под кат. Мы наткнулись на интересную подборку советов по CSS на английском языке и решили перевести ее, дополнив собственными примерами с кодом.

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

Читать далее
Всего голосов 18: ↑18 и ↓0 +18
Комментарии 14

История Drag and Drop: от первого в мире графического интерфейса до современного веба

Уровень сложности Простой
Время на прочтение 7 мин
Количество просмотров 4.2K

Всем привет! Меня зовут Александр Григоренко, я фронтенд-разработчик, и в последнее время я много работаю над веб-интерфейсами с возможностью перетаскивания объектов методом Drag and Drop. В процессе изучения стандартов и сложившихся лучших практик работы с этим подходом, мне стало интересно разобраться в истории его появления. Копнув поглубже, я выяснил, что Drag and Drop — это один из самых первых способов взаимодействия человека с компьютерной программой. В этой статье хочу рассмотреть историю появления и развития этой технологии.

Читать далее
Всего голосов 4: ↑3 и ↓1 +2
Комментарии 1

Что качать дизайнеру в 2024: 7 востребованных навыков на рынке

Уровень сложности Простой
Время на прочтение 4 мин
Количество просмотров 2.7K

Эта статья для тех, кто хочет оставаться на волне прогресса, а не оказаться погребённым под нею.

О чём поговорим:

1. Как делать дизайн для ИИ, и кто делает его сейчас?

2. Для чего дизайнеру разбираться в цифрах?

3. Зачем учиться рассказывать истории?

4. Как изменилось 3D, и почему его нельзя игнорировать?

5. Чем топовые приложения отличаются от хороших?

6. Как генеративная графика перестала быть развлечением?

7. Какого дизайнера возьмут на работу в первую очередь?

Читать далее
Всего голосов 8: ↑4 и ↓4 0
Комментарии 0

Скрытые возможности элемента <input>

Уровень сложности Средний
Время на прочтение 8 мин
Количество просмотров 14K

Элемент <input> в HTML самый интересный.

Большинство его собратьев вне зависимости от своих атрибутов ведут себя одинаково. При этом атрибут type элемента <input> может принимать 22 разных значения, которые не только меняют его поведение, но и влияют на внешний вид (зачастую в ущерб стилистике).

Элемент <input> отвечает за всё, начиная с текстового ввода и чекбоксов, заканчивая переключателями и кнопкой для сброса всех полей в форме. В этой статье я опишу не только различные типы <input>, но и сопутствующие атрибуты, о которых вы могли не знать, и которые делают этот элемент более удобным и применимым в различных ситуациях. Приступим!
Читать дальше →
Всего голосов 103: ↑102 и ↓1 +101
Комментарии 22

Как мы делали редизайн сайта МКБ

Уровень сложности Средний
Время на прочтение 8 мин
Количество просмотров 2.7K

Привет! Сегодня расскажем вам, как мы делали редизайн сайта МКБ. Пост разбит на две части — продуктовая (о смысле редизайна и методах выявления основных проблем) и техническая.

Читать далее
Всего голосов 9: ↑8 и ↓1 +7
Комментарии 2

Подбор цветов для палитры визуализации данных

Уровень сложности Средний
Время на прочтение 6 мин
Количество просмотров 5.3K

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

Читать далее
Всего голосов 22: ↑21 и ↓1 +20
Комментарии 6

Как сделать консистентный UX для 40+ продуктов. Уроки, которые я извлекла из перезапуска дизайн-системы

Уровень сложности Средний
Время на прочтение 17 мин
Количество просмотров 6.7K

Привет! Меня зовут Ксения Гаврилова, я дизайн-менеджер в Selectel. Определяю, поддерживаю процесс и качество дизайна продуктов в компании, занимаюсь поиском и онбордингом людей в команду, помогаю дизайнерам развиваться.

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

В этом тексте я хочу поделиться главными уроками, которые извлекла в процессе. Они будут полезны дизайнерам и разработчикам, лидам и линейным специалистам. Надеюсь, мой опыт поможет вам при создании вашей дизайн-системы и в работе над ней, и вы не допустите моих ошибок.
Читать дальше →
Всего голосов 44: ↑43 и ↓1 +42
Комментарии 8

Как начать читать научные исследования по дизайну и зачем они нужны

Время на прочтение 8 мин
Количество просмотров 6.9K

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

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

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

Читать далее
Всего голосов 12: ↑9 и ↓3 +6
Комментарии 4

Ближайшие события

Открытый урок «Behaviour Tree в Unity»
Дата 8 февраля
Время 19:00
Место
Онлайн

Дизайн: ожидание vs реальность

Уровень сложности Средний
Время на прочтение 5 мин
Количество просмотров 12K

Когда работа над визуальной частью проекта закончена, и все макеты готовы, приходит время передать их в разработку. А чтобы после “связи с движком” все осталось так же красиво как и в макете, необходимо добиться полной гармонии между дизайнером и разработчиком.

Читать далее
Всего голосов 4: ↑3 и ↓1 +2
Комментарии 4

Как мы перевернули подход к созданию интерфейсов ОС

Уровень сложности Средний
Время на прочтение 9 мин
Количество просмотров 7.7K
В мире очень немного дизайн-команд, которые занимаются разработкой дизайна операционных систем (Apple, Google, Huawei, Microsoft и т. д.). И это дает таким командам уникальную возможность создавать дизайн-решения, которые могут стать трендсеттерами на рынке.

При этом у всех таких героев есть свои артефакты: планирование, бэклог, роадмап, технические ограничения, дедлайны, лимит ресурсов, рутинные задачи. И когда, с одной стороны, поджимают сроки очередного релиза, а с другой, есть естественный лимит емкости разработки, то дизайнеру бывает непросто сфокусироваться и придумать ТУ САМУЮ идею.



В «Лаборатории Касперского» дизайн-мышление встроено на уровне ДНК компании, оно полноценно используется для решения различных рабочих задач. А началось это с того, что мы, Никита Черемисинов (nikitadizer), руководитель группы дизайна в команде KasperskyOS, и Федор Раклов (Raklov), старший UX-исследователь, и вся наша остальная команда попробовали нестандартно подойти к решению креативных задач и провели сессию по генерации идей Playing the Future. В этой статье раскроем закулисье этого ивента — как мы его готовили, какой был процесс и какой получили профит.
Читать дальше →
Всего голосов 27: ↑25 и ↓2 +23
Комментарии 18

Улучшаем взаимодействие пользователя с интерфейсами

Уровень сложности Средний
Время на прочтение 10 мин
Количество просмотров 3.4K

Всем привет! Мы ИТ-компания BSL– технологический партнер в продуктовой разработке и интеграции. В данной статье наш Team Lead Frontend Developer – Андрей рассказал о типичных ошибках при разработке интерфейсов по уе отрисованным макетам, способах их решения и, в целом, о правильном подходе при проектировании. Как мы знаем, не всегда дизайн-макеты идеальны, где-то могли упустить состояния, где-то не описано поведение анимаций, где-то дизайнер не знает вашу ui-библиотеку и так далее. Обо всём этом ниже.

Читать далее
Всего голосов 4: ↑0 и ↓4 -4
Комментарии 3

Коллажи умерли, да здравствует монохром! Кейс: редизайн сайта для Breaking Trends

Уровень сложности Простой
Время на прочтение 10 мин
Количество просмотров 8.1K

«Минимализм против ярких цветов» — это не название батла, а запрос клиента. «Заставили» монохромные кнопки привлекать внимание, «отжали» ⅓ экрана на огромное меню и буквально добавили на лендинг ДНК бренда. Почему заказчик вернулся на редизайн сайта спустя 2 года, и что из этого вышло — в статье. 

Читать далее
Всего голосов 6: ↑1 и ↓5 -4
Комментарии 7

Вам не нужен для этого JavaScript

Уровень сложности Средний
Время на прочтение 11 мин
Количество просмотров 25K

Прошу вас не возмущаться названием статьи. Я не ненавижу JavaScript, я люблю его. Ежедневно я пишу на нём кучу кода. Но ещё я люблю CSS и даже люблю JSX HTML. Я люблю все эти три технологии по причине, которая называется…

▍ Правило наименьших полномочий


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

В случае веба это означает, что нужно по возможности выбирать HTML вместо CSS, а затем CSS вместо JS. JS — самый универсальный язык из всех трёх, потому что на нём вы описываете, как должен вести себя браузер; но также он может ломаться, отказываться загружаться, требует дополнительных ресурсов для скачивания, парсинга и исполнения. Кроме того, при его использовании очень легко ограничить доступ пользователей, выполняющих браузинг при помощи клавиатуры или специальных возможностей.

В отличие от JS с его императивностью, HTML и CSS декларативны. Вы говорите браузеру, что делать, а не как это делать. Это значит, что браузер сам выбирает, как это делать, и может сделать это наиболее эффективным образом.

Так как функции HTML и CSS обрабатываются браузером, они могут быть более производительными, более нативными, более адаптируемыми к предпочтениям пользователя и в общем случае иметь бОльшую accessibility. Это не значит, что так будет всегда (особенно когда дело касается accessibility), но когда все сложные задачи берёт на себя браузер, от этого обычно выигрывают конечные пользователи.
Читать дальше →
Всего голосов 97: ↑95 и ↓2 +93
Комментарии 34

Тесты производительности фреймворка Cample.js. Отчёт № 0

Уровень сложности Средний
Время на прочтение 2 мин
Количество просмотров 2.1K

В данной статье содержатся тесты фреймворка Cample.js бета-версии 3.2.0-beta.6. Это нулевой отчёт о тестах. По мере изменения результатов фреймворка, возможно, могут выйти ещё несколько отчётов.

Отчёт включает в себя сравнения по скорости с популярными фреймворками и библиотекой, а также сравнение с реализацией на чистом javascript.

Читать далее
Всего голосов 6: ↑4 и ↓2 +2
Комментарии 11

Эта статья опубликована в прошлом году

Уровень сложности Простой
Время на прочтение 2 мин
Количество просмотров 9.4K

Здравствуйте, меня зовут Дмитрий Карловский, и я.. буквально только что написал эту статью. Ну, на самом деле вчера. А если точнее, то в этом году. Удачи вам понять когда же именно.

Далее вашему вниманию представлен чуть более подробный, но всё же бесчеловечный анализ этого вопроса..

Так когда же именно?
Всего голосов 64: ↑49 и ↓15 +34
Комментарии 78

Вклад авторов

Работа

Веб дизайнер
38 вакансий