GD 65 Class 01A

Topics

The Basics
  • History of the Internet
  • How the Internet works
  • How a User Connects to the Internet
  • Browsers
  • Domain names
  • Web Hosting
  • Composition of a Web Page
  • Basic HTML
  • Web File Naming Conventions
  • File Organization
Web Design Basics
  • Target Audience
  • Design Process
  • Information Architecture
  • Site Maps

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

It’s important to know a little about how the internet works. Below is an infographic that gives you the basics.

How a User Connects to the Internet

Watch this video from lynda.com on How a User Connects to the Internet


Browsers

What is a browser?

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 Chrome and Firefox makes up the lion’s share (nearly 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.

Internet Explorer Firefox Chrome Safari Opera
8.9% 24.9% 59.2% 3.8% 1.8%

Resource: May 2014. 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 5%!

So, you’re ready to get started on creating a website. What are the two purchases you need to make to get started?


Domain Names

What is a domain name?


Every site has a domain name. Basically speaking, the name after “www.” is considered the domain name. The article below will give you some tips about registering a domain name.

Please read the information located at: http://www.everythingaboutweb.com/beginner/domain-name-registration/


Web Hosting

What is web hosting?


In order for a site to go “live” on the internet, it needs to be posted on a server. For more information about this, read the article below about web hosting.

Please read the information located at: http://www.everythingaboutweb.com/beginner/web-hosting/


Basic HTML

A simple example of a web page


A web page is made up of a group of tags. Take a look at the example below to get an idea of what a basic page looks like.

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.


Composition of a Website

A website lives on a server and 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)
  • CSS files (.css)
  • Font files (.eot, .svg, .ttf, .woff)
  • JavaScript files (.js)
  • Audio files (.mp3, .aif, .wav)
  • Video files and other multimedia files (QuickTime movies, .mp4, Flash etc.)

See the links to the directories below for examples. Take a look and note the various elements that comprise the website. Notice all the HTML files.

Holsom Website
Bratkuche Website

  • Can you find the .jpg, .gifs and .png images? Where are they located?
  • What about the JavaScript files… they end in .js and only one of the directories contain JavaScript 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 class.

Web File Naming Conventions

Naming files correctly is extremely important when building a website. Be sure you understand the rules.

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


File Organization (Website Directory Structure)

Equally important to naming conventions is file organization. Ignoring file organization at the beginning of your project will result it a tangled mess that will result in loads of lost time.

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


Web Design Basics


Defining your Target Audience

Read this article from Webdesigner Depot on Designing for your target audience http://scrible.com/s/iGpgg

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?


Monitor Resolution Size

Another big consideration is the target audiences’ monitor resolution size. What is the preference for this setting? Is most of your target audience most likely working on large computer monitors with a screen resolution over 1024? Or is it more likely they’re on laptops or mobile devices? This consideration has become more complicated since the rise in the usage of mobile devices. But here’s the basics:

Please note: The browser window’s top navigation and sides take up part of the window space so, to be safe, designers use a dimension smaller than the resolution size. And of course different browser windows (Safari, Firefox, Chrome, Internet Explorer, for example) take up different amounts of space– they are not the same. That said, there is some variation to the 990px recommended for this course. When optimizing for a 1024 x 768 monitor size, you’ll notice designers sometimes use 900px, or 950px, or 960px, or 1000px. There is not a hard rule on this. But, again, for this course I’ve made the decision about the dimension and have specified that the width needs to be 990px for your projects.

The height of the page should be as long as is necessary for the content.

So there isn’t a standard length or height in pixels. Do keep in mind the concept of “the fold.” “The fold’ for the monitor resolution size 1024 x 768 is around 560px. This means that you can’t see content that is below 560px without scrolling. So be sure to place the most important content (headings, navigation, etc.) above the fold. Also, you don’t want the content on the page to “scroll forever” so limit content so there isn’t too long of a scroll.


What does “above the fold” mean?


[Via: BaseKit – Your Website, Your Way!]
View Larger Image.

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 logo
  • 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)

Web Design Fundamentals

Web Design Process

Web Design has an unique process that differs from other types of design.

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


Information Architecture

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.


Site Maps

Information architecture, site maps, and wireframes

An example of a site map

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


How to Create a Site Map

There are several tools that can be used to create site maps. Visio and OmniGraffle are used by professional Information Architects. For this class, I suggest Illustrator, or Photoshop if you’re more familiar with it. Even Microsoft Word will work.

How to Create a Site Map in Illustrator

You may also find the following helpful: http://www.ehow.com/how_6785412_create-website-sitemap-illustrator.html


Next Page  >  Class 01B Notes

Leave a comment