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
|
1 2 3 4 5 6 7 8 9 |
<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> |
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.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
<!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 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
