Авиакасса Люблино

Слева - лицевая сторона, справа - оборотная.

![image](https://piybeep.com/api/static/1690364092067-6b417ad96563c.png)

![image](https://piybeep.com/api/static/1690364162545-69019b673ca1d.png)

![image](https://piybeep.com/api/static/1690364189970-fddf53ff3f66f.png)

![image](https://piybeep.com/api/static/1690364211501-0264792d75f7c.png)

![image](https://piybeep.com/api/static/1690364226799-4afa916a8388c.png)

Дизайн визитки авиакассы

Группа компаний

При переходе на сайт нас встречает авторизация, так как без нее мы не сможем пользоваться сервисом. Аккаунты создаются вручную. Здесь есть два - Администратор и Пользователь.

![image](https://piybeep.com/api/static/1690363447275-d91b03676279a.png)

Авторизовавшись, видим страницу с календарем. Это основной функциональный объект сайта. На нем в принципе основана вся структура проекта.

В верхней части есть ручной поиск по дате и кнопка “Выйти”, для желающих.

![image](https://piybeep.com/api/static/1690363485524-75d28f5687cb7.png)

Каждый день содержит в себе “Проекты”. Их может быть бесчисленное множество. Для удобства создана сортировка по алфавиту.

Можно создать новый проект.

![image](https://piybeep.com/api/static/1690363536016-c71700d7bdb53.png)

В проектах находятся объекты и часы. Добавлена сортировка по алфавиту и по количеству часов) и диаграмма, которую в любой момент можно включить и выключить.

![image](https://piybeep.com/api/static/1690363581657-0413bd6dacd77.png)

Справа есть кнопка “Посмотреть на карте”, при нажатии открывается карта, на которой расположены объекты. Рядом с названием написано количество часов.

![image](https://piybeep.com/api/static/1690363635922-b62d14ea5391a.png)

Веб-сервис для аналитики и учета рабочего времени сотрудников

Организация "Loctravel"

Здесь вы можете выбрать куда сходить и посмотреть жизнь города, парк или достопримечательности.

![image](https://piybeep.com/api/static/1690311240055-4216ec18c08be.png)

Ознакомитесь с популярными местами в столице.

![image](https://piybeep.com/api/static/1690311324041-da39ee366e861.png)

И красивыми автобусными маршрутами.

![image](https://piybeep.com/api/static/1690311411303-f26976d48c71b.png)

Расскажем об интересующих местах; гидах, которые могут показать вам их; и посмотрите отзывы туристов, которые эти места уже посетили.

![image](https://piybeep.com/api/static/1690311480731-1036a470cc51.png)

Поближе познакомитесь с вашим потенциальным экскурсоводом, или можете сами стать одним из них.

![image](https://piybeep.com/api/static/1690311586476-bfe844bb6fce6.png)

![image](https://piybeep.com/api/static/1690311639593-d8a8b2eeec0bc.png)

Сайт для планирования путешествий в Москве

Cargo loader

В этом веб-приложении реализован больший упор на функциональную часть и работоспособность, поэтому мы воспользовались UI-китом от AntDesign, версии 5.0. Это достаточно удобная и приятная (с визуальной точки зрения) система дизайна, готовые элементы которой можно располагать так, как это будет удобно для реализации нужного нам функционала.

...Проект наполняется...

Логистический веб-сервис для расчетов и визуализации

Колледж связи

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

![image](https://piybeep.com/api/static/1690314028381-80d9f461bdfd7.png)

После входа в аккаунт нас встречает главная страница.
Ее основной функционал заключается в автоматизированном создании ведомостей.

Можно сразу скачать дорожные карты и ведомость на пересдачу.
Либо заполнить данные чтобы сформировать и скачать экзаменационную или зачетную ведомость.

![image](https://piybeep.com/api/static/1690314452462-d712dddd58cd2.png)

Выбираем тип ведомости (экзаменационная/зачетная).
Затем идет выбор преподавателя. И вариант «Вакансия», чтобы после распечатки можно было вписать имя преподавателя вручную.

![image](https://piybeep.com/api/static/1690314593880-3c85dad69db17.png)

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

![image](https://piybeep.com/api/static/1690314628154-dc93446e086d4.png)

После этого выбираем группу. Так же для удобства есть разделение на категории «после 9 класса», «после 11 класса»; бюджетную и внебюджетную форму обучения. И нажимаем кнопку «Создать и скачать»

![image](https://piybeep.com/api/static/1690314663822-71e88923fccf4.png)

При выборе группы предоставляется список её студентов. Можно редактировать ФИО, удалять отчислившихся и добавлять новых.

![image](https://piybeep.com/api/static/1690314738002-c23ce0de8ef66.png)

И через пару секунд мы имеем готовую экзаменационную ведомость группы 1ИСП1-1 по предмету МДК 11.01.
Страница автоматически очищается при скачивании (но есть и функция принудительного очищения).
Можно создавать следующую ведомость.

![image](https://piybeep.com/api/static/1690314782219-1b97b9508712e.png)

Есть личный кабинет, можно сменить логин, пароль. Эта страница сейчас в разработке.

![image](https://piybeep.com/api/static/1690314817763-6e1b676f60a46.png)

Сервис создания ведомостей для колледжа

Сервисный центр "iBolitt"

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

Начиная с обсуждения ТЗ и анализа сайтов похожих сервисных центров в сердце Москвы, решили делать дизайн нечто непохожий на тот, что мы видели у других.

![image](https://piybeep.com/api/static/1690362862642-696a3ae9a9735.png)

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

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

Справа в виде сообщения iMessage отображается дополнительная важная информация. Своеборазная замена бегущей строки.

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

С недавних пор iBolitt стали ремонтировать не только устройства Apple, но еще и на платформе Android. К функционалу этого блока вернемся позже.

![image](https://piybeep.com/api/static/1690362917995-03b106a249bbb.png)

Дальше - простая форма оправки заявки. Введите недостающие данные в предложения и запишитесь на ремонт. После с вами свяжутся и уточнят все, что нужно.

![image](https://piybeep.com/api/static/1690363016113-78d94424049a.png)

Третий блок сайта - контакты. Адрес, расписание работы, номер телефона для связи. Карта от Яндекса. Все чтобы связь с iBolitt была максимально доступной и понятной.

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

![image](https://piybeep.com/api/static/1690363089570-4b12cc60f5669.png)

И так, вернемся к тому, как узнать стоимость ремонта. Выбрав нужное устройство, открывается его список моделей. Выбрали iPhone, 11 Pro Max...

![image](https://piybeep.com/api/static/1690363134813-74965a8ebb967.png)

![image](https://piybeep.com/api/static/1690363147234-12fcf65af0fed.png)

Затем выбираем услугу (замена дисплея), и получаем стоимость. Так просто.

![image](https://piybeep.com/api/static/1690363180716-6d200c169527e.png)

Лендинг с расчетом стоимости ремонта

Ансамбль "Сирин"

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

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

![image](https://piybeep.com/api/static/1690364520136-d93b538f7766d.png)

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

![image](https://piybeep.com/api/static/1690364585164-c4c75dabb51c6.png)

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

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

![image](https://piybeep.com/api/static/1690364617687-6248ecff69d82.png)

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

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

![image](https://piybeep.com/api/static/1690364665706-0b5c5f5ba77aa.png)

Страница со всеми членами команды Сирина.

Здесь можно посмотреть всех, кто участвует в ансамбле: преподавателей, руководителей и проч. Указаны имена и должности.

![image](https://piybeep.com/api/static/1690364715826-2386d69524a37.png)

Профиль каждого члена команды.

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

![image](https://piybeep.com/api/static/1690364760567-7a1175b95ae21.png)

Через форму отправляется заявка.

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

![image](https://piybeep.com/api/static/1690364808642-d73ad25022b27.png)

Корпоративный сайт хореографического ансамбля

Группа компаний "Ренессанс"

Существующий сайт не давал возможности понять цель компании. Какие проблемы решает?
<br/><br/>
Начнем с главной страницы. Проанализировав сферу деятельности (аутсорсинг и аутстаффинг), мы рассмотрели сайты и уникальные торговые предложения конкурентов и составили оффер. Который с большой конверсией будет перенаправлять клиентов на форму обратной связи в конце лендинга для отправки заявки.

![image](https://piybeep.com/api/static/1690304685360-ed5c1ba9c007c.png)

И какие конкретно услуги предлагает Ренессанс, чтобы помочь вам?

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

![image](https://piybeep.com/api/static/1690304889642-cbfb9f0c2dc39.png)

Люди - самый ценный актив.

Важно заботиться о своем персонале и о своих клиентах. Важно, чтобы люди любили свою работу и тогда они без всяких замечаний будут делать свое дело наилучшим образом.
Это блок с кратким перечнем преимуществ. Клиент должен наглядно видеть что он получит если обратится к вам. Поэтому, важно рассказать клиенту о том, как вы решаете его проблемы.
  
Если вы на рынке уже давно, у вас появляются клиенты, которыми вы можете гордиться (вообще нужно гордиться всеми клиентами, конечно :) Поэтому мы сделали такой блок, где показываем ценных клиентов для Ренессанс. Во первых, для посетителей сайта это повышает доверие к компании. Это действительно важно. И если у вас есть чем похвастаться - не стесняйтесь показывать это!

![image](https://piybeep.com/api/static/1690305393543-b85db73df441f.png)

Шаги к сотрудничеству.

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

![image](https://piybeep.com/api/static/1690305493429-e561952d8f09c.png)

Корпоративный сайт для аутсорсинговой компании

Служба "Люблино Экспресс"

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

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

![image](https://piybeep.com/api/static/1690365134634-3f6fe7eb2c034.png)

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

После нажатия на кнопку “Рассчитать” - отобразится примерная стоимость доставки, время доставки и проч.

![image](https://piybeep.com/api/static/1690365185090-1fef0e7a87535.png)

Переходим к другой вкладке, и здесь можно отследить вашу посылку!

Введем номер и отобразится вся нужная нам информация о том, как путешествует наш заказ.

![image](https://piybeep.com/api/static/1690365235288-ede6859accf89.png)

Узнаем немного о компании.

![image](https://piybeep.com/api/static/1690365272494-cfa5407b59654.png)

Посмотрим документы.

![image](https://piybeep.com/api/static/1690365300147-5ad2cef12234.png)

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

Также можно нажать на интересующий ПВЗ и посмотреть время его работы, фотографии и другую информацию.

![image](https://piybeep.com/api/static/1690365331599-df5e7c9453716.png)

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

При обращении, выбираем тему, и тогда служба поддержки поможет вам быстрее решить вашу проблему.

![image](https://piybeep.com/api/static/1690365400772-c591b8803a902.png)

![image](https://piybeep.com/api/static/1690365417694-3d505e4f3f2e1.png)

И, завершаем футером со ссылками на соцсети, копирайтом, и некоторыми документами.

![image](https://piybeep.com/api/static/1690365441418-cedd76c77f96c.png)

Лендинг и калькулятор для службы отслеживания посылок

Курсы "Highflyers"

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

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

![image](https://piybeep.com/api/static/1690815854242-312062a2c3ed1.png)

Далее офферная конструкция с продающим текстом и кнопкой с призывом к действию.

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

![image](https://piybeep.com/api/static/1690815879399-459fe9e602f8a.png)

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

![image](https://piybeep.com/api/static/1690567383851-46ee92ec4c959.png)

Здесь перечислены основные варианты обучения на Highflyers. 

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

![image](https://piybeep.com/api/static/1690577944909-49fa1935e8aa6.png)

Далее немного рассказали о методах обучения - карточках с обучающими материалами и тестах.

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

![image](https://piybeep.com/api/static/1690578090449-87beac5377d44.png)

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

И рядом - часто задаваемые вопросы. Выполнены в форме диалога, дизайна iMessage.

![image](https://piybeep.com/api/static/1690371813963-edc9e4afb932b.png)

Варианты тарифов.

Расписаны цены, что включает в себя каждый. Можно оплачивать каждый материал отдельно, либо взять весь курс обучения (со скидкой).

![image](https://piybeep.com/api/static/1690567606878-5b68f88d41c3e.png)

И форма, если хотите узнать еще что-то, вам будут рады ответить!

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

![image](https://piybeep.com/api/static/1690371896988-275d726f6d347.png)

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

Заголовок с названием курса, небольшое описанием справа и фильтрация информации на странице: можно отобрать карточки по необходимому уровню языка, либо показать только уже доступные. Основная часть страницы состоит из “раздаточных материалов”. Все их можно приобрести только после авторизации. Все карточки на этой странице после оплаты доступны в формате PDF.

![image](https://piybeep.com/api/static/1690816066049-2e313a485a258.png)

На сайте можно почитать статьи, которые помогут в изучении языка.

После прочтения пройти тест и выполнить несколько заданий по теме.

![image](https://piybeep.com/api/static/1690816146298-a991c4e249cfc.png)

![image](https://piybeep.com/api/static/1690816091438-f684752e6d778.png)

![image](https://piybeep.com/api/static/1690372058537-3e82d706f0756.png)

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

Есть несколько вариантов информации - подкасты, книги, видео и многое другое.

![image](https://piybeep.com/api/static/1690816199525-a67c61f2d3ff3.png)

![image](https://piybeep.com/api/static/1690372141091-072db180aaa75.png)

Лекции TED Talks. Актуальные темы, в которых можно подтянуть скиллы в английскому.

После просмотра видео также можно будет проверить усвоенную информацию.

![image](https://piybeep.com/api/static/1690816223844-b32a45798fcf6.png)

![image](https://piybeep.com/api/static/1690372189931-1c55e84f73836.png)

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

Есть разные части - устная и письменная, можно выбрать более подходящую тему для тренировок.

![image](https://piybeep.com/api/static/1690816263049-c0b93dabde274.png)

После авторизации переходим в свой профиль. Там вся персональная информация и все данные.

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

![image](https://piybeep.com/api/static/1690816314054-4fa558786c32a.png)

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

![image](https://piybeep.com/api/static/1690816341304-9c8510273264d.png)

Ну, и все оплатить можно любой банковской картой.

![image](https://piybeep.com/api/static/1690372303144-fdafecd65b9c9.png)

Платформа изучения английского языка

Hackathon PRO. Поколение IT

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

![image](https://piybeep.com/api/static/1690362471006-0a218ded207e6.png)

Вторая задача - рассказать о мероприятии. Поэтому по блокам мы расположили важную информацию, касаемо организации и проведения. Цели, об участии, расписание, критерии оценивания проектов.

![image](https://piybeep.com/api/static/1690362530666-f057b2d1b9b16.png)

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

![image](https://piybeep.com/api/static/1690362593642-7dd75d0f423e6.png)

Ну, и контакты организатора, конечно :)

![image](https://piybeep.com/api/static/1690362617187-2641455783d8a.png)

Одностраничный сайт для регистрации на хакатон

Компания "ZIN"

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

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

![image](https://piybeep.com/api/static/1690312600508-c3c8f1b1d486d.png)

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

![image](https://piybeep.com/api/static/1690312669923-241c6dfe81487.png)

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

![image](https://piybeep.com/api/static/1690312730993-cba250675f16d.png)

![image](https://piybeep.com/api/static/1690312777448-332da61d47db5.png)

Кроме основной страницы, было необходимо добавить корзину и реализовать возможность заказа товара. Без этого, сайт не имел бы смысла :)

![image](https://piybeep.com/api/static/1690312829021-c0fad470eabc8.png)

![image](https://piybeep.com/api/static/1690312870932-5ab04f52ce89c.png)

![image](https://piybeep.com/api/static/1690312886082-0960012655ae6.png)

Лендинг производителя спреев «ZIN»

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

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

Веб-визитка

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

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

Лендинг

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

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

Корпоративный сайт

Интернет-магазин - это сайт, на котором можно выбирать и заказывать товары и услуги через интернет. Они обычно имеют каталог товаров, который можно просмотреть и отфильтровать по различным параметрам, оформить заказ и оплатить его онлайн.

Такие сайты актуальны для онлайн-торговли (e-commerce) как в формате b2c (розничной продажи), так и в b2b (оптовых закупках).

Интернет-магазин

Система управления сайтом (CMS, админ-панель) - создается специально для вашего ресурса. Она позволяет администраторам сайта управлять его содержимым и настройками. То есть контентом, заказами, заявками, пользователями, правами доступа и прочим.

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

Админ-панель

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

web-studio

Дизайн визитки авиакассы

Задача.

О компании.

другие проекты .

Скоро больше