Организация ооо «процветание-дизайн»

Иммиграционная программа, требующая рабочего контракта (подходит для NOC 2175)

   Название Провинция
*** and No*** Онтарио
***c Exper*** Квебек
Примечание: Требуется опыт работы в Квебеке: 12 месяцев за последние 24 месяца для профессий NOC 0, A и B и 18 месяцев для остальных.
***oba Ski*** Манитоба
Примечание: Требуется опыт работы 6 месяцев в Манитобе
*** and No*** Манитоба
*** and No***
***tchewan*** Саскачеван
Примечание: Требуется опыт работы от 6 месяцев в провинции
***Scotia *** Новая Шотландия
Примечание: Требуется годовой опыт работы в Новой Шотландии
***killed *** Северо-Западные территории
Примечание: Требуется годовой опыт работы в Северо-Западных территориях
***xpress *** Северо-Западные территории
Примечание: Требуется годовой опыт работы в Северо-Западных территориях
***tic Int***
***ta Oppo*** Альберта
Примечание: Требуется годовой опыт работы в Альберте
***Scotia *** Новая Шотландия
Примечание: Требуется годовой опыт работы в Новой Шотландии
*** Expres*** Юкон
Примечание: Уровень языка — CLB 5 или 7 — зависит от требований конкретной федеральной программы, по которой проходит кандидат.
*** Skille*** Юкон
***io Corp*** Онтарио
Примечание: Для ключевых сотрудников корпораций; корпорации требуется инвестировать в бизнес C$5 млн
***runswic*** Нью-Брансуик
***illed W*** Британская Колумбия
Примечание: Люди с профессиями NOC B должны владеть английским или французским на уровне 4 по CLB
***sh Colu*** Британская Колумбия
***runswic*** Нью-Брансуик
***undland*** Ньюфаундленд и Лабрадор
***killed *** Остров Принца Эдуарда
***killed *** Остров Принца Эдуарда
Примечание: Дополнительное требование: работа на Острове в настоящее время
***tchewan*** Саскачеван
***undland*** Ньюфаундленд и Лабрадор
***tic Hig***
***io Fore*** Онтарио

Список канадских компаний, которые нанимают иностранных специалистов по данной профессии.

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

Надо выходить на уровень нормы

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

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

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

Цвет

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

Важно!

Важно!

Для работы с цветом нужно знать, какие цвета сочетаются, какие — нет, что такое гармония.

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


Цветовой круг Иоханнеса Иттена

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

Чтобы не ошибиться в выборе цветов, дизайнеры пользуются специальным палитрами.

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

Макеты

Макет нужно делать в sRGB. Обязательно и критично. Иначе цвета в вёрстке могут отличаться от макетных.

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

Одна страница = один макет. Обычно, это довольно объёмные файлы, если хранить все на артбордах в едином файле, он может подтормаживать. Особенно актуально для PSD-макетов, для простых AI-макетов может быть допустимо разместить все макеты на артбордах в одном файле.

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

Оставляйте эффекты слоёв. Эффекты, преобразованные в слои, ощутимо дольше верстать.

Про корректирующие слои лучше забыть. Любые «пост-модификации» могут всерьёз осложнить работу технолога.

Делаете макет в Adobe Illustrator — прикладывайте все линкованные ресурсы (картинки, шрифты…) и скриншоты макета. Если в макете использована растровая картинка, не записанная в файл (линкованная), технолог её не увидит, если она не приложена к макету.

Стайлгайд

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

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

Стайлгайд — это отдельный макет. Это не текстовая инструкция как включать/выключать видимость слоёв, варианты композиции слоёв. Это не артборд, включённый в какой-либо макет.

Для ссылок нужны состояния: «покой», «наведение», «клик» (последние два могут совпадать). Для навигационных ссылок нужно состояние «находимся на этой странице». Для контентных ссылок желательно состояние «ссылка посещалась».

Для кнопок нужны состояния: «покой», «наведение», «клик», «блокирована». Иногда ещё нужно состояние «идёт процесс».

Для текстовых полей форм нужны состояния: «покой», «курсор в поле», «блокировано». Нет смысла прорисовывать состояние «клик». Нет смысла прорисовывать состояние «наведение».

Для флажков (чекбоксов) и радиокнопок нужны состояния: «отмечено», «не отмечено», «блокировано». Нет смысла прорисовывать состояние «клик». Нет смысла прорисовывать состояние «наведение».

Для типографики нужно показать, как минимум, следующее: заголовок 1, параграф, заголовок 2, параграф, заголовок 3, параграф, заголовок 4, параграф, параграф, маркированный список, параграф, нумерованный список, блочная цитата, параграф, таблица, параграф

Верстальщику важно увидеть все вертикальные расстояния (для этого и нужно чередование параграфами и два параграфа подряд)

Разное

Анимация может повредить проекту с точки зрения технологии реализации. Хотите добавить анимационные эффекты? Посоветуйтесь с технологом. Недостаточно просто найти пример реализации (или, что гораздо хуже, видео или GIF с нужной анимацией), так как реализация анимации может потребовать подключения к проекту тяжелой библиотеки, сравнимой по размеру файла с файлом всех используемых на проекте стилей.

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

. Такие иконки в 90% случаев технологически непригодны к использованию в векторном виде.

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

Акценты

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

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

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

В каком направлении развиваться веб-дизайнеру

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

Вот на чем может специализироваться веб-дизайнер:

UX/UI-дизайн — проектирование внешнего вида сайтов и приложений с учетом удобства для разных пользователей.

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

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

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

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

Например, в мобильном приложении-навигаторе элементы управления делают крупными, чтобы водитель мог управлять картами и прокладывать маршрут по время движения.


Product Dashboard by Mason Yarnell

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

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

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


Pull Down To Refresh — UI Animations by Ramotion

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

Дизайнер айдентики стоит в стороне от других специализаций в веб-дизайне, но это не мешает дизайнеру в digital развивать в себе такие навыки.


Pixty App Branding by Ramotion

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

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

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

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

Курс «Веб-дизайн с 0 до PRO»

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

  •  32 часа теории и 16 практических заданий
  • Живая обратная связь с преподавателями
  • Неограниченный доступ к материалам курса
  • Стажировка в компаниях-партнёрах
  • Дипломный проект от реального заказчика
  • Гарантия трудоустройства в компании-партнёры для выпускников, защитивших дипломные работы

Неприятные для технолога мелочи

Отсутствие структуры слоёв. Если слои не разложены по правильно именованным папкам, это несколько замедляет работу.

Большие части макета в смарт-объектах. «Шапка» и «подвал» в смарт-объектах не имеют смысла для экономии места, но увеличивают время доступа к своим составляющим. Это не относится к связанным смарт-объектам, в случае, когда макетов много.

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

Изменения вида векторных объектов эффектами Photoshop. Это может привести к невозможности использования векторной графики.

Набор текстовых блоков КАПСОМ вместо использования «All Caps». Приводит к необходимости нажимать несколько лишних кнопок при копировании текста слоя. Когда таких слоёв много — потеря времени.

Заголовок текстового блока и его контентный текст в одном текстовом слое. Несколько лишних кликов.

Блокированные папки и слои. Если действительно нужно что-то блокировать, блокируйте папку, не блокируйте отдельные слои — до них становится сложнее добраться.

Дизайн — баланс красоты и логики

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

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

Под словом «дизайн» сейчас подразумевается скорее не то, как сайт выглядит, а то, как он работает и насколько легко пользователям достичь своей цели. Творчество и искусство в оформлении отошли на второй план.

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


promo page by uixNinja

Чтобы этого добиться, дизайнер должен развиваться в смежных с веб-дизайном областях:

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

Переговорах, чтобы общаться с заказчиками и коллегами.

Написании текста и редактуре, потому что текст и дизайн неразрывно связаны друг с другом.

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

Верстке и frontend-разработке, чтобы знать, как нарисованный в программе макет превращают в рабочий сайт, который выкладывают в интернете.

Других сферах дизайна: иллюстрации, графическом дизайне, анимации и создании интерактивных баннеров.

Адаптивность, адаптивная графика

Выберите 2-3 брейкпоинта и создавайте макеты для них. Обычно, брейкпоинты следующие: 768, 992, 1200 пикселей (изредка добавляется ещё 480 пикселей). Традиционно, мы принимаем некую минимальную ширину (320 или 240), преобразования блоков происходят по достижении брейкпонта

Важно понимать: сделав макет в ширине 768, Вы показали то, как макет выглядит от 768 до следующего брекпоинта в большую сторону (скажем, 992)

Уточняйте в техническом задании как ведет себя дизайн на разных брейкпоинтах. По умолчанию, всё, что уже чем ≈1000 пикс. будет «резиновым».

Ретинизируемые растровые изображения в оригинале должны быть в 2-3 раза крупнее, чем видно в макете. Лучше всего, чтобы они не лежали в режиме подрезающей маски, а были масштабированными смарт-объектами.

Мы можем показывать разные изображения на разных размерах экранов штатными методами ( с полифилом).

Хотите сами подготовить растровую графику — посоветуйтесь с верстальщиком. Общие правила: нужна прозрачность — PNG (8-24 бит), не нужна прозрачность — JPEG (прогрессивный, качество 60-80%).

Текст, Шрифты

Используйте проверенные шрифты. Перед использованием редкого шрифта или особого начертания, обязательно проверяйте, как они отображаются во всех браузерах из технического задания на всех операционных системах. Особенно в Windows и Linux, особенно кириллица. Самые «удачные» браузеры — IE (и Edge) и Firefox. За этим можно обратиться к технологу.

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

Выберите несколько размеров шрифта и придерживайтесь их. Пример размеров: для заголовков 1, 2, 3 и 4 уровней, контентный, акцентированный (если не совпадает с каким-либо заголовочным), уменьшенный. Не плодите сущности без надобности.

Вертикальные границы текстового блока проходят по границам «высоты линии», а не по границам букв первой и последней строк.

Избегайте менять кернинг и трекинг. На подавляющем большинстве дисплеев очень мало «пикселей на дюйм», такое изменение нередко приводит к грустным эффектам: размытие символов, изменение их визуальной плотности.

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

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

Сетки

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

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

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

Типографика

Знание типографики — один из основных навыков любого дизайнера, и не важно, создает ли он интерфейсы, делает макеты печатных газет или верстает плакаты.

Важно!

Типографика на странице тесно связана с другими элементами интерфейса, поэтому нужно правильно ей пользоваться.

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

Дизайнер, который разбирается в типографике:

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


Exploring The North Face on Dribbble

Книги

  • Александра Королькова. Живая типографика.
  • Эрик Шпикерманн. О шрифте.
  • Дизайн‑бюро Артема Горбунова. Типографика и верстка.

Общее

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

Технически недоработанный макет осложняет работу технолога. Для студий — это увеличение сроков разработки. Для фриланса — ухудшение кармы дизайнера в момент, когда технолог описывает клиенту список технических недоработок и/или неучтённых дизайнером ограничений.

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

Модульные сетки

Используйте модульные сетки. Это сделает результат аккуратнее и, если не допускать глупых ошибок, ускорит реализацию макета в вёрстке. Самая глупая ошибка: создать модульную сетку, но не следовать ей.

Граница ячеек модульной сетки — это середина промежутка между ячейками. Блок не может выступать за середину этого промежутка — левая граница блока не может проходить по правой границе предыдущей ячейки модульной сетки.

Идеал модульной сетки — 12 колонок. Ибо 12 делится на 2, 3, 4 и 6. Чтобы придумывать свои (пяти- и восьми-колоночные) сетки нужно иметь действительно серьезные причины, ибо восьми-колоночная сетка не позволит выстроить блоки по 3 в ряд.

Между колонками может быть пустое место, пропорциональное ширине колонки. К примеру, блоки в 12-колоночном ряду могут распределяться так: 2-колоночный блок, 1 колонка «пустоты», 9-колоночный блок.

Что такое UI-дизайн

UI (англ. user interface) переводится как «пользовательский интерфейс». Он может быть не только графическим, но и тактильным, голосовым, аудио-. Мы рассмотрим только графический интерфейс, так как дизайнеры в основном работают с ним.

UI-дизайн — процесс визуализации прототипа, который разработали на основании пользовательского опыта и исследования целевой аудитории.

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

UI-дизайнер определяет цветовую палитру и расположение объектов в интерфейсе: удобно ли попасть пальцем по кнопке «Заказать», правильно ли работает выпадающее меню, удобно ли заполнять форму, хорошо ли читается текст со смартфона, какое сообщение выдает сайт при том или ином действии.

UI-дизайнер (англ. user interface designer) — дизайнер интерфейсов, который визуализирует рабочий прототип, отрисовывает кнопки, иконки, формы и другие его компоненты и собирает их в гармоничный работающий макет.

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


Концепция интерфейса для мобильного приложения Clean & Clear. Автор Абир Махмуд.

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

Ясность

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

Лаконичность

Важно не перегружать интерфейс подсказками, всплывающими окнами и анимацией

Задавайте себе вопросы: «А нужно ли это здесь? Для чего?» Это поможет не перегрузить страницу и сфокусировать внимание пользователя на конкретном элементе

Узнаваемость

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

Отзывчивость

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

Постоянство

Соблюдайте постоянство для всех разделов сайта и приложения. Элементы интерфейса — меню и слайдеры — должны вести себя одинаково на любой странице.

Эстетика

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

Эффективность

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

Снисходительность

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

Диаграмма Гутенберга

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

Условно пользователь делит страницу на 4 зоны:

1. Левая верхняя — зона приоритетного просмотра

Сюда пользователь смотрит всегда. Именно здесь размещается самая важная информация — логотип и слоган. Если мы говорим про текстовый контент — это первые 2-3 слова заголовка.

2. Правая верхняя — хорошо просматриваемая зона

После зоны приоритетного просмотра взгляд смещается именно сюда по горизонтали

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

3. Левая нижняя — наименее исследуемая зона

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

4. Правая нижняя — зона выхода

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

На поведение пользователя также влияют два фактора:

  • Гравитация чтения, благодаря которой взгляд инстинктивно смещается сверху вниз.

  • Ось ориентации — привычка читать и изучать текстовый контент слева направо. Поэтому вектор внимания пользователя фактически смещается по диагонали от зоны приоритетного просмотра к зоне выхода.

Интересный факт: в странах, где пишут справа налево — диаграмма Гутенберга будет актуальна в отраженном виде.

Чтобы было понятнее, как это работает в реальном мире, давайте рассмотрим несколько примеров из блога компании AskUsers и дополним их собственными кейсами и выводами.

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

Обратите внимание, как бросается в глаза слово «секс», размещенное в левом верхнем углу

Кнопка подтверждения почти всегда расположена в зоне выхода — в правом нижнем углу

Пример №6 — главная страница Фейсбука на арабском языке

Помните, я рассказывал, что в некоторых странах диаграмма Гутенберга будет работать в зеркальном отражении из-за того, что там отличается направление письма? Вот пример реализации.

Запись вебинара смотреть сложнее, чем живой

Позже я убедился в обратном, но об этом в следующих постах

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

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

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

Правило третей

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

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

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

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

Сходите с ума, нарушайте правила, повеселитесь немного, и если вам повезет, найдите новые границы!

Золотое сечение

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

Витрувианский человек Леонардо Да Винчи

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

Что такое UX-дизайн

UX (англ. user experience) — дословно означает «опыт пользователя». В более широком смысле это понятие включает в себя весь опыт, который получает пользователь при взаимодействии с вашим сайтом или приложением.

UX-дизайн отвечает за функциональность, адаптивность продукта и то, какие эмоции он вызывает у пользователей. Чем проще ваш интерфейс, тем проще пользователю получить результат и совершить целевое действие.

UX-дизайн — это проектирование интерфейса на основе исследования пользовательского опыта и поведения.

Одним из ярких примеров работы UX-дизайнеров можно назвать первый персональный компьютер компании Apple — Macintosh. Идея использовать окна вместо командной строки существовала и до1984 года, но именно инженеры и проектировщики Apple сделали графический интерфейс массово доступным.


Графический интерфейс Macintosh в 1984.

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

UX не заканчивается на красивой и понятной форме на сайте. UX — это путь пользователя от точки входа до точки выхода, из пункта А в пункт&nbspБ. 

Сергей Попков

шеф-дизайнер AIC

Другими словами, UX — это впечатления, которые клиент получает от работы с интерфейсом. Опыт пользователя зависит от различных компонентов: архитектуры сайта, графического дизайна, понятного текста и отзывчивости интерфейса на конкретные действия пользователя.

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

UX-дизайнер (англ. user experience designer) — это проектировщик, который изучает потребности пользователей, строит логические схемы работы интерфейса, тестирует прототипы на целевой аудитории и составляет техническое задание для UI-дизайнера.

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

Ссылка на основную публикацию