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:

Week IV: CoLA Refresh

This week was fairly rote, so I don’t have much new to report on. Most of it was spent on the CoLA Refresh Project, working with Ingrid and Rahul to migrate pages listed on a very big spreadsheet.

Here is one example of a particularly complex page I migrated, and I reformatted it.

This one was linked to 22 subpages which were all reformatted into accordion tabs. I could show you all 22 but there’s not much noteworthy except for a few with tables, which we are trying to find replacements for.