Когда работа над визуальной частью проекта закончена, и все макеты готовы, приходит время передать их в разработку. А чтобы после “связи с движком” все осталось так же красиво как и в макете, необходимо добиться полной гармонии между дизайнером и разработчиком.
Всем привет! Мы ИТ-компания BSL– технологический партнер в продуктовой разработке и интеграции. В данной статье наш Team Lead Frontend Developer – Андрей рассказал о типичных ошибках при разработке интерфейсов по уе отрисованным макетам, способах их решения и, в целом, о правильном подходе при проектировании. Как мы знаем, не всегда дизайн-макеты идеальны, где-то могли упустить состояния, где-то не описано поведение анимаций, где-то дизайнер не знает вашу ui-библиотеку и так далее. Обо всём этом ниже.
«Минимализм против ярких цветов» — это не название батла, а запрос клиента. «Заставили» монохромные кнопки привлекать внимание, «отжали» ⅓ экрана на огромное меню и буквально добавили на лендинг ДНК бренда. Почему заказчик вернулся на редизайн сайта спустя 2 года, и что из этого вышло — в статье.
В данной статье содержатся тесты фреймворка Cample.js бета-версии 3.2.0-beta.6. Это нулевой отчёт о тестах. По мере изменения результатов фреймворка, возможно, могут выйти ещё несколько отчётов.
Отчёт включает в себя сравнения по скорости с популярными фреймворками и библиотекой, а также сравнение с реализацией на чистом javascript.
Здравствуйте, меня зовут Дмитрий Карловский, и я.. буквально только что написал эту статью. Ну, на самом деле вчера. А если точнее, то в этом году. Удачи вам понять когда же именно.
Далее вашему вниманию представлен чуть более подробный, но всё же бесчеловечный анализ этого вопроса..
Привет, Хабр! Меня зовут Юлия, я старший аналитик-проектировщик компании SimbirSoft. Работаю в сфере IT более 10 лет, в моем портфолио создание более 20 IT-систем для различных проектов: флагмана металлургии, медицинского проекта (6 стран присутствия), автомобилестроительной компании, онлайн-кинотеатра, сервиса доставки еды, сервиса рекламных объявлений и многих других.
Эта статья будет интересна всем тем, кто так или иначе сталкивался с проектированием новых IT-систем или оптимизацией существующих с точки зрения аналитики и/или дизайна.
Дизайн-концепция – это то, как будет выглядеть интерфейс будущей IT-системы. Она отражает не только дизайн, но и конструктивные особенности (основную функциональность для достижения бизнес-целей). При этом дизайн-концепция не требует тщательной проработки макетов для всех экранов. Достаточно отобразить основную парадигму проектирования интерфейсов, которая будет однозначно понятна заказчику и команде разработки. Как это сделать – будет подробно описано в данной статье.
Кто может выполнять проектирование дизайн-концепции? Любой IT-специалист, который владеет аналитическими и дизайн-инструментами, имеет опыт в проектировании IT-интерфейсов и обладает навыками для проведения UI/UX-исследований.
Куда мы смотрим в первую очередь?
При создании дизайна, будь то целевая страница или любой другой элемент, важно управлять потоком внимания пользователя. Мы можем задать себе три важных вопроса: на чём изначально сфокусируется взгляд зрителя? Что будет влиять на то, как будет двигаться взгляд, и на чём он будет сосредоточен в следующий момент?Можем ли мы спроектировать наши страницы таким образом, чтобы контролировать направление взгляда и направлять его к нашей цели?
Паттерны движения глаз становятся важным фактором. Они помогают определить, как пользователи сканируют информацию и каким образом их внимание перемещается по странице.
Казалось бы, как криповая голова с мозгами может быть связана с технологичным брендом? А вот может. В статье рассказывается о доверии между исполнителем и заказчиком и разработке полного образа бренда: маскота, шрифтового логотипа и лендинга. Спойлер: все довольны результатом.
Кажется, что уязвимость - штука техническая, но на Госуслугах есть интересная комбинация уязвимостей (ну или, скажем, черт, особенностей) в сфере CSS, дизайна, юзабилити, которые мошенники используют в социальной инженерии.
Узнал я про это из вот этого ролика на ютубе. Смотрел фоном, не ожидая чего-то интересного, но в момент, когда я услышал, как жертва атаки видит телефон мошенника на официальном сайте Госуслуг, с правильным адресом, с валидным сертификатом я не поверил своим ушам и понял, что это уже интересно... А за открытие уязвимости мы должны благодарить неизвестного мошенника, "сотрудника клиентской службы сотового оператора" или "службы безопасности сбербанка", ну вы понимаете.
Чтобы понимать, что нарисовал дизайнер, нужно проникнуться его мышлением, принципами и правилами, которые он применяет при создании макетов. Только тогда мы сможем правильно интерпретировать его дизайн и избежать простых ошибок, которые при разработке фронтенда забирают огромное количество времени.
Если у вас только один фронтенд, все еще не так плохо. Однако, когда их количество достигает 10, микроошибки в компонентах могут отнимать до 200-300 человеко-часов в год. С учетом современных зарплат, это значительная сумма. А помимо фронтенда у нас также есть бекенд, девопс и тестирование, что также требует значительных затрат. Давайте вместе разберемся, как можно справиться с этой проблемой.
Привет! Меня зовут Сергей Криворучко, я работаю наставником на курсе «Фронтенд-разработчик» в Практикуме. Иногда у студентов возникают сложности с PerfectPixel — расширением Chrome, совмещающим макет из Figma с вёрсткой в браузере.
В этом материале я расскажу, как корректно экспортировать макет, установить PerfectPixel, управлять расширением и находить элементы страницы, которые стоит поправить на вёрстке. Для примера взял макет, с которым работают студенты на курсе.
У меня многолетний опыт удаленной работы из разных локаций мира от привычных фрилансерских островов Юго-Восточной Азии до мировых столиц вроде Лондона. В этой заметке я хочу рассказать о своих наблюдениях. И показать, насколько сильно локация влияет на возможности в go global!
1️⃣ У всех людей, включая потенциальных работодателей, клиентов или кастомеров, есть "географические" стереотипы и предрассудки. Прежде всего о стоимости услуг или зарплате.
Например если американский клиент видит фрилансера из Лондона, то не ожидает низкой цены услуг. И просто находясь в Лондоне, автоматически фильтруются все мелкие чеки.
Более того, люди могут делать выводы и о квалификации специалиста: очевидно, что среднестатистический продакт из СФ скорее всего квалифицированнее севильского. Поэтому локация может быть в неотором смысле маркером экспертности, что безусловно влияет на глобальную востребованность.
То есть переезжая куда-то, мы закладываем некоторые ожидания для наших будущих контрагентов. Да, возможно это несправедливо, но так уж устроен мир.
2️⃣ Или например на второй год странствий немало талантливых дизайн-агентств мск/спб планирует переезд в Барселону. Про быт нет вопросов: считаю этот город лучшим в мире для жизни.
Но делать свое агентство барселонским - это значит:
а/ Задать невысокие ожидания по чеку: для американского бизнеса что Барселона, что Верона, что Лиссабона - примерно одно и то же. Читай: "в Европе закажем подешевле". А чеки побольше будут уходить тем, кто переехал в Лондон, Нью-Йорк, Долину или хотя бы в Дублин.
После того как я впервые съездила на завод, стало понятно, почему в дизайнеров кидаются тапками.
Мы работали на ярких прикольных аймаках, проектируя интерфейсы MES-систем в соответствии с трендами. А потом своими глазами увидели, в какой ад для сотрудников производства это превратилось.
В разработке интерфейсов для металлургии оказалось намного больше нюансов и специфики, чем мы предполагали.
Будучи являясь студентом, нам предложили поучаствовать в одной программе. В данной программе нам преподавали курсы из различных областей, как бизнеса, так и программирования. Вот некоторые из них: «Основы.NET и знакомство с платформой разработки веб‑приложений», «Азы программирования на основе 1С», «HTML и CSS», «Навыки работы с системой управления версиями Git», «Javascript».
По прохождению всех курсов, мы должны были показать, чему мы научились, поэтому нам заранее предложили направления и соответствующие им проекты, которые мы по завершению одного учебного года должны были защитить.
Если вы достаточной древний, то на личном опыте знакомы с технологической энтропией: железо становится мощнее, но софт деградирует. Photoshop тормозит, а ТВ тупит даже при переключении каналов. Портится не только код, но и интерфейсы.
С энтропией кода бороться тяжело. С интерфейсами вопрос решить проще, если проектировать их по правильным принципам.
Анализ конкурентов — это когда мы оглядываемся вокруг и смотрим, с кем мы делим рынок, чем они на нас похожи, что делают. Мы ищем удачные решения у конкурентов, подрезаем рабочие практики, анализируем успехи и ошибки.
К концу статьи вы узнаете:
1. Почему копировать — не лучшая затея;
2. Что делать, если конкурентов нет;
3. На что смотреть в чужих продуктах;
4. Зачем рассказывать пользователям о сильном конкуренте;
5. Как не стать унылой копией конкурентов.
У нас полно лендингов и бизнес просит еще! Но каждый новый лендинг нужно проводить по процессу. Хочется автоматизации - нужен конструктор! Я неоднократно читал статьи на Хабре про самописные решения – 5 лет, и все в лучшем виде, но для нас это "too much". Мы уложились менее чем за год с "Bitrix". До этого серьезно прошерстили рынок на предмет типовых решений, а также отбросили вариант решения с нуля. Расскажу о процессе выбора и что мы в итоге получили.
Долго думал писать или не писать эту статью, ведь скорее всего святые моралисты закидают меня помидорами. Но давайте будем реалистами, 70% дизайна продукта это применение бест практис от других продуктов, смежных или нет - пофиг.
