[хэхэ] дизайн – Telegram
[хэхэ] дизайн
2.04K subscribers
153 photos
9 videos
1 file
28 links
это канал дизайн-студии hh
если давно ничего не постили значит у нас редизайн

https://hh.ru/article/design
Download Telegram
харды — это конечно круто, но вот софты...

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

но это еще полдела, если не меньше

мы думаем, что реально важные и крутые скилы — уметь разговаривать, объяснять, убеждать и слушать по-настоящему

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

объяснять свои решения — не просто «клянусь, так лучше», надо прям разжевать, донести, почему такой дизайн решает и проблему пользователя, и задачи бизнеса

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

а какой у вас софт прокачан сильнее?

❤️— объяснять мое призвание
🔥 — всегда звучу убедительно
🤷 — просто делаю шедевры (побегу качать софты)
26🤷17🔥94👍2
чего бы такого посмотреть вечером?

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

▪️документалка Helvetica — про то, как появился тот самый шрифт, после фильма не сможете смотреть на вывески и интерфейсы, как прежде, плюс это или минус — решайте сами

▪️еще одна документалка «Почему человек творит?» — её снял графический дизайнер Сол Басс, он прославился своими киноплакатами и титрами к культовым фильмам

а в своём фильме он размышляет, зачем мы вообще делаем творчество, такая легкая экзистенция на вечер

▪️сериал Abstract: The Art of Design — каждая серия про одно направление, тут вам и графика с иллюстрациями, и UX, и даже архитектура

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

▪️фильм-исследование «33 слова о дизайне» — чтобы знать, как творят у нас, тут уже о русском подходе к дизайну, о том, как у нас формируется визуальная среда и как на это влияют культурные особенности в России

▪️а если про дизайн не хотите, то рекомендация вне топов — любой фильм Андерсона, просто отвлечься, посмотреть на симметрию, цвет и вдохновиться

▪️ещё можно посмотреть Альмодовара, у него все такое яркое, пёстрое и вообще китч, тоже очень вдохновляет

а вы что смотрите обычно?

делитесь в комментах фильмами, документалками и мультиками, которые вдохновляют вас делать красивое
15🔥7
бывает так, что креативить надо, а вдохновения нет
и что тогда делать?


для начала — смириться, потому что вдохновение хоть и важный элемент, но основную часть работы определяют опыт, мастерство и способность решать задачи системно

но если настроиться на креатив надо, есть несколько рабочих инструментов:

▪️ритуалы: музыка, порядок на столе, любимый напиток — желательно, не алкогольный, это уже совсем другое настроение
главное — создать условия, которые помогают сосредоточиться на творчестве

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

▪️очень спасает личный архив идей: заметки, быстрые эскизы или ссылки, которые вы собрали в одном месте
пополнять запасы лучше постоянно: фиксировать всё, что кажется интересным, регулярно просматривать записи и сохранять даже самые необычные мысли

▪️и база — разбить большую задачу на этапы: сначала определить цветовую гамму, затем наметить композицию, а после создать ключевые образы, и жить станет заметно легче

дизайн хоть и творческая сфера, но в ней хватает рутины, и лучше не бороться с ней, а возглавить — воспринимать креатив и создание идей, как стандартную задачу
и запастись инструментами для её решения

а как у вас с вдохновением, помните, когда ловили последний раз?
❤️ — творческую личность что угодно вдохновит
🔥 — меня вдохновляет зарплата за мою работу
🤷 — муза ушла и просила больше не писать ей
32🔥16🤷8
вы знаете, куда жмать ❤️
2010🤣2😘1
Седьмой год я провожу исследование: какие дизайн-команды в отечественных продуктовых компаниях самые сильные?
 
Такой рейтинг будет полезен рынку. Дизайнерам — лучше понимать, где есть хорошие вызовы и комфортная среда для профессионального роста. Компаниям и дизайн-командам — видеть, что нужно докачать.
 
Буду благодарен, если вы пройдёте опрос. Результаты исследования опубликую в январе. Вы найдёте отчёт в крупных дизайн-каналах и изданиях.
 
P.S. Результаты за 2024, 2023, 2021, 2020, 2019 и 2018.
3
ну давайте ещё разок про ворк, лайф и баланс

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

особенно, если есть привычка влюбляться в проекты и гореть ими

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

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

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

есть пара лайфхаков, как тут справляться:

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

но надо — отойти от ноута, подышать, попить водички

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

• если неделя была тяжёлая, пришлось много работать и задерживаться — брать выходные, когда минимум экранного времени

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

пишите в комменты, как у вас дела с work-life balance, получается ли держать, есть ли лайфхаки, чтобы остановиться и не сгореть, когда задач навалилось?
22🔥3🥰3😘2
классика жизни — заказчик оставил правки, а ты смотришь на них, и вообще не понимаешь, что с этим делать

тут бы пригодился переводчик на дизайнерский

такой пока не изобрели, но мы собрали несколько фраз и сделали авторский перевод — оцените

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

p.s. заказчиков любим и не обижаем, им тоже бывает сложно понять наши дизайнерские термины
29🔥7
дизайнеры помешаны на воздухе
клиенты тоже смотрят и просят «а можно вот это раздвинуть, тут пустоты добавить»

а что вообще такое этот воздух

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

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

так зачем он нужен, этот воздух

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

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

в-третьих, он создаёт ритм и порядок
пустота разделяет визуальные блоки, как паузы — речь
всё дышит и живёт по своим понятным правилам

и наконец, воздух — это красиво
он добавляет премиальности и ощущения, что над макетом подумали
не просто накидали всего, а расставили с умом

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

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

в общем, добавляйте воздуха, не жадничайте
217🤣1
помните, как в интернете все ностальгировали по старым обоям Windows с зелёной травой и мечтали вернуть в интерфейсы тридешные иконки, градиенты и стеклянные элементы?

а Apple взяли и воскресили эпоху, выкатив новый интерфейс iOS под названием Liquid Glass — тут нам и стекло, и 3d, и глянец
теперь в сети много обсуждений про нашумевшую Windows Vista и предсказаний о возвращении frutiger aero — стиля, который был популярен в начале двухтысячных

в этом стиле активно использовали образы воды, стекла, пузырьков, а ещё яркие насыщенные цвета, глянцевые текстуры и скевоморфизм — это когда цифровые объекты рисуют максимально реальными и объёмными

потом на смену frutiger aero пришёл минимализм, но стиль не остался на свалке прошлого — его помнят, по нему скучают и активно обсуждают

но отчего frutiger aero так запал людям в душу и почему вдруг снова стал актуальным?

у нас такие предположения:

▪️он напоминает беззаботное детство — по старым интерфейсам в основном ностальгируют те, кто в двухтысячных был ещё ребёнком или подростком

а тогда и трава на заставке компа была зеленее, и солнце ярче, и все игры выходили на дисках

▪️он универсальный — даже удивительно, как компании одновременно перешли на frutiger aero, не сговариваясь, и как органично смотрелся такой дизайн и в рекламе, и в интерфейсах винды, и на экранах мобильных телефонов

▪️он комфортный — много воздуха, глянца, природных элементов вроде рыбок и растений, глазу такое приятно, мозг разгружается

но главная причина — минимализм уже надоел

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

а вы что думаете про эппловский Liquid Glass и про frutiger aero?

❤️ — радуюсь возвращению легенды
😭 — новая iOS такой же стрём, как Windows Vista
🤷 — у меня вообще андроид
21🤷16😭5
среда — это маленькая пятница

а вот пятница на этой неделе — вообще не пятница, а день, чтобы поплакать перед рабочей субботой

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

если не бесит, тоже приходите — в комментах под этим постом можно покричать на что угодно, мы его специально для ора и жалоб сделали
195🔥2
внезапный опрос

заметили, что мы как-то по-особенному оформляем посты?

❤️ — да, всё видим
🤷 — нет, а что такое?
34🤷23
раскроем тайну, почему мы так пишем

это всё швейцарский абзац

термин — прямая отсылка к Швейцарскому международному стилю, который был одержим объективностью, порядком и читабельностью

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

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

а чтобы разделять абзацы, они использовали ровный промежуток — тот самый «швейцарский абзац»

это было чисто, структурно и идеально соответствовало их философии: визуальная организация контента должна быть максимально ясной и систематизированной

ну а для нас пустая строка в текстах — это не просто «так красиво», это осознанный выбор, который мы унаследовали от швейцарской школы

это дизайн, который работает на вас, даже если вы его не замечаете

в следующем посте расскажем, какие функции есть у такого приёма, не переключайтесь
🔥297🤣5😘5
подождите, мы не договорили про швейцарский абзац

рассказываем про ключевые функции этого приёма:

▪️ поддерживает чёткую вертикальную ритмику — пустое пространство между абзацами создаёт последовательный вертикальный поток, который направляет взгляд читателя сверху вниз

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

▪️ структурирует информацию — чистейшая форма разделения, когда работает само пространство, а не звёздочки, чёрточки или отступы

▪️ адаптирует текст под размер экрана — отступ первой строки может «потеряться» при переносе строк, а пустая строка — всегда очевидный разделитель

сейчас соберёмся с мыслями и ещё про лапслок расскажем

а пока напишите в комментах, пользуетесь ли вы швейцарским абзацем на каких-нибудь проектах?
🔥1292
немного о том, как дизайн управляет вниманием

забайтили вас на разминку глаз нашей картинкой и сидим довольные

всё дело в расположении элементов и букв — оно влияет на восприятие визуальных историй

вообще, в основе этого лежит куча сложных законов о психологии и когнитивной нагрузке, сейчас расскажем о самых интересных

▪️ закон Фитса: чем ближе какой-либо элемент, тем быстрее человек действует, например, нажимает на иконку

▪️ правило «золотого треугольника»: взгляд человека сначала фокусируется на трёх точках — верхний левый угол, центр и верхний правый угол

▪️ закон Хика: чем больше визуальных элементов, тем дольше человек решает, какой из них выбрать

▪️ закон симметрии: человек подсознательно выбирает симметричные композиции, потому что они кажутся ему гармоничными

а теперь дружно пробуем хакнуть мозг пользователей в своих макетах

🔥 — если пользуетесь такими приёмами
1🔥2914🤣1
на связи руководитель дизайн-системы hh.ru 🔴 Коля Михайлов, и сейчас будет большой пост про... дизайн-систему

начнём с базы

если совсем просто, дизайн-система — это способ держать весь интерфейс компании в одном визуальном и смысловом поле

это не только про кнопки и цвета, это про предсказуемый результат — когда интерфейсы получаются стабильными и понятными, независимо от того, кто их делает: опытный дизайнер, новичок или подрядчик

у дизайн-системы есть:
◾️ визуальный слой — компоненты, токены, принципы
◾️ инженерный слой — код, репозитории, автоматизации
◾️ процессный слой — правила обновления, релизы, обсуждения, коммуникации

вместе это превращается в структуру, которая помогает другим продуктам быть последовательными и быстрее развиваться

казалось бы, чем это отличается от простого набора шаблонов в фигме?

всем

шаблоны — это просто картинки, которые не обновятся, если завтра изменится бренд или поведение кнопки

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

она нужна, когда команда начинает тратить много времени на согласование, дублирование и ручные правки

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

у нас в hh.ru дизайн-система magritte — это основа для всех интерфейсов: единый набор принципов, компонентов и правил, на которых строятся продукты компании

благодаря ей продуктовые команды делают фичи быстрее, а не рисуют и верстают с нуля то, что уже было однажды придумано
Please open Telegram to view this post
VIEW IN TELEGRAM
3011😘5🔥1🤣1🤷1
от нашего столика — вашему

плагины для фигмы, которые здорово упрощают работу

▪️ SBOL Typograph — исправляет и форматирует типографику, например, ставит ё, убирает висячие предлоги, меняет дефисы на тире

▪️ Photopea — помогает редактировать изображения, по сути, бесплатный фотошоп

▪️ Skew Skew — позволяет перенести в изометрическое пространство любые картинки и векторы

▪️ Iconfy — содержит огромную библиотеку иконок

▪️ Vectorize Bitmap — трассирует картинки

▪️ HTML to Figma — конвертирует HTML-код в редактируемый дизайн

▪️ Halftones — помогает обрабатывать фотки для коллажей

▪️ Restore Image Dimensions — восстанавливает исходные размеры после обрезки в фигме

▪️ Fast Isometric — позволяет работать с моделями в изометрии

а вы какими пользуетесь?
кидайте в комменты свои плагины
19🔥53
имя Рене Магритт вам о чём-нибудь говорит?

нам да, потому что это название нашей дизайн-системы — magritte

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

нам сразу вспомнился Рене Магритт и его картина «Сын человеческий», поэтому за концептом закрепилось название magritte

а потом он стал основным, и слово перекочевало в нейминг дизайн-системы

сегодня у Магритта день рождения, поэтому предлагаем посмотреть на его знаменитые картины со шляпой-котелком
33🥰7🔥63
да-да, мы и есть тот самый знакомый

все наши посты в канале написаны лапслоком — это такой стиль оформления текста, когда не используются заглавные буквы

лапки здесь ни при чём, название произошло из-за сращения фраз lower case и capitals lock — «закрепление заглавных букв в нижнем регистре»

некоторое подобие лапслока было у авангардистов, а потом и постмодернистов в XX веке
они экспериментировали с формой, поэтому печатали стихи и прозу в нижнем регистре и без знаков препинания
такие произведения есть у Маяковского, Вознесенского, Сорокина и других

в 2000-х лапслок перешёл в интернет-культуру и закрепился на форумах, в блогах и чатах

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

лапслок — это как будто друг пишет вам «эй, пошли поиграем в комп после уроков», вот так вот просто и без лишних расшаркиваний

мы используем лапслок вместе со швейцарским абзацем
кстати, если ещё не читали про него, вот два поста: часть 1, часть 2

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

используете лапслок в дизайне?

🔥 — да, это тренд
🤷 — не, это не для меня
🔥3714🤷125