Website Design: What Makes a Good News Website JOUR 3340 – Online Journalism January 28, 2010
Today’s Class <ul><li>Elements of Design </li></ul><ul><li>Next Tuesday’s assignment </li></ul><ul><ul><li>Blog Post #1  <...
Elements of News Website <ul><li>Headline </li></ul><ul><li>Summary </li></ul><ul><li>Main story </li></ul><ul><li>Breakin...
The Home Page <ul><li>Web 1.0: </li></ul><ul><li>Navigation </li></ul><ul><li>on the Left </li></ul>
The Home Page cont. <ul><li>Web 2.0: </li></ul><ul><li>Navigation </li></ul><ul><li>at Top </li></ul>Large Colorful Photo ...
The Home Page cont. <ul><li>Web 2.0: </li></ul><ul><li>Navigation </li></ul><ul><li>at Top </li></ul>Headlines, Blurbs, Li...
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 <ul><li>Traditional </li></ul><ul><li>Modular </li></ul><ul><li>Balance </li><...
The Home Page  <ul><li>Hooking your audience immediately </li></ul><ul><li>Who is your reader? Your viewer? </li></ul><ul>...
Web Design Yesterday & Today <ul><li>Yesterday </li></ul><ul><li>QuarkXpress, Adobe Pagemaker </li></ul><ul><li>HTML code ...
Basic Elements of Design <ul><li>Balance: </li></ul><ul><ul><li>No obscured elements </li></ul></ul><ul><ul><li>Big elemen...
Basic Elements of Design <ul><li>Readability </li></ul><ul><ul><li>See and read stories on the website </li></ul></ul><ul>...
<ul><li>“ You have to say,  How do I take the same basic information and tell the story in a way that works on a Webpage? ...
Balancing Editorial & Revenue <ul><li>Editorial </li></ul><ul><ul><li>News: Local, Regional, National, Int’l </li></ul></u...
Organizing the New Website Cont.   <ul><li>Within each story </li></ul><ul><ul><li>Byline </li></ul></ul><ul><ul><li>Repor...
Organizing the New Website Cont.   <ul><li>Within each section front </li></ul><ul><ul><li>Consistency is key </li></ul></...
Format of your Analysis Website Analysis Grid Website Name: Website URL: Content Interactivity Design Functionality Advert...
Analyzing a Website <ul><li>Content:  What’s featured on homepage? Local? National? News? Features?  </li></ul><ul><li>Int...
Upcoming SlideShare
Loading in …5
×

28 Jan 2010 Jour3340 Website Design&Elements

768 views

Published on

UNT Professor Neil Foote's course notes.

Published in: Education
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
768
On SlideShare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
9
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

28 Jan 2010 Jour3340 Website Design&Elements

  1. 1. Website Design: What Makes a Good News Website JOUR 3340 – Online Journalism January 28, 2010
  2. 2. Today’s Class <ul><li>Elements of Design </li></ul><ul><li>Next Tuesday’s assignment </li></ul><ul><ul><li>Blog Post #1 </li></ul></ul><ul><ul><li>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. </li></ul></ul>
  3. 3. Elements of News Website <ul><li>Headline </li></ul><ul><li>Summary </li></ul><ul><li>Main story </li></ul><ul><li>Breaking news briefs </li></ul><ul><li>Links to related stories </li></ul><ul><li>Time lines </li></ul><ul><li>Short bios on key sources </li></ul><ul><li>Photos/graphics </li></ul><ul><li>Audio </li></ul><ul><li>Still and/or video slide shows </li></ul><ul><li>Polls </li></ul><ul><li>Games </li></ul><ul><li>Discussion forums </li></ul><ul><li>Email link to reporter </li></ul><ul><li>Database </li></ul>
  4. 4. The Home Page <ul><li>Web 1.0: </li></ul><ul><li>Navigation </li></ul><ul><li>on the Left </li></ul>
  5. 5. The Home Page cont. <ul><li>Web 2.0: </li></ul><ul><li>Navigation </li></ul><ul><li>at Top </li></ul>Large Colorful Photo Ad Space
  6. 6. The Home Page cont. <ul><li>Web 2.0: </li></ul><ul><li>Navigation </li></ul><ul><li>at Top </li></ul>Headlines, Blurbs, Links Reader Engagement Interactive Packages – Slide Shows
  7. 7. Best Newspaper Websites © 2008 Compiled by The Bivings Group, a communications consulting firm
  8. 8. © 2008 Compiled by The Bivings Group, a communications consulting firm
  9. 9. © 2008 Compiled by The Bivings Group, a communications consulting firm
  10. 10. © 2008 Compiled by The Bivings Group, a communications consulting firm
  11. 11. Elements of Basic Design Traditional v. Web <ul><li>Traditional </li></ul><ul><li>Modular </li></ul><ul><li>Balance </li></ul><ul><li>Fonts </li></ul><ul><li>Headlines, subheads, bylines </li></ul><ul><li>Lead story, off lead, display feature </li></ul><ul><li>Charts/boxes </li></ul><ul><li>Hi-res images </li></ul><ul><li>Digital Media </li></ul><ul><li>Balance </li></ul><ul><li>Simple, clean </li></ul><ul><li>Colorful </li></ul><ul><li>Headlines </li></ul><ul><li>Photos with captions </li></ul><ul><li>Interactive graphics </li></ul><ul><li>Animation, flash </li></ul><ul><li>Low res, fewer pixels </li></ul>
  12. 12. The Home Page <ul><li>Hooking your audience immediately </li></ul><ul><li>Who is your reader? Your viewer? </li></ul><ul><li>Why will they/would they come to your website? </li></ul><ul><li>What’s the ‘so what’ of your website? </li></ul><ul><li>Choosing the right images </li></ul><ul><li>Removing distractions </li></ul><ul><li>Understand the limits of design </li></ul><ul><ul><li>‘ Above the fold’ & ‘below the fold’ </li></ul></ul>
  13. 13. Web Design Yesterday & Today <ul><li>Yesterday </li></ul><ul><li>QuarkXpress, Adobe Pagemaker </li></ul><ul><li>HTML code </li></ul><ul><ul><li>Hyper Text Markup Languague </li></ul></ul><ul><li>FTP: File Transfer Protocol </li></ul><ul><li>Today </li></ul><ul><li>Dreamweaver </li></ul><ul><li>Adobe EnDesign </li></ul><ul><li>Flash, Shockwave </li></ul><ul><li>WYSIWYG (What You See Is What You Get ) Content Management Systems </li></ul>
  14. 14. Basic Elements of Design <ul><li>Balance: </li></ul><ul><ul><li>No obscured elements </li></ul></ul><ul><ul><li>Big elements shouldn’t obscure small ones </li></ul></ul><ul><ul><li>Dark elements should not obscure light ones (e.g. black background, orange font) </li></ul></ul><ul><li>Contrast & Focus </li></ul><ul><ul><li>Using white space wisely </li></ul></ul><ul><ul><ul><li>http://www.statesman.com/?r=t </li></ul></ul></ul><ul><ul><ul><li>http://www.cleveland.com/ </li></ul></ul></ul>Web Journalism, James Glen Stovall, ‘Design on the Web’, Chapter Ten
  15. 15. Basic Elements of Design <ul><li>Readability </li></ul><ul><ul><li>See and read stories on the website </li></ul></ul><ul><ul><li>No more than two clicks from HomePage </li></ul></ul><ul><li>Simplicity </li></ul><ul><ul><li>Avoid lots of complicated graphics, animation </li></ul></ul><ul><li>Consistency </li></ul><ul><ul><li>Throughout website, particularly on article pages </li></ul></ul><ul><li>Variety </li></ul><ul><ul><li>Be creative, but not obtrusive </li></ul></ul><ul><li>Purpose: </li></ul><ul><ul><li>Always ask: What’s the purpose of this website? </li></ul></ul>Web Journalism, James Glen Stovall, ‘Design on the Web’, Chapter Ten
  16. 16. <ul><li>“ 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.” </li></ul><ul><ul><li>Retha Hill, Director, New Media Innovation Lab </li></ul></ul><ul><ul><li>Walter Cronkite School of Journalism </li></ul></ul><ul><ul><li>Formerly VP Content, BET & executive producer, WashingtonPost.com </li></ul></ul>
  17. 17. Balancing Editorial & Revenue <ul><li>Editorial </li></ul><ul><ul><li>News: Local, Regional, National, Int’l </li></ul></ul><ul><ul><li>Sports </li></ul></ul><ul><ul><li>Business </li></ul></ul><ul><ul><li>Lifestyle </li></ul></ul><ul><ul><li>Opinion/Editorials </li></ul></ul><ul><li>Revenue </li></ul><ul><ul><li>Classifieds </li></ul></ul><ul><ul><li>Banners </li></ul></ul><ul><ul><li>Advertorials </li></ul></ul><ul><ul><li>Paid links </li></ul></ul><ul><ul><li>Sponsored content </li></ul></ul>
  18. 18. Organizing the New Website Cont. <ul><li>Within each story </li></ul><ul><ul><li>Byline </li></ul></ul><ul><ul><li>Reporter’s email address </li></ul></ul><ul><ul><li>Audio, video links </li></ul></ul><ul><ul><li>Slideshow: photo and/or video </li></ul></ul><ul><ul><li>Related links </li></ul></ul><ul><ul><li>Comments section </li></ul></ul>Web Journalism, James Glen Stovall, ‘Design on the Web’, Chapter Ten
  19. 19. Organizing the New Website Cont. <ul><li>Within each section front </li></ul><ul><ul><li>Consistency is key </li></ul></ul><ul><ul><ul><li>Controlled by content management system, in many cases </li></ul></ul></ul><ul><ul><li>Links to other sections </li></ul></ul><ul><ul><li>Links to related articles </li></ul></ul>Web Journalism, James Glen Stovall, ‘Design on the Web’, Chapter Ten
  20. 20. Format of your Analysis Website Analysis Grid Website Name: Website URL: Content Interactivity Design Functionality Advertising
  21. 21. Analyzing a Website <ul><li>Content: What’s featured on homepage? Local? National? News? Features? </li></ul><ul><li>Interactivity: What’s being used? Links? Slide shows? Video? Comments? Blogs? </li></ul><ul><li>Design/Navigation: Is it hard or difficult to find content on site? </li></ul><ul><li>Functionality: Is the useful? Informative? immediate </li></ul><ul><li>Advertising: How is it integrated? Is it distracting? Banners? Type? </li></ul>

×