Portfolio Comments in General

Here are some general comments on the portfolios:

• On the clock, the original color should be one of the buttons. Otherwise, after I change the color, I can't get back to the original color.
• The current events article should not be called current events or research but should have some piece of the actual content on the home page icon, such as Bullying, Mental Health, Pollution, Depression, Fake News, etc.
• Every page should have a body font specified. 
• Files should be in folders together with the other files they need. Examples:
• College in same folder with background
• icons.html in same folder with the icons
• Current events home page in the same folder with the images
• Navigation icons should be in a folder.
• Make sure all your top level page captions are spelled correctly.
• Every page should have a copyright notice and they should be the same size as much as possible. (Use portfolio.css to set a standard.) They don't have to be the same color or font.
• Don't include any ZIP, PDF, or AI files in your portfolio. I just have to remove them, which adds more work for me, then you pay me back out of your grade.
• No capital letters or spaces in any file names. Change the names of your screen shots.
• The correct spelling is:
• SVG (all caps)
• JavaScript
• Adobe Illustrator (proper names, capitalized)
• Some basketball projects don't follow the mouse properly.

Portfolio Grading

I still have not graded the academic portion of your portfolio because I have not figure out how to do it efficiently. I need to check the grammar on every page, every case study, and the college plans.

For the technical part of your portfolio grade, I calculated like this:

1. The first number at the top of the page is the number of severe violations on the front of the page (pink marker).
2. The 2nd number is the total number of violation on the front of the page (NO).
3. The 3rd number is the number of problems I listed on the back of the page.
4. The number in the NO block is SEVERE * 4 + FRONT * 2 + BACK
   • (That is, the problems on the back of the page have half the weight and severe problems have double the weight)
5. Then I ranked the scores in order and assigned a letter grade to each one.

# Problems	Score	Grade
0	100	A
1	99	A
2	98	A
3	96	A
4	94	A
5	92	A
6	91	A
7	90	A
9	87	B
10	85	B
14	83	B
16	82	B
22	77	C (already improved)
23	76	C
26	73	C (already improved)
29	69	D (already improved)
32	65	D (already improved)
49	58	F
54	55	F
62	53	F (already improved)

Certification Pre Test

http://precisionexams.com/california/

1. Student Login
2. Register
3. School District = Metro Education School District
4. Student ID = 6-digit ID that you can find on Infinite Campus
5. Email and phone number are optional. I suggest you fill in the email anyway.
6. It says the address is optional but it is required.

I will give you the test ID when it is time to start.

Schedule for Week 14

Monday: Work on portfolios

Tuesday: 

• Final Portfolio due at the end of the period
• Printed poster due

Wednesday: No class AM

Thursday: Certification pre-test (don't worry about it)

Friday: New JavaScript projects

• Responsive Design popups
• Sorting/Encryption
• 4 Kids
• Snake game 

Portfolio Requirements

Home Page

• All icons on the home page link properly to internal portfolio pages.
• All internal links should be HTML files: no SVG file, AI files, PNG files, or other file types.
• There should be no AI, PDF or ZIP files anywhere in the project you turn in. Remove them to another sources folder that you won't turn in.
• No placeholder logos in the final project.
• All thumbnail logos must be square (same height and width). No exceptions. 
• The page should have a DIV with a limited width that keeps the thumbnails from drifting around.
• There should be no underlines on or between links: put text-decoration: none on all offending <a> tags. 

Case Studies

• Every page must have a case study section with formatting supplied within the portfolio.css file.
• Exceptions: home page, current events page, and college plans do not need case studies.
• 
  

Navigation

• Every page must have navigation arrows that are properly styled using the portfolio.css file. 
• All pages must have navigation that works.
• Navigation must be due to code in the navigation.js file

Final Project

• All icons on the home page must be your original artwork, whether SVG, Adobe Illustrator, or screen shots of your project.
• Every page should have a font specified for the body (or for each individual element on the body). Don't let the browser choose the default serif font.
• All case studies must be complete.
• All navigation must work without any errors. 
• Every page must have a copyright notice in a footer.
• All pages should have a nice presentation (centering, fonts, colors, etc.)
• Pages that use fancy fonts (fortune, zodiac, tic tac toe) should use simpler readable fonts for the case studies. 
• All pages must work properly (basketball, tic tac toe, resistors, etc.)
• The portfolio should have a unified appearance enforced by the portfolio.css file.
• If I made suggestions on your checkpoints, thing seriously about following them.

Comments on portfolios

A few random comments.

• The Fortunes page will need an adjustment to the numbers that center it vertically. Otherwise the page will sink toward the bottom.
• The College Plans web page should have a little margin at the top so the "paper" doesn't hit the top of the window.
• On the home page, the icon for the current events web page should have a hint at the actual topic. Even if you can't fit the whole title, use the topic, such as Gun Violence, Bullying, Pollution, Mental Health, or whatever the topic is. 

Portfolio and Case Studies Thoughts

Here are some random thoughts about portfolios and case studies. 

Melanie Kaye of Melanie Ink

A portfolio shouldn’t have more than a dozen pieces. The interviewer is busy. They don’t have time to look at a lot of mediocre stuff.

• Variety = good
• Things you love = great
• Things you don’t care for = don’t do it

Ability to solve communication problems including identifying the problem. Research. Be more curious.

Analysis – did it work? Why or why not? Solution generating. Prototyping. Can you comp up a little book? Can you make a sketch? Prototyping, user evaluation, and outcome evaluating.


Jeff Tyler of VMWare and Monkey Chicken Design

Content: show a breadth of work. Show a range. Show that you can do anything.

Prioritize the work. Your actual work for a client should not say who you are – you should be a chameleon.

Why? The customer has their own brand and style, and you will be expected to adhere to it. So your breadth of stuff must say that you are flexible and can convey the message while adhering to their own guidelines.

Case study = the story for that project.

You must be able to answer questions about why you did it that way. So become adept at bullshit. Answer the questions with all the buzzwords like spacing and hierarchy.

Don’t just throw stuff in because your portfolio is light. Everything in your portfolio must be fantastic. If the portfolio is light, make more fantastic pieces instead of padding it with substandard pieces.

If you don’t feel it’s your best work, don’t put it in your portfolio at all. Don’t dilute your work. Skew the portfolio toward what they are looking for. Put what they are looking for in the front. 3–5 great solid pieces is good enough for a start. Anything that’s not your best work will bring your best work down.


Fabian Espinosa of Duarte Design

When they see your design, they want to know your though process.

• You must be able to explain why you chose the color red.
• Why did you use illustration instead of photography?
• Why did you choose a condensed font instead of a wide font?
• Why did you use a texture instead of clean?
• They want to know that this work is your own. If you were part of a team, let them know. Make sure they know your role in a design project.

Obsess about the details. The difference between designers is that the senior person sees the details that the junior person does not see. See the smallest details. Maybe the colors are too saturated. Maybe they don’t fit the tone or message the client is trying to convey.

In most cases, you should not have a wide range or work in your portfolio. Instead, you should have a portfolio that is targeted toward the company you are interviewing for. So sometimes you need to come up with your own personal projects instead of the projects you’ve worked on for other companies previously, because those past projects may not be what the new company is working for.

It’s not about your technical ability. It’s about your concepts. The client doesn’t care how long it takes you to create your design. They want to know you can figure out a way to communicate their message.


The Importance of Case Studies in a Design Portfolio

https://webdesignledger.com/case-studies-for-web-portfolios/

When styling a case study it’s a good idea to frame it from an educational perspective. Most portfolio entries include some photos with extra details about the project. This is fine and most definitely encouraged – but case studies are meant to explain the stages and hurdles of a project.

Aside from actual mockups or completed designs you might also include some preliminary photos. Basic prototypes, sketches, or even rejected design ideas. All of these things demonstrate knowledge to prospective clients or job recruiters.

Design interesting case studies to help others understand your creative process. This is not an easy task at first because you probably won’t have much experience describing each project in detail. But with practice it gets a lot easier and really fun.

Demonstrate your process in a true-to-life manner. Take photographs of sketches on your desk or scan your sketchbook for a digital shot. Take apart your designs and create little diagrams with tooltips going into detail about each part.

An Expert's Guide to Creating Graphic Design Case Studies

https://www.shutterstock.com/blog/how-to-graphic-design-case-study

• Targeting: Focus on a past client that represents your ideal future client.
• Perspective: Write in the client’s perspective so potential clients can easily relate.
• Narrative: Don’t be dry – tell a story about the client’s needs and your design process.
• Data: Show the success of your work through cold hard facts and numbers.

Take your potential client on a journey from start to finish. Begin with who the original client was, what they do, and why they contacted you. Take the reader through your process: how you identified ways to help, how you met with the client, and what changes you implemented. Then reveal what the work looked like when it was done, how the client felt, and the end results.

Case Studies Assignments

You will need to write 12 case studies. There will be two assignments with six case studies in each assignment. The assignments will be the same:

• Write the assignments in Google Docs. 
• Share the doc with me at mbrautigam@metroed.net
• There will be six case studies in each document.
• Each case study consists of:
• Objective = what is the assignment?
• Problem = what customer problem are we trying to solve?
• Solution = how did you/we solve the problem?
• Do not print out your case studies.
• Make sure you put your name on your assignment!

The two assignments are:

• Case Studies #1-6 due Wednesday, Nov. 6
• Case Studies #7-12 due Thursday, Nov. 7

Case Studies

A case study is a document that explains what you did, how, why, what you learned, and how you overcame any problems. It is your opportunity to sell yourself as someone who can solve problems.

The following statements are inadequate case studies, because they tell a potential employer that you are a problem they will need to solve, instead of someone who can help them solve their problems.

• I had to learn how to use Adobe Illustrator.
• I made a lot of mistakes in the code and Mr. Brautigam helped me fix them.
• This project was really really hard.
• The problem is I typed in the wrong code. It took a while to find it.
• The problem is I couldn't figure it out. I asked people around me for help.

See the following examples of case studies:

• Apple Remote
• iMac
• Wedding Invitation
• Wireframes and Mockups
• Technology is Magic

In general, the problem should be a domain problem and not a programming problem. That is, not figuring out what code you typed wrong, but figuring out what kind of code to type in the first place ... the strategy. Each project presented its own set of problems, and each student should have roughly the same problems and the same solutions, since we did most of them together. If your problem statement is related to you and not to the design ... it is a problem that only you had, and others did not have ... then it is probably not a good statement of the problem and solution.

Speedometer Gauge. The main problem is converting from speed numbers to angles. The solution is to map the set of possible speeds to the set of possible angles, which is just algebra.

Basketball. One problem is figuring out exactly what to do to slow down or speed up the ball. The solution is to always multiply or divide, so the speed never actually goes to zero or a negative number.

Chocolate molecule. The main problem is getting the pentagon and the hexagon to line up. The solution is to just use trial and error until it looks correct.

Grades

I will post your latest grades today (Monday) or tomorrow (Tuesday). If there is some project for which I did not give you a grade, it is your responsibility to make sure I get it.

Printed posters will not go in your grade. But Adobe posters and logos will go in your grade. Make sure you turn them in properly.

If you did not get credit for some coding or Illustrator project and you think you turned it in, just turn it in again.

If I marked your project "missing," that means I didn't get anything at all. If I gave you a zero, it means you turned something in but did not follow the instructions.

Especially make sure you turn in all the academic projects such as logo essays, app ideas, thumbnail sketches (36), and rough drafts (4).