Note: This is a Heroku app, so it will take a while to load.
In my advanced information design class, we learned how to code front-end code within a model view controller (MVC) specifically Ruby on Rails. We followed tutorials for creating the app and then we redesigned the application using HTML and CSS.
My Design
Adaptability/Consistency: This issue involves the ability of the applications design to adjust with the user. I noticed this problem while testing the application myself. Initially in the application, if the user entered a long description of their recipe, the recipe box on the home page would break structure and the text would push up over the image. The main challenge was figuring out how to fix this.
I followed the instructions in the videos from my professor to install Ruby on Rails and create the recipe application. Following these videos took up the majority of the time spent on this short project and was the main focus, because I was learning a completely new software while using new tools including GitHub. After completing the application and its design, I followed additional tutorial videos to upload the application to Heroku and connect it to Amazon Web Services.
The original recipe app, after I initially created it, was bare bones. The limited design of the application was strictly for getting the app up and running. The original app's design is pictured below.
Original Home
Original Individual Recipe
In order to begin improving the design, I brainstormed different options. I decided to keep the design of this recipe application minimal as I knew I would not have as much time to create it and I was still learning how to implement HTML and CSS within Ruby on Rails.
For the home page, I decided to add a hero image and include the recipes underneath.
For the individual recipe page, I decided to use the image the user uploaded as a background image for the title. I listed out the recipe underneath and included the picture the user uploaded at the bottom.
Individual Page Sketch
After sketching out the design, I started implementing it by changing the HTML and CSS of the application.
This section of code to the right is how I made the recipe boxes on the home page change based on the width of the recipe description text. I used Ruby code within the HTML to call the recipes and change the length of the recipe boxes.
Screenshot of Code
Here are some screenshots of the final design.
Note: This is a Heroku app, so it will take a while to load.
Individual Recipe Page
Home Page - Recipe Boxes
