Adobe Software Hates MeBy Natalie KeeMay 15, 2010

4 Attempts 1st: Organically, following instructions

and reusing CSS from 7 things project

2nd: Replicate Head First website

3rd: Replicate online template,

transcribing CSS from model website

4th: Start from scratch, copying &

pasting CSS from class demos

Final Project: The Process

1st Attempt

Design Inspiration

Wireframe

Layout Inspiration

Gathered Images

Photoshop Images

1st Attempt

2nd Attempt

2nd Attempt

3rd Attempt

3rd Attempt

4th Attempt

4th Attempt

4th Attempt

Not my forte Too unstructured, organic, free-spirited (for me) Too many choices/possible approaches/variables to use (eg. pure CSS &

HTML, DW panels, DW templates, online templates, copy & pasting code) Fear of commitment (to a design) Unable to focus on one approach Perfectionism and procrastination New iMac at home; more accustomed to PCs Rusty Photoshop skills I haven’t been so bad at something since high school and college math I’m so embarrassed! I’m also especially cranky because I have a bruise on my butt cheek the

size of an oreo cookie and there’s only 1 episode of House and 2 episodes of Game of Thrones left!

Challenges

Project MUST contain (at

minimum) 

No less than 5 and no more than 10 pages Each page must contain appropriate text and images that provide information and value to the target

audience Each page must contain a persistent navigation to the other pages in the site. Pages, which required the

use of the browser back button for navigation, will incur penalty.  All pages throughout the site must work together as a whole through the use of design, color,

typography, and layout.  Each page must contain appropriate page titles Your site must use an external CSS stylesheet with at least 6 styles. Each page must contain valid HTML 5 markup Each page must use CSS for all positioning, and formatting.  You should use an image sprite for repeating images. You should use one animated gif or a png with transparency on your site. You must use the google web font api on your site. Each image you use must use a descriptive alt property. It must be longer than one word, but no longer

than one sentence.  One (1) form with (four (4) fields minimum, server-side processing must be used to collect save form

data (to a text file or send information via e-mail) and to display a confirmation page) Form must reside on project site (link to an external form is not allowed

Final Project Requirements

Solicit help. I’m not lazy Last semester at UCBX, I took a course in FrameMaker. We were required to use 5

“features” of the software. I used every single one mentioned in the textbook. I got an

A+. My teacher wrote me a recommendation, stating, “It was a pleasure to help Natalie--

with her I felt much more like a facilitator than an instructor, because she always owned

the responsibility for learning… I would expect Natalie to thrive in any environment that

provides interesting challenges, and recommend her highly.”

At the risk of sounding egotistical, I’m normally good at whatever I do. I’m accustomed

to giving presentations that I’ve rehearsed for hours, presentations with compelling

data, relevant charts and diagrams, poignant observations, and educated

recommendations that I make with conviction. I’m accustomed to walking out of

meetings with co-workers telling me I “knocked it out of the ball park”.

I take pride in my work ethic. I take pride in my ability to follow directions to a T. I take

pride in my fastidious attention to detail. And I normally take pride in my predilection to

exceed expectations.

I know that this isn’t 5th grade; you don’t get graded based upon your effort. But I just

want to clarify that my failure to complete the project has nothing to do with a lack of

effort, lack of commitment to the class, or unwillingness to try. I’m just really bad at this!

The Purpose of my Presentation

7 Things

From Right to Left, Top to Bottom:

Lab 1 – HowlLab 1 – HowlLab 2 – RecipeDemo 1 – Using PSD, saving for webDemo 2 – Creating buttonsDemo 3 – CascadesDemo 4 – Google Web FontDemo 5 – PositioningDemo 6 – ResetDemo 7 – Sprites

Class Demos

Note-Taking

Moving On Another strategy? Alternate methodology? A more systematic approach? Advice? Help!

Next Steps