If I’m marinating in three separate webpages on a single topic, then I’m going all in with one of my favorite subjects: Persian food. The nature of the cuisine – central to my day-to-day and heritage – lends itself to a wide variety of content, both visually and editorially.
Panel I
On the first panel, I wanted to try crafting my own branding and created the wordmark at the header with Photoshop. I chose the radish red, olive green and egglant color palette to offer continuity with the food images. My goal with the first panel was to take the audience on a journey through the content, first giving them some inspiration and background before heading into meal ideas, local hotspots, and additional information. I leaned heavily on Bootstrap componets, particularly the gallery, grid and card features. I tried to make the site as realistic as possible by linking out to great restaurants and other points of interest in the gallery and cards.
I was most proud of figuring out how to add a section scroll feature to the navbar on my own. It took a good bit of Googling, but it works!
Panel II
I chose the “Delicious” template from Bootstrap Made for the second panel because it offered a wide range of responsive components and focus on food and communicating to diners. While I kept it simple by duping the content over, the format pushed me to add more content including the benefits of Persian food, more recipe ideas and a newsletter opportunity.
Panel II
For panel three, I really tried to make it my own by overhauling the style with my own logo, typography and color palette. I also modified the layout, moving sections around and changing CSS stylings, to not only showcase the custom content but to, hopefully, create more visual balance. For example, I used a radial gradient to make the sections on recipe ideas and continuing “the voyage” more anchored. It did take me awhile to adapt all the components here via the “inspect” strategy, particularly the buttons and other intricate details, but I think the overall appearance is distinctive and supports the content in a meaningful way.
