Week 01

Week 01 – Topics

Course Introduction
Syllabus
Assignment 1
History of the Internet
How the Internet Works
Overview of Web/Interactive Design Careers
Where Do I Start?
Anatomy of a Web Page
Web File Naming Conventions
File Organization (Website Directory Structure)
Browsers
User preferences
Platforms, Connection speed, Monitor Resolution, Color for web
Know Your Audience
Types of websites
Overview of Web Design Process
Information Architecture
Site Maps


Welcome to our first class

Here’s a few things to know:

  • This course is a hybrid class. In addition to the online course we’ll meet in the classroom for 3 meetings during the 8-week course. The location of the 3 classroom meetings will be AET 106. You must be present at all 3 classroom meetings on the following Thursdays at 2:00pm: November 8, November 29, and December 13 (Final Project Presentations).
  • Please be sure you have read through the Introduction page located on this site. (FYI: it is the same information as the Introduction section on the class smconline.org site).
  • Also, make sure you have read through the Syllabus for this class. The syllabus is located in the “Syllabus” section in the main navigation of this site.
  • Be sure to read and look through the rest of the pages on our class website.
  • If you have any questions about the introduction information, the syllabus, or anything else regarding general class questions, please post the question in the discussion section of the smconline.org site.

ASSIGNMENT 1

Below are your assignments due next week by noon, Wednesday, October 31 .

SIGN UP

Sign up with Tumblr. http://www.tumblr.com
We’re going to use Tumblr as our class blogs for this course. This is where you’ll post your written assignments for this class. The first thing I’d like you to post to your Tumblr blog is a list of 3 of your favorite websites. For each– tell me what type of website it is (based on our class notes below) and who is the audience and possible goals for the website. Post the URL (web address) of your Tumblr blog to the comments sections below. I will post the links to all of our class blogs in the right-hand column under “class blogs.” You’ll see a link to my Tumblr blog there.

Below is more information about Tumblr and a “walk through” video about how to post content to your Tumblr blog.
http://www.tumblr.com/about

READ

All class notes from Week 1 (obvious, right?)
Assigned Readings from our textbook

  • Chapter 1: Where do I start?
  • Chapter 2: How the Web Works
  • Chapter 3: The Nature of Web Design
  • Chapter 20: The Site Development Process
DISCUSS

Discussion – Assignment 1: Introduce yourself
Be sure to introduce yourself in the Discussion section of our eCompanion class website for this course.

Discussion – Assignment 1: Taking Stock.(Page 16 in our textbook).
Answer and discuss the six questions posted in the Discussion section of  smconline.org class website. Feel free to respond and discuss with your answers with your fellow students. I”m happy to lead the discussion but I want all of you to actively participate. The more discussion we have in this class, the better.

WATCH

VIDEO: File Organization (Website Directory Structure)
VIDEO: The Basics of HTML
VIDEO: The Basics of CSS

EXERCISES

Please complete the Class Goals survey so I know more about your background. It’s quick and easy and should only take a few minutes.

From our textbook
Exercise 2-1: View Source. (Page 24 in our textbook).
Complete this exercise and be sure you are familiar with how to “View Source” in a Browser.

Part 1 – Code a simple HTML page
Watch the video above “The Basics of HTML” and “The Basics of CSS” and create a simple HTML page as demonstrated in the videos. Please be sure to watch the video on “File Organization” also. Your files must be organized correctly. Upload your web files (they should be in a “parent” folder, as a zip file to the “Dropbox” on smconline.org site by noon on Wednesday, October 31.

Part 2 – Create a site map for 8-10 page website of your choice
Using Illustrator or Photoshop, create an 8-10 page site map for a website of your choice. Refer to the information in the class notes about how to create a site map in Illustrator. You may use the Monday May Design site map as a template, but if you do so, please be sure to make your site map different than the one I’ve given you. The Monday May Design site map is a PDF but you should be able to edit it in Illustrator. Upload a PDF of your site map to the “Dropbox” on smconline.org site by noon on Wednesday, October 31.

When you upload your zip file to the Dropbox, please be sure to include your name in your file names. For example: yourlastname_assignment1.zip

ADDITIONAL RESOURCES

everything about web*


History of the Internet

Here’s a motion graphics piece about the history of the internet that’s not only informative, it’s also well-designed!

How the Internet works

Take a look at the diagram below and read through the notes so you understand how the internet works. (Note that “Client” refers to the computer where the web page is viewed…)

Servers

The Server is where the website files live. The web server software runs on the server machine, responding to client requests by sending files back to the client. The server also processes CGI (Common Gateway Interface) requests, runs programs, and accesses databases.

  • Server software runs on the server machine
  • The website files are on a hard disk attached to the server
  • The server software formats and delivers each web page element based on HTTP requests
  • Elements are delivered to many clients at the same time
  • A “hit” indicates that one element (not a page!) was delivered (e.g. an image)
  • A web page is composed of many elements, therefore each page accessed generates many hits
Clients

The client is the computer where the web page is viewed. The browser software runs on the Client computer and sends requests to the Server computer. When the client receives files from the server, the Client assembles the web page and displays it.

  • The web browser runs on the client
  • The client requests elements from the server
  • It receives and “parses” the elements delivered by the server
  • First reads the HTML
  • Formats the page, and displays the text
  • Gets additional elements (images, audio, etc.) specified in the HTML
  • Displays additional elements
  • Manages the interactions with the user (e.g. forms, scrolling, image maps, etc.), minimizing the amount of work the server has to do
  • Runs client-side software (JavaScript, Java, plug-ins)
How a user connects to the Internet
Web Site Planning and Wireframing: Hands-On Training | by Laurie Burruss

View this entire Acrobat course and more in the lynda.com Online Training Library®.

For more information about domain name registration: http://www.everythingaboutweb.com/beginner/domain-name-registration/

For more information about web hosting:http://www.everythingaboutweb.com/beginner/web-hosting/

Overview of Web/Interactive Design Careers
.

Please read the information above also located at: http://www.everythingaboutweb.com/beginner/webinteractive-career-descriptions/

Where Do I Start?

Here are the most common questions beginning web design students ask:

  • Am I too late?
  • Where do I start?
  • What do I need to learn?
  • Do I need to learn Java?
  • What other languages do I need to know?
  • What software and equipment do I need to buy?

Web design actually combines a number of disciplines, including:

  • Graphic design
  • Information design
  • Interface design
  • HTML, style sheet, and graphic production
  • Scripting and programming
  • Multimedia (video, animation etc.)
Frontend Versus Backend

You may hear web designers and developers say that they specialize in either the “frontend” or “backend” of website creation.

Frontend design

“Frontend” refers to any aspect of the design process that appears in or relates directly to the browser. Our textbook book focuses primarily on frontend web design. The following tasks are commonly considered to be frontend disciplines:

  • Graphic design
  • Interface design
  • Information design as it pertains to the user’s experience of the site
  • Site production, including HTML documents, style sheets and JavaScript
Backend development

“Backend” refers to the programs and scripts that work on the server behind the scenes to make web pages dynamic and interactive. In general, backend web development falls in the hands of experienced programmers, but it is good for all web designers to be familiar with backend functionality. The following tasks take place on the backend:

  • Information design as it pertains to how the information is organized on the server
  • Forms processing
  • Database programming
  • Content management systems
  • Other server-side web applications using Perl/CGI, PHP, ASP, JSP, Ruby on Rails, Java and other programming languages.
A Little More About Flash

Adobe Flash (previously Macromedia Flash, previously FutureSplash) is a multimedia format created especially for the Web.

Flash gives you the ability to create full-screen animation, interactive graphics, integrated audio clips, even scriptable games and applications, all at remarkably small file sizes. Some sites use Flash instead of HTML for their entire interface, content, and functionality. Flash has a number of advantages:

  • Because it uses vector graphics, files are small and the movie can be resized without loss of detail.
  • Real-time anti-aliasing keeps the edges smooth.
  • It is a streaming format, so movies start playing quickly and continue to play as they download.
  • You can use ActionScript to add behaviors and advanced interactivity, allowing Flash to be used as the frontend for dynamically generated content or e-commerce functions.
  • The Flash plug-in is well distributed, so support is reliable.

On the downside:

  • The fact that a plugin is required to play Flash media makes some developers squeamish.
  • Some mobile devices, most notably the iPhone and the iPad, do not support Flash.
  • Content may be lost for non-graphical browsers. However, Flash has many features to improve accessibility.
  • The software required to create Flash content is often expensive, and the learning curve is steep.

Flash is not appropriate for all sites and it is not poised to replace HTML. However, when used well, it can create a big impact and a memorable user experience. For more information, look for “Adobe Flash” at Wikipedia.org.

Web-related programming “languages” in order of increasing complexity:

Note: HTML/CSS aren’t really “languages” per se.

  1. HTML/HTML5
  2. Style sheets (CSS)
  3. JavaScript/DOM scripting
  4. Server-side scripting
  5. XML
  6. Java
The Web Design Layer Cake

Contemporary web design is commonly visualized as being made up of three separate “layers.”

  1. The content of the document with its HTML markup makes up the Structure Layer. It forms the foundation upon which the other layers may be applied.
  2. Once the structure of the document is in place, you can add style sheet information (CSS) to control how the content should appear. This is called the Presentation Layer.
  3. Finally, the Behavior Layer includes the scripts (for example, JavaScript) that make the page an interactive experience.
Equipment

Here’s a list of equipment you’ll need:

  • A solid, up-to-date computer
  • Extra memory
  • A large monitor
  • A second computer
  • A scanner and/or digital camera
Software

Do you have the necessary software?

  • Web page authoring
  • HTML editors
  • Graphics software
  • Multimedia tools
  • Internet tools
Anatomy of a Web Page

Example from textbook: Jen’s Kitchen
http://learningwebdesign.com/materials/chapter02/kitchen.html

In a Browser > View Source to see the code for the web page.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html>
<head>
<title>Jen's Kitchen</title>
</head>

<body>
<img src="kitchen.gif" alt="Jen's Kitchen banner" />

<h1>Welcome to the future home of Jen's Kitchen</h1>

<p>If you love to read about <strong>cooking and eating</strong>, would like to learn of
some of the best restaurants in the world, or just want a few choice recipes to add to your collection,
<em>this is the site for you!</em></p>

<p><img src="spoon.gif" alt="spoon illustration" />We're busy putting the site together.
Please check back soon.</p>

<hr />

<p>Copyright 2006, Jennifer Robbins</p>
</body>
</html>
Composition of a Web Page

A web page is composed of the following elements:

  • The HTML file, which describes the page layout, defines links to other web pages, and contains the text for the page
  • Elements that come from the same server where the HTML files is, or from a different server
  • Image files (.gif, .jpg, .png)
  • Audio files (.mp3, .aif, .wav)
  • Other multimedia objects (QuickTime movies, Flash etc.)
  • JavaScript

See the links to the directories below for examples. Take a look and note the various elements that comprise the web pages. Notice all the HTML files. (.htm and .shtml files are also HTML files).

  • Can you find the .jpg and .gifs images? Where are they located?
  • What about the Flash files… they end in .swf and only one of the directories below contain Flash files. Do you know which one?
  • Do you know what a .css file is? A CSS file stands for”Cascading Style Sheet” and we will talk about these later in the semester.

Monterey Pop Web Site
Nike Annual Report Web Site

An HTML web page is divided into to two major sections, the head and body. The head section is a description of the page, with its title, any meta tags, JavaScript, and other special information about the page. The head section does not contain any displayed content. The body section contains a description of how the page should look and work, including the text, text markup, links for in-line images, form descriptions, links to other pages, and page enhancements such as Flash, JavaScript, etc.

Basic HTML

A simple example of a web page

<html>
<head>
   <title>HTML Example</title>
</head>

<body>
   Some text for a web page that demonstrates the basic form of HTML in a web page.
</body>
</html>
Creating a web page using TextEdit
  • Using Apple’s simple text editor called TextEdit (found in the Applications folder on your computer), type in the HTML above. Do not copy and paste the html–you will only learn if you actually type in the code!
  • Very important– when usingTextEdit, be sure to make the following change: under “Format” > “Make Plain Text.”
  • Also, be sure to make the following changes in the Preferences in TextEdit. Open Preferences and
    Under “New Document” — “Format” > select “Plain Text.”
    Under “Open and Save” — Under “When opening a file” > select “Ignore rich text commands in HTML files.”
  • Save the file with the extension .html in order to view it in a Browser application such as Firefox or Safari.
Web File Naming Conventions
.

Please read the information above also located at: http://www.everythingaboutweb.com/beginner/file-naming-conventions/

File Organization (Website Directory Structure)
.

Please read the information above also located at: http://www.everythingaboutweb.com/beginner/file-organization/

Browsers

The nature of web design is that there is no guarantee that everyone will see your page the way you do.

One of the biggest challenges in designing for the Web is dealing with the multitude of browsers in current use. Although the current version of Microsoft Internet Explorer running on Windows makes up the lion’s share (60 to 80% as of this writing)** there are at least a dozen browser versions that web developers pay attention to, and hundreds more obscure or antiquated browsers still in use.

** Our textbook is out-of-date regarding this statistic. Currently the browser statistics are:

 Internet Explorer  23.2 % Firefox  42.2 % Chrome  27.9 % Safari  3.7 % Opera  2.4 %

Resource: W3 School Browser Statistics http://www.w3schools.com/browsers/browsers_stats.asp

You can see from the above statistics, why it’s important that you do not get in the habit of  testing websites exclusively on Safari. Safari’s share of the browser market is less than 4%!

Comparison of web browsers
http://en.wikipedia.org/wiki/Comparison_of_web_browsers

How do you cope with the various browser versions and variations?

Alternative Browsing Environments

As a web designer, it will be important to understand how to design for these situations:

  • User with disabilities
  • The mobile Web
  • Dealing with diversity
Dealing with diversity

Here are some working solutions:

  1. Start with clean HTML
  2. Provide alternatives
  3. Allow text to resize
  4. Don’t put text in graphics
  5. Use accessibility features when creating HTML tables and forms
  6. Be careful with colors and backgrounds
User preferences

We need to remember as web designers that the user has the most control over the way in which the website is viewed. The user can do the following:

  • Change the font face and size.
  • Change the background and text colors.
  • Ignore style sheet or apply their own.
  • Turn images off.
  • Turn off Java and JavaScript.
  • Turn-off pop-up windows.
Different Platforms (PC vs. Mac)

As a web designer, we must understand these differences:

  • Font availability and display
  • The rendering of form elements
  • Availability of plug-in media players
Connection Speed

Recommended page weight: total size (html/images/flash) for a web page should be around 300-400K although we often visit web site like Amazon and Ebay where page size is often much larger.

Some typical download times under ideal conditions, which rarely happen:

Size of File 56Kbps Modem 256Kbps DSL 1500 Kbps Cable
50Kbyte 8.0 secs 1.6 secs < 1 sec
100Kbyte 16.0 secs 3.1 secs 1 sec
300Kbyte 48.0 secs 9.3 secs 3 sec
1meg 160.0 secs 31.3 secs 6 sec

Note: Pew Internet Project 2010: 66% of American adults have a home broadband connection in 2010, little changed from the 63% who did so in 2009.

Monitor Resolution
.

Please read the information above also located at: http://www.everythingaboutweb.com/beginner/monitor-resolution/

What does “above the fold” mean?

Newspaper editors know the importance of putting the most important information “above the fold,” that is, visible when the paper is folded and on the rack. This principle applies to web design as well. Web designers have adopted the term “above the fold” to refer to the first screenful of a web page. It’s what users will see without scrolling, and it bears the burden of holding their attention and enticing them to click in or scroll down further. Some elements you should consider placing above the fold include:

  • The name of the site and your logo(if you have one)
  • Your primary message
  • Some indication of what your site is about (e.g., shopping, directory, magazine, etc.)
  • Navigation to key parts of the site.
  • Crucial calls to action, such as “Register Now”
  • Any other important information, such as a toll-free number
  • An advertising banner (your advertisers may require it)

Liquid layouts resize and adapt to the changing window size. When the window gets narrower, so do the columns, and the text is allowed to re-wrap as necessary. Liquid layouts are in keeping with the behavior of the normal flow and the spirit of the medium. They also don’t require choosing a target resolution for development; however, on very large monitors, the line lengths may get too long to read comfortably.

Fixed (or fixed-width) layouts keep the content at a particular width, measured in pixels, regardless of window size. While fixed layouts promise more predictable pages and line lengths, they may result in awkward empty space on large monitors. There is also a risk of users missing out on content on the right edge if their browsers are not as wide as the layout.

Monitor Color

Color will never look the same from monitor to monitor so as a web designer we must:

  • Let go of precise color control
  • Simulate alternative Gamma settings while you design
  • Use transparent images for smooth transitions to the background.
Know your Audience

How would you design differently for these 3 unique scenarios?

  • Scenario 1: A site that sells educational toys
  • Scenario 2: A site with resources for professional graphic designers
  • Scenario 3: A site used to share company information for in-house use only (also know as a intranet).
Web Critiques: Knowing your Target Audience

Who are the target audiences for each of these three websites?

Types of Websites

How are the website types different from one another?
What are the different goals for the website types?
Who are the different audiences for the website types?

Personal websites
Jason Santa Maria

Commercial websites
R/GA
Morphix Design Studio

Organizational/Non-Profit websites
Informational/Brochure websites
Educational websites
Sci-Arc

Entertainment websites
Hulu
The Fader

News websites
New York Times
Los Angeles Times

E-commerce websites

Photo/Video Sharing websites
Vimeo
Art in my Coffee

Social Media websites
Community Building websites
Behance

Mobile websites
BBC mobile website

Blogs
Friends With You
Design Observer

Examples of Flash websites

Lidu
http://www.lidu.fr/n/news.html
Wonderwall
http://wonder-wall.com

Site Design
Web Design Fundamentals | by James Williamson

View this entire course and more in the lynda.com Online Training Library®.
Overview of Web Design Process
.

Please read the information above also located at: http://www.everythingaboutweb.com/beginner/web-design-process/

As mentioned, there are many approaches, below is the Web Design Process from our textbook:

  1. Conceptualize and research.
  2. Create and organize content.
  3. Develop the “look and feel.”
  4. Produce a working prototype.
  5. Test it
  6. Launch the site.
  7. Maintain.
1. Conceptualize and Research

Some Questions Before You Begin:

Strategy

  • Why are you creating this web site? What do you expect to
  • accomplish?
  • What are you offering your audience?
  • What do you want users to do on your web site?
  • After they’ve left?
  • What brings your visitors back?

General Site Description

  • What kind of site is it? (Purely promotional? Info-gathering?
  • A publication? A point of sale?)
  • What features will it have?
  • What are your most important messages?
  • Who are your competitors? What are they doing right? What
  • could be improved upon?

Target Audience

  • Who is your primary audience?
  • How Internet-savvy are they? How technically savvy?
  • Can you make assumptions about an average user’s
  • connection speed? Platform? Monitor size? Browser use?
  • How often do you expect them to visit your site? How long
  • will they stay during an average visit?

Content

  • Who is responsible for generating original content?
  • How will content be submitted (process and format)?
  • How often will the information be updated (daily, weekly,
  • monthly)?

Resources

  • What resources have you dedicated to the site (budget, staff, time)?
  • Does the site require a full content management system?
  • Can maintenance be handled by the client’s staff?
  • Do you have a server for your site?
  • Have you registered a domain name for your site?

Graphic Look and Feel

  • Are you envisioning a certain look and feel for the site?
  • Do you have existing standards, such as logos and colors, that must be incorporated?
  • Is the site part of a larger site or group of sites with design standards that need to be matched?
  • What are some other web sites you like? What do you like about them? What sites do you not like?
2. Create and Organize Content
  • Content creation
  • Information design
3. Develop the “Look and Feel”
  • Sketch it
  • The art direction process
4. Produce a Working Prototype
5. Test It
  • Basic quality check: What are the questions you need to address?
  • Browser environment testing: What is the criteria you use when testing?
  • User testing: What are some questions you might want to answer?
6. Launch the Site
7. Maintain the Site
Preparing Design Comps
.

Please read the information above also located at: http://www.everythingaboutweb.com/beginner/preparing-design-comps/

Information Architecture (Information Design)

Once you’ve got content—or at least a very clear idea of what content you will have—the next step is to organize the content so it will be easily and intuitively accessible to your audience. For large sites, the information design may be handled by a specialist in information architecture. It might also be decided by a team made up of designers and the client. Even personal sites require attention to the division and organization of information. Again, this is a time for lists and sketchbooks. Get everything that you want in the site out there on the table. Organize it by importance, timeliness, category, and so on. Decide what goes on the home page and what gets divided into sections. Think about how your users would expect to find information on your site and design with their needs and assumptions in mind. The result of the information design phase may be a diagram (often called a site map) that reveals the overall “shape” of the site. Pages in diagrams are usually represented by rectangles; arrows indicate links between pages or sections of the site. The site map gives designers a sense of the scale of the site and how sections are related, and aids in the navigation design.

Please read the following: http://www.uxbooth.com/blog/complete-beginners-guide-to-information-architecture/

Site Maps
An example of a site map

Download the site map example here: Monday May Design Site Map

How to create a Site Map in Illustrator

Please read the following: http://www.ehow.com/how_6785412_create-website-sitemap-illustrator.html



Comments

  1. Jonathan Pehrson October 24th

    Comment Arrow

    My tumblr account is:
    http://jtpehrson.tumblr.com/


  2. Isabel Cynthia Soto October 24th


  3. Madison Woodruff October 25th


  4. Jonathan Pehrson October 25th

    Comment Arrow

    my tumblr account is:
    htttp://jtpehrson.tumblr.com


  5. Alex Nilsson October 26th


  6. Chrissy Wahlstrom October 26th

    Comment Arrow

    Two hours ago I created my first tumblr acct…and I’m back..
    :)


  7. Keishan Moseley October 26th

    Comment Arrow

    keishanmoseley.tumblr.com ~ Keishan Moseley


  8. Layla Shapiro October 26th


  9. Griffin Davis October 28th


  10. Emma Andersson October 30th


  11. Emma Lundin October 30th


  12. Linn Johansson October 31st


  13. Jordan Sanchez October 31st


  14. Jennifer Choi October 31st


  15. Jazmyn Michel October 31st


  16. Gregg G October 31st


  17. Sara Sultanali November 1st


  18. Sara Sultanali November 1st


  19. Dalya Perelman November 1st


  20. Marina Zabavsky November 2nd


  21. Marina Zabavsky November 4th

    Comment Arrow

    http://
    zabavsky.tumblr.com


  22. Laikin Carter November 9th


Add Yours

  • Author Avatar

    YOU


Comment Arrow




About Author

jamie

Instructor for Graphic Design 65