EcoGeek Handover Doc

EcoGeek Website Outline

This document will outline the content of EcoGeek’s new website. Details will include a list of pages, templates and their functionality.

1. Overview:

The EcoGeek site will contain the following pages and support the following brows- ers.

1.1 Pages

Note: A “Page” is a single page of content that is not repeated anywhere else on the site.

Pages for this site will be: • Home page • About Us • Forum (and adjouring message space) • Careers

• Agriculture Hub • Design Hub • Pollution Hub • Technology Hub • Recycling Hub

• Energy Hub • Search Results • Globe Page

1.2 Templates

Note: A “Template” is similar to a page but acts as the underlying structure for all related content.

Templates for this site will be:  

• “Main Page” Template

• “Hub” Template

• “Expanded Main Article” Template

• “Globe ” Template

• “Search” Template

• “Expanded Hub Article” Template •

“Side Bar” Template

2. Browser Support

Since the users will most likely be a proficent in technology, the website will be available on the most current version, as well as it’s predecessors (where applicable) of the 5 most widely used websites.

Supported Browsers: • Microsoft Internet Explorer • Mozilla Firefox • Google Chrome • Apple Safari • Opera

Note: Due to the way Google and Apple develop and release their software, there is no need to support anything older than the current version, as there is no practical way not to upgrade, thus we can safely assume that the majority of users are on the latest version possible.

3. EcoGeek Content Outline 3.1 Homepage

Images will load with the articles, when clicking on them, it will take you to an expanded veiw of that article.

Menu Sub-Headings ) located in toolbar. The font will turn read when it is hovered over, and stay red when on that specific page.

Articles. The user can scroll down though a moving bar of articles (the 2 largest vertically stacked modules to the left of the screen).

Popular articles. This is a list of the agrigated most popluar articles by view count on ecogeek that week. Scroll down to see more.

Two Highest rated articles. The two highest rated articles in upper center right of the screen. These are static, and when clicked on will take you to an expanded view of that article in it’s related hub

3.1.2 Ecogeek Logo Will load ‘appear’ with the toolbar layer of the design.

3.2.2 Displaying Search Results

Upon writing the search word in the appropriate box up the top, the user can choose weather to search using the traditional methods, which would take him to a listed result of outcomes, in the expanded view template. To search using the globe, will take the user to the globe page, where draging your mouse over the globe will cause it rotate in the desired direction. The symbol that signify which catagory the story related to will appear and disappear in perspective with where it is located on the grid.

3.2.4 Thumbnail Images

All thumbnail images are the same size, with it’s edges hidden behind the module cutout, and given ‘multiply’ transparency, to give it a green undertone that related it to the rest of the website.

4.2 Video Template

The Video box, located on the main screen, will ahve embedded in it the latest episode of CrashCourse [SciShow], located on youtube. Clicking to over sized ‘play’ symbol will start the video, and clicking on either of the two youtube logos will automatically re-direct you to the youtube channel.

5.1

Forum Template.

The forum will be hosted directly on ecogeek, where sign in is nessesary to post, but not to view. Users can interact by sending personal messages, posted in each general discussion, or commenting in the topic related directly to each indivdual post, where the comments from each article will be also located.

EcoGeek Redesign

The original ecogeek.org was a template, blog-style environmental news website. It offered very little in terms of unique design and user interactivity. The main page was a scroll down reel of news items, scattered with menu boxes and a jumble of outside links. The colour scheme was an un-varied lime green and white, in a template that looked like it hadn’t been changed for a few years, which is not ideal for a website that focuses on technological advancement.

For this redesign I have added some features, and tweaked others.

Crash Course

I have added a directly embedded the latest episode of Crash Course which is an educational science channel YouTube, created by Hank Green, who is the webmaster of ecogeek.org.
 
Forum Discussion

With a website that regularly features recent comments on the original, and has such a current news topic, I thought it would be beneficial to add a discussion forum to the website, where issues brought up in the news can be debated.

More Articles

Presently, ecogeek.org is a very linear and scroll based news site. I propose having two articles visible on the first loading of the page, with more articles available by scrolling downwards. The reader can then click on the heading of any item he wishes to read more of for an expanded version. I have also added four quick links for the most popular articles of the week.

Hubs of Related Information 

Each category now has it’s own page dedicated to all the information pertaining to its related tags. The main article (site chosen for first load, reader can then browse and interchange it) for that topic will take the focus, with comments, discussions surrounding it. Popular articles, links and search menus also live here.

Interactive Globe

This is a new search feature I have added to the website. Each news story is assigned a location from where it originated, and it’s topic group. This information is then represented by an info-graphic atop of a rotating globe. When you click on a symbol, a  condensed segment of the article will be linked in the side. Clicking on the story will expand it to take up the entire side column, which can then be retracted by clicking an ‘x’.
The Globe feature can be found next to the magnifying glass in the search bar.

Consolidated Categories  

Originally located well down the page and out of site, the list of over 30 different categories was slightly redundant, with so many over lapping. I have reduced these down to six key sub-groups of sustainability news. For anything more specific, the search bar can be used. 

Jobs

I have taken the box for jobs available in the environmental field, as I don’t feel it is important enough to have on the main page. It is now located on a new page, Careers. 

Modulated the pages

This is to ease with the readability of the article, as the main purpose of the site is to convey information. By putting it all in boxes, each segment in contained and doesn’t bleed into another space.

Colour Pallete

 I have chosen a variety of green and beige colours to draw from as they are often associated with sustainability and will assist in getting the ‘eco’ message across to the audience 

League Gothic

This is a strong title font, great for headlines. This is because it is heavy and close set, which creates a lot of grey and darkness to draw the eye. It’s modern lines and straight forward design assist in it’s legibility. 

Helvetica             

I chose Helvetica due to it’s large family which would allow me a lot of flexibility with the body copy of the website. It is also a common font which shouldn’t cause any issues in development.

Katie Catchpole  [094214]  AUT Graphic Design 2012