Веб-дизайн

Всем привет! В очередной статье мы представляем вам список из 10 компаний, для которых использование Фигмы стало отправной точкой на пути к новым вершинам.

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

Возможно, вы планируете разработать собственный перспективный проект и думаете над тем, какой инструмент использовать. Или работаете в компании, которая пользуется другими инструментами для дизайна и прототипирования. В любом случае, после прочтения этой статьи — у вас будет еще +10 причин начать использовать Фигму.

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

Хочу в очередной раз рассказать о результатах исследования дизайна сайта, который привлёк моё внимание. В прошлый раз я писал о CSS-механизмах, лежащих в основе нового дизайна Facebook. А теперь мне стало любопытно исследовать CSS-код Twitter. Новый дизайн Twitter появился почти год назад. В CSS-коде Twitter я нашёл много интересного: кое-что кажется мне просто замечательным, а кое-что — странным.

Приветствую. Время от времени мы спускаемся в подвал, чтобы проведать одного старого проектировщика и послушать его дурацкие байки, разбавленные тупым юмором и оскорблениями. У пытливого читателя может немедленно возникнуть резонный вопрос, зачем же оно нам нужно. Зачем мы подвергаем себя этим мукам? Ответим словами одного известного режиссера: “Потому что это весело!”.

Во времена пандемии COVID-19 многие компании столкнулись со сложностями: перерывы в обслуживании клиентов, ошеломительные нагрузки на колл-центры, частичная или полная остановка операций, принудительный переход в онлайн… Как показал опыт предыдущих месяцев, в столь неопределенные времена необходимо поддерживать веб-площадку, как основную точку информирования пользователей и делать все возможное, чтобы пользователи продолжали получать положительный опыт от взаимодействий с вашим брендом, поддерживая доверие.

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



Пример структуры веб-сайта (Блоки кликабельны)

Какие разделы включить? Что по поводу контента? Мы серьезно все продумали, потратили более месяца на исследования и собрали в этом гиде весь наш 18-летний опыт по созданию сайтов. Дочитав эту статью, вы обретете исчерпывающее представление о том, почему именно так должен быть структурирован сайт компании или продукта, мы также немного коснемся фундаментальных принципов SEO и планирования контента.

По словам многих фронтенд-разработчиков, веб становится все лучше и лучше с каждым годом. И это хорошо. Плохо то, что до хорошего состояния при таких темпах улучшения мы можем просто не дожить. Что дно, с которого мы поднимаемся, находится так глубоко, что и не выплыть вовсе. Впрочем, о том, как все плохо в связке HTML-CSS-JS, за последние время написано было немало. Так что сегодня обойдемся без горестных стенаний и помечтаем о том, что можно сделать и почему это будет сделано.

Введение от автора обзора

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

Введение

В предыдущей статье мы рассмотрели с Вами вопрос интеграции фреймворка «Webix» в «Electron» и создание на основе этих фреймворков простого GUI приложения. Цель данной статьи является дальнейшую развитие вопроса интеграции в GUI интерфейс, построенный с помощью «Electron» и «Webix» других «JavaScript» фреймворков. Все элементы GUI реализованные в «Webix» характеризуются параметром «view». В зависимости от значения этого параметра будет отображаться тот или иной GUI элемент. Количество типов элементов «view», которые позволяет создавать «Webix» перекрывают порядка 90% задач при реализации интерфейса. Оставшиеся 10% это как раз тот случай, когда необходимо осуществить интеграцию либо ранее написанного кода либо фреймворка (библиотеки), которые в явном виде не поддерживаются в «Webix». Для осуществления интеграции со сторонними фреймворками(библиотеки) создадим вместе с Вами свой «view» элемент «Webix».

Постановка задачи

Создать GUI приложение «Electron+Webix», которое будет строить график функции вида «y=a*sin(b)+c» с возможностью изменения параметров функции «a, b и c» с динамической перерисовкой графика.

Привет, Хабр! Представляю вашему вниманию перевод статьи «To Wash It All Away» автора James Mickens.



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

Да, вот такой гибридный, русско-английский заголовок получился… Поэтому давайте сразу кое-что проясним. Итак, если SEO широко известный (в узких кругах) термин, то AMP — ещё не столь. Accelerated Mobile Pages был анонсирован Google в 2015 г. (см. статью в Википедии), как инструмент, позволяющий быстро просматривать веб-страницы на мобильных телефонах. Со временем AMP превратился в фреймворк, позволяющий создавать страницы для любых сайтов (не только для мобильных устройств), и расширил свою «номенклатуру»: собственно сайты (AMP Websites), истории (AMP Stories; тема этой статьи), рекламные блоки (AMP Ads), и электронные письма (AMP email). За всем этим, как было сказано выше, стоит Google, и если вас интересует продвижение сайтов в этой поисковой машине — полезно будет отнестись к теме AMP с должным вниманием. Но давайте сначала посмотрим как выглядят эти самые AMP-истории (AMP Stories; update: с 1 мая 2020 переименованы в Web Stories), затем решим нужны ли они нам, и, если окажется, что нужны — рассмотрим как это сделать.

История кнопок в картинках от head of design Дмитрия Уколова: текстовые ссылки, скевоморфизм, Flat и Material design.

Всем привет! Меня зовут Артур, я работаю frontend-разработчиком в Exness. Не так давно мы перевели один из наших проектов на веб-компоненты. Расскажу, с какими проблемами пришлось столкнуться, и о том, как многие концепции, к которым мы привыкли при работе с фреймворками, легко перекладываются на веб-компоненты.

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

Последние 7 лет я занимаюсь управлением индивидуальными IT проектами в рамках веб студии, которой я руковожу, и за это время я набрал неплохой опыт по работе с крупными проектами, которым и хочу с Вами поделиться. Мои клиенты, обычно, из США, Франции и Германии, но есть выполненные проекты в Канаде, Швейцарии, Дании, Австралии, Японии и т.д. Я проектировал социальную сеть, онлайн-аукцион, фитнес-конкурс, сервис по подбору автозапчастей, доставку еды, онлайн-кабинеты по приему и обработке заказов, торговые площадки и другие виды сервисов. Как видите, проекты разные, но их объединяет одна отличительная черта: пользователь взаимодействует с сервисом по заданному алгоритму. Моей основной задачей является продумать эти алгоритмы.

А если детальнее, то я должен:

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

Про нюансы своего дела и набитые шишки напишу в отдельной статье. А теперь, собственно, о проектах…

Как дизайнеры, мы почти всегда ищем новые советы, хитрости и инструменты, которые помогут ускорить и улучшить наш рабочий процесс. После нескольких месяцев тестирования расширений Chrome я составил список из 10 лучших расширений и плагинов для дизайнеров.

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

Какие проблемы могут быть у frontend-программиста, если тестировщик запустит его приложение на iPad с новой трекпад-клавиатурой, Windows-планшете, с неопределенным состоянием “режима планшета” или ноутбуке с подключенным к нему телевизором c поддержкой Multi-touch?

Это далеко не полный список допустимых конфигураций оборудования, которые мы поддерживаем при разработке системы СБИС. Сегодня СБИС — это не только знакомое многим решение для сдачи отчетности, ведения электронного документооборота и бухгалтерии, но и набор инструментов для автоматизации розницы, общепита, доставки и логистики. В этих сферах нужно уметь хорошо работать на самых разных планшетах и гаджетах с различными экранами и типами устройств ввода. И далеко не всегда проблемы могут быть связаны с экзотическим сочетанием настроек операционных систем и драйверов: если взять обычный iPad с браузером Safari, Android планшет или ноутбук-трансформер на Windows10 с последней версией Google Chrome — везде будет свой набор ошибок и особенностей обработки пользовательского ввода.

Эта статья о том, как, а главное, зачем вводить в обычных Web приложениях режим поддержки Touch.

Всем привет!

Я – Максим Скворцов, UX/UI-дизайнер Omega-R, международной компании по разработке и интеграции IT-решений. Я занимаюсь проектированием и визуализацией интерфейсов мобильных и веб-приложений.

На базе своего опыта в сфере информационных технологий и экспертизы компании хочу поделиться своим видением и подходом к применению одного из инструментов проектирования дизайна – user flow. Почему его используют и почему он является ценным помощником для дизайнера? Как может выглядеть user flow и как его создать?

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

Сегодня мы поговорим о следующих новых Figma плагинах:

• AutoGrid — Поддержка сетки для AutoLayout.
• Tracking – Плагин для создания аннотаций отслеживания.
• Find and Replace Colors – Организация цветовых стилей в ваших дизайнах
• Spacing Manager – Плагин для согласованных отступов в компонентах
• Geometric – Создание математических фигур и кривых
• Halftones – Плагин, позволяющий накладывать точечный или полутоновый фильтры на картинки
• Batch Styler – Изменение нескольких стилей текста одновременно
• Spell Inspector — Поиск и исправление орфографических ошибок
• Sitemap – Плагин для создания карты вашего сайта
• Style Organizer — Показывает и упорядочивает все цветовые стили
• Focus CSS — Более удобное использование CSS в Figma
• Flipbook – Плагин для анимации ваших дизайнов в Figma
• SwiftUI Inspector – Плагин для улучшения рабочего процесса разработки для платформ Apple
• Filter – Фильтрующий плагин для ретуши ваших изображений