Блинъ Пермь

Финансовое планирование.

Знаменитый «весёлый фермер» очень доступно и кратко рассказывает о финансовом планировании.
Интервью годичной давности, но актуальное всегда.

25 июля   финансы

Пятмуз. #LinkinPark

Мир лишился Честера Беннингтона.
Херня случается.
Я, как и большая часть моего поколения, заслушивался альбомами “Meteora”, “Hybrid Theory” и, конечно же, совместным “Сollision Course”.

21 июля   Linkin Park   пятмуз

Пятмуз. #DavidBowie

Да, всё верно — сегодня в подборке несколько композиций Дэвида Боуи, самого яркого и необычного музыканта Великобритании XX и XXI веков. Кто совсем не представляет кто это такой и при чём тут Зигги — отправляю в вики для обязательного ознакомления.

Ещё есть офигительное совместное произведение Queen и Дэвида Боуи — Under Pressure.
Как поговаривают, сам Боуи придумал ту самую известную басовую партию (на 12-м ладу) этой композиции.

7 июля   пятмуз

Пользовательские сценарии

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

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

Например, сайт пермского ресторана PizzaPasta (кстати, советую посетить! :)) оставляет желать лучше с точки зрения пользовательских сценариев:
 
1. в хедере нет контактов;
Я знаю место, мне нравится кухня и клиентский сервис. Так почему же, попадая на сайт со смартфона, я не могу сразу сделать заказ столика? Потому что в хедере (шапке сайта) нет ни одного контактного номера телефона.
 
2. сомнительное сообщение перед тем, как пользователь увидит меню:
 

Вообще P.S. это Post Scriptum, в переводе с латыни «после написанного». Так почему эта надпись сделана до написанного? С таким же успехом можно было бы написать «Пролог».
Ну и немного вёрстка поехала...

 
3. «Хм, интересное меню... так, надо заказать столик!»
Да, на сайте есть меню, но нет форм связи ни после обычного меню, ни после детского. Я пришёл к вам на сайте в первый раз, прочитал про какой-то там салат микс, да ещё и с лососем! И готов сделать заказ! Дайте мне возможность принести вам деньги!
 

 

4. У PizzaPasta можно сделать заказ на самовывоз. Например, их потрясающей пиццы. Но на сайте об этом ни слова.
 
Всё это, так или иначе, влияет как на удобство использование сайта пользователями, так и на количество полученных заявок с сайта.

27 июня   UX   дизайн

Что такое — создание сайта?

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

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

Если заказчик затрудняется с формированием ТЗ, а от количества непонятных слов в брифе у него волосы на руках встают дыбом, то нужно ему помочь. И прежде, чем помочь — надо понимать самим, как и из чего состоит процесс создания сайта.
Я разделил процесс создания сайта на несколько простых этапов:
 
Нулевой этап: цель
Это основа основ. Это фундамент. Всегда нужно определяться, для чего необходимо разработать сайт.
Заказчик может сколько угодного говорить «ну, у всех есть сайт, вот и мне надо» в течение недели, а затем выдать «ну, ещё каталог товаров надо, а ещё неплохо бы было электронную оплату прикрутить». И вся работа, проделанная в течение недели, окажется пустой тратой времени.
Поэтому нужно задать как можно больше точных и понятных вопросов, чтобы заказчик раскололся (или подумал) и рассказал, для чего ему нужен сайт на самом деле.
 
Первый этап: структура
Перед созданием структуры сайта настоятельно рекомендую изучить продукты заказчика, его целевую аудиторию в интернете и ближайших конкурентов (сайты, приложения).
Любой заказчик хоть немного, но представляет внешний вид своего сайта — страницы, пункты, блоки. Поэтому стоить уделить час-два времени на то, чтобы обсудить и прописать с заказчиком в любом удобном текстовом документе (MS Word/Excel, Google Таблицы, etc) структуру сайта. Каждую страницу. Зачастую уникальных страниц получается около 5-7 остальные являются однотипными, т. е. по структуре они полностью идентичны, различен лишь смысл контента (например, на автосайтах это страницы с кредитованием и страхованием).
Готовую структуру передаём на растерзание интернет-маркетологу, который пропишет основные пользовательские сценарии и расставит формы захвата (если они необходимы).
 
Второй этап: прототипирование
На данном этапе дизайнер, исходя из структуры, накидывает небольшой прототип сайта при помощи Adobe XD или Adobe Muse (либо таких сервисов, как https://gomockingbird.com/ ). Параллельно с этим определяемся со стилистикой будущего сайта.
Готовый прототип согласовывается с заказчиком.

Второй этап может занимать и день, и два, и три. Но это — лучший способ сократить время создания макета. Нет необходимости пытаться что-то придумать, нажимая пальцем в небо. Кроме того, вы экономите время заказчика и дизайнера, а значит — экономите и деньги.
 
Третий этап: UI
Когда на руках есть структура и прототип  — можно смело приступать к разработке визуальных макетов.
Процесс кропотливый и монотонный, с подбором цветов из брендбука заказчика для тех или иных форм, с отрисовкой уникальных тематических иконок, подбор web-шрифтов и многое другое, чтобы может входить в процесс создания макетов.
После получения от дизайнера готовых макетов — идём на согласование к заказчику. Если всё хорошо, то готовим UI-kit для верстальщиков.

UI-kit — это графическое изображение всех элементов интерфейса, с которыми так или иначе взаимодействует пользователь. В такой комплект, как правило, входят:
элементы навигации — табы, вкладки, кнопки prev/next, индикаторы, флажки,
элементы взаимодействия — кнопки, текстовые поля, слайдеры, чаты.
UI-kit помогает верстальщикам видеть, как те или иные элементы должны отображаться при включении/выключении или правильном/неправильном действии (например, при неправильном заполнении, поле для ввода email должно приобретать бордер красного цвета размером 2 пикселя).

 
Четвёртый этап: вёрстка
Это один из самых магических этапов для заказчика — неделю назад он видел макеты в картинках, а сейчас они ожили! Можно нажимать на кнопки, заполнять формы или просто показывать всем своим знакомым.
 
Пятый этап: логика
Логика. Бэк. Back-end. Этап, когда верстальщики передали всё в руки программистов. Здесь кнопки начинают работать по замыслу, а данные с форм приходить на почту/в CRM. Заказчик не понимает, почему этот процесс занял столь длительное время, ведь сайт (под ним понимает «вёрстку») уже был готов!
 
На этом этапы создания сайта заканчиваются и готовый продукт переезжает на хостинг заказчика.

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

26 июня   дизайн   Рабочее
Ctrl + ↓ Ранее