Skip to content

A.F. Knot

  • Visit the home page
  • Check out my portfolio
  • Learn more about me
  • Contact me

Jhpiego’s 2017 Annual Report Website

Global stats UI design

Photo Icons

Instead of the traditional use of icons to illustrate our impact numbers, I used cut-out photos of the people we serve (see below).

Photo icon style
Click image to view larger

Bar Charts

Continuing the photo icon theme, I created 3D platform style bar charts to show how our data has changed overtime (see below).

Visual bar charts
Click image to view larger

Navigation

The navigation is simple yet accessible and is designed to reveal the icon’s purpose on hover (see below).

Website Design

This design guides users from section to section, each section taking up the user’s full viewport (see full design below). 

Website design, Jhpiego's 2017 Annual Report
Click image to view larger

Chapter Slide-Outs

Each “read more” button triggers a story slide-out from the righthand side (see below). 

Slide out chapter pane UI
Click image to view larger

Post navigation

The Harrow Movie
M.R. Bookkeeping Branding

A.F. Knot  |  info@afknot.com  |  Baltimore, MD
Copyright © 2025 A.F. Knot. All Rights Reserved. Made with ♥ in Baltimore