Graphic and Web Design Portfolio

Page 1

PORTFOLIO 2015

OSSIRIS. AVALOS


Design is the process, not the result...


OSSIRIS. AVALOS GRAPHIC & WEB DESIGNER


STATEMENT Ossiris Avalos is a graduate from the Art Institute of California–San Francisco with a Bachelor of Science. The objective of this portfolio is to demonstrate her work throughout the course of her education and her level of expertise in the field of design. She considers her strongest skill to be conceptualizing, which she accentuates in each of her projects. She believes that attentiveness to detail further enhances the quality and performance of her design.


PROJECT CLASSIFICATION UI

PACKAGING

BRANDING

MOTION GRAPHICS

PUBLICATION

WEB


No.1 CETS

No.2 MOLTEN LEAF CO.

No.4 ALUVIAL ESTATE

No.7 SKINNYGIRL COSMO

No.8 GAZEL .ORG


CONTENT GRID No.3 TOWERBALL

No.5 ALEXANDRIA 2020

No.6 FONTENT

LOGOFOLIO


1

No.

BRAND CONCEPT CORPORATE TRUSTWORTHY SUSTAINABLE


CALIFORNIA’S ELECTRIC TRAIN SYSTEM


PHASE 1: BRAND PHASE 2: PRINT PHASE 3: DIGITAL

CETS is a Californian based railway system. This service offers a safe and eco–friendly transportation alternative within the state. The challenge in designing the corporate brand identity relied on a thorough understanding and development of the brand’s personality, the marketing objectives and the services offered to the market. Extensive research on competition and target clientele was necessary to determine style. CETS brand identity design is categorized by brand elements, print collateral and digital collateral. The brand elements include: logo, identity colors, corporate typography, and company tagline. The CETS Corporate signature is an emblem that consists of the abbreviated CETS wordmark, the electric train formed to fit the bottom curve of the 'S' and the California flag star on the left corner of the 'C'. The corporate color system reflects a dynamic multi-dimensionality. The color green is implemented to represent CETS' eco–friendly practices. The use of dark blue unifies the corporation and promotes its professionalism and nobility. Grey is used as a neutral hue, and its metallic qualities are used to indicate technology and feasibility. Print materials include: stationery, corporate standards guide, staff uniforms, and advertisements. The digital collateral consisted of the interface design of CETS' website and a mobile application. The objective of the UI design was to allow quick and easy access to the company’s services. The look and feel of the digital collateral is unified with brand standards and implies motion in all non-objective elements.

The Star on the Californian Flag Connectivity

Movement & Speed Our electric trains




A safe and eco–friendly transportation service for the state of California


PHASE 1: BRAND PHASE 2: PRINT PHASE 3: DIGITAL

Standards manual jacket cover.



PHASE 1: BRAND PHASE 2: PRINT PHASE 3: DIGITAL

Splash Page

Home

Mission

About Us

Footer



LOGIN /

SIGN UP

USER | PASSWORD FILL IN (NEW ACCT)

SIGN IN

ONE WAY | ROUND TRIP TO (FIND)

BUY TICKET

FROM (FIND) DATE

CONFIRMATION #

NEXT

PAYMENT

TIME (+/-)(AM/PM)

SPLASH PAGE

SEATS (+/-)

HOME

LOADING

TEXT | EMAIL

HOME

MAP (SEARCH)

STATIONS

POP-UP PANEL

RESERVATION

BUY TICKET

SEARCH

STATUS

GALLERY

MORE...

MAP CONTACT

SOCIAL MEDIA

FORM PAGE BUTTONS

MY ACCOUNT

PROFILE

EDIT MY RESERVATIONS

Mobile application cite map.


Transition of splash page; from sketch to wireframe, to prototype, to final.



85% 90%

User testing was conducted through Usability Hub.


2

No.

BRAND CONCEPT ORGANIC RUSTIC TRENDY


MOLTEN LEAF CO.


PHASE 1: BRAND PHASE 2: PACKAGING PHASE 3: HOLIDAY

Molten Leaf Co. is a Marin County based chocolatier. It creates organic and nutritious chocolate bars from the season's best local fruit. Molten Leaf Co.'s objective is to expand its distribution range by entering into the Whole Foods Market family. This Californian family owned business is devoted to its community and ensures that all of its product is organic, environmentally-friendly, and mainly sourced from local farmers. Not only is reputation a vital element of this brand, but its “look good, feel good” presentation is imperative to its brand identity. Molten Leaf’s logo has a dual representation; the initial 'M' in the shape of fruit. The company’s color identity is a light shade of ivory and allows a high contrast when next to secondary identity colors. Each seasonal chocolate is differentiated by a color and a leaf icon. The challenge in creating Molten Leaf relied on packaging aesthetics. The packaging design had to portray the rustic and organic identity of the company while keeping a contemporary visual appeal. A saturated triangular pattern was created to unify the four seasons and allow packaging to stand out amongst its top competitors. The outer case was wrapped in burlap to showcase the company’s organic agricultural methods. Special packaging was produced for the holidays. Inspired by the form of a "fortune teller" also known as "cootie catcher", this tray–like Christmas ornament has two functions: (1) it displays the chocolate pillow boxes and, (2) it hangs on a Christmas tree as an ornament. For the specialty packaging, Christmas illustrations replace the brand’s geometric pattern.

Spring

Summer

Fall

Winter


Seasonal dieline for pillowcase wrapper.

Holiday dieline for pillowcase wrapper.

Tunnel case dieline.


A locally sourced organic chocolatier with a rustic and contemporary visual design



PHASE 1: BRAND PHASE 2: PACKAGING PHASE 3: HOLIDAY



PHASE 1: BRAND PHASE 2: PACKAGING PHASE 3: HOLIDAY



3

No.

BRAND CONCEPT FEUDAL CHALLENGING MYSTICAL


TOWERBALL


PHASE 1: BRAND PHASE 2: PACKAGING PHASE 3: DIGITAL

Towerball is a board game Inspired by renowned drinking games such as King’s Cup, Beerpong and Quarters. It challenges the player’s mental and physical abilities. This game is unpredictable, it can last from just a few minutes to over an hour. It is entirely interactive without having to leave your seat. The outcome of the game relies on the fortune of the cards, however, players have the opportunity to redeem their misfortune with hand-eye coordination. The last player standing wins! The challenge in Towerball’s creation was to cater to a wide range of ages. This game is family oriented, and its aesthetic appearance seeks to appeal to teenagers as well as adults. A feudal theme was constructive to Towerball’s identity, giving it a mystical and antique characteristic that juxtaposes its sleek and uncluttered design. Towerball logo has triple symbolism; a crown, the top of a tower and the top of a 'T'. This represents the objective and tagline of the game "Your shot at the crown", and the physical aspect of the board game. The logotype is hand-type and based on Celtic calligraphy. The arch on the lower half of the crown logo serves as a nest for the type treatment and adds motion to the illustration. King

Ace

Queen

Jack

Made out of plexiglass to decrease its weight, Towerball is designed to come apart for feasible packaging. The ring that holds the tower in place has a ledge intended to keep the balls within the board when a player shoots. The rules are printed on a script for a concise theme. Given our technological times, Towerball was further expanded into a digital game and formatted for various devices.



Towerball is a fusion of Game of Thrones, Beerpong and King’s Cup



PHASE 1: BRAND PHASE 2: PACKAGING PHASE 3: DIGITAL

Spades

Diamonds

Clubs

Hearts





PHASE 1: BRAND PHASE 2: PACKAGING PHASE 3: DIGITAL

“ SHOT

YOUR

AT THE

CROWN

App icon.



4

No.

BRAND CONCEPT POSH EFFERVESCENT EDGY


ALUVIAL ESTATE


PHASE 1: BRAND PHASE 2: DIELINE PHASE 3: PACKAGING

Aluvial Estate is a sparkling wine producer located in the heart of the Alexander Valley in California. Like the best sparkling wines in the world Aluvial harvests, presses, ferments, ages and blends to ensure that the taste and quality of this product is exquisite. The name of the brand proceeds from alluvial soil, which establishes a minerality essence to its identity. This French-infused bubbly offers four varietals: Rosé, Cuveé, Noir (blanc de noirs) and Gris (extra brut). "Effervesce" is Aluvial Estate’s tagline, which represents the sparkle and magic in the content and the liveliness of the event in which this wine is enjoyed. The objective of this design was to create a lavish brand that stood apart from its competitors on store shelves. The branding elements include; an emblem, (logomark and wordmark), identity colors for brand and for products, and a typographic style that personified the aromatic crisp flavors. The brand identity color is black to contrast each varietal’s identity color. These colors were chosen to represent the grape of the varietal. A metallic salmon for Rosé, a mineral gold for Cuveé, a dark reddish shade for Noir and a grainy silver for Gris. Eight label layouts were designed to distinguish varietal and volume. The look and feel of the packaging elements were tailored to brand standards and to capture the attention and desire of its target audience. The packaging collateral consists of; two cases for the 750ml bottles (one cylinder and one triangular), and a case that holds all four quarts (which also serves as a cooler). This cooler is internally wrapped with a waterproof metallic plastic that provides insulation. Additionally a poster was designed to introduce the Rosé varietal.


Brut

French Blend

Blanc de Noirs

Extra Brut


ALEXANDER VALLEY 2012 | 750ML | ALCOHOL 12.9%

ALEXANDER VALLEY 2012 | 750ML | ALCOHOL 12.9%

PHASE 1: BRAND

PHASE 2: DIELINE

PHASE 3: PACKAGING



Brand name originates from alluvial soil to establish a mineral–like quality



PHASE 1: BRAND PHASE 2: DIELINE PHASE 3: PACKAGING



5

No.

BRAND CONCEPT ATHLETIC MONUMENTAL ENGAGING


ALEXANDRIA 2020


PHASE 1: IDENTITY PHASE 2: EMBLEM PHASE 3: PICTOGRAMS

The objective of this project was to promote the summer Olympics of Alexandria 2020. On a macro and micro level the biggest challenge was to design for a universal audience coming together to share the experience of viewing sporting events on a global stage. Design elements were created to be simple and communicate the message despite the language and cultural barriers. As the hosting country, Alexandria’s culture is represented in every aspect of this campaign. Research on the history, the climate conditions, transportation methods, hospitality, infrastructures, and sporting facilities was necessary for brand and graphic symbolism. The Olympic emblem illustrates a silhouette of the city’s harbor nesting a staircase. This staircase represents enlightenment and resilience. The fire is a representation of the historic lighthouse and simultaneously indicates wind and water. Branding colors were derived from the Egyptian flag (red and yellow), and the color turquoise represents the Mediterranean sea. The Olympic medals hold a round glass case that contains sand and the lanyard's texture is a manifestation of Alexander the Great’s cape. The sporting pictograms impersonate the Arabic alphabet, which is the city’s primary language. Additional collateral includes the Olympic torch, event tickets and street banners.

Ancient mediterranean city. “The pearl of the mediterranean”

Egyptian flag.

Port of Alexandria. U-Shaped outline served as inpiration for concept.

Arabic alphabet. Arabic is the primary language spoken in Alexandria.



PHASE 1: IDENTITY PHASE 2: EMBLEM PHASE 3: PICTOGRAMS




Alexandria is a port city founded by Alexander The Great known as "The Pearl of the Mediterranean"


PHASE 1: IDENTITY PHASE 2: EMBLEM PHASE 3: PICTOGRAMS

SOCCER

RUGBY

HOCKEY

BASKETBALL

VOLLEYBALL

SYNCHRONIZED SWIMMING

ROWING

DIVING

SWIMMING

RHYTHMIC DANCING

ATHLETICS

WEIGHT LIFTING





6

No.

BRAND CONCEPT CLASSIC SYMBOLIC SPACIOUSS


FONTENT EDITORIAL


PHASE 1: EDITORIAL PHASE 2: LAYOUT PHASE 3: TIMELINE

Fontent is a combination of the words form and content. The lower case 'O' with an underline signifies the corporate aspect of graphic design. This publication features information about graphic design and how it intertwines with art, creativity, business and most importantly how it has evolved throughout history. Graphic design tells a story of a time and its people, and this publication is one of the many mediums in which these stories are told. Inspiration for Fontent proceeds from the New York School Movement in which magazines emerged as an art–form. The first issue is an homage to this movement, and the hero image on the cover was inspired by the late Paul Rand’s manifesto. The cover is meant to be a rebus or a visual pun of the New York School Movement. The objective of the cover is to imply simplicity while integrating both form and content: two symbols merged (formed) to communicate content. A silhouette of New York City's landscape on top of a graduation cap (which represents school). The dimensions and position mimic the hero image of the "Think Small" Volkswagen ad campaign from 1957. The first issue features a main article about this campaign. The editorial's minimalistic design approach allows a focused view of the symbolism behind the artwork showcased in each volume. An abundance of active space in both the cover and the body copy is part of the editorial’s identity. The cover is consistently designed in black and white as the brand’s signature.



Fontent is n publication inspired by designer Paul Rand’s manifestos

Inspiration. “Think Small” print ad for Volkswagen.



PHASE 1: EDITORIAL PHASE 2: LAYOUT PHASE 3: TIMELINE



No.

7 BRAND CONCEPT JOLLY ENERGETIC GROOVY


SKINNYGIRL COSMO


PHASE 1: ILLUSTRATION PHASE 2: INFOGRAPHICS PHASE 3: MOTION GRAPHICS

This project is a campaign called "How to make a Martini." The objective was to create an infographic for the brand Skinnygirl Vodka. The campaign’s collateral consists of an infographic brochure that comes with the vodka bottle and a motion graphics commercial. The brochure is an 8 panel step–by–step process on how to make a classic martini using Skinny Girl vodka. The commercial further explains the process in a fun and brief manner. The illustration style is a 70's retro theme with sharp edges and geometric shapes; classic yet playful. A combination of hand–type and vector illustration was used to create the masthead of this campaign. The color palette is derived from the brand's original colors (red and black). Orange and lime green were added to highlight the ingredients and garnish of the vintage cocktail.

vodka

The infographic highlights ingredients, cocktail–ware, amounts served, and technique. An ad was created to be placed on the back cover. This ad is meant to mimic Skinnygirl’s current e–card campaign and simultaneously conveys relevance to the "How to make a martini" campaign.



PHASE 1: ILLUSTRATION PHASE 2: INFOGRAPHICS PHASE 3: MOTION GRAPHICS



PHASE 1: ILLUSTRATION PHASE 2: INFOGRAPHICS PHASE 3: MOTION GRAPHICS



8

No.

BRAND CONCEPT SUSTAINABLE FEMININE ALTRUISTIC


GAZEL .ORG


PHASE 1: BRAND PHASE 2: PRODUCT PHASE 3: CAMPAIGNS

Gazel is an organization that produces biodegradable and organic feminine hygiene products. The name of the company is sensational spelling for gazelle; an animal that is known for its lustrous eyes and agility. The word also denotes "gaze at her" (elle = her in French). The objective of this product was to create a brand that protects women who protects nature. The product and packaging of Gazel was not only the most challenging factor but also the most important in creating this Eco-Effective brand. The device consists of assembling a sustainable tampon applicator and absorbent. The plastic-like applicator is composed of corn and tapioca starch, this material is called PLA (poly–lactic acid). The absorbent was made out of 100% organic cotton at first, but due to further research on the negative environmental impact of cultivating cotton, bamboo hemp became a more favorable material. Banana cardstock paper is used for packaging for both the wrappers and the container. Due to Gazel’s teenage target market, the brand relies on witty illustration ads to convey its mission: a sustainable lifestyle. In addition to the product’s ads, Gazel created a feminist campaign called "Limits None" which advocates for equality of the sexes. This brand is an organization its profits are redirected towards other organizations that also promote a healthy lifestyle for women. A third campaign was created to promote gazel’s vision: "In Syned" This campaign’s objective is to communicate the alliance between Gazel and other organizations or movements, such as Breast Cancer Awareness, Childhood Cancer Awareness, Global Citizen Organization and The U.N’s Blue Heart Campaign against human trafficking.

+

+


GAZEL ECOLOGY



Additional color pallet for ads.

Print and digital marketing material.


PHASE 1: BRAND PHASE 2: PRODUCT PHASE 3: CAMPAIGNS

Bamboo Hemp

protecting women who protect nature


Cornstarch

Banana Paper


A soil–to–soil organization that seeks to affect change through transparency and collaboration



# insynced

PHASE 1: BRAND

campaign

PHASE 2: PRODUCT PHASE 3: CAMPAIGNS

# limits.NONE campaign



SEGWAY SHOPPING CART

GRAPHIC DESIGN EDITORIAL [TYPE & PIXELS]

WEB BROWSER FOR KIDS

ARCHITECTURE & DESIGN MUSEUM [A&D]

SPARKLING WINE ESTATE

OLYMPICS

ACADEMIC INSTITUTION

FEMININE HYGIENE

WEB PORTFOLIO FRAMEWORKS


LOGOFOLIO

GRAPHIC ARTS EDITORIAL

MUSÈE MECANIQUE [ANTIQUE TOY MUSEUM]

FAST & FURIOUS 7 [MOTION PICTURES]

BOARD GAME

ORGANIC CHOCOLATE

MOVIE REVIEWS APP

RECEIPT REPOSITORY APP

TRANSPORTATION SYSTEM

CONTEMPORARY ART SHOW


Conceptualize outside of the grid, and construct within it...


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.