Web+Design+Projects

=Web Design Projects =

Project 1 | Project 2

Web Project 1
Develop a website using an editing program (Dreamweaver or Kompozer) and post to a domain.

Visit my website here.

Process | Design | Competency 

**Process**
To create this website, I first installed Adobe CS5 w/ Dreamweaver on to my computer. I opened Dreamweaver to look at the interface and study some of the tools, then watched about ten tutorials on YouTube. I then created a folder called "murphywa1" and new site in Dreamweaver and saved my homepage as index.html. I then created three other pages for my site and named them murphy2.html, murphy3.html, and murphy4.html, respectively. I created a background image and banner for my site in Photoshop and saved those files in my "murphywa1" folder. Then I edited the page properties and created the look of the site using CSS. I inserted tables in my website and formatted the background and added links, images, and video within the pages.

The purpose of my site is to inform university faculty and students in the College of Education of my background and the technology and training the Office of Instructional Support (my workplace) has to offer to help faculty integrate technology into their instruction, or to help students complete assignments using technology.

Some of the new things I learned were what the difference between CSS and html were, and how to modify page properties in both CSS and html. I also learned how to navigate Dreamweaver and post my site to a domain. I learned basic webpage creation and html code in a previous course through SLIS this summer, but this assignment took me past my comfort zone and I often found myself stuck and looking to YouTube or other sites for information on how to create the site. Figuring out how to get to the desired result as well as designing my site were challenges. I hope to be able to create more complicated sites in the future with the tips and tools I've learned while completing this assignment.

**Design**
According to the Web Style Guide, 3rd Edition, the six steps to the design process are: I followed these six steps by making my pages follow a straight linear sequence - "Straight sequences are the most appropriate organization for __//training or education sites//__, for example, in which the user is expected to progress through a fixed set of material and the only links are those that support the linear navigation path (3.4)" I followed the content guidelines: <span style="font-family: Arial,Helvetica,sans-serif;">Web content is so multifaceted that few general rules apply, but the following common practices make content areas easier to use: <span style="font-family: Arial,Helvetica,sans-serif;">I also considered the elements of visual design when designing my pages noting that "The primary purposes of graphic design are to: <span style="font-family: Arial,Helvetica,sans-serif;">I considered this when designing the text, images, colors, and contrast of my page and making each page in the site consistent in design (7.2). <span style="font-family: Arial,Helvetica,sans-serif;">
 * 1) <span style="font-family: Arial,Helvetica,sans-serif;">Site definition and planning
 * 2) <span style="font-family: Arial,Helvetica,sans-serif;">Information architecture
 * 3) <span style="font-family: Arial,Helvetica,sans-serif;">Site design
 * 4) <span style="font-family: Arial,Helvetica,sans-serif;">Site construction
 * 5) <span style="font-family: Arial,Helvetica,sans-serif;">Site marketing
 * 6) <span style="font-family: Arial,Helvetica,sans-serif;">Tracking, evaluation, and maintenance
 * <span style="font-family: Arial,Helvetica,sans-serif;">Page titles. Don’t bury the lead. Every page needs a visible name near the top. For all kinds of logical, editorial, accessibility, search visibility, and common-sense reasons, use an heading at the top of the page to let users know what the page is about.
 * <span style="font-family: Arial,Helvetica,sans-serif;">Breadcrumb navigation. The top of the content area is the most common location for breadcrumb navigation.
 * <span style="font-family: Arial,Helvetica,sans-serif;">Jump-to-top links. Jump links are a nice refinement for long pages. These links don’t need to be elaborate—just a top of page link will do, but a small up-arrow icon offers good reinforcement.
 * <span style="font-family: Arial,Helvetica,sans-serif;">Rules. These elements can easily be overused and lead to a cluttered design. Use css to keep page rules as unobtrusive as possible. When in doubt, skip rules and use a little white space to create visual content groupings or separations.
 * <span style="font-family: Arial,Helvetica,sans-serif;">Paging navigation. In multipage sequences it is convenient to have simple text links at the top and bottom of the page to move the reader to the previous or next pages in the sequence. In longer sequences it is helpful to provide information describing where they are in the series.
 * <span style="font-family: Arial,Helvetica,sans-serif;">Dates. Publication and update dates are useful for assessing the currency and relevance of content. In news and magazine sites the publication date should appear at the top of the page. Other sites should display a last-updated date at the bottom of the content area (fig. 6.7).
 * <span style="font-family: Arial,Helvetica,sans-serif;">Create a clear visual hierarchy of contrast, so you can see at a glance what is important and what is peripheral
 * <span style="font-family: Arial,Helvetica,sans-serif;">Define functional regions of the page
 * <span style="font-family: Arial,Helvetica,sans-serif;">Group page elements that are related, so that you can see structure in the content

<span style="font-family: Arial,Helvetica,sans-serif;">**Competency**
<span style="font-family: Arial,Helvetica,sans-serif;">Level One <span style="font-family: Arial,Helvetica,sans-serif;">Level Two <span style="font-family: Arial,Helvetica,sans-serif;">Level Three
 * <span style="font-family: Arial,Helvetica,sans-serif;">Create a site with Dreamweaver
 * <span style="font-family: Arial,Helvetica,sans-serif;">Create a new page
 * <span style="font-family: Arial,Helvetica,sans-serif;">Enter and format text
 * <span style="font-family: Arial,Helvetica,sans-serif;">Insert an image
 * <span style="font-family: Arial,Helvetica,sans-serif;">Create a hyperlink
 * <span style="font-family: Arial,Helvetica,sans-serif;">Create an email link
 * <span style="font-family: Arial,Helvetica,sans-serif;">Set the title
 * <span style="font-family: Arial,Helvetica,sans-serif;">Create an ordered or unordered list
 * <span style="font-family: Arial,Helvetica,sans-serif;">Preview a page in a browser
 * <span style="font-family: Arial,Helvetica,sans-serif;">Insert/embed media (such as swf, mov or wmv)
 * <span style="font-family: Arial,Helvetica,sans-serif;">Insert anchors where appropriate
 * <span style="font-family: Arial,Helvetica,sans-serif;">Modify Page Properties
 * <span style="font-family: Arial,Helvetica,sans-serif;">Create or modify CSS
 * <span style="font-family: Arial,Helvetica,sans-serif;">Upload to a domain

<span style="font-family: Arial,Helvetica,sans-serif;">Web Design Project 2
<span style="font-family: Arial,Helvetica,sans-serif;">For my second web design project, I completed a revision of Project 1. Visit my revised site here.

<span style="font-family: Arial,Helvetica,sans-serif;">Revisions made:


 * <span style="font-family: Arial,Helvetica,sans-serif;">Changed link color from red to white and "always underline" for easier readability (all pages). This was in response to a suggestion since viewers stated that the red text was difficult to read.
 * <span style="font-family: Arial,Helvetica,sans-serif;">Decreased font size on "murphycatdesign" banner and linked to homepage (all pages). It was suggested the font was too large. I decreased the font size from 76pt. to 60pt. Linking to homepage makes navigation easier.
 * <span style="font-family: Arial,Helvetica,sans-serif;">Added "murphycatdesign" to window titles e.g. "murphycatdesign - Home" (all pages). This was suggested to improve navigation.
 * <span style="font-family: Arial,Helvetica,sans-serif;">Added white border around images on Portfolio page (murphy2). I wanted to make the images stand out more so they wouldn't blend with the background image.
 * <span style="font-family: Arial,Helvetica,sans-serif;">Increased cell padding and spacing on portfolio page so images were spread out and stood out more over background image (murphy2).
 * <span style="font-family: Arial,Helvetica,sans-serif;">Deleted anchors and links to anchors on Portfolio page (murphy2). It was suggested that since this page wasn't long, anchors weren't necessary and the anchor that directed readers to "More" of the portfolio didn't really lead them to a good point in the site.
 * <span style="font-family: Arial,Helvetica,sans-serif;">Added bullet points and indentation to list of "Training Provided" on Training page (murphy3). This was to make the list stand out more to the reader so they have quick and easy access to what training was available.
 * <span style="font-family: Arial,Helvetica,sans-serif;">Added "SMART/Polyvision Eno Interactive Whiteboard Training" to Training page (murphy3). I remembered that I have run training sessions on Polyvision Eno Interactive Whiteboards before, and have conducted SMART board training since the original website was created.

<span style="font-family: Arial,Helvetica,sans-serif;">Back to top