14A Portfolio

 

DESCRIPTION
Design a portfolio that showcases all projects from my Visual Media course.

MESSAGE
I want to showcase my work in a professional way.

AUDIENCE
Potential client and employers.

PROCESS
I started by choosing a color scheme that is easy to mesh my images with. I then started choosing which projects I would include and forming the master pages and Table of Contents. I posted by rough draft on Facebook for review and waited to see what my classmates and Brother Stucki had to say about my design. Brother Stucki suggested I work on the alignment of the font and make the text box a little wider so there can be more room for overflow/word wrapping. I went ahead and worked on the alignment, the kerning and made the text box wider. Jacob Casal suggested thinning out the description text for each project but by making the text box significantly wider, I think it looks better than it did now. Ryan, along with Brother Stucki suggested I make the gears in the background look a bit more like a watermark by increasing the transparency, which I did and he also suggested I work on the alignment/kerning which I did as well. I think it turned out pretty well.

TOP THING LEARNED
You should always sketch out ideas before you get on the computer.

COLOR SCHEME & COLOR NAMES
Complementary // Blue, White and Grey

TITLE FONT NAME & CATEGORY
Akko Rounded Std // Sans Serif

COPY FONT NAME & CATEGORY
Bembo Book MT Pro // Serif

THUMBNAILS OF ANY ORIGINAL, UNEDITED IMAGE(S) USED IN THE PROJECT
cogwheel-145804

SOURCE OF EACH IMAGE (website name and hyperlink)
Pixabay

SPREADS

14achriszitting

14achriszitting2 14achriszitting3 14achriszitting4 14achriszitting5 14achriszitting6 14achriszitting7 14achriszitting8 14achriszitting9 14achriszitting10

14achriszitting11

12A Brochure Project

12a-final

12a-final2

DESCRIPTION
Design a brochure for a company.

PROCESS (Programs, Tools, Skills, FOCUS principles)
1. I first created a new logo in Photoshop for my company.
2. Then I went into InDesign and started to design my brochure. I was able to get the stock images for free online. I had a bit of a hard time determining where I needed to put the different images and how I should crop them and how large they should be.
3. I was able to get some feedback and get some better ideas on what to do with the images, how to align the text, etc.
4. I made the changes to my brochure and started the dreaded printing/perfecting process.
5. After 8 attempts, I am now comfortable with how it turned out.

CRITIQUE PROCESS
I put up my first draft on Facebook and received a comment from Ralph Borcherds about some spacing issues, which I promptly fixed. Brother Stucki gave me some feedback in the critique video that suggested I take a look at kerning and alignment of my body text, so I went ahead and changed that to be more in alignment with the rest of the design. I also made some miscellaneous adjustments to align pictures better with text.

MESSAGE
To provide entry-level designers with some steps to create a website layout in Photoshop.

AUDIENCE
People who are interested in building a website.

TOP THING LEARNED
Print twice…at least. More likely about 10 times.

COLOR SCHEME & COLOR NAMES
Complementary – Green and blue

TITLE FONT NAME & CATEGORY
Iowan Old Style // Serif

COPY FONT NAME & CATEGORY
Helvetica Neue Thin // Sans Serif

THUMBNAILS OF ANY ORIGINAL, UNEDITED IMAGE(S) USED IN THE PROJECT

ipad-605420   office-605503   blur-1867745_1920   office-820390_1920   hyslogo-blue-square-new-new

SOURCE OF EACH IMAGE (website name and hyperlink)

First four images are from Pixabay

The last one is my own design

10A Webpage Mockup

design

DESCRIPTION
Design a website homepage using a grid.

PROCESS (Programs, Tools, Skills, FOCUS principles)

sketch      wireframe

  1. I started with a Sketch and planned out what I wanted to have in the design.
  2. I then did a wireframe in Photoshop to digitally lay out how things were going to be set.
  3. I then created my digital design in Photoshop. The grids really helped align everything
  4. I then posted to the Facebook group to show my initial design and got some good feedback by Ralph, Seth, and Audrey. Brother Stucki also shared some feedback.
  5. I fixed what she asked and posted my final design.

CRITIQUE PROCESS
Ralph suggested having one pricing box instead of two, making the “why choose us” box not all caps, and uncentering the footer. Seth liked the design and didn’t have any suggestions to improve on the design. Brother Stucki liked the design and suggested adding more contrast to the title vs.the body text. Audrey suggested for her personal preference that the nav links be left-aligned but I tried it and it just looked like it was off so I decided to keep it centered as it already was.

Critiques: Ralph Borcherds, Seth Bennett, Brother Stucki, and Audrey Finlayson Spjut

MESSAGE
Come get some great and affordable hosting!

AUDIENCE
Anyone interested in creating a personal website or a website for their business.

TOP THING LEARNED
Wireframes and sketches really help to map out what you will want in your final design.

COLOR SCHEME & COLOR NAMES
Split Complementary // Blue, Green, Grey

TITLE FONT NAME & CATEGORY
Lato Black // Sans Serif

COPY FONT NAME & CATEGORY
Optima Regular // Sans Serif

THUMBNAILS OF ANY ORIGINAL, UNEDITED IMAGE(S) USED IN THE PROJECT
hyslogo-blue-square-new-300x300      pixabay-comenlaptop-work-coffee-technology-1209008-320x320

SOURCE OF EACH IMAGE (website name and hyperlink)
Logo is my own.
Laptop image is from: Pixabay

9A HTML and CSS Coding

screenshot
DESCRIPTION
Code a custom webpage with HTML and CSS.

PROCESS (Programs, Tools, Skills, FOCUS principles)

  1.  I used the logo I had created from the previous project.
  2. I opened up the HTML template and added in my logo and made some adjustments to make sure things looked better formatted.
  3. I opened up the CSS template and changed some colors, margins, fonts, etc.
  4. I added some content to the HTML page to tell about my process.
  5. I determined I was happy with the way it turned out.

MESSAGE
Get a website.

AUDIENCE
Those interested in creating a website, whether for themselves, for their business, etc.

TOP THING LEARNED
Validation errors can often stem from one problem.

COLOR SCHEME & COLOR NAMES
Complementary // Green and Blue

TITLE FONT NAME & CATEGORY
Avantgarde // Sans Serif

COPY FONT NAME & CATEGORY
Avantgarde // Sans Serif

THUMBNAILS OF ANY ORIGINAL, UNEDITED IMAGE(S) USED IN THE PROJECT
hyslogo-blue-square-new-150x150

SOURCE OF EACH IMAGE (website name and hyperlink)
The graphics are my own.

8A Infographic

smallbusinessinfographic
DESCRIPTION
Create an infographic that organizes data in a visually pleasing way.

PROCESS (Programs, Tools, Skills, FOCUS principles)
1. I thought about what I wanted to do and decided on a infographic about websites and small businesses.
2. I found some info on how few small businesses have a website.
3. I started sketching out the infographic on paper.
EPSON MFP image
EPSON MFP image
4. I opened up illustrator and started drawing things out.
5. It took a bit of fiddling to get everything in the right spot but I am happy with the result.

CRITIQUE PROCESS
Seth suggested I cut down on text, so I went back to and tried my best at thinning it out. Brother Stucki suggested I turn one of the five stick figures a different color in order to represent the 1 in 5 statistic, he also suggested making a bar graph out of the excuses – I found a creative way to do just that and I’m happy with it. Sarah liked the watermark, so I updated it with the arrow I made last week and moved it down toward the center of the page. Tatyana suggested changing the background color or text color to make it easier to read, so I changed the text color to make it lighter.

Facebook Critiques: Seth Bennett, Sarah Pence Sharp, Tatyana Chetina
Instructor Critique: Brother Stucki

MESSAGE
To let people know that small businesses need websites to be more profitable.

AUDIENCE
Anyone who owns a small business or knows someone who does.

TOP THING LEARNED
Alignment is important, especially with so many moving parts.

COLOR SCHEME & COLOR NAMES
Split Complementary // Teal, Blue, White and Gray.

TITLE FONT NAME & CATEGORY
Egyptian Slate Std // Serif

COPY FONT NAME & CATEGORY
Klint Std // Sans Serif

THUMBNAILS OF ANY ORIGINAL, UNEDITED IMAGE(S) USED IN THE PROJECT

just-the-arrow

SOURCE OF EACH IMAGE (website name and hyperlink)
I created them all myself.

Source of Data INC. – http://www.inc.com/tess-townsend/small-business-survey-godaddy-websites.html

7A Business Identity

letterhead

business_cards

 

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

PROCESS (Programs, Tools, Skills, FOCUS principles)
1. I had a couple different ideas that I sketched out, all just including text.
2. I then went to Photoshop and created the logos.
hyslogo-blue-favico-150x150 hyslogo-blue-square-150x150 hyslogo-blue-square-new-150x150
3. I decided on the last one and made some adjustments to it so that it didn’t have such close edges.
4. I then went ahead and created the business cards, which I was pretty happy with but made some changes based on critique from Brother Stucki.
5. I went on to create the letterhead which I was mostly happy with but received some good feedback from Marci, Audrey, and Brother Stucki and followed through with it.
6. I made adjustments accordingly based on the critique I received and proceeded to work on a better watermark and ultimately came out with one I liked.

CRITIQUE PROCESS
Marci and Audrey liked the overall design but suggested I do something with the blank blue square that was near the top right – suggestion was to add my logo. I combined that with the advice I received from Brother Stucki about keeping designs consistent and making sure there is repetition in the design. I added my logo but got rid of some inconsistent elements. My wife then showed me which of the letterhead designs she thought was best, but I ultimately did not end up going with that one.

Facebook Critiques: Marci Grimaud and Audrey Finlayson Spjut
One-on-One Critique: My Wife
Instructor Critique: Brother Stucki

MESSAGE
A great and affordable place to start a website (this is my real business).

AUDIENCE
Anyone in need of hosting a website, whether it be a person without a website or someone who has one hosted elsewhere who would like the better features or greater affordability.

TOP THING LEARNED
Cannot just use type for a logo.

COLOR SCHEME & COLOR NAMES
Complementary // Blue and Green

TITLE FONT NAME & CATEGORY
Avenir Next LT Pro Bold // Modern

COPY FONT NAME & CATEGORY
Avenir Next LT Pro Italic // Modern

THUMBNAILS OF ANY ORIGINAL, UNEDITED IMAGE(S) USED IN THE PROJECT

hyslogo-blue-square-new-500x500   1464856655_facebook_circle

SOURCE OF EACH IMAGE (website name and hyperlink)
Facebook icon: https://www.iconfinder.com/iconsets/social-media-icons-the-circle-set
Host Your Space logo is my own creation.

6A Montage

chriszitting-6amontage

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

PROCESS (Programs, Tools, Skills, FOCUS principles)
1. I started out by looking for a happy marriage picture. I found a few that I liked and tried working with them but they weren’t big enough. Instead I found the one that is in my montage and I sized it down to work within the resolution specifications.

2. I started looking for a good quote in a talk that I read from President Uchtdorf recently. I found it and started incorporating it into the image while trying to find a good background for the quote to blend with the happy marriage photo.

3. I found a good image to blend with the happy marriage and lassoed it into the correct shape/size and moved it over on top of my main image. I then played around with the fonts to make some words appear bigger than others.

4. I then submitted it to the Facebook group and received student feedback and decided I needed to change the way I had the fonts sized and change the fonts as well. I was also lead to change the background image for the quote so I found another one that works better with it.

5. After playing with the fonts, font background image and drop shadow effect of the quote, I posted it again to Facebook and received some feedback that the second more dramatic drop shadow was best, also that the text should be moved down a bit.

6. I followed the criticism and applied the suggested edits and now have my final product.

CRITIQUE PROCESS

Brother Stucki suggested working on the font, so I did and feel I have better font sizing and it all just flows better now. I only had one criticism on the font, from Erin but I believe I have made it look better now as I applied a drop shadow, which was also suggested by another individual. Tatyana suggested I move the text lower, so I did that and also had to move the Temple over a bit. Audrey suggested I add a period to the end of the quote, which I did.

Facebook Critiques: Tatyana Chetina, Erin Smith, Audrey Finlayson Spjut
Instructor Critique: Brother Stucki

MESSAGE
A message encouraging others to place a great importance on their marriage.

AUDIENCE
Those who are married or who plan to be.

TOP THING LEARNED
Blend well, don’t overdo it on the font effects.

COLOR SCHEME & COLOR NAMES
Complementary // Blue and Orange

TITLE FONT NAME & CATEGORY
Snellroundhand Bold Script // Decorative

COPY FONT NAME & CATEGORY
Optim Regular and Palatino Italic  // Sans Serif and Serif

THUMBNAILS OF ANY ORIGINAL, UNEDITED IMAGE(S) USED IN THE PROJECT

temple    marriage

Temple – https://upload.wikimedia.org/wikipedia/commons/7/7f/Salt_Lake_LDS_Temple.jpg
Happy couple – http://bloom.vn/wp-content/uploads/2015/11/Couple_3.jpg