art direction on Ashley Kolodziej - Boston Freelance Web Designer

Decked-Out Dorms and Office Artifacts Design

ashley@lastletterdesign.com (Ashley Kolodziej) — Fri, 16 Oct 2020 21:00:39 +0000

Live links

Decked-Out Dorms Story with hotspot interactivity

Office Artifacts Story with hotspot interactivity

Visual Goals

The BU Today team requested a new look and feel for their Decked-Out Dorms and Office Artifacts series, as well as an updated method of adding hotspots to images that took less manual work than before. Part of what struck me about this series was how creative students got with decorating within university constraints - very punk in my mind. I chose a chunky typeface, angled alignment, and SVG animation to breathe life into the dorm tours.

Design portability

I purposefully designed this to have a consistent look and feel across the Office Artifacts series as well, which showcases faculty and staff offices. Both use similar SVG treatments and the same codebase.

Editing experience

Because of budget constraints, I was unable to build a custom Gutenberg block for this series. However, I did want to make sure that the interface was still somewhat easy to edit for the staff at BU Today, who have some comfort with coding. To do this, I created a JSON object to hold structured information on each hotspot. When the page loads, I used JavaScript to pull in this information and generate the hotspot and lightbox for each hotspot when the user clicks. Some technical challenges here included adding event listeners to dynamically generated content, animating the SVG banner image, and creating an easily editable interface for highly variable content on a minimal budget.

Photography Direction for Boston University Dining

ashley@lastletterdesign.com (Ashley Kolodziej) — Thu, 25 May 2017 17:00:30 +0000

As part of the Boston University Dining Services website redesign, I art directed a photo shoot with support from a photographer and creative director. This presentation includes my original recommendations and inspiration sketches.

Dubious DNA

ashley@lastletterdesign.com (Ashley Kolodziej) — Wed, 22 Jul 2015 00:00:00 +0000

The heart of this piece I designed on DNA profiling focuses on a researcher who is working to improve the reliability of DNA profiling for crime scenes. Throughout the article, she calls into question the many factors that may cause incorrect profiling - leading to the grim possibility an innocent person could be convicted.

Extract genetic material from sweat on shirt collar
Was the shirt borrowed?
DNA from at least three people
Can we isolate this?
Check for skin cells
DNA degraded by heat?
Testable DNA tricky to get from hairs on couch
How many people picked up that magazine?
Is this evidence related to the crime?
Who was in the apartment last week?

In my design, I let these questions hang in the air uncomfortably around the crime scenes they inhabit, much like the dust, skin cells, and flecks they raise concerns about. I’m using a subtle keyframe animation on top of each photo to create the slight animated noise effect.

To create the right look and feel, I worked with Janice Checchio, an amazing photographer and art director on the Boston University photography team, to get a gritty, noisy look to the images, and to take photos of everyday objects which both aligned with the story’s content and could conceivably be found at a crime scene.

Some of the animation relies on JavaScript, but in the pullquote above, I used a gif that I created in Photoshop instead to improve performance.

Low copy DNA – weak genetic signal
DNA from at least three people
Can we isolate the suspect’s DNA?
How do we make sense of all this?
Perfect DNA match to suspect unlikely
Will this be enough DNA to identify a suspect?
Is it possible to get a clean DNA signal?
Signal could be from someone else
Testable DNA tricky to get from hairs on floor
How many people have been through here?

Even minor movements by the user (either phone tilts or mouse movements) disturb the scene; it is deliberately delicate.

#ReachHigher Campaign Lettering

ashley@lastletterdesign.com (Ashley Kolodziej) — Fri, 01 May 2015 14:00:01 +0000

As part of a social media campaign for the White House, Boston University Public Relations created content to post to Twitter and Instagram using the hashtag #ReachHigher. Their in-house photography team reached out to me to create custom chalkboard lettering for several students on set based on each student’s personal reasons for going to college.