Как стать автором
Обновить
12
0
Serhio Magpie @SerDIDG

Веб-разработчик

Отправить сообщение

Четыре правила интуитивного UX

Время на прочтение 12 мин
Количество просмотров 35K
Это советы по улучшению UX ваших проектов БЕЗ многочасовых сессий по изучению пользовательского поведения, бумажного прототипирования или любых других модных словечек.

(Серьёзно, поищите «дизайн-мышление». 100500 результатов!)

Для кого эта статья?

  • Разработчики. Вы создали собственное приложение, но каждый пользователь мучается с ним. И вы знаете: если они говорят вам это в лицо, то дело действительно плохо.
  • Графические дизайнеры. Изучать UX по статьям в интернете — это какой-то… очень болезненный способ умереть.
  • Менеджеры проектов. Вы уже на четверть UX-дизайнер. Было бы неплохо освоить остальные навыки.
  • И остальные проходимцы. Все, кто корпит над своими проектами по вечерам и выходным. Вам тоже пригодится.
Всего голосов 23: ↑22 и ↓1 +21
Комментарии 22

Восемь именных законов в UX дизайне ( часть 1)

Время на прочтение 6 мин
Количество просмотров 33K
В UX дизайне, как и в любой другой сфере деятельности, есть свои принципы и законы. В этой статье я бы хотел разобрать восемь из них, которые названы в честь их создателей.


Всего голосов 37: ↑36 и ↓1 +35
Комментарии 24

Как я стала дизайнером за шесть месяцев

Время на прочтение 4 мин
Количество просмотров 305K
Я не заканчивала дизайнерских курсов и не училась дизайну в институте, но мне удалось пройти свой собственный курс обучения за 6 месяцев, замечу, что в процессе обучения я параллельно занималась полный день своей основной работой. Хотя я не думала, что уже готова устраиваться на новую работу дизайнером, все же мне сильно повезло и удалось найти неплохое место.
Читать дальше →
Всего голосов 90: ↑76 и ↓14 +62
Комментарии 50

Promises 101

Время на прочтение 4 мин
Количество просмотров 26K

Перевод первой части отличной статьи про промисы. Базовые приемы создания и управления промисами.


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


Читать дальше →
Всего голосов 29: ↑26 и ↓3 +23
Комментарии 50

Zone.js или как Dart спас Angular

Время на прочтение 7 мин
Количество просмотров 39K


Я фронтенд-разработчик в компании Wrike, пишу на JavaScript и на Dart, который компилируется в JavaScript. Сегодня я хочу рассказать о библиотеке Zone.js, лежащей в основе Angular 2.

Изначально Zone.js была придумана разработчиками Google для языка программирования Dart и утилиты Dart2JS. С помощью этой библиотеки «гугловцы» решили проблему с дайджест-циклом, которая была характерна для первого Angular’а.
Чтобы понять, где эта библиотека используется и для чего нужна, прошу под кат.
Читать дальше →
Всего голосов 37: ↑27 и ↓10 +17
Комментарии 34

10 особенностей Webpack

Время на прочтение 8 мин
Количество просмотров 78K
Webpack считается лучшим инструментом для сборки приложений на React и Redux. Полагаю, многие из тех, кто сегодня использует Angular 2 и другие фреймворки, не обходят вниманием и Webpack. И поскольку начинать работу с данным инструментом всегда непросто, я решил посвятить этой теме несколько публикаций в надежде облегчить старт другим разработчикам и заодно продемонстрировать некоторые особенности Webpack.

Читать дальше →
Всего голосов 51: ↑48 и ↓3 +45
Комментарии 52

It’s the future

Время на прочтение 5 мин
Количество просмотров 85K

Этот пост просто шутка и не пытается выставить инструменты, упомянутые здесь, в дурном свете. Я использую их постоянно, они великолепны, и я рекомендую их использовать. По мотивам It's the future @ CircleCI Blog


— Эй, я бы хотел научиться писать крутые веб-приложения. Слышал, у тебя есть опыт.


— Да, я как раз занимаюсь фронтендом, юзаю пару тулз.


— Круто. Я щас делаю простое приложение — обычный TODO-лист, используя HTML, CSS и JavaScript, и планирую заюзать JQuery. Это норм?


— Не-не-не. Это олдскул. Джиквери мёртв — никто не использует его теперь! Тебе нужен React. Это будущее.


— Окей, лады. А что это?


Читать дальше →
Всего голосов 178: ↑167 и ↓11 +156
Комментарии 287

5 ошибок, которых следует избегать при создании микровзаимодействий

Время на прочтение 5 мин
Количество просмотров 14K
Микровзаимодействия — один из ключевых моментов UI/UX-дизайна. Они содержат детали, части продукта, которые выполняют одну конкретную задачу. Каждый раз когда мы меняем настройки, синхронизируем данные и устройства, устанавливаем будильник, вводим логин и пароль или выбираем определенную функцию — мы сталкиваемся с микровзаимодействиями. Они сопровождают нас повсюду: в различных устройствах и приложениях наших телефонов, компьютеров, в офисной и бытовой технике, в транспорте и дома. И если микровзаимодействия сделаны правильно, они делают нашу жизнь комфортнее, интереснее и проще.

В этом посте мы рассмотрим 5 ошибок, которые следует избегать при создании микровзаимодействий.



Читать дальше →
Всего голосов 31: ↑25 и ↓6 +19
Комментарии 21

Да пребудет с вами прокрутка: теория и практика по камере в платформерах [2/2]

Время на прочтение 17 мин
Количество просмотров 30K
Первая часть

От переводчика. OlegKozlov рассказал о приёмах камеры в своей игре «Несыть». Из-за большого количества трафика и не слишком верно действующего JS якорь перебрасывает куда угодно, только не на комментарий, поэтому сделаю копию здесь.
Что сделано в «Несыти»…
1. Упреждение по движению: точка привязки камеры вынесена вперёд от центра червя, причём чем быстрее он ползёт, там дальше она выносится.
2. Упреждение по управлению: когда игрок начинает сжимать червя для прыжка, то вынос точки привязки камеры ещё усиливается заранее передвигая камеру в ту область, куда червь сейчас прыгнет.
3. Линейное сглаживание — камера плавно стремится к точке своей привязки, тем быстрее, чем больше разница между фактическим положением камеры (центра экрана) и точкой её привязки.
4. Плюс масштаб всего происходящего завязан на размер червя, когда червь увеличивается, то камера «отъезжает». Причём делает это тремя-четыремя ступенчатыми переключениями, чтобы игрок ощущал, что его червь вырос. Если делать плавно, то рост и изменение масштабов игры нивелируются и не приносят удовольствия.
5. Упор в край. Камера «упирается» в края уровня, становясь более статичной и позволяя голове червя сильно смешаться от центра экрана, буквально упираться головой в его край.
image

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

Направление


Подсказываем, куда идти, близко ли цель и что рядом важного

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

Wonder Boy, ещё одна моя любимица, быстрый платформер, в котором можно идти только вперёд через старое доброе одностороннее окно свободного хода. В отличие то Super Mario Bros., там нет зоны разгона, плавно ускоряющей камеру, но есть другая интересная техника, которую я называю «рельсы». Камера ставится и движется так, чтобы предвосхищать будущие преграды.

Wonder Boy (Sega, 1986)
Рельсы: запрограммированный маршрут камеры
Зона свободного хода (односторонняя)
Статическое упреждение

Пятое поколение приставок, среди них PlayStation и Nintendo 64, открыло новые аппаратные возможности, положив начала грубому, но настоящему 3D. Приёмы трёхмерной камеры — сами по себе захватывающая и многогранная тема, но поддержка 3D повлияла и на двухмерные игры. Разработчики теперь могут приближать камеру, наклонять вид и даже сочетать 2D и 3D — то, что мы сейчас называем 2,5D, когда игра идёт на двухмерной плоскости, но в объёмном мире.
Очень много трафика...
Всего голосов 64: ↑62 и ↓2 +60
Комментарии 10

3-осевой подвес для зеркалки за 400$

Время на прочтение 7 мин
Количество просмотров 17K
Думаю многим знакома такая ситуация, вы снимаете что-то захватывающее, динамичное, потрясное, и думаете: вот приду сейчас домой и смонтажу экшн видео! Однако при просмотре отснятого материала начинаете плеваться оттого, что половину можно смело выкидывать из-за ужасной тряски, которую в 30-50% случаев невозможно отстабилизировать программно. Что же делать в таких случаях? Если вы хотите снимать динамику, скоростные пролеты камеры, а не стоять со штативом и унылым лицом, то эта штука для вас!


Читать дальше →
Всего голосов 21: ↑18 и ↓3 +15
Комментарии 16

Шлифуем CSS-анимацию

Время на прочтение 8 мин
Количество просмотров 27K
Создание CSS-анимации может выглядеть как простое изучение синтаксиса, но для создания красивой и интуитивной анимации нужны определенные тонкости. Так как анимация привлекает достаточно много внимания, крайне важно привести код в порядок, чтобы хронометраж действовал правильно, и отладить все, что работает неправильно. После того, как я сама разобралась с этой проблемой, я решила собрать несколько инструментов, которые могут помочь в этом процессе.

Использование значений отрицательной задержки


Скажем, у вас есть несколько анимаций, которые запускаются одновременно, и вам нужно выстроить их в шахматном порядке. Можно использовать animation-delay, но вы не хотите, чтобы пользователь при посещении страницы ждал, пока запустятся некоторые недвижимые части.
Читать дальше →
Всего голосов 18: ↑14 и ↓4 +10
Комментарии 3

Семь удивительных «возможностей» Javascript

Время на прочтение 5 мин
Количество просмотров 66K
За последние несколько месяцев я сделал несколько доработок для JSHint, в основном с целью изучить ES6 (я особенно горжусь тем, как переделано обнаружение областей видимости для переменных). Во время этого процесса я наткнулся на несколько вещей, которые меня удивили — в основном, в ES6, однако есть и кое-что про ES3, что я до этого никогда не использовал.

Break из любого блока


Наверняка вы знаете, что в любом цикле можно использовать ключевые слова break и continue — это стандартная возможность в современных языках программирования. Однако не все знают, что циклам можно давать метки и с их помощью прерывать любой конкретный цикл:

outer: for(var i = 0; i < 4; i++) {
    while(true) {
        continue outer;
    }
}
Читать дальше →
Всего голосов 78: ↑65 и ↓13 +52
Комментарии 71

iOS Инструменты разработчика

Время на прочтение 26 мин
Количество просмотров 35K

Вступление


Всем привет, меня зовут Григорий, последние 5 лет занимался программированием под iOS. Сейчас решил сменить сферу деятельности и ударился в веб, но чтобы добро не пропадало, хочу поделиться с сообществом своими наработками, накопившимися за это время. Библиотеки выложены на GitHub и добавлены в CocoaPods. Инструкции по установке и использованию вы сможете найти по ссылкам на GitHub, здесь же будет краткое описание.

Минимальная поддерживаемая версия — iOS 6.0.
Читать дальше →
Всего голосов 38: ↑35 и ↓3 +32
Комментарии 27

Flexbox на примере игрального кубика

Время на прочтение 4 мин
Количество просмотров 65K
Что если бы вы могли построить сложный css лейаут в считанные минуты? Flexbox — это новый лейаут CSS верстки, который позволяет легко построить динамические макеты. С Flexbox выравнивание по вертикали, блоки с одинаковой высотой, перестановка и направление становится проще простого.



Есть популярный миф, что flex еще не готов к использованию. Но это не так! У 93% людей сейчас запущен браузер, поддерживающий flexbox. Это лучше, чем поддержка для HTML5.

В этой статье я проведу вас через основы flexbox на примере создания игрального кубика. Сейчас мы пропустим некоторые из более сложных тонкостей flexbox, таких как вендорные префиксы, старая версия синтаксиса и браузерные причуды. Рассмотрим их в будущих уроках.
Читать дальше →
Всего голосов 30: ↑28 и ↓2 +26
Комментарии 37

Что нового в CodeKit 2.3

Время на прочтение 4 мин
Количество просмотров 14K
Есть такие программы, которые заметно облегчают жизнь веб-разработчикам. Среди пользователей Mac хорошо себя зарекомендовала программа под названием CodeKit. По сути это аналог grunt/gulp с визуальным интерфейсом и большим количеством различных возможностей, которые сильно упрощают процесс веб-разработки.

На днях CodeKit получила обновление до версии 2.3. Давайте посмотрим, что нового в этой версии.


Читать дальше →
Всего голосов 13: ↑10 и ↓3 +7
Комментарии 11

Интенс, индикатор прокрутки (или жизнь после скроллбара)

Время на прочтение 4 мин
Количество просмотров 30K
Месяц назад кто-то нашёл у меня на гитхабе незаконченный проект и выложил ссылку на него на Designer News. Внезапно я увидел, что на сайте проекта постоянно сидит по 50 человек, и мне даже пришлось срочно сбежать с работы чтоб экстренно выпилить хотя бы самые адовые баги. Этим проектом был интенс, UX-компонент заменяющий полосу прокрутки (скроллбар) на специальный индикатор, который подсвечивает прокручиваемую область текстурой. Выглядит это примерно так:


на сайте проекта можно поскроллить самостоятельно

Сообщества UX-экспертов и программистов отреагировали очень возбуждённо:
Не могу понять, почему мне это не нравится… — GrumpyUX Man @ layervault
Святые какашки, эта штука бесит — Thecoss @ reddit
Да я себе скорее установлю ПЕРДЯЩИЙ СКРОЛЛ http://theonion.github.io/fartscroll.js/ в качестве дефолтного, чем КОГДА-ЛИБО заменю мою полосу прокрутки на это. — Kyle Donmoyer @ layervault
Спасибо, не надо. Никогда не мог понять это желание поменять стандартные элементы интерфейса. Полоса прокрутки — это одна из тех вещей, которая просто работает. Она не мешается и легко даёт понять, насколько много контента. — madk @ reddit
Шта? — magenta_placenta @ reddit

Я не очень понял, что за проблему оно решает
— jineshshah36 @ reddit
(кто-то даже создал сабреддит Real Bad UX чтоб разместить там ссылку на этот проект)

Вместе с UX-экспертами, возбудился и я. Бесполезные проекты обычно никому не интересны, у меня есть пара таких. Но сейчас было очень непохоже — этот получился очень спорным, и такой движухи я ещё не видел. В течение следующих недель я попытался учесть основные комментарии и либо исправить что-то в самой библиотеке, либо добавить пояснения на сайте проекта. И одновременно выкладывал его на остальных ресурсах — градус фидбэка вроде бы стал смягчаться.

Здесь я хочу рассказать, какие области применения у интенса, и попробую объяснить, как я себе представляю «жизнь после скроллбара». А также предлагаю читателям покритиковать этот проект, обсудить скроллинг вообще, UX вцелом, и целесообразность замены традиционных элементов в частности.
Читать дальше →
Всего голосов 61: ↑47 и ↓14 +33
Комментарии 90

Рисование эллипса под произвольным углом в canvas на JavaScript

Время на прочтение 4 мин
Количество просмотров 24K
В процессе разработки одного приложения столкнулся с необходимостью рисования эллипсов под произвольным углом в canvas на JavaScript. Пользоваться какими-либо фреймворками в столь простом проекте не хотелось, так что я отправился на поиски статьи-мануала на эту тему. Поиски не увенчались успехом, так что пришлось разбираться с задачей самостоятельно, и я решил поделиться с вами полученным опытом.

Формализуем задачу. Нам требуется функция drawEllipse(coords, sizes, vector), где:

  • coords — координаты центра эллипса — массив [x, y]
  • sizes — длины большой и малой полуосей эллипса — массив [a, b]
  • vector — вектор [x, y] наклона эллипса

Читать дальше →
Всего голосов 22: ↑19 и ↓3 +16
Комментарии 23

Верстка email рассылок от А до Я для чайников

Время на прочтение 9 мин
Количество просмотров 402K
Уже 3 с лишним года занимаюсь дизайном и версткой почтовых рассылок, которые ориентированы на англоязычных пользователей. За время работы перелопатили огромную кучу информации, перепробовали много вариантов верстки, набили достаточное количество шишек. Были найдены и исправлены типичные баги, которые в той или иной мере повторялись во всех почтовых клиентах. Также нашлись проблемы с некоторыми CSS свойствами — различные почтовые клиенты интерпретировали их по разному. Каждое письмо тестировалось на самых популярных почтовых клиентах: Gmail, Outlook, Yahoo, Android, iOS, MozillaThunderbird, Microsoft Outlook, The Bat. Рассылки ходят на сотни миллионов пользователей и приносят очень хорошие результаты. Итак, приступим к изучению.
Читать дальше →
Всего голосов 66: ↑62 и ↓4 +58
Комментарии 35

Запуск старых игр на современном компьютере — список методов

Время на прочтение 6 мин
Количество просмотров 199K
В этом посте я решил собрать все известные мне способы запуска старых игр на современном компьютере. Это не пошаговая инструкция, а именно список способов, утилит и ссылок, что бы понимать, куда копать и что делать. По каждому конкретному методу уже существуют подробные документации, написанные другими людьми, так что моя цель – просто собрать всё это добро воедино.
Откройте хабракат, и ваше импы станут мягкими и шелковистыми.
Всего голосов 47: ↑47 и ↓0 +47
Комментарии 42

Как отключить обновления в Skype и рекламу заодно

Время на прочтение 1 мин
Количество просмотров 199K
Относительно недавно skype обновился, довольно радикально изменив интерфейс. И я как закоренелый консерватор стал искать способ, как оставить при себе свои старые привычки, заодно нашел как избавиться от рекламы.

Инструкция:
1. Запретить Скайпу исходящие подключения на порты 80 и 443.
2. Создать файл %TMP%\SkypeSetup.exe и запретить себе всё на этот файл.
Читать дальше →
Всего голосов 34: ↑19 и ↓15 +4
Комментарии 39

Информация

В рейтинге
Не участвует
Откуда
Николаев, Николаевская обл., Украина
Дата рождения
Зарегистрирован
Активность