Go2theCinema

A website for a fictional cinema. Contains two parts: user part for buying tickets, and administration part for setting cinema screenings and selling tickets.

Task: design mobile client UI and desktop admin UI.

Tools: Figma, HTML, CSS

2018

Educational designs have a feature: they often contain only one version of design (mobile or desktop) to not overwhelm students. This, client site of the cinema has only the mobile version.

Future client takes 4 steps: choose a cinema session, pick a seat, pays for a ticket, receives an e-ticket. I developed a screen for each step.

My favorite part of it is a perforation of the ticket :)

It's close to impossible to work with a seats scheme without zoom, so I made a permanent hint about zooming gesture.

Payment is always done via side services, so I didn't design a screen for it.

Admin part of the site has only desktop layout.

For running a cinema an admin needs such options:

  1. creating and deleting of halls;
  2. configure seat schemes of the halls;
  3. setting prices;
  4. adjusting sessions;
  5. starting and finishing ticket sales.

Technical note had this options in a numbered list and it defined my way of thinking: I made the admin part in step-by-step form.

If I was working on this project today, I would refused the step-by-step form and would offered a more convinient navigation.

Source code is availible in my repo.

идёмвКино

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

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

Инструменты: Figma, HTML, CSS

2018

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

Будущий зритель делает 4 шага, прежде, чем окажется в зрительном зале: выбирает сеанс, выбирает место, оплачивает билет, получает электронный билет. Я разработала экран для каждого шага.

Моя любимая часть этого дизайна — перфорация на экране билета :)

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

Оплата обычно осуществляется при помощи сторонних сервисов, поэтому форма оплаты не разрабатывалась.

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

При управлениии сеансами администратору необходимы следующие функции:

  1. Создавать и удалять залы;
  2. Настраивать конфигурацию кресел существующих залов;
  3. Указывать цену за кресла разных типов;
  4. Настраивать сетку сеансов;
  5. Открывать продажу билетов.

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

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

Код проекта можно посмотреть в моём репо.