Final project

Link to final project

For reference links

highlight navigation
http://www.creativepro.com/article/dreamweaver-how-create-you-are-here-navigation-links

larger image overlay
http://www.dynamicdrive.com/dynamicindex4/lightbox/index.htm

adding video
www.izzyvideo.com

Week 12

OLA buildout
With the help of Jenn I was able to complete the buildout, it’s much better than the first draft!

Articles:
Killer Web Content
The one thing that I took away from this article is that “content that works on the Web has one key characteristic: it is customer-centric. The content that doesn’t work on the Web also has one key characteristic: it is organization-centric.” They want to know, what’s in it for me and they want to know quickly.

CSS Cheat Sheet
This article included 2 cheat sheets, the first covers the basics of CSS and the second is a CSS layout cheat sheet. They both seem to be really helpful, actually now that I’ve printed them out I am going to go back to my files and try to fix them. I’m sure this is something I’ll be referring to often, it’s nice to have it all in one spot, clearly and simply.

How we really use the web
This article details on 3 facts of life:
1. We don’t read pages, we scan them. 
This is something that I struggle with when building my website for DPCF, I know people don’t read everything so I’m trying to decide what’s most important and where to place it so that when someone is looking at the site, in a hurry (like we all tend to do), they can find what they are looking for quickly and easily.
2. We don’t make optimal choices. We suffice.
This idea goes along with number 1, trying to find info in a hurry, if we see a link, we’ll probably click on it without a lot to lose. We don’t really weigh the options beforehand because sometimes that won’t help you anyway. This also reminds us that if our website is slow-loading people may not stick around to see what’s on your site.
3. We don’t figure out how things work. We muddle through.
We do this for 2 reasons, we really don’t care and secondly, we found a way that works so we stick to it. But it can be inefficient so it’s important to make it as easy as possible for users.

Week 11

This is a link to the DigitalJenn website classwork.

Articles:

Understanding CSS
CSS Page Layout Basics
ID and Class Rules
CSS Zen Garden

Lesson 10 from Dreamweaver book

I’m almost embarrassed to put up a link to my OLA template buildout but here it is. I had so much trouble with this, to name a few problems: couldn’t get text on header to come down, the main problem-getting my content in the right place as well as in 3 columns versus one big one (so frustrating), and I don’t know how to get my footer text to come down (I’m guessing I’m doing the same thing to cause this problem as the first).

Final Project Comps

Here is my revised Home Page comp for my final project as well as the Contact Page for my website. As far as my home page goes, I made some slight changes after DPCF decided I had a little more flexibility with the images used. I’m a little happier with how it’s turning out.

Week 10

From table-based to tableless web design with CSS 
Throughout this exercise they never told you to save or rename any files and there were several so I took the last one that I did and included the link here. It seems that one had the most changes anyway. I thought this exercise was good in reinforcing CSS rules and when to use which selector but again, it’s one of those follow-along things that I wonder at the end, how much did I really get out of it.

Videos:
The Complete Design Process: http://tv.adobe.com/#vi+f1498v1658
Creating Interactive Prototypes: http://tv.adobe.com/#vi+f1498v1660
Rapid Prototyping: http://tv.adobe.com/#vi+f1498v1659
Information and Interaction Design: http://tv.adobe.com/#vi+f1498v1661
Quickly Transform Photoshop Layouts: http://tv.adobe.com/#vi+f15627v1000
Dreamweaver Integration: http://tv.adobe.com/#vi+f1592v1752

Design Comps for Final Project

I basically had the same layout for my two design comps for my final project’s homepage but I’m really struggling with the colors. In the first comp I like the picture at the top and the gold and teal (foundation’s colors) used throughout but I originally created the one with just gold and teal. I think the second is a little flat looking. I’m glad we had to create 2 versions since it forced me to play around with it a little more. I’m still not 100% happy with it but I’m getting closer.

Revised OLA template

Here is my revised OLA template, I didn’t make too many layout changes besides making it a 4 column grid and making all margins even. I tried using smart guides to determine where I was going to put the text. I added some noise to the navigation bar on the left and changed the font for the body text. I wanted to make space for an image but couldn’t think of what sort of image would have been used, I figured a column could be replaced with an image or an image could replace an additional headline.

Week 9

Dreamweaver Book:
The first part of Chapter 6, Our Clients from the Dreamweaver book was straight-forward, it was interesting to see how to create the highlight on the header of the page. The second part, Santorini, adding a spry accordion, was all new information for me and I’m sure will be useful in the future.

I thought Chapter 7 from the Dreamweaver book was fine to follow along with but I didn’t feel like I knew what I was doing the all the time. Sometimes I had to stop and try to find out the reason I was doing certain steps. I don’t think it’s always explained very well in the book. I found it very helpful to figure out how to use placeholder images as well as how to change column size.

Articles:
Code Style’s Combined Font Survey Results
This article shows fonts most common on all systems, as of March 14, 2009, Microsoft Sans Seriff is installed on 99.59%; this is really useful when considering which fonts you want to use for your website. I think it makes the designer more confident that many users would be able to read the site how you intended.

Designing with Grids
This article pointed out depending on content (and amount of content) certain grids may work better. I really like the idea of images being a part of the grid in the section “Break out of the box,” it reminded me of the Chapter 7 exercise in the Dreamweaver book, lining up the text to the images. It gives a reference point and sometimes the unsymmetrical images seem very natural. I actually really like this website, visually, it could be an example of when they say to put grids on an eye catching background.

CSS Typography article reiterated what we’ve read in the past, embrace the flexibility of the web, type and how people are going to be viewing your site. Some options to improve readability and aesthetics with CSS are: line-height, word-spacing, letter-spacing, text-transform, font-variant, text-indent, text-align, first-letter, and first-line property. Headers are also very important since most people tend to scan rather than read so he suggests playing around with headers as well.

The Prototyping article defined prototyping as some representation of a design idea, it’s part of the pre-planning process and are a cost-effective way of experimenting with ideas. Reasons for a prototype: 1. they make the design better: can see interactivity of user and the process can help the designer see what works better. 2. facilitate communication: help get ideas out of designers heads to others and communicate goals.3. enable user input and usability assessment: he suggests finding people similar to the target audience and not to schedule this at the end of the design phase, it’s important to give the designer plenty of time to use the information they’ve gathered. 4. help assess technical feasibility and reduce development time: it simulates how it will be constructed, if you run into technical problems, you do so sooner rather than later. He discusses different approaches to prototyping: storyboard, paper prototypes and clickable prototypes.

Template Design

I thought this exercise was kind of difficult because I did it right after finishing my design document and I found myself wanting to go along with the theme I had there. I was trying to think in general terms since this could possibly be a template, I figured the banner color at the top could change depending on the department but I tried to make it broad and simple enough to work for any of the departments. Here is the storyboard and my design comp of the template.