Campus Service Project Phase 3:

electricianpathInternet and Web Development

Dec 13, 2013 (3 years and 5 months ago)

53 views

Campus Service Project Phase 3:

Biodiesel Website



Website Functionality:


The purpose of the website is provide with community with information
about biodiesel and the CU biodiesel club. Furthermore, it contains information
about current CU biodiesel events, and serves as an online presence and resource
for the club.


Site Map
:




Splash page



The site will open with a
n

inviting and visually pleasing splash page,
containing easy and intuitive links to the different pages of the website. The links
will be associated with icons, facilitating the website

s use for various type
s of users.
This page will also include a footer filled with contact information, as will every
page of the site.



Biodiesel Info


The layout of this page is a standard template that will be used with each of
the other content specific pages on the sit
e.

Specifically, this page contains
information about diesel
, its creation
,
and
local biodiesel vendors
. This page will
also contain a short animation describing the biodiesel creation processes.


CU Biodiesel


This page also uses the standard page templat
e. Its main function is to
describe the goals and purpose of the club. From there, it can direct the user to
pages about the club’s history and impact at CU, past projects (both locally and
internationally), and information on the club’s mobile biodiesel l
ab “ESTER”.

The
page will also contain a short promotional video segment of members of the club
working on the ESTER Lab.


Contact Information


This page contains contact information for the club. It list’s the club’s
members, along with their position an
d contact information. Short bios of each club
member are included.


Events


The events page contains a live Facebook feed from the club’s Facebook page.
The Facebook page will be used as a portal to organize club events and disseminate
information. User’s

can view the information on the website and additionally RSVP
to event
s through Facebook. This gives the club a simplistic way to organize events
without needing update the website each time a new event is posted.


Specific Technical Details:

The pages w
ill be written in HTML. We are exploring the use of HTML 5
elements to create vector drawings

(specifically the canvas element)
. The standard
page template will be created with a corresponding CSS file to keep the pages
consistent.

The Facebook feed will be obta
ined by using the Facebook
JavaS
cript SDK. It
will be used to grab the event feed information, which
will then be placed in
generated

<
divs
>

that use the pages CSS to keep the theme consistent.

Use of the
Facebook SDK is relatively complicated. Someone will need to be registered as a

Facebook develop. From there a public

aut
hentication

key is created wh
ich will be
used loc
ally by the Facebook SDK. Once F
acebook authenticates
, we will be able to
query the Facebook event feed through the Facebook graph API.







CU BIODIESEL CLUB BRANDING AND STYLE GUIDE

Updated October 2012


I.

BRAND POSITIONING
(
Who are we? Why do we do what we do?)


Mission statement:

CU Biodiesel is a non
-
profit student organization dedicated to advancing the
use and knowledge of biodiesel, a vegetable based and clean
-
burning alternative to
petroleum
diesel
. Our efforts are focused on the University of Colorado at Boulder and the surro
unding
community. We address the commonly held concern that the use of petroleum diesel is done at the
detriment of our health and environment and necessitates a dependence on foreign oil. CU
Biodiesel strives to educate the private and public sectors abou
t the production and implementation
of biodiesel and simultaneously promote it as a renewable and valuable resource.


Core messages

and goals
:



Research
-

ESTER: Environmentally Sustainable Transportation Education and Research
Laboratory. CU Biodiesel’s new processor and mobile research lab, ESTER, is much more
than just
a place

to make biodiesel. As a mobile processor, it will be a resource that we
can b
ring
to events
, schools, and workshops around the state. ESTER can be used at
events as a
working processor

display that can be integrated with fun games and
information for children
and adults
. Not only will this provide an informative and attractive
disp
lay, but it will
help to

boost CU’s image as a leader in biofuels education.



Education



Workshops and Project Yellow Bus. Project Yellow Bus seeks to educate the
private and public sector about
renewable energy
. It aims at educating elementary school
stud
ents about the basics
behind traditional

renewable energy resources, and introduces
Biodiesel as a renewable
and valuable

resource for a sustainable future. The project
targets the promotion of
critical thinking

about substituting traditional nonrenewable
resources for renewable ones.



Community Reach Initiation

-

CU Biodiesel has worked and continues to work with the City
of Boulder and
the University

to switch their fuel of choice to biodiesel. All of the 13 diesel
busses
in CU’s

fleet now run on either 10
0% or 20% biodiesel. The City has made
significant advances

toward a similar change. As a result of these successes and the
corresponding media

attention, countless people have learned about this excellent fuel.


Brand attributes:

>
Informative



>
Accessible


>
Friendly

> Sustainable

> Forward
-
thinking











II.

BRAND SIGNATURE




White Background Logo






















Black Background Logo























III.

TYPOGRAPHY


Our typeface is Franklin G
othic, a simple yet modern sans
serif that is clean and
visually appealing as well as easy to read.

All updates made to the website and any
published marketing or informational materials should utilize this font.


ABCDEFGHIJKLMNOPQRSTUVWXYZ

Abcdefghijklmnopqrstuvwxyz

0123456789

!?@&$”


Franklin Gothic Book Regular

Franklin Gothic Book Italic

Franklin Gothic Book Bold

Franklin Gothic Medium

Franklin Gothic Medium Bold


IV.

COLOR SPECIFICATIONS


Alterations to the website or any published marketing

or informational materials should
adhere to the color scheme below. Text can be written in the same grey color as the
logo (see Section II), black, or white, depending on which choice fits appropriately with
the background color.




















V.

VIDEO GUIDELINES


Video produced for or by
the CU Biodiesel Club
should follow consistent visual
elements (
colors
, type, etc.) a
s laid out in these guidelines.


Type in video should be
Franklin Gothic and the video should include the logo either at
the
beginning or end of the video.



VI.

SOCIAL MEDIA MARKETING


Any updates of content or visual attributes to the club’s Facebook page should follow
consistent stylistic elements as laid out in these guidelines (see Section I for specifics).


When writing new co
ntent for social media, be sure to keep the mission statement in
mind. The tone of the content should be consistent with the club’s brand attributes and
the purpose should be relevant to club’s core messages and goals.






Prototype Templates:


Splash Page

This splash page serves to invite the user into the CU Biodiesel website. The
black circles represent where icons will be placed in the final splash page. There will
be page descriptions

ne
xt to each of the icons. The

icon design decision was made to
acco
mmodate users of all ages. The biodiesel club works with local schools to
teach
students about renewable resources, recycling, and biofuel. The club has created
extensive curriculums for students from kindergarten through fifth grade, which are
targeted at

specific state requirements. W
e want t
he site to be

easily accessible for
those students.

When the user rolls over one of the rays
it lights up as shown by the ray on
the left hand side of the screen. To move from page to page the user may clic
k
anywhere in the ray.

The CU biodiesel logo will be placed in the center of screen to draw attention
to the club.




Content Page Templates

Template Design 1



The template designs were created to be consistent with the splash page. We
want them to be flexible enough to be used for various types of content. The
navigation will utilize some variety of horizontal tab system. We will use the same
icons for each of t
he pages that
were first shown on the splash page. The current
page will be highlighted in the same manner that the rays were highlighted in the
splash page.


This template attempts to be consistent with the splash page by using the
same sun theme within
the page title.


The content section is organized in a table fashion where each block of
information can include a small photo or icon if desired.


The page footer will allow the user to quickly view useful information, like
contact information.



Template

Design 2


This design is similar to the previous design, but the tabs in the site
navigation bar are a darker green color. This may be desirable if the surrounding
background color is very light.

Template Design 3


This template attempts to be more cons
istent with the splash page theme.
The sun remains a golden color. However, it is slightly harder to create a title
without the image looking too complex to easily read.

Our clients said that they liked
this design the most.
So we

re
going t
o continue experimenting to make the page
title

pop


a little bit better.





Logos

Logo Idea 1



The idea behind this log
o

was to
create something simple and memorable
. The logo
can be used on dark and light backgrounds. It

s also professional enough to be
placed on letter heads.



Logo Idea 2



This logo focused more the premise of biodiesel being a sustainable resource. After
speaking with the cl
ients, they liked this style design the most. However, they were
quick to point out that corn is used to create ethanol (gasoline), not biodiesel.



Logo Idea 3


This logo expands on the previous idea; however, it replaces the corn with a soy
plant which does have the pot
ential to create biodiesel. The client said that they
liked this logo, but they were curious if they could replace the soy plant with
f
rench
-
fries.

W
e

re
continuing to work with this idea.



Logo Idea 4


This is the final of the proposed logos that were present
ed to the client.