html & css Project Proposal

| No Comments
Although it might be rather ambitious, I'd like to create a web app for the Setonian Online. At a later time, I'd like to also work on revamping the S.O. regular site as well, but for now, let's just focus on the iPhone/iPad application. To gather inspiration, I downloaded and analyzed several existing News Apps.BBCPort.jpg

BBC News has a two-view interface that's similar to my vision for The Setonian. When in the portrait orientation, the page will show the nav_bar above the selected story.


When in landscape orientation, the app is split evenly: half of the display shows
 the article selected while the other side allows the user to browse through other stories.

The Problem: The "icons" used for BBC's all feature photos--something the Setonian doesn't always include.


I'm probably going to model the App's top nav_bar after the one used in theHuffington Post. It is a simple nav_bar with a colored background and white text. 

I really didn't like the rest of the Huff Post's app. It reads too much like its webpage. However, I did like that the majority of the page displayed a large photo to link to the lead story. However, for purposes of our app, I think it would be best to stick to the basics for now.


Out of all of the Apps I viewed, the USA today's was the least user-friendly. There is no sliding Nav_bar or easy way to otherwise navigate through the site. Furthermore, nothing really changes when you shift from portrait to landscape.



Cnet has a simple design. It displays a simple nav_bar across the top and then includes a list with chevron links to stories. Some headlines include photos, but all do not, which is ideal for our pages.  At the bottom are additional links: News, Twitter, Search, Favorites, Etc...

For my project, I'd like to create a hybrid using different ideas from each of these web apps. 

Portrait orientation:

A cross between Huff Post and Cnet, I'd like the page to have a nav_bar similar to the one in the Huff Post. If design permits, I'd also like to include an oversized image to go with the main story on the page. From there, the remaining stories will be sorted in a list similar to Cnet's app: the stories with photos will have a thumbnail image next to them, but photos will not be necessary. When a story is selected, a new page will open for the user to read the story.

Landscape orientation:

This display will be very similar to BBC's landscape orientation, with a slight twist. As with BBC, when the story is selected, it will be displayed on the right side of the story, and the user will still be able to browse through other stories. However, instead of using the thumbnail/caption links, I'll use the same list style as in the portrait style. The Nav_bar will remain at the top as well.

The next step:

I'm going to create some hand-drawn templates before I move on to creating a mock-design in photoshop. From there, I'll implement the code. I hope I'm not biting off more than I can chew!

Leave a comment

About this Entry

This page contains a single entry by Jessie published on September 30, 2010 12:28 PM.

Inform 7 Portfolio was the previous entry in this blog.

HTML Unit Portfolio is the next entry in this blog.

Find recent content on the main index or look in the archives to find all content.