Ui Design & Web Development
Flip Image Finder
An online platform built for generating a set of open-source images from different website sources to create mood boards, collages, and other creative works.
September to December 2021
An online platform built for generating a set of open-source images from different website sources to create mood boards, collages, and other creative works.
September to December 2021
Concept creation, branding, prototyping, and web development
Figma, VS code (HTML, CSS, JavaScript, PHP, Bootstrap, jQuery)
flip figma prototype
research maps figma
A website designed and coded for the computing course at George Brown in the digital experience design program.
I built the entire project with the guidance of my professor, who helped me address any bug-related issues.
Flip is an online platform built for generating a series of images ideal for new compositions such as mood boards, collages, and other projects.
Due to its short-term nature, the project prioritized design and development over research and ideation. I began with some initial brainstorming, drawing inspiration from existing platforms, and swiftly moved on to the design phase.
How might we find online mixed media images quickly for unique creative works?
Idea Generation
As someone that creates digital collages as a hobby, I always found it difficult looking for mixed media images that are open source. There are many websites that have a large library of open source images but getting a collection of those images from various sources for a mix of styles is usually time consuming. This is what sparked the idea to create flip.
Inspiration
In thinking about how the platform would work, I was inspired by a website called coolors.co which uses a lock functionality to generate a set of colours. In developing Flip, my goal was to enable users to lock their preferred images, and with a simple keystroke, generate new ones. By utilizing images from various websites, Flip's search results offer a diverse range of styles, including modern, older, historical, or illustrative.
Branding
To maintain design consistency while working on my prototype, I developed a brand guideline that encompasses a wordmark, color palette, and typography.
Page Elements
I created the layout to determine how I wanted each element to be placed and interacted with. I wanted all images to be placed within an asymmetrical grid to play with the scale of each image enabling more creative thinking.
Presentation
To pitch my concept to my professor and classmates, I developed a presentation. This presentation served as a valuable tool for receiving feedback, enabling me to refine my project timeline and ensure that I stayed on track.
Interactions
Using the layout template created, I built the rest of the pages and the interactions between them. The final prototype provided me with detailed specifications on how this design can be brought to code.
Final Prototype
This prototype served as a guideline when moving onto code.
The final website was coded using HTML, CSS, JS, PHP. Additionally the bootstrap and JQuery libraries were used, along with the Unsplash API.
Connecting to Website Images
While the concept initially involved using images from multiple sources, the final website only features images sourced from Unsplash due to the unavailability of open APIs from other providers. To enhance the platform's functionality, a future iteration of the project would involve coding more image sources into the site.
Project Outcome
The website serves as a convenient resource for creatives to gather open-sourced images quickly and easily, without worrying about licensing or legal issues. It can have significant impact on the creative community, freeing up valuable time and resources to focus on the artistic process.
