Частота 60 кадров в секунду: тематическое исследование сайта “Pinterest”.

Screen Shot 2013-03-25 at 14.30.57-500

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

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

Частота кадров – это скорость, с которой устройство воспроизводит последовательность изображений на экране. Низкий показатель отображения кадров в секунду (FPS) означает, что отдельные кадры могут быть видны для человеческого глаза. Высокий показатель FPS дает пользователям ощущение адаптивности. Вы, вероятно, уже сталкивались ранее с этим понятием в основном в мире игр, но его также можно отнести и к интернету.

Читать далее

Метод «автомобиль клоуна»: применение адаптивных изображений в веб-дизайне.

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

В нашем распоряжении находятся изображения для переднего плана и фоновые изображения. У нас есть большие и маленькие дисплеи. Мы используем стандартные дисплеи и дисплеи с высоким разрешением. У нас есть соединения с высокой и низкой пропускной способностью. Мы можем использовать портретную и пейзажную ориентации.

Читать далее

Календарь для рабочего стола: Июнь 2013

Something Fresh

 

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

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

Читать далее

Советы и хитрости по тестированию тем WordPress

 

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

Эта статья разделена на три раздела:

Читать далее

Состояние адаптивного дизайна.

Picture element used for artistic direction

Адаптивный веб-дизайн популярен уже в течение нескольких лет и стал самой обсуждаемой темой в 2012 году. Многие известные люди, такие как Брэд Фрост и Люк Врублевски имеют огромный опыт работы в этой области и помогли нам сделать свой вклад в развитие адаптивного дизайна. Но, не смотря на все это, нам все еще необходимо проделать большой объем работы.

В этой статье мы постараемся проанализировать изменения, которые можно сделать сейчас или в будущем используя еще не стандартизированные свойства (например, CSS Level 4 и HTML5 API). Также мы рассмотрим возможные улучшения. Эта статья не будет слишком подробной, ведь мы не будем углубляться в особенности каждой техники, но вы получите достаточный объем информации и знаний для дальнейшего самостоятельного изучения.

Читать далее

Открытые лаборатории устройств: почему мы должны быть заинтересованы в этом?

odl-nbg-2-4-500

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

odl-nbg-2-4-500

Пользователь тестирует свой веб-сайт на Blackberry и принимает к сведению все ошибки.

Читать далее

Как решить 50 проблем проектирования за 50 дней: использование эмпатии для инноваций (часть 1).

50 Problems in 50 Days: Website

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

50 Problems in 50 Days: Website

Читать далее

Как обойтись без кнопок: использование интерфейса движимого жестами.

Rise and Clear

Разработчики пользовательского интерфейса (UI) или UX для мобильных устройств, наверное, помнят о выходе первого iPhone от Apple, как будто это было вчера. Помимо всего прочего, iPhone был полностью сенсорным персональным устройством. Он также являлся игровым устройством.

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

Читать далее

Создание нового веб-приложения Файнэншл Таймс: тематическое исследование.

promo-500-compr

Когда в середине 2012 года появился экспериментальный макет нового приложения Файнэншл Таймс, мы поняли, что перед нами возникла реальная проблема. Многие члены нашей команды (включая меня) клялись, что некоторые части интерфейса невозможно было реализовать с помощью HTML5. Учитывая страсть команды к новым пользовательским интерфейсам, мы, засучив рукава, принялись за работу.

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

Читать далее

Создавать CSS шаблоны с помощью flexbox проще, чем испечь пирог.

figure1.1_mini

Эта статья представляет собой откорректированные выдержки из главы «Изменение стиля, перекодировка, изменение оформления с помощью CSS3» нашей книги Smashing Book #3, написанной Леа Веру и Дэвидом Стори. — Ред.

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

Читать далее