Мобильным геймерам 2000-х посвящается

Практическая статья по созданию UI-китов. Китом в 2018 уже никого не удивишь, но на практике у большинства большие косяки с названиями, структурой и масштабированием. В этой статье Ольга Шаврина по шагам расписала как сделать грамотно. https://olgashavrina.com/design-system

#Школа_Бюро
Чему учит школа

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

Да, дизайнерам придётся учиться разговаривать, составлять тексты, верстать в ХТМЛ, разбираться в задаче и выстраивать истории на странице.

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

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

О, тут как раз новый набор в Школу Бюро. У вас есть шанс испытать самому всё то, что я описывал.
https://bureau.ru/school/27aug2018/

Гугл, я понимаю, что это стиль и всё такое, но такой размер головы у человечка меня напрягает)

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

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

​​Например, посмотрите на силуэты этих героев: они разные и узнаваемы, хотя это всё люди. И если мы хотим, чтобы клиенты наших продуктов ясно понимали где они и что могут сделать, им тоже нужен разный и узнаваемый дизайн:
— формы с разными силуэтами;
— страницы, отличающиеся друг от друга не только текстом, но и графикой;
— иконки разной формы (поэтому плохо заключать иконки в приложении в одну форму типа круга или прямоугольника).

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

​​Кстати, формы, выровняные по ширине не всегда плохо. Например, в мелких форматах они работают хорошо. Например, экран входа.

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

https://designpub.ru/%D1%81%D1%82%D1%80%D0%B0%D1%85-%D0%BF%D0%B5%D1%80%D0%B5%D0%B3%D0%BE%D0%B2%D0%BE%D1%80%D0%BE%D0%B2-%D1%87%D0%B0%D1%81%D1%82%D1%8C-1-9fdfacb2f9ab

​​#Школа_Бюро
Предметы. Первая ступень. Часть 1

Теперь про самое интересное — знания и пользу. Не все предметы в школе преподаются одинаково крепко: некоторые появились только недавно и ещё не успели пройти обкадку студентами. Предметы состоят из лекций и советов. Все советы гуглятся по названиям тем из учебной программы, у лекций же закрытый доступ на ютубе. Я учился в Школе дизайнеров, но предметы у нас почти все те же, что и в школах редакторов и руководителей. Начну по порядку, как на сайте Бюро. https://bureau.ru/school/27aug2018/

Типографика и вёрстка
Хорошая база по вёрстке макета. Начинает с самих азов, теории близости, и заканчивает главной страницей сайта. Именно тут я понял, что спустя 3 года в дизайне совершенно не умел верстать. Оно и понятно: в маленьких мобильных приложениях вёрстка проще, чем на сайте во весь монитор. Со словом «вёрстка» маленькая путаница. В этом предмете она означает вазимное расположение объектов на странице, а в предмете «вёрстка и прототипирование» — ХТМЛ вёрстку дизайна. Для себя я эти определения разделяю на вёрстку и веб-разработку.

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

Интерфейс и информация
Отличная база, но для новичков. Ничего нового о интерфейсе я не узнал, но будь у меня такая база на начале, яб сейчас был куда круче. Спасибо Бирману за то, что при всей любви к графомании, не льет воду зря. Самое полезное было про таблицы и графики: узнал как делать их легче и читабельнее, какие форматы представления информации к какому типу информации подходят и как думать головой, когда эту информацию оформляешь. Ещё была классная таблица про то как правильно называть элементы интерфейса. Если вы не дизайнер, но работаете с ними, а в школу идти долго/дорого, похожую базу раздаёт Антон Жиянов https://dangry.ru/jan/

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

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

В следующем посте расскажу вам про самые бесполезные предметы в школе.

Чтобы вы примерно понимали чему учат на курсах:
Вёрстка
https://bureau.ru/bb/soviet/20141020/
https://bureau.ru/bb/soviet/20141027/
https://bureau.ru/bb/soviet/20141013/

Интерфейс
https://bureau.ru/bb/soviet/20151215/
https://bureau.ru/bb/soviet/20170207/
https://bureau.ru/bb/soviet/20140331/

#Школа_Бюро
Предметы. Первая ступень. Часть 2

Данные и визуализация
Это была жопа. Я прокачал лишь свою насмотренность красивостями. Предмет новый, ещё не обкатан и сдавать его было тяжело. В идеале, он должен был нас научить работать с большими массивами данных и наглядно показывать их на формате, но нет. Читала лекции Таня Бибикова. Она молодец и делает крутые работы, на которых информация представлена самым наглядным образом, но словами у неё доносить её не получается. Мыльные определения, неточности, размазанная теория и противоречивые фразы. Спустя час лекции я так и не понял что мне сейчас рассказали. Причем в тестах спрашивали точное определение, которое в лекции было очень расплывчато! У нас этот предмет даже стал мемом на какое-то время. В конце ступени мы осваивали программу Tableu, которая умела быстро переводить данные в графику и это было круто. А потом нам дали задание прогать на JS и писать SVG-код! Причём подавали это как само собой разумеющееся, как будто мы каждый день этим занимались. Всё, что я мог делать — это копипастить, в надежде, что с работает. Не исключаю, что предмет крутой и очень интересный, а я не разобрался. В итоге о том, как представлять данные и их визуализировать я узнал от Бирмана в «Интерфейсе», спасибо ему.

Визуализация данных — не инфографика. Инфографика — это данные статичной картинкой, где картинка помогает сделать неожиданные выводы, показывает взаимосвязи. Визуализация данных — это рассказ истории. Хороший пример визуализации данных — результаты московского марафона. http://moscowmarathon2017.datalaboratory.ru/results?runners=1,18

Или «жертвы второй мировой» https://www.youtube.com/watch?v=PJ5PozllwAk

Вёрстка и прототипирование
Обещает научить ХТМЛ и прототипированию, но не учит. Тестов в предмете нет, прототип мы не собирали, а все практические задания разрешалось делать в Рэдимаге. Так я ничего и не узнал о ХТМЛ за первую ступень, сам виноват. Зато я полюбил Рэдимаг =)

Предмет состоит из ссылок на советы, уровень которых сильно скачет: вот я научился вставлять картинки на сайт, а вот меня уже учат верстать адаптив. Естественно я забивал. Если планируете поступать на вторую ступень — не забивайте, делайте все задания кодом, только учитесь этому ещё в ХТМЛ-академии, там лучше объясняют. https://htmlacademy.ru/

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

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

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

Зацените как круто статья показывает историю успеха одного теннисиста: я ещё не читал статью и ничерта не понимаю в теннисе, а уже вижу весь пофессиональный путь игрока с его взлётами и победами. Отдельный плюс за путь по рангам вдоль всей статьи, сразу видно какие события в его жизни как отразились на игре. https://www.srf.ch/static/srf-data/data/2018/federer/en.html#/en

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

Материал дизайн обновился. Теперь у них:
— странный сайт, в котором я потерялся https://material.io/design/
— навбар внизу, если хочется https://material.io/design/components/app-bars-bottom.html#usage
— летучая кнопка может быть любой формы, с текстом, без текста и под неё можно вырезать дырки https://material.io/design/components/app-bars-bottom.html#anatomy
— больше Швейцарии, даже показали как можно фантазировать на примере выдуманных приложений https://material.io/design/material-studies/basil.html
— дизайнеры играют с углами форм и это нормально https://material.io/design/shape/about-shape.html#shaping-material
— плагин для Скетча, что делает всю визуальную работу за дизайнера https://material.io/tools/theme-editor/
— у иконок появилось несколько видов https://material.io/tools/icons/?style=baseline
— и гайдлайны для дофига платформ https://material.io/collections/additional-google-specs/#
— собственный просмотрщик дизайна https://gallery.io/
— описан баннер, что по сути диалог не в модальном окне https://material.io/design/components/banners.html#usage
— описан слайдер, но тут и так всё очевидно https://material.io/design/components/sliders.html#discrete-slider

и ещё куча мелочей в анимации, работе элементов и т.д.

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

Последние 2 года я основательно увлёкся историей, особенно последними двумя веками. Тогда появились все блага, без которых мы не представляем жизнь: электричество, товары потребления, рабочая медицина (до этого она лечила с переменным успехом) и прочее. А самое интересное то, как менялось общество, их отношение к противоположному полу, собственности, здоровью, свободе. На эту тему хорошо пишет Влад Головач в «Культуре дизайна». В ней он смотрит на общество, историю и дизайн и как они связаны друг с другом. Почему появление заводов и сокращение рабочего дня до 8 часов приводит в пролетарской революции, как получилось, что короли перестали носить шкуры и бархат и облачились в сюртуки и причём тут торговые отношения между странами. После книги начинаешь понимать почему вещи были именно такими в своё время, почему в 19 веке были бархатные стулья с резными ножками, а в начале 20 вдруг стал моден стиль Икеа.

У Влада есть платная версия последнего издания и бесплатная первого(я читал её) http://designculture.exmachina.ru/
Параллельно с ним советую почитать ещё книгу «Объекты желания», что раскрывают эту тему более полно, но с большим уклоном в вещи https://www.ozon.ru/context/detail/id/22486731/

Обзор на первую книгу от Павла Моисеенко http://pavelmoiseenko.ru/blog/kultura-dizajna/

Ниче се как Хром научился

#Школа_Бюро
Предметы. Первая ступень. Часть 3

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

Илья учит переговорам по системе Кемпа, которая описана в книге «Сначала скажите "Нет"». Книги, написанна в традиционном американском стиле, с разжевываниями и повторениями одного и того же, но Илья рассказывает чеко, без воды и адаптированно под наши реалии, постоянно подкрепляет примерами из жизни. Слушается легко и весело.

Самое главное, чему учит предмет — заботе. Это было для меня откровением. Я считал, что быть мастером переговоров — это добиваться своей цели, использую хитрые приёмы и манипуляции. Для меня переговорщики были эдакими хитрожопыми скользкими ужами из Евросети, что навешают услуг на три зарплаты, а я ещё и рад останусь. А тут хоп: ЧЕСТНОСТЬ, ЗАБОТА, ВНИМАНИЕ. Это четко вписалось в мою жизненную концепцию. И после курса начинаешь немного иначе смотреть на конфликты, провалы и отношение к людям. Здесь сформулирована главная мысль, которая сквозит через все предметы в школе как раз «заботьтесь и уважайте людей, вас окружающих».

В конце было крутое задание: студенты делились на пары и разрешали сложную ситуацию. Переговоры записывались на видео и выкладывались в интернет. Один был директором фирмы, которая отдала сервера на починку, другой — фирмы, что их рочинила. Ремонт стоил 400 000 рублей, а новые сервера — 450 000. Я долго готовился, придумывал план и был уверен в себе, но как только начались переговоры, так сразу всё пошло не так. В итоге я просрал все полимеры.
Зацените мой позор https://www.youtube.com/watch?v=WLuu8L4Unmo
Зацените как может быть жестко https://www.youtube.com/watch?v=yYu0IHNiaNs

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

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

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

Недавно залпом заценил все три фильма Парфёнова про русское еврейство.
Фильмы о том, как евреи орусевали, отказывались от своего еврейства и становились русскими. После просмотра удивился как сильно они повлияли на историю нашей страны и ещё больше задался вопросом: за что их так не любят? У фильма великолепная графика и повествование, отдельные истории людей рассказаны в контексте исторического среза так, что прочувствуешь эпоху.

Фильм первый, до революции https://youtu.be/AaNjPAFD-UI
Фильм второй, 1918 — 1948 https://youtu.be/HcV8-I_zgC8
Фильм третий, после 1948 https://youtu.be/zQbxN_c3tMY