Thomas Cooper logotype ☰
  • Thomas Cooper logotype
  • Portfolio
  • About
  • Resume
  • Contact
  • Digital Art & Illustration
  • Payments

Visit

Portfolio

BuildaBudge Web App
UX/UI, Web Dev, Branding
Quantum Craft Website
UX/UI, Web Dev, Brand, Package
Movie Search Web App
UX/UI, Web Dev
Weather App
UX/UI, Web Dev
Deezer Music Web App
UX/UI, Web Dev
Careers Website
UX/UI, Web Dev, Branding
Locations Web App
UX/UI, Web Dev, Branding
HubSpot Landing Pages
UX/UI, Web Dev, Branding
Daygot App Book
Layout, Typography
Splash screens
Brand
Just My Type NFT
Typography
Typographic posters
Typography
Reimagining Snapchat
Brand, Animation
Mingo Mango Champagne
Brand, Package, Typography
Helix Newsletter
Layout, Typography
Brimstone Hot Sauce
Brand, Package, Illustration
Miranda Identity System
Brand, Typography, Layout
Immortal Fitness Logo
Brand, Typography
Hajoca emails
Email, Brand
Skateboarding Animation
Animation
Learning Center Logo
Brand, Animation
Engineer Business Card
Brand, Typography
Thrive Event Signage
Brand, Signage
Phone Wallpapers
Pattern Design
M. Humphrey Phone Case
Brand, Package
Lit Typography
Typography
Google Display Ads
Ad, Brand
Trauma Type Animation
Animation, Typography
Hajoca 401K Brochure
Brand, Layout
Wande Typography
Typography
Standford Research Cover
Book Cover
Juici Bottle Label
Brand, Package, Animation
Transcend Phone Case
Brand, Package
Bypass a Router Sign
Signage, Infographic
Cooper Blueprint Font
Typography
Food Icons for Newsletter
Icons
Back to top of page arrow.

BuildaBudge Web App

UX/UI, Web Dev, Branding

Over the past year, I've been refining my web development and UX skills by diving deeper into back-end development. Most recently, I built a free budgeting web application that allows users to track and manage their spending. While tutorials have their place, building this app from scratch allowed me to apply what I learned without a guide.

The app was built using vanilla PHP and MySQL for the back end, and vanilla JavaScript, Bootstrap, custom CSS, and HTML for the front end. I also integrated the PHPMailer library to handle email functionality. All graphics and visual assets were designed using Adobe Illustrator and Photoshop.

Not only was I challenged to step outside of my familiar front-end development territory, but I was required to learn various web security principles. I implemented numerous security measures such as parameterized queries, brute force protections, form validation, honeypot fields, reCAPTCHA security, CSRF tokens, password hashing, content security policies, input sanitization, HTTPS, email confirmation codes, etc. Feel free to check out the app here at buildabudge.com .

Quantum Craft Website

UX/UI, Web Dev, Brand, Package

Quantum Craft website displayed on a phone and desktop computer Quantum Craft website displayed on a phone and desktop computer

This can design is inspired by quantum physics and graphic design from the 1940s. My goal was to create a can design that would stand out from competing brands on the shelf.

I would create a design that modernizes the 1940s style and utilizes atypical can colors - such as gold aluminum. The can is both inviting and playful while exhibiting a sophisticated appearance.

The website expands on the can's package design with elements that suggest quantum physics, waves, and particles.

Building this website served as an opportunity to practice working with CSS3's web layout model—flexbox. The website can be viewed on GitHub at the link here .

Movie Search Web App

UX/UI, Web Dev

This web application uses the TMDB API. The program fetches and organizes data from a movie database. Users can find movie ratings, summaries, dates, streaming service availability, etc.

View the project at the link here .

Weather app

UX/UI, Web Dev

React.js Weather App

This app was built using React.js, the OpenWeather API, and the Plotly library. The app fetches a five day forecast from the API, displays forecasts for each day (in three hour intervals), and plots each forecast's properties on a graph.

Users can find forecasts for any city/state in the United States. Users can also toggle between properties to see how forecasts change over time on the graph.

Visit this link to open the weather app in your browser.

Deezer Music Web App

UX/UI, Web Dev

Deezer music player web app displayed on a phone and desktop view.

This web app I developed pulls in data using the Deezer API. Users can scroll through song previews and search by artist/album names.

To view the app in your browser, please visit the link here .

Careers Website

UX/UI, Web Dev, Branding

responsive careers website shown on all screen sizes (phone, computer, and tablet) with a blue background responsive careers website shown on all screen sizes (phone, computer, and tablet) responsive careers website shown on an iphone and laptop responsive careers website shown on all screen sizes (phone, computer, and tablet) with a blue background responsive careers website screenshots responsive careers website screenshots responsive careers website screenshots responsive careers website screenshots responsive careers website screenshots responsive careers website screenshots responsive careers website screenshots responsive careers website screenshots responsive careers website screenshots responsive careers website shown on all screen sizes (phone, computer, and tablet) with a blue background

I was asked by Hajoca Corporation to build a website for their recruiting team. The website would be used to attract new employees while providing potential new-hires with information. Also, the website showcases a few testimonial videos a co-worker and I had created using After Effects.

The website was built using WordPress along with a combination of custom HTML, CSS, and JavaScript. Much of the additional custom code was used for making the website ADA compliant in regard to keyboard accessibility and screen readers. Custom CSS was used for making the website meet corporate brand guidelines in addition to improving mobile and tablet responsiveness.

Locations Web App

UX/UI, Web Dev, Branding

I collaborated with another developer to build this app for Hajoca Corporation's website. Users can find company branches by filtering for locations and services. The Google Maps API is used in conjuction with a function I developed to calculate the user's distance from each branch location. Locations are displayed in order—starting from closest to furthest away.

The app was built using JavaScript, HTML, CSS, Bootstrap, and PHP (to generate the WordPress shortcode).

HubSpot Landing Pages

UX/UI, Web Dev, Branding

These landing page templates were developed using custom HTML/CSS, custom media queries, and Hubspot modules using the Hubspot marketing software. These templates created for Momentum Telecom produced a streamlined process for developing landing pages quickly and efficiently as new products and services were released. CSS3 was used to create subtle animations and allowed marketers to replace animated images without having to worry about coding.

This project provided an opportunity to experiment with responsive web design as well as create digital graphics that complied with the company stylesheet.

DayGot App Book

Layout, Typography

daygot app book spreads

- Portal -

DayGot focuses on creating custom mobile ordering apps for restaurants. Restaurants can update their menus on the company's online portal while changes are reflected in real-time on the restaurants' apps.

As a graphic and web designer, it was my job to style the apps using HTML, CSS, Illustrator, and Photoshop. While conjuring up designs is sometimes a collaborative process with the design team, I am responsible for taking the final comps and bringing the flat designs to life with code. This requires taking the developers' back-end files and applying CSS styles as well as organizing how the information is layed out. Part of the challenge includes streamlining the process for each restaurant while finding new and unique ways to differentiate the home screens for each app.

In addition to coding apps, I also styled the online portal. This required not only being attentive to color schemes, but thinking about media queries, CSS3 keyframe animations, user experience, best coding practices, negative space, information hierarchy, legibility, and much more.

I collaborated with another graphic designer to create the DayGot logo. Our goal was to create a restaurant vibe that also reflects mobile ordering. The sunset colors represent a new day in business. I took this brand identity and integrated it into the online portal project.

The book I created collects all of these projects into an organized summary of what we accomplished.

Splash Screens

Brand

Here, I have reimagined splash screens for Adobe Illustrator and Adobe Photoshop . The sharp aesthetic for the "Ai" graphic suggests "vector graphics" while the digital aesthetic of the "Ps" graphic represents bitmap images.

Just My Type NFT

Typography

'Just My Type NFT' collection image 'Just My Type NFT' collection image 'Just My Type NFT' collection image 'Just My Type NFT' collection image

A collection of NFT letters inspired by both vintage and modern typography. Each letter has been created in Adobe Illustrator and features crisp lines, smooth reflections, subtle gradients, and sharp crosshatches. Add some typographic design inspiration to your collection!

Download the NFT collection here .

Typographic Posters

Typography

These posters resulted from my experimentation with Illustrator's blend tool. While the subject matter is unrelated—each poster uses a similar aesthetic.

Duotones/Monotones, minimal colors, and clean fonts make for pleasing modern designs.

Reimagining Snapchat

Brand, Animation

This simple Snapchat logo reimagining modernizes the current logo while staying true to the original concept. This would allow the app to remain recognizable after the rebranding process. The project was a chance to explore After Effects shape morphs while creating a simple and clean promotional animation that reflects the app's purpose.

Mingo Mango Champagne

Brand, Package, Typography

Mingo Mango Champagne Mingo Mango Champagne Mingo Mango Champagne Mingo Mango Champagne Mingo Mango Champagne

Mingo Mango Champagne is a product/brand design that is inspired by vintage typography, wine labels, and ornamental designs seen on dollar bills. The bottle creates both a sense of formality and fun while insinuating a fruity mixture with its numerous colors.

The black side represents the "night" while the white side represents the "day," suggesting that the drink is made for any time of day.

Helix Newsletter

Layout, Typography

For this student project, we were asked to format a newsletter for the Burnett School of Biomedical Sciences. The professor only provided the text and photographs. He acted like an obnoxious client, sending us photos/text at the last minute, forcing us to reflow the text and design elements. The pentagon design was inspired by chemical compounds while the blue colors reflect the cleanliness of a medical facility. Using three blue colors creates a dynamic piece that will stand out among standard four color process newsletters.

Brimstone Hot Sauce

Brand, Package, Illustration

Brimstone Ghost Pepper Hot Sauce ad Brimstone Ghost Pepper Hot Sauce logo design Brimstone Ghost Pepper Hot Sauce package design Brimstone Ghost Pepper Hot Sauce lid shut Brimstone Ghost Pepper Hot Sauce lid open Brimstone Ghost Pepper Hot Sauce package layed out flat Hot sauce packaging

For this student project, I was asked to design and create a package for any kind of product. I settled on creating a box and bottle label for a pretend hot sauce I conjured up. I used this opportunity to explore my illustration skills with Micron pens.

My goal was to design a box that is appealing and original. The red/purple color scheme is both inviting and intimidating. When I see the color purple, I subconsciously think of "spooky", hence "ghost" pepper. The red is used to suggest fire and successfully complements the purple. The name "Brimstone" is associated with hell, accurately reflecting the ghost peppers that are rated at more than 1 million Scoville heat units. The dragon is a refreshing icon as opposed to the stereotypical devil we are used to seeing on hot sauce labels.

Brimstone Ghost Pepper Hot Sauce: "Tastes like Heaven, hot as hell!"

Miranda Identity System

Brand, Typography, Layout

This personal identity system was created for a market research analyst. The triangles create a stimulating contrast from the clean white space. The angles represent technology and analytics, while remaining congruent with the angular logo. The logo consists of the letters "M" and "H" (for "Miranda Humphrey"). The resume borrows design elements from the business card, creating a cohesive and memorable personal brand.

Immortal Fitness Logo

Brand, Typography

I was asked to create a few logos for a fitness business. The company logo I created would be slightly reappropriated to fit different kinds aparell such as hats and shirts.

The goal was to create and maintain a cohesive branding system while simultaneously presenting a unique variety of icons for clothes. This was an opportunity to be liberal with a logo design while allowing the font and colors to create a unified brand. The designs are both playful and professional while still invoking a sense of intimidation and strength with the greek-inspired elements. Bold colors and a modern design create a relevant identity system that is both memorable and noticeable.

Hajoca Emails

Email, Brand

At Hajoca Corporation , I created internal email communications that would be sent to all of Hajoca's branches. A content writer would provide the text while I would create the layout and visuals. I would build the finalized email in Constant Contact .

The design process included utilizing the company's brand colors to create simple, clean, and captivating email graphics. Unlike logo design where icons are typically simplified and minimal, these graphics would exhibit a happy medium between clean and detailed design.

Information has been altered to protect the privacy of the client.

Skateboarding Animation

Animation

Your browser does not support the video tag.

This personal project served as an opportunity to practice animating a character in Adobe After Effects . The character is reminiscent of a design that might be seen in a short social media advertisement.

The character's components were created in Adobe Illustrator and imported into After Effects to be animated. 3D layers were used to create a subtle sense of dimension in the 2D artwork.

Learning Center Logo

Brand, Animation

A client asked that I design a logo for an online learning center. The website focuses on career paths while serving as an educational resource. I could not change the tagline ("Grow into your dreams") or the name ("Learning Center") so it would be vital that the logo remain unique and distinctive.

After drawing inspiration from Paul Rand and his focus on simplicity, scalability, versatility, and uniqueness, I decided to create a logo. The logo conveys a sense of both technology and growth, taking on the appearance of a vine-like shape that simultaneously resembles a career path.

Engineer Business Card

Brand, Typography

Engineer Business Card Design

This business card was created for a mechanical engineer. The icons suggest numerous concepts such as machine learning, bandits, learning algorithms, bending beams, and finite analyses. The info remains legible at a quick glance while the inviting colors and unique icons make for a memorable design.

The target audience includes engineers and hiring managers.

Thrive Event Signage

Brand, Signage

These signs were created for an event held in Atlana by Momentum Telecom. The event's focus included training white label customers on sales techniques and how to use our products. The 'Thrive' event also included numerous educational classes and also served as a platform for Momentum to market its other products and services, such as Drive UC .

The signage reflects the company brand colors and the city of Atlanta while creating a fun and inviting vibe. The signage helped to direct attendees to different stations and created a consistent identity system for the event.

Phone Wallpapers

Pattern Design

This series of abstract phone wallpapers can help add visual interest to any user's phone.

M. Humphrey Phone Case

Brand, Package

Phone Wallpapers

This phone case was inspired by vintage typography and ornamental designs often found on wine bottles. The idea was to create a fun fictional brand similar to Michael Kors while incorporating my crosshatching illustration aesthetic.

Lit Typography

Typography

Through this experimental project, I leveraged Illustrator's tools to create extravagant letterforms. Inspiration was derived from vintage typography, hand-lettering, crosshatching, and fire (hence the colors and "Lit" letters). The type strikes a balance between flat design and 3D letterforms, creating a modern and elegant piece.

Google Display Ads

Ad, Brand

Google Display Ads Google Display Ads Google Display Ads Google Display Ads Google Display Ads Google Display Ads Google Display Ads

These are Google display ads that I designed for Momentum Telecom . As a brand specialist, I am responsible for creating web ads that generate leads while making sure ads comply with our brand guidelines. This includes designing ads that utilize our brand's colors and fonts while remaining cohesive with the rest of our brand and print collateral.

Trauma Type Animation

Animation, Typography

Your browser does not support the video tag.

This kinetic typography animation illustrates a speech that was given by award winning grammy nominee Lecrae Moore. The animation uses a minimalistic and monochromatic approach while using the color red to convey negative concepts. This project served as an opportunity to explore text transitions, trim paths, and a more effective workflow.

Hajoca 401K Brochure

Brand, Layout

As an in-house graphic designer and communications coordinator at Hajoca , it was my responsibility to design a 401K brochure that is congruent with the Hajoca style guide. The brochure was mailed in an envelope to each Hajoca teammate. In addition to the brochure, I created numerous graphics that will be used in a 401K and Benefits video.

The goal was to create a clean and legible brochure that will allow readers to quickly find the information they are seeking while providing a seamless tutorial of the 401K website. The dynamic angles lead the viewer's eyes around the page while unifying the design with a visually appealing aesthetic.

Information has been altered to protect the privacy of the client.

Wande Typography

Typography

Here, I created a typographic pieces inspired by a musician named Wande. This experimental type piece was created using Illustrator's 3D features and blend tool.

Stanford Research Cover

Book Cover

This cover was designed for a client's Standford research paper on polymers. The publication is called Accounts of Materials Research .

The organic shapes create a sense of movement—which might suggest how material properties change when underlying structures change. The layered shapes twist and bend to create a sense of expansion and contraction—and might represent shape memory properties. The shapes look similar to artificial "muscle fiber-like" materials.

The shapes represent polymer chains, hierarchical structures, and dynamic bonds. The red polymer chain represents a chain that might be stressed—expanding or contracting back to its initial state. The circle zooming into the chain draws attention to the connecting/stressed bonds.

The turquoise color was inspired by the schemes used in many of the document infographics. The red/orange color nicely complements it.

The design is modern and leaves a bit of white space at the top for the title.

Juici Bottle Label

Brand, Package, Animation

Your browser does not support the video tag.

This bottle label's sharp design/font alludes to freshly cut fruits. This project served as an opportunity to express a brand though both a logo and logo animation.

Transcend Phone Case

Brand, Package

'Transcend' Phone Case 'Transcend' Phone Case Design

The "T" stands for "Transcend" in "Transcend the noise in a digital age."

This phone case design was inspired by extravagant hand-lettered typography and low resolution images.

While one usually strives to avoid using low quality images, I thought it might be intriguing to deliberately use low-res images. By combining low resolution digitized images with organic lettering and photos of nature, the piece merges two seemingly incongruent themes into a single piece (technology and nature).

The icon represents "transcending the noise in society," or focusing on what matters in a world that sometimes seems to be saturated with fake news, unrealistic standards, warped ideas of beauty, and irrelevant distractions. The low resolution images represent the noise. It is important that we stay connected to nature and our higher purpose in the world.

The logo's location on the cellphone case creates a sense of irony, self-awareness, and style.

Bypass a Router Sign

Signage, Infographic

'How to Bypass a Router' Sign

This graphic was created for Momentum Telecom and was used as a presentation aid for sales training.

Knowing that technical illustrations are often bland and hard on the eyes, my goal was to create a graphic that was colorful, clean, professional, and inviting. As an in-house branding specialist, I also had to utilize brand colors and create an appearance that was congruent with the rest of our branded collateral.

Cooper Blueprint Font

Typography

Cooper Blueprint character set

This image features my font, Cooper Blueprint . It can be downloaded for free on fontstruct.com. The font was given recognition by Paul Sahre at a York College of Pennsylvania Exhibition.

Download it now at Fontstruct .

Food Icons for Newsletter

Icons

These food icons were created for a Hajoca Corporation newsletter. The monthly newsletters focus on promoting healthy lifestyles involving eating habits, exercise, mental health, and financial well-being.

Hajoca Corporation asked that I create food icons for a section regarding the benefits of eating specific foods. I utilized the brand's orange color to create icons that are clean and inviting.

Thomas Cooper

Website coded, designed, and developed by Thomas Cooper.