Веб-дизайн постоянно развивается и одной из главных тенденций последних лет стало внедрение анимации и интерактивных элементов. Эти технологии не только добавляют визуальную привлекательность сайтам, но и существенно улучшают качество взаимодействия. Взаимодействие с веб-страницами становится более интересным и информативным. В этой статье мы рассмотрим, для чего применять анимацию и интерактивные элементы в веб-дизайне, а также их виды и преимущества использования.
Этот урок мы посвятим работе с типографикой в Figma. Вы узнаете, как работать с модульными сетками в «Фигме». Урок предназначен для детей и подростков 8 лет и старше.
Figma — один из самых удобных современных инструментов для графического дизайна. Возможность открыть в браузере, упрощенный интерфейс, бесплатный режим доступа позволяют быстро освоить веб-дизайн даже детям и подросткам. Сегодня поделимся одним из материалов. Больше полезных гайдов для новичков можно найти в этой подборке.
Модульная сетка — это система вертикальных и горизонтальных линий, которые используются для выравнивания и организации контента на макете. В области типографики такие сетки являются инструментом для достижения гармоничного распределения текста, графики и прочих компонентов дизайна.
Рецензия на книгу «UX/UI дизайн для создания идеального продукта»
Привет! Сегодня расскажу о том, что узнала из книги‑гида Ярослава Шуваева «UX/UI дизайн для создания идеального продукта». Дабы рецензия не вышла совсем уж пространной, решила разделить её на две части. Поговорим о SUS, MVP, концепциях Personas и JTBD, разнице между MVT и A/B‑тестированием, об API, как о факторе, формирующем UX, и многом другом.
Зачастую full stack (и не только) проекты создаются без функциональных тестов.
Это вызвано ошибочным предположением, что тесты добавляются для уже готового продукта и они нужны только для поддержки качества.
Необходимость в тестах также возникает, когда количество багов или жалоб пользователей переходит все границы. В такой ситуации разработчики проекта решают добавлять тесты, и тут выясняется, что это не так просто, как большинство думает.
Проблема сложности тестов в подобной ситуации кроется в том, что на этапе проектирования продукта никто не думал о его тестировании и необходимости сделать его пригодным для тестирования (автоматического).
На этапе проектирования самого продукта гораздо проще проектировать тесты, потому что вы не ограничены существующим кодом продукта, фреймворками и утилитами, входящими в состав продукта.
В этой части статьи я на примере покажу, как можно спроектировать простое веб-приложение, используя функциональное тестирование, и имплементировать веб-приложение.
Современный пользователь интернета настолько привык к мусорному содержимому сайтов, что даже психологически у большинства не возникает негодования от того, что ему пытаются загадить мозги пробудив низменные инстинкты: жадности, зависти, эйфории, обострение чувств голода и похоти. На этом построен заработок и товарооборот в современном мире.
Главная задача забрать у тебя в начале время (что бы понравилось), так сказать «подсадить», а потом и деньги, когда психологически увязнешь в этом болоте. Не важно на какую аудиторию это рассчитано, для каждой группы психологически зависимых людей есть свои уловки. Даже ища информацию на техническую тему в процессе поиска можно свернуть не туда.
Случается, ты просыпаешься и осознаешь: так больше продолжаться не может и нужно что‑то менять. Разные кодовые базы, избыточное легаси и нестабильность мешают пользователям получать удовольствие от общения в твоем приложении. И эта мысль подводит тебя к развилке: один путь ведет к сложному и долгому рефакторингу легаси за почти 10 лет, второй к не менее долгому, а, порой, более сложному процессу переписывания с 0. Но какой бы путь ты ни выбрал, в любом случае начинаешь испытывать азарт — предстоит большая Задача (именно с большой буквы).
Привет Хабр, меня зовут Федор Неживой, я ведущий программист‑разработчик в команде VK Мессенджера и сегодня расскажу вам, как мы перестраивали и обновляли один из крупнейших проектов в рунете. В статье будет боль, пот, реальный код и детали, как мы шаг за шагом пришли к масштабному обновлению, а потом внедряли то, что получилось.
Приветствую всех! В данной статье, речь пойдёт о достаточно необычной теме, информацию о которой я почему-то не нашёл, хотя она достаточно полезна в современных JavaScript фреймворках и библиотеках для создания пользовательских интерфейсов, ведь, в некоторых случаях, применение концепции может помочь ускорить работу с DOM в несколько раз.
Меня зовут Лёша, я дизайн-лид канала Альфа-Бизнес, курирую создание лучшей дизайн-системы для бизнеса. Сегодня расскажу вам, как дизайн-система работает на этапе Discovery.
Я не отказываю себе в удовольствии заглянуть в фастфуд. У продуктовой разработки и у ресторанов быстрого питания много общего. Мы следуем выстроенному процессу, соблюдаем стандарты, чтобы удовлетворять потребности клиента и приносить прибыль бизнесу.
В статье разберём три варианта обновления продукта на простой аналогии с фастфудом и бургерами. Буду объяснять, при чём тут дизайн-система и консистентность максимально просто и с примерами, чтобы поняли не только дизайнеры.
На первый взгляд значение цветов в дизайне может показаться переоцененным, но этот аспект нельзя не брать во внимание — цвета воздействуют на нас на подсознательном уровне. Более 85% людей по своему психотипу являются визуалами, для которых визуальный канал восприятия информации является основным. Поэтому правильный выбор цветовой гаммы для сайта может значительно влиять на эмоции и поведение пользователей.
Приветствую всех! В данной статье хотелось бы рассмотреть такой проект как HMPL.js. "Зачем он нужен и как благодаря нему можно сократить размеры javascript файлов с сохранением дизайна сайта?" - на все эти вопросы я постараюсь ответить.
Так как данный проект является активно мной разрабатываемым, то данным блогом я бы хотел начать для себя активную отчётную деятельность, где аудитория, как в роли заказчика, а я, как в роли исполнителя, буду делать небольшие статьи о проделанной работе. Если вам будет интересна данная идея, то будет круто, если вы оставите комментарий по данной теме! Мне будет очень интересно прочитать!
Собрал легендарные примеры UX-дизайна, которые поменяли и курс развития различных индустрий, и нашу реальность.
Человек по своей природе пытается улучшить то, что его окружает. Это внутреннее стремление вдохновляет и на создание выдающихся пользовательских решений, о которых хочу рассказать.
Главная цель UX-дизайна – создание интуитивно-понятного и удобного интерфейса, который будет способен решать проблемы и производить благоприятное впечатление на пользователей. Впоследствии, лучшие из пользовательских решений становятся эталоном и укореняются в повседневной жизни людей.
Давайте рассмотрим величайшие примеры использования UX-дизайна.
Про UX в России и мире. Мнение о том, что нас ждет завтра.
В эпоху цифровой трансформации дизайн интерфейсов становится ключевым элементом успеха крупных технологических компаний. От супераппов до привычных нам платформ — мы ежедневно сталкиваемся с решениями, которые либо упрощают, либо усложняют нашу жизнь.
В этой статье я рассмотрел, как бигтехи диктуют тренды в UX, почему российские дизайнеры встраиваются в этот процесс и какие культурные и технологические особенности влияют на будущее интерфейсов.
Узнайте, как супераппы меняют наше взаимодействие с технологиями и что ждет нас в ближайшие годы!
А я, как обычно, сделал краткий обзор её новых функций и возможностей.
Если кратко: маловато нововведений для того, чтобы присваивать ей новый номер.
Хотя большинство новых функций вполне себе полезные. Некоторые ускорят работу проектировщика, быстро набрасывающего прототипы. Какие-то позволят навести больше красоты тем, кто больше смотрит на дизайн. А какие-то добавят в прототипы больше динамических составляющих, полезных для тестирования на живой аудитории.
Под катом мой видеообзор и текстовый перечень основных нововведений.
Мой путь UX-дизайнера, разумеется, состоял из взлетов и падений.
Сейчас, спустя время, я нередко вспоминаю о различных проектах, в которых участвовал, и о решениях, которые мне приходилось принимать – успешных, и не очень. Поэтому, на данном этапе своего пути, я хочу подвести некоторые итоги.
И первое, что я хотел бы обсудить – совершение ошибок. Мы все совершаем ошибки и учимся на них. Таков вот способ получения опыта в жизни человека. И, как оказывается впоследствии, негативный опыт ценнее позитивного.
Итак, какую самую серьезную ошибку совершил я? И какой урок я извлек после?
Я решил проанализировать свой опыт и отследить те самые моменты, когда были приняты неверные решения, отметить их для себя и поделиться с Вами, чтобы вы смогли избежать их. Или, как минимум, быть готовыми к ошибкам.
Я не единственный дизайнер интерфейсов, который принял такое решение. Многие из нас делятся своими историями, пытаясь найти те самые промахи, с которыми может столкнуться дизайнер. Я изучал и чужой опыт, благо на Reddit'е таких историй уйма.
Оставлю на ваше усмотрение: либо последовать нашим советам, либо самостоятельно строить свой путь.
Итак, классифицировал самые популярные ошибки 👇
Всем привет! В данной статье я бы хотел рассказать о таком понятии как "ключи" в JavaScript фреймворках и библиотеках; зачем они используются и как помогают при работе с DOM.
Зачастую, на собеседованиях спрашивают про эту тему и нередко выходят ответы по типу: "чтобы предотвратить неконтролируемое поведение" или "их нужно указывать, т.к. это что-то на подобие уникальных идентификаторов" и др. Конечно, данные ответы с одной стороны - правильные, но главного они не отражают.
Я постараюсь внести небольшую ясность в эту тему показав то, как эта концепция работает на реальных примерах и какой код за ней стоит.
Эта статья посвящается всем тем, кто помышляет о профессии дизайнера в IT, а также уже действующим единицам в нашем деле. Остальным скорее на оценку с точки зрения своего опыта.
1. Не стройте иллюзий относительно IT курсов и рекламы
Без должного энтузиазма и желания развиваться в сфере UX/UI-дизайна, а также продуктового дизайна (далее по тексту – дизайн) курсы чаще не помогут вам достичь высоких результатов в форме высокооплачиваемых должностей на рынке дизайна. Рынок зарабатывает на том, что модно и всё ещё старается продать вам мечту о беззаботной работе с высокими зарплатами независимо от географии за относительно небольшую плату за курс. На мой взгляд это в большинстве случаев просто фарс и надувательство, эксплуатация модного явления и спекуляция разношёрстных подонков на этой основе. Вы сами должны достаточно сильно желать стать дизайнером, желать служить этому делу или какому-либо другому делу, чтобы начать путь без дополнительных стимулов и самообманов, мол вот сейчас куплю курс и это уже обяжет меня начать какой-то путь, ведь я потратил деньги, а значит должен начать проходить курс и стать дизайнером, ну или ещё какие-то подобные убеждающие себя предлоги.Если твоя цель служить профессии – шаблонные программы курсов часто не твой путь.
Если хочешь просто «влиться в тему» и работать на «галере» выполняя задачи механизмом системы, курсы – твой путь. Однако, есть случаи, когда и после курсов люди добивались высоких результатов в карьере. Всё неоднозначно и исключения есть всегда, однако общая практика и данность, на мой взгляд, такова.
На протяжении последних недель я разбираю аналоги YouTube и пора закончить эту трилогию последними российскими сервисами. Смог ли Дзен под руководством Яндекса и полностью скопированная оболочка под названием Платформа победить западного брата? Сегодня разберу их интерфейс и удобство, а также наконец закончу эту сагу.
Привет! Меня зовут Денис, я продуктовый дизайнер в X5 Tech. Последние несколько месяцев мы, вместе с коллегами приводили в порядок, рефакторили, чистили и доводили до ума дизайн-систему внутреннего бэк-офиса X5 для личного кабинета сотрудника. Расскажу, на какие подводные камни мы наткнулись, к чему готовиться и зачем вообще заниматься рефакторингом в дизайне.
При разработке сайта важно уделить внимание тому, насколько он будет удобен и функционален, отображаясь не только на экране компьютера, но и на экранах других устройств. В этой статье мы расскажем, что значит «правильная адаптация» сайта, как именно работает мобильная оптимизация и чем чревато ее отсутствие.
Итак, что мы вообще знаем о том, что такое оптимизация? Это процесс, при котором frontend-разработчик и web-дизайнер адаптируют верстку сайта под размеры и функционал других устройств, помимо компьютера. Делается это для того, чтобы интерфейс сайта, а также текст и визуальные элементы отображались и функционировали корректно и на смартфоне, и на планшете, и на других устройствах, отличных от компьютера.
Этот пост в оригинале (eng) https://www.setproduct.com/blog/dark-side-of-figmas-updates
Глава 1: В какой‑то момент всё пошло не так
Смотря недавнюю конференцию CONFIG24, я не мог избавиться от неприятного зуда.
Чем сильнее зуд одолевал меня, тем больше приходило осознание – приоритеты Figma сместились с улучшения сервиса на увеличение прибыли.
Я неустанно задавал вопросы:
Что произошло с Figma, которую мы все так горячо любили?
Почему в приоритете деньги, а не список фич от пользователей, которые мы просим?
И если Фигма - ФСЁ, то что это сулит дизайн-инструментам в будущем?
Провал сделки с Adobe, похоже, стал переломным моментом.
Фокус Figma на создании функций с использованием искусственного интеллекта для увеличения количества пользователей - крутой поворот от первоначальной концепции сервиса.
Не подумайте, я не против использования искусственного интеллекта, но больш усилий, похоже, затрачивается на что-то "модное", но не особо нужное.
Функция автоматического переименования слоев была изюминкой Figma, но ее недостаточно, чтобы компенсировать недостаток внимания к запросам пользователей.
