SKILLS
INTERACTIVE
GRAPHIC DESIGN
PHOTOGRAPHY
Sandwiches are one of the most popular foods to eat around the world. This webpage is a more exciting and interactive way to learn more about sandwiches and the reuben sandwich specifically. A scrollable webpage that includes nutrient facts about each ingredient in the sandwich, facts about a sandwich itself, a location of the best reuben sandwich in the world and a “make it yourself” video. Each section has an element of interest and some interactivity throughout.
The project at hand used several skills to pull together an interactive webpage. Design, illustrations, html/css, and JavaScript were main components of this sandwich webpage. The purpose of this project was to give a different perspective on learning about a given topic. You can find information on the reuben sandwich and the ingredients in the sandwich on this webpage. Sandwich facts are showcased through interactive svg animations. A tutorial video on how to make your own reuben is shown using motion graphic techniques to attract the viewer. The project is interesting and eye-catching with all of these different elements and skills.
The objective of this project was to create a fun view on the sandwich of our choosing. A webpage that showcases one of the most popular foods in the world. Choosing the sandwich that would be focused on was somewhat difficult, because I had to think about all of the other design elements that would complement the sandwich I chose. The overall theme that I wanted would make or break the sandwich of choice.
The word rustic popped into my head, and the reuben sandwich seemed to just fit naturally with the theme. Another challenge was the “tasty” video. The video needed just the right amount of balance between creative and informative. Each instruction needed to be clear for the user that may want to try to make the sandwich themselves. Overall, the project came together in a way that everything fit with each other, however, the webpage itself posed some challenges with the interactivity of it. Some sacrifices were made with the original plan, but the webpage had a great outcome.
The sandwich webpage process, like all other projects, started with research, planning, and sketching. I chose a sandwich that I enjoy and started to choose a theme for the webpage. Knowing the sandwich I chose was helpful in creating the wordmark which was designed in Adobe Illustrator. It is best to have reference material when drawing or illustrating anything, so when it was time to draw out the ingredients for the reuben, I made the sandwich and took photography of everything. The photos helped when making the illustrations from scratch. I designed a comp to show the layout of how the webpage would look before coding anything, which is helpful for saving time.
The infographic portion about general sandwich facts was created as an svg that could be animated in JavaScript. The next step was creating the responsive layout for the webpage in html/css. This lead to the point where everything could be placed in and I could start working on the animations. The “Tasty: inspired video was carefully planned out before filming and was edited in Adobe Premiere Pro and Adobe After Effects. The main functionality of the featured section with the illustration of the reuben sandwich displayed, was to be able to hover over the ingredients to see nutritional facts. This functionality makes the user experience more interesting and exciting. The entire webpage displays a large amount of detail and skill in many different ways.
The main task of this project was to design and implement different elements throughout an interactive, exciting, and informative webpage about sandwiches and reubens. From illustrations to JavaScript functions and animations, the project successfully creates a unique interactive experience.
VIEW PROJECT