Tumblr (3.0; @ecogeekredesign)http://ecogeekredesign.tumblr.com/<p><strong>EcoGeek Handover Doc</strong></p> <p>EcoGeek Website Outline</p> <p>This document will outline the content of EcoGeek’s new website. Details will include a list of pages, templates and their functionality.</p> <p>1. Overview:</p> <p>The EcoGeek site will contain the following pages and support the following brows- ers.</p> <p>1.1 Pages</p> <p>Note: A “Page” is a single page of content that is not repeated anywhere else on the site.</p> <p>Pages for this site will be: • Home page • About Us • Forum (and adjouring message space) • Careers</p> <p>• Agriculture Hub • Design Hub • Pollution Hub • Technology Hub • Recycling Hub</p> <p>• Energy Hub • Search Results • Globe Page</p> <p>1.2 Templates</p> <p>Note: A “Template” is similar to a page but acts as the underlying structure for all related content.</p> <p>Templates for this site will be:  </p> <p>• “Main Page” Template</p> <p>• “Hub” Template</p> <p>• “Expanded Main Article” Template</p> <p>• “Globe ” Template</p> <p>• “Search” Template</p> <p>• “Expanded Hub Article” Template •</p> <p>“Side Bar” Template</p> <p>2. Browser Support</p> <p>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.</p> <p>Supported Browsers: • Microsoft Internet Explorer • Mozilla Firefox • Google Chrome • Apple Safari • Opera</p> <p>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.</p> <p>3. EcoGeek Content Outline 3.1 Homepage</p> <p>Images will load with the articles, when clicking on them, it will take you to an expanded veiw of that article.</p> <p>Menu Sub-Headings ) located in toolbar. The font will turn read when it is hovered over, and stay red when on that specific page.</p> <p>Articles. The user can scroll down though a moving bar of articles (the 2 largest vertically stacked modules to the left of the screen).</p> <p>Popular articles. This is a list of the agrigated most popluar articles by view count on ecogeek that week. Scroll down to see more.</p> <p>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</p> <p>3.1.2 Ecogeek Logo Will load ‘appear’ with the toolbar layer of the design.</p> <p>3.2.2 Displaying Search Results</p> <p>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.</p> <p>3.2.4 Thumbnail Images</p> <p>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.</p> <p>4.2 Video Template</p> <p>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.</p> <p>5.1</p> <p>Forum Template.</p> <p>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.</p> <div></div>http://ecogeekredesign.tumblr.com/post/22224888652http://ecogeekredesign.tumblr.com/post/22224888652Tue, 01 May 2012 19:45:00 -0400<p><strong>EcoGeek Redesign</strong><br/><br/>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&#8217;t been changed for a few years, which is not ideal for a website that focuses on technological advancement.<br/><br/>For this redesign I have added some features, and tweaked others.<br/><br/></p> <p><strong>Crash Course</strong></p> <p>I have added a directly embedded the latest episode of <em>Crash Course </em>which is an educational science channel YouTube, created by Hank Green, who is the webmaster of <em>ecogeek.org</em>.<br/> <br/><strong>Forum Discussion</strong></p> <p>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.<br/><br/><strong>More Articles</strong><br/><br/>Presently,<em> ecogeek.org</em> 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.<br/><br/><strong>Hubs of Related Information </strong><br/><br/>Each category now has it&#8217;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.<br/><br/><strong>Interactive Globe</strong><br/><br/>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’.<br/>The Globe feature can be found next to the magnifying glass in the search bar.<br/><br/><strong>Consolidated Categories</strong>  <br/><br/>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. <br/><br/><strong>Jobs</strong><br/><br/>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. </p> <p><br/><strong>Modulated the pages</strong><br/><br/>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&#8217;t bleed into another space.<br/><br/><span class="Apple-style-span"><strong>Colour Pallete<br/><br/> </strong>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 </span></p> <p><span class="Apple-style-span"><strong>League Gothic</strong></span></p> <p>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.<em> <br/></em></p> <p><strong>Helvetica             </strong></p> <p>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.</p> <p><br/><br/><em>Katie Catchpole  [094214]  AUT Graphic Design 2012</em></p>http://ecogeekredesign.tumblr.com/post/22202356637http://ecogeekredesign.tumblr.com/post/22202356637Tue, 01 May 2012 14:06:00 -0400<img src="http://25.media.tumblr.com/tumblr_m3cr1eYw891rv6mxxo1_500.jpg"/><br/><br/><div> <div> <p><strong>Final 9</strong><br/><br/>Large Screen Design <br/><br/>Agriculture Page<br/><br/>This is the expanded version of the Agricultural page, as would be seen if the computer screen did not cut it off just below ‘Brains for the Earth’. It is the hub for all information that has been tagged as relation to plants, farming, food and horticulture.<br/><br/></p> </div> </div>http://ecogeekredesign.tumblr.com/post/22197687548http://ecogeekredesign.tumblr.com/post/22197687548Tue, 01 May 2012 12:27:00 -0400ecogeekfinal<img src="http://24.media.tumblr.com/tumblr_m3cr06jgcI1rv6mxxo1_500.jpg"/><br/><br/><div> <div> <p><strong>Final 8</strong><br/><br/>Large Screen Design <br/><br/>Main Page</p> </div> </div>http://ecogeekredesign.tumblr.com/post/22197655014http://ecogeekredesign.tumblr.com/post/22197655014Tue, 01 May 2012 12:26:30 -0400ecogeekfinal<img src="http://25.media.tumblr.com/tumblr_m3cqy4r8Om1rv6mxxo1_500.jpg"/><br/><br/><div> <div> <p><strong>Final 7</strong><br/><br/>Large Screen Design <br/><br/>Main Article Expanded</p> </div> </div>http://ecogeekredesign.tumblr.com/post/22197601978http://ecogeekredesign.tumblr.com/post/22197601978Tue, 01 May 2012 12:25:00 -0400ecogeekfinal<img src="http://25.media.tumblr.com/tumblr_m3cqwsBBVZ1rv6mxxo1_500.jpg"/><br/><br/><div> <p><strong>Final 6</strong><br/><br/>Large Screen Design <br/><br/>About Ecogeek</p> </div>http://ecogeekredesign.tumblr.com/post/22197564058http://ecogeekredesign.tumblr.com/post/22197564058Tue, 01 May 2012 12:24:28 -0400ecogeekfinal<img src="http://24.media.tumblr.com/tumblr_m3cqvauXqe1rv6mxxo1_500.jpg"/><br/><br/><div> <p><strong>Final 5</strong><br/><br/>Large Screen Design <br/><br/>Interactive Globe<br/><br/>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’.<br/><br/> The Globe feature can be found next to the magnifying glass in the search bar.</p> </div>http://ecogeekredesign.tumblr.com/post/22197522561http://ecogeekredesign.tumblr.com/post/22197522561Tue, 01 May 2012 12:23:00 -0400ecogeekfinal<img src="http://25.media.tumblr.com/tumblr_m3cqtblRpy1rv6mxxo1_500.jpg"/><br/><br/><div> <p><strong>Final 4</strong><br/><br/>Desktop Design <br/><br/>Main Page</p> </div>http://ecogeekredesign.tumblr.com/post/22197470736http://ecogeekredesign.tumblr.com/post/22197470736Tue, 01 May 2012 12:22:00 -0400ecogeekfinal<img src="http://25.media.tumblr.com/tumblr_m3cqpgASra1rv6mxxo1_400.jpg"/><br/><br/><div> <p><strong>Final 2</strong><br/><br/>Mobile Design</p> <p><br/>Main Article Expanded</p> </div>http://ecogeekredesign.tumblr.com/post/22197366059http://ecogeekredesign.tumblr.com/post/22197366059Tue, 01 May 2012 12:20:04 -0400designmobileecogeekfinal<img src="http://24.media.tumblr.com/tumblr_m3cqqlmrCo1rv6mxxo1_400.jpg"/><br/><br/><div> <p><strong>Final 3</strong><br/><br/>Mobile Design <br/><br/>Forum Main Page<br/><br/>The is the entry page to the <em>ecogeek.org</em> forums. The inbox feature is most prominent as that is what people who are accessing the web while they are out are often after. Clicking on one of the discussion headings will take you to a new page of folders with each topic that has been started, which will then follow on to the message boards.</p> </div>http://ecogeekredesign.tumblr.com/post/22197395481http://ecogeekredesign.tumblr.com/post/22197395481Tue, 01 May 2012 12:20:00 -0400deginecogeekfinal<img src="http://25.media.tumblr.com/tumblr_m3cqnot7zH1rv6mxxo1_400.jpg"/><br/><br/><p><strong>Final 1</strong><br/><br/>Mobile Design <br/><br/>Main Page</p>http://ecogeekredesign.tumblr.com/post/22197319058http://ecogeekredesign.tumblr.com/post/22197319058Tue, 01 May 2012 12:19:00 -0400mobile designecogeekfinal<img src="http://24.media.tumblr.com/tumblr_m3co9hThkn1rv6mxxo1_400.png"/><br/> <br/><img src="http://25.media.tumblr.com/tumblr_m3co9hThkn1rv6mxxo6_250.png"/><br/> <br/><img src="http://24.media.tumblr.com/tumblr_m3co9hThkn1rv6mxxo7_400.png"/><br/> <br/><img src="http://25.media.tumblr.com/tumblr_m3co9hThkn1rv6mxxo5_400.png"/><br/> <br/><img src="http://25.media.tumblr.com/tumblr_m3co9hThkn1rv6mxxo8_400.png"/><br/> <br/><img src="http://25.media.tumblr.com/tumblr_m3co9hThkn1rv6mxxo4_400.png"/><br/> <br/><p><strong>iphone</strong> <strong>Developments<br/><br/></strong>Currently, the mobile version of <em>ecogeek.org </em>is their original site, reduced in size.<br/><br/></p>http://ecogeekredesign.tumblr.com/post/22195086217http://ecogeekredesign.tumblr.com/post/22195086217Tue, 01 May 2012 11:27:00 -0400<img src="http://25.media.tumblr.com/tumblr_m3cly7UAFV1rv6mxxo1_500.jpg"/><br/> <br/><img src="http://25.media.tumblr.com/tumblr_m3cly7UAFV1rv6mxxo2_500.jpg"/><br/> <br/><img src="http://25.media.tumblr.com/tumblr_m3cly7UAFV1rv6mxxo3_500.jpg"/><br/> <br/><p><strong>Development</strong></p>http://ecogeekredesign.tumblr.com/post/22193193154http://ecogeekredesign.tumblr.com/post/22193193154Tue, 01 May 2012 10:37:00 -0400WorkbookLarge ScreenEcogeek<img src="http://25.media.tumblr.com/tumblr_m3clooXhvW1rv6mxxo1_500.jpg"/><br/> <br/><img src="http://25.media.tumblr.com/tumblr_m3clooXhvW1rv6mxxo2_500.jpg"/><br/> <br/><div> <p><strong>Layout</strong><br/><br/>This is the initial layout for the redesign of <em>ecogeek.org</em>. <br/><br/><strong>Additions <br/><br/></strong>Crash Course</p> <p>I have added a directly embedded the latest episode of <em>Crash Course </em>which is an educational science channel YouTube, created by Hank Green, who is the webmaster of <em>ecogeek.org</em>.<br/> <br/>Forum Discussion</p> <p>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.<br/><br/>More Articles<br/><br/>Presently,<em> ecogeek.org</em> 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.<br/><br/><br/><strong>Subtractions</strong><br/><br/>Jobs<br/><br/>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.<br/><br/>Abundance of Share/Subscribe/Sign Up<br/><br/>The onslaught of requests to become involved on the site were too much, so I have condensed the necessary ones on the main page down to icons. This can be done as the average user of <em>ecogeek.org</em>, a technologically savvy person, will be able to recognize the often used symbols. Subscribes and sign ins are now located on the side menu, in a stable position that can be easily found from anywhere on the site.<br/><br/>Categories <br/><br/>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.<br/><br/> </p> </div>http://ecogeekredesign.tumblr.com/post/22192990287http://ecogeekredesign.tumblr.com/post/22192990287Tue, 01 May 2012 10:31:36 -0400WorkbookLarge ScreenEcogeek<img src="http://25.media.tumblr.com/tumblr_m3ckghISQ31rv6mxxo1_500.jpg"/><br/> <br/><img src="http://24.media.tumblr.com/tumblr_m3ckghISQ31rv6mxxo2_500.jpg"/><br/> <br/><img src="http://24.media.tumblr.com/tumblr_m3ckghISQ31rv6mxxo3_500.jpg"/><br/> <br/><img src="http://25.media.tumblr.com/tumblr_m3ckghISQ31rv6mxxo4_500.jpg"/><br/> <br/><p><strong>Module Layer</strong><br/><br/>This effect was created by assembling a frame of how I would like to the modules of the website to fit, then creating a compound mask over a background layer.<br/><br/>This was to assist in the reading of the website by creating clear sections to hold separate information. The original site had a lot of information which did not have clear hierarchy, hindering it’s readability. </p>http://ecogeekredesign.tumblr.com/post/22192075015http://ecogeekredesign.tumblr.com/post/22192075015Tue, 01 May 2012 10:05:05 -0400WorkbookLarge ScreenEcogeek<img src="http://24.media.tumblr.com/tumblr_m3cjt9914y1rv6mxxo1_500.jpg"/><br/> <br/><img src="http://25.media.tumblr.com/tumblr_m3cjt9914y1rv6mxxo2_500.jpg"/><br/> <br/><p><span class="Apple-style-span"><strong>Background</strong><br/><br/>The base layer of this web page has been created using a transparent image of a tree I drew in illustrator, atop of a beige background with a cardboard texture.<br/><br/>The tree is a visual clue to the environmental thinking of the website, while the cardboard gives it an earthy connection with nature. The colour choice of beige and light green as so the background remains a neutral element which adds stability and cohesiveness to the page while not overpowering.<br/><br/>The iphone version of the website will have a singular tree. </span></p>http://ecogeekredesign.tumblr.com/post/22191613523http://ecogeekredesign.tumblr.com/post/22191613523Tue, 01 May 2012 09:51:09 -0400WorkbookLarge ScreenEcogeek<img src="http://24.media.tumblr.com/tumblr_m3cjptk4mK1rv6mxxo1_500.png"/><br/> League Gothic<br/><br/> <img src="http://24.media.tumblr.com/tumblr_m3cjptk4mK1rv6mxxo2_500.png"/><br/> Helvetica<br/><br/> <p><strong>Typography</strong></p> <p>The two typefaces I have chosen are <em>League Gothic</em><strong>, </strong>a sans serif slab font, and Helvetica.<br/><br/><strong>League Gothic</strong></p> <p>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.<em> <br/></em></p> <p><strong>Helvetica             </strong></p> <p>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.</p>http://ecogeekredesign.tumblr.com/post/22191550380http://ecogeekredesign.tumblr.com/post/22191550380Tue, 01 May 2012 09:49:00 -0400WorkbookLarge ScreenEcogeek<img src="http://24.media.tumblr.com/tumblr_m3ciriYhB11rv6mxxo1_400.png"/><br/> <br/><img src="http://24.media.tumblr.com/tumblr_m3ciriYhB11rv6mxxo2_400.png"/><br/> <br/><img src="http://25.media.tumblr.com/tumblr_m3ciriYhB11rv6mxxo3_100.png"/><br/> <br/><p><strong>Colour Pallete<br/><br/> </strong>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 </p>http://ecogeekredesign.tumblr.com/post/22190916367http://ecogeekredesign.tumblr.com/post/22190916367Tue, 01 May 2012 09:28:30 -0400WorkbookLarge ScreenEcogeek<img src="http://25.media.tumblr.com/tumblr_m3cikrhow41rv6mxxo1_500.jpg"/><br/> <br/><img src="http://25.media.tumblr.com/tumblr_m3cikrhow41rv6mxxo2_500.jpg"/><br/> <br/><img src="http://24.media.tumblr.com/tumblr_m3cikrhow41rv6mxxo3_500.jpg"/><br/> <br/><p><strong>Week 1</strong><br/><br/>Wireframes</p>http://ecogeekredesign.tumblr.com/post/22190795911http://ecogeekredesign.tumblr.com/post/22190795911Tue, 01 May 2012 09:24:27 -0400WorkbookLarge ScreenEcogeek<p><strong>AUT Graphic Design Year 2 - Web Design - Semester One</strong><br/> <br/>The goal of this Web project is for you to thoroughly understand and apply current web design practices to your own and other designs.<br/><br/>Objectives <br/><br/>Choose an existing website that you like, critically analyze its design decisions and once understood, improve upon the design.<br/><br/></p> <div><strong><u>Things to hand in:</u></strong></div> <div><ol><li><strong>iPhone Portrait</strong> <u>PSD</u> design files.</li> <li><strong>iPhone Landscape</strong> <u>PSD</u> design files.</li> <li><strong>Desktop</strong> <u>PSD</u> design files.</li> <li><strong>Handover Documentation</strong> <u>PDF</u> (Overview and Content Outline)</li> <li><strong>Workbook</strong> (PDF or a URL to your blog or traditionally printed and bound)</li> </ol></div>http://ecogeekredesign.tumblr.com/post/22190591006http://ecogeekredesign.tumblr.com/post/22190591006Tue, 01 May 2012 09:17:33 -0400