Rutabagga_User_Interface_Guidelines

Rutabagga Hi-Fidelity Mockups Gude

By Paschalia Nsato

Design Link: https://xd.adobe.com/view/92f35222-8f85-4acd-b486-924544852ced-c7a0/

Concept Rutabagga aims to encourage and teach people to eat seasonal foods and consume more vegan and vegetarian foods to promote sustainability. Also, Rutabagga connects clients with local farmers and smaller groceries stores in the client’s local area.

The logo plays around with the concept of vegetables in a bag. The primary brand color, green, represents the connection to the earth. I chose a bright and colorful palette to emphasize the fun and excitement of creating vegan or vegetarian dishes; just because they are vegetables and fruits doesn’t mean the food must be boring. The app employs a minimalistic modern app design. I used the already defined brand guidelines for Rutabagga. Below are the logo versions utalized in the App design.

Color I used the primary brand color green with white, black, and greys. At one isntance, I used a secondary color pre-defined in the Rutabagga brand guidlines to indicate ratings. Rutabagga color scheme is analogous.

Atoms and Interface Colors

RGB: 115 187 75 CMYK: 59 0 97 0

RGB: 213 250 192 CMYK: 16 0 32 0

RGB: 250 250 250 CMYK: 1 1 1 0

RGB: 255 255 255 CMYK: 0 0 0 0

Typography Colors

RGB: 108 108 112 CMYK: 59 51 46 15

RGB: 0 0 0 CMYK: 75 68 95 0

Images The images I used for the app align with the Rutabbaga pre-defined images assets. All photos are well lit and have to be on a white background to avoid distracting elements and focus on the colorful food.

The food can be isolated or on plates or pans as long as the background color is white.

Typography The app uses the specified brand typefaces: Proxima Nova. Proxima Nova is a versatile sans-serif typeface used as body copy and titles. It works well for screens. For this design, it is the only typeface for body copy and headings.

Heading 1 Proxima Nova Medium 48px #000000

Heading 2 Proxima Nova, Medium 34px #000000

Heading 3 Proxima Nova, Semibold 24 #000000

Heading 4 Proxima Nova, Bold 20px#000000

Heading 5 Proxima Nova, Semi Bold 14#000000

Body Text 1 Proxima Nova Regular 14px #000000, #6c6c70

Body Text 18px Proxima Nova Regular 14px #000000

Grid The design employes a column grid and a modular grid to lay my elements in a page.