Design a new generation custom news reader

Introduction and Setup

Browse news websites
Welcome to the class. Browse through your favorite news websites and consider how content is represented on their pages. Take note of how empty space is utilized. Be sure to browse the same sites on different devices to experience their responsive layouts.
Websites I referenced
Medium

www.medium.com

New York Times Snowfall

http://www.nytimes.com/projects/2012/snow-fall

New York Times New Article Experience

http://www.nytimes.com/marketing/prototype/

The Ideation Phase

Upload your ideas and sketches on the RSS Reader
In this unit we covered the importance of the ideation phase along with creating sketches for it. Spend some time thinking about your idea for the RSS reader. Create sketches of the main components that show how they are going to behave on different sized displays.

Nadia Merola's skethes
Sites I referenced
Escape Flight

www.escapeflight.com

Flipboard

www.flipboard.com

Sketching a Top Level Wireframe

Create a framework for your RSS Reader
Upload a framework for your RSS reader.

Describe:
- How the sections are connected to each other
- What components are responsive, adaptive or fixed
- Interaction methods
- Describe animation between sections
- Feel free to upload sketches (or whatever visual format you prefer) that show a clear flow of the process.
Kevin Hamil shares his wireframe sketch.

Building a Grid

Upload your framework and describe your grid
Upload a rough version of your framework and describe the grid you used to build it. Describe how the different sections are going to work, what is going to be fluid and what will use fixed break points.

Aj Halbrook demonsrates their grid.

Attached below is the grid I used for the assignment example.
Accolades for grids
Grids are good. A talk by Khoi Vinh
http://www.subtraction.com/pics/0703/grids_are_good.pdf

Fluid Type
http://trentwalton.com/2012/06/19/fluid-type/

Readability; The Optimal Line Lenght: http://baymard.com/blog/line-length-readability

UX Design QA with Christian Holst: http://uxdesign.smashingmagazine.com/2012/11/08/ux-design-qa-with-christian-holst/

Typography, Look and Feel

Compose your type
Use your wireframing and grid to arrange the basic type elements of your feeder. Add several examples of where text will land on your pages. Be sure to use different fonts and sizes.

An example of where Kris Lennen's type lands across multiple pages.
Typography resources
8 Simple Ways to Improve Typography In Your Designs
http://coding.smashingmagazine.com/2009/04/03/8-simple-ways-to-improve-typography-in-your-designs/

Five simple steps to better typography
http://markboulton.co.uk/journal/five-simple-steps-to-better-typography

Basic rules of good typography
http://www.troytempleman.com/2010/02/08/basic-rules-of-good-typography/

Typography Rules
http://typophile.com/files/typography_rules.pdf

Visual Weights and Composition Balance

Arrange your visual weights
Create an in depth mock-up of 2-3 pages of your news feeder.

Consider the visual elements we discuss in the video lesson:
- Size
- Color
- Density
- Value
- White Space
Learning about visual weight
Below are articles that helped me build this unit. You should read to get a deeper look into the concepts explained in the video lecture.

Visual Weight Building balance with the use of contrasting elements.
http://zurb.com/word/visual-weight

Visible Narratives: Understanding Visual Organization
http://www.lukew.com/ff/entry.asp?981

Visual Balance and Weight Allocation for Usability
http://uxmag.com/articles/visual-balance-and-weight-allocation-for-usability

19 Factors That Impact Compositional Balance
http://www.vanseodesign.com/web-design/visual-balance/

Does your design flow?
http://www.vanseodesign.com/web-design/does-your-design-flow/

Sharpening your Design

Share design mock-ups
At this point of the course it would be nice to start posting some hands on design examples of the RSS Reader we have been working on.

J.J. Springer's design.

Project Wrap-up

Create a case study
Create an in-depth case study of your project.

Include the sections we discuss in the video lesson:
- The Set Up
- Concept Sentence
- The Body
- Wrap it up
- Call to Action

Stephanie Tsuyemura

28