ATL Foodie

Tools

Figma

Role

UI Designer

Timeline

January - May 2023

Deliverables

Prototype

Project Overview

I created an interactive food blog that highlights local cuisines in metro Atlanta and surroundings areas. The prototype includes five screens with animations and utilizes the Principles of Design.

This project is a Figma redesign of my original coded website.

Goals

  • Utilize the Principles of Design to create a digital food blog website
  • Incorporate animations to create an interactive site that is fun, intuitive, and easy to navigate
  • Present restaurant and food content in a clear way for users to understand and explore

Process

For this project, I created five screens. The screens include a banner advertisement (for digital marketing), landing page, ‘Home’, ‘Restaurants’, and ‘Kinnotori Ramen Bar’ pages. My process was to create the experience of a user discovering the ATL Foodie blog through a digital platform or social media.

Research

Before starting on my prototype, I researched food blogs with unique designs and fun copywrite. One blog that stood out to me was Thrillist. This blog caters content to many popular cities, including ATL. This website was the basis for my design and provided ideas for the prototype layout and function.

Thrillist Food Blog

Design Implementation

The design idea for ATL Foodie was to create a fun and unique blog experience with lots of delicious food imagery and quirky icons and patterns. I wanted the blog to represent ATL’s melting pot experience composed of diverse cultures and cuisines. This blog was made for local residents, travelers, and foodies alike.

Logo

I created a fried chicken as the main logo and icon design. ATL is known for its famous chicken wings and fun sauce flavors. I wanted to play on that food item by making it a literal icon for my blog. It emphasize to users that this is a ATL catered blog for foodies looking to pay the city a visit.

Primary Logo
Seat Variables

Color Palette

For the color palette, I was inspired by the colors used in my fried chicken logo. I wanted to dabble with a neutral monochromatic color palette for the website. I also relied heavily on the colors white and black. These colors complement the main theme of orange and brown hues in a clean and minimalist way.

Pattern

I created a pattern with a combination of hand-drawn utensils and the fried chicken icon. It was designed to bring in food elements and complement the playful nature of the brand.

Typeface

The main logo typeface was created using Modak, with a font weight of regular. For all headers, sub headers, and body text the typeface used was Quicksand, using font weights ranging from light, regular, medium, semibold, and bold, with font sizes ranging from 12 to 40px. I utilized a curved typeface to continue the fun atmosphere of the website without compromising readability.

Layout

For the layout, I utilized a 45px grid to keep my content aligned, organized, and consistent across all pages. I also kept the overall design modern and minimalist, along with fun and quirky accents, to keep the content easy to read and understand (to also keep it scannable for quick reads).

Final Prototype

Github Website: Front-End Development

Check out the original website made with Github Pages!

Retrospective

ATL Foodie helped me develop my skills in brand design, including the creation of a complete style guide. It was challenging and rewarding to create patterns, UI elements, and icons, and select imagery and colors for the blog. It was interesting to research landing pages and banner advertisements, as this was my first time designing for those dimensions and frames. I created this idea as a way to showcase the amazing food and restaurant business owners that exist in Atlanta and bring people together through food. Having the chance to bring this project into reality was very special and I can’t wait to see it fully created in the future.