byu-i comm130 portfolio

Download BYU-I Comm130 Portfolio

Post on 16-Apr-2017

250 views

Category:

Education

1 download

Embed Size (px)

TRANSCRIPT

  • DESIGN PORTFOLIOJOSEPH EBORALL

  • CONTENTSMONTAGE3BROCHURE4BUSINESS IDENTITY7CODING8WEB PAGE MOCKUP11MAGAZINE COVER12PREZI15PHOTODESIGN16INFOGRAPHIC19CONTACT21

  • BY JOSEPH EBORALL

    PG // 3

    MONTAGEDESCRIPTION

    DATE

    COURSE

    INSTRUCTOR

    PROGRAMS USED

    MESSAGE

    PROCESS

    Design a spiritual poster montage using a blend of images and type.

    18 October 2016

    Comm 130: Visual Media - Section 6

    Vanessa Godfrey

    Adobe Photoshop, Adobe Illustrator

    Nothing is truly secure when we build our lives solely upon the principles of materialism.

    The first step of my process was picking the quote I wanted to use as the basis of my image. C.S. Lewis is one of my favorite authors and has written several books on and in defense of Christianity. I found this little gem of a quote in his work, A Grief Observed, in which he talks about God testing his faith.I decided to run with this idea of a house of cards and did some image searches for inspiration. I came across one image by Juan Jimenez which would become the center of my design.I spent a lot of time modifying this image. Instead of keeping the card house centered, I moved it onto a third line and extended the boundaries using the fill and clone tools. I then spent some time painting over the existing cards so that I could place images onto them. To accomplish this I ended up using a combination of fill tools, airbrushes, Gaussian blur filters, masking, sharpening filters, and some lighting filters.I found a money icon set in a public domain database and used transform tools, blend modes, and masking to make the cards look realistic.The hand was created using lighting filters to colorize the image and mimic the light of the original image. To create the mist, I placed an image, colorized it, set the blend mode to screen, and then did a bit of masking with a low flow/opacity eraser.

  • BY JOSEPH EBORALL

    PG // 4

  • BY JOSEPH EBORALL

    PG // 5

    BROCHUREDESCRIPTION

    DATE

    COURSE

    INSTRUCTOR

    PROGRAMS USED

    MESSAGE

    PROCESS

    Design a brochure for a company.

    30 November 2016

    Comm 130: Visual Media - Section 6

    Vanessa Godfrey

    Adobe Indesign, Adobe Illustrator, Adobe Photoshop

    Broccoli is an often misunderstood vegetable.

    After a conversation with my sister sparked the fires of inspiration, I began the process of my design by creating a logo in Illustratorfor the fake movement toLegalize Broccoli.In IllustratorI took a vector outline of Washington state I found online and subtracted a custom shape of broccoli from it. It was also in this phase that I settled on an emerald shade of green as the primary color of my design.Next, I took an 8.5 x 11 piece of paper and folded it into a trifold brochure. I labeled the different faces of the folded paper and then unfolded the piece of paper as a template for how I should design my brochure in InDesign.The next part of the design process, and dare I say the longest,was to brainstorm jokes that I could put on my brochure. Many of the elements that ended up in my final draft are a result of these brainstorming sessions with friends and family.

  • BY JOSEPH EBORALL

    PG // 6

  • BY JOSEPH EBORALL

    PG // 7

    BUSINESS IDENTITYDESCRIPTION

    DATE

    COURSE

    INSTRUCTOR

    PROGRAMS USED

    MESSAGE

    PROCESS

    Create a logo for a company/service/organization and establish a visual identity across documents.

    27 October 2016

    Comm 130: Visual Media - Section 6

    Vanessa Godfrey

    Adobe InDesign, Adobe Illustrator, Adobe Photoshop

    Its Tea Time Somewhere.

    The first step in my design process was deciding which company I would create branding materials for. Since my father has a love for herbal tea and is from the English county of Essex, I decided that I would create the fictional Essex Tea Company.The coat of arms of Essex features three seaxes on a red background, and so from an early part in the development I knew I wanted to use those elements.I began creating the logo by sketching out some basic shapes associated with tea such as a water droplet, teabag, and teacup. With each shape I tried incorporating the color red and the three seaxes in some form. After several people reviewed my drawings, elements from different logos were compiled into one. From this feedback period came the idea that I could turn the business card itself into a teabag by making a vertically oriented business card and cutting off the top corners at angles.I later had the idea that by cutting off the bottom edge of the business card I would have not only a better-looking teabag but that by using a piece of string and two staples I could reattach the excess to make an actual teabag out of my design. I made a prototype as a proof of concept,and really came to like the concept.The letterhead was created using the same colors (red and gray) and fonts as my business cards, with minimalism in mind. The most important aspect of any letter is the letter itself, with the branding there to quietly suggest uniformity as a brand.

  • BY JOSEPH EBORALL

    PG // 8

  • BY JOSEPH EBORALL

    PG // 9

    CODINGDESCRIPTION

    DATE

    COURSE

    INSTRUCTOR

    PROGRAMS USED

    MESSAGE

    PROCESS

    Code a custom webpage with HTML and CSS.

    10 November 2016

    Comm 130: Visual Media - Section 6

    Vanessa Godfrey

    Adobe Photoshop, Adobe Illustrator, Brackets

    Simplicity can be elegant.

    I created a rough mockup in Photoshop giving me some design ideas.I created an SVG version of my logo so that no matter the size of the logo on the page there would be no pixelation.I identified different content boxes in my mockup design that I would need to make in HTMLI created my HTML file and linked the CSS stylesheet to itI began writing HTML and CSS to create a layout similar to my mockupI programmed some JavaScript functions to animate different elements. The amount you have scrolled down is used as a variable to change CSS transformation values. I added media queries in my CSS to create an adaptive layout. If you resize your window or are using a phone the elements adjust accordinglyI validated my HTML and CSS and made little adjustments.

  • BY JOSEPH EBORALL

    PG // 10

  • BY JOSEPH EBORALL

    PG // 11

    WEB PAGE MOCKUPDESCRIPTION

    DATE

    COURSE

    INSTRUCTOR

    PROGRAMS USED

    MESSAGE

    PROCESS

    Design a website homepage using a grid.

    6 October, 2016

    Comm 130: Visual Media - Section 6

    Vanessa Godfrey

    Adobe Photoshop, Adobe Illustrator

    Create a full bleed magazine cover.

    One of the most important aspects of modern web design is for your website to look good regardless of the device your visitor is using. To accommodate a mixture of screen sizes, fluid designs have become the standard, with many of the aspects of the website being controlled by percentages based on the width of the visitors device.For optimal readability, 960px was decided as the best width for the main body of content. I decided that I would build my main content within the constraints of the 960 grid and that I would use the margin: auto; CSS property to center the content on what I named content panes. These panes adapt to the width of the viewers browser.To begin the visualization process, I started drawing out a few concept layouts on paper.Next, I created a Shape Map in Photoshop using a 960px grid to help me place content.For those who are unfamiliar with my work, The Essex Tea company is a fictional tea brand that I have developed over the course of several projects. From those projects, I have defined some of the color swatches and fonts that are signature to the brand.The rest of my time was spent finding various images I liked and writing content to populate the page.

  • BY JOSEPH EBORALL

    PG // 12

  • BY JOSEPH EBORALL

    PG // 13

    MAGAZINE COVERDESCRIPTION

    DATE

    COURSE

    INSTRUCTOR

    PROGRAMS USED

    MESSAGE

    PROCESS

    Design a magazine cover that showcases a self-portrait.

    28 September 2016

    Comm 130: Visual Media - Section 6

    Vanessa Godfrey

    Adobe InDesign, Adobe Illustrator, Adobe Photoshop

    My wife and I share a love of music and things of elegance. I tried to convey this through the picture, the magazine I chose toparody, monochromatic color scheme, and minimalist approach.

    The first decision I made was in regards to what photograph I would choose for my cover, as I knew that it would be the focal point of the cover and set the tone for the magazine.As I searched through my computer for a photograph, I remembered that my cousin had taken some engagement pictures of my wife and I seated at a piano. I opened the image in Photoshop and made a few adjustments to the levels, reduced the color saturation, applied noise reduction, and used some airbrush techniques to improve the image.The magazine I decided to parody for my cover was Billboard as I enjoy their minimalist approach to magazine cover design.I was unable to find an existing vector of the Billboard logo, so I created one in Illustrator so that I could make it any color and scale it up with no pixelation.Once the logo was complete, I opened InDesign and placed the photograph and Billboard logo into the design. The rest of my time was spent brainstorming the titles for my articles and placing the text in InDesign.

  • BY JOSEPH EBORALL

    PG // 14

    meet the EBORALLS

    December 2016 | Comm 130

    An inside look at Americas favourite musical couple.

    UNFORGETTABLEIf only tha