headshot of Hannah Barber
Hello, I'm Hannah Barber!

About Me

I am a driven professional currently taking steps to transition from a career in the non-profit sector into front-end web development. As a life-long learner that's passionate about bringing a meaningful digital content experience to a diverse audience, I incorporate design thinking into my everyday work to bring the user the best possible experience.

I bring a unqiue perspective to my designs based on my nontraditional background. By nature, I'm a reliable and thoughtful person. I bring those same qualities to any work environment I'm in.

In my free time I enjoy getting outdoors, especially hiking, running, and outdoor photography.

Skills

Javascript

HTML & CSS

Figma

Photography

Writing and Research

Adobe Creative Suite

Mentoring

Digital Media Content Creation

Online Exhibition Curation

Web Design

Employee Directory

The Challenge:

Using external APIs, I created an employee directory with randomly generated user profiles. Their contact information and employee information are showcased when clicked.

Tools used:

Javascript

HTML

CSS

External API

A web interface with employee icons and descriptions.

Web-App Dashboard

The Challenge:

Create a user friendly dashboard application with mobile responsiveness. Using interactive charts and graphs, design a user interface that is both attractive and functional.

Tools used:

Javascript

HTML

CSS

SVG animation

A web interface with navigation icons, user information, and charts.

Interactive Photo Gallery

The Challenge:

Create an interactive photo gallery that allows users to sort through photographs in order to match their search criteria.

Tools used:

Javascript

HTML

CSS

A web interface with a variety of photographs and search bar.

Secondlife

The Challenge:

To design a user interface for the product detail screen. The layout offers the user a brief overall description of the product accompanied with large images.

Tools used:

Figma

a three dimensional graphic of a user interface for a retail store.

.iBank Mobile Interface

The Challenge:

A mobile banking app needs an interface that's both visually appealing and concisely displays the essential information to the user. For this challenge, a online bank needed a home interface that provided account information, transaction history, and money transfer sections.

Tools used:

Figma

iBank mobile application interface with account information.

Registration Form

The Challenge:

Design a functional registration form with required fields, dropdown menu, and setting menu.

Tools used:

HTML

CSS

A web interface with form fields.

Graphic Design

Love n' Lourdes Beer Label

Tools used:

Adobe Illustrator

Adobe Photoshop

two beer bottles with custom labels.

Crisis: A Visual Exploration of Conflict Double Gate Fold Pamphlet

Tools used:

Adobe Illustrator

Adobe Photoshop

Adobe InDesign

a trifold borchure with images and text regarding the exhibition.

Glass of the Architects: Vienna 1900-1937 Mailer

Tools used:

Adobe Illustrator

Adobe Photoshop

Adobe InDesign

two sides of the same postcard regarding an exhibition opening at the Corning Museum of Glass.

Would you like to work together? Let's chat!