Graphic Design Portfolio

Page 1

graphic design portfolio





graphic design portfolio


Š 2018 Monica Arellano Photos: Monica Arellano Digital Printing: Blurb.com Binding: Blurb.com

6 | social change

project 01/05 by monica arellano


thank you This has been an amazing and challenging journey for me. I want to dedicate this portfolio to the instructors and peers who had a part to play in my personal growth and success. I also want to thank my family and especially my husband who has sacrificed and believed in me every step of the way. Thank you for all the support and encouragement.


contents: social change

p. 12

support tool

p. 32

color meaning

p. 42

adaptive design

p. 58

near future p. 82



w


I believe people, systems, and organisms grow stronger when exposed to chaos. I embrace that chaos during my creative process.

introduction

| 11


typeface

instructor

category

deliverable

title

_Gotham

_Hunter L. Wimmer

_Print

_Posters (3)

_MMI Project

_UX/UI

_Booklet

_Packaging

_Website

_Rockwell tools

class

_Visual Thinking

_Toolkit

_Adobe Photoshop _Adobe InDesign _Adobe Illustrator _InVision App

social change

12 | social change

project 01/05 by monica arellano

completed

_August 2016


description

MMI is a multi-deliverable project that explores the challenges of the medical marijuana industry for new or existing patients. For this project I had to generate a topic for investigation, develop an audience spectrum, key words, visual system, conceptual solutions, and finally realize and refine those solutions while keeping a thorough process journal. concept

The concept behind this project is to break down the stigma surrounding marijuana by building awareness, call to actions, educate, facilitate conversations between patients and doctors, and build empathy for those who stand to benefit from its medicinal qualities. social change

| 13


14 | social change

project 01/05 by monica arellano


social change

| 15


My first deliverable was the poster series which served as an opportunity to develop and refine the visusal system, project name, and identity for the entire project. It also serves as the first point of interaction and call to action in a user’s journey.

16 | social change

project 01/05 by monica arellano


social change

| 17


18 | social change

project 01/05 by monica arellano


social change

| 19


20 | social change

project 01/05 by monica arellano


The booklet helps potential patients feel that they are not alone in considering medicinal cannabis use. It is also a collection of stories that help people outside of my audience spectrum empathize with those who can benefit from medical cannabis.

social change

| 21


22 | social change

project 01/05 by monica arellano


social change

| 23


24

selected works by monica arellano


social change

| 25


26 | social change

project 01/05 by monica arellano


The toolkit was designed as a way to help kick start patients and caregivers who are ready to take that next step. They can understand how cannabis can help them, how to frame the conversation with their doctor, and options when it comes to acquiring cannabis.

social change

| 27


Designing a website where a patient or caregiver could discreetly learn about the benefits of cannabis and connect with other patients and caregivers for support was a valuable component of this project. After the poster series, this would typically be a second point of interaction in the user journey.

28 | social change

project 01/05 by monica arellano


social change

| 29


30 | social change

project 01/05 by monica arellano


Knowledge is power and features like the Click + Learn page aimed to empower my audience by providing easy access to medical studies, terminology, and other cannabis related information.

social change

| 31


typeface

tools

instructor

category

title

_Archer

_Adobe Photoshop

_Bob Sloat

_UX/UI

_Cast On

_Ideal Sans

_Adobe Illustrator

class

deliverable

completed

_Digital Design

_App

_December 2016

_InVision App

Studio

support tool

32 | support tool

project 02/05 by monica arellano


description

Cast On is a knitting application I designed where I was asked to research and identity a problem in the world that could potentially be solved through the design of an application. concept

I developed a design that served three functions. Make learning or refreshing knit knowledge easier, foster an online community of knitters, and a tool that tracks project progress. I looked at competition in the same space as my app, developed audience personas, a visual system, wire frames, and finally prototyped my final application using InVision.

support tool

| 33


34 | support tool

project 02/05 by monica arellano


support tool

| 35


36 | social change

project 01/05 by monica arellano


social change

| 37


I taught myself how to knit years ago, so when I was developing my design brief, I really understood the needs of my audience. That first hand knowledge shaped the resulting design from loading screen to global nav.

38 | support tool

project 02/05 by monica arellano


support tool

| 39


40 | support tool

project 02/05 by monica arellano


support tool

| 41


typeface

instructor

category

deliverable

completed

_Graphik

_Jeremy Stout class

_Poster series _Housing

_May 2017

tools

_Print _Packaging

_Photoshop _Illustrator _InDesign _Mixed media

_Experimental Type

title

_Yellow

color meaning

42 | color meaning

project 03/05 by monica arellano


description

Yellow is a type experiment poster series where I was asked to select a color and think divergently about its meaning and how that could be interpreted visually into a series of 9 posters, housing, and TOC. concept

I chose the color yellow and explored the different meanings and uses. I developed a set of phrases including one or more words and then began to experiment with sketches and materials to develop what would become my final poster series.

color meaning

| 43


44 | color meaning

project 03/05 by monica arellano



The final visual system for the housing was based on my initial research for the project when I looked up the definition of yellow in the dictionary. I chose to use a clean minimal design with the phonetic spelling of yellow like it would be displayed in a dictionary.

46 | color meaning

project 03/05 by monica arellano


color meaning

| 47


48 | color meaning

project 03/05 by monica arellano


color meaning

| 49


50 | color meaning

project 03/05 by monica arellano


color meaning

| 51


I wanted the knocked out text to feel like it happened organically so I utilized butter to get the text to knock out from the juice.

52 | color meaning

project 03/05 by monica arellano


color meaning

| 53


54 | color meaning

project 03/05 by monica arellano


color meaning

| 55


56 | color meaning

project 03/05 by monica arellano


color meaning

| 57


typeface

instructor

class

deliverable

title

_Graphik

_Joseph O’Donnel

_Principles of UX/UI

_Adaptive website

_Amoeba.com

tools

_Photoshop _Adobe Illustrator _Sketch _Invision

category

_UX/UI

adaptive design

58 | adaptive design

project 04/05 by monica arellano

completed

_December 2017


description

For this project, I was asked to select a website, analyze, propose a redesign, and finally grow that design into an adaptive website across three platforms with different screen sizes. concept

I chose Amoeba.com for my redesign because I enjoy buying music in various formats and I wanted to improve the online user experience for Amoeba.com. I developed an initial set of wire frames based on process flow chart, user testing, and a competitive and heuristic analysis. After another round of user input, I refined my final design and adapted that across the three platforms. adaptive design

| 59


original website hp

60 | adaptive design

project 04/05 by monica arellano


new website hp

adaptive design

| 61


process flow analysis

62 | adaptive design

project 04/05 by monica arellano


adaptive design

| 63


480 px resolution wireframes

64 | adaptive design

project 04/05 by monica arellano


768 px resolution wireframes

adaptive design

| 65


1026 px resolution wireframes

66 | adaptive design

project 04/05 by monica arellano


adaptive design

| 67


As a customer of Amoeba Music, the brick and mortar location, I felt that the website lacked the same rich visual aesthetic and experience that a customer would encounter at the shop. I wanted to create an adaptive design that felt in stronger alignment with their brand personality and which had a stronger focus on the album art and descriptions, as if one were flipping through a box of vynils.

68 | adaptive design

project 04/05 by monica arellano


adaptive design

| 69


70 | adaptive design

project 04/05 by monica arellano


adaptive design

| 71


72 | adaptive design

project 04/05 by monica arellano


adaptive design

| 73


74 | adaptive design

project 04/05 by monica arellano


adaptive design

| 75


76 | adaptive design

project 04/05 by monica arellano


adaptive design

| 77



adaptive design

| 79


80 | adaptive design

project 04/05 by monica arellano


adaptive design

| 81


typeface

tools

instructor

category

title

_Graphik _Produkt

_Adobe Photoshop _Adobe Illustrator _Adobe InDesign _Book binding materials

_David Hake

_Print _Information graphics

_Sit, Stay, Speak

class

_Type Systems

deliverable

_Book

near future

82 | near future

project 05/05 by monica arellano

completed

_December 2016


description

For this project I was assigned a topic to research and design a type system for a long form book that would need to incorporate experimental type layout, images, and infographics. concept

My topic was the future of pets. To have more control over my design, I generated my own copy. I developed mood boards that would act as a brief to guide my design decisions and sketched a plan for the layout of the book. Finally I researched production options and brought the book to life.

near future

| 83


84 | near future

project 05/05 by monica arellano


near future

| 85


86 | near future

project 05/05 by monica arellano


near future

| 87


book prototype



90 | near future

project 05/05 by monica arellano


near future

| 91


92 | near future

project 05/05 by monica arellano


I wanted to inject a bit of satire in my book cover design, so I speculated with the design on how we would charge our futuristic pets. Wrapping the design all the way to the back made for a fun surprise when the reader turns over the book.

near future

| 93


94 | near future

project 05/05 by monica arellano


near future

| 95


96 | near future

project 05/05 by monica arellano


near future

| 97



let’s talk designer

typefaces

Monica Arellano 415.497.8714 mctarellano@gmail.com www.monicaarellano.com

Product Graphik

instructor

Jeremy Stout semester

Spring 2018

printing

+ binding

Blurb, image wrap cover 100# Proline uncoated paper


w w w. m o n i c a a r e l l a n o.c o m / m a g ra p h i c d e s i g n


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.