Логотип iz.ru и zed.kz

Недавно в социальных сетях попалась ссылка на новость с сайта iz.ru. Логотип и цветовая гамма показались очень знакомыми.

логотип iz.ru

Дело в том, что айдентика iz.ru очень похожа на стиль компании — ТОО Zed.kz, основателем и руководителем, которой я являюсь.

скрин сайта zed.kz 03.02.18

Cкриншот сайта Zed.kz на 03.02.18 года

Если верить статье в Википедии, то проект iz.ru был зарегистрирован как СМИ 21 июня 2017 года. Сам канал начал вещание 18 августа 2017 года. А наше ТОО было зарегистировано 18 марта 2014 года. Логотип и фирменный стиль с тех пор не менялся.

Плагиат или не плагиат? 🙂

Новый интерфейс личного кабинета Altel

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

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

Что ждёт пользователь от личного кабинета провайдера? Наверное, чтобы можно было быстро получить важную информацию, удобно было управлять подключенными услугами и оплачивать услуги. Что такое продуманный интерфейс? Тот, который учитывает нужды пользователя.

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

altel новый дизайн личного кабинета

Во-первых, первым пунктом выведена «стоимость абонентской платы». Сомнительный приоритет для статичной информации. При этом ее можно было вывести рядом с названием тарифа. Дата следующего списания вообще не отображалась. Но всё это мелочи по сравнению с пунктом «Ресурсы в рамках тарифного плана». В нем были нарушены законы восприятия. Зеленый цвет — это цвет позитивной тенденции, красный — негативный. Если пользователь видит прогрессбар зеленого цвета, идущий слева направо, то он подсознательно воспринимает это объем чего-то позитивного для себя. Что позитивное для юзера? Объем трафика, который у него в распоряжении. Логично? Логично!

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

altel новый дизайн личного кабинета

Трафик на шкале только увеличился! Это был показатель не остатка, а показатель использованного трафика!

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

P.S.

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

Была переписана подпись — теперь это «Остаток ресурсов…», что дает однозначную трактовку показателя. Цветовая шкала используется верно — это объем остатка трафика, доступного пользователю.

поправленный altel новый дизайн личного кабинета

 

UPD. Оплату было бы логично перенести в раздел Баланс.
баланс алтел личный кабинет

Школа дизайна Яндекса

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

Описание первого цикла видеороликов на тему дизайна:

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

Занятия видеокурса Школы дизайна Яндекса строятся таким образом, чтобы слушатели прошли через весь процесс работы над продуктом: от идеи до запуска.

Программа состоит из четырёх секций:
– Дизайн в крупной компании
– Прототипирование
– Дизайн продукта
– Работа в команде

Плейлист

Недавно стартовала Школа мобильного дизайна 2016.

Видеокурс для дизайнеров интерфейсов, которые хотят получить дополнительные знания и навыки по созданию мобильных продуктов с большой аудиторией. Основан на лекциях Школы мобильного дизайна, прошедшей в рамках проекта «Мобилизация». В программу входят лекции об особенностях дизайна мобильных продуктов, прототипировании и анимации, а также о работе в команде. Видео публикуются каждый вторник с 18 октября по 13 декабря 2016.

 

Всем интересующимся дизайном настоятельно рекомендую.

 

Юмор в инфографике (круговые диаграммы)

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

Ниже два примера остроумного использования круговых диаграмм (pie chart):

Пирамида в инфографике

Pie-Pyramid

Пирамида в инфографике

Пирамида

Sky — небо
Sunny side of pyramid — солнечная сторона пирамиды
Shady side of pyramid — тенистая сторона пирамиды

 

Пирог в инфографике

Pie-I-have-Eaten

Пирог в инфографике

Pie I have eaten — Часть пирога, которую я съел
Pie I have not yet eaten — Часть пирога, которую я еще не съел

Изображения взяты с сайта FlowingData — интересный ресурс о визуализации данных

[related_posts] [twitter style=»horizontal» float=»left»][fbshare type=»button_count»]

[linkedin_share style=»top»] [google_plusone size=»standard» annotation=»none» language=»English (UK)»]

Про мастер-класс «Инфографика: увидел и понял»

Школа политического менеджмента партии «Нур Отан» провела тренинг и мастер-класс «ИНФОГРАФИКА: УВИДЕЛ и ПОНЯЛ» с участием Андрея Скворцова, руководителя компании «Mercator Group», которая специализируется на инфографике.
Я получил приглашение в фейсбуке и прошел регистрацию. И оказался одним из 200 участников мастер-класса. В общем, тема трендовая и интересная.

увидел и понял

Баннер мероприятия

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

В качестве врагов инфографики лектор назвал следующие пункты:
1. Нет смысла
2. Непонятно
3. Манипуляция
4. Нет информации
5. Аллегории

Был забавный момент. Лектор рассказывал про проект «Россия в цифрах» для канала Россия 24, он говорил, что канал хотел остановить с ними договор, но благодаря этой интересной идее, они продолжили с ними работу. В качестве хорошего примера он приводил инфографику, посвященную экспорту зерна.
http://www.vesti.ru/only_video.html?vid=219708

Я в ней увидел манипуляцию и отсутствие информации. Дело в том, что в отрицательных результатах отображены только результаты импорта, а в положительных — только экспорт. На лицо попытка манипуляции: хотят показать, что в Советском Союзе зерно только завозили (а так не бывает), а вот в Современной России внезапно дела улучшились и был только экспорт. Об ошибке я сообщил лектору. Но он не захотел признавать ошибку и завязалась полемика — в ответ он попытался оправдать, но тем самым усугубил ситуацию. Зал оживился, из задних рядов я услышал «Добивай его!». Не удержался и привел финальный довод о том, что они ради того, чтобы подписать контракт продали правительственному каналу «Россия 24» ролики, в которых экономические показатели при Путине показаны в лучшем свете. Довод оказался забавным и в зале даже кто-то поаплодировал.
Поискав в Гугле, я убедился, что тема зерна является попыткой манипуляции, а в инфографике данные приведены неверно. Об этом много информации, например, про это можно прочитать в документе Экспорт и импорт зерна.
Хочу сказать, что не обвиняю Андрей в некомпетентности, лекция в целом мне понравилась. Надеюсь, Андрей внесет поправки в свою презентацию.

Андрей Скворцов очень ответственно подошел к делу в части адаптации мастер-класса для аудитории: было много примеров казахстанской инфографики (bnews.kz, Nazarbayev Univercity etc), которую он разбирал, указывал на сильные и слабые стороны и даже приводил свои варианты решений.

Содержание мастер-класса можно посмотреть в этом видео, единственное в нем нет разборов казахстанской инфографики:

UPD: Организатор мероприятия Асет Абдуалиев в комментариях на фейсбуке сказал, что показал этот пост Андрею. Он благодарит и пообещал отправить информацию своим аналитикам. Напомню, что он является руководителем компании, а инфографику готовят его сотрудники.

[related_posts] [twitter style=»horizontal» float=»left»] [google_plusone size=»standard» annotation=»none» language=»English (UK)»]

Новый интерфейс электронного правительства

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

Несколько лет назад я сам работал в АО НИТ , на проекте электронного правительства. Я был бизнес-аналитиком, занимался описанием бизнес-процессов, для последующего добавления в список услуг egov-а. С тех пор в структуре компании многое изменилось, проектом сейчас занимается аутсорс-компания. К счастью, над проектом трудится толковая команда, которая ведет работу над развитием проекта.

Вот грядущие результаты их работы:

новый интерфейс egov.kz

При клике фото откроется в полном размере

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

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

новый интерфейс egov.kz

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

Разработчики не скрывают, что позаимствовали интерфейс у почты Gmail. Они это объясняют тем, что хотели сделать удобный, понятный и самое главное привычный для пользователя вид.

Настройки выглядят следующим образом:

Screen Shot 2013-11-04 at 5.26.35 PM

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

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

[related_posts] [twitter style=»horizontal» float=»left»] [google_plusone size=»standard» annotation=»none» language=»English (UK)»]

Купил планшет Wacom Bamboo

Недавно приобрел графический планшет.

Модель: Wacom Bamboo CTL-470
Стоимость: 15 500 тенге.
Место покупки: магазин iPoint.kz в ТРЦ Хан-Шатыр.

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

Среди них я нашел очень любопытную книгу. Её автор — доктор наук Бетти Эдвардс  и книга называется «Drawing on the Right Side of the Brain» — Рисование правым полушарием. В ней рассказана теория правополушарного рисования — метод, который заключается во временном подавлении работы левого полушария и передачу ведущей роли в рисовании правому, более пригодному для этой деятельности.

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

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

После распаковки в качестве теста нарисовал коня на джайляу. Это мой первый рисунок на планшете:

Лошадь Wacom

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

Полезное

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

 

[related_posts] [twitter style=»horizontal» float=»left»] [google_plusone size=»standard» annotation=»none» language=»English (UK)»]

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

[toggle title_open=»Close Me» title_closed=»Open Me» hide=»yes» border=»yes» style=»default» excerpt_length=»0″ read_more_text=»Read More» read_less_text=»Read Less» include_excerpt_html=»no»]Если вам знакомо правило третей и вы умеете ловко применять золотое сечение и ищете где применить свои дизайнерские умения, то пишите на почту normal.kz@gmail.com. Для вас всегда найдется работа.[/toggle]

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

Правило основано на числах Фибоначчи  — это последовательность в которой каждое последующее число равно сумме двух предыдущих чисел. Их соотношение равно 1:1,61.

прямогоугольник Фибоначчи

Геометрическое доказательство формулы для суммы квадратов первых n чисел Фибоначчи

Примеры золотого сечения

Примеры золотого сечения

 

Это правило человечеством используется более 4000 тысяч лет. Оно применяется в дизайне, музыке и искусстве. Ниже приведены примеры из архитектуры и живописи.

Пантеон. Золотое сечение

Пантеон. Золотое сечение

 

Тайная вечеря

Тайная вечеря. Золотое сечение

Тайная вечеря. Золотое сечение

 

Золотое сечение в веб-дизайне

Твиттер. Золотое сечение

Твиттер. Золотое сечение

Логотип iCloud

Логотип iCloud

 

Логотип iCloud. Золотое сечение

Логотип iCloud. Золотое сечение

 

Золотое сечение в природе

Золотое сечение в природе

Золотое сечение в природе

Немного практики.

Как нарисовать прямоугольник по правилу золотого сечения

Шаг 1. Рисуем квадрат. Длина стороны квадрата будет равна ширине будущего прямоугольника.

Шаг 1.

Шаг 1.

Шаг 2. Делим пополам квадрат вертикальной линией, получаем два прямоугольника.

step02

Шаг 2

Шаг 3. В правом прямоугольнике проводим диагональ.

step03

Шаг 3

 Шаг 4. Проводим горизонтальную линию, длина которой равна длине диагонали.

Шаг 4

Шаг 4

Шаг 5. На базе горизонтальной линии строим прямоугольник.

Шаг 5

Шаг 5

Использование золотого сечения в работе

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

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

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

Если же вы хотите использовать золотое сечение в полной мере, то достаточно выдерживать соотношение сторон в пропорциях 1:1,6. Например, если на веб-странице контентный блок занимает 640 пикселей, то боковая панель (sidebar) будет шириной в 400 пикселей.

useratiowebdesign

Использование золотого сечения для разметки вебстраницы

Инструменты для золотого сечения

  1. Калькулятор Golden Ratio Calculator

  2. goldenRATIO

  3. Golden Ratio Typography Calculator

  4. Phicalculator

  5. Atrise Golden Section

Написано на базе статьи: The Golden Ratio: a designer’s guide

Если вам знакомо правило третей и вы умеете ловко применять золотое сечение и ищете где применить свои дизайнерские умения, то пишите на почту normal.kz@gmail.com. Для вас всегда найдется работа.

[related_posts] [twitter style=»horizontal» float=»left»] [google_plusone size=»standard» annotation=»none» language=»English (UK)»]

Хрустальный кубок

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

«А можно тут поиграться со шрифтами? Они какие-то скучные, без завитушек!», «Логотип хороший, но можно он будет еще и сверкать?», «Здесь слишком много пустого места! Надо чтобы смотрелось богато! Заполните чем-нибудь!» — вот такие фразы приходится зачастую слышать от клиента. Эту склонность заказчиков я называл в шутку «синдром барокко и рококо» — в честь архитектурных стилей 18-го века, которые отличались своим стремлением к пышности и большой декоративной нагруженности. Обычно этот «синдром» сопряжен с еще одним недугом — «боязнью пустоты».

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

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

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

[box]Перед вами два кубка. Один из них из цельного золота, украшенный самыми изысканными узорами. Другой из кристально чистого стекла, тонкого и прозрачного. Налейте и выпейте. И смотря какой вы бокал выбрали, я пойму истинный ли вы ценитель вина. Если вы равнодушны к напитку, вам будет важно ощущение процесса пития из сосуда, который стоит тысячи фунтов стерлингов. Но если вы из исчезающего племени, любитель чистых урожаев винограда, то вы выберете хрусталь, потому что в нём всё рассчитано для того, чтобы раскрыть, а не скрыть то, прекрасное, что может содержать вино.

Beatrice Warde, 1932[/box]

[toggle title_open=»Close Me» title_closed=»Прочитать оригинальный текст» hide=»yes» border=»yes» style=»default» excerpt_length=»0″ read_more_text=»Read More» read_less_text=»Read Less» include_excerpt_html=»no»]‘You have two goblets before you. One is of solid gold, wrought in the most exquisite patterns. The other is of crystal-clear glass, thin as a bubble, and as transparent. Pour and drink; and according to your
choice of goblet, I shall know whether or not you are a connoisseur of wine. For if you have no feelings about wine one way or the other, you will want the sensation of drinking the stuff out of a vessel that may have cost thousands of pounds; but if you are a member of that vanishing tribe, the amateurs of fi ne vintages, you will choose the  crystal, because everything about it is calculated to reveal rather than to hide the beautiful thing which it was meant to contain.’
Beatrice Warde, 1932[/toggle]

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

[related_posts] [twitter style=»horizontal» float=»left»] [fbshare type=»button_count»] [google_plusone size=»standard» annotation=»none» language=»English (UK)»]

Антропоморфизм в дизайне

Вики: Антропоморфизм (греч. ανθρωπος человек, μορφή вид) — наделение человеческими качествами животных, предметов, явлений, мифологических созданий.

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

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

antropo

Слева — удачный пример антропоморфизма, справа для сравнения не совсем удачная альтернатива.

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

[related_posts] [twitter style=»horizontal» float=»left»] [fbshare type=»button_count»] [google_plusone size=»standard» annotation=»none» language=»English (UK)»]