Frame 1171274527.png

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

<h3>
  Пожалуй, вместо «Человека-паука» можно было&nbsp;бы выбрать другой супергеройский фильм, но&nbsp;разберем на&nbsp;примере этого.
</h3>
<p><strong>Любое кино подобного жанра строится по&nbsp;следующей структуре:</strong></p>
<ul>
<li>Главный герой по&nbsp;факту неудачник и&nbsp;не&nbsp;знает, кем он&nbsp;хочет быть.</li>
<li>Его жизнь катится на&nbsp;дно, и&nbsp;он&nbsp;понимает, что нужно что-то с&nbsp;этим делать.</li>
<li>Он&nbsp;идет к&nbsp;своему ментальному наставнику и&nbsp;получает важный урок (большая сила&nbsp;— это большая ответственность).</li>
<li>Происходит событие, которое дает ему сверхспособности. Герой кайфует от&nbsp;обретенной силы.</li>
<li> Происходит критическая ситуация (смерть или травма родственника, например), персонаж сначала сдается, но&nbsp;после понимает, что пора брать себя в&nbsp;руки.</li>
<li>Герой растет и&nbsp;становится тем, кем хотел стать, благодаря вере в&nbsp;себя и&nbsp;поддержке близких. </li>
</ul>
<p> Чем это не&nbsp;путь в&nbsp;айти до&nbsp;первой работы? Впрочем, если вы&nbsp;не&nbsp;видите сходства, давайте разберемся подробнее.</p>
<img src="/uploads/Bez_nazvaniya_6effda991f_a5feb5351b.png" alt="Bez_nazvaniya_6effda991f.png" >


<h3>Шаг номер один: жизнь «до»</h3>
<p>Итак, вы&nbsp;обычный человек, учитесь в&nbsp;школе или в&nbsp;университете, в&nbsp;свободное время залипаете в&nbsp;комп. Ваше окружение постоянно долбит вас вопросами о&nbsp;том, кем вы&nbsp;хотите стать в&nbsp;будущем и&nbsp;чего вам хочется от&nbsp;жизни. Вы&nbsp;же в&nbsp;силу возраста не&nbsp;знаете, чего хотите, но&nbsp;подозреваете, что это будет связанно с&nbsp;компьютером.
Потому что компьютер интересный: там интернет-браузеры, компьютерные игры,
видосы и&nbsp;прочие приколы&nbsp;— вам хочется работать в&nbsp;этом пространстве, но&nbsp;вы&nbsp;не&nbsp;знаете кем.</p>
<p>Время идет, но&nbsp;вы&nbsp;никак не&nbsp;можете определиться. Пробуете себя в&nbsp;монтаже видео, создании музыки, написании статей и&nbsp;прочих интересных вещах, но&nbsp;все это не&nbsp;то. Впрочем, осваивая новые навыки, вы&nbsp;учитесь учиться. Денег на&nbsp;курсы нет, поэтому всю информацию приходится добывать из&nbsp;гугла, видосов на&nbsp;ютубеи&nbsp;других открытых источников, до&nbsp;чего-то вы&nbsp;доходите сами. С&nbsp;каждым днем уверенность в&nbsp;том, что вам стоит работать с&nbsp;компьютером, растет.</p>
<p>Или представим другую картину: вы&nbsp;уже взрослый человек, но&nbsp;жизнь вас не&nbsp;устраивает. Работа вам не&nbsp;нравится, платят мало, не&nbsp;ценят ваш профессионализм, а&nbsp;коллеги по&nbsp;работе только и&nbsp;делают что говорят о&nbsp;детях и&nbsp;бытовухе. Все это начинает надоедать. Вам хочется жить по-другому и&nbsp;вы&nbsp;уверены, что способны на&nbsp;большее </p>
<img src="/uploads/Bez_nazvaniya_1_79aeb3fdd0_e1b49e4458.png"
alt="Bez_nazvaniya_1_79aeb3fdd0.png" >


<h3>Шаг номер два: кризис</h3>
<p>Время подступает к&nbsp;11&nbsp;классу или к&nbsp;первому курсу института, и&nbsp;накопленные навыки вас тяготят: от&nbsp;обилия возможностей вы&nbsp;просто не&nbsp;понимаете, чего хотите. Перед вами стоит выбор:</p>
<ul>
<li>Видеомейкер</li>
<li>Журналист</li>
<li>Сисадмин</li>
<li>Эникейщик</li>
<li>Дизайнер</li>
</ul>
<p>Возможно, вы&nbsp;делаете ошибку и&nbsp;поступаете на&nbsp;одну из&nbsp;подобных профессий в&nbsp;надежде, что универ поможет вам раскрыться и стать профессионалом.</p>
<p>Или вы&nbsp;плюете на&nbsp;это и&nbsp;поступаете на&nbsp;программиста, потому что наслушались, что они получают 300к в&nbsp;наносекунду и&nbsp;вообще крутые ребята, но&nbsp;все это абсолютно не&nbsp;знакомо для вас&nbsp;— возможно, математика вообще была вашим заклятым врагом.</p>
<p> В&nbsp;итоге в&nbsp;универе вас учат каким-то супер странным базовым штукам, непонятно зачем вам нужным: какие-то структуры данных, алгоритмы, двоичные системы, куча теории о&nbsp;том, что такое память и&nbsp;как она устроена, как компьютер считает данные,&nbsp;— и&nbsp;говорят, что все это важно. Но&nbsp;на&nbsp;практике все эти знания совершенно бесполезны. Как, собственно, создать свой фейсбук, написать свой куки кликер или разработать новый тиндер? Об&nbsp;этом в&nbsp;универе не&nbsp;рассказывают.</p>
<p>Во&nbsp;взрослом&nbsp;же возрасте непонятно, как можно променять нагретое место на&nbsp;туманные перспективы. Вам тревожно, что не&nbsp;получится, потому что уже и&nbsp;информация усваивается сложнее, и&nbsp;рисков никаких не&nbsp;хочется, и&nbsp;трудно определиться, в&nbsp;кого именно стоит переучиваться,&nbsp;— погружаться в&nbsp;новую область с&nbsp;нуля действительно страшно. К&nbsp;тому&nbsp;же, это сложно совмещать с&nbsp;работой: учеба требует времени и&nbsp;усилий, а&nbsp;при работе 5/2 фулл-тайм едва&nbsp;ли у&nbsp;вас будет пара часов в&nbsp;день на&nbsp;занятия (а&nbsp;про семью вообще можете забыть). Итак, время идет, вы&nbsp;застряли в&nbsp;тревоге, корите себя за&nbsp;нерешительность, но&nbsp;слишком боитесь, чтобы начать что-то делать. </p>
<img src="/uploads/Bez_nazvaniya_2_7f32aac4fc_69f1651210.png"
alt="Bez_nazvaniya_2_7f32aac4fc.png" >


<h3>Шаг номер три: наставник</h3>
<p>В&nbsp;универе вы&nbsp;встречаете интересного парня, который действительно работает программистом и&nbsp;получает кучу денег. Он&nbsp;делится с&nbsp;вами опытом и&nbsp;рассказывает, как он&nbsp;дошел до&nbsp;таких высот. Возможно, это душнила, заливающий про&nbsp;то, как он&nbsp;с&nbsp;детства учил паскаль. Или это 200IQ гигачад, который просто прошел курсики на&nbsp;ютубе и&nbsp;теперь бахает на&nbsp;любом языке и&nbsp;кайфует.</p>
<p>А&nbsp;может, в&nbsp;попытках нагуглить очередное домашнее задание вы&nbsp;натыкаетесь на&nbsp;статью о&nbsp;том, как вкатиться в&nbsp;программирование, увлекаетесь и&nbsp;решаете, что хотите попробовать. Друг-программист делится с&nbsp;вами советами о&nbsp;том, на&nbsp;что обратить внимание и&nbsp;как пройти собеседование.</p>
<p>Если вы&nbsp;взрослый, то&nbsp;вы&nbsp;наверняка встречаете старого друга со&nbsp;школы, который разбирался в&nbsp;компах, а&nbsp;теперь он&nbsp;гребет 300к программистом. Вы&nbsp;вдохновляетесь его примером, тут вам как раз на&nbsp;глаза попадается реклама какого-нибудь скиллбокса, и&nbsp;вы&nbsp;решаетесь: пора!</p>
<img src="/uploads/Bez_nazvaniya_3_0717eb5919_3b99a15965.png"
alt="Bez_nazvaniya_3_0717eb5919.png" >


<h3>Шаг номер четыре: обретение силы</h3>
<p>Вы&nbsp;начинаете погружаться в&nbsp;тему, и&nbsp;чем больше информации вы&nbsp;поглащаете, тем больше уверяетесь в&nbsp;том, что вы&nbsp;крутой: все получается, задачи зачастую не&nbsp;требуют глубоких знаний, новые навыки даются легко. Вы&nbsp;просто занимаетесь интересным делом вечером после учебы или работы. Именно этот момент можно назвать обретением суперсилы&nbsp;— для вас уже не&nbsp;существует преград, вы&nbsp;понимаете, что все можно нагуглить, любую задачу решить и&nbsp;получить от&nbsp;этого удовольствие. К&nbsp;вам обращаются за&nbsp;советом, просят починить чайник, как в&nbsp;тех мемах, вы&nbsp;проникаетесь сообществом и&nbsp;понимаете приколы айтишников. Новая профессия кажется вам манной небесной.</p>
<p><img src="/uploads/Bez_nazvaniya_4_d1a86fa449_d10cffd6ef.png"
alt="Bez_nazvaniya_4_d1a86fa449.png"> </p>
<p>Окрыленные успехом, вы&nbsp;твердо решили устраиваться на&nbsp;работу. Однако для этого нужно систематизировать знания, посмотреть, что спрашивают на&nbsp;собеседованиях, что требуется для выполнения тестового задания,&nbsp;—все это довольно нудно. К&nbsp;тому&nbsp;же, что вы&nbsp;вдруг понимаете, что используете одни и&nbsp;те&nbsp;же приемы от&nbsp;проекта к&nbsp;проекту, нет
никакого развития. Впрочем, это кажется незначительным: что должно меняться, если все строки и&nbsp;методы похожи? Один раз придумал решение&nbsp;— так пользуйся, зачем заново что-то изобретать?</p>
<p>Отбросив все зародившиеся сомнения, вы&nbsp;идете на&nbsp;свое первое собеседование, думая, что такое талантище оторвут с&nbsp;руками и&nbsp;ногами.</p>
<img src="/uploads/Bez_nazvaniya_5_abf89e1c7e_6328e77648.png"
alt="Bez_nazvaniya_5_abf89e1c7e.png">
 
 
<h3>Шаг номер пять: провал</h3>
<p>Ваше первое собеседование&nbsp;— это полный провал.</p>
<p>Выясняется, что ваши знания бесполезны, вам нужно было учиться с&nbsp;опорой на&nbsp;вакансии, а&nbsp;не&nbsp;на&nbsp;статьи в&nbsp;интернете. Навыков, которые действительно нужны, у&nbsp;вас не&nbsp;оказывается (или они совсем в&nbsp;зачаточном состоянии). Вы&nbsp;получаете люлей на&nbsp;нескольких собеседованиях, вас никто никуда не&nbsp;берет. Побитый и&nbsp;отчаянный, вы&nbsp;уползаете обратно в&nbsp;свою нору, не&nbsp;понимая, как жить дальше.</p>
<p>Начинается этап размышлений. Куда&nbsp;же дальше? Ни&nbsp;ютуб, ни&nbsp;гугл, ни&nbsp;курсы на&nbsp;гикбрейнз больше не&nbsp;помогут. Положение кажется безвыходным.</p>
<p>И&nbsp;тут вы&nbsp;вспоминаете про того самого чувака, который когда-то вдохновил вас стать программистом. Или про друга, который уже 3&nbsp;года работает в&nbsp;айти. Вы&nbsp;приходите к&nbsp;нему, он&nbsp;ласково гладит вас по&nbsp;голове и&nbsp;говорит, что не&nbsp;время сдаваться&nbsp;— вот тебе план действий. Вы&nbsp;подтягиваете нужные навыки, просите подробный фидбэк после собеседований, ноете близким, как вам сложно, а&nbsp;они вас поддерживают и&nbsp;радуются каждой удаче вместе с&nbsp;вами. Постепенно вы&nbsp;снова обретаете уверенность в&nbsp;том, что способны добиться желаемого.</p>
<img src="/uploads/Bez_nazvaniya_4734f2bbde_3406a77cfc.png" alt="Bez_nazvaniya_4734f2bbde.png">


<h3>Шаг номер шесть: успех</h3>
<p>И&nbsp;вот ваш старый код кажется полным говном, которое надо переписать, проекты, которые вы&nbsp;придумываете, становятся более осмысленными. Вы&nbsp;делаете себе блестящее портфолио, проходите тридцатое собеседование, и&nbsp;наконец&nbsp;— вот оно, тридцать первое, успешное! Несите шампанское, наш герой наконец добился желанной работы. Ну&nbsp;чем не&nbsp;хэппи энд супергеройского фильма?</p>
<img src="/uploads/Bez_nazvaniya_2_0237efb417_43d7d5cfba.png"
alt="Bez_nazvaniya_2_0237efb417.png">

<p><strong>Небольшие выводы</strong></p>
<p>Пытаетесь понять, тяните&nbsp;ли вы&nbsp;на&nbsp;человека-паука? Мой ответ&nbsp;— да, вы&nbsp;человек-паук, парень на&nbsp;картинке. Потому что именно вы&nbsp;сто раз упали и&nbsp;сто раз поднялись. Сто раз встречали сложную задачу и&nbsp;сто раз ее&nbsp;решали. Вы&nbsp;научились не&nbsp;сдаваться и&nbsp;сражаться до&nbsp;конца. Потому что у&nbsp;вас нет другого выбора: теперь это ваша сила, а&nbsp;как мы&nbsp;знаем, с&nbsp;великой силой приходит и&nbsp;великая ответственность.</p>
<p>Кто поднимет прод за&nbsp;джуном, который его уронил? Кто настроит серваки так, чтобы заказчик мог видеть результаты работы? В&nbsp;конце концов, кто перекрасит вот ту&nbsp;кнопку на&nbsp;главной странице в&nbsp;красный цвет, кроме вас? Правильно, никто. Именно вы&nbsp;взяли на&nbsp;себя эту ответственность перед работодателем, заказчиком и&nbsp;перед самим собой. Поэтому вы&nbsp;уже не&nbsp;можете не&nbsp;справиться с&nbsp;очередной трудностью, поэтому каждый раз проект должен быть все сложнее, реализация проще, алгоритм короче, а&nbsp;занимаемая память меньше.</p>
<p>Каждый из&nbsp;нас&nbsp;— это человек-паук, который несмотря на&nbsp;проблемы справляется с&nbsp;ними и&nbsp;учится жить с&nbsp;этим. Вы&nbsp;сто раз задолбались на&nbsp;сто лет вперед, но&nbsp;и&nbsp;не&nbsp;думаете бросать, потому что ощущение полета на&nbsp;паутине (решения задачи)&nbsp;— это&nbsp;то, ради чего вы&nbsp;стали разработчиком.</p>

«Человек-паук: Через Вселенные» как путь в ИТ

Шушкевич Виталий

thumbnail_photo_2023_08_29_10_58_04_a9008b6614.jpg

photo_2023_08_29_10_58_04_a9008b6614.jpg

large_background profile (3).png

medium_background profile (3).png

small_background profile (3).png

thumbnail_background profile (3).png

background profile (3).png

Серов Владимир

Manual Testing

Automated Testing

small_photo_2017_06_03_19_38_35_7408e2b7f7.jpg

thumbnail_photo_2017_06_03_19_38_35_7408e2b7f7.jpg

photo_2017_06_03_19_38_35_7408e2b7f7.jpg

Пурясова Александра

Nebula.png

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

<img src="/uploads/00_Title_Nebula_f5a9c89f38.jpg?updated_at=2023-03-31T14:53:20.450Z" alt="enter image description here">
<div>
<h3>Так что же это такое</h3>
<p>Nebula — это агрегатор криптобирж для поиска лучшей цены криптовалют. Самый доступный способ найти наиболее адекватный прайс среди сотен сайтов, продающих крипту, в которых легко запутаться. </p>
</div>
<img src="/uploads/01_Nebula_28fe0fdea0.jpg?updated_at=2023-03-31T14:53:18.775Z" alt="enter image description here">
<img src="/uploads/02_Nebula_a0bc418b08.jpg?updated_at=2023-03-31T14:53:21.287Z" alt="enter image description here">
<div>
<h3>3D-схема работы агрегатора</h3>
<div>
<p>Клиент хотел создать крипто-сервис, который был&nbsp;бы не&nbsp;только удобным и&nbsp;понятным, но&nbsp;и&nbsp;визуально технологичным, отвечающим запросам аудитории.</p> 
<p>Начинали, конечно, с брендинга. Это не та история, где нужно изобретать велосипед и нырять в пучины креатива (тз есть тз), но сделать красиво и футуристично очень важно. За основу взяли темную тему с тремя основными цветами (сиреневым, розовым и темно-синим) как прямую ассоциацию с трейдингом и криптой. </p>
</div>
</div>

<img src="/uploads/03_Nebula_908a585fb4.jpg?updated_at=2023-03-31T14:53:21.590Z" alt="enter image description here">

<div>
<h3>Интерфейс для всех</h3>
<div>
<p>Далее мы продумали логику, разработали дизайн личного кабинета и админки агрегатора. Для этого разработали  полноценный UI-Kit, куда без него. Для наглядности процессов &nbsp;создали понятные схемы, которые наглядно демонстрируют принцип работы Nebula, чтобы даже новички в криптовалютах понимали прозрачность процессов и пользу агрегатора для конкретно их целей. Поэтому в дизайне &nbsp;решили сделать упор на&nbsp;3D-анимациях и&nbsp;интерактивном отображении данных.</p>
</div>
</div>

<img src="/uploads/05_Nebula_3be0f6f304.jpg?updated_at=2023-03-31T14:53:18.519Z" alt="enter image description here">

<div>
<h3>Разработка</h3>
<div>
<p>На этом проекте мы были ответственны за frontend, что очень ускорило запуск, поскольку у внутренних команд дизайнеров и разработчиков хорошо налажен диалог. В основе стэка React, TypeScript и Redux как наиболее очевидные в данном случае, а также Openware и Web3. Многие графики на Recharts. Тестирование на Jest, Enzyme и Cypress. </p>
</div>
</div>
<img src="/uploads/06_Nebula_f5963947f0.jpg?updated_at=2023-03-31T14:53:15.937Z" alt="enter image description here">
<img src="/uploads/07_Nebula_32544c7c48.jpg?updated_at=2023-03-31T14:53:12.642Z" alt="enter image description here">
</div>
</div>
<div>
<h3>Понятный агрегатор</h3>
<div>
<p>При подаче такой непростой информации легко запутаться, однако мы сразу сконцентрировались на главном — UI. Именно на прекрасно продуманном интерфейсе и был построен этот проект. Хотя и удачный брендинг играет не последнюю роль. Футуристичный визуал, основанный на 3D, дополняет главную составляющую и выгодно отличает агрегатор от других. </p>


Nebula ECN

Макаров Сергей

Закиров Арсений

Мазаев Денис

Дудин Дмитрий

Лисунова Карина

game case mocap.mp4

Уникальный проект, объединивший юных дизайнеров, геймдевов и программистов, где проделана внушительная работа: фирменный стиль, дизайн веб-портала и админки, 3D-иллюстрации, веб-разработка. 

 <img src="/uploads/Tagline_01_Main_9d23fe5f58.jpg?updated_at=2023-03-30T07:29:22.748Z" alt="enter image description here">
<div>
<h3>Платформа</h3>
<div>
<p>&laquo;Начни игру&raquo; позволяет молодым разработчикам заявить о&nbsp;себе, выйти на&nbsp;новый уровень профессионального мастерства, создать уникальные игровые проекты и&nbsp;найти партнеров для поддержки своей инициативы. Обучение построено на&nbsp;геймификации, что отражено как в&nbsp;дизайне в&nbsp;целом, так и&nbsp;в&nbsp;особенностях разработки.</p>
<p>Дизайн&nbsp;&mdash; сочные цвета, ломаные формы, пересекающиеся элементы. Обилие 3D-иллюстраций и&nbsp;объема. Визуал буквально дышит творчеством и&nbsp;амбициями.</p>
</div>
</div>

  <img src="/uploads/Tagline_04_20de48777e.jpg?updated_at=2023-03-30T07:29:25.318Z" alt="enter image description here">
  <img src="/uploads/Tagline_06_adab1f4df3.jpg?updated_at=2023-03-30T07:29:21.195Z" alt="enter image description here">
  <img src="/uploads/Tagline_07_5c157a80b8.jpg?updated_at=2023-03-30T07:29:23.252Z" alt="enter image description here">
  
 <div>
<h3>Смело и ярко</h3>
<div>
<p>Кто ЦА проекта? Школьники, молодежь. Их нужно захватить ярким визуалом, необычными формами, смелым сочетанием цветов. Звучит очевидно, но на деле не самая простая задачка. Удивить визуалом молодых людей сложно. И начали мы с деркзой цветовой гаммы, которая даже внутри команды вызвала немало споров (однако по итогу очень зашла заказчику и аудитории). Также мы решили добавить объема привычным предметам, сделать упор на 3D, чтобы вдохнуть в них жизнь, но при этом оставить в рамках виртуального пространства. </p>
</div>
</div>

 <img src="/uploads/Tagline_08_d26b6eefcc.jpg?updated_at=2023-03-30T07:29:20.589Z" alt="enter image description here">
<div>
<h3>Родная разработка</h3>
<div>
<p>Этот проект стал большим испытанием для нашей команды разработки. Попробуем просто перечислить то, что было проделано, и ничего не забыть: html, css, js, typescript, react, spa, seo, devops, docker, kubernetes, ci/cd. Да, это и frontend, и backend, да еще и с собственной командой тестирования. Опыт колоссальный, результат стоящий. </p>
</div>
</div>

 <img src="/uploads/Tagline_09_da0340955a.jpg?updated_at=2023-03-30T07:29:23.871Z" alt="enter image description here">
<div>
<h3>Версия для людей с ограниченными возможностями</h3>
<div>
<p>Мы&nbsp;также адаптировали сайт в&nbsp;соответствии с&nbsp;ГОСТ Р&nbsp;52872-2019 &laquo;Национальный стандарт Российской Федерации&raquo;. Сайт подходит для пользования слабовидящими людьми&nbsp;&mdash; есть функционал синтеза речи, изменения размера шрифта, увеличения контрастности. И&nbsp;при этом функциональностью контента можно управлять через интерфейс клавиатуры без ограничений по&nbsp;времени нажатия на&nbsp;клавишу.</p>
</div>
</div>

 <img src="/uploads/Tagline_02_677e7d1c7a.jpg?updated_at=2023-03-30T07:29:23.956Z" alt="enter image description here">
<div>
<h3>Ачивки</h3>
<div>
<p>На проекте очень разветвленная система ачивок, все-таки нужно подбадривать юных творцов. Поэтому мы вложили немало сил в систему поощрения. Тут речь не только о визуале, но и об идеях. Каждая ачивка продумывалась исходя из текущих трендов, чтобы порадовать легким юмором и не отбить мотивацию пользоваться платформой дальше. </p>
</div>
</div>
 <img src="/uploads/Tagline_03_66799d233b.jpg?updated_at=2023-03-30T07:29:18.408Z" alt="enter image description here">
 <div>
 <h3>Иконки, куда же без них</h3>
<div>
<p>Иконок потребовалось много, поэтому мы их рисовали, рисовали и снова рисовали. Несколько иллюстраторов постоянно трудились, чтобы в едином стиле воспроизвести множество считываемых образов. </p>
</div>
</div>
<img src="/uploads/Tagline_05_e8e59dca6b.jpg?updated_at=2023-03-30T07:29:24.365Z" alt="enter image description here">
<div>
<h3>Как итог</h3>
<div>
<p>Это проект, которым мы гордимся от и до. Мы вложили в него очень много сил и задействовали в проработке все отделы Mish: продуктовый, коммуникационный, отдел разработки и тестирования. У него клёвый и самобытные брендинг, интерфейс внешний и внутренний, иллюстрации, разработка и тестирование. При этом мы продолжаем работать над следующим сезоном проекта, оказывая полную продуктовую поддержку и подкидывая новые идеи к реализации. </p>
</div>
<br>
<br>
<h4>Совместно с <a href="https://metacorp.gg/">Metacorp</a></h5>

Начни игру.jpg

Начни Игру

Начни Игру.jpg

Скосырская Мария

Денисова Христина

Соколенко Владислав

Анпилов Алексей

Петров Сергей

Крестов Иван

Семенчук Юлия

Чулкова Елена

RedbassetMocap.mp4

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

  <img src="/uploads/00_Title_RB_6484bce805.jpg?updated_at=2023-03-31T15:31:28.658Z" alt="enter image description here">
  <div>
<h3>Red Basset </h3>
<p>
Red Basset&nbsp;&mdash; это бесплатная платформа для продвижения и&nbsp;монетизации подкастов. Для подкастеров это хостинг и&nbsp;личный кабинет с&nbsp;управлением, статистикой и&nbsp;монетизацией подкастов. Для слушателей&nbsp;&mdash; это удобное приложение для прослушивания тысяч подкастов в&nbsp;одном месте.
</p>
</div>  
  <img src="/uploads/01_RB_c5e246d402.jpg?updated_at=2023-03-31T15:31:29.616Z" alt="enter image description here">
  
<div>
<h3>Улыбайтесь, вы&nbsp;на&nbsp;Red Basset</h3>
<div>
<p>При создании логотипа Red Basset мы&nbsp;пришли к&nbsp;беспроводным наушникам и&nbsp;милой улыбке, что создает цельный образ мордочки собаки породы Бассет-хаунд.</p>
<p>Первый контакт пользователя с&nbsp;Red Basset происходит через лендинг, где мы&nbsp;доступным языком рассказали о&nbsp;платформе и&nbsp;визуально продемонстрировали её&nbsp;преимущества. Мы&nbsp;использовали минималистичные тексты и&nbsp;дополнили их выразительными 3d-иллюстрациями.</p>
</div>
</div>

  <img src="/uploads/02_RB_ef635d6e7d.jpg?updated_at=2023-03-31T15:31:30.977Z" alt="enter image description here">
 <div>
  <h3>Разработка</h3>
  <p>Проект поднимался собственными силами разработки. Backend реализован на Java Spring, а frontend на React. Тестирование и поиск багов тоже выполняли собственными силами. Однако мы все еще в процессе прикручивания новых фичей, так что работа продолжает кипеть.</p>
  </div>
  <img src="/uploads/03_RB_8d3e896cd2.jpg?updated_at=2023-03-31T15:31:30.479Z" alt="enter image description here">
 <div>
  <h3>Личный кабинет подкастера</h3>
  <p>Подкаст-платформа Red Basset является бесплатным хостингом для подкастеров. Это буквально рай для них, поскольку все возможности для дистрибуции благодаря RSS уже встроены, никуда отдельно ходить не нужно. В личном кабинете подкастера реализован весь функционал для быстрой и удобной заливки подкастов.</p>
  </div>
  <img src="/uploads/05_RB_f791d45187.jpg?updated_at=2023-03-31T15:31:30.885Z" alt="enter image description here">
 <div>
  <h3>Немножечко подкастов?</h3>
  <p>Подкасты нужно слушать много, долго и комфортно. Для этого мы создали приложение-слушалку, где можно сделать себе уютную библиотеку с любимыми подкастами, создавать разные подборки и даже слушать офлайн.</p>
  </div>
  <img src="/uploads/06_RB_d215ebd87c.jpg?updated_at=2023-03-31T15:31:28.639Z" alt="enter image description here">
  </div>
  <div>
  <h3>А что в итоге?</h3>
  <p>От и до этот проект создан нами: концепция, брендинг, дизайн, разработка. Проделана огромная работа. Мы с удовольствием наблюдаем, как платформа работает, с каждым днем привлекает новых слушателей и подкастеров, развивается, становится популярной. При этом не забываем о поддержке проекта, доводим его до идеала, встраиваем новые фичи и не забываем о маркетинговой коммуникации.</p>
  </div>

Red Basset.png

Red Basset

Авдеев Алексей

Авдеева Юлия

Data-Track.png

На примере ПО для Абинского
металлургического завода

 <img src="/uploads/1_11_4f6b371f78.png" alt="enter image description here">
 <div>
<h3>Что же это такое?</h3>
<div>
<p>Data-Track — это MES (от англ. manufacturing execution system), т.е. система управления производственными процессами — специализированное прикладное программное обеспечение, предназначенное для решения задач синхронизации, координации, анализа и оптимизации выпуска продукции в рамках производства. MES-системы относятся к классу систем управления уровня цеха, но могут использоваться и для интегрированного управления производством на предприятии в целом.
</p>
</div>
</div>
  <img src="/uploads/2_f908d5038d.png" alt="enter image description here">
 <div>
<h3>Зачем же это нужно?</h3>
<div>
<p>Прежде всего, для систематизации и визуализации данных, выделении главного, поскольку в основе ПО лежат excel-таблицы, которые заложены во всех заводских процессах: планы производства, загрузка склада, перемещение материалов и т.д. А это значит, что требуется удобный интерфейс, ведь сотрудники работают подолгу с ним, иногда в условиях недостаточной освещенности.
</p>
</div>
</div>
  <img src="/uploads/3_ecfb833ed6.png" alt="enter image description here">
 <div>
<h3>Проблематика</h3>
<div>
<p>Еще перед началом работ вскрылось множество проблем, которые и подтолкнули нас к поиску наиболее оптимальных решений. Проблемы следующие: </p>
 <ul>
 <li>Много бумажного документооборота. Много процессов на производстве фиксируется только на бумаге. Их сложно отслеживать, хранить и передавать;</li>
 <li>Сложные условия на рабочих местах. Сотрудники работают подолгу с этим интерфейсом, иногда в условиях недостаточной освещенности; </li>
 <li>Много данных. Нет возможности быстро на одном экране увидеть ситуацию на производстве; </li>
 <li>Неактуальность. Как правило, для руководства доступны данные только за предыдущий день. Нет возможности следить за производством в реальном времени; </li>
 <li>Скорость работы. Данные между отделами передаются в течение нескольких суток; </li>
</ul>

</p>
</div>
</div>
  <img src="/uploads/4_e8d08a61ed.png" alt="enter image description here">
 <div>
<h3>Что же мы сделали</h3>
<div>
<p>В итоге мы разработали современный интерфейс в Figma. Также создали дизайн-систему, позволяющую быстро собирать любые требуемые интерфейсы.
Использовали следующие цифровые технологии и решения: </p>
 <ul>
 <li>HTML/CSS/JS;</li>
 <li>React (CRA);</li>
 <li>Storybook;</li>
 <li>Цифровой двойник;</li>
 <li>Датчики и камеры.</li>
</ul>

</p>
</div>
</div>
  <img src="/uploads/5_ce5fae8f9c.png" alt="enter image description here">
 <div>
 <h3>Технологическая независимость</h3>
<div>
<p>Одно из преимуществ данного ПО — технологическая независимость, то есть используются открытые технологии на базе open-source. Исходный код таких программ доступен для просмотра, изучения и изменения, что позволяет убедиться в отсутствии уязвимостей и неприемлемых для пользователя функций (к примеру, скрытого слежения за пользователем программы), принять участие в доработке само́й открытой программы, использовать код для создания новых программ и исправления в них ошибок.
</p>
</div>
<br>
<br>
<h4>Совместно с компанией <a href="https://dc.ru/">ДАТА-ЦЕНТР Автоматика</a></h5>

Data-Track-1.png

Система производственного мониторинга Data-Track

Чикильдин Илья

Максимкин Александр

Бажанов Максим

cover.webp

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

<div>
<h3>От порядка к порядку</h3>
<p>Заказчик пришел с&nbsp;задачей создать self-service портал для инвентаризации продуктов и&nbsp;управления их&nbsp;жизненным циклом. Система нужна, чтобы поддерживать продуктовый каталог в&nbsp;актуальном состоянии и&nbsp;получать дополнительную информацию о&nbsp;его элементах. С&nbsp;помощью системы сотрудники могут создавать типовые шаблоны, вычислять с&nbsp;их&nbsp;помощью показатели для индивидуальных программных сервисов, ĸомпонентов, продуктов и&nbsp;бизнес-активностей. Чем удобнее будет система, тем быстрее и&nbsp;легче пользователи получат удобный доступ к&nbsp;внутренней информации.</p>
</div>

<img src="/uploads/v_V_G_M_L_2a3b80e4ee.webp">

</div>
<div>
<h3>Что было не&nbsp;так с&nbsp;системой</h3>
<p>Это ее&nbsp;перегруженный и&nbsp;одновременно недогруженный интерфейс. Перегруженный с&nbsp;точки зрения чистоты дизайна, при этом недостаточно удобный с&nbsp;точки зрения UХ. А&nbsp;еще внутри системы недоставало важных функций и&nbsp;сценариев, которые&nbsp;бы охватывали все необходимые рабочие ситуации. Нам было важно это исправить. От&nbsp;изначальной версии оставили только верхнеуровневую навигацию&nbsp;&mdash; логику разделов. Остальное дополнили и&nbsp;разработали с&nbsp;нуля.</p>
</div>

<img src="/uploads/208189208176208187208190209129209140_74fb43bab6.webp">

</div>
<div>
<h3>Формирование логики</h3>
<p>Никто лучше заказчика не&nbsp;знает, что ему нужно получить в&nbsp;итоге. Никто лучше нас не&nbsp;знает, как прийти к&nbsp;идеальному результату в&nbsp;итоге. Поэтому всю внутреннюю логику системы мы&nbsp;разрабатывали вместе. Изначально нам предоставили пул неструктурированных данных, из&nbsp;которых должен получиться итоговый продукт. На&nbsp;совместных созвонах мы&nbsp;формировали логику и&nbsp;предлагали гипотезы. Затем дизайнеры отрисовывали интерфейс и&nbsp;передавали техническое задание разработчикам. Цикл продолжался раз за&nbsp;разом, пока все нужные фичи не&nbsp;были готовы. Он&nbsp;продолжается и&nbsp;сейчас: в&nbsp;ходе эксплуатации становится понятно, какие функции еще нужно добавить, а&nbsp;какие со&nbsp;временем оказываются не&nbsp;нужными.</p>
</div>

<img src="/uploads/4_208164208190209128208188209139_f03b3127cc.webp">

</div>
<div>
<h3>Этап разработки</h3>
<p>Команда дизайнеров предоставила внутреннему отделу разработки Mish готовый UI-Kit. Мы&nbsp;собрали библиотеку компонентов, чтобы можно было быстро собирать функциональный интерфейс. Для это выбрали решения React и&nbsp;Storybook. Основная сложность разработки была в&nbsp;интеграции и&nbsp;получении данных из&nbsp;внутренних систем заказчика и&nbsp;в&nbsp;обратной синхронизации. Для бэкенда выбрали next.js, express и&nbsp;базу данных postgreSQL. Чтобы взаимодействовать с&nbsp;серверной частью, использовали REST API. Так получилось забрать данные из&nbsp;нашего портала и&nbsp;предоставить другим системам заказчика получать обновленные данные. Дополнительно организовали ролевую модель для серверной и&nbsp;клиентской частей системы. Этим занимались тестировщики в&nbsp;команде&nbsp;&mdash; и&nbsp;в&nbsp;итоге за&nbsp;две недели плотной работы проверили каждую виртуальную щель на&nbsp;безопасность.</p>
</div>

<img src="/uploads/a_A_V_e4e839b082.webp">

</div>
<div>
<h3>Информационная структура</h3>
<p>Готовую админку мы&nbsp;взяли за&nbsp;основу&nbsp;&mdash; и&nbsp;полностью переделали. Отрисовали интерфейсы для трех ролей: самых частотных пользователей, которые имеют дело с&nbsp;системой. В&nbsp;итоге получилась многоуровневая структура с&nbsp;древом навигации, полноценной контентной частью и&nbsp;масштабным новым функционалом.</p>
</div>

<img src="/uploads/209131208186209130209131209128208176_5ffaff35e5.webp">

</div>
<div>
<h3>Дашборды</h3>
<p>Большая часть системы&nbsp;&mdash; это разнообразные таблички. Их&nbsp;создают сами пользователи, а&nbsp;потом к&nbsp;делу приступают архитекторы. Все дашборды отображаются в&nbsp;трех видах, и&nbsp;пользователи продукта могут сами выбрать, какое именно отображение им&nbsp;кажется более удобным. Мы&nbsp;привели все к&nbsp;единому виду, чтобы пользователи быстро считывали контент на&nbsp;разных продуктах и&nbsp;так&nbsp;же быстро получали нужную им&nbsp;информацию.</p>
</div>

<video
src="/uploads/6208177208190209128208180_60fps_v1_0_d80f6b9c35.webm"
loop
autoplay
muted
playsinline></video>

</div>
<div>
<h3>Сущности</h3>
<p>Так внутри компании называют информационные продукты, которые создают и&nbsp;затем курируют сотрудники. Чтобы запустить процесс, нужно заполнить очень сложные формы&nbsp;&mdash; но&nbsp;так, чтобы это было максимально просто. Мы&nbsp;сделали многоуровневую форму с&nbsp;разнообразными критериями, организовали удобное поэтапное заполнение, разделили критерии на&nbsp;шаги. Здесь&nbsp;же есть режим просмотра: в&nbsp;нем все, что внес в&nbsp;карточку пользователь, отображается в&nbsp;структурированном виде.</p>
</div>

<img src="/uploads/209137208189208190209129209130208184_cd5691dc2c.webp">

</div>
<div>
<h3>Взгляд в&nbsp;прошлое и&nbsp;будущее</h3>
<p>В&nbsp;августе 2020 года мы&nbsp;выиграли тендер по&nbsp;проекту, сама реализации идет с&nbsp;2021&nbsp;&mdash; и&nbsp;продолжается до&nbsp;сих пор. Сначала была полноценная разработка, а&nbsp;сейчас мы&nbsp;на&nbsp;поддержке и&nbsp;пилим новые фичи по&nbsp;запросу заказчика.</p>
</div>

QA

hello@mish.design

Москва

Нижний Новгород