Abue (WIP)
description
Abue is a recipe catalog and shopping planner based on my Mexican grandmother's recipes. It was programmed using HTML, CSS, PHP, and SQL. I built it from the ground up, which means I used no libraries or references aside from a set of icons used for the buttons. This page will cover the planning, asset creation, and mockups for this website. To see the associated code, I have attached my GitHub at the bottom, until I am able to host it within the website itself.
It was programmed using HTML, CSS, PHP, and SQL. I built it from the ground up, which means I used no libraries or references aside from the button icons. This page will cover the planning, asset creation, and mockups for this website. To see the associated code, I have attached my GitHub at the bottom, until I am able to host it within the website itself.
Abue's code is accessible through a GitHub link at the bottom, until I am able to host a version of it here within this website.
logo
This is the logo for Abue. I made it using vectors in Adobe Illustrator, with the half sun I associate with Mexican culture and food. Its handwritten letters call to the practical and handmade nature of these recipes, which makes me smile.
Colors, fonts, sizes
These are the style tiles I made in Adobe Photoshop. I used these to plan the look of the website as I decided on things like color schemes and fonts. The left tile is the look I finally decided on, because the warm colors and off-white background reminded me of paper and warm weather fitting for the physical and emotional warmth a home cooked meal brings. I plan to add a “dark mode” using the right tile one day.
portrait
This is my grandmother (Abue). I made her portrait using vectors in Adobe Illustrator. I knew when I made this website for her recipes that she should be front and center on the home page.
Prototype
These are mock-ups created using Adobe Photoshop. At this stage in the project, the code still has many placeholder images and text, but most of the functionality is there, and the layout is complete.
There are two key features to this website. The first is its functionality as a shopping planner. One of my least favorite parts about recipe hunting is scaling the ingredient quantities and building a shopping list, but with a database of ingredients, Abue can do the heavy lifting. Users need only specify servings and download the generated shopping list.
The second key feature is that all the recipes are tagged based on common dietary restrictions and allergens (eg: vegetarian, dairy free). I believe websites should be simple to use and inclusive, and Abue is for everyone.
