Salad Is Beautiful

Keywords: Food, Synesthesia (Color and Taste), Web, Branding, Data Visualization, Infographic,  Javascript, Illustration

 

“Salad Is Beautiful” is one of my projects for Boot Camp final.

 

Design Process

Idea Sketch

IMG_5320

Domain Mapping to Classify ingredients.

Screen Shot 2015-11-17 at 5.59.25 PM


 

Website Design

top

 

Ingredients – Data Visualization

(If you hover each color potion, you can see the name of the ingredient.)

bottom

 

 

Illustration

Screen Shot 2015-11-17 at 5.59.14 PM

Branding

Screen Shot 2015-11-17 at 5.59.03 PM

 

Make Your DIY Salad!

JQuary UI and Instagram API

: Make your DIY salads by dragging each ingredient!

Screen Shot 2015-10-05 at 5.22.08 AMScreen Shot 2015-10-05 at 5.22.05 AM

 

 

 

 

[Design] Idea sketch for Final

A Mobile Web (or App) for Salad Recipe. <- click to view slides

I’ve been interested in healthy eating for well-being life and I enjoy making salads by myself.

For this design project, I would like to combine a kind of data visualization (infographic) with a mobile web. So, I want to make a mobile web that shows graphic salad recipes by visualizing ingredients, nutritions.

By considering user experience, the UX & UI design will be simple, connecting with each recipe and dividing by major ingredients.

IMG_5320

IMG_5322

below is a brief class of ingredients for arraying the recipes.

– Fruit/vegi/dressing/beef,fish/cheese/nuts,grain/ETC

-> I’m gonna make each web page of this elements.

Salad+Ingredients

[Dork Shop] Data Visualizaiton

Ex) Pichslam, Tumblr Network

Tool: D3.jsSigma.js /Gephi

Getting the data

Data sets (json, csv, tsv, xml, geoJSON, kml, etc.)

APIs

WEB Scraping.

Kimono

Web Scraper –Scrapy / Apache Nutch / Scrape.it / Beautiful Soup (Phython)

sheetsee.js

Maps (for web) : cartoDB / leaflet /mapbox

[CODE]

http://codeshare.io/kfHFV