Farm to Table Herbs

Client project

Adobe XD

Basamiq

Git

Gulp

HTML

JavaScript

Photoshop

Sass

WordPress

In a team of 3, we collaborated to design and develop a custom WordPress website for a fictional business, a local herb farm. The project involved multiple meetings, discussions, wire-framing, development planning, actual development and design process, and site hosting.

This WordPress website is future-proof and has its content, including the products, banner images, and call-to-action buttons, generated from a dynamic source.

Planning Process

We started by creating the wireframes for the project after the initial discovery meeting where we discussed the purpose of the website, target audience, and desired functionalities.

Farm to Table Herbs desktop wireframe for home page Farm to Table Herbs desktop wireframe for product page Farm to Table Herbs desktop wireframe for where to buy page

After the discovery meeting, provided the client with a meeting memo that outlined the topics of discussion in the previous meeting along with a proposal that included wireframes, information architecture, and a simple style tile that provides a general idea of what the website will look like. Upon the acceptance of our proposal and style tile, we began our development plan during which listed out the content by pages, planned out the PHP template parts, custom post types, custom taxonomies, and advanced custom fields.

Farm to Table Herbs proposal document Farm to Table Herbs style tile Farm to Table Herbs development plan with php partial files

Color Palette

#FE5F55

#8CC084

#4F4F4F

We decided to go with green and orange theme for the entire site to represent the relationship of soil and herb. There are lots of green images throughout the site so we chose an orange highlight colour to give an accent. While the logo is green, the buttons and hover effect use the orange colour that is eye-catching yet not distracting from the content of the website.

Design

Farm to Table Herbs desktop home page screenshot Farm to Table Herbs desktop product page screenshot Farm to Table Herbs desktop single product page screenshot Farm to Table Herbs desktop where to buy page screenshot

Tablet

Farm to Table Herbs tablet home page screenshot Farm to Table Herbs tablet related products screenshot Farm to Table Herbs tablet image gallery screenshot Farm to Table Herbs tablet CTA banner screenshot

Mobile

Farm to Table Herbs mobile home page screenshot
Farm to Table Herbs mobile home page screenshot
Farm to Table Herbs mobile hamburger menu screenshot
Farm to Table Herbs mobile product image screenshot
Farm to Table Herbs mobile map screenshot
Farm to Table Herbs mobile contact form screenshot