design on Ashley Kolodziej - Boston Freelance Web Designer

Exploring circular text in CSS and SVG

ashley@lastletterdesign.com (Ashley Kolodziej) — Sun, 26 Jun 2022 00:53:51 +0000

I decided I’m sick of the grid. I want to align some text to a circle.

As it turns out, it’s not so hard to do this with SVG. You don’t even need a complicated path element. Just grab yourself a <circle>, like so:

With this pen, I wanted to explore depth, so I adjusted the placement, opacity, and size of the text in each circle.

And of course, if you know me, you know I’m into my colors. So I thought, well, rainbows are sort of a circle too.

Writing creative CSS

My best moments in CSS are when I find out something new, and just keep riffing on it endlessly. I’ve got a whole site dedicated to this rainbow situation here:

This is how you learn in design school. You take a piece of paper, and you cut it up and really focus on how the shapes or colors or just one piece of it is interacting with the rest. And then, you figure out the best bits.

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 Series page link

Decked-Out Dorms Story with hotspot interactivity

Office Artifacts Series page link

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.

Of Hoops & Healing

ashley@lastletterdesign.com (Ashley Kolodziej) — Tue, 21 Feb 2017 22:00:00 +0000

View the article on Bostonia

Boston University School of Education

ashley@lastletterdesign.com (Ashley Kolodziej) — Tue, 23 Aug 2016 21:00:00 +0000

I was responsible for all ux, design, and frontend development work on this website redesign. Select samples of interest are below.

Low fidelity wireframe in Axure - Faculty Research

Low fidelity prototype in Axure - Explore Programs

Redesigned homepage

Final Explore Programs tool design | archive.org link

Final Research & Action Page design (archive.org)
Final Faculty Research design (archive.org)

Every Cell Has a Story

ashley@lastletterdesign.com (Ashley Kolodziej) — Wed, 06 Jan 2016 22:00:00 +0000

I was lucky enough to be able to work with the amazing Joe Chan on this one. After I read this article, one thing stuck out at me, and it stuck out hard: how much dedication do you have to have to look at cells dividing for days on end? I really wanted to capture that and make it the centerpiece of the article.

If you’ve ever sat down, and done something, and then looked up and it’s suddenly hours later, you know what I mean when I say you do something like this, and time is different for you. That’s what the design for this article is all about. I wanted everything to feel endless and repetitive, but captivating.

View article as launched on archive.org | Current version

Constitutional Amendments

ashley@lastletterdesign.com (Ashley Kolodziej) — Tue, 20 Oct 2015 20:15:30 +0000

Constitutional Amendments is an article about the restoration of the U.S.S. Constitution. I used nautical elements and gentle motion to bring a refined feel to the restoration process. I was also lucky to be able to work with a talented illustrator for a portion of the article.

Typography details

Integration of custom illustrations

See the full article here.

Boston University College of Communication

ashley@lastletterdesign.com (Ashley Kolodziej) — Thu, 17 Sep 2015 21:00:00 +0000

View final design on archive.org

The College of Communication (COM) told me two things: that they tell stories, and that they wanted a pathfinder tool to help incoming freshmen explore various programs.

Communication is a major that’s close to home for me—not because it’s my major, but because I worked at a newspaper in college, and I knew so many people in journalism. There’s a lot of stigma these days around both communications and art majors. How will you get a job? Are you putting yourself in debt for nothing? Is there even a career out there for you? It wasn’t that long since I was out of school. Even if it was, you don’t have to go far to find examples lampooning communications and arts degrees online, especially when stacked against STEM degrees. It’s a (demonstrably) hard field to break into.

With these challenges fresh in my mind, I set to creating a site that would address these concerns for parents and students, without losing the vibrant storytelling presence the school is so good at.

I used the storytelling metaphor extensively to tell the story of graduates’ success in the real world. COM is unique in that it truly has the numbers and alumni to prove its programs are successful. I chose to showcase these on the homepage and recommended pairing successful names and faces with programs to make those numbers more human. All of these drive to explore programs, where you can learn more about what the College of Communication is doing in each of its focus areas, or compare degrees within each focus area. The What We Do pages showcase COM’s continued growth and effort in each area, gathering news, events, media, and faculty research in one area for students and influencers to explore.

The pathfinder shows students how to translate their passions into careers, and drives to the best program COM offers as a first step in each career. I explored a number of ideas in this tool - everything from an alchemy clone where you would combine basic areas of interest to get more specific ones, and eventually build careers from each of the specific interests, to a quiz where illustrations change depending on what you hover over. At one time I was even exploring literal paint mixing as a metaphor, because… why not? I came to the conclusion after building a quick proof of concept that the alchemy game was too finicky and fun for actual use, and the quiz ran a risk of becoming too focused on personality traits. We eventually settled on a fancy (but functional) filter based around interests. Choose what you love on one side, see what you can do as a career with that on the other. Hence: do what you love & love what you do.

On the data side of things, I was very interested in exploring ways to find out some additional information about students from the pathfinder. Wouldn’t it be interesting to see what other interests a student might have that you wouldn’t expect who enrolls in your program? And which example careers were most alluring? This is trackable with Google Analytics, but it takes some serious thought and planning to structure the data in a meaningful way to content editors. I worked with one of our developers to find a way to send a list of the interests associated with a successful program click back to analytics on the way out as well the career it was associated with. You can also see what top interests are, so content editors can track popular interests over time and tweak filters and careers for the changing job market as necessary.

This website was recognized with a Silver 2016 CASE National Circle of Excellence Award.

Boston University Archaeology Department

ashley@lastletterdesign.com (Ashley Kolodziej) — Mon, 13 Jul 2015 21:00:00 +0000

The Boston University Archaeology Department is home to over 100 faculty, staff and students who specialize in and study archaeology. The primary goals of this redesign were to more clearly show their worldwide research & fieldwork, and create connections to students by more clearly showing the wide variety of news and events that were happening in the department. I began by showcasing their stunning photography, and pulling out a mixture of earthy and sky colors to match the scenes without creating an overly academic or “stuffy” feel.

I made several content recommendations to make the best use of this small project’s budget, including utilizing the available space on the page to speak to the department’s unique benefits and provide a clear call to action to learn how to study Archaeology at Boston University.

I also recommended several changes to simplify the sitemap and reduce the total number of choices a prospective student needs to read through in the primary navigation from 8 to 4. This helped make it easier to more clearly focus on their Research & Fieldwork page.

I then worked with Eveleen Sung, a fantastic developer who went on to work at Microsoft, to design and develop a custom Google Map for the Research & Fieldwork page. The map shows where the department has completed research or fieldwork studies, along with a brief description of the project and an image, if it exists. A user looking for a specific project can also use a list view to quickly browse projects and get information on each.

The Club at Rolling Hills

ashley@lastletterdesign.com (Ashley Kolodziej) — Fri, 05 Sep 2014 21:00:00 +0000

design on Ashley Kolodziej - Boston Freelance Web Designer

Exploring circular text in CSS and SVG

Writing creative CSS

Decked-Out Dorms and Office Artifacts Design

Of Hoops & Healing

Boston University School of Education

Every Cell Has a Story

Constitutional Amendments

Boston University College of Communication

Boston University Archaeology Department

The Club at Rolling Hills

Boston University Fitness and Recreation Center (2014)

Boston University College of Arts & Sciences Impactx2 Campaign

Golden Goose Jewelers

Cat Cay Yacht Club

The World Needs to Know Campaign Website

The Citrus Club

Kleen and Green

It's a Date, I Think

Boston University Dining Services - 2013 Sustainability Report

Cedarland Family Fun Center

Bent Tree Country Club

California Athletic Clubs

Ballantyne Country Club

Mira Vista Country Club

Navesink Country Club

PGA West

Fall River Country Club

Turner Hill Country Club

Fisher Island Community Association

Los Altos Country Club

Manursing Country Club

The Commons Club

Glenmoor Country Club

Weddings at Plantation

Addison Reserve Country Club

Ledgemont Country Club

Ferncroft Country Club

Walpole Country Club

Neptune Cove

Yolo Fliers Club

Almaden Valley Athletic Club