top of page
CookSim

cooksim

web application ui/ux

what is CookSim?

CookSim is a game-based web application developed for people who want to learn how to cook. I created this project as a cooking simulator where users can log in as an aspiring chef in a virtual city and cook food in real life to complete orders from virtual customers. This system lets users learn how to cook in a fun and interactive way.

how was CookSim developed?

The front end of this application was developed using HTML, CSS and JavaScript/jQuery, with a Bootstrap framework. The backend was developed using PHP. UI elements such as the city map, the logo, and food icons were developed with Adobe Illustrator/Photoshop.

  1. CookSim Landing Page
  2. User Interaction

Click the right arrow for gif.

  1. Uptown Card
  2. Orleans Square Card
  3. Chinatown Card
  4. Little Italy Card
  5. Market Square Card
  6. Bed N' Breakfast Card
  1. wonton.png
  2. trophy.png
  3. spaghetti.png
  4. pizza.png
  5. oatmeal.png
  6. pancakes.png
  7. noodles.png
  8. menudo.png
  9. locked.png
  10. jumbalaya.png
  11. gumbo.png
  12. friedRice.png
  13. enchiladas.png
  14. crawfish.png
  15. egg.png
  16. chickenAlfredo.png
  17. brownies.png
  18. cake.png
  19. chalupa.png
  20. applePie.png

firenote

web & mobile application ui/ux

Firenote

what is Firenote?

Firenote is a web app that I designed and programmed to be an intuitive, aesthetic productivity tool. It allows the user to create and edit virtual sticky notes every time they open a new tab, by downloading the Firenote Chrome Extension from the Google Chrome Web Store.  

demoGif.gif

UX design

At this stage, Firenote is purely a web application. In the future, I would like to create a mobile app that can sync with the web version of this app through Google. I constructed a wireframe of my vision of the UX of this mobile app using Adobe Illustrator.

Firenote UX_E-Commerce.png
Firenote UX_Title + Photo Feed.png
Firenote UX_Open New.png
Firenote UX_Photos Feed.png
Firenote UX_Profile.png
Firenote UX_E-Commerce Launch.png
Firenote UX_Select Size-Color.png
Firenote UX_Open New with Comments.png
Firenote UX_Text Feed.png
Firenote UX_News.png

UX design wireframe

Firenote Wireframe-02.png
sky

sky

  1. Day UI
  2. Dusk UI
  3. Night UI

what is sky?

sky is a simple web application that can be used to view the weather in any city around the world. It uses a weather API to gather weather data, and provides artistic weather visualization by updating the city icon depending on the weather conditions and time of day in that city.

 

This project was mostly an exploration of how I could combine graphic design with programming to create an application that was both aesthetic and useful. I used Adobe Illustrator to design the UI elements, and HTML, JavaScript and a Bootstrap framework to create the rest of the site.

Owl Sprite

owl sprite

After being struck by lightning, a tree comes to life and escapes into the woods consumed by existential dread. Now the bird that lived in that tree must save their own home. This asymmetric 2.5-D multiplayer game pins one tree against it's own inhabitant. As a newly sentient being, end your short existence by crashing into thorns scattered around the forest. As the bird, prevent your home's destruction by continually patching it up until it tires out and possibly gain a new friend.

Adobe Photoshop and Wacom tablet. Created as part of the Global Game Jam 2020 at UT Austin.

Download link: https://globalgamejam.org/2020/games/mourning-wood-2

  1. Game Menu
  2. In Game
  1. Front I
  2. Back I
  3. Side I
  4. Side Throw I
  5. Front Throw I
  6. Front II
  7. Back II
  8. Side II
  9. Side Throw II
  10. Front Throw II

A perpetually sobbing owl desperately trying to save a suddenly sentient tree from self-destruction. It has the in-game ability to hurl planks of wood at the tree to heal it from its attempts at self-harm.

bottom of page