Это руководство — начальный материал о кросс-DPI и кроссплатформенном дизайне для начинающих и средних дизайнеров, желающих узнать о нем с самого начала или получить больше знаний. Без сложных математических и непонятных диаграмм, только непосредственные объяснения, упорядоченные в небольших разделах, для понимания и применения их непосредственно к вашей дизайнерской работе.

Автор — Sebastien Gabriel.

Я не знаю всего, так что, если по вашему мнению я где то ошибаюсь или вам нужно уточнить что-то, либо у вас есть предложения или вопросы для улучшения данного руководства, отправьте письмо (на англ) на sgabriel.contact@gmail.com. Вы также можете найти на меня Twitter, G+ или Facebook.

Решал интересную задачу – сделать визуальный редактор-конфигуратор окон.

Подробностями процесса разработки я с вами, коллеги, и поделюсь.


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

Спасибо за отклики!

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

Awesome Python

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

Chart.js

Потрясающие интерактивные графики и диаграммы на HTML5 Canvas. Chart.js не зависит от сторонник библиотек, работает во всех современных браузерах и даже в IE7/8 с полифилом, адаптивный к мобильный устройствам, очень гибкий и модульный. Выглядит все на самом деле очень красиво, но признаюсь я не настолько детально изучил проект, чтобы сказать чем он лучше DC.js из моего 19 выпуска. Дело в том, что Chart за несколько дней собрал почти 10 000 звезд на GitHub.

Ну и для того, чтобы добить тему визуализации данных, оставлю ссылку на Amcharts. Проект не open-source, но вы можете пользоваться им бесплатно, если будете размещать логотип. Хочу обратить ваше внимание на то, что с этой библиотекой работают Microsoft, Amazon, IBM, Bank of America, NASA, P&G, PayPal и многие другие мировые корпорации.

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

Basket.js

Basket немного похож на RequireJS, только с его помощью все подключаемые скрипты и стили кешируются в localStorage. Тесты Google и Bing демонстрируют улучшение производительности при использовании локального хранилища по сравнению с обычным браузерным кешем. Проект изначально появился как эксперимент, который полностью оправдал результаты этих тестов.

basket
    .require({ url: 'missing.js' })
    .then(function () {
        // Success
    }, function (error) {
        // There was an error fetching the script
        console.log(error);
    });

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

Best of Awesomeness & Usefulness for Web Developers

Две недели назад я опубликовал «Лучшие интересности и полезности за год». Моим дайджестам тогда исполнился ровно один год и я хотел разместить пост точно в срок. Но не правильно рассчитал время и не упомянул много всего, что должно было быть в той подборке. И даже в опросах забыл указать в редакторах Vim, во фреймворках ExtJS и тд. За что мне очень стыдно. В целом подборка выросла как минимум в два раза и я создал репозиторий на GitHub. Моей целью не было сделать очередной awesome-* список, в которые попадает практически все подряд — лучшие и ненужные альтернативы. Я попытался выделить все самое лучшее.

DUO

Авторы проекта называют его сборщиком нового поколения для фронтенд разработчиков. DUO собрал в себе все самое лучшее от Component, Browserify и Go.

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

Highcharts.js

В последнее время я зачастил с библиотеками предназначенными для построения графиков и диаграмм. Но против трендов на GitHub с 2500+ звезд не попрешь, да и когда есть из чего выбирать — всегда хорошо. Highcharts.js — это мощный инструмент, основанный на SVG и VML рендеринге со множеством плагинов. Минус этого проекта — лицензия, которая позволяет использовать скрипт только в некоммерческих целях. Хочу обратить также ваше внимание, что именно этот проект выбрали такие компании как Яндекс, Facebook, Twitter, Yahoo, AT&A, Nokia и др.

Спецификации CSS Shapes позволяют красиво оформить обтекание текстом на веб-странице. Средствами CSS можно создать произвольную форму, но это обычно весьма трудоёмкая задача. Новое расширение CSS Shapes Editor для Chrome кардинально облегчает процесс. Это интерактивный редактор CSS Shapes, где контуры указываются простым перетягиванием точек с помощью мыши.

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

Awesome Awesomeness

В прошедшие несколько недель мне регулярно попадались Awesome-* проекты, о которых я упоминал в последних подборках. Началось все с Awesome-PHP, потом появились «живые списки» полезностей для сисадминов и питонистов. Все заметили положительную тенденцию и как по желанию это переросло в целый тренд. Сейчас есть коллекции инструментов для языков Ruby, Go, NodeJS, JavaScript, Java, Scala, Bash и др. Уже даже существуют подобные наборы для целых направлениям в ИТ, к примеру Big Data. Awesome Awesomeness — это живой список живых списков всего самого необходимого для разработчика из той или иной сферы.

Breach — полноценный браузер на JavaScript

Это третья часть переведённых заметок «Good User Interface». Первые 16 частей уже ранее перевели наши коллеги из ADV на Хабре, а вторые 11 перевели мы.

Идея 28


Используйте варианты по-умолчанию, не заставляя людей выбирать

Выбор по-умолчанию или самозаполняющиеся поля с обучением сокращают объем работы, которую должен проделать пользователь. Это стандартная техника, помогающая людям продвигаться по формам быстрее, учитывая, что их время ограничено. Одна из наиболее отвратительных вещей с точки зрения дизайна интерфейсов и конверсии посетителей в клиентов — это снова и снова просить пользователей предоставить данные, которые они уже указали ранее. Старайтесь делать поля, которые будут сами заполняться самыми популярными или уже известными значениями, а не просите людей их каждый раз заполнять. Чем меньше работы — тем лучше.

Человечество давно мечтает о домашних роботах. За последние сто лет образ домашнего робота сформирован в фантастических фильмах и книгах: чаще всего это антропоморфное устройство с головой, руками и ногами. Такой робот всегда готов приготовить и принести хозяину чашечку кофе, подмести пол, протереть окно и выполнить другую домашнюю работу. А еще домашние роботы из фантастики всегда могут поговорить с хозяином. Не просто выполнять команды, а быть секретарем, помощником, партнером или даже другом!



Когда мы с друзьями решили сделать своего домашнего робота, то тоже сначала смотрели на андроидов. Хотелось построить этакого дворецкого, чтобы и завтрак мог приготовить, и ковер пропылесосить, и гостей встретить. К сожалению, изучив рынок, мы поняли, что сегодня такого робота сделать нельзя. Вернее сделать-то можно, но он будет стоить как новая иномарка и требовать регулярного сервисного обслуживания, при этом адаптация такого робота под каждую конкретную кухню будет не проще, чем пересобрать Ubuntu на Z80. Понятно, что желающих купить такого робота будет не очень много.

И тогда пришло понимание, что домашнему роботу на первых порах совсем не обязательно ходить по дому. Вдохновением для нас стал Jarvis (Джарвис) — герой фильма «Железный человек». Это дворецкий, искусственный интеллект, не имеющий тела, но способный управлять различными устройствами в доме главного героя. В результате у нас получился Cubic — домашний робот, который живет дома и может полноценно (более или менее) разговаривать с его обитателями, а также управлять различными системами типа «умный дом».

В наши безнадежно перенасыщенные гаджетами времена крайне редко какую-то из новинок хочется попробовать в деле прямо до дрожи в пальцах. Нет, конечно, потрогать новый «айфон» — дело святое, но есть уже в этом ритуале немалый элемент наигранности… А вот Microsoft Surface я, матерый любитель электронных вещиц, успешно забивший ими половину квартиры и примеривающийся ко второй, решил купить задолго до поступления этого необычного агрегата в магазины. Было в нем что-то манящее, заставляющее принять решение прямо по фотографии. Ну и все мы понимали, что если Microsoft на сей раз не выдаст мощный ответ iPad, в следующий раз редмондцев уже могут ни о чем не спросить… А раз так – Surface должен быть настоящим шедевром. Очень кстати подвернулась командировка в Штаты, и Surface был куплен в первый же день продаж.

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



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

Для изучающих Ruby / Rails, будет полезно ознакомиться с подборкой бесплатных онлайн курсов, туториалов и интерактивных занятий, посвященных языку программирования Ruby и фреймворку Ruby on Rails.

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

Когда мы создаем статические макеты интерфейсов (будь то сайтов или мобильных приложений) в Photoshop, мы не слишком сильно задумываемся над тем, как этот макет поведет себя в динамике. Стив Джобс как то сказал: «Дизайн это не то как продукт выглядит, это то как он работает». Наше впечатление от продукта формируется на основании многих факторов, но самым важным является комфортное взаимодействие с ним.

Анимация прокрутки

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

Многие интересные истории начинаются со слов «А что, если…» Так почти два года назад мне пришла в голову мысль: «А что, если собрать людей, занимающихся решением интересных практических задач в дизайне, и предложить им поделиться опытом со всеми, кому хочется попробовать силы в проектировании взаимодействия, графическом и информационном дизайне?» Компания, в которой я работаю, поддержала эту идею. На предложение войти в жюри откликнулось 4 отличных дизайнера и прошлой осенью мы провели первый Russian Design Cup. В этом посте я коротко расскажу об итогах 2012 года и о том, что вас ждёт этой осенью.

Наткнулся сегодня на одну интересную штуку.
Semantic UI — это фреймворк для создания переносимых интерфейсов, который поможет повторно использовать элементы UI в своих проектах. Такая себе альтернатива Bootstrap.
Небольшой пример — если вы хотите добавить в свой проект что-то похожее на кнопку

просто воспользуйтесь следующими элементами:

semantic add button
semantic add icon

Согласно правилам типографики, контент страницы хорошо читается, если в строке от 45 до 75 символов. При разработке адаптивного дизайна это сложно реализовать только лишь с помощью Media Queries. Появился jQuery плагин FlowType, который помогает добиться такого соотношения при любом размере экрана и ширине окна.

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

Сегодня утром увидел в Твиттере Пола Айриша ссылку на кое-что впечатляющее. Tridiv — 3D-редактор для создания моделей на CSS. Для всех, кто хоть раз боролся с CSS трансформациями, чтобы сделать даже простой 3D эффект, известно, что подобная штука сможет значительно облегчить жизнь. Для остальных — еще одна демонстрация того, на что способны HTML5/CSS3.

Приложение интерфейсом напоминает привычные 3D WYSIWYG редакторы. В режиме Превью можно настроить освещение/фон/скопировать исходный код/посмотреть, как все это выглядит на CodePen. Возможно сохранение в Local Storage. Хотя, конечно, интересный вопрос — почему выбраны трансформации, а не WebGL. Капля дегтя — работает пока только в Chrome и Safari (но код префиксо-независимый, поэтому по всей видимости в скором времени добавится поддержка остальных браузеров — в том же Firefox работает demo от автора приложения).

Многие заметили, что на YouTube и на Medium появился небольшой новый элемент UI — прогресс-бар в виде тонкой цветной полоски в самом верху страницы, который примостился прямо под панелью браузера.

Внимание к новому элементу привлек недавний популярный пост New UI Pattern: Website Loading Bars на UsabilityPost. Как выяснилось, причина использования прогресс-бара в том, что вместо загрузки новой страницы содержимое подгружается через JavaScript, и поэтому собственный индикатор браузера о загрузке страницы может не срабатывать. Чтобы у пользователя не возникало ощущения, будто страница «зависла», эту функцию переложили на плечи маленького UI-приема.

Теперь у всех желающих появилась возможность быстро сделать на своем сайте точно такой же прогресс-бар благодаря плагину NProgress.js [Демо][GitHub].