Amber Smith | Graphic Design Portfolio | Flagler College

Page 1

AMBER SMITH

Web & Graphic Designer


“What do creative writing and graphic design have in common?�

They tell a story.


TABLE OF CONTENTS Boo Ninth Life Cat Sanctuary Mambo Defiance Nike: Get Dirty Ignite Antiques & Uniques Mango & Kiwi


Boo App & Web Design Boo is a ghost-hunting game featuring real world applications. The more you play Boo and the more levels you complete, the more you unlock within the app. This includes functional ghost hunting gear you can use through your phone.

The Challenge I was tasked with designing a user experience centered app interface. The app had to perform at least three tasks and be themed according to the preferences and directions given by our User. My User was a 20 year old ghost tour guide with a love of casual, cute games.

The Solution Combining cute, spooky and practical, Boo appeals to the Users’ wants and visual preferences. Not only is it a game that uses real world paranormal investigation gear, but all of its features can be unlocked through gameplay. Said features include actual tools the player can use for their own ghost hunting adventures, all in one convenient app.

Design Narrative Flat, vector graphics paired with highly saturated colors give Boo a playful appeal that brings life to he characters. Dark indigos paired with white and orange give the interface a clean, contrasting look that is easy on the eyes and simple to navigate. The purpose of the designs is to combine fun with spooky that teens and college-aged individuals will enjoy.



Behind the Design The User was a 20-year-old ghost tour guide with a long time interest in the paranormal. She wanted a game that incorporated real ghost hunting gear into the play. However, she did not want the fun to be lost, and expressed an interest in vivid colors, which in turn gave life to the character’s varied color schemes. Responsive Prototype: https://invis.io/QA28K6ZR3


How to Play

Continue Instructions

BASIC CONTROLS: Tap the screen to move around the level. Tap a tool icon to use that tool.

New Game Continue Instructions

Simple right?

Your Gear

Your Gear

Bonus Content

Bonus Content

Your Gear Flashlight

Choose a Character Grimm

Swipe right or left to select a character.

Tap on the RIGHT ARROW to continue.

Locked Daisy

Unlock at level 20

THE BASICS

New Game

You are a member of an elite group of high schoolers known as the BOO CREW, and are this world’s only hope in a paranomal outbreak of malcontent spirits. Find and frighten away all the ghosts to complete the level. Be careful, some spirits are stronger than others and will take more effort to find and defeat.


Choose a Character Kat

Choose a Character Alejandro

Choose a Character Grimm

Choose a Character Evelynne

Choose a Character Daisy


Level One

1. On a Dark and Stormy Night

LEVEL ONE

Turn location feature on to unlock BONUS CONTENT.

Locked

2. A Paranormal Problem

ON Locked

3. Mad Mary’s Murder Mall

Locked

4. A Not So Amusing Park

Locked

5. Pushing Up Daisies

OFF

FRIGHT METER

FLASHLIGHT METER

WHITE NOISE GENERATOR

On a dark and stormy night, a hero’s journey begins. Be wary, there are strange and scary things afoot. Shine a light to startle specters that might do you harm, but remember, your flashlight has limited battery power.

FRIGHT METER

Tap the FLASHLIGHT icon to shine a light. Tap it again to turn it off.

WHITE NOISE GENERATOR

+2 fright

Tap on the screen to move your character in that direction. FLASHLIGHT

FLASHLIGHT METER

FLASHLIGHT


Behind the Design The website is meant to be a compliment to the app. The interface is completely responsive to any screen size so that users may access it from anywhere. The website provides information about gameplay, characters and more that is not provided within the app. Full Website: www.amberbsmith.com/boo



Ninth Life Cat Sanctuary Advertising & Web Design Ninth Life is a cat sanctuary that advocates changing kill shelters across the country into no kill shelters through their current advertising campaign: #NoKillDreams.

The Challenge The primary objective of this project was to design a website for a non-profit organization and promote a social awareness campaign.

The Solution My adoration of felines gave me direction. Combining web and print, I designed the website to be easy to navigate and the ads to direct users to the site and social media. Given the no-kill nature of Ninth Life, the idea of them running a no-kill awareness campaign seemed natural.

Design Narrative The gaze is imperative to the impact. Given the design’s reliance on photographic imagery, it was important to engage the audience in a manner that was direct and empathetic. The grey, white, sea-foam and gold color scheme gives the site and ads a sleek, modern style that is appealing and serious yet soft and welcoming.






Behind the Design This nine page website is designed to be informative and easy to navigate. Through the home page, every other page on the site can be found. The slider gives a route to the organization’s current fundraiser as well as to the landing page of their #nokilldreams advocacy campaign. Responsive Website: www.amberbsmith.com/ninthlife




Mambo Branding & Packaging Design Mambo is a product line of all-natural salsas and hot sauces.

The Challenge My objective was to brand and design packaging for a food product.

The Solution Inspired by a trip to a local Greek Festival, I chose to brand and create packaging for a company that made organic salsa and hot sauce. Dancing, spicy foods and music all played a role in the creation of the logo and brand image.

Design Narrative “Mama had a secret� became a tagline early on in the design process, shortly after the name Mambo. Both hinted at a underlying flirty sexiness that would appeal to the target audience. Everything from the colors, the flat vector graphics and the type combination are rooted in latin american dance and music.





Defiance Branding & Web Design Defiance is an athletic wear brand targeted at college-aged individuals seeking affordable, comfortable shoes and other clothing.

The Challenge Presented with a mock client to design for, I was to brand their company according to their preferences.

The Solution Through interview and discussion, the company focus on innovation, customization, comfort and affordability became clear. The brand needed to 'break boundaries' yet remain relatable to their college-aged audience. The name defiance resonated with the client and from there, colors and symbolism grew.

Design Narrative The double-triangle was one of the first design elements and quickly became the secondary logo for the brand. Flipping the 'N' added a subtle defiance to the primary logo itself. Lime green and grey made for a potent pair when it came to color—the green providing energy and the grey a sense of ground. Black and white are also very prominent in the design, adding to the modern edginess.




Responsive Home Page: www.amberbsmith.com/defiance


Nike: Get Dirty Advertising, App & Web Design Get Dirty is a theoretical mud run event sponsored by Nike. The campaign revolves around a system of points gathered through the "Pass the Baton" app, which can be gained through scanning codes. These codes are found on printable batons, posters in various locations such as Nike stores as well as through watching the twitter feed.

The Challenge I needed to create an interactive advertising campaign for a company that would align with or broaden their target audience.

The Solution Nike is perceived as a sport brand, but many people wear their products casually. Most mention comfort and durability as reasons. A mud run targets both the casual and sporty audience. The system invokes a sense of fun as well as competition.

Design Narrative Clean typography emphasizes information over imagery. Brown on white text blocks are easy on the eyes and catch their attention without distracting. The brown is suggestive of the 'get dirty' theme. Hints of teal add playfulness. All elements lead into each other through a hashtag and are linked to the keystone app, Pass the Baton.



Behind the Design Pass the Baton is the keystone of the campaign. Scanning barcodes allows the User to collect points to spend on prizes. The barcodes come from printable batons, posters, twitter feed and more. If an individual wishes to go paperless, there is a 'Pass Mode', that exchanges codes with others with the same mode on when two phones are within a certain distance of each other.


THE BASICS


THE BATON


THE PRIZES


Behind the Design This campaign webpage is a long, scrolling one with many anchors to keep the visitor moving through it. Large images separate blocks of text and the whole page is responsive across screen sizes. Responsive Website: www.amberbsmith.com/nike



Behind the Design The poster (left) and printable baton (right) both directly relate back to the app. Scanning their barcodes provides points. Passing batons allows for people to gain points through other people scanning their baton, as well as the person doing the scanning. Posters are located in public places, such as Nike stores, and are worth more points than individual batons. The event pass (below), is part of their interactive advertising campaign that involves a jogger approaching people in various places and asking them to run with him. If they run, they win a free event pass to the mud run.


Behind the Design The baton is unique to every account. You can create a printable PDF within the app. However, if a person wishes to go paperless, setting the app to ‘Pass Mode’ allows an individual to collect points by simply walking past people who also have the app in ‘Pass Mode’.


Ignite Branding & Web Design Ignite is a high end steakhouse concept.

The Challenge The objective was to create a sleek, expensive-looking brand.

The Solution When people think high end restaurants, often things such as seafood and steak come to mind. I focused on creating a brand that emphasized a classy and classic style.

Design Narrative The shape of the logo is remnant of a cattle brand and vaguely shaped like a flame. When emblazoned in gold on a black background, it gives the brand elegance and refinement.

Website: www.amberbsmith.com/ignite






Mockup Credit: www.graphicsfuel.com


Antiques & Uniques Advertisement, Signage & Web Design Antiques and Uniques is an image redesign concept for a haunted antique store in St. Augustine, Florida

The Challenge Creating a system of around twenty signs was the basis of this project. From there, it became a more all encompassing rebranding which included the facade and website.

The Solution I became good friends with the shop owners Larry and Denice. Together we discussed the history of the building, their relationship with the local ghosts and what kind of experience they wanted their customers to have. It was a fantastic experience working on this project with a client nearly every step of the way.

Design Narrative Antique stores are a door to the past, both the key and portal to unexpected experiences. A haunted antique store is especially unique, and needs to show a sense of fun as well as spookiness to go along with the sense of discovery. Painted wood and vinyl sticks allowed for the best compromise between the traditional St. Augustine scene and a more modern flair that would attract the eye of tourists and locals alike.

Responsive Website: www.amberbsmith.com/antiques



GA

GAME









Mango & Kiwi App & Book Design Mango and Kiwi are the protagonists of a tablet app and an interactive story book. Both are designed with the intention of edutainment for elementary age children on the autism spectrum in order to help with motor skills, shape recognition and social skills. Both the app and the story book encourage interaction between a child and an adult.

The Challenge The class was introduced to a teacher specializing in teaching elementary age children on the autism spectrum. We were asked to design an edutainment app and other interactive materials that could be used in and outside of the classroom.

The Solution Mango and Kiwi were born out of a single, persistent thought: a dragon who wanted to become an architect. An app involving matching shapes to a blueprint like grid became the focus, since it allowed for the children to touch and interact with the app and receive positive feedback. The book came after. The fully developed story involves the same matching grid, but with reusable stickers to encourage interaction between parent and child as well as independent exploration.

Design Narrative Mango and Kiwi's bright colors and simple styling are appealing to young children. In the app and book, color helps the child distinguish shapes from each other. The characters' appearances are heavily inspired by their names, which are, obviously, colorful fruits.



Behind the Design Make It, Mango! follows Mango's quest to rebuild the kingdom of Shape-a-lot with his architect skills. Through it, children learn the names of shapes and build motor skills as they tap and drag the shapes into place.



Behind the Design The app's settings allow for a great deal of customization so that a teacher or parent can make sure a child has the best possible learning experience. With captions to help them learn to read and vocals to teach how the names are pronounced—the app offers multiple ways to held a child learn. Everything can be turned on or off to make sure the child is comfortable and not over stimulated.



Read the whole book on Issue: https://issuu.com/ambersmith40/docs/kiwi_skingdombook


Behind the Design Kiwi's Kingdom is an interactive storybook entirely written and illustrated by me. It follows the journey of Mango and Princess Kiwi as they try to rebuild the Kingdom of Shape-a-lot in time for the royal ball.


Behind the Design It has three blueprints for the reader to lay matching stickers over. The stickers are durable and reusable, and extras are included in the back for further building on flat surfaces like walls and windows.


Mockup Credit: https://www.behance.net/gallery/33024617/Square-Magazine-Mockup-Free-PSD



Contact Phone: 972-505-0111 Email: amberbsmith101@gmail.com LinkedIn: /amberbsmith101 Behance: /amberbsmith

Website www.amberbsmith.com



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.