Pull to refresh
4
0
Evgeny Katyshev @lzhl

UX Designer

Send message

Евгений Катышев: «OpenStreetMap подходит не для всякой информации»

Reading time9 min
Views2.9K


Евгений Катышев — UX-дизайнер и турист из Нижнего Новгорода, посвятивший OpenStreetMap последние 11 лет. Он один из немногих участников сообщества RU-OSM, который не только придумал несколько своих тегов, но еще и успешно их утвердил. Как ему это удалось, зачем это делать и почему люди теряют интерес к OSM — обо всем этом он рассказал в интервью.
Читать дальше →
Total votes 9: ↑9 and ↓0+9
Comments0

Как подружить дизайнера, верстальщика и «Фигму» с помощью дизайн-системы, ломика и какой-то матери™

Reading time31 min
Views76K


Привет, Хабр. Недавно я выпендрился в комментариях и пообещал подробно ответить на вопрос о том, как дизайн-система упрощает взаимоотношения и нейтрализует конфликты между дизайнерами и верстальщиками (разработчиками). Плюс рассказать о некоторых вариантах стандартизации именования слоёв. Вот и отвечаю. Подробно. Про сетки. Про компоненты. Про иконки. Про язык. Про БЭМ. Про «фигмин» слэш и её же плагины. Про артборды и вьюпорты. Про типографику. Про стили и палитры. Про эффекты. Про экспорт растра. Про «мультиплеер». Про распределение обязанностей. Ну и немножко «о жизни, вселенной и вообще». Осторожно, трафик: внутри много картинок, есть gif-анимации. А ещё много, действительно много нудного текста. Я предупредил.
Читать дальше →
Total votes 43: ↑42 and ↓1+41
Comments36

Как мы делали проект про выборы президента России 2018 года

Reading time5 min
Views4.9K

Осенью 2017 года ребята из ГОЛОСа подумали, что онлайн-трансляцию выборов надо выводить на новый уровень:

  • во-первых, расстраивало, что до сих пор на картах субъектов Российской федерации нет детализации до территориальных комиссий,
  • во-вторых, крайняя сложность и запутанность сайта ЦИК, которая не позволяет быстро узнать результаты по своему избирательному участку,
  • и в-третьих, решено было начать делать основу для энциклопедии результатов, когда можно посмотреть результаты по разным выборам для одного участка. Грубо говоря, узнать, как голосовали соседи.

И все это не только для того, чтобы узнать в каком регионе живет 39% избирателей за Грудинина, но и для того, чтобы проверить, есть ли такой участок в стране, где Путин не выиграл выборы.
Читать дальше →
Total votes 43: ↑23 and ↓20+3
Comments14

Прототипирование на продакшн-технологиях

Reading time9 min
Views16K


В Яндекс.Деньгах мы сделали БЭМ-платформу основным инструментом дизайнеров для построения интерфейсов, дополнив ее всем необходимым арсеналом для масштабирования.

Читать дальше →
Total votes 27: ↑26 and ↓1+25
Comments0

«ONLYOFFICE Документы» для iOS: как изменилось приложение за год

Reading time4 min
Views3K
Мы потихоньку начинаем подводить итоги этого трудового года, и начнем, пожалуй, с нашего приложения для iOS — "ONLYOFFICE Документы". В этом году оно серьезно изменилось в плане функциональности. Стало более самостоятельным, благодаря добавленной возможности работать локально, без подключения к порталу ONLYOFFICE. Обзавелось совместной работой и адаптировалось к iOS 11 и IPhone X.

Расскажем обо всем по порядку.

Читать дальше →
Total votes 12: ↑12 and ↓0+12
Comments3

ONLYOFFICE в локальной сети: новый интерфейс редакторов, отчеты в CRM и многое другое

Reading time3 min
Views8.1K
Наконец-то увидели свет новые версии наших серверных решений — Enterprise и Community Edition. Вы даже не представляете, что мы пережили тут из-за этого релиза. Зато в решениях появилось много всего хорошего! Мы обновили три из четырех компонентов ONLYOFFICE: Сервер документов, Сервер совместной работы и Контрольную панель.

Некоторые функции появились и в коммерческой сборке, и в открытой версии. Есть и те, которые будут доступны только пользователям платных решений.


Читать дальше →
Total votes 18: ↑17 and ↓1+16
Comments5

ONLYOFFICE против Collabora: почему мы уверены, что наше решение лучше

Reading time8 min
Views26K
Здравствуйте! Команда ONLYOFFICE возвращается на Хабр, как мы и обещали. Постараемся писать чаще и больше, и вообще держать вас в курсе событий. В последнее время нам есть что рассказать и показать.

Тему первой статьи подсказала нам сама жизнь. Не так давно наравне с вопросом: «А чем вы лучше Google Docs?» нам начали задавать вопрос «Ну и чем вы лучше Collabora?». Это связано с нашей интеграцией с сервисами ownCloud и Nextcloud, официальным партнером которых как раз таки является Collabora.

Если говорить о преимуществах, то у Collabora есть перед нами очень большое — идеологическое. Оно заключается в том, что этот продукт является продолжателем дела OpenOffice и LibreOffice. Непросто бороться с ними за пользователей, но у нас есть весомые аргументы в свою пользу. Сейчас расскажем.


Читать дальше →
Total votes 24: ↑22 and ↓2+20
Comments46

Визуализация результатов выборов в Москве на карте в Jupyter Notebook

Reading time11 min
Views39K


Всем привет!


Сегодня мы поговорим о визуализации геоданных. Имея на руках статистику, явно имеющую пространственную привязку, всегда хочется сделать красивую карту. Желательно, с навигацией да инфоокнами В тетрадках. И, конечно же, чтоб потом можно было показать всему интернету свои успехи в визуализации!


В качестве примера возьмем недавно отгремевшие муниципальные выборы в Москве. Сами данные можно взять с сайта мосгоризбиркома, в можно просто забрать датасеты с https://gudkov.ru/. Там даже есть какая-никакая визуализация, но мы пойдем глубже. Итак, что же у нас в итоге должно получиться?

Читать дальше →
Total votes 61: ↑59 and ↓2+57
Comments45

Анализ результатов выборов в Госдуму. Готовимся к голосованию 2016 года

Reading time3 min
Views35K
Выборы в Государственную думу только осенью, но мы уже начинаем готовиться. Если повторится история 2011 года, будет очень интересно. Наверное, многие помнят, как сразу после тех выборов появилась куча статистических исследований, намекающих на фальсификации и как все узнали, как выглядит распределение Гаусса. Я хотел бы рассказать, где искать данные про выборы и как с ними работать. Кроме хорошо известных графиков я покажу некоторые другие прикольные картинки, которых раньше в паблике не видел. Так, например, выглядит распределение голосов за Единую Россию по стране, хорошо видны регионы с максимальной поддержкой партии власти — Северный Кавказ и Татарстан:


Есть такой замечательный сайт izbirkom.ru. Его здесь даже недавно упоминали в контексте, что, типа, на него потратили слишком много денег. Но лично мне не жалко, сайт прекрасный:

Читать дальше →
Total votes 68: ↑60 and ↓8+52
Comments114

Редизайн Хрома на десктопе

Reading time29 min
Views32K


В начале этого сентября в Windows, как часть 53-го обновления, появился новый модифицированный дизайн основного пользовательского интерфейса Chrome, т.н. «Chrome MD» (Material design). Он стал последней ступенью трёхступенчатого ввода в действие нового дизайна, который был начат в релизе 51 с Chrome OS и Linux и был продолжен в релизе 52 с macOS. Windows стала высшей точкой этого процесса, и, поскольку Chrome не закончится никогда, то мне кажется, что сейчас самое время оглянуться и поразмышлять над этим процессом, который занял почти 2 года и который дал некоторые знания и опыт, полезные, возможно, и для вас.
Читать дальше →
Total votes 34: ↑32 and ↓2+30
Comments47

Серьезное проектирование серьезных сайтов. Часть 2. Визуализация

Reading time8 min
Views85K

7. Карта ума.



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



Для создания карты ума (её чаще называют английским термином «Mind map»), мы можем использовать специальное ПО, я рекомендую Xmind.


Читать дальше →
Total votes 55: ↑48 and ↓7+41
Comments58

Серьезное проектирование серьезных сайтов. Часть 1. Аналитика

Reading time13 min
Views121K

Сразу скажу, что статья получилась очень большая. В моем духе. Поэтому я решил разбить её на две части: аналитика и визуализация. А после еще будет несколько статей с логическим продолжением. Первая может показаться сухой из-за большого количества текста, но без неё не сможет существовать вторая. Поэтому, если вы действительно интересуетесь проектированием сайтов, читать нужно обе и внимательно, я постарался избавиться от «воды» и рассказать только о полезном.

Читать дальше →
Total votes 50: ↑43 and ↓7+36
Comments36

Разбираемся с сеткой в Adobe Illustrator

Reading time9 min
Views147K

От переводчика


Привет, %юзернейм%!

Этот перевод как бы дополняет мою предыдущую публикацию про Pixel Perfect, без которого она была бы неполной, тем более что оригинальная статья про Pixel Perfect ссылается на оригинальную статью этого перевода.

Материал расчитан на новичков, и немного рассказывает о двух вещах:
  1. Как избежать той проблемы, из-за которой у вас в макетах расстояние между элементами или гайдами начинает включать в себя дробные части пикселей;
  2. Как использовать сетки для прототипирования в Adobe Photoshop и Adobe Illustrator.

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

Как и в прошлый раз, одна из целей, почему я пишу эту статью на Хабр (а не ограничиваюсь, к примеру, переводом на Tuts+) — это составление после перевода полезных ссылок по теме. Призываю хабражителей так же делиться своими соображениями и инструментами, которыми вы пользуетесь при создании сеток, может быть какими-то другими редакторами. Один мой знакомый товарищ прокомментировал предыдущую статью таким образом, что, конечно, материал прикольный, но сам он пользуется Sketch'ем, а там это всё из коробки. Расскажите, чем пользуетесь вы?

Кстати, хотя в статье речь идёт об Adobe Illustrator, в Adobe Photoshop можно так же использовать и пиксельную сетку, и привязку к пикселям, и свою собственную настраиваемую сетку.

Краткое содержание


  • Чтобы включить/выключить сетку в Adobe Illustrator/Photoshop, нажмите Ctrl + '
  • Чтобы включить/выключить гайды в Adobe Illustrator/Photoshop, нажмите Ctrl + ;


Ну, поехали.

Разбираемся с сеткой в Adobe Illustrator





Читать дальше →
Total votes 13: ↑11 and ↓2+9
Comments0

Как создавать Pixel Perfect изображения в Adobe Illustrator

Reading time14 min
Views84K

От переводчика


Рад приветствовать тебя, %юзернейм%!

Я новичок в профессии дизайнера интерфейсов, и как-то давно, листая вакансии, меня заинтересовали требования к одной из них. Среди таких, как знание пакета Adobe, средств прототипирования и навыков в области ux/ui я прочитал, что соискателю именно на эту вакансию неплохо было бы уметь держать порядок в слоях, структуре и названиях файлов и папок, а так же знать и уметь применять на практике то, что называется pixel perfect. Меня это заинтересовало, так как на моей работе ни от меня, ни от других сотрудников этого не требуют, но я всегда старался этого придерживаться и даже пытался убедить в этом других, но мне почему-то не хватало аргументов, чтобы объяснить, для чего это нужно.

С понятием pixel perfect я вообще на тот момент не был знаком, только слышал где-то пару раз, и так как этот пункт стоял в конце списка требований «аккуратности», я понял, что это что-то вроде апогея, вершины айсберга в организации работы над макетами.

Я стал искать, но ничего, кроме статьи на Хабре из пары абзацев про Pixel perfect от программиста не нашёл. Потом я как-то услышал о Monument Valley, и даже наткнулся на справочник Pixel Perfect Precision, но времени изучать так много информации на английском как-то не было, и первый раз он меня не зацепил. Стало появляться время и вышли некоторые статьи, одна из которых, наполненная практическими советами по Pixel Perfect зацепила меня, и я решил не просто прочитать и понять, а ещё и перевести по возможности литературно, чтобы дать вопросу широкую известность, и распространить тему на Хабре.

Небольшой технический момент. Оригинальная статья с Tuts+ называется «How to Create Pixel Perfect Artwork Using Adobe Illustrator», при этом я могу вас уверить, что большая часть из предложенных в статье настроек присутствует и в Adobe Photoshop CS6, а уж в Adobe Photoshop CC вообще можно повторить всё это полностью.

В заключение вступительной части хочу попросить не обращать внимания на то, что я новичок в дизайне, и этой мой первый в жизни перевод. Отнеситесь критично, тема серьёзная. Призываю делиться своими соображениями и опытом в комментариях.

Краткое содержание


Эта часть для тех, кому лень вникать в аспекты, но хочется побыстрее получить инструкции.
Либо для тех, кто уже читал полную статью, но теперь хочет быстро без лишних абзацев, на другом рабочем месте применить все необходимые настройки.

Настройки Abobe Illustrator


  1. Edit > Preferences > Units > General → Pixels
    Edit > Preferences > Units > Stroke → Pixels
  2. Edit > Preferences > Guides & Grid > Gridline every → 1px
    Edit > Preferences > Guides & Grid > Subdivisions → 1px
  3. Edit > Preferences > General > Keyboard Increment → 1px
  4. View > Snap to Grid
    View > Snap to Point
  5. View > Pixel Preview

Не благодарите.
Всех заинтересовавшихся прошу пройти под кат.

Как создавать pixel perfect изображения в Adobe Illustrator




Читать дальше →
Total votes 31: ↑27 and ↓4+23
Comments6

Как стать тестировщиком или каких знаний мы ждём от джуниора

Reading time6 min
Views509K

image


Пара вводных слов
Всем доброго времени суток, меня зовут Туманов Дима. Сейчас я работаю в компании Rambler&Co и отвечаю за тестирование на проектах Афиши. В рамках данной статьи я развею несколько мифов об IT и тестировании в частности. Кроме того, приведу примеры из жизни как “не зная ничего” стать Junior QA Engineer в крупной компании.


Начало пути
Проработав почти два года в одной “мирной” госкорпорации в должности “ненастоящего инженера”, я осознал, что развитие остановилось. Я мог сидеть на одном месте и почти ничего не делать. В конечном итоге мои знания бы совсем отстали от реальной действительности и я бы стал невостребованным на рынке. В этот момент я принял решение о смене места и сути своей работы.

Читать дальше →
Total votes 25: ↑20 and ↓5+15
Comments55

О съемке гигапиксельной панорамы Екатеринбурга

Reading time6 min
Views18K
В этой статье пойдет речь о создании панорамы Екатеринбурга.
Публикация на Хабре: habrahabr.ru/post/150591 Сама панорама: ekburg.artstudio-3d.ru

Изначально более подробный вариант статьи направлялся в «песочницу», но НЛО не счел его достойным инвайта. Ниже я опущу предысторию с тендерами и прочую «лирику», и постараюсь остановиться лишь на технической части.

image

Читать далее
Total votes 56: ↑50 and ↓6+44
Comments58

Потрясающие фотографии Земли и космоса с помощью фотоаппарата за 56 £

Reading time2 min
Views8.1K

Команда студентов из Испании с помощью фотоаппарата стоимостью £56 и воздушного шара из латекса стоимостью £43 смогла сделать потрясающие фотографии Земли и космоса в 20-милях над Землей.


image
Читать дальше →
Total votes 163: ↑159 and ↓4+155
Comments146

Немного OSM и OpenLayers для корпоративных систем

Reading time8 min
Views41K
Привет Хабр, сегодня я расскажу немного про использование osm для предприятий и b2b.
А именно, как и зачем перейти от google maps api к osm, openlayers и счастью.
Читать дальше →
Total votes 23: ↑23 and ↓0+23
Comments12

OpenLayers или делаем сервис мониторинга транспорта

Reading time8 min
Views40K
Сейчас на рынке много предложений по продаже мобильных устройств, предназначенных для контроля движущихся объектов или трекеров. В большинстве из них есть функция передачи информации по GPRS на любой заданный веб-адрес через определенный интервал времени. Чаще всего формат передачи данных разный. Поэтому мы не будем рассматривать вопрос загрузки данных с трекера в базу. Предположим данные есть и мы хотим приступить к созданию сервиса мониторинга транспорта. Основу такой системы образуют возможности:
-выбор карты и ее отображение
-отображение точки или картинки и подписи к ней
-отображение полигона и его редактирование
-отображение линии и ее редактирование
-отображение информации связной с полигонами, линиями, точками (всплывающие подсказки)
-немного математики (подсчет пройденного пути, площадь полигона, принадлежность точки полигону)
Все эти функции легко реализовать с помощью OpenLayers, библиотеки на JavaScript.

Читать дальше →
Total votes 25: ↑23 and ↓2+21
Comments16

Information

Rating
Does not participate
Location
Измир, Измир, Турция
Date of birth
Registered
Activity