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

Дизайн

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

Как достичь производительного рендеринга в браузере

Блог компании Конференции Олега Бунина (Онтико) CSS *Интерфейсы *HTML *Браузеры

Один великий китайский философ сказал: «каждый разработчик должен понимать, как исполняется его программа». Что ж, давайте разбираться. Говорить будем про рендеринг и его производительность.

Меня зовут Глеб Михеев, я CTO Skillbox Holding, а также руководитель программного комитета FrontendConf. Уже как 19 лет работаю в коммерческой разработке. Сегодня я расскажу, как устроен браузерный конвейер поставки кадров на экран и что нужно знать каждому разработчику, чтобы его интерфейсы были отзывчивыми, не лагали, а анимации были плавными и выдавали 60fps даже при высокой вычислительной нагрузке на main thread.

Читать далее
Всего голосов 2: ↑2 и ↓0 +2
Просмотры 185
Комментарии 0

Новости

UX для здравоохранения — дизайн, который спасает жизни

Accessibility *Дизайн мобильных приложений *Дизайн Здоровье Телемедицина
Перевод

UX-дизайн может улучшить повседневную жизнь людей. А если вы работаете UX-дизайнером в сфере здравоохранения, то ставки ещё выше. По данным Grand View Research, сектор медицинских технологий является одним из самых быстрорастущих в мире с ожидаемым доходом в размере 1305,1 млрд долларов США в 2030 году. Как у UX-дизайнера, у вас есть возможность помочь определить будущее здравоохранения. Давайте рассмотрим роль UX-дизайна в сфере здравоохранения, влияние пандемии COVID-19 на цифровые медицинские решения, феномен старения населения и ключевую роль проектирования для новых технологий, таких как виртуальная реальность (VR) и искусственный интеллект (ИИ).

Большинство цифровых решений для здравоохранения разрабатывается на базе уникального программного обеспечения, которое имеет высокий спрос и у которого практически отсутствует конкуренция. Поэтому компании часто пренебрегают UX медицинских продуктов. Однако спрос на цифровые решения для здравоохранения, такие как телемедицина, резко возрос из-за пандемии COVID-19, и они стали гораздо более востребованными. Компании делают ставки на цифровые решения для здравоохранения и разрабатывают гораздо больше продуктов, чем до пандемии, что и вызвало необходимость в улучшении UX-дизайна.

Читать далее
Рейтинг 0
Просмотры 113
Комментарии 0

Стенд для тестирования плат после монтажа

Отладка *Прототипирование *Производство и разработка электроники *

Доброго времени суток, Хабр!      

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

Поехали!
Всего голосов 8: ↑8 и ↓0 +8
Просмотры 1.7K
Комментарии 8

Разбираем успех Fortnite: часть 1 — психология и UX

Блог компании OTUS Разработка игр *Дизайн игр *
Перевод

Бывший UX-директор в Epic Games поделится с нами в этой статье о том, как устроен мозг игрока и как эти знания были использованы в разработке Fortnite.

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

Unity3d: Как сделать дверь с полного нуля

Работа с 3D-графикой *C# *Unity *
Tutorial

Начинающий разработчик часто задается вопросом: а как сделана та или иная вещь в игре? Даже на первый взгляд простые вещи такие как дверь вызывают затруднения, поэтому сегодня разберем то, как можно создать автоматизированную дверь в Unity с полного нуля.

Читать далее
Всего голосов 2: ↑2 и ↓0 +2
Просмотры 1.6K
Комментарии 4

Как мы на новый электронный журнал переходили. Дневники внедряльщика

Тестирование IT-систем *Интерфейсы *Usability *

За 10 дней до начала нового учебного года наша школа (под ненавязчивым давлением вышестоящих органов) начала экстренный переход на новую систему электронных журналов. Единую для всего региона, конечно же. Продвигаторы сего программного продукта клятвенно обещали на спешно организованных вебинарах, что новый софт будет «более лучшим», «пипец каким надёжным» и вообще позволит снять с учителей и завучей лишнюю нагрузку, поскольку вся нужная информация будет теперича автоматически попадать куда надо.

Ладно, где наша не пропадала. Качаем инструкции к новой ИС. Целых 6 штук на все случаи жизни (на самом деле — нет!). Грустим, глядя на непривычный интерфейс и смутно-знакомую логику построения ИС — разные точки входа в разные части единой (!) системы, периодическая синхронизация БД между этими модулями («Аверс Директор/Журнал», привет! Уж не ты ли это в новом обличии?). Эта логика самая по себе — тихий ужас для администрации школы. Дело в том, что у части модулей идентичный интерфейс, а на школу выдали один логин администратора. Часть функций по управлению школой выполняется в модуле «Мониторинг образования» (добавление учеников), часть — в модуле «Журнал» (например, указание почасовой нагрузки учителей), а часть — собственно в журнале (у него вообще отдельный адрес, и вход там через Госуслуги — свой для каждого учителя). При подготовке журнала к новому году приходится, во первых постоянно перелогиниваться в разных модулях (либо держать открытыми 2-3 браузера); во-вторых, периодически ждать той самой синхронизации БД. Т.е. я добавляю, например, нагрузку учителя в модуле «Журнал», но не могу тут же поставить ему урок в расписание , т. к. БД ещё не успела синхронизироваться (синхронизаций проходит каждые 10 минут; если повезёт, ждёшь недолго, если не повезёт — 10 минут на каждый чих).

Читать далее
Всего голосов 33: ↑32 и ↓1 +31
Просмотры 6.1K
Комментарии 37

Взлет и падение Bootstrap

Блог компании ISPmanager Веб-дизайн *
Перевод
Как Tailwind стал ведущим CSS-фреймворком

Недавно мне довелось поработать с Bootstrap 5, и в сравнении с Tailwind это был сущий кошмар


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

Примеры проектов я искал на Frontend Mentors, а код писал с использованием различных технологий. Например, один из первых проектов представлял собой интеграцию компонента карточки товара. Я решил написать решение с помощью чистого CSS, с использованием Tailwind и Bootstrap.


Читать дальше →
Всего голосов 20: ↑12 и ↓8 +4
Просмотры 6.5K
Комментарии 24

Масштабируемая векторная графика. Простой SVG-редактор. Памяти Матса Бенгтссона

Программирование *Работа с векторной графикой *Разработка под Linux *История IT Биографии гиков
imageВсё началось, когда вышла очередная версии TkProE — интегрированной среды разработки программ на tcl/tk. Мне очень пришлось по нраву наличие в ней встроенного графического редактора. Но этот редактор не работает с векторной графикой и отсюда все его недостатки.

В процессе модернизации TkProE я познакомился с проектом tkpaint. Более того какие-то идеи я позаимствовал у него и добавил в графический редактор в TkProE.

Но tkpaint это тоже графический редактор растровой графики со всеми присущими ей недостатками, особенно при работе с изображениями (прозрачность, деформация, градиентная заливка).
Читать дальше →
Всего голосов 4: ↑3 и ↓1 +2
Просмотры 1.3K
Комментарии 7

Do it yourself: как тестировать приложение без QA

Разработка мобильных приложений *Тестирование мобильных приложений *Дизайн мобильных приложений *
Из песочницы

Это первый текст на канале, так что сначала я хочу представиться: вряд ли кто-то всерьез будет прислушиваться к анониму, даже если он весь из себя экспертный эксперт. Итак, привет, я - Женя Шаповалов, Senior Android/Flutter Developer в компании Innowise (и хэд mobile department там же). В мобильной разработке я с 2015 года, начинал с Android, а за Flutter мы принялись вместе с коллегами в Innowise - да так мощно, что в итоге в компании появилось отдельное направление разработки.

Ну что, вроде бы заслуживаю доверия? Тогда погнали!

Сегодня рассказываю, как правильно тестировать код,  и делюсь личным опытом. Да-да, ты все понял верно: при разработке мобильных приложений тестирование проводит не только QA-инженер, но и сам автор кода. Причем не только в самом конце, когда приложение почти готово, но и в процессе. Мы сегодня рассмотрим оба этапа. 

Ну-ка, что там такое?..
Всего голосов 5: ↑4 и ↓1 +3
Просмотры 2.4K
Комментарии 2

Алиса, Алекса летит в космос! Как голосовые помощники бороздят просторы Вселенной

Космонавтика Голосовые интерфейсы *

Меня зовут Мария, я разрабатываю разговорные интерфейсы в самом лингвистическом подразделении компании KODE — команде Conversational Products и вместе с коллегами веду телеграм-канал о разговорных технологиях Hey Voice.

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

Читать далее
Всего голосов 4: ↑2 и ↓2 0
Просмотры 877
Комментарии 1

HTML, CSS: важен ли порядок названий классов CSS в атрибуте «class» HTML-элементов

Веб-дизайн *Разработка веб-сайтов *CSS *HTML *

Если поменять порядок названий классов CSS в атрибуте «class» HTML-элемента, то поменяется ли отображение HTML-страницы в браузере? Точно не поменяется? Или точно поменяется? А, может быть, есть нюансы?

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

Читать далее
Всего голосов 20: ↑3 и ↓17 -14
Просмотры 5.2K
Комментарии 16

Новая технология по формированию 3D звука в мультидрайверных наушниках «Сфера»

Прототипирование *Звук

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

Так, в 1979 году, советской фирмой «Электроника» была выпущена модель наушников с квадрафоническим воспроизведением звука под названием «ТДК-6».

В наушниках закрытого типа были размещены две стерео-пары динамиков под небольшими углами к уху слушателя. Одна стерео-пара воспроизводила фронтальную звуковую панораму, вторая - тыловую. За счет угла наклона и смещения динамиков относительно слухового канала, АЧХ фронтальной пары отличалась от тыловой, благодаря чему появлялся эффект объемного звука. Но, к сожалению модель не получила большой популярности, на мой взгляд из-за малого количества контента и отсутствия бинаурального эффекта, на тот момент звуковой канал выводился напрямую, без каких-либо обработок. Левое ухо было изолировано от правого, плюс отсутствие временных задержек.

Читать далее
Всего голосов 2: ↑1 и ↓1 0
Просмотры 1.2K
Комментарии 7

Моана. Визуальные эффекты

Компьютерная анимация *CGI (графика) *
Из песочницы
Перевод

В большей мере эта статья основана на статье-интервью 2017 года, которое взяли у создателей фильма ребята из SideFX.

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

В силу того, что та статья оформлена людьми из SideFX, почти весь разговор ведётся о том, как аниматоры из Walt Disney Animation Studios использовали Houdini.

И это вполне логично, ведь большая часть всех эффектов для мультфильма делалась именно в Houdini. Однако процесс создания подобных сцен [наполненных эффектами] намного шире, нежели то, как его представили в статье.

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

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

Читать далее
Всего голосов 4: ↑4 и ↓0 +4
Просмотры 2.9K
Комментарии 3

«Мы KTS, а не BTS»: как разработчики делали ребрендинг

Блог компании KTS Брендинг Дизайн IT-компании

Привет! Меня зовут Сергей, я управляющий партнер в KTS: мы занимаемся разработкой цифровых сервисов для бизнеса. Недавно мы провели ребрендинг: рассказываю, сколько с ним мучились и что в итоге получилось. 

Читать далее
Всего голосов 16: ↑14 и ↓2 +12
Просмотры 850
Комментарии 2

4,2 гигабайта, или как нарисовать что угодно

Машинное обучение *Графический дизайн *Искусственный интеллект
Перевод
В нашем мире мы можем сделать всё, что захотим. Всё что угодно.

Боб Росс, The Joy Of Painting, сезон 29, эпизод 1

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

Я представил огромный инопланетный объект, висящий в горящем оранжевом небе над давно покинутым Сиэтлом, здания которого покрыты зарослями.

Тем же вечером я за несколько часов создал вот такое изображение:


Простите за низкое разрешение — к сожалению, у моего GPU всего 12 ГБ памяти.

Поскольку очевидно, что я талантливый художник, имеющий за плечами буквально десятки минут опыта, мне захотелось поделиться тем, как я создал данный шедевр.
Читать дальше →
Всего голосов 143: ↑143 и ↓0 +143
Просмотры 25K
Комментарии 82

VR-трансформация образования

Работа с 3D-графикой *Разработка под AR и VR *Научно-популярное AR и VR Будущее здесь

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

Читать далее
Всего голосов 1: ↑1 и ↓0 +1
Просмотры 633
Комментарии 4

UX-психология приложений для знакомств

Блог компании SDVentures Дизайн мобильных приложений *Графический дизайн *Дизайн

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

Читать далее
Всего голосов 8: ↑3 и ↓5 -2
Просмотры 892
Комментарии 7

Раз нормально, два нормально… Или имитация объема в плоскости

Блог компании RUVDS.com Работа с 3D-графикой *Читальный зал Научно-популярное

В прошлом мы уже рассказывали о том, какие существуют карты для моделей и как они используются. А также поведали о том, как сделать имитацию плоского изображения из объёмного с помощью целлшейдинга. Теперь настала очередь сделать объём из плоскости.
Читать дальше →
Всего голосов 45: ↑44 и ↓1 +43
Просмотры 2.5K
Комментарии 0

От взлома протокола в старом «железе» до разработки программ

Интерфейсы *Промышленное программирование *Реверс-инжиниринг *Разработка на Raspberry Pi *Интернет вещей
Из песочницы

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

Читать далее
Всего голосов 31: ↑31 и ↓0 +31
Просмотры 5.3K
Комментарии 21