Week VIII

I’ll try to go in roughly chronological order…

HTML / CSS Training

Early in the week, between CoLA Refresh Tasks, I finished the HTML/CSS training in JSFiddle. The training went over the basics of text styling and headers, and asked me to create a themed site.

The training took much less time than I expected, but it was still very useful.

Photo Sourcing and Color Grading Training

Later in the week, I ran into a Refresh task (more on that later) that required photo sourcing, so Ingrid directed me to this training. As with previous photo editing trainings, I found the light touch (color matching) more difficult than dramatic, stylized edits (color grading).  Also, I may or may not have less red cones in my eye than Abriella, according to a color sensitivity test she made me take.

CoLA Refresh Project

Besides a million little sidetasks, one of the earliest things I did this week for the Refresh project was cross-check a list of minors and certificates which was different on the CoLA and Catalog websites. For this I made a word document. The formatting was a little difficult.

It worked well enough, but I learned my lesson and made a proper spreadsheet for my next big cross-checking task I picked up: fixing the banner images for every language page. These had assorted issues ranging from low-resolution backgrounds to mistranslations. This is still a work in progress as of writing, but it’s going pretty well.

Along with numerous spreadsheet functions, I also learned how to make a simple animated GIF in Photoshop for this comparison of different fonts.

Ending this week feeling… professional! Look at me, I made a whole spreadsheet! I’m gonna have to start wearing a suit and tie to work…

 

Week VII: Pages, Graphics, and Indesign

This week felt slow, but there’s a lot to cover!

 

CoLA Web Refresh Project

Early this week, a client mentioned a potential graphic of a thermometer for displaying project status. With permission, I jumped the gun a bit and sketched a sample for her.

(This isn’t the latest version, but at the time of writing, I’m having some trouble accessing my Box)

Our other big Refresh task was a new batch of pages to migrate, this time for every language offered.

The orange buttons are a placeholder.

 

Training: Type Hierarchy in InDesign

One reason I was so eager to draw a graphic we may not end up using was because I was currently doing a design training: my first foray into Indesign. The instructions and resource for this were sort of… jumbled to nonexistent, so with Maddy’s help, I wrote up a new assignment, then followed it myself.

This was my final product:

Indesign has a lot of things that feel not very intuitive (don’t get me started on image resizing) and I have a feeling it will take a while for me to get the hang of it, so I’m glad to be starting early. It seems like a very useful program, especially as someone interested in publication. Fun fact: I learned of Indesign’s existence pretty recently, because my roommate and his friend (who works here) were using it to put together a flashy information page for a grant application, and I was impressed!

 

I also spent several 15 minute breaks editing something for a personal project, with Valerie’s permission: the cover for a print-on-demand copy of a story. A few friends wanted hard copies, and I wanted to format it really fancy to look like a real book, which involved a lot of precise margins. Though I ended up using Photoshop, not Indesign, a lot of the same principles carried over.

Lastly, for Ingrid’s prior editing knowledge survey, I whipped up a timeline infographic.

I also started the HTML/CSS training which I’m excited for, though I only put about 15 minutes in, so I don’t have much to report yet.

 

A lot of graphics and a lot of learning this week. I hope to have more like it!

 

Week VI: CoLA Refresh & Typography

This week, in lieu of new pages to create, most of the Refresh work was reformatting, featuring…

*drumroll*
Tables! At long last, we can arrange multiple columns into a table. The old site uses a lot of these, so this is very useful. And it looks…

 

Well, okay, maybe it could use some work visually, but it looks better for smaller tables.

For this one, I actually had to inspect the original and copy the html, since I copying every individual link may have taken all day.

Personally, I like the column layout better for tall vertical tables like this, which is also a very useful new feature.

Housekeeping: Typography Training

This training was very informative, not as technical-skill-heavy as some others, but a very good overview. It covered the history of font design and the different types of typefaces, with two exercises. The first one was picking two different fonts that paired well together.

The second one was picking a different font from every category of typeface (Serif, Sans, Display, Script, and Monospace). My favorite was Medula One, a very stylized display font.

All in all, not the busiest week I’ve had, but I learned a lot!

Housekeep: Color Theory Training

This week, I did the Color Theory training, which provided a lot of useful info on color design. The first section went over the physics of color, defining hue, tone, shade, and tint. The activity was to draw our own color wheel demonstrating all 4, of which mine turned out to be more of a grid, but oh well.

The second section covered color psychology and the palette design. The activity was to select a palette for 3 different fictional clients.

Below is my experimental new tutorial ranking system.

Theory:

☆☆☆☆☆

Great info here, I love reading about the history and science of something.

Technical skill:

☆☆☆★★

Not really the focus for this training, but it did explain how to set additive or subtractive color in Photoshop/Illustrator, and provided some color tools.

Instructional clarity:

☆☆☆☆★

I got slightly lost at the very last activity, but mostly because I jumped ahead.

Housekeeping: Shapes Training

This week, I completed the Shape and Pattern training, which was very informative. Also: my first foray into Illustrator! I’m not that experience with vector editors…
Similar to the History of Design training, I liked the step-by-step nature of it. Besides some minor confusion on the third assignment, all of it was very clear.

The first section I actually did in Photoshop, so you can see the raster elements especially on that circle shape. I hope I can use the Keith Haring triangle for something one day! I was supposed to design shapes for 3 different moods: relaxed, serious, and energetic.

The second section was in Illustrator proper, learning the layout and demonstrating various shape/pattern tools.

The third involved structuring a visual hierarchy around some text. The instructions were slightly vague, but I believe I was not supposed to move the text around.

In sum: not as scary as I thought, for my first time in raster editing!

EDIT:

After finishing, I got some more feedback from Maddy on better ways to design a visual hierarchy; I’m adding some of our back-and-forths.

Housekeeping: Elements and Principles of Design training

Some more housekeeping, as the CoLA Refresh project slowly picks up steam: I just completed the Principles and Elements of Design training, which involves demonstrating different design aspects using art as examples. I also created sketches outlining each feature. I won’t show you all of them, since there are close to 30, but here are two slides.

Some of the elements I found kind of subjective and hard to identify (like the difference between size and proportion, or balance and unity) but I had fun making the sketches. I particularly hope my American Gothic interpretation ends up in a stick figure museum one day.

EDIT:
Got some feedback, and I revisited a few slides with more contemporary design examples, which was, honestly, much easier conceptually. We may end up clarifying in the KB post, but I wasn’t actually supposed to do classical art for all of them. Here is the “size” slide: