AppIndie Development Blog

If you have not read Mockup Process: Day 1, please go back and read that, as this post will be building on the concepts that we have put forth in the first article.

Day 2 of the Mockup Process got me thinking about how we use the Front Page on AppIndie.org.  Currently we have a blog format, where the newest posts are listed with their summaries.  When looking at sites like CNN.com, Time.com, and other high-profile news sites, we see that they are providing more content on the front page, so that someone coming to the site can see a wide variety of topics at a glance.

I’m not saying that I prefer this layout scheme to the current blog layout, but I wanted to toy with the idea, and see what I could come up with.  Here is the preliminary mockup that I created for this idea:

I have changed not only the initial story layout in this mockup, but also tweaked some of the concepts and styles that were originally done in the first mockup.

Layout

The layout is drastically different in this mockup, and is meant to show the way that we can present a larger variety of the current stories that come into the site.

First and foremost, we have a “Top Story” section, which provides the reader with a preview of a photo being used in the post, as well as a snippet of the article.  This would change each time a new story is uploaded and published to the Front Page.

Next, we have a general “Recent Stories” section directly to the right.  This pulls from all of the sections.  Each listing includes some information pertaining specifically to that post:

The elements represent:

1. Media Icon – This is a quick fire way for the reader to know if there is any certain media being used in the article.  In this case, there are images in the article.  When there would be a video, there would be a video icon.  (Note: these icons were just quick and dirty mockups, not indicative of the final product)
2. Title of Article
   
3. Writer’s Name
4. Category of Article
5. Date Published

I believe for this concept, that would be the way to go in regards to representing the most data about an article in that listing.

Below those two featured sections, we have a listing of each Section and the top three newest articles in them.  This is done in a similar format to the “Recent Stories” section.  (I copy and pasted the articles here, to illustrate the point without going overboard on time spent)

Tweaks

I made the “Member Menu” a little bit smaller, which gives more room to the logo and the New Voices badge.

I’ve lightened the color of the “Subscribe” button to allow for better contrast and readability.

Around each of the gradients in the titles of sections and the sidebar, I have placed one pixel-wide lines which give the layout a bit more depth.

Sidebar

I failed to mention the functionality and purpose of the sidebar in the previous post, so let me expand on the concept here.

As we get into the new frontiers of Social Networking and Multimedia, we are going to want to give our users an easy way to preview this new content.  In the sidebar, you will see three widgets:

1. Flickr – The Flickr widget will link to our Photo Stream on Flickr.  Our photo stream will contain images used in the articles, and any supplementary images that we may have taken in covering events, whether or not they were used directly in an article. (More on this functionality later, with full tutorials)
2. YouTube – As we begin to use our YouTube channel more, this widget will show the latest video, or possibly a randomly selected video from our channel.
3. Digg – The Digg widget will show the latest ten articles from AppIndie which have been submitted to the social news networking site, Digg.com.  This will allow our users to support us through their diggs, and be able to see what’s new.  (The mockup just has a generic widget selection of articles.  These are obviously not on AppIndie.org.  More on this functionality later, with tutorials)

As we work more and more through the mockup process, we may choose to add different widgets to this sidebar to showcase other outlets for our content.

Footer

We have the beginnings of the layout for a “Footer” section at the very bottom of this mockup.  Though the final ideas haven’t been nailed down yet, some possible uses for this footer could be:

• Related articles (when viewing a single article)
• Recent comments
• Information about the author
• Community section happenings

As always, there will be further mockups coming in the future.  I would appreciate any comments, criticisms or suggestions about what we already have done here, so that I can better tailor the new theme to everyone’s ideas (or at least some sort of common ground) before I get started on the coding portion of the process.

The Appalachian Independent recieved some extra funding from our benefactors at J-Labs so that we can develop a better experience for the readers of our online newspaper.

We are currently working on plans to move AppIndie into the modern world of the Web.  This includes (but is not limited to):

• New, more modern theme
• Community Section
• Social Networking
• Online Multimedia (such as videos, photos)

This blog serves as a way for the Tech Team at AppIndie to give the Core Staff and our members up-to-date information on how things are going, and to provide an extra line of interaction while we are developing these new features.

I will be posting updates as I continue on with the Mockup process, and then onto converting those mockups into the actual AppIndie 2.0 website.

If you would like to recieve automatic updates every time that I post something new on this site, please subscribe to the RSS feed.

Look forward for a few posts on the first couple of days of the Mockup process, as well as explanations of the motivations of the decisions we have made for the new theme and functionality.  I want to invite everyone to give feedback in the comments section of each blog post, so that we can get on-the-fly feedback, rather than having to wait until we have the full product.