LA History Archive Home

An introduction to design, working with images and websites.

Resources
       
Design Overview

One rule that many designers follow is "form follows function." This means that the form of the design should reflect the goal or purpose of the design project. The more specific you can get about the objectives of the design project, the better. Because we know we are creating a website, part of the form question is predetermined. However, the function of the website should determine its design. Ask yourself, is the project intended to:

Educate about a topic? how?
Entertain its visitors in a specific way?
Connect people to other people? why?
Publicize a temporary event, or is it intended to be permanent?

Asking yourself these questions will assist you throughout the design process.

The aesthetics, or the beauty, of the design should follow this rule. The best projects use evidence that supports its goals. When possible, use images or design elements from the resources you have gathered.

Successful designers consider the audience of their projects. Often this can be multiple sets of people. A designer must consider who will visit the website and how they may interact with the design. For example, an academic audience is one that will be looking at your project in a critically engaged manner that expects polished, clear writing. Consider if your audienceis comfortable with the Internet, and how easy it is to navigate. For example, if you are making a website for first time web users, you should be very clear in what is a link and what is not link. If you are making the website for a group of gamers, you might make hidden spots in the design in enhance the interactivity of the visitor experience. It depends on the goal of the website and what you think your audience would enjoy.

A good rule of thumb is that simplicity and intentionality lead to elegant design.

A good way to ensure that your project is successful is to preview it to different people. Be sure to ask them to look for errors so that you may fix them for the project's public launch. A friend who is willing to really consider your work and provide constructive feedback can be the difference between success and failure. Be sure to reciprocate in kind.

Website Design Overview

Building a website takes 4 steps: the design of pages with prepared images; the creation of a original URL to associate with the website; the creation of a hosting site to associate with the URL; the sending of prepared files and images to the hosted site. In order to understand the principles of website design, all of the components are touched upon here.

The transmission of vast amounts of data over the World Wide Web is possible through the development of code and networks of communication. When you open a web page, the web browser (Internet Explorer/Safari) is reading the code on an html page. The places that house the files (html pages and image files) for the website are servers or server networks.

Websites run using different code (sometimes called scripts) and the most basic code is html. For code to be successful, the objects that it refers to (like images, video, or other websites) need to be present. Unsuccessful code can refer to objects that aren't in the location the code is pointing to--either the file has been removed or the code was misdirected originally (often through a mispelling or poor file management).

In web design, proper file management is essential. Because of the relationship to code and design objects, it is essential that you keep all of your files in one permanent site on your computer. Keep all files saved in one spot in order to ensure the code points to the correct spot and to assist yourself in finding relevent files. Storyboarding your project before beginning will assist in developing a clear plan of attack.

Storyboards are excellent tools for conveying the intended interactivity of an interactive design like a website. Storyboards are visual plans showing the intended process of activity between the viewer and the design project, often in used in animation. For example, designers should consider how a visitor would travel through the project in a specific series of steps or pages. If you want to create a website of one page, consider how you will organize the information on the page. If the website will be organized by different themes, will there by a menu that links back to a home page?

 
*getting a url
'URL' is an acronym for Uniform Resource Locator and is a reference (an address) to a resource on the Internet. URLs most often are of the "http" variety and serve as an address for a website. You may obtain a URL through most web hosting providers.
*hosting
After obtaining a URL for your website, you must get a hosting account on a server, usually through a commercial source. You will create an account and have your URL point to the account (the provider can walk you through this easily) and you can add on extra features like e-mail accounts.
*ftping
After you have prepared your files (images and html pages); and after you have obtained a URL; and after you have created a hosting account that points to the URL you can send your files to the hosted account. This process is called FTPing or File Transfer Protocal. There are different programs to FTP files and your web hosting providers will provide links to free programs. The most popular are Transmit and Fetch.

*Studio provides these processes for this project--they are included here for overview. Interested students can learn more about these one-on-one with Sharon.

Working with digital Images  
file types

There are different different image files including bmp, gif, jpg/jpeg, pdf and tiffs. Each file type has a function and as a result has different properties:

Bmps and gifs are smaller digital files associated with cartoons or graphic elements like titles or buttons. These file types hold less data and as a result they load quickly on the Internet.

Jpgs/jpegs are files that are associated with photographs and more detailed images like some artwork. Jpegs store more data and detail and are bigger than bmps and gifs. They are widely used on the Internet.

Tiffs are files used for artwork or high quality print projects while in production in Photoshop and then converted to PDFs for printers for paper productions like magazines or books.

PDFS are used by printers because they seal the information in high quality file and compress it so that it is universally read by different printer programs. PDFS may also be typographically heavy files.

working with cameras
The Studio is loaning this class both video and still digitial cameras that we will go over with you in class.
scanning
The Studio is loaning the class a scanner. If you find images to bring in, we will give you a short tutorial on scanning. There are forms on the laptop to show you how to scan as well with the scanner provided.
Introduction to Photoshop

The tasks shown here will most likely be the same steps you will take if you do not have Photoshop.

There are thousands of things you can do in Photoshop with digital images. This tutorial is showing you three things. After you b+ecome familiar with the tasks here, take time to make copies of files to experiment with using the different choices in Photoshop.

Tip: Create copies of all of your images prior to making any changes in the originals. Save the copies in a different folder and use one set to format or manipulate.

FILE MENU

open
save
close


Photoshop has file menus at the top of the screen that include "file," "edit,""image," "layer," "select," "filter," "analysis," "3D," "view," "window," and "help."

OPENING A FILE
To open an image, go to
FILE then select OPEN and locate the folder and file you wish to open.
Pick the file you want to work on. Select OPEN.

SAVING A FILE
Go to the FILE menu and select SAVE.
On certain files, you will be asked what size to save the file using a scale of 1 to 12, (12 being best), always select the highest quality or size to save it.

CLOSING A FILE
Go the the FILE menu and select CLOSE.

 

TOOLBAR

move
rectangular marquee

You will also see a toolbar (see illustration) with different tools that you can pick, from selecting an image to painting on the image, to erasing the image, to adding text to an image.

Two essential tools for you to learn are the MOVE tool and the RECTANGULAR MARQUEE tool.

EDIT MENU

undo an action

To UNDO an action you have done

Go to the EDIT menu and select UNDO or STEP BACKWARD.

IMAGE MENU

resizing an image

Digital images have two types of sizes--the resolution and dots per inch (dpi) and the scale of the image---the inches or centimeters that reflect its scale.

The resolution of an image is dependent upon its final output.
Web images should be 72 dpi
Print images should be 300 -350 dpi.
HDTV images should be 1080 dpi.

The scale of images on the web should reflect the sizes of screens that will be looking at the web page. A good rule of thumb on current web pages is 10 inches wide or 720 pixels.

RESIZING AN IMAGE

Go to the IMAGE MENU

Select IMAGE SIZE
Change to coordinates in the dialog box so that you are looking at the DOCUMENT SIZE in inches.
Make sure your resolution is set to 72 dpi first, then resize the DOCUMENT SIZE to the proportions you want.

IMAGE MENU
rotating an image

ROTATING AN IMAGE

Go to the IMAGE menu

Select IMAGE ROTATE

The dialog box will give you a choice of adding the degrees of rotation clockwise, counter clockwise, and arbitrary which allows you to determine a more precise rotation. (see Illustration)

VIEW MENU

TOOLBAR

IMAGE MENU

cropping an image

 

Be sure all of the image is in view by selecting the VIEW menu and selecting "FIT ON SCREEN"

Select the MARQUEE tool from the toolbar and select the part of the image you want to keep. Once you have it selected, go to IMAGE menu and select "CROP."

Introduction to Dreamweaver

As in the case with the Photoshop tutorial, this is just an introduction to a very complex program. This tutorial will show you how to make a basic web page. For the class project, you will be divided into groups and each group will be responsible for creating part of the website and different pages. Dreamweaver can be accessed through three different views, 'Code,' 'Split,' and 'Design' view. We will be using the 'Design' view for the most part in this tutorial but you should toggle between these views, using the buttons at the top of an open page to see the different ways of understanding the code connections. The first page of every website is named 'index.html'

FILE MENU

open
save
close

Like Photoshop, Dreamweaver has different ways of doing the same task and different tools and menus. For this tutorial we will be covering the FILE, INSERT, MODIFY & WINDOW MENUS and the PROPERTY INSPECTOR.

OPENING A FILE
To open an image, go to
FILE then select OPEN and locate the folder and file you wish to open.
Pick the file you want to work on. Select OPEN.

SAVING A FILE
Go to the FILE menu and select SAVE.

CLOSING A FILE
Go the the FILE menu and select CLOSE.

  titles When you visit a web page, there is a title at the top of each page. This one should say: "Design Overview."
INSERT MENU
inserting a table

Like programs such as Microsoft Word, it is often best to control the design of the page using tables.

INSERTING A TABLE
Go to the INSERT menu and select TABLE.
A dialog box will appear asking how many rows and columns to include in the table and what the spacing and width of the table should be. After entering the dimensions you desire, select OK.

INSERT MENU
inserting a link

There are different types of links you can make in html code including hyperlinks to different pages and website and e-mail links. To make a link select the text to be linked and go to the INSERT menu and select the appropriate link. For a hyperlink, a dialog box will open up that will ask you to confirm what is being linked, the address to link it to, the target for the link (will the page open in the same page or a new page). Links to pages should begin "http://"

example: "http://www.lahistoryarchive.org"


Links to e-mail addresses should begin "mailto://"

example: "mailto://thesocalstudio@gmail.com/

INSERT MENU
inserting an image

INSERTING AN IMAGE

Go to the INSERT menu and select IMAGE and locate the image on the computer. (Remember file management and to keep your images in one place.)

Once you select the file, Dreamweaver will ask you to provide a short name for the image for those who are visually impaired or use reader programs to view web pages. Be sure to provide a short clear name in the 'alt text' field. Select 'OK.'

All resizing or manipulating of images should be done prior to inserting them into webpages. You cannot resize an image through Dreamweaver.

MODIFY MENU changing page properties like color, font attributes, etc.

To modify parts of your page like text or tables, use the MODIFY menu.

You can change the page properties by selecting PAGE PROPERTIES. Spend time here playing with the size and colors you want to use in your web design. This is where you can define the attributes for a template page. Consider making a template if you are making more than one page should look the same across an entire project.

FILE MENU
previewing your pages

Be sure to preview how your web page will look like in a browser by going to the FILE menu and selecting 'Preview in Browser.' Select 'Safari.'

   
Tips
 
Save often: Consider saving the file under different working names if you are worried about changing too much of your design elements.
Make copies of original files. The best way to learn graphic design is by making mistakes. Make sure your mistakes are not too devastating by making back-up files.
Form follows function: Leave the bells and whistles to places where they may be relevent in a design. If you are doing a website about trains, whistles may be appropriate. However, refrain from using random design choices.
Use sources or the subject to influence design.

Be open to peer review and criticism.

Thinking about A Guide to your Los Angeles

Interviewing the Neighborhood
Working with a classmate and using the flip camera, interview 2 - 3 adults on camera about the neighborhood you have chosen. Be sure to get their signed permission to use the interview on the web --see handout for permission forms. Try to keep the interviews under 7 minutes. If possible, check out a camera and take photographs at the same time. Nancy and Sharon will take the video and upload it to youtube.com through the Studio's channel. We will be using the videos in the final project.

Storyboarding the Project's web page
Storyboard web page in groups for in-class creation with Sharon and Nancy. Be sure to use photographs and items gathered from the timeline or map. Share your design with the class to get their opinion and support. We want the website to be consistent in its style. We will be using the school's colors as the colors for the website. You will either be assisting in a page dedicated either to the MAP, the TIMELINE, the INTRODUCTION, or the REFERENCES page.

If you were assigned the MAP
Assign someone from the group to keep track of all of your references. This person should keep a written list of all sources used to give to someone from the REFERENCES group. Assign a representative to discuss your work with someone with your classmates writing the INTRODUCTION. This person will need to explain how your group is making the map. Review all the resources gathered to date including the binder and the online resources. Read all of your classmates' photo-essays and pick 10 entries to add to the MAP. Read the binder of articles from the LAT and add 20 entries to the MAP. Go through the photographs and interviews that have been gathered to date by the class and pick, 10 - 15 photographs and interviews to illustrate the border of the map--be sure to pick files that are tied to a location and relevent to the MAP. Working with Sharon, storyboard a web page that integrates these different assets. We will also put the coordinates on a map with google maps.

If you were assigned the TIMELINE
Assign a representative to discuss your work with someone with your classmates writing the INTRODUCTION.This person will need to explain how your group is making the map. Review all the resources gathered to date including the binder and the online resources. Read all of your classmates' photo-essays and pick 10 entries to add to the TIMELINE.
Read the binder of articles from the LAT and add 20 entries to the TIMELINE. Go through the photograghs and interviews that have been gathered to date by the class and pick, 10 - 15 photographs and interviews to illustrate the border of the map--be sure to pick files that are tied to a location and relevent to the TIMELINE. Working with Sharon, storyboard a web page that integrates these different assets.

If you were assigned the INTRODUCTION
Review all the resources gathered to date including the binder and the online resources. Read all of your classmates' photo-essays. Go through the photograghs and interviews that have been gathered to date by the class. Meet with representatives from each group to write an introduction to the website. In writing the introduction answer the following questions:

What is the goal of the website?
How does it achieve its goals?
What are some highlights of history that you learned about MAHS in doing this?
Which students worked what parts of the project?
What are the best things about making this a web project?
Why is the history of MAHS important?

Be sure to develop thoughtful answers to each question that can be supported by the website. Make sure to have the representatives from each group review and approve of your writing. Remember--you are representing their work too.

If you were assigned the REFERENCES
Review all the resources gathered to date including the binder and the online resources. Read all of your classmates' photo-essays. Go through the photographs and interviews that have been gathered to date by the class. Meet with representatives from each group to ensure you have all of the references listed that the students use. Review the different sources that students use in creating the website including yearbooks, newspapers, interviews, and photographs. Keep track of the author, title of file (if applicable), year of source, and any other relevent information like page number or location of subject. Keep track of what are the strengths of different sections and the types of information that various sources provide.

copyright