Challenge Summary
We are looking to our community to help us build an RSS reader iPad app.
Round 1
For round 1 please submit your designs for screens #1, #3 and #5.
Round 2
Round 2 will start with the annoncements of milestone winners and feedback. For round #2 you must submit al five (5) required screens.
The client has a number of divisions, each with a number of RSS feeds. They would like an app where employees and clients can subscribe to whichever feeds they prefer, and view related content. There are five (5) screens required for this contest.
DESIGN CONSIDERATIONS
- the highlight color should be taken from the provided colors.png file. There should only be ONE main accent color. shades of gray are desirable for the rest of the app.
Note: you may use other colors in small places, like green for add and red for remove, etc
- the only font allowed is Arial
- font colors can be no darker than #222, in any instance
- background color for side A (feeds) can be any color, but should be easy to visually distinguish from side B content, and easy on the eyes
- background color for side B (articles) must be white or VERY light grey
- no rounded corners are allowed in your elements
- gradients and shadows should be kept to a minimum, if used at all (client does not like them)
- BUTTONS must be solid blocks of color (no effects)
REQUIRED SCREENS AND CONTENT
ALL screens must have the following required content:
---- Accenture logo (provided)
---- Acme text-based logo (placeholder - use "Acme Division")
---- Button, labeled "Edit Feeds"
---- Refresh icon
---- default iPad pagination indicator (show 10 pages)
The following five (5) screens should be included in your submission. Note:
- All screens should be in horizontal orientation
- use the provided file names for your submission PNGs
1) 1-Dashboard.png
The client would like this to be in split-pane view (split 50% / 50%), where the RSS feed categories and articles are on one side, and the actual article is on the other side.
Dashboard Side A
On this half of the screen, the user should see a number should see a number of "article boxes" (show 12-16 boxes).
The boxes should be organized into 4 categories (use "Most Recent" for the first category title and "Lorem Ipsum" for the other three).
Each individual article box should be as follows:
- a true square (1 to 1 ratio) with a photo placeholder in the top 50% and a solid block of color in the bottom 50%. A short title should appear inside the color block (use "Lorem ipsum dolor sit amet…").
- show ONE block as "selected" (how this is done is up to you).
Dashboard Side B
On this half of the screen, the user should see an actual article (the one that is currently selected in Dashboard Side A).
This individual article should be as follows:
- show a small text note "Posted on Wednesday September 21, 2011 at 12:00 EDT by Jack Black-Longnamus"
- show some indication that there are 2 comments (you can use simple text or some graphic - the client has no preference). This should be click-able / link to comments.
- show a share icon OR button
- show the article title (use "Acme Article Title')
- show a video placeholder (use standard horizontal photo ratio) with a "Play (arrow icon)" button overlaid on the photo placeholder
- show the author name and position (use "By Trent Reznor, Accenture Rockstar Correspondent")
- show 2-3 paragraphs lorem ipsum
2) 2-ArticleScroll.png
For this screen we would like to see the same content on Side A, but imagine that the user has scrolled down on the article in Side B.
This individual article, now in scroll state, should be as follows:
- show standard iPad scrollbar overlaid on article content (indicate user is at the end of the article)
- show 1-2 paragraphs of lorem ipsum, with a photo placeholder between them.
- show a share icon OR button
- show a second indicator or comments, where the user can see that there are 2 comments and can click to view them.
3) 3-ArticleComments.png
For this screen we would like to see the same content on Side A, but imagine that the user has scrolled down on the article in Side B and clicked to view comments.
This individual article, now in scroll state with comments, should be as follows:
- show standard iPad scrollbar overlaid on article content (indicate user is at the end of the article)
- show 1-2 sentences of lorem ipsum at the top (the end of the article).
- show some separation between the end of the content and the beginning of comments, labeled "Comments" or similar text
- show two comments. each individual comment should contain:
---- photo placeholder (user profile pic)
---- name of author (use "Robert Downey Junior")
---- post text (use "Robert Downey Junior commented on Wednesday September 21, 2011 at 23:00 EDT")
---- 1-3 sentences of lorem ipsum for the content of the comment
- show a button, labeled "Comment"
4) 4-AddComment.png
For this screen we would like the background (same as screen #3) to be partially or fully covered by a modal screen, with an "X" to close.
The content for this modal screen should be as follows:
- show the iPad keyboard up (see iPad GUI PSD link, below)
- show photo placeholder (user profile pic)
- show name of author (use "Robert Downey Junior")
- show a text area for the user to enter text into, with cursor in this area
5) 5-DashboardEdit.png
For this screen, the content of side B is the same as in the first screen (1-Dashboard.png) but we need to show side A in edit mode.
The content for this modal screen should be as follows:
- show the "edit" button with text changed to "Done"
- show a number of feed categories (use "Most Recent" for the first category title and "Lorem Ipsum" for the rest)
- under the category title, show a number of individual feed titles (use "Acme Feed Title")
- show 1/3 of these feed titles with an indication that they can be removed (use a minus symbol icon) and the rest with an indication that they can be added (use a plus symbol icon) BEFORE the feed title
Note: there should be NO article boxes showing, in this mode
You can download a free iPad GUI PSD here: http://www.teehanlax.com/blog/ipad-gui-psd-version-2/
TARGET AUDIENCE: Executives, both internal (employees) and external (clients)
JUDGING CRITERIA: Cleanliness of your graphics and design - User Experience - How well your design fits with the existing design / screens.
FINAL FIXES: As part of the final fixes phase you may be asked to modify your graphics, images (sizes or colors) or modify overall colors. Note that your PSD files should be logically organized and clearly labeled for client editing - If they are not - you will need to clean them up during final fixes.
SUBMISSION & SOURCE FILES
Preview Image: Please create your preview image as one (1) 1024x1024px JPG or PNG file in RGB color mode at 72dpi and place a screenshot of your submission within it.
Submission Files: Please save your five (5) required screens in PNG format (using the names provided above) and save them in your submission folder.
Source Files: You should have five (5) layered source PSDs in your source folder (one for each required screen). Please do not merge or rasterize layers where it will make if difficult for the client to edit in the future.
Please read the challenge specification carefully and watch the forums for any questions or feedback concerning this challenge. It is important that you monitor any updates provided by the client or Studio Admins in the forums. Please post any questions you might have for the client in the forums.