"Дизайн-систематизация в Рамблере"
Александра Ермоленко, Елена Лисеева, Евгений Новажеев, Ольга Пиголицына (brand.rambler.ru)
Текст: t.me/meetup2018/109
Видео: youtu.be/dhHlaiD0NZc?t=2h21m14s
Как развивали созданный агентством Ony стиль и с какими подводными камнями столкнулись в пути: сложно внедрять кастомный шрифт, слишком яркие цвета. Внедряли постепенно и осторожно, чтобы не отпугнуть аудиторию. Разрабатывают свою дизайн-систему на базе методологии атомарного дизайна.
Внедрили единый личный кабинет для всех проектов, вдвое увеличили глубину просмотра страниц и длительность сессии, увеличили молодую аудиторию, которая называет Рамблер «Рамой».
Из зала задавали вопросы про продуктовую команду. 10 дизайнеров в опенспейсе, которые ведут по несколько проектов.
Александра Ермоленко, Елена Лисеева, Евгений Новажеев, Ольга Пиголицына (brand.rambler.ru)
Текст: t.me/meetup2018/109
Видео: youtu.be/dhHlaiD0NZc?t=2h21m14s
Как развивали созданный агентством Ony стиль и с какими подводными камнями столкнулись в пути: сложно внедрять кастомный шрифт, слишком яркие цвета. Внедряли постепенно и осторожно, чтобы не отпугнуть аудиторию. Разрабатывают свою дизайн-систему на базе методологии атомарного дизайна.
Внедрили единый личный кабинет для всех проектов, вдвое увеличили глубину просмотра страниц и длительность сессии, увеличили молодую аудиторию, которая называет Рамблер «Рамой».
Из зала задавали вопросы про продуктовую команду. 10 дизайнеров в опенспейсе, которые ведут по несколько проектов.
Telegram
Дрибл Митап 2018
Доклад 3. «Дизайн-систематизация в Рамблере или Есть ли жизнь после редизайна?»
Александра Ермоленко, Елена Лисеева, Евгений Новажеев, Ольга Пиголицына.
Александра Ермоленко, Елена Лисеева, Евгений Новажеев, Ольга Пиголицына.
👍1
Небольшое развлечение, в этот очередной рабочий день. Создание 3d модели движения человека. Есть вариант свершения в реальном времени, утеха дня. Интерфейс прост и тем прекрасен.
https://getrad.co/scan/6268/
https://getrad.co/scan/6268/
Radicalmotion
RADiCAL - AI-powered 3D animation
World’s most powerful AI-powered tech for detecting and reconstructing 3D human motion from 2D content — in the cloud and on every device.
Психология восприятия формы
При восприятии трехмерного дома основу объемной фигуры может составлять видимый прямоугольник дома.
Роль глубинных ощущений в восприятии формы трехмерного тела объясняет ряд закономерно наблюдающихся своеобразных зависимостей между формой предметов, отдаленностью, в которой они воспринимаются, и их видимой величиной. Так, вследствие того, что восприятие предметов находящихся вблизи от зрителя, насыщено глубинными ощущениями. Восприятие объектов, находящихся вдали, более плоскостно. И поэтому объекты, находящиеся вдали, кажутся бледнее чем они есть на самом деле. Более бледные объекты - менее детализированы, за счет этого кажутся крупнее, чем есть. Такой парадокс. Объект с небольшим количеством деталей выглядит крупнее, чем объект насыщенный деталями.
В искусстве это обстоятельство известно довольно давно. Если на картине изображено много рельефных объектов, то это изображение кажется меньше. Чем рельефнее барельеф, тем он так же кажется меньше и, следовательно, дальше; если наоборот, то увеличение плоскостности влечет за собою увеличение кажущейся величины барельефа. Более крупные объекты создают иллюзию, что они находятся к нам ближе, чем мелкие объекты.
Следовательно объекты с небольшим количеством деталей буду казаться к нам ближе и крупнее, чем объект с высокой детализацией таких же размеров.
Как мы используем это в web-е?
В своей графике нам приходится учитывать эти правила. Если мы хотим выделить какой-то объект, то делаем его более детализированным и крупным, что позволяет визуально выдвинуть его на первый план. Это придает картинке объем.
Простой пример с тенью👇
При восприятии трехмерного дома основу объемной фигуры может составлять видимый прямоугольник дома.
Роль глубинных ощущений в восприятии формы трехмерного тела объясняет ряд закономерно наблюдающихся своеобразных зависимостей между формой предметов, отдаленностью, в которой они воспринимаются, и их видимой величиной. Так, вследствие того, что восприятие предметов находящихся вблизи от зрителя, насыщено глубинными ощущениями. Восприятие объектов, находящихся вдали, более плоскостно. И поэтому объекты, находящиеся вдали, кажутся бледнее чем они есть на самом деле. Более бледные объекты - менее детализированы, за счет этого кажутся крупнее, чем есть. Такой парадокс. Объект с небольшим количеством деталей выглядит крупнее, чем объект насыщенный деталями.
В искусстве это обстоятельство известно довольно давно. Если на картине изображено много рельефных объектов, то это изображение кажется меньше. Чем рельефнее барельеф, тем он так же кажется меньше и, следовательно, дальше; если наоборот, то увеличение плоскостности влечет за собою увеличение кажущейся величины барельефа. Более крупные объекты создают иллюзию, что они находятся к нам ближе, чем мелкие объекты.
Следовательно объекты с небольшим количеством деталей буду казаться к нам ближе и крупнее, чем объект с высокой детализацией таких же размеров.
Как мы используем это в web-е?
В своей графике нам приходится учитывать эти правила. Если мы хотим выделить какой-то объект, то делаем его более детализированным и крупным, что позволяет визуально выдвинуть его на первый план. Это придает картинке объем.
Простой пример с тенью👇
Возможно, вы слышали эту историю о слоне🐘:
Король привел шесть человек в темное помещение. Они ничего не видят. Царь говорит им: «Я привез это животное из диких земель на востоке, его называют Слон».
«Что такое слон?» - спрашивают мужчины.
Царь говорит: «Потрогайте слона и опишите его мне».
Человек, который начал трогать ногу, говорит, что слон похож на столп, тот, кто чувствует хвост говорит, что слон похож на веревку, тот, кто чувствует ухо, говорит слон похож на ручного вентилятора, тот, кто чувствует живот говорит, что слон похож на стену, а тот, кто чувствует бивни, говорит, что слон похож на сплошную трубу.
«Вы все правы», - говорит король, - «Вы все чувствуете себя частью слона».
Визуальный дизайнер подходит к UX дизайну с одной точки зрения, программист с другой. Может быть полезно понять и даже испытать ту часть слона, которую испытывают другие.
Психолог и когнитивный ученый доктор Сьюзан Вайншенк использует то, что мы знает о людях, и объясняет как эти знания мы можем применить в дизайне UX.
http://telegra.ph/Vzglyad-psihologa-na-slona-1-chast-06-27
Король привел шесть человек в темное помещение. Они ничего не видят. Царь говорит им: «Я привез это животное из диких земель на востоке, его называют Слон».
«Что такое слон?» - спрашивают мужчины.
Царь говорит: «Потрогайте слона и опишите его мне».
Человек, который начал трогать ногу, говорит, что слон похож на столп, тот, кто чувствует хвост говорит, что слон похож на веревку, тот, кто чувствует ухо, говорит слон похож на ручного вентилятора, тот, кто чувствует живот говорит, что слон похож на стену, а тот, кто чувствует бивни, говорит, что слон похож на сплошную трубу.
«Вы все правы», - говорит король, - «Вы все чувствуете себя частью слона».
Визуальный дизайнер подходит к UX дизайну с одной точки зрения, программист с другой. Может быть полезно понять и даже испытать ту часть слона, которую испытывают другие.
Психолог и когнитивный ученый доктор Сьюзан Вайншенк использует то, что мы знает о людях, и объясняет как эти знания мы можем применить в дизайне UX.
http://telegra.ph/Vzglyad-psihologa-na-slona-1-chast-06-27
Telegraph
Взгляд психолога на слона (1 часть)
1. Люди не хотят работать или думать больше, чем им нужно. Лучше показать людям немного информации и позволить им выбирать, хотят ли они больше деталей. Причудливым термином для этого является прогрессивное раскрытие. Вместо того, чтобы просто описывать вещи…
Психолог по образованию рассказывает, что мы знаем о людях и то, как мы применяем это к дизайну UX. В статье рассказывается о исследованиях мозга, визуальной системе, памяти, мотивации и их влиянии на принципы дизайна UX.
http://telegra.ph/Vzglyad-psihologa-na-slona-2-chast-06-28
http://telegra.ph/Vzglyad-psihologa-na-slona-2-chast-06-28
Telegraph
Взгляд психолога на слона (2 часть)
Внимание Я начинаю думать, что вся идея внимания - это ключ к разработке привлекательного интерфейса . Если вы хотите обратить внимание пользователя, не нужно его отвлекать. Например гиперссылки, которые в итоге ведут на другой сайт могут отвлечь пользователя…
Если вы сталкивались с разработкой личного кабинета, то уже знаете насколько сложно разработать информационную панель. Пользователи любят все держать под контролем. Сложный интерфейс сбивает с толку и заставляет чувстовать себя беспомощно.
В статье разобрано несколько свойств нашей памяти, это может помочь вам. 🤓
http://telegra.ph/Pochemu-nas-privlekayut-informacionnye-paneli-07-11
В статье разобрано несколько свойств нашей памяти, это может помочь вам. 🤓
http://telegra.ph/Pochemu-nas-privlekayut-informacionnye-paneli-07-11
Telegraph
Почему нас привлекают информационные панели?
Мы любим держать все под контролем. Представьте себе ситуацию, когда вы не знаете, что происходит вокруг вас. Очень скоро ваша кнопка паники включится, и вы захотите знать, что происходит и как вы можете это контролировать. Информационная панель управления…
Не секрет, что мобильная версия занимает даже более крепкие позиции, чем десктоп. Если вы все еще не знаете зачем она нужна и какие у мобильной версии ключевые особенности, просим к прочтению 👇👇👇
«Слепота – предпосылка эдипова метода в глубинной психологии, так как она инициирует поиск самого себя. Чтобы заниматься анализом, мы должны быть слепыми. Эту слепоту теперь называют бессознательным.» Я не пытаюсь затащить вас в какую-то секту, просто хочу прояснить откуда растут нижние ноги у этой статьи.
В общем, хочу сказать, что искусство воспринимается нами в большинстве своем бессознательно. Когда мы видим картину то сразу не осознаем, что на ней, но уже испытываем некоторые ощущения и эмоции. Я писала об этом в статьях о работах Кандинского. Наше впечатление формируется от того, что мы видели до выбранной картины и что видим после. Из-за этого свойства много времени в музеях уделяют именно расположению картин. В коллекциях всегда есть четкий порядок. Вам говорят откуда нужно начинать смотреть выставку и по какой траектории двигаться, чтобы в итоге в вашей голове сложилась цельная картина. Вы наверняка сталкивались с чувством, когда наступает переосознание увиденного. Почему оно наступает и как это связано с ui ux пишу в статье 👇
https://teletype.in/@uiuxdesign/B1gYoZ9im
В общем, хочу сказать, что искусство воспринимается нами в большинстве своем бессознательно. Когда мы видим картину то сразу не осознаем, что на ней, но уже испытываем некоторые ощущения и эмоции. Я писала об этом в статьях о работах Кандинского. Наше впечатление формируется от того, что мы видели до выбранной картины и что видим после. Из-за этого свойства много времени в музеях уделяют именно расположению картин. В коллекциях всегда есть четкий порядок. Вам говорят откуда нужно начинать смотреть выставку и по какой траектории двигаться, чтобы в итоге в вашей голове сложилась цельная картина. Вы наверняка сталкивались с чувством, когда наступает переосознание увиденного. Почему оно наступает и как это связано с ui ux пишу в статье 👇
https://teletype.in/@uiuxdesign/B1gYoZ9im
Teletype
Эмпирическая слепота
Наш мозг не может просто игнорировать неизвестные или непонятные ему символы, мозг подбирает подходящие варианты для определения, что...
❤1
Ключевые принципы разработки дизайна для мобильных приложений.
Более 75% пользователей открывают приложение один раз и больше не возвращаются к нему. Сегодня ожидания мобильные пользователей очень велики – быстрая загрузка приложения, простота пользования и получение удовольствия во время взаимодействия с ним.
В статье я пишу о основных принципах дизайна приложений. С чего следует начать?
Хорошего дня
https://teletype.in/@uiuxdesign/Hkfys0vJN
Более 75% пользователей открывают приложение один раз и больше не возвращаются к нему. Сегодня ожидания мобильные пользователей очень велики – быстрая загрузка приложения, простота пользования и получение удовольствия во время взаимодействия с ним.
В статье я пишу о основных принципах дизайна приложений. С чего следует начать?
Хорошего дня
https://teletype.in/@uiuxdesign/Hkfys0vJN
Teletype
Дизайн мобильных приложений
Основная работа над приложением состоит в разработке пути пользователя. Описание всех экранов, начиная с экрана приветствия...
Привет, вселенские огоньки!
За то, что вы такие работящие и добрые люди, мы решили открыть полностью бесплатное обучение от нашей компании requestdesign.ru !
Итак, прямо здесь, на нашем канале мы будем регулярно публиковать мастер-классы, показывать наши новые проекты, которых нет в портфолио, писать статьи и еще много-много всего, для тех, кто хочет стать дизайнером!
Все выполненные задания у вас будет возможность отправить нам в чате для обсуждений. Лучшие работы мы будем публиковать на нашем сайте с ссылкой на ваш контакт. А так же лучшим из лучших, разумеется, будет предложена стажировка в нашем офисе.
Сегодня мы публикуем для вас первый мастер-класс, от нашего арт-директора с разбором неоморфизма! Если у вас есть желание поделиться своей работой или пообщаться с другими дизайнерами, отправляйте итоги в чат под постом. Желаем вам всего наилучшего!
Во имя Ui, UX и святого юзабилити. Мокап.
За то, что вы такие работящие и добрые люди, мы решили открыть полностью бесплатное обучение от нашей компании requestdesign.ru !
Итак, прямо здесь, на нашем канале мы будем регулярно публиковать мастер-классы, показывать наши новые проекты, которых нет в портфолио, писать статьи и еще много-много всего, для тех, кто хочет стать дизайнером!
Все выполненные задания у вас будет возможность отправить нам в чате для обсуждений. Лучшие работы мы будем публиковать на нашем сайте с ссылкой на ваш контакт. А так же лучшим из лучших, разумеется, будет предложена стажировка в нашем офисе.
Сегодня мы публикуем для вас первый мастер-класс, от нашего арт-директора с разбором неоморфизма! Если у вас есть желание поделиться своей работой или пообщаться с другими дизайнерами, отправляйте итоги в чат под постом. Желаем вам всего наилучшего!
Во имя Ui, UX и святого юзабилити. Мокап.
Dark mode в дизайне: красота, рожденная во тьме!
Сегодня мы рассмотрим, почему темная тема мобильных приложений и сайтов так стремительно набирает популярность и как ее наиболее эффективно разработать.
Темный режим стал одной из самых востребованных функций среди современных пользователей. И Google, и Apple включили темную тему в свои пользовательские интерфейсы, чтобы удовлетворить потребности пользователей. Темный пользовательский интерфейс минимизирует нагрузку на глаза в темной среде, экономит время автономной работы и раскрывает еще одну сторону индивидуальности продукта. Такие интерфейсы выглядят эффектно, минималистично и элегантно. Тем не менее дизайнеры должны знать, как избежать некоторых дизайнерских ловушек, если они хотят перейти на темную сторону 😈 и и насладиться красотой, рожденной во тьме.
Сегодня мы рассмотрим, почему темная тема мобильных приложений и сайтов так стремительно набирает популярность и как ее наиболее эффективно разработать.
Темный режим стал одной из самых востребованных функций среди современных пользователей. И Google, и Apple включили темную тему в свои пользовательские интерфейсы, чтобы удовлетворить потребности пользователей. Темный пользовательский интерфейс минимизирует нагрузку на глаза в темной среде, экономит время автономной работы и раскрывает еще одну сторону индивидуальности продукта. Такие интерфейсы выглядят эффектно, минималистично и элегантно. Тем не менее дизайнеры должны знать, как избежать некоторых дизайнерских ловушек, если они хотят перейти на темную сторону 😈 и и насладиться красотой, рожденной во тьме.
❤1
Котики-кротики, привет!
Как вы уже знаете, мы проводили бесплатный вебинары на тему продуктового дизайна. И вот наконец-то выкладываю запись ⚡️
На вебинаре расскажем:
В вебинаре учавствуют:
Как вы уже знаете, мы проводили бесплатный вебинары на тему продуктового дизайна. И вот наконец-то выкладываю запись ⚡️
На вебинаре расскажем:
• Какие ошибки допускают дизайнеры при проектировании интерфейсов, как продуктовый дизайнер может их предотвратить • Зачем компании нужен продуктовый дизайнер, зона его ответственности • Какие возможности открывает эта профессия • Какими инструментами нужно владеть: обязательный минимум и желательный максимум • Разбор кейсов по продуктовому дизайнуВ вебинаре учавствуют:
• Осипова Анна, наш арт-директор • Илья Наринский, дизайн-директор Delivery Club • Дмитрий Пронин, директор по развитию IMBAТем временем в нашем офисе царит покой и умиротворение, хочу поделиться с вами нажитой атмосферой сегодня)
И ещё, любое обучение подразумевает выполнение заданий. Так что публикую первое задание для всех, кто хочет попасть к нам.
Заданице под кнопкой 👇
И ещё, любое обучение подразумевает выполнение заданий. Так что публикую первое задание для всех, кто хочет попасть к нам.
Заданице под кнопкой 👇
Доброе утречко, кото-кролы!
Вижу вы выполняете задание по неоморфизму, не могу дать обратную связь каждому, но я уже увидела несколько типовых ошибок, рассказываю. Основная проблема это эксперементы с цветами.
На нашем сайте REQUESTdesign есть элементы черного неоморфизма. Например на странице "Продвижение" или "Контакты".
Поэтому я подготовила для вас руководство по черному неоморфизму. Вы можете полностью рассмотреть все детальки по ссылке 👇
https://www.figma.com/file/A43lRMR3XkBApsGJLINfb0/Untitled?node-id=0%3A1
Главная ошибка заключается в вашей излишней уверенности в себе))) Вы начали экспериментировать с цветами и картинками, в итоге получилось на уровень ниже, чем у ребят, которые просто сделали белую тему, с правильными настройками.
Разумеется у черной темы свои настройки и чтобы подобрать их самостоятельно просто посмотреть и сделать на глаз недостаточно, нужен опыт и навыки. Поэтому я сделала для вас иконки в черном цвете, чтобы вы смогли полностью скопировать эффект правильно!
И как вы уже поняли, дорогуши, под каждый другой цвет тоже нужны свои индивидуальные настройки. Поэтому не беритесь за эксперементы, сделайте лучше тоже, что и все, но правильно и без ошибок.
Вижу вы выполняете задание по неоморфизму, не могу дать обратную связь каждому, но я уже увидела несколько типовых ошибок, рассказываю. Основная проблема это эксперементы с цветами.
На нашем сайте REQUESTdesign есть элементы черного неоморфизма. Например на странице "Продвижение" или "Контакты".
Поэтому я подготовила для вас руководство по черному неоморфизму. Вы можете полностью рассмотреть все детальки по ссылке 👇
https://www.figma.com/file/A43lRMR3XkBApsGJLINfb0/Untitled?node-id=0%3A1
Главная ошибка заключается в вашей излишней уверенности в себе))) Вы начали экспериментировать с цветами и картинками, в итоге получилось на уровень ниже, чем у ребят, которые просто сделали белую тему, с правильными настройками.
Разумеется у черной темы свои настройки и чтобы подобрать их самостоятельно просто посмотреть и сделать на глаз недостаточно, нужен опыт и навыки. Поэтому я сделала для вас иконки в черном цвете, чтобы вы смогли полностью скопировать эффект правильно!
И как вы уже поняли, дорогуши, под каждый другой цвет тоже нужны свои индивидуальные настройки. Поэтому не беритесь за эксперементы, сделайте лучше тоже, что и все, но правильно и без ошибок.
Figma
Неоморфизм (черный)
Created with Figma
Посленовогодний приветик всем!
Сегодня я хочу выложить для вас подборку трендов UI дизайна, на примере наших проектов.
Но не просто чтобы показать вам веселые картинки, а чтобы вы выбрали один из наших проектов, который понравится больше других и я записала для вас мастер-класс по отрисовке его UI.
Вот такие блага нового года вас ждут в ближайшем будущем, все примеры проектов есть в нашем портфолио на сайте REQUESTdesign, так что можете подробнее рассмотреть их при желании!
Сегодня я хочу выложить для вас подборку трендов UI дизайна, на примере наших проектов.
Но не просто чтобы показать вам веселые картинки, а чтобы вы выбрали один из наших проектов, который понравится больше других и я записала для вас мастер-класс по отрисовке его UI.
Вот такие блага нового года вас ждут в ближайшем будущем, все примеры проектов есть в нашем портфолио на сайте REQUESTdesign, так что можете подробнее рассмотреть их при желании!
Какой проект интерес больше?
Anonymous Poll
6%
ESF
59%
3d (Cinema 4d)
5%
Центры Восстановления
4%
Upvel
13%
Foto Request
0%
Pozarnik
12%
Restart