TooToon Anima

Used Tools | Illustrator, Adobe XD, Figma
Project Duration | 2024.02 ~ 2024.10
Team | 1 UI/UX Designer, 3 Front-End Engineer, 1 Full-Stack Engineer
Role | UI Design, Service Planning

Project Overview

Anima is an AI-based illustration creation tool that allows users to easily generate and share images, as well as exchange ideas on a platform. It provides various styles and image ratios to support creators in producing content tailored to their needs and brainstorming. This project is designed to enable users to unleash their creativity and implement visual ideas more freely and efficiently. Anima aims to present a new way of illustration work environment focusing on collaboration and creation.

I aimed for users of Anima to intuitively recognize all features within a consistent UI in the service, use them smoothly, and deliver all tasks without hindrance through this project.

User interviews were conducted to identify the needs of Anima development.

Design Elements

Anima's UI design emphasizes the seriousness and professionalism required in AI-based apps by using black and purple as key colors. The black background makes images stand out more, allowing users to focus on their creations. To provide a consistent experience across different languages and environments, the versatile Noto Sans font was used, and responsive design was applied for mobile users to provide an optimized interface on all devices. In this way, Anima is designed to maximize creators' workflow through an intuitive and visually striking environment.

UI Design

Home

Anima is optimized for displaying a variety of image sizes and styles effectively through a dashboard using a Pinterest-style Masonry Layout. This allows users to intuitively and flexibly explore created images and enjoy a better visual experience in the creative process.

Generate Image, Generate History

Anima can bring up a prompt through the import button to start working. Additionally, you can set the style using the webtoon style application button, adjust the image size and number of images. The credit usage varies depending on the number of images, and this is clearly indicated to the user in advance. Once the images are generated, it automatically moves to the generated history in the example gallery, making it easy for users to track and manage the generation records.

Image Detail

Clicking on a generated image in Anima opens the image detail page, allowing you to view the image in a larger size. On this page, you can enhance user interaction through like, comment, and share functions. Additionally, clicking the 'Use Prompt' button duplicates the prompt in the input field, making it easy for users to create new images based on it.