MARS:
AI café concept
This project involved using AI tools such as Adobe Firefly and Adobe Photoshop (Beta) to create an AI-infused logotype and an AI-related interface.
Project details
Concept
A café blending retro aesthetics with modern culinary and digital techniques, creating a harmonious and convenient dining experience.
My role
UI designer, Graphic designer
Project type
● AI based concept
● Individual project
● School project
Project duration
1 week
Tools used
● Adobe Photoshop (Beta)
● Adobe Illustrator
● Adobe Firefly
● Figma
AI-Infused logotype
I was tasked with conducting two interconnected assignments that were part of the same concept. To incorporate AI in a fun yet natural way, my thoughts immediately turned to Sci-Fi, and from there, to a retro-futuristic café, somehow 🙃
With my vision in mind, I knew I wanted to create a fun and visually fitting logo as my first assignment. I love round logos, and I thought that format resonated with the planetary theme I pictured.
I tasked Adobe Firefly with creating an illustration of Mars for me.
Process & Tools
The tool produced a somewhat round planet for me, but I did think it needed some refinement. Since I also wanted to enhance my Adobe Illustrator skills and know that vector is a great format for logos, I decided to vectorize the image using Adobe Illustrator, where I also added the logo text.
Step 1
Generating a planet
Adobe Firefly
- Text to image
PROMPT
Peaceful vector-looking illustration of the planet Mars in dull retro colors on a dark background
Process & Tools
The tool produced a somewhat round planet for me, but I did think it needed some refinement. Since I also wanted to enhance my Adobe Illustrator skills and know that vector is a great format for logos, I decided to vectorize the image using Adobe Illustrator, where I also added the logo text.
Step 1
Adobe Firefly
- Text to image
PROMPT
Peaceful vector-looking illustration of the planet Mars in dull retro colors on a dark background
Step 2
Adobe Illustrator
- Image trace
- Manual refinements
Step 3
Adobe Illustrator
- Text tool
The AI Interface
This assignment involved creating a UI interface with AI features, using AI tools. As I considered and discussed the intersection of cafes and AI, I noticed a common hassle in ordering takeout. I often have specific preferences but find it challenging to convey them while waiting in line.
So, I came up with an idea—a virtual barista. This virtual assistant would allow customers to chat or talk, making it easier to customize orders or ask questions, enhancing the overall ordering experience. "An introvert's dream", as my husband said 😆
Process & Tools
To make the experience more realistic/familiar for the customer, I created a friendly persona illustration in Adobe Firefly and refined it using Adobe Illustrator.
I generated a lifelike (to my surprise) illustration of a hand holding a smartphone in Adobe Firefly to enhance the recognition of my concept as a mobile app. Afterward, I fine-tuned the image in Adobe Illustrator and added a frame for the content I wanted to add in Adobe Photoshop (Beta).
I decided to incorporate a space background into the design using Photoshop Beta's Generative fill feature. Although it took a few attempts, I finally managed to find the right fit for my vision. I then exported the work to Figma, where I felt more comfortable putting it all together and making the finishing touches.
Step 1
Generate a barista
Adobe Firefly
- Text-to-image
PROMPT
Playful illustration of a friendly, slightly smiling female barista with 50's style blouse, hair and apron. Waist shot, looking into the camera, retro colors
End result
Step 1
Adobe Firefly
- Text-to-image
PROMPT
Playful illustration of a friendly, slightly smiling female barista with 50's style blouse, hair and apron. Waist shot, looking into the camera, retro colors
Step 2
Adobe Illustrator
- Image trace
- Manual refinements
Step 3
Adobe Firefly
- Text-to-image
PROMPT
Illustration of a hand holding a smartphone with a blank screen in retro colors
Step 4
Adobe Illustrator
- Image trace
- Manual refinements
- Shape builder tool
Step 5
Adobe Photoshop (Beta)
- Text-to-image
PROMPT
Illustration of space with planets on a dark background, calm retro style dull colors
Step 6
Figma
- Shape tool
- Mask tool
- Text tool