Casey Todd Portfolio Book 2021

Page 1

C

T

Casey Todd Graphic & Web Designer


1

2

AdWater

Riser

Introduction Onboarding Screens Branding & Quote

TABLE OF CONTENTS

Introduction Onboarding Screens Branding


3

4

Remindr!

Kelvin’s World

Introduction

Introduction

Onboarding

Screens

Screens

Scenario

Branding

Branding

5

6

Action Graphics

Meteoric Market

Introduction

Introduction

Homepage

Homepage

Design / Print

Checkout

Components

Branding


01 AdWater UI / UX Design Branding AdWater offers an alternative to a resource we all need to survive, water. Instead of paying insane markups of over 2,000% in some scenarios, AdWater allows you to use your engagement as payment. Simply watch a short ad or interact with an offer and a coupon will be ready for you to scan for your free water! As well as building an infrastructure of refill stations to support our AdWater Gives Back campaign. For every bottle refilled, AdWater will donate a gallon of water to an area in need and progress can be tracked through the app.




With profile customization, offers will be generated to fit your lifestyle. No longer will you have to watch mindless advertisements with no relevance to your life. Thanks to AdWater, you can get free water and bring it wherever life takes you.


“ THE BEST WAY TO

PREDICT THE FUTURE IS TO CREATE IT “

— Peter Brucker


Primary Logo

Lato Bold

Karla light

Aa Bb Cc Dd Ee Ff Gg Hh Ii Jj Kk Ll Mm Nn Oo Pp Qq Rr Ss Tt Uu Vv Ww Xx Yy Zz

Aa Bb Cc Dd Ee Ff Gg Hh Ii Jj Kk Ll Mm Nn Oo Pp Qq Rr Ss Tt Uu Vv Ww Xx Yy Zz Typography

Hex: 6eb1e1

Hex: 7ca17e

Hex: a4a5a5

Pantone: 278 C

Pantone: 556 C

Pantone: 877 C

rgb: 98 179 243

rgb: 125 162 126

rgb: 165 165 165

cmyk: 54 17 0 0

cmyk: 55 22 59 2

cmyk: 38 30 31 0

Color Palette


02 Riser UI / UX Design Branding Riser is an alarm app like no other. With its unique Sleep Planner feature, adapting your sleep schedule has never been easier. Within the app, you can pick a start date, end date, and wake up goal. From there Riser does all the work! Adjusting your sleep pattern as efficiently as possible until your goal is met. Paired with some traditional features of an alarm app, Riser is perfectly built to fulfill the needs of travelers looking to avoid jet lag or anyone trying to improve their quality of sleep!



Riser’s goals is to have the user spend the least amount of time in the app to allow for the important events in life, like sleeping! Taking Riser’s concept and pairing it with a simple and friendly UX, our user can rest assured of a quality experience from start to finish.




Primary Logo

Obliqua Sans

Trenda Light

Aa Bb Cc Dd Ee Ff Gg Hh Ii Jj Kk Ll Mm Nn Oo Pp Qq Rr Ss Tt Uu Vv Ww Xx Yy Zz

Aa Bb Cc Dd Ee Ff Gg Hh Ii Jj Kk Ll Mm Nn Oo Pp Qq Rr Ss Tt Uu Vv Ww Xx Yy Zz Typography

Hex: 15173b

Hex: baacd2

Hex: bebbbb

Pantone: 2695 C

Pantone: 2562 C

Pantone: 7632 C

rgb: 21 23 59

rgb: 186 171 209

rgb: 190 187 187

cmyk: 97 93 44 54

cmyk: 26 31 1 0

cmyk: 26 22 22 0

Color Palette


03 Remindr! UI/UX Design Branding Remindr! separates itself from the competition with its ability to work with your other apps. Being able to pull your data from google calendars, there’s no extra steps to the Remindr! advantage. No longer will important reminders get lost in your notifications. Remindr! brings those important events in your life to your home screen. Creating a custom to-do list for your phones background that automatically updates through the day. With endless customization and even a tool to make your own themes, the opportunity to remember is endless




Remindr! has a simplified onboarding process to start organizing your life as quickly as possible. All it takes is creating an account, and syncing your already existing calendars and events.



REMINDR! Primary Logo

Bison Bold

Lato Regular

Aa Bb Cc Dd Ee Ff Gg Hh Ii Jj Kk Ll Mm Nn Oo Pp Qq Rr Ss Tt Uu Vv Ww Xx Yy Zz

Aa Bb Cc Dd Ee Ff Gg Hh Ii Jj Kk Ll Mm Nn Oo Pp Qq Rr Ss Tt Uu Vv Ww Xx Yy Zz Typography

Hex: 5e72eb

Hex: 92a3e8

Hex: fec195

Pantone: 2718 C

Pantone: 292 C

Pantone: 7410 C

rgb: 94 114 235

rgb: 146 163 232

rgb: 254 193 149

cmyk: 70 59 0 0

cmyk: 42 32 0 0

cmyk: 0 28 42 0

Color Palette


04 Kelvin’s World UI/UX Design Branding Kelvin’s World is a children’s game designed to develop better decision making skills. Through a series of scenarios our character, Kelvin, is controlled by the user and with each decision, a new story is created. The app is designed with children in mind with an easy-to-follow UI and fun graphics to stay engaged.



With a quick introduction, the user is ready to dive right into Kelvin’s new homeworld making progress to new characters and worlds while facing unique scenarios.


Starting with the introduction of the world, our monster Kelvin can start his journey right away testing his luck or increasing his skills.

The first scenario Kelvin runs into is his spacecraft becoming damaged. Kelvin has a few options from delaying his trip to repair or testing his luck to keep flying.


Kelvin decided to keep flying resulting in further damage! Forcing the user to make choices that have consequences in future gameplay.

Since it was Kelvin’s first trip, he does not have the wealth to have the ship fixed and had to sacrifice a luck level and his time.


Kelvins MOBILE GAME Primary Logo

Bison Bold

Bison regular

Aa Bb Cc Dd Ee Ff Gg Hh Ii Jj Kk Ll Mm Nn Oo Pp Qq Rr Ss Tt Uu Vv Ww Xx Yy Zz

Aa Bb Cc Dd Ee Ff Gg Hh Ii Jj Kk Ll Mm Nn Oo Pp Qq Rr Ss Tt Uu Vv Ww Xx Yy Zz Typography

Hex: e3d9be

Hex: dc7d29

Hex: 8dd6f7

Pantone: 7611 C

Pantone: 292 C

Pantone: 7410 C

rgb: 227 217 190

rgb: 220 125 41

rgb: 141 214 247

cmyk: 11 11 26 0

cmyk: 11 60 98 1

cmyk: 40 0 0 0

Color Palette


05 Action Graphics Web Design Action Graphics is a print and design company who needed a fresh take on its outdated website. Created from scratch using HTML and CSS, the goal was to engage the user while maintaining a simple to navigate experience for the visitor. Being built from the ground up, Action Graphics is ready to be viewed from all your devices with ease. Perfectly balanced for visual aesthetics and displaying key information.



Printing Action Graphics is a family owned and operated company striving for the ultimate customer service experience and ease of use through its services. Emphasizing these features was a must when constructing the page.


Design As well as printing, Action Graphics does a fantastic job as a design firm. Taking on jobs from church events to as large as a full company re-branding. The goal when building this page was to show its wide range of skills while maintaining the minimalistic layout allowing for easy viewing.


06 Meteoric Market Web design/ Marketing Meteoric Market is a fast and easy online-only grocery store that allows its customers to order and receive products in hours without the crowds. Modern expectations and health concerns limit the ability for people to spend hours in a grocery store looking for all the products they want. Meteoric Market allows for people under any circumstances to get quality products at unbeatable prices thanks to not having an in-store experience.




Meteoric Market

MM

Primary Logo

Secondary Logo

Isidora Semibold

Trenda Light

Aa Bb Cc Dd Ee Ff Gg Hh Ii Jj Kk Ll Mm Nn Oo Pp Qq Rr Ss Tt Uu Vv Ww Xx Yy Zz

Aa Bb Cc Dd Ee Ff Gg Hh Ii Jj Kk Ll Mm Nn Oo Pp Qq Rr Ss Tt Uu Vv Ww Xx Yy Zz Typography

Hex: abcb5c

Hex: 565656

Hex: fae8b1

Pantone: 367 C

Pantone: 11 C

Pantone: 7401 C

rgb: 171 200 100

rgb: 86 86 86

rgb: 250 232 177

cmyk: 37 5 78 0

cmyk: 64 56 55 30

cmyk: 2 7 36 0

Color Palette


Thank You

C

T

Casey Todd


Turn static files into dynamic content formats.

Create a flipbook
Issuu converts static files into: digital portfolios, online yearbooks, online catalogs, digital photo albums and more. Sign up and create your flipbook.