Мой (простой) технологический процесс проектирования и разработки веб-сайта портфолио.

Behind the scenes look at my design and development workflow.

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

Давным-давно где-то далеко, далеко в галактике… молодой дизайнер начал своё эпическое путешествие, полное опасных проблем с планировкой, постоянными трудностями с быстродействием, неуловимых JQuery ошибок и смертельно опасных ошибок Internet Explorer. Это именно тот обряд посвящения, который должны пройти все начинающие дизайнеры для того, чтобы гордо стоять в одном ряду со своими коллегами в этом большом мире под названием интернет. Да, я говорю о создании собственного веб-сайта портфолио.

Читать далее

Использование эскиза для улучшения мобильных устройств.

Sketching Tools

Процесс создания положительного опыта взаимодействия мобильных пользователей вышел на новый более зрелый уровень. Чтобы убедиться в этом, достаточно просто посмотреть на имеющиеся в нашем распоряжении инструменты. Прототипы таких инструментов, как Balsamiq, Axure и Fireworks позволяют нам создавать шаблоны страниц и макеты кнопок, а также помогают объяснять пользователям назначение имеющихся функций. Кросс-браузерные фреймворки, такие как PhoneGap, Zurb Foundation и jQuery Mobile помогают нам создать прототипы, используя базовые веб-языки: HTML, CSS и JavaScript.

Почему? Аргументы в пользу использования эскиза.

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

Читать далее

Тринадцать принципов создания положительного опыта взаимодействия.

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

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

Читать далее

Пять способов предотвратить создание плохой микрокопии.

BillBeardMicrocopyImage

Вы только что создали лучшее пользовательское взаимодействие. У вас была идея. Вы сделали ее схематическое отображение. Вы приступили к ее реализации. Но у вас уже появилась проблема, поскольку вы кое-что забыли: уменьшенную копию. Она носит название микрокопия.

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

Читать далее

Что значат Leap Motion и Google Glass для создания пользовательского опыта взаимодействия в будущем.

Virtual Chess

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

Благодаря Leap Motion контроллеру, выход которого состоялся 27 июня, и программе Google Glass Explorer, которая уже находится в пользовании, стал очевидным тот факт, что наша зависимость от мыши или даже монитора для веб взаимодействия в конечном итоге станет менее ощутимой.

Читать далее

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

Screen Shot 2013-03-25 at 14.30.57-500

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

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

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

Читать далее

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

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 был полностью сенсорным персональным устройством. Он также являлся игровым устройством.

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

Читать далее

Исследование десяти фундаментальных аспектов мобильной коммерции.

into-mcommerce-usability-opt_mini

Все говорят о мобильных телефонах. Некоторые коммерческие сайты специализируются именно на продаже мобильных телефонов. Мобильная коммерция (также известна как “M-коммерция”) имеет огромный потенциал, демонстрируя 86%-й рост и оборот денежных средств в размере 25 миллиардов долларов по данным на 2012 год (к 2016 году эта отметка может достичь значения в 86 млрд. долл., в соответствии с информацией eMarketer).

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

Читать далее