static image to responsive restaurant
Part of the Visual Communications’ curriculum at DelTech is web graphics. This class is an introduction to front-end development where you learn to utilize HTML and CSS to create a simple website.
The second project of my class was to create a one-page, responsive website for a pretend restaurant. I was assigned a breakfast café called RISE. With a bit of digging, I learned the menu was taken from a southern Delaware vegan-friendly café. I used their address to create a proper point of context for the food, audience, and the <iframe> Google map.
Meat Head was created with the same assets: 1) logo, motto, owner’s image. All body copy used was written by me. The initial draft was created in ChatGPT, which I gutted and reworked until it had the flow I wanted.
The images were taken from Adobe Stock, and the responsive “down” button is a GIF created in Photoshop; a skill I brought into my RISE assets.
The colors were pulled from Sanzo Wada’s (1883-1967) Color Combination book; possibly Volume II.
Linked above, via the mockup, you’ll find the logo is an animated GIF, which could have been done via CSS coding, but I wanted to challenge myself to use Photoshop in a different way. The Call-to-Action on the hero is actually an animated GIF created in After Effects. The file size is a bit too large for it to properly function, so there is still more to learn about creating web-friendly animated assets.
I look forward to expanding on these skills as I take the first steps into the professional world.