Рубрика «веб-дизайн»

27 отличных open source-инструментов для веб-разработки - 1

Перевод 27 Amazing Web Development Tools for the Past Year (v.2018)

В 2017-м мы сравнили около 7 500 open source-инструментов для веб-разработки, из которых выбрали 27 лучших (0,4%). Это крайне конкурентный список, в который вошли инструменты, библиотеки и проекты, опубликованные в течение 2017-го. Mybridge AI оценивает их качество на основании популярности, заинтересованности и новизне. Чтобы было понятно, у выбранных продуктов среднее количество звёзд на Github — 5260.

Open source-инструменты могут почти даром повысить вашу продуктивность. Также вы можете чему-то научиться, читая исходный код и создавая что-нибудь на основе этих проектов. Так что рекомендуем уделить время и поэкспериментировать с инструментами из нашей подборки, возможно, какие-то из них прошли мимо вас.
Читать полностью »

Возникла у нас в команде необходимость в одном выпадающем списке добавить значки к элементам списка в зависимости от типа элемента. Сам список сторонний компонент, который трогать не хотелось. Значки реализованы в виде шрифта, т. е. являются символами юникода.
В качестве решения на сервере в зависимости от типа элемента добавили в качестве обычной буквы символ значка uXXXX и на клиенте получили красивые квадратики, поскольку шрифт, используемый для списка не содержит в себе коды наших иконок. Тут нам на помощь пришел CSS псевдокласс ::first-letter
Читать полностью »

Привет, это снова Катя из Яндекс.Денег. Продолжаю свою историю о том, как я перестала верстать и начала жить. В первой части я рассказала, как меня сюда занесло и чем занимаются наши фронтендеры. Сегодня — про фронтовый стек, откуда там React и куда делся БЭМ.

Спойлер: БЭМ пока никуда не делся ¯_(ツ)_/¯. Погнали!

Реактивный фронтенд. История о том, как мы снова всё переписали - 1

Внимание: высокая концентрация фронтенда. Много текста, картинок и кода, как обещала.
Читать полностью »

Привет! Представляю вашему вниманию перевод статьи "The divisiveness of design thinking автора" Jon Kolko.

Дизайн-мышление — это «как сифилис» — пишет в своей недавней популярной статье(1) Ли Винсел из Стивенсонского Института Технологий. Другие распространенные взгляды на дизайн-мышление — Наташа Джен: «Дизайн-мышление — это вздор»(2) и, еще в 2011, Брюсс Нассбаум: «Дизайн-мышление — это неудачный эксперимент. Что же дальше?»(3).

Если вы не знакомы с дизайн-мышлением, то вот определение от Тима Брауна, генерального директора консультационной фирмы по дизайну IDEO, — «это ориентированный на человека подход к инновациям, вдохновленный дизайнерскими приемами для совмещения потребностей людей, возможностей технологий и требований к успеху в бизнесе»(4). Берется процесс, который дизайнеры использовали для изготовления стульев, машин, тостеров, и применяется к стратегиям в бизнесе и задачам больших систем.

Особые моменты:

  • У дизайн-мышления богатая и содержательная история.
  • Дизайн-мышление стало плоским и пустым.
  • Невозможно разделить дизайн-мышление и создание вещей.

Читать полностью »

Деградация веба или как сделать веб человекочитаемым - 1 Дисклеймер: Этой статьёй я не хочу унизить или возвысить кого-либо из пользователей, разработчиков, веб-порталов, сервисов и прочих. Приведённые скриншоты в статье, а также комментарии к ним являются субъективным мнением автора и не призывают никого с ним считаться.

Теперь к делу. Идея написания этой статьи пришла мне крайне давно. С того самого момента я собирал тезисы, примеры и мысли в кучу, а теперь постараюсь изобразить их здесь таким образом, чтобы вы смогли развить эту мысль как развил её я в своей голове. Надеюсь, у нас получится. Заранее прошу прощения за эмоциональное повествование.

Для начала наблюдение. Интернет разрастается с огромной скоростью. Нет, давайте ближе к делу. В интернете огромное количество информации. Нет, давайте ещё ближе.

Внушительное количество материалов в интернете представлено в ужасном виде. Да, вот теперь это похоже на тезис.

Под ужасным видом я подразумеваю то представление, с которым подаётся материал. Возьмём, к примеру, “захватывающую новость”, откроем на телефоне и попытаемся прочитать.
Читать полностью »

Предлагаю вашему вниманию перевод статьи Therese Fessenden — Scrolling and Attention. Статья посвящена новому исследованию использования прокрутки при просмотре сайтов. Предыдущее исследование было проведено в 2010 году, перевод статьи по нему так же был выложен на Хабре.

Прошу прощения за возможные неточности в переводе :)

Резюме: Люди скроллят вертикально больше, чем раньше, но новые eye-tracking исследования показывают, что они всё ещё смотрят на «первый экран» больше, чем на остальные.

Шаблоны человеческого поведения довольно стабильны, и гайдлайны юзабилити лишь изредка меняются по прошествии времени. Но один шаблон поведения, который всё же изменился с ранних времён веб-дизайна — это использование прокрутки. Изначально, люди редко скроллили вертикально; но в 1997 году, когда длинные страницы стали обычным явлением, они стали использовать прокрутку. Однако, пользователей всё ещё больше всего интересовала информация на «первом экране»; и даже в недавнем 2010 году наши eye-tracking исследования показали, что 80% времени пользователи тратят, просматривая именно «первый экран» страницы.

Начиная с 2010 года, с приходом адаптивного дизайна и минимализма, дизайнеры всё чаще стали создавать длинные страницы с далеко расположенными друг от друга элементами, тем самым охватывая несколько экранов. Пришло время узнать, повлияли ли эти тенденции на поведение пользователей.
Читать полностью »

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

Дайджест продуктового дизайна, май 2018

Читать полностью »

Вариативные веб шрифты - 1

Прошла уже не одна неделя с You Gotta Love Frontend конференции, но еще не поздно пройтись по нескольким поднятым вопросам. Я думаю это будет ряд статеек на интересные мне темы, надеюсь, как и вам. Данный пост это перевод на статьи о вариативных шрифтов, используя которые Lea Verou показывала ряд трюков в цикле своих выступлений "Cекреты CSS". Учитывая, что это был первый раз когда я услышал о вариативных шрифтах, о трюках говорить пока рано :)

Вариативные шрифты это будущее веб типографии которые предлагают ряд возможностей управления отображением текста на экранах (размер, жирность, стиль). И все это при относительно малом размере файла. Пора сказать goodbye бесконечным дебатам на тему, сколько шрифтов вам необходимо подключить и дать возможность вашему контенту жить новой, прекрасной жизнью.

Читать полностью »

myDribbble Meetup 2017 в Москве - 1

3 июня в Москве прошёл myDribbble Meetup 2017. На этой неформальной конференции для дизайнеров выступили полтора десятка сильных и начинающих специалистов, многие из которых представленны в одной из главных тематических социальных сетей Dribbble. Создатели инструментов Principle и Sympli, Георгий Квасников (Fantasy), Олег Береснев (Beresnev Design), Макс Орлов (ONY), Николай Иванов (AIC), Артём Геллер (Дизайн государственных систем), Иван Васильев (Альфа-Лаборатория), Илья Гришин и Олег Андрианов (ВКонтакте), Дмитрий Чута (Screens Today / Chapps), Радик Загидуллин, Даниал Сиддики, Лена Аникеева (Pixies), Роман Храмов (Tappawards / Cuberto), Андрей Сундиев, Дмитрий Осадчук, Евгений Долгов и Дарья Ганцева (Mail.Ru Group). Было много практически полезных рассказов и историй из жизни дизайнеров и компаний с живым и веселым диалогом со слушателями.
Читать полностью »

Здравствуй! Меня зовут Саша Отважный, я работаю команде Digital Business Platform Сбербанка и Сбертеха, и занимаюсь дизайном мобильных приложений и веб-проектов. Большая часть моей работы состоит из сборки прототипов разной степени детализации для разных целей. Новые инструменты и сервисы для дизайна и прототипирования выходят и обновляются каждый день. Я провёл полное и глубокое исследование инструментов, представленных сегодня на рынке, и помогу в них разобраться.

Я разбил список на три большие группы по функциональности и разберу каждую по отдельности:

Как выбрать инструмент для прототипирования в 2018 году? - 1
Читать полностью »