As a first-year Emerging Media grad student and a veteran journalist, I'm excited to learn more about design and user experience. I love to think about new ways to tell big stories.
I enjoyed drawing upon my new Html and CSS skills to build this website for my mom's beekeeping endeavors. The beautiful world of bees and honey gave me a colorful canvas to construct the basics of the web pages, including organizing section containers and incorporating dynamic original photos. I also tapped into what we've been learning in the New Media Design course by using Adobe to curate a color palette off the photos and searching for attractive font pairings.
The subject also gave me a chance to think about the intention of each page, and how the user may navigate through it. I also tried to stretch my skills a bit by setting up floating div containers on the About page. It took a few hours -- ok, days -- of trial and error, but I think the page is much more balanced now. I'm looking forward to building on what I've learned to build more dynamic web pages.
Project TwoIf 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.
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!
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.
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.