Assignment 1: Project Speculation

I am envisioning a creative tool where its primary function is to crop and re-arrange images.

Features & Design

This creative tool will offer users two image-selection options:

• a default, pre-provided image when first loading onto the page
• option to upload custom images

A max image-size restriction is proposed due to the limitations of framing the creative tool within a webpage, thereby maintaining a stutter-free experience.

A number of shapes will be offered such as a: square, triangle, hexagon and star.

I did think of adding a custom shape feature, where users are given the ability to draw out, and crop, using their own shapes. However, I am hesitant in implementing this feature as it might exceed my skillset.

After clicking and selecting which shape to use, it will substitute in place of the mouse cursor. The mouse cursor will accommodate the middle of the shapes.

Clicking on the image canvas, whilst having a shape selected, will crop the image using the shape. I plan to map simple css animations (a little scale up, drop shadow filter animation) and a sound effect, to the action, to convey the image being cut and also provide a sense of feedback to the user.

Users will be able to freely transform the cutout, whether that be re-orientation (rotate, flip, stretch/shrink width and height) or re-arrangement.

Once users are satisfied, they can download their piece via a “Save Image” button. I have an idea where there will be two different canvases, the left being the image manipulated, and the right being an empty, transparent space to house the cutouts, which is also the space that will be downloaded when clicking the “Save Image” button.

The design will be quite minimalistic: a simple colour scheme and icons.

Framing

I'm planning to frame my creative tool within a webpage, predominantly dealing with visual design with little implementation of audio features.

Although webpages offer relatively restricted opportunities compared to the powerful softwares of Microsoft Paint or Adobe Illustrator, I feel like my beginner coding skillset is most compatible with this medium. Even so, exploring the provided creative tools where majority are running on webpages, and seeing their creative potential, I believe framing in webpages is sufficient in the creation of my idea.

I want to focus on simple visual transformations like Flippory or Useless Painter as I believe it's achievable with my skillset. I don't particularly favour exploring deeply within the audio side of things as some of the provided creative tools, that primarily use sound, did not peak my interest. However, Patapat was AMAZING. I would love to create something like it but the required coding level exceeds way above mine.

Worth (As a reminder that worth is subjective and I am presenting my personal values)

The overarching value that I hold deeply about my creative tool is satisfaction. Satisfaction in its controls, whether they are intuitive. Satisfaction in its executable actions and feedback, whether they are snappy, responsive but smooth. Satisfaction in my design, where it's minimalistic, neat and organized.

Creative Tools like Concrete Nest, Useless Painter, Wigglypaint, Orbidraw and Flippory all have intuitive controls pertaining to the mouse, whether that be drag and dropping items, or using the mouse cursor to draw. Their mapping of controls further contributes to their intuitiveness such as; simple icons and boxes for the selection of a different creative function. Users are able to quickly use the creative tool even if it’s their first time visiting.

These same tools are very responsive and stutter-free in their executable actions like drawing, dragging or clicking to place items. I would also like to implement some subtle audio feedback when selecting items, just like how Wigglypaint and Orbidraw does, which helped me become more engaged when using their tool.

In terms of design, the creative tool that I resonate with the most is Flippory, where it's very minimalistic in its colour palette and icons. Compared to that of Useless Painting where colours are freely expressed, denoting that the developer’s values may conflict with my personal values of neat-ness.

Compared to a multi-creative tool engine like Paint or Illustrator, their design and executable actions do align with my values. However, their controls and the journey to find a specific creative tool is difficult, especially for first-time users. Let’s simply ask ourselves, how does one use a specific shape, such as a square, to crop an image? First-time users would not be able to figure out how to do this orderly nor quickly. Even after discovering how, more issues arise. Most frustratingly is Paint. After cropping, dragging and placing the cropped image, it is impossible to re-select and re-transform it (unless there is a way but I have not figured out how). These limitations led me to speculate a creative tool specifically for this cropping feature.

Purpose

Worth and Purpose are closely intertwined. I want to provide users a smooth, satisfying and engaging experience. I want users to evoke the same feelings as that I value, satisfaction.

Elaborating on why I mentioned “engaging” as describing the desired experience, “lively” would also exist alongside it. Reflecting on Flippory’s design, I feel like the black and white colour palette is a little dull. I plan on retaining the minimalistic concept with the inclusion of brighter colours to boost “liveliness.” Another feature that will convey “lively” is the bright, subtle sound effects when selecting different options or executing actions, acting as a sense of feedback which engages the user.