Website Design: What Makes a Good News Website JOUR 3340 – Online Journalism Sept. 3, 2009

Today’s Class News Website of the Day Elements of Design Blog set up Next Tuesday’s assignment Blog Post #1 Based on today’s lecture on websites, go to AssignmentEditor.com to find a local newspaper or television website (outside of North Texas). How does this news website meet the criteria? For additional information, read the following links.

News Website of the Day

Elements of Design

Blog set up

Next Tuesday’s assignment

Blog Post #1

Based on today’s lecture on websites, go to AssignmentEditor.com to find a local newspaper or television website (outside of North Texas). How does this news website meet the criteria? For additional information, read the following links.

Elements of News Website Headline Summary Main story Breaking news briefs Links to related stories Time lines Short bios on key sources Photos/graphics Audio Still and/or video slide shows Polls Games Discussion forums Email link to reporter Database

Headline

Summary

Main story

Breaking news briefs

Links to related stories

Time lines

Short bios on key sources

Photos/graphics

Audio

Still and/or video slide shows

Polls

Games

Discussion forums

Email link to reporter

Database

The Home Page Web 1.0: Navigation on the Left

Web 1.0:

Navigation

on the Left

The Home Page cont. Web 2.0: Navigation at Top Large Colorful Photo Ad Space

Web 2.0:

Navigation

at Top

The Home Page cont. Web 2.0: Navigation at Top Headlines, Blurbs, Links Reader Engagement Interactive Packages – Slide Shows

Web 2.0:

Navigation

at Top

Best Newspaper Websites © 2008 Compiled by The Bivings Group, a communications consulting firm

© 2008 Compiled by The Bivings Group, a communications consulting firm

© 2008 Compiled by The Bivings Group, a communications consulting firm

© 2008 Compiled by The Bivings Group, a communications consulting firm

Elements of Basic Design Traditional v. Web Traditional Modular Balance Fonts Headlines, subheads, bylines Lead story, off lead, display feature Charts/boxes Hi-res images Digital Media Balance Simple, clean Colorful Headlines Photos with captions Interactive graphics Animation, flash Low res, fewer pixels

Traditional

Modular

Balance

Fonts

Headlines, subheads, bylines

Lead story, off lead, display feature

Charts/boxes

Hi-res images

Digital Media

Balance

Simple, clean

Colorful

Headlines

Photos with captions

Interactive graphics

Animation, flash

Low res, fewer pixels

The Home Page Hooking your audience immediately Who is your reader? Your viewer? Why will they/would they come to your website? What’s the ‘so what’ of your website? Choosing the right images Removing distractions Understand the limits of design ‘ Above the fold’ & ‘below the fold’

Hooking your audience immediately

Who is your reader? Your viewer?

Why will they/would they come to your website?

What’s the ‘so what’ of your website?

Choosing the right images

Removing distractions

Understand the limits of design

‘ Above the fold’ & ‘below the fold’

Web Design Yesterday & Today Yesterday QuarkXpress, Adobe Pagemaker HTML code Hyper Text Markup Languague FTP: File Transfer Protocol Today Dreamweaver Adobe EnDesign Flash, Shockwave WYSIWYG (What You See Is What You Get ) Content Management Systems

Yesterday

QuarkXpress, Adobe Pagemaker

HTML code

Hyper Text Markup Languague

FTP: File Transfer Protocol

Today

Dreamweaver

Adobe EnDesign

Flash, Shockwave

WYSIWYG (What You See Is What You Get ) Content Management Systems

Basic Elements of Design Balance: No obscured elements Big elements shouldn’t obscure small ones Dark elements should not obscure light ones (e.g. black background, orange font) Contrast & Focus Using white space wisely http://www.statesman.com/?r=t http://www.cleveland.com/ Web Journalism, James Glen Stovall, ‘Design on the Web’, Chapter Ten

Balance:

No obscured elements

Big elements shouldn’t obscure small ones

Dark elements should not obscure light ones (e.g. black background, orange font)

Contrast & Focus

Using white space wisely

http://www.statesman.com/?r=t

http://www.cleveland.com/

Basic Elements of Design Readability See and read stories on the website No more than two clicks from HomePage Simplicity Avoid lots of complicated graphics, animation Consistency Throughout website, particularly on article pages Variety Be creative, but not obtrusive Purpose: Always ask: What’s the purpose of this website? Web Journalism, James Glen Stovall, ‘Design on the Web’, Chapter Ten

Readability

See and read stories on the website

No more than two clicks from HomePage

Simplicity

Avoid lots of complicated graphics, animation

Consistency

Throughout website, particularly on article pages

Variety

Be creative, but not obtrusive

Purpose:

Always ask: What’s the purpose of this website?

News Website Basics Analyzing News Websites Content Immediacy Interactivity Navigation Functionality Multimedia

Analyzing News Websites

Content

Immediacy

Interactivity

Navigation

Functionality

Multimedia

“ You have to say, How do I take the same basic information and tell the story in a way that works on a Webpage? You have to take the information and turn it on its head – actually, you have to turn the method of storytelling on its head – then tell the story taking advantage of the new technology. You can’t approach it in the same way if you want o be effective.” Retha Hill, Director, New Media Innovation Lab Walter Cronkite School of Journalism Formerly VP Content, BET & executive producer, WashingtonPost.com

“ You have to say, How do I take the same basic information and tell the story in a way that works on a Webpage? You have to take the information and turn it on its head – actually, you have to turn the method of storytelling on its head – then tell the story taking advantage of the new technology. You can’t approach it in the same way if you want o be effective.”

Retha Hill, Director, New Media Innovation Lab

Walter Cronkite School of Journalism

Formerly VP Content, BET & executive producer, WashingtonPost.com

Balancing Editorial & Revenue Editorial News: Local, Regional, National, Int’l Sports Business Lifestyle Opinion/Editorials Revenue Classifieds Banners Advertorials Paid links Sponsored content

Editorial

News: Local, Regional, National, Int’l

Sports

Business

Lifestyle

Opinion/Editorials

Revenue

Classifieds

Banners

Advertorials

Paid links

Sponsored content

Organizing the New Website Cont. Within each story Byline Reporter’s email address Audio, video links Slideshow: photo and/or video Related links Comments section Web Journalism, James Glen Stovall, ‘Design on the Web’, Chapter Ten

Within each story

Byline

Reporter’s email address

Audio, video links

Slideshow: photo and/or video

Related links

Comments section

Organizing the New Website Cont. Within each section front Consistency is key Controlled by content management system, in many cases Links to other sections Links to related articles Web Journalism, James Glen Stovall, ‘Design on the Web’, Chapter Ten

Within each section front

Consistency is key

Controlled by content management system, in many cases

Links to other sections

Links to related articles

Setting up your blog Wordpress.com Username: [nfooteFall09.wordpress.com] The following pages: About 3340 Blog Multimedia

Wordpress.com

Username:

[nfooteFall09.wordpress.com]

The following pages:

About

3340 Blog

Multimedia