AppIndie Development Blog

I’ve been working toward finishing up the Mockup Process, and have a few things to show the group, and try to get some feedback on.  Here is the current mockup:

A couple of things to note:

1. Clearly defined edges between navigation buttons.
2. Clearly defined edges between story previews.
3. Each main Section is represent with the last few published stories.
4. The “Top Story” module is highlighted to grab attention.
5. The Footer is empty (more about this topic later)

I think that this mockup represents a clean, more modern approach to the vast amount of information that we are trying to portray throughout the site.  We have many sections and categories, so things can get a little hairy when talking about navigation around the site.

Top Story

The Top Story module is not quite pinned down with its functionality.  We could present the most recent article in that module, but that could lead to some tension between writers.

Two articles posted within an hour of each other would mean that the first article may not be highlighted and seen by our readers.  We are going to create some sort of algorithm to determine what the top story of the day should be (to be changed once a day, unless otherwise manually changed).  Most likely, it will involve something like this:

P / (Dp – Dc) – Tt

That formula looks a bit confusing, but hover over each of the letters in it for an explanation of its purpose.  This functionality will be hammered out when it comes time to start the coding process. (very soon)

Menu Structure

The menu at the top is a bit different from the current sidebar menu.  This is by design, and hopefully will give a better user experience for our readers.

Here are the menus as they are currently laid out:

As described before, the “Subscribe” menu will be different, and have a different set of features, offering ways for our readers to get automatic updates to our posts on the various online networks to which we belong.

A menu will be activated by simply pointing your mouse cursor over the menu name (which will be a direct link to either a Section or a Category itself), and it appears, allowing you to choose an option.

Member Login

As described before, the Member Login menu will be located at the very top of the page, and will fade in once the “Member Login” button is clicked.  It will look similar to this:

After a member has logged in, they will be presented with a User Menu, which will contain actions for the user to perform, such as:

• Submitting an Article
• Sending Feedback
• Logging Out
• Making a donation (this may remove the banner on the right sidebar, but maybe not)
• View/Edit their user details

Alright, this is the extent to which I have been working, and look forward to at least one more post in the Mockup Process series.  I will be contemplating the scenarios where the Footer section will be useful through delivering dynamic relevant information, possibly including:

• Writer Photo
• Writer Bio
• Writer Contact Information
• Related Articles

This hasn’t been set in stone yet, but I will be figuring out exactly what should be done, and how it will specifically benefit our readers.

As always, leave me feedback.  I need to know what everyone thinks of this setup, so I can modify things in a pleasing manner.  Thanks for reading!

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.