Spark

Desktop
Category
Desktop
Service
This is some text inside of a div block.
year
This is some text inside of a div block.
Spark

Overview

Spark was conceptualized as a solution to the lack of efficient image previewing and organization tools on Mac for designers. The app aimed to enable users to preview full-size images and efficiently tag and save them to local folders for easy reference.

Problem

Designers often save inspirational images for reference, but existing solutions like Pinterest and Muzli fall short, particularly when offline access or high-resolution images are required. The challenge was to create a more effective tool that allowed for high-quality image saving and organizing without relying on internet connectivity.

Solution

Spark was designed as an application that allows users to preview images in full-size within the app, with the capability to quickly save and categorize these images locally. This approach offered designers more control over the image quality and ensured access to their collections regardless of internet availability.

Process and Methodology

The project involved designing an intuitive user interface for Spark, where users could easily navigate, preview, and manage images. The development focused on seamless integration with Mac systems, ensuring a smooth user experience. Despite not being greenlit for funding by InVision's Design Foundation, the conceptual work on Spark involved detailed planning and prototyping.

Outcome and Impact

Although Spark did not move beyond the conceptual stage, the project highlights an innovative approach to solving a specific need in the design community. It showcases a thoughtful consideration of the user's workflow and the challenges faced in image curation and management. Spark's design, emphasizing local storage and high-resolution image management, reflects an understanding of the unique needs of designers who require reliable and quality resources for inspiration.

  1. Sidebar containing folders created by the user, “Websites” is the selected folder with over two thousand images
  2. The slider changes the size of the thumbnails below
  3. Sidebar/Fullscreen toggle the sidebar on and off

  1. Double-clicking an image opens it up in fullscreen
  2. Arrows on the left and right allow users to scroll through saved images
  3. Tags created by the user can be seen here. The user can manage image tags by clicking to activate/deactivate

🎥 Basic interactions (Prototype)

  1. Image on dribbble
  2. Spark modal from the menu bar
  3. User clicks and starts to drag the image triggering the Spark modal in the menubar, where the user can then drop the image into one of the folders they have previously created

  1. Once the image is added to a folder, the user has the option to add tags. In this example, the user has tagged this image “Light.”
  2. After selecting a tag, the user clicks save

🎥 Adding images (Prototype)

  1. User can add a folder from the sidebar by clicking the “Add folder” CTA
  2. Adding the name is done right on the sidebar
  3. User can right-click to “Delete” or “Rename” folder
  4. User can click the folder icon to the left of the folder name and drag it to another position

  1. User can filter images by color
  2. User can filter images by existing tags

  1. Clicking the Spark icon in the menubar launches the modal
  2. Row of existing tags
  3. User can add a new tag by simply typing it into the input field
  4. Edit tags icon allows users to rename and delete there existing tags

🎥 Add state (Prototype)