InDesign Case Study

My crowning glory— or is it crowing glory? — for this semester wasn’t mastery of the course material for the course in visual thinking. Applying semiotics to imagery was rather interesting but the readings contained more words than images. They’d even describe images that weren’t included as if we were supposed to somehow see the painting or publication referenced.

Goodbye APA as a style guide. I was beginning to start emails with ” Shepherd (2011) stated that”. I now know the beauty of using a a guide but I think I’ll migrate over to the Associated Press (AP).

Hello InDesign from Adobe. Where have you been all my life? I’ve cast aside Microsoft Word with it’s finickiness (images that move around)  and lack of style control for objects and tables. I’ll still use as writing tool — the grammar checking is great! — but I’m moving on.

I figured out how to manage a large number of images and their captions. Using Adobe Bridge I was able to create metadata for each image. InDesign is smart enough to read the data and generate a caption. In the future I’d like to write  a book stuffed full of screenshots so this was important to me.

Styling, already familiar from Word and CSS, became easier as I worked with the tool. Tables and object styles are great tools for consistency. Running headers, sections, table of contents are now all easy as pie. Well, not pie because I’m not a great baker.

Take a gander at the paper if you like.  I couldn’t bear to explore an esoteric visual topic so I performed a case study for a non-profit website that I’m trying to improve. The paper examines five websites and how the designers created a visual hierarchy, consistent color palette, and a whole host of other visual cues. I can now move forward with the non-profit’s webdesign copying ideas from the best.

Interaction by Design is an asynchronous online module that covers material from the book The Perfect Online Course. You can listen my to my silky voice (ok, a bit nasally after the recent pollen count) narrate the material. There is a PDF that contains a list of of the topics covered and — as Tufte would say — a high fidelity version of the graphics and lists referenced.

I used a mind map to help me track the topics and their source files. I organized the content using each topic in a separate mind map. Once I created a Power Point master it was very easy to generate PPTs for each of those topics. I imported the PPTs into Captivate and added narration.

I will be watching BPOID on Twitter and the comments here  during the week of 3/28/2011 while this course module runs.

SPSU was recently ranked (81) by US News & World report. LinkedIn group buzz says this is the first time the magazine has ever ranked the school. Personally, I’d like to see a ranking out of engineering schools — not based on region.

US News & World Report College Ranking for SPSU

illustration

Macabre self portrait using skull symbols

Showing off my macabre sense of humor, I fulfilled the requirements of an Illustrator assignment combining a self portrait and symbols. The skull symbols ( found out in the wilds of the internet) are so fanciful and fun — they remind me of the Bone Garden Cantina near Chattahoochee Avenue in Atlanta.

Children's book cover created with Illustrator

For this assignment, a sample book cover, I used the Illustrator gradient mesh tool to add some realism to the sneaky eel. Regular gradient blends for the red fish. Trace function for some realistic looking coral. Also used a gradient mesh to add rays of light on the left side of the illustration.

Assignment – Design a web portal for SPSU University students. Tailor to student enrolled in the IID/IDC programs ( see idc.spsu and iid.spsu.edu for details on the programs). Oh please don’t throw me in that briar patch! I get to design something for the web — absolutely imaginary — and I don’t have to figure out how to implement it? No worrying about data sources and systems integrations?

Courses Visualization

Community/Portfolio Stream

I’ve posted a  document describing the thoughts behind the design and a link to the interactive Flash version. I used this as an opportunity to learn how to use Flash Catalyst. It is a new tool from Adobe that bridges the world between visual design — using tools like Photoshop and Illustrator — and the interactive web development world — Flex and Flash.  Flash Catalyst is wicked cool for putting together a good looking web application prototype that can transition over to Flex as  a starter project. You can also use it to create simple interactive pieces with scrolling panels and rollovers.

Prototype Design & Construction Discussion

Imaginary University Student Portal Assignment – Web Interactive Version

During last year’s web development class I was forced — forced, I say emphatically — to write a style guide for a website.  I found it a painful process but something I would recommend for any webmaster responsible for herding content creators.

The process of writing the guide helped me to think through the rules for new content. Imagine that you have five different authors of content. Each of them will put in some sort of formatting for layout ( via HTML and CSS). That is where content creation bogs down. Someone  must ensure that the content follows a set of formatting guidelines ( H2′s for headings and H3′s for subheadings ) so that the content has a consistent visual appearance.

The other part of the style guide — the part that related to word usage and punctuation — was useful for ending arguments. The AP Style Guide says that website is one word and not two. In my business, the vocabulary is constantly evolving so sometimes we have to make up the rules as we go along.

CS

Who knew that illustrating instructions could be so fun? For this assignment I was tasked with creating instructions — using as few words as possible — for the folding of a popout map. My office was littered with folded maps. I could do the task but how to bridge the “a miracle happens” moment?

Map Folding Illustration

Here’s the PDF in all of its glory.

Using Adobe Premiere Pro I assembled this movie for a kid’s movie club.

Rabbits in the Dog House

A software gal is learning new tricks!  Using Illustrator I drew the chessboard (with perspective) and the pieces. My Knight is a bit close to a nag than stallion and my Queen is a quite anemic. But wait! There’s more ….

Flash Catalyst

While avoiding another assignment, I decided to prepare for an upcoming talk on Flash Catalyst (FC) — the new tool from Adobe. FC provides a bridge  between graphic design tools ( Illustrator, Fireworks, Photoshop) and a programming environment ( Flex Builder).

Follow this link to the Flash Catalyst Chessboard. You’ll see the same image but now it will be an embedded Flash application.  Try mousing over or clicking on the pieces. You should hear some noises and see the bishop rotate. A couple will fade in and out. Underwhelming? Perhaps, but I was able to take my Illustrator file into FC, convert my layers into components, assign actions, and then bring THAT into Flex as a framework for an application.

http://carolshepherd.techzestadvisors.com/assets/SPSU6041/chess/main.html