Обновить
42.89

Веб-дизайн *

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

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

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

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

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

Читать далее

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

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

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

Узнать, как конкретно...

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

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

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

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

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

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

Читать далее

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

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

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

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

Читать далее

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

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

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

Читать далее

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

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

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

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

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

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

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

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

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

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

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

Читать далее

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

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

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

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

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

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

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

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

Читать далее

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

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

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

Читать далее

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

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

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

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

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

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

Время на прочтение8 мин
Просмотры9.5K

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

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

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

Читать далее

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

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

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

Читать далее

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

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

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



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

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

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

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

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

Читать далее

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

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

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

Читать далее

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

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

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

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


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

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

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

Так как функции HTML и CSS обрабатываются браузером, они могут быть более производительными, более нативными, более адаптируемыми к предпочтениям пользователя и в общем случае иметь бОльшую accessibility. Это не значит, что так будет всегда (особенно когда дело касается accessibility), но когда все сложные задачи берёт на себя браузер, от этого обычно выигрывают конечные пользователи.
Читать дальше →

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

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

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

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

Читать далее

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

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

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

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

Так когда же именно?

Разрабатываем дизайн-концепцию IT-системы: этапы аналитики и дизайна

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

Привет, Хабр! Меня зовут Юлия, я старший аналитик-проектировщик компании SimbirSoft. Работаю в сфере IT более 10 лет, в моем портфолио создание более 20 IT-систем для различных проектов: флагмана металлургии, медицинского проекта (6 стран присутствия), автомобилестроительной компании, онлайн-кинотеатра, сервиса доставки еды, сервиса рекламных объявлений и многих других.

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

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

Кто может выполнять проектирование дизайн-концепции? Любой IT-специалист, который владеет аналитическими и дизайн-инструментами, имеет опыт в проектировании IT-интерфейсов и обладает навыками для проведения UI/UX-исследований.

Читать далее

F и Z паттерны в дизайне. Куда смотрит зритель?

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

Куда мы смотрим в первую очередь?

При создании дизайна, будь то целевая страница или любой другой элемент, важно управлять потоком внимания пользователя. Мы можем задать себе три важных вопроса: на чём изначально сфокусируется взгляд зрителя? Что будет влиять на то, как будет двигаться взгляд, и на чём он будет сосредоточен в следующий момент?Можем ли мы спроектировать наши страницы таким образом, чтобы контролировать направление взгляда и направлять его к нашей цели?

Паттерны движения глаз становятся важным фактором. Они помогают определить, как пользователи сканируют информацию и каким образом их внимание перемещается по странице.

Читать далее

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