3340   Online Journalism Feb19 Website Inside Out
Upcoming SlideShare
Loading in...5

3340 Online Journalism Feb19 Website Inside Out



Basic elements of website design

Basic elements of website design



Total Views
Views on SlideShare
Embed Views



1 Embed 1

http://www.slideshare.net 1



Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
Post Comment
Edit your comment

    3340   Online Journalism Feb19 Website Inside Out 3340 Online Journalism Feb19 Website Inside Out Presentation Transcript

    • The Making of a Website University of North Texas Department of Journalism Online Journalism 3340 February 19, 2008
    • Today’s Lineup
        • Today’s News
        • Making of a Website
        • Discussion of Today’s Homework
        • Homework for Thursday
          • Go to DigitalMediaCrashCourse.com/unt
          • Read the Poynter Institute’s Eye Track Study – 2007.
          • 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.
    • 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
    • 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
    • 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
    • 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
      • “ 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
    • Organizing the New Website
      • Basic pages
        • Home page
        • News: Local, Regional, National, Int’l
        • Sports
        • Business
        • Lifestyle
        • Opinion/Editorials
        • Classified Ads: Cars, Jobs, Real Estate
      Web Journalism, James Glen Stovall, ‘Design on the Web’, Chapter Ten
    • 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
    • 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
    • Some HTML Basics
      • WebMonkey .com
      • A basic ‘web page’
      • <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>
      • How does this look? Let’s see ….
    • Some HTML Basics
      • Common HTML Tags:
      • Header (Headlines) <H1></H1>, <H2>
      • FONT: <FONT>
      • Paragraph: <p></p>
      • Hyperlink: <a href= [link] </a>
      • Character Properties:
        • #FFFFFF is white
        • #80080 is purple
      • Image Source <img src>
    • Beyond HTML
      • JavaScript
        • 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.
        • A programming language designed for use with web pages to add 'functionality' eg to create drop-down menus, process information input by users.
          • Basic: The Calendar
          • Sophisticated: Pop up windows
      • Flash: Creates animation on your site (without being an animator)
        • Very simple: Martini Glass
        • Complicated: Clouds
    • Style Sheets - CSS
      • Used for creating templates
        • Embeds fonts, links, colors, images, backgrounds into a page so it remains consistent throughout the website
        • Keeps design clean
        • Makes it easier for reader to find content
        • Simplifies publishing process, particularly sites with numerous pages
        • Examples
    • Images
      • From .GIFs (Compuserve) to .JPEGs (or .JPG)
      • File size of photo crucial:
      • Evolution of Resolution
        • Traditional Print: 300 dpi (dots per inch)
        • Web Design: 72 dpi
    • Home Pages
      • Your Front Page: index.html or default.html
      • As a web editor:
        • Compelling headlines
        • Compelling photos
        • Related links to:
          • Other stories on website today or archive
          • Slideshows, audio, video
        • Mix of stories: Local v. Regional v. National v. International
        • Editing ‘print’ and/or TV versions to HomePage blurbs – then linked to full length stories within website
    • The Home Page
      • Web 1.0:
      • Navigation
      • on the Left
    • The Home Page cont.
      • Web 2.0:
      • Navigation
      • at Top
      Large Colorful Photo Ad Space
    • The Home Page cont.
      • Web 2.0:
      • Navigation
      • at Top
      Headlines, Blurbs, Links Most Viewed, Most Emailed
    • Standard Ad Sizes/Formats
      • Static banners to animated .gifs
      • Animated .gifs to ‘rich media’
      • Random sizes of banners and buttons to “IMUs” – Internet Measuring Units
      • Creation of the Internet Advertising Bureau: http://iab.net
        • Rectangles and pop-ups: 300 x 250 IMU
        • Banners & Buttons : 468x60 or 120x60
        • Skyscrapers: 160x600