Портфолио для школы стажёров Бюро Горбунова

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

Сначала расскажу о том, что делаю сейчас, а потом пройдемся по тому, что было раньше.

Фисташкочел

Однажды я придумал очередного персонажа. Не помню как именно, но мне в голову пришла мысль, что если нарисовать на раскрытой фисташке глаза, раскрасить изнутри рот красным и создать видимость волос на макушке, то получится вполне себе голова, для которой потом только знай себе рисуй тушки. Тут же попробовал. Всех можно посмотреть в Инстаграмме по тегу #фисташкочел ← это ссылка 😉

Подпись к картинке «Фисташкочел удивлен». Нарисовал за минуту, сфоткал на iPhone, выложил везде. Удивился отклику.

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

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

Леттеринг

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

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

mgts

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

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

DirectCrm

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

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

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

С такой страницей и живем теперь.

Наклейки на ключ-карты

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

В первую очередь я взял ключи из DOOM II. Немножко подглядел, где смог, и сделал макет.
Access Level — название команды внутри конторы.

Ну и конечно же я не мог обойти стороной удостоверение ФБР, чтоб было, как у Малдера или Скалли.

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

 

Расходники для конторы

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

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

Логотип и подпись про «Три Ивана» делал какой-то дизайнер за деньги. Меня за это не пинать.

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

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

 

Планы эвакуации

Люблю работать руками. Иногда просто в кайф посидеть и порисовать под музыку. А тут за это еще и деньги дают. Пожарных планов нарисовал для родной деревни и пары соседних деревень штук тридцать. Предварительно пришлось изучить ГОСТы, сделать кучу заготовок по знакам, которые тоже по ГОСТам, объяснить заказчикам, где и как можно печатать планы, чем их потом подписывать и как размещать. В общем это было прямо по-взрослому. Меня еще и пожарник потом советовал всем, потому что я делал хорошо.

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

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

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

 

CMS-WIF

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

Административная панель была фиксирована по ширине, иконки взял из какой-то nix-OS.

Кусок «Системная информация» меня жутко бесил. Но он был удобен для дебага именно в этом месте. Версия-то минорная совсем — ошибки валились постоянно.

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

И да, шрифт Century Gothic я любил сразу после Courrier.

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

 

Project 707

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

Стартовая страница содержала только форму для логина. Зарегистрироваться было нельзя — мы выдавали на сайт приглашения =)

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

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

 

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

Мнение Цеце

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

Сперва мы выкупили домен mnenie.cc и повесили там заглушку.

Затем я нарисовал муху на бумажке и мы скинули ее первому флешеру.

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

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

В полную ширину это выглядело прям неплохо и иногда муха доставляла своими ответами много веселья.

По сусекам поскреб и нашел невероятное — ту самую флешку.

Get Adobe Flash player

Сайт для скейтеров

Еще Артем — скейтер и его друзья-скейтеры попросили нас сделать для них сайт. Делали мы это бесплатно, чтобы отработать навыки, да и вообще просто было интересно. Опыта работы в фотошопе у меня тогда, как и сейчас, особо не было, поэтому приходилось выкручиваться чтением devianArt и импровизировать.

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

 

Но «яждизайнер», подумал я, и сделал в первой итерации все совсем по своему.
Да еще и с дуру разрешение по ширине выбрал 800 пикселей:

В итоге меня попросили переделать всё.

 

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

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

 

Сайты на заказ

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

«Алгоритм-Т» — контора моего одногруппника, тоже бесплатно сделали, мы даже выкатили все это на бой и оно какое-то время там жило.
Сайт оказался «слишком красным» и в то время на него не было времени у владельца, поэтому после запуска сайт стоял пустой.

Этот макет был сделан быстро, потому что «заказчик ждет хоть что-нибудь через 2-3 часа». Все, что я знал о заказчике — магазин дверей.

 

 Лабы

После школы я попал в Институт математики и компьютерных наук ТюмГУ. Там мне пришлось много клепать приложений на формочках. У нормального студента все элементы формы назывались button1, textbox2, textarea3. Я любил порядок и всегда называл элементы так, как надо по задаче — btn_CalculateSum, txt_Value, area_Comment и т.д. И да, я любил верблюдицу.

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

Курсовая на третьем курсе. Клиент для работы с БД MS SQL. Темой была база туристов. Это окошко про конкретного туриста. Моя характерная черта тех лет — моноширинный шрифт всюду. Он мне очень нравился, т.к. я всегда хотел печатную машинку.

Стандартная лабораторка от меня — все переменные сгруппированы, все ровненько, везде порядок и чистота. Минус — нет описания работы, открыл вот ее спустя 8 лет и не понимаю, что происходит =)

 

Заключение

Подпись к строке «Портфолио» на сайте Школы стажёров Бюро Горбунова гласит: «Нет портфолио? Придумайте. Нет сайта? Соберите на Бехансе.». Сайт-то у меня есть, а вот с «Нет портфолио? Придумайте.» у меня по началу случился ступор. В итоге посидел, повспоминал, написал, а теперь смотрю и получается, что в целом неплохо для программиста, который еще три года назад и не думал заниматься ни программированием, ни развитием коммерческого продукта. Чудеса.

 

3 Replies to “Портфолио для школы стажёров Бюро Горбунова”

  1. Vitaliy

    Класс! Целая биография получилась. Портфолио — раскрывает человека.

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *