The Making of a Website University of North Texas Department of Journalism Online Journalism 3340 February 19, 2008
Today’s Lineup <ul><ul><li>Today’s News </li></ul></ul><ul><ul><li>Making of a Website </li></ul></ul><ul><ul><li>Discussi...
Elements of Basic Design Traditional v. Web <ul><li>Traditional </li></ul><ul><li>Modular </li></ul><ul><li>Balance </li><...
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? ...
Organizing the New Website <ul><li>Basic pages </li></ul><ul><ul><li>Home page </li></ul></ul><ul><ul><li>News: Local, Reg...
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></...
Some HTML Basics <ul><li>WebMonkey .com </li></ul><ul><li>A basic ‘web page’ </li></ul><ul><li><html> <head> <title>Summer...
Some HTML Basics <ul><li>Common HTML Tags: </li></ul><ul><li>Header (Headlines) <H1></H1>, <H2> </li></ul><ul><li>FONT: <F...
Beyond HTML <ul><li>JavaScript </li></ul><ul><ul><li>JavaScript is a  programming language  that is loosely based on Java....
Style Sheets - CSS <ul><li>Used for creating templates </li></ul><ul><ul><li>Embeds fonts, links, colors, images, backgrou...
Images <ul><li>From .GIFs (Compuserve) to .JPEGs (or .JPG) </li></ul><ul><li>File size of photo crucial: </li></ul><ul><li...
Home Pages <ul><li>Your Front Page: index.html or default.html </li></ul><ul><li>As a web editor: </li></ul><ul><ul><li>Co...
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...
Standard Ad Sizes/Formats <ul><li>Static banners to animated .gifs </li></ul><ul><li>Animated .gifs to ‘rich media’ </li><...
Upcoming SlideShare
Loading in …5
×

3340 Online Journalism Feb19 Website Inside Out

890 views

Published on

Basic elements of website design

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

  • Be the first to like this

No Downloads
Views
Total views
890
On SlideShare
0
From Embeds
0
Number of Embeds
18
Actions
Shares
0
Downloads
34
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

3340 Online Journalism Feb19 Website Inside Out

  1. 1. The Making of a Website University of North Texas Department of Journalism Online Journalism 3340 February 19, 2008
  2. 2. Today’s Lineup <ul><ul><li>Today’s News </li></ul></ul><ul><ul><li>Making of a Website </li></ul></ul><ul><ul><li>Discussion of Today’s Homework </li></ul></ul><ul><ul><li>Homework for Thursday </li></ul></ul><ul><ul><ul><li>Go to DigitalMediaCrashCourse.com/unt </li></ul></ul></ul><ul><ul><ul><li>Read the Poynter Institute’s Eye Track Study – 2007. </li></ul></ul></ul><ul><ul><ul><li>Based on the study’s findings, write up to 400 words words on your blog about your recommendations to newspapers on how they should change to attract readers in print or online. </li></ul></ul></ul>
  3. 3. 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>
  4. 4. 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>
  5. 5. 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
  6. 6. 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
  7. 7. <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>
  8. 8. Organizing the New Website <ul><li>Basic pages </li></ul><ul><ul><li>Home page </li></ul></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><ul><li>Classified Ads: Cars, Jobs, Real Estate </li></ul></ul>Web Journalism, James Glen Stovall, ‘Design on the Web’, Chapter Ten
  9. 9. 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
  10. 10. 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
  11. 11. Some HTML Basics <ul><li>WebMonkey .com </li></ul><ul><li>A basic ‘web page’ </li></ul><ul><li><html> <head> <title>Summer</title> </head> <body> <h1>Summer Vacation</h1> <p>My summer vacation was sunny, silly, and far too short. <p>How many days till Christmas? </body> </html> </li></ul><ul><li>How does this look? Let’s see …. </li></ul>
  12. 12. Some HTML Basics <ul><li>Common HTML Tags: </li></ul><ul><li>Header (Headlines) <H1></H1>, <H2> </li></ul><ul><li>FONT: <FONT> </li></ul><ul><li>Paragraph: <p></p> </li></ul><ul><li>Hyperlink: <a href= [link] </a> </li></ul><ul><li>Character Properties: </li></ul><ul><ul><li>#FFFFFF is white </li></ul></ul><ul><ul><li>#80080 is purple </li></ul></ul><ul><li>Image Source <img src> </li></ul>
  13. 13. Beyond HTML <ul><li>JavaScript </li></ul><ul><ul><li>JavaScript is a programming language that is loosely based on Java. Instead of being referred to in an HTML document, as Java applets are, JavaScript code is embedded in the document itself, using the SCRIPT element. </li></ul></ul><ul><ul><li>A programming language designed for use with web pages to add 'functionality' eg to create drop-down menus, process information input by users. </li></ul></ul><ul><ul><ul><li>Basic: The Calendar </li></ul></ul></ul><ul><ul><ul><li>Sophisticated: Pop up windows </li></ul></ul></ul><ul><li>Flash: Creates animation on your site (without being an animator) </li></ul><ul><ul><li>Very simple: Martini Glass </li></ul></ul><ul><ul><li>Complicated: Clouds </li></ul></ul>
  14. 14. Style Sheets - CSS <ul><li>Used for creating templates </li></ul><ul><ul><li>Embeds fonts, links, colors, images, backgrounds into a page so it remains consistent throughout the website </li></ul></ul><ul><ul><li>Keeps design clean </li></ul></ul><ul><ul><li>Makes it easier for reader to find content </li></ul></ul><ul><ul><li>Simplifies publishing process, particularly sites with numerous pages </li></ul></ul><ul><ul><li>Examples </li></ul></ul>
  15. 15. Images <ul><li>From .GIFs (Compuserve) to .JPEGs (or .JPG) </li></ul><ul><li>File size of photo crucial: </li></ul><ul><li>Evolution of Resolution </li></ul><ul><ul><li>Traditional Print: 300 dpi (dots per inch) </li></ul></ul><ul><ul><li>Web Design: 72 dpi </li></ul></ul>
  16. 16. Home Pages <ul><li>Your Front Page: index.html or default.html </li></ul><ul><li>As a web editor: </li></ul><ul><ul><li>Compelling headlines </li></ul></ul><ul><ul><li>Compelling photos </li></ul></ul><ul><ul><li>Related links to: </li></ul></ul><ul><ul><ul><li>Other stories on website today or archive </li></ul></ul></ul><ul><ul><ul><li>Slideshows, audio, video </li></ul></ul></ul><ul><ul><li>Mix of stories: Local v. Regional v. National v. International </li></ul></ul><ul><ul><li>Editing ‘print’ and/or TV versions to HomePage blurbs – then linked to full length stories within website </li></ul></ul>
  17. 17. The Home Page <ul><li>Web 1.0: </li></ul><ul><li>Navigation </li></ul><ul><li>on the Left </li></ul>
  18. 18. 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
  19. 19. 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 Most Viewed, Most Emailed
  20. 20. Standard Ad Sizes/Formats <ul><li>Static banners to animated .gifs </li></ul><ul><li>Animated .gifs to ‘rich media’ </li></ul><ul><li>Random sizes of banners and buttons to “IMUs” – Internet Measuring Units </li></ul><ul><li>Creation of the Internet Advertising Bureau: http://iab.net </li></ul><ul><ul><li>Rectangles and pop-ups: 300 x 250 IMU </li></ul></ul><ul><ul><li>Banners & Buttons : 468x60 or 120x60 </li></ul></ul><ul><ul><li>Skyscrapers: 160x600 </li></ul></ul>

×