The Farm House Cafe and Coffee logo with decorative flourishes in each cornertext The Farm House mobile first site design & Branding Guide three iphone mockup images and three images of the branding and style guide
two iphone mockup images with the farm house cafe and coffee website on them

I was the main designer for The Farm House Cafe And Coffee, a family owned Coffee House and Cafe.

I was hired to design the mobile first-responsive site that enable customers to place orders directly through their site. As well design a branding and style guide for the business, including the logo and any elements needed.

The Hart Family are the owners of The Farm House Cafe and Coffee, they prioritized mobile accessibility for their customers, so I began with a mobile-first design. Additionally, I focused on creating an intuitive order placement platform to streamline the order process.

For the project, I selected the color scheme and typography for The Farm House Cafe And Coffee website, ensuring it could be formatted across all devices.

The design aimed to align with the brand's values and enable order placement through the site.

image from the farm house cafe and coffee website which includes a black cup with coffee in it and text information on ordering the drink on the site

As the Hart Family's sole web designer, I personally oversaw all layout and design decisions for their website, stlye branding guide and provided regular progress updates directly to the Hart's.

The Hart's wonderful business ethic and delicious handcrafted foods and drinks deserved a platform that showcases them to customers, giving them the best chance at success.

Enabling orders for their goods directly through the site allows them to focus on customer service and crafting delicious foods and drinks furthering their commitment to to providing a friendly, cozy, inviting atmosphere where everyone is family.

As always, the design process began by gathering information. I sought to understand The Hart Family's vision for their site and the business goals that needed to be met. The specifics were communicated through a questionnaire.

The Hart Family's responses highlighted a priority on emphasizing their priority to use etically sourced and local goods and sustainable principles of their brand and ensuring customers could easily place orders for their goods.

Given these specifications, I began wire framing, starting with the mobile layout. I ensured the visual hierarchy aligned with The Hart Family's needs by maximizing space for a prominent call-to-action order buttons and displaying large images of-the cozy and inviting atmosphere to draw attention to their aesthetic.

I then progressed to wire framing the desktop version, maintaining an attractive layout and clear visual hierarchy that showcased her chairs effectively.

The paper wireframes were translated into a digital format using Figma. I incorporated The Farm House Cafe And Coffee text and copy to ensure the layout framed their aesthetic's well, making minor adjustments to maintain a clean and cohesive design.

hand drawn paper wire frames
three images of digital low fidelity wireframes
twenty four iphone mockup images with each page of the farm house website on them and decorative stars around the iphone mockups
two pictures of the farm houses figma prototype and paper airplane accent arrows
three images that have multiple images on them from branding and style guide three accent leaf images

First, I needed to choose a color scheme that reflected the friendly, cozy, and enviting atmosphere that the Hart Family wanted for their coffee shop. I selected neutral light AND warm colors to convey a welcoming feeling and a cozy and warm environment, complemented by a rich dark brown to evoke thoughts of the delicious coffee her audience would soon associate with her business.

image of color scheme from branding style guide

Next, I focused on typography to convey the cozy farm house cottage core tone the Hart family wanted for their coffee shop. For the brand name, I chose the 'Cursive' farm house inspired typeface Amsterdam, which exudes the inviting, cozy vibe of a neighborhood coffee shop and complements the name "The Farm House" with its cottage core aesthetic. For headers and titles, I opted for tox typewriter, a typeface that reminds us of simpler times.

image of typography from branding and style guide

With both the color scheme and typography decided, I moved on to the logo, the most identifiable aspect of a brand. I sketched several ideas that connected farm house elements until I settled on a design featuring a weather vane and the date that the Hart family farm was established inside a decorative octagon shape.
I used Canva to design the logo and the different variations of the logo design, as well as different color versions and versions without the octagonal shape, to maximize the design's versatility.

logo images for the farm house cafe and coffee

Next, I applied the style choices from the logo to create a pair of icons representing her business offerings. To best reflect Hart family's intention to serve both coffee and food items, I chose icons that matched and represented the overal theme and asthectic as well as representing the items being offered.

image of page from branding and style guide with iconography images

After completing the iconography, I moved on to creating social media headers to represent the hart family's brand in the digital space. I began by gathering a set of stock images that exemplified the personality and tone established so far. Using these images, along with the chosen typefaces and color schemes, I created several different options for the hart family to use across various social media platforms. All three headers incorporated the cream and dark brown color scheme, maintaining a cozy and inviting atmosphere for their social media pages.

Finally, I compiled all the imagery created for their brand identity into a comprehensive style guide. This guide would serve as a reference for the hart family or any future designers for any additions to the brand's styles and supporting imagery. Using Adobe InDesign, I crafted a custom layout that reflected the brand while being easy to follow. The document detailed the design decisions, standards, and guidelines, including rules for logo and icon usage, as well as the hex, RGB, and CMYK information for the selected color choices.

image from branding and style guide with social media headers

After completing the iconography, I moved on to creating social media headers to represent the hart family's brand in the digital space. I began by gathering a set of stock images that exemplified the personality and tone established so far. Using these images, along with the chosen typefaces and color schemes, I created several different options for the hart family to use across various social media platforms. All three headers incorporated the cream and dark brown color scheme, maintaining a cozy and inviting atmosphere for their social media pages.

Finally, I compiled all the imagery created for their brand identity into a comprehensive style guide. This guide would serve as a reference for the hart family or any future designers for any additions to the brand's styles and supporting imagery. Using Adobe InDesign, I crafted a custom layout that reflected the brand while being easy to follow. The document detailed the design decisions, standards, and guidelines, including rules for logo and icon usage, as well as the hex, RGB, and CMYK information for the selected color choices.

sit conmigo image of ipad and iphone mockup with image of sit conmigo website

Up Next

Sit Conmigo Responsive Website
And Order Platform Design Process

Check It Out