Как стать автором
Обновить
13
Карма
0
Рейтинг
Serhio Magpie @SerDIDG

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

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

Веб-дизайн *Разработка веб-сайтов *Интерфейсы *Дизайн
Перевод
Это советы по улучшению UX ваших проектов БЕЗ многочасовых сессий по изучению пользовательского поведения, бумажного прототипирования или любых других модных словечек.

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

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

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

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

Блог компании Технологический Центр Дойче Банка Веб-дизайн *Анализ и проектирование систем *Интерфейсы *Usability *
В UX дизайне, как и в любой другой сфере деятельности, есть свои принципы и законы. В этой статье я бы хотел разобрать восемь из них, которые названы в честь их создателей.


Всего голосов 37: ↑36 и ↓1 +35
Просмотры 31K
Комментарии 25

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

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

Promises 101

JavaScript *
Из песочницы

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


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


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

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

Блог компании Wrike Разработка веб-сайтов *JavaScript *Программирование *Angular *


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

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

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

Блог компании Plarium JavaScript *Программирование *Разработка мобильных приложений *ReactJS *
Перевод
Webpack считается лучшим инструментом для сборки приложений на React и Redux. Полагаю, многие из тех, кто сегодня использует Angular 2 и другие фреймворки, не обходят вниманием и Webpack. И поскольку начинать работу с данным инструментом всегда непросто, я решил посвятить этой теме несколько публикаций в надежде облегчить старт другим разработчикам и заодно продемонстрировать некоторые особенности Webpack.

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

It’s the future

JavaScript *
Перевод

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


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


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


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


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


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


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

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

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

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



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

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

Работа с 3D-графикой *Интерфейсы *Usability *
Туториал
Перевод
Первая часть

От переводчика. 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
Просмотры 29K
Комментарии 10

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

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


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

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

Блог компании PAYSTO Разработка веб-сайтов *CSS *
Перевод
Создание CSS-анимации может выглядеть как простое изучение синтаксиса, но для создания красивой и интуитивной анимации нужны определенные тонкости. Так как анимация привлекает достаточно много внимания, крайне важно привести код в порядок, чтобы хронометраж действовал правильно, и отладить все, что работает неправильно. После того, как я сама разобралась с этой проблемой, я решила собрать несколько инструментов, которые могут помочь в этом процессе.

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


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

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

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

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


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

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

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

Разработка под iOS *Objective C *Xcode *
Из песочницы

Вступление


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

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

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

Разработка веб-сайтов *CSS *HTML *
Туториал
Из песочницы
Что если бы вы могли построить сложный css лейаут в считанные минуты? Flexbox — это новый лейаут CSS верстки, который позволяет легко построить динамические макеты. С Flexbox выравнивание по вертикали, блоки с одинаковой высотой, перестановка и направление становится проще простого.



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

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

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

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

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


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

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

Разработка веб-сайтов *Open source *JavaScript *
Месяц назад кто-то нашёл у меня на гитхабе незаконченный проект и выложил ссылку на него на 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
Просмотры 30K
Комментарии 90

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

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

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

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

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

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

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

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

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

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

Мессенджеры *
Относительно недавно skype обновился, довольно радикально изменив интерфейс. И я как закоренелый консерватор стал искать способ, как оставить при себе свои старые привычки, заодно нашел как избавиться от рекламы.

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

Информация

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