AImee ChatGPT

Classic Vacation's endeavor into OpenAI.

In this page
Aug 7th, 2023

Intro

Layout will emulate the NYT ChatGPT page. The left side of the page will contain:

  • Graphic element: Eyeslashes
  • Page Title
  • Caption
  • Animation: Map Pin
Layout: Intro Download Eyelashes
Map Pin Animation

The animation is using the CSS bounce property. The files contain the CSS and the PNG files for the map pin.

See Animation Download Files
Photo

While the right side of the page will contain a photo.

Download Photo
August 7th, 2023

Prompt

The prompt UI consist of text, inputs, and a button. Remember, desktop buttons have hover effects. See the specs for the layout:

Layout for Prompt

User Interaction

For the desktop viewport, the inputs provide feedback to the user. In the case of the text field, when the user clicks on the field. The field will respond like so:

Text Field Clicked

When user enters text, text field response like so:

Text Field Entered

The pulldown will also need to be styled. It will change in color when the user srolls to choose a selection:

Pulldown
Aug 7th, 2023

Results

  • Text is text‐aligned left
  • Apply the appropriate paragraph breaks
  • Button has a hover effect
Results UI
Aug 7th, 2023

Mobile

Mobile Viewport Design

The mobile viewport has a different design layout treatment. The map pin does not animate in this case. You can download the graphic elements suitable for the mobile viewport.

This is how the user will see the mobile design:

Intro for Mobile

The results will display at the bottom of the page, replacing the image:

Results for Mobile
Download Mobile Graphics