Modular Pattern Elements
Main navigation module
This is a sample of the grainjar main navigation. We used a small dark green navigation bar with a white logo.
Checkout breadcrumb
Breadcrumbs show users their current location relative to the information architecture and enable them to quickly move up to a parent level or previous step.
Sample code <a href = "#"> Information </a>
Author : Clare Huang
Anatomy
- Page link: Directs users to the parent-level page.
- Arrow: shows the order of content.
Product detail page module
This is a sample of the product detail page on the grainjar website. Spacing and interactive elements such as flavour and size selection are important to consider.
best-seller
Whole-grain cereal
$ 25.00 CAD
select flavour
select size
Sample code
<button class = "button"> honey </button>
<button class = "button"> mixed berry </button>
Author : Joanne Kim
Checkout module
This is a sample of the checkout module at grainjar. Forms must be concise and labels must be legible to clearly communicate usage to users.
Guest checkout
Coco-hazelnut cereal
Qty :1
$25.00
- Subtotal
- Tax
- Shipping
-
Subtotal
- $25.00
- $1.25
- Next step
- $26.25
Sample code
<form>
<label for = "email"> Email </label>
<input type = "text" id = "email" name = "email">
</form>
Author : Sophia Wang
Footer
Sample code
< footer >
< div class = "column-1">
<h4> Information </h4>
<p> About </p>
<p> grainjar </p>
<p> Packaging </p>
<p> Free </p>
<p> Our recipes </p>
</div>
</footer>Author : Sophia Wang
Website grid structure
Our grid system is composed of 8 flexible columns with variable gutter sizes: 22 px for the navigation, 44 px between filter options and 66 px between product grid items. The left and right margin are both 125 px from the edge.
Home page grid layout
Logo
Main
Content
Content
Content
Content
Content
Content
Content
Content
Recipes
Author : Joanne Kim