Советы дизайнеру от Верстальщика

Советы Дизайнеру от Верстальщика

Приветствую, меня зовут Даниил Вершинин. Я — full-stack разработчик. Уже более 3 лет занимаюсь версткой сайтов. И мне хотелось бы дать несколько советов дизайнерам, которые занимаются разработкой макетов для сайтов. Перед тем, как начну сразу предупрежу, что я очень ценю труд дизайнеров, ибо понимаю насколько все это тяжело)

Самое главное, что должен понять дизайнер сайта, так это то, что над его макетом потом будут работать другие люди, и его главная задача — обеспечить удобную работу с макетом в дальнейшем.

Используйте сетку

Сейчас абсолютно любой верстальщик использует какой-либо фреймворк или заготовку, придерживаясь определенной разметки. Чаще всего — это 12-ти колоночная сетка Bootstrap:

12-ти колоночная сетка Bootstrap

12-ти колоночная сетка Bootstrap

Опыт показал, что практически все дизайнеры используют подобную разметку, но мало кто ее придерживается. Доходит до абсурда — сетка есть, но ни один блок ею не ограничивается (заходит за поля отступов или вообще выходит за границы container).

Подробнее про сетку Bootstrap можно почитать тут

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

На самом деле, работа с картинками занимает достаточно много времени. Что-бы не отнимать его у верстальщика — пришлите все исходные изображения отдельным архивом (они у вас и так есть, а ему будет приятно).

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

Присылайте шрифты отдельным файлом

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

Структурируйте слои

Как по мне, тут особых комментариев не нужно, но напомню, что названия как групп слоев, так и самих слоев должны нести смысловую нагрузку т четко разделятся на секции сайта (header, nav, main, breadcrumb, footer).

Используйте UI-kit

Точнее, присылайте данный файл верстальщику. В парадигме сайта в нем должны присутствовать:

  • Элементы, не присутствующие в макете. Например, в основном макете может не присутствовать кнопки с классом .danger, а вот в файле UI-kit она должна быть прорисована
  • hover-эффекты и другие элементы взаимодействия с пользователем
  • Палитра цветов, которые используются в макете

Пример хорошего UI-kit недавно сверстанного мною сайта:

UI-kit

UI-kit

Подробнее про UI-kit тут

Рисуйте несколько макетов

Тут я прекрасно понимаю, что лишнюю работу бесплатно делать никто не хочет, но, все-таки, постарайтесь убедить клиента или свою команду в том, чтобы получилась хорошая верстка, необходимо рисовать не менее 3 макетов:

  • Под мобильные устройства (телефоны)
  • Под таблетные устройства (планшеты)
  • Под десктоп (компьютер) и больше

    Дизайн нескольких макетов

    Дизайн нескольких макетов

Знать основы HTML&CSS, фремворков

Если вы планируете долго работать в сфере разработки дизайна сайтов, то рано или поздно вам придется столкнуться с изучением основ HTML&CSS и Фреймворков. Это необходимо для того, чтобы вы понимали базовые принципы верстки и не ставили перед верстальщиком невыполнимых задач (хотя, выполнить можно все что угодно, но, как правило, для этого приходится ставить костыли).

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

Знать CMS на которую будет натягиваться верстка

Особенно это правило относится к CMS, разработанных по MVC. Например, Opencart — практически все сайты на этой системе похожи по структуре, так ка там изначально встроен Bootstrap. Если  об этом знать заранее, то вы выполните гораздо меньше работы (вам останется просто перестилизовать блоки — так как они уже стоят на своих местах) и не обречете верстальщика на вечные страдания.
К тому же, знать CMS полезно и для того, чтобы не забыть про все страницы, которые необходимо прорисовать)

Читайте свежие статьи про дизайн

Это необходимо не только для того, чтобы быть «в тренде». На самом деле, дизайн очень сильно влияет, например, на конверсию. С недавнего времени хорошо разработанный дизайн и взаимодействия с пользователем влияют и на SEO — подробнее об этом в статье Почему UX действительно важен для SEO.


Надеюсь, было интересно. Если не трудно, отпишитесь в комментариях чтобы вы еще добавили в этот список.

Спасибо за внимание)

Мета-теги для покраски верхней панели браузера

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

Для чего это все?

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

Как сделать?

На самом деле, все просто! Добавив пару строчек в <head> Вашей страницы вы придадите уникальность Вашему сайту!

Вот пример для самых популярных браузеров:

<!-- Chrome, Firefox OS and Opera -->
<meta name="theme-color" content="#4285f4" />

<!-- Windows Phone -->
<meta name="msapplication-navbutton-color" content="#4285f4" />

<!-- iOS Safari -->
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black-transcluent" />

<!-- Яндекс.Браузер -->
<meta name="viewport" content="ya-title=#000000,ya-dock=fade" />

 

Почему UX действительно важен для SEO

Почему UX действительно важен для SEO

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

Поисковые системы развиваются очень быстро, и все это благодаря машинному обучению. Эти достижения позволили поисковым системам, предоставлять наиболее значимые результаты, не только с точки зрения содержания, но и с точки зрения пользовательского опыта (UX).

В конце концов, то, что хорошо для потребителя хорошо и для органического поиска (organic search performance) — особенно, если мы обратим внимание на то, как машинное обучение становится все более важным для алгоритмов поиска. Поисковые системы учитывают как совпадение последовательности, так и качество содержания, структуру и настроение.

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

1. Множество SEO навыков необходимо расширить в UX

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

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

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

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

2. UX должна развиваться за пределы линейного подхода

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

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

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

  • Контент предоставлен в виде вкладок, при нажатии на которых предоставляется содержание, но информация, которую они искали скрыта внутри вкладки.
  • Бесконечная прокрутка страниц на которых несколько подразделов располагаются на одном URL, не имеющих отношение к их поиску.

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

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

Это полезно не только для пользователей, это приносит пользу всем!

SEO команды, включившие UX в свой арсенал и UX команды, принявшие более широкий подход, рассматривая несколько точек входа, позволяют нам переосмыслить способы работы, для достижения лучших результатов. Продуктивное сотрудничество необходимо внести в процесс создания проектов — действуя как одна команда. Опыт и знания могут быть объединены вместе для того, чтобы выявить проблемы и обеспечить оптимальные решения используя точки входа веб-сайт. Все это в конечном счете приведет к лучшему результату search-to-landing-page-to-conversion.

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

Оригинал статьи: Why UX is pivotal to the future of SEO

Крутые мобильные формы - Группируйте!

Делаем крутые мобильные формы

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

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

Используйте сегментированные элементы управления вместо выпадающих меню

крутые мобильные формы - сегментированные элементы управления

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

Объединяйте несколько выпадающих списков в одно поле

Крутые мобильные формы - Объединение нескольких выпадающих меню

Да, это не всегда возможно, но самый яркий пример — выбор даты. Нам нужно ввести день, месяц и год, это означает, что при использовании выпадающих меню вы в конечном итоге вам необходимо выполнить, как минимум, 3 взаимодействия в четыре шага, который в сумме добавляет до 12 взаимодействий. Это много. Используя одно поле для всей даты всю процедуру можно проделать за пять шагов — открыть, выберите день, выберите Месяц, Год выберите, нажмите установить.

Используйте переключатели вместо выпадающих меню

Переключатели можно использовать для реализации бинарного ввода. Например, при выборе «Показать» или «Скрыть». Между прочим, это очень удобный и интуитивный UX — элемент.

Ползунки

Крутые мобильные формы - Ползунки

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

Избегайте многоколоночности

Крутые мобильные формы - Избегайте многоколоночности

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

Используйте степперы вместо выпадающих списков

Крутые мобильные формы - степперы вместо выпадающих списков

Если пользователям необходимо сделать небольшие корректировки значений путем увеличения или уменьшения, то мы можем избежать пустые input’ы и выпадающие списки, используя степперы. Они помогают свести к минимуму ошибки, и сократить количество нажатий для получения правильных значений.

Показывайте ошибки рядом, а не группируйте их

Крутые мобильные формы - ошибки

Показывайте ошибки в контексте (рядом с полем). Это очень важно, поскольку в большинстве случаев, список ошибок находится вне области просмотра экрана, поэтому держать пользователей в курсе «прямо на месте» — это важно.

Не выделяйте необязательные поля

Крутые мобильные формы - Избегайте многоколоночности

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

Группируйте!

Крутые мобильные формы - Группируйте!

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

Позаботьтесь о размере элементов

Крутые мобильные формы - Позаботьтесь о размере элементов

Не делайте кнопки и сенсорные зоны слишком маленькими. Поймите уже! На телефонах нажимают на кнопки не курсором мыши, они используют свои пальцы!

Остаайтесь верными платформе

С мобильными версиями сайтов и, особенно, в приложениях стараюсь быть верным платформе. Используйте устоявшиеся схемы взаимодействия, если это возможно, и обеспечивайте пользовательский интерфейс, знакомый пользователям. Люди имеют одинаковое ожидание от кнопки «назад» в любом приложении, выполняется на любом устройстве, не зависимо от того, это будет iOS, Android или Windows.

Если приложить немного усилий к разработке формы Вы сможете увеличить конверсию. 

Оригинал статьи: Building Great Mobile Forms

Роторный телефон ретро-ввод номера для Вашего сайта

Роторный телефон: ретро-ввод номера для Вашего сайта

Статья «Плохие веб-формы» говорила об абсурдных формах для ввода телефонных номеров, таких как в том числе incrementer, бегунок, генератор случайных чисел, и очень большой выпадающий список.

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

Демо: Смотреть
Исходники на GitHub
Оригинал статьи: Rotary: A Retro Web Input for Phone Numbers


Как думаете — как данный аппарат может повлиять на юзабилити Вашего сайта? Пишите в комментарии.

UX Дизайн

User Experience дизайн

Эффективность ресурса зависит от такого ключевого фактора, как анализ опыта взаимодействия. Пользовательский опыт включает в себя множество различных факторов, таких как эмоции, убеждения, ощущения и различного рода физические и психологические реакции. Что же в целом представляет собой User Experience дизайн?

User Experience Дизайн — визуальная культура эстетического взгляда и процесс понимания пользователя, его положения и потребностей.

Многие ошибочно полагают, что UX и UI не имеют существенных различий, но UX — не просто дизайн пользовательского интерфейса. Конечно, дизайн является неотъемлемой частью жизни UX, ведь нас постоянно окружает ландшафт, архитектура, облик прохожих, но это малая часть того, что формирует наше восприятие.
User Experience дизайн
Пользовательский опыт основывается и непосредственно связан с тем, как человек воспринимает ресурс при взаимодействии. Можно сказать, что UX дизайн – это процесс увеличения степени удовлетворенности конечного потребителя путем улучшения доступности и удобства при взаимодействии клиента с ресурсом.

Навыки User Experience-специалиста

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

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

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

UX дизайн охватывает всем привычное взаимодействие «человек-компьютер», существенно расширяя их сотрудничество с учетом тонкостей и аспектов пользовательского восприятия ресурса.

User Interface дизайн

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

 

User Interface дизайнер должен разбираться в ряде ключевых моментов:

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

Главная цель User Interface дизайна — создание такого продукта, который прост, понятен и эффективен при взаимодействии с пользователем.

Зарождение понятия User Interface (UI)

Первые персональные компьютеры почти не нуждались в UI дизайне, т.к. единственное взаимодействие с пользователем, которое происходило — вывод отчетности. Своим развитием пользовательский интерфейс обязан появлению командной строки в 60–70-е годы, которая предоставляла возможность пользователям взаимодействовать с компьютером, используя определенный набор команд.

В 80-е развитием UI занялся центр научных исследований Xerox, который поддерживала компания Apple, она же внесла это понятие в общественные массы. В последующем интерфейсный принцип стандартизировал Microsoft в своих операционных системах, а понятие у User Interface переросло в GUI (графический UI).
Современное понятие «пользовательский интерфейс» гораздо обширнее и, скорее всего, включает в себя в целом пользовательский опыт. По этой причине с каждым днем все сложнее разделять понятие User Interface и User Experience, ведь эстетическая красота продукта или устройства — не только презентабельный внешний вид, но и содержание контента, представленного пользователю, время ожидания и отклика, а так же другие понятия, относящиеся непосредственно к UX дизайну.

User Interface дизайн

Спасибо за внимание!