3 Sep 09 Jour3340 Website Design&Elements

642 views

Published on

Sep 3 09 lecture on elements of news websites and design

Published in: Business, Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
642
On SlideShare
0
From Embeds
0
Number of Embeds
6
Actions
Shares
0
Downloads
15
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

3 Sep 09 Jour3340 Website Design&Elements

  1. 1. Website Design: What Makes a Good News Website JOUR 3340 – Online Journalism Sept. 3, 2009
  2. 2. Today’s Class <ul><li>News Website of the Day </li></ul><ul><li>Elements of Design </li></ul><ul><li>Blog set up </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. News Website Basics <ul><li>Analyzing News Websites </li></ul><ul><li>Content </li></ul><ul><li>Immediacy </li></ul><ul><li>Interactivity </li></ul><ul><li>Navigation </li></ul><ul><li>Functionality </li></ul><ul><li>Multimedia </li></ul>
  17. 17. <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>
  18. 18. 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>
  19. 19. 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
  20. 20. 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
  21. 21. Setting up your blog <ul><li>Wordpress.com </li></ul><ul><li>Username: </li></ul><ul><li>[nfooteFall09.wordpress.com] </li></ul><ul><li>The following pages: </li></ul><ul><ul><li>About </li></ul></ul><ul><ul><li>3340 Blog </li></ul></ul><ul><ul><li>Multimedia </li></ul></ul>

×