Visual System Style Guidelines Charles Lorell - Visual Communication 508 A / Autumn 2020
About The Client “Tilth Alliance works in community with Washington farmers, gardeners and eaters to build a sustainable, healthy and equitable food future.” - tilth Alliance.
Purpose / Mission The goal of this company is to create a community where members build a relationship between themselves and natural resources. Protecting the environment and building solutions to protect some of the most basic human needs like water and our surrounding environment.
Audiences • Farming communities • People growing their own food • Farmers markets • Community dinners (Senior meals)
[2]
Communication Goal Tilth Alliance is a place where users learn about: Earth: to teach users to be conscious of building a healthy environment. Farming Providing Washington’s farming community with resources to better educate them about farming. Garden: Creating a stronger connection to the land. The idea is to teach people how to grow their own food. Market: Helping citizens find the right food that is beneficial to them. Cooking: Helping others to understand the benefit of cooking and nutrition through class events and youth programs.
[3]
LOGO Direction: Circle shape with text centered in the circular shape.
Concept: The initial design idea consists of combining farm field rounds with natural earth contours and typography to create the logo.
Color: The logo will use the main “Logo Green 1� color from the mood board.
Geometry: Combining a circle with overlapping text to create the main geometry of the logo. [4]
Farm Fields
Typography
Tilth Alliance Tilth Alliance
[5]
REFINED MOOD BOARD Concept: The concept is about creating a layering effect that represents the mission statements of the Tilth Alliance website — earth, farming, market, water quality, and cooking. It is represented in an organic layer effect on the content/images that will be displayed.
Direction: The initial design idea consists of a 16 column grid. All text is aligned with the grid to create a sense of order. The organic geometry is not necessarily aligned with the grid, but I tried to align it as best I could.
Images: The images or color background will be arranged in a dynamic/organic way, displaying contours to create a sense of layering.
Color: The idea in terms of color will be to create a monochromatic color palette composition.
[6]
[7]
DEFINED GRID SYSTEM Direction: I decided to move with the organic geometry and a 16 grid system to allow for more freedom with the organic geometry. In terms of the other channel such as mobile design, I restructured the layout for mobile as the selected images did not scale correctly from the web into a mobile application. See images of both channels on the following pages.
[8]
TYPOGRAPHY
[9]
COLOR Direction: The selected color created a monochromatic color palette that will mimic some of the colors of nature. The existing color of the site is using some brown color and blue that may not necessarily align with their statement. So I chose these green shades to emphasize nature as the most prominent aspect of the site.
[10]
Green 1
Black
Gray 1
HEX: #A3B628
HEX: #000000
HEX: #AEB0B0
RGB 163 / 182 / 40
RGB 0 / 0 / 0
RGB 174 / 176 / 176
CMYK 42 / 14 / 100 / 0
CMYK 75 / 68 / 67 / 90
CMYK 33 / 25 / 26 / 0
Gray 2
Green 2
Green 3
Green 4
HEX: #929395
HEX: #4E6926
HEX: #44641D
HEX: #779449
RGB 146 / 147 / 149
RGB 78 / 105 / 38
RGB 68 / 100 / 29
RGB 119 / 148 / 73
CMYK 45 / 37 / 36 / 2
CMYK 69 / 38 / 100 / 27
CMYK 73 / 39 / 100 / 30
CMYK 58 / 26 / 90 / 7
[11]
IMAGERY Direction: I selected images that will align with the Tilth Alliance mission statement. Earth, farming, garden, market and cooking. In terms of color, these images will create a contrast between the selected green versus the red and orange from the selected images.
[12]
[13]
APPLIED SYSTEM: WEBSITE & MOBILE Solution: Taking a closer look at the existing site, you can see a less attactive color palette and how text-heavy the site is. With this design, everything is aggregated and displayed to users in a single landing page, but finding the most relevant content to select at any given time may still be challenging for users. During the quarter, I created multiple iterations for my client. based on the critiques, feedback, and recommendations from the professor and other piers, I decided to go with an organic geometry for the landing page. Users can find more information below the fold of the site. Allowing for more white spaces and images displaying the main mission statement of the site. In addition, I designed another 5 sub-pages where I divided the site to minimize the text. I redesigned the landing page and additional pages to be more visually appealing and engaging to the users. This will help users to engage with the site and make it more likely to return to use the site again in the future.
[14]
Below the fold
[15]
[16]
[17]
[18]
[19]
[20]
[21]
APPLIED SYSTEM: POSTERS
[22]
Thank you!
[23]