The Vegan Platypus Style Guide

Overview

Site Purpose

My website is for college and young adults who are trying to embrace the Whole food plant based lifestyle, but dont know where to start. I had no idea where to start when I began so I wanted others to have some help and a little mor information than I did.

Target Audience

College students and young adults between the age of 18 and 26. I am apealing more to women in that age group and they can be single or married. I am looking for those living in the united states since I know what kind of food they can get hold of easily.

Layout

Sitemap

The Vegan Platypus Sitemap image

Wireframes

This is the home page wireframe at full size.

The Vegan Platypus Wireframe 2 image

This is the content page wireframe at full size.

The Vegan Platypus Wireframe 1 image

Photoshop Design

Download the The Vegan Platypus Photoshop design file

Branding

Website Logo-DRAFT

The Vegan Platypus Logo image

Color Palette

I chose the colors I did because they are a rich group, are differnt from eachother, and they cordinate with the good that I have chosen for the logo.
I know that the logo is just a draft but I have to have colors in it. I shoul dhave thought a little ahead abot making a logo for the blog. Some times I dont see why a blog needs a logo but its ok.
The colors will be used in heading and through out the page.

MAXIMUM BLUE GREEN

#35CEC4
53, 206, 196

MEAT BROWN

#E0CA3C
224, 202, 60

DEEP KOAMARU

#2F3061
47, 48, 97

GIANTS ORANGE

#F26419
242, 100, 25

Typography

I have chosen to use Raleway and Nanum Pen Script for my site. They are contrasting. One is a cursive font that will be used for headings, and the other is a sans serif font that will be used ffor the body. I prefer to use san serif fonts because they area easier to read for the body and then having a fun or more noticable font for the header is the best.

Heading Font

ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
1234567890!@#$%^&*()_+

Sample Heading

Body Copy Font

ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
1234567890!@#$%^&*()_+

Lorem ipsum nonsed eicillabore essum fugit lantisit, si nis eictia num fugiam et quatquis resto eossitem quunt quae sit dolupis maio omnimo il id maio bea ipid que conseque volorem. Et facidebit vel ma doluptasitis num, ullandebit hicto beaquos tiumquis postrum cori odit eosam quiatur? Volo quid minvel earuptatem quiatur?

Mod qui quunturiam idenderro ma et ex ex ex exerum faci repel molut evelign amenduciis moloreperum qui nullupt ustrumet, sequi a pre non net is dia comnimusant isque voleseque eatur simpori beruptae quam fugit eostios quasi nulpa quatur molorero quam eventio ma venis quideri atiaturione volupiscia sime denestis et hil magnatem aliquundella cusanihit fuga. Pienia dolo tem voluptassi volor as voluptae nulla sed maximincium sapelen tiatqui busapernatus aspis as aborioreic tet recta volessu ndelit hil is explame niminve ratur? Mus andebis si adipsamus ad moluptiae cum este verupid es sequam veri tem sequi re volum doluptatque veriorepudis et, tetum as porem et que sim natiis doluptatures et, sam rehent alicipis suntio conestio ipsandam que prem idi quiasped mod maximod iatium ex et quassimin nonempo reperisci te nonsedit ut auta volorisque paribus.

Navigation

Main Navigation

Secondary Navigation

HTML Elements

Headings

h1

h2

h3

h4

h5
h6

Lists

Unordered List

Ordered List- on page it starts at 1... not working here and I don't know why.

  1. Item 1
  2. Item 2
  3. Item 3

Links-not actually used in my page. Only used links in the navs

Link style 1
Link style 2

Paragraphs

Lia sitio blabore ruptatium, to dolorum erum siniscia cor serum sinum solupti aecepe dolupta quiaturion exerum quasi ut et eatemolorem fugit, adistis ab in et dolectem venda custisint occabor esequas core mod est, anditium everes as idundae rferferferi qui re dit eaquo veliquia qui totatiam denis iniscii squatur?

Ant aliquias alis es ma proribus. Solest, officiendic tem eatibeatium re voluptas es diae eate a eostrume nis il erum facit et ex est, ipsae cum simodi tet quos ma volupta aut latur, et quamus nobis netur seritius excero voloratuscia essequaspis sequo cus, everum nissit et fugiaeperor acepedit quatiam et eum volo dicaeribus dest lab illiqua temporrum, que quam que perovidus, voluptatur, officto doluptata nempore icipsapid eatas es eum quiaspis earum que offic tem fugita voluptatinis quis as audigen derferf erition sectasitia solupta nam net quatur andis del ium re enihit aut apelist et es milit quaes ulles expliquunt volorum eictium quia iur, nis dit asped estiatem.

Figure & Figcaption

Figure image
This is the figcaption. Background colros will change but this is the look.

References

Links to Web Design Examples

Links to images, textures, or other borrowed assets

All of the images that I am borrowing from other sources is listed below. All of ther images are mine.