Веб-дизайн *

Как известно, HTML5 имеет расширенные возможности семантической вёрстки. Он позволяет обернуть отдельные логические блоки страницы в специально предназначенные для них блочные теги, какие как header, main, footer и другие. Ну а улучшение структурной и семантической вёрстки, как правило, автоматически способствует повышению уровня accessibility web-интерфейса для пользователей программ экранного доступа, потому что они добавляют элементы страницы, по которым возможно осуществлять навигацию и быстро перемещаться между блоками контента.

В принципе, дополнительная разметка для обеспечения accessibility реализуется через отдельную технологию WAI-ARIA, однако и стандартные семантические структуры HTML5 современными браузерами и современными программами экранного доступа воспринимаются как соответствующие атрибуты ARIA для вспомогательных технологий. Проще говоря, это означает, что в теории следующие два варианта вёрстки с точки зрения программ чтения экрана аналогичны::

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

Перевод статьи «The Hamburger Icon» дизайнера сайта Booking.com Мишеля Феррейры от 23 сентября 2014 года.


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

Адаптивный веб-дизайн – это намного больше, чем просто эластичные шаблоны и @media queries. На самом деле, это совершенно новый подход к дизайну. Учитывая это, предлагаю рассмотреть несколько распространенных подводных камней, которых следует избегать в вашем следующем адаптивном шаблоне.

Вчера разработчики Chrome сообщили о том, что компания Adobe подготовила бета-версию Photoshop для пользователей ChromeOS. Официальная страница проекта также говорит о том, что скоро будут доступны и другие продукты из Creative Cloud.

Приложение будет распространяться по принципу SaaS (Software as a Service) и будет выполняться не локально на компьютере клиента, а в виртуализированном окружении, доступ к которому будет осуществляться через web-приложение. Все данные, с которыми будет работать пользователь, будут храниться в облаке Google Drive.

На данный момент участвовать в бета-тесте могут только клиенты категории Adobe Education из Северной Америки.

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

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

Две недели назад закончилось наше пребывание в акселераторе Яндекса — Tolstoy Startup Camp. Жаль.

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

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

Что случается, когда аналитик сталкивается с абстрактными художественными понятиями? А если от них зависит эффективность и успешность его работы? Он попытается их формализовать, выявить критерии, связи и так далее. Обычно получается забавно и очевидно. Но иногда из этого вырастает полезная теория.
Я столкнулся с понятием красоты сайта. Делюсь наработками.
Картинки для привлечения внимания нет.

Весной 2012 года к нам обратился модный дом Versace с весьма необычной задачей — создать интернет-магазин, но… не для продаж. Новый е-commerce сайт должен был стать в первую очередь каналом коммуникации с глобальной аудиторией и площадкой для расширения влияния бренда онлайн. Versace стремились транслировать модный месседж не только своим покупателям, но и тем, кто пока не осмеливается зайти в реальный магазин с вывеской Versace. Еще одной целью клиента было формирование портрета целевой аудитории в интернете. Таким образом, на дизайн нового магазина оказались возложены не совсем типичные задачи, и, благодаря им, он оказался важнейшей и самой интересной частью проекта.

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

Вся дополнительная информация представлена в первой части.

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

Картинки кликабельны, открываются в текущей вкладке

Примечание от нас:

Не так давно на Хабре встретился комментарий о том, что целевые страницы начинают себя изживать. Но как кажется нам, учитывая тенденции забугорного интернета, этот вывод немного преждевременен. LP переживают период бурного расцвета и считаются чуть ли не панацеей для электронной коммерции, как B2C, так и B2B формата.

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

Немного об источнике.

Visual Website Optimizer – компания, которая занимается анализом и оптимизацией сайтов. Основным направлением деятельности является A/B тестирование, в ходе которого осуществляется комплексный анализ различных сторон процесса конвертации и всех факторов, которые на него влияют. Компания имеет огромный опыт и приличную клиентскую базу, в которой замечены Microsoft, Logitec и даже российский ресурс Ichance.

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

Картинки кликабельны, открываются в текущей вкладке

Fireworks позволяет преобразовывать темы jQuery Mobile, просматривать их и экспортировать соответствующий CSS код и спрайт. Статья учит созданию собственных тем jQuery в Adobe Fireworks CS6.

Уже четыре года я публикую регулярные обзоры свежих статей по теме интерфейсов, новых инструментов и коллекций паттернов, интересных кейсов и исторических рассказов. Из лент нескольких сотен тематических подписок отбирается примерно 5% стоящих публикаций, которыми интересно поделиться. Предыдущие материалы: апрель 2010-июнь 2014.

Не так давно, Вконтакте объявил о старте конкурса на редизайн. Как минимум, это будет интересно, подумал я. И принял участие. Все это вылилось в некую черновую концепцию, которой я и хочу поделится — надеюсь, мои мысли, идеи и рассуждения будут полезны хабрасообществу. Осторожно, трафик!

Какое влияние оказывают веб-страницы продуктов интернет-магазина на уровень конверсии? Ну, это как сказать. Но факт в том, что страница продукта – это ваш последний шанс побудить пользователя совершить покупку.

Именно здесь пользователь ожидает найти всю необходимую информацию для совершения покупки. И это большая проблема для UX-дизайнера («юзабилити-дизайнера»), так как ему необходимо донести до пользователя так много информации на таком ограниченном пространстве. Возможно, именно поэтому большинство страниц с описанием продукта, в конечном итоге, выглядят беспорядочно и неаккуратно. Поэтому очень важно представить всю информацию самым удобным, понятным и убедительным путём.

Вот где пригодятся методы юзабилити.

Аннотация

Всем доброго времени суток. В рамках своей работы мне частенько приходится читать зарубежную периодику для дизайнеров ну и, естественно, часто переводить её. У меня скопилось несколько уже подготовленных переводов, с одним из них я решила поделиться с вами. Если кому-то будет интересно — продолжу.
P.S. Некоторые переводы опубликованы в моём блоге, так что если со стороны читателей хабра будет интерес — для хабра буду оставлять эксклюзив.

Почему популярность минимализма постоянно растет?

Популярность минимализма неуклонно растет в последние годы. Задолго до появления флэт дизайна (плоского дизайна, flat design), минимализм оказывал большое влияние на художников, скульпторов, режиссеров, дизайнеров интерьера, дизайнеров и, конечно, веб-дизайнеров.

В поисках оптимального способа создания интернет-магазина я не мог обойти стороной ряд компаний, предлагающих свои услуги в данной сфере — то бишь веб-студии. Посему предлагаю к всеобщему ознакомлению краткий обзор студий, вошедших в топ cmsmagazine.ru.

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

Я хочу рассказать, как можно сделать качественный дизайн с ограниченным бюджетом.

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

Прошлые статьи серии можно найти тут:

«Серьезное проектирование серьезного магазина. Часть 1. Исследования»
«Серьезное проектирование серьезного магазина. Часть 2. Модули интернет-магазина»
«Серьезное проектирование серьезного магазина. Часть 3. Карточка товара и не только»
«Серьезное проектирование серьезного магазина. Часть 4. Субституты, комплементы, сравнение и другие инструменты увеличения конверсии»

Регистрация / личный кабинет

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

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

Рис. 1. Личный кабинет.