Juanita Castaño Portfolio

JuanitaCastañoportfolio

03 July Av. 1994. Medellín, Colombia

342 43 40312 720 48 59

[email protected]

Brochure

Magazine Cover

Infographics

PhotoDesign

Photomontage

WebPage Mockup

Prezi Presentation

Business Identity

Coding

4

6

8

10

12

14

16

18

20JuanitaCastañoportfolio

Table of Contents


DESCRIPTIONA full-color, full bleede, folding brochure that promotes a company product.

OBJECTIVESLearn to use a multi-page document on InDesign. Learn to wrap text around images and to style paragraphs.

PROCESS1. I explored different ideas and searched inspiration for my brochure. I decided I wanted something girly and cute for this project, with pastel colors. So I decided to create a company that personalizes birthdays in order to make that day a dream come true for girls.2. I decided the shape I wanted to use for the brochure was a gift shape.3. I opened Illustrator and designed a logo for the company. I also create the shape and the several covers of the brochure using Illustrator.4. I opened InDesign and exported the logo as well as the parts of the brochure. I used guides and smart guides to align elements.5. I edited the pictures I chose using Photoshop. Then I place them in my InDesign document, using the guides to align.6. I chose contrasting typefaces.

Brochure

COURSEComm 130 Section 12

DATE07 July 2016

INSTRUCTORJason Stucki

PROGRAMS/TOOLSAdobe Photoshop Adobe Illustrator Adobe InDesign


Magazine CoverDESCRIPTIONA magazine cover with a self-portrait and cover lines of myself for a prominent design agency.

OBJECTIVESLearn to combine good typography skills with the FOCUS design process to create an engaging piece that will communicate a message effectively.

PROCESS 1. I opened a new InDesign document of 8,5in x 11in, and 0,25in of margin and I inserted the self-portrait I had previously edited in photoshop, and placed it as the more prominent element of the page. 2. Then, I aligned the picture on the left one-third grid.3. I organized positive and negative space around my picture, placing text boxes as I had indicated in the shape map.4. I created the magazine name using shapes on Illustrator, and using the Pathfinder tool to create a whole in the center of the “letter” so the background could be seen trhought it.5. I selected my typefaces and fonts for cover lines. I chose Oldstyle for main title, my name, and some other coverl lines. I also chose Sans Serif, varying font size and weight, to create contrast.6. I chose color scheme from the self-portrait, and black and white to create contrast.


DATE05 May 2016


PROGRAMS/TOOLSAdobe Photoshop Adobe Illustrator Adobe InDesign


InfographicsDESCRIPTIONAn infographic to gather and present trending data on Pinterest.

OBJECTIVESLearn to use Illustrator pen tool to create icons that represent ideas in a simple way.

PROCESS1. I reviewed the different Infographic types and I decided to go with the Building Muscle theme.2. I researched and selected the information needed for my infographics. I also researched inspirational images related to the topics to start sketching my icons. I sketched the maine icons and layout.3. I used the awesome pen tool in Illustrator to create my icons and graphics. I also created a background using the texture effect, and I blended an image at the top of the background.4. I chose a color scheme, also using the Illustrator color guide.5. I surf the way searching for tasteful typography. I chose a sans-serif for copy and a decorative typeface for titles.6. I used shapes and lines to organize my icons in the layout, I added color and typography contrast.7. I worked on the details following the principles of alignment and contrast.


DATE09 June 2016


PROGRAMS/TOOLSAdobe Illustrator


PhotoDesignDESCRIPTIONA Photodesign that includes an original, high quality image, a color scheme based on the image, and design elements that go well with the color the picture.

OBJECTIVESLearn to use Photoshop to make basic image edits, use consistent color scheme and design elements based on the picture.

PROCESS1. I sketched my best ideas.2. I chose the color scheme based on the image’s colors.3. I opened Photoshop to edit my picture usign the basic settings. I4. I opened a new 8.5 x 11 InDesigndocument and placed the editted picture in it. I used the Rule of Thirds to aling the picture, placing the Daisy Flower in the intersection of upper one-third line and left one-third line.5. I started to add the design elements I had sketched. 6. I added text by using constrasting typefaces. I was very careful of alignment. I intentionally missaligned the last sentence of the quote so the word “life” will receive more attention.I saved the document as an image to share and print.


DATE18 May 2016


PROGRAM(S)/TOOLSAdobe Photoshop Adobe Indesign


PhotomontageDESCRIPTIONPhotomontage with a spiritual message and at least two pictures combined.

OBJECTIVESLearn to use Photoshop clipping mask and brush tool.

PROCESS 1. Chose the topic I wanted to expose. I thought of something interesting to me, and also something I had a previous knowledge and confidence to talk about.2. I sketched my best idea. I though of two background options; a theater stage, or a simple spotlight. I felt more comfortable with images of spotlight that I found. I also prefered a neutral background in order to add color contrast with the images. 3. I searched all the pictures I needed and tried to find high quiality images. I also searched for some short videos to complement each technique4. I chose a color scheme and contrating typography for titles and body copy.5. I opened Prezi and started to place all the elements in the presentation. I added the planned movement.6. I finished all the details and saved my presentation.


DATE12 May 2016


PROGRAM(S)/TOOLS PreziAdobe Photoshop


WebPage MockupDESCRIPTIONFull color, hig definition, accurate prototype of website homepage.

OBJECTIVESLearn to use a grid in Photoshop

PROCESS 1. I thought of potential themes for the website. I wanted something different than my last project, so I decided to create a tourism website for a beutiful and romantic town called Villa de Leyva.2. I searched inspiration in the web both for website layouts and pictures of my theme to use in the project.3. I decided I wanted pictures to be protagonist of the website, so I sketched three different ideas of layout based on that premise.4. I opened the 12-column grid template in photoshop and recreated the sketch I chose, first with shapes to create the wireframe, and then I added the real pictures, logo, and typefaces.5. I chose a contrasting color scheme and typefaces.6. I aligned everything with something else and worked on the small details.


DATE 22 June 2016


PROGRAM(S)/TOOLS Adobe Photoshop


Prezi PresentationDESCRIPTIONPrezi presentation to persuade a client that Prezi is a viable presentation software to use for an upcoming campaign.

OBJECTIVESLearn to make clean and attractive Prezi presentations that communicate effectively a message.

PROCESS 1. Chose the topic I wanted to expose. I thought of something interesting to me, and also something I had a previous knowledge and confidence to talk about. I chose dance techniques, and I specifically chose the techniques I’ve practiced before. This covers the Message part of Formulate Phase.2. I sketched my best idea. I though of two background options; a theater stage, or a simple spotlight. I felt more comfortable with images of spotlight that I found. 3. I searched all the pictures I needed and tried to find high quiality images. I also searched for some short videos to complement each technique4. I chose a color scheme and contraSting typography for titles and copy.5. I opened Prezi and started to place all the elements in the presentation. I added the planned movement.6. I finished all the details and saved my presentation.


DATE12 May 2016


PROGRAM(S)/TOOLS PreziAdobe Photoshop


Business IdentityDESCRIPTIONCreate business identity by creating a logo for a company/individual, and use it to design consistent layouts and branding for the business.

OBJECTIVESLearn to create simple and attractive logo using Illustrator pen tool, and being able to incorporate it in different design layouts with consistency.

PROCESS 1. I sketched many different ideas for the logo based on research about the company (a museum about Colombia). I tried to reflect important cultural and historical elements in the logo ideas. 2. I used the pen tool and other Illustrator tools to digitize three of my ideas. 3. I gathered feedback from class peers and non-designer friends 4. I sketched some ideas for the letterhead and the business card based on the logo choice.5. I placed the logo into InDesign documents with the indicated size for each one, and added other design elements like lines and rectangles to organize the letterhead and business card layouts.6. I refined details based on the principles of contrast, repetition of shapes and color, and really careful (even mathematical) alignment.7.I savedand exported the work with the correct jpeg format and resolution.


DATE02 June 2016


PROGRAM(S)/TOOLS Adobe IllustratorAdobe Indesign


CodingDESCRIPTIONA web page with a logo designed by my and the description of the design process.

OBJECTIVESLearn to use basic HTML and CSS to create webpages to showcase design work.

PROCESS1. I resized the logo I had created for a previous project.2. I sketched a webpage layout. I strive not to skip this step because it helps me to clarify my ideas and saves me a lot of time in the layout process.3. I created an HTML file and filled it with the main content before starting to style. I described the design process in three main phases: How, Why, Who. I used the basic and required HTML tags to organize the text content.4. I styled my webpage using a CSS file, and linked the external stylesheet to the HTML file.5. I cretaed a black background and a main white box (<div>) for the content. I created a triple border using also <div> tag in HTML, and adjusted size and color using CSS.6. I exported the typography I wanted that matched my logo and used it for headings and paragraphs.7. I made sure to align everything with something else.


DATE15 June 2016


PROGRAM(S)/TOOLS Adobe IllustratorHTMLCSS