Impressionify

When Art Meets Interactivity

Work Introduction

What is this site about?

Impressionify is a site that generates impressionism style images for famous artworks. Users can also upload their own image and generate the picture.

It’s also my first ever project in college, made for my HCDE 310 class😊

Keyword: Software Interaction, Web Development, Python Programming

Overview

Context

Problem

Goal

Everyone appreciate art, but few of the gifted create great arts. For most of us, all we can do it to appreciate those great art.

Most people does not have any interaction with great artwork beside taking photos of them. The limitation in interactivity also limited people’s understanding of the story and concept behind those arts.

My goal is to give every one a chance to unleash their creativity and to meet some timeless paintings along the way, to appreciate those paintings' unique beauty, and to gain knowledge about them.

Time Frame

Oct. 2021 — Dec. 2021

My Role

UI/UX Designer, Full Stack Developer

Platform

Web, Python

Instructor

Design

Prototype

Design Requirements

Image Generator

  • Generate impressionism style images that are beautiful, meaningful, and random enough for different images

  • The process should be fast, within 30 seconds

  • Generated image should have a high enough resolution to be displayed full-screen

Home Page

  • Show what the site is about

  • Show what the inputs and the output are

  • Some basic information about the input artworks

I’m Feeling Lucky Page

  • Generate random images

  • Images generated should have a high enough quality

  • Some basic information about the input artworks

Do It Yourself Page

  • Upload image from the user’s device

  • Users should be able to pick what artwork they want to use, preferably search for a spcific artwork

  • Generated images should be able to download

Build & Implementation

Actual Site

The site is divided into three parts, in Explore users are greeted with some pre-generated images to give the user a straightforward sense of what outcome to expect. If users are interested in any of those, just click "Find out more" And they will be brought to a page with the original artwork, the image, and the final outcome.

This page is designed as a welcome landing page to get the users familiar with how the website works. A clean and simple design of this page helps to grab users' attention and make them stay on the site.

The next section is I'm Feeling Lucky inspired by the Google search button, when users click the refresh button, it will pick one random artwork from the Art Institute of Chicago, one nature photo from Unsplash, and generate a natural image in the artwork's style for the user.

If users got some of their own great photos, then the last section Do It Yourself is built just for the user--from here they can upload their own photos. Then here I can choose which artwork to use, if the users think non of them are good, they can hit the search button and search for the artwork in their mind.

Highlights

Interactivity

The website has high interactivity. Users can not only enjoy the pictures that have been generated but also generate pictures randomly through buttons, upload materials and choose styles by themselves. Different kinds of interactions and a high degree of freedom allow users to experience more fun on the website.

CSS Animation

Smooth CSS animation can reduce the fragmentation of the website, and the display and disappearance of some buttons can also better guide users to perform correct operations, such as making the refresh button disappear when the website loads, and then reappear after loading.

AJAX

The use of AJAX allows the entire page to be refreshed only when the content is updated, which makes the site feel fluent and smooth.

Responsiveness

The use of Responsive design allows websites to display different layouts on screens of different sizes, allowing mobile, tablet, and computer users to enjoy the same comfortable browsing experience.

Want to Know More?

Watch the video demo to see how the site works in real life!

⚠️Due to the rapid development in AI from 2021, OpenAI has fully removed models uploaded by individual developers so Impressionify is no longer functional. If you still want to see the actual site, you can visit it here: Impressionify