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

Графический дизайн *

Художественно-проектная деятельность

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

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

Время на прочтение 8 мин
Количество просмотров 26K
Привет, Хабр! представляю вашему вниманию перевод статьи «How to Design and Code a Personal Website» автора Ryan Smith.

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

image
Читать дальше →
Всего голосов 23: ↑21 и ↓2 +19
Комментарии 4

Рассвет 3D

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

image

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


В этой статье я расскажу о популярных отраслевых тенденциях и покажу, как мы внедряем их в работу над фирменной символикой и мероприятиями Acronis.

Всего голосов 45: ↑42 и ↓3 +39
Комментарии 9

Дизайн-митап в питерском офисе Wrike 5 декабря

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


5-го декабря в 19:00 в офисе Wrike пройдет дизайн-митап, и мы зовем всех дизайнеров поучаствовать во встрече, обсудить актуальные вопросы и поделиться своим дизайн-опытом.
Читать дальше →
Всего голосов 14: ↑13 и ↓1 +12
Комментарии 6

Материалы дизайн-митапа Атомик: буквы, цвета, форма, команда и деньги

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

Привет, Хабр! Недавно мы провели в Авито первый митап, посвящённый дизайну. Хотим поделиться с вами материалами. Мы обсуждали типографику, веб-дизайн, промышленный дизайн и компонентный дизайн.


Заходите под кат, если вам интересны эти темы. Внутри поста видеозаписи докладов, презентации спикеров, отзывы гостей митапа и ссылки на фотоотчёт.


Всего голосов 16: ↑13 и ↓3 +10
Комментарии 5

Истории

За какими трендами UX-дизайна следить в 2020 году

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

Иллюстрация Ouch.pics

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

Когда вы решили проблему, то на самом деле просто открываете проблемы следующего, нового уровня.


Для дизайнера вполне нормально узнавать новое и переделывать работу. Здесь нет понятия «готово»: вы что-то создаёте, затем узнаёте об этом больше — и переделываете. Процесс непрерывно повторяется снова и снова, по мере развития технологий и изменения привычек пользователей.
Всего голосов 15: ↑14 и ↓1 +13
Комментарии 1

Дизайн система Société Générale: Гармония дизайна и разработки

Время на прочтение 7 мин
Количество просмотров 4.5K
Предлагаем вашему вниманию перевод истории о создании дизайн системы, рассказанной дизайнером из Societe Generale.

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

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


Читать дальше →
Всего голосов 13: ↑12 и ↓1 +11
Комментарии 0

Приёмы в проектировании пользовательского интерфейса, которые сэкономят время

Время на прочтение 4 мин
Количество просмотров 7.3K
В переводе этой статьи автор приводят ряд советов и приёмов, которые упростят жизнь при проектировании дизайна пользовательского интерфейса. В статье даны сведения о полезных и экономящих время возможностях работы таких программ как Sketch, Adobe Illustrator, Figma, Adobe XD.


Читать дальше →
Всего голосов 7: ↑7 и ↓0 +7
Комментарии 1

Мифы о доступности цветового контраста

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

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


Читать дальше →
Всего голосов 31: ↑30 и ↓1 +29
Комментарии 7

Редактирование текста тоже вас ненавидит

Время на прочтение 6 мин
Количество просмотров 25K
Опубликованная месяц назад статья Алексис Бингесснер «Рендеринг текста вас ненавидит» очень мне близка.

В далёком 2017 году я разрабатывал интерактивный текстовый редактор в браузере. Неудовлетворённый существующими библиотеками на ContentEditable, я подумал: «Эй, да просто заново реализую выделение текста! Разве это сложно?» Я был молод. Наивен. Прикинул, что справлюсь за две недели. На самом деле попытка решить эту проблему отняла несколько лет моей жизни, в том числе год оплачиваемой работы с утра до вечера по разработке текстового редактора для новой ОС.

На работе мне посчастливилось многое узнать у наставников с огромным опытом в этой области. Я слышал много, очень много страшных историй. В том числе об инженере, который поддерживал приложение Windows с кастомной реализацией текстового поля — и хотел перейти с устаревшего API ввода текста на новую версию. Вот список интерфейсов для ввода текста в этой новой версии:


Читать дальше →
Всего голосов 99: ↑98 и ↓1 +97
Комментарии 40

Dark mode теперь повсюду. Так ли он полезен? (в конце поста опрос)

Время на прочтение 4 мин
Количество просмотров 26K
Дизайнеры одежды известны тем, что любят носить чёрное, но они не одиноки в этом: в 2017 году чёрный был самым популярным цветом в женской одежде, по данным компании Edited, занимая 36% рынка. Популярность тёмных оттенков вышла за границы моды и добралась до дизайна UX и UI: многие популярные приложения и программы дополнились «тёмным режимом», инвертирующим главную цветовую схему веба.

image

Примеры руководств по созданию тёмных тем для Material Design.

Разумеется, в сочетании тёмного фона со светлым текстом нет ничего нового. Получившие в 1980-х развитие текстовые процессоры WYSIWYG (аббревиатура от «what you see is what you get», «что видишь, то и получаешь», произносится «wiziwig») впервые познакомили нас с интерфейсами пользователя, напоминавшими привычный чёрный текст на белой бумаге. До этого компьютеры имели монохромные ЭЛТ-мониторы, отображавшие пиксельный зелёный текст на чёрном фоне. В Adobe Creative Suite тёмный интерфейс использовался многие годы, а Spotify уже довольно давно имеет цветовую схему «светлое на тёмном» (хотя в 2015 году она была переделана).

Тёмные интерфейсы существуют уже очень долго, но у пользователей они стали невероятно популярны только за последние несколько лет. Лишь за прошлый год опции включения тёмного режима появились в MacOS, Apple iOS и Android, а также во многих других приложениях и платформах. Тёмный режим Instagram появился в начале октября; в приложении Gmail тёмный режим появился на этой неделе.
Читать дальше →
Всего голосов 23: ↑22 и ↓1 +21
Комментарии 90

Микровзаимодействия и их использование в пользовательских интерфейсах

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

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


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

В сеть утекла документация по Windows 10X — новой версии ОС для устройств с двумя экранами

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

Код операционной системы Windows 10X планируется дописать в начале 2020 года, а коммерческий запуск состоится осенью

Microsoft продолжает хранить в секрете подробности о Windows 10X — версии Windows 10, адаптированной для ноутбуков и планшетов с двумя экранами. Но теперь первая крупная утечка даёт общее понимание дизайна и цели разработки этой ОС, где будут на равных условиях работать нативные приложения Windows 10 и веб-приложения (PWA).

Скриншоты и описание опубликованы на сайте santorini-os.azurewebsites.net. Ссылку первым заметил пользователь WalkingCat aka @h0x0d. Информация с сайта уже удалена, но другой пользователь «Борис» aka @_milincic_ сохранил архив со скриншотами страниц.
Читать дальше →
Всего голосов 27: ↑26 и ↓1 +25
Комментарии 58

Пространство, сетки и макеты

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

Организация пространства является ключом к добротному и прекрасному дизайну. Пространственные системы, сетки для вёрстки и макеты фактически предоставляют правила, которые придают вашим проектам постоянный ритм, ограничивают принятие лишних решений и помогают командам оставаться на одном уровне понимания дизайна проекта. Эти фундаментальные понятия являются обязательным требованием для всех дизайн-систем. В этом руководстве мы пройдёмся по основам определения базовых пространственных единиц, создания правил отношений при помощи сеток (grids) и объединения их для создания современных макетов (layout) пользовательского интерфейса.


Читать дальше →
Всего голосов 10: ↑10 и ↓0 +10
Комментарии 2

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

Московский туристический хакатон
Дата 23 марта – 7 апреля
Место
Москва Онлайн
Геймтон «DatsEdenSpace» от DatsTeam
Дата 5 – 6 апреля
Время 17:00 – 20:00
Место
Онлайн
PG Bootcamp 2024
Дата 16 апреля
Время 09:30 – 21:00
Место
Минск Онлайн
EvaConf 2024
Дата 16 апреля
Время 11:00 – 16:00
Место
Москва Онлайн

Проектирование доступных цветовых систем

Время на прочтение 8 мин
Количество просмотров 8.3K
Цветовой контраст является важным аспектом доступности в дизайне продукта. Хорошая контрастность облегчает использование продуктов людьми с нарушениями зрения и помогает в несовершенных условиях, таких как слабое освещение или старые экраны. Имея это в виду, мы недавно обновили цвета в наших пользовательских интерфейсах, чтобы сделать их более доступными. В переводе этой статьи сотрудники Stripe рассказывают о том, как они решали эту проблему, чем руководствовались и к чему в итоге пришли.


Читать дальше →
Всего голосов 34: ↑34 и ↓0 +34
Комментарии 5

Атомик дизайн-митап — буквы, цвета, форма, команда и деньги

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

Привет! Приглашаем вас на первый митап для дизайнеров в Авито. Он посвящён важным составляющим процесса и профессии в целом — «дизайн-атомам» (не путать с атомарным дизайном, описанным Брэдом Фростом). В первом выпуске — реальные кейсы не только и не столько об эстетике, сколько о том, как дизайн помог бизнесу и работе команды. Среди прочего, обсудим буквы, цвета и форму.


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


Встреча пройдёт 26 октября в 12:00. Регистрируйтесь сами и приглашайте коллег. Под катом — тезисы выступлений, ссылки на регистрацию и видеотрансляцию митапа.


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

Как работает альфа-композитинг

Время на прочтение 23 мин
Количество просмотров 22K
image

Возможно, прозрачность не кажется какой-то интересной темой. Формат GIF, позволявший некоторым пикселям просвечивать сквозь фон, опубликован более 30 лет назад. Почти в каждом приложении для графического дизайна, выпущенном за последние два десятка лет, поддерживается создание полупрозрачного контента. Эти понятия давно перестали быть чем-то новым.

В своей статье я хочу показать, что на самом деле прозрачность в цифровых изображениях намного интереснее, чем кажется — в том, что мы воспринимаем как нечто само собой разумеющееся, есть невидимая глубина и красота.
Читать дальше →
Всего голосов 53: ↑53 и ↓0 +53
Комментарии 15

Волновой метод построения цветовой гаммы

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

image


Привет, Хабр!


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


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

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

DIY от PVS-Studio: Геймификация достижений

Время на прочтение 3 мин
Количество просмотров 5.3K
DIY от PVS-Studio: Геймификация достиженийЕсли быть честными, говоря о работе, то давайте признаемся: даже самое любимое дело может время от времени наскучивать, сводить на нет настроение и изматывать однообразностью. Поэтому в нашем офисе PVS-Studio мы стараемся раскрасить яркими красками наши будни. Сегодня будет рассказ об одном из таких нововведений — геймификации достижений нашего коллектива.
Читать дальше →
Всего голосов 52: ↑43 и ↓9 +34
Комментарии 19

11 советов: как презентовать UI/UX работы «недизайнерам»

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


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

Читать дальше →
Всего голосов 13: ↑12 и ↓1 +11
Комментарии 0

Figma — простое решение для дизайнера, сложное решение для верстальщика

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

Если вы работаете в области web-разработки, то рано или поздно, вам суждено будет познакомиться с Figma. Смиритесь с этим фактом и начинайте изучать. Я же попробую описать данный продукт, с точки зрения повседневного пользователя.
Читать дальше →
Всего голосов 26: ↑19 и ↓7 +12
Комментарии 41

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