In this chapter, we will talk about collecting things for your portfolio, matching your portfolio to your purpose and audience, the parts of a portfolio, and design principles for creating things online. First things first, let’s get started with collecting content for your portfolio.

Organize Your Contents

I recently helped someone build his first portfolio. He said it was a lot easier because he had clearly marked folders of materials on his computer. He had a folder for his study abroad photos, a folder for his important homework assignments, and a folder for his resume. When it came time to assemble his portfolio, he not only had great items to use in his portfolio, but he was also able to look through the folder at his photos and homework to get ideas for things to include.

Start by creating a folder.  Add things that you think should be included in your portfolio. Include anything bragworthy.  Add interesting photos of you doing interesting things.  Add more items than you think you will use–it is better to have too much rather than not enough.

What types of things should you put in your folder? Anything that demonstrates your skills and showcases your personality. This might be photos of you in action, photos of projects, papers you have written, or feedback teachers have written to you. These items are called artifacts and there is an entire chapter dedicated to showing you how to collect, select, reflect, and connect the things you have in your folder: Showcasing Your Artifacts. 

Clearly label items. Labeling things as you go can be helpful when it comes time to assemble.  Instead of using a generic label such as “essay,” label it “Comparative essay from Dr. Smith’s Composition 2 class.” If you have a lot of things in your folder, you might even break it into subfolders: volunteer work, coursework, and personal projects.

Pick Your Platform

The platform is the place online where you will put your portfolio.  Many colleges will have a centralized platform with preloaded templates for students to use. If you do not have a school platform, you can build a site for free using Wix, Weebly, Google Sites, or many other free programs you might find online.

When picking your platform, you should ask these questions:

1. How easy is this platform to use and do I have the skill to use it?
2. Is technical support available for this platform?
3. Do I own my site and can I take it with me once I graduate?
4. Will there be advertisements put on my site?

Define your Purpose and Audience

Throughout the portfolio-building process, you should keep asking “What is the purpose of my portfolio” and “Who will be looking at my portfolio?” Once you have the answer to those two questions, you will have a better idea of what to include and how to structure it. Your audience and purpose will cause you to include some things and exclude others.

Pick Your Structure

Now that you have your platform and a folder of items to include and you have a clear purpose, it is time to decide what to include in your portfolio and how you want to structure your items.

There are many variations on portfolios, but what follows is a list of core items found in many professional portfolios.

Landing Page/Home Page

The landing page is the first page people see. For some, the About Me Page is their landing page and for others, they make a separate welcome page.

About Me Page

The About Me Page is targeted information about you and your learning journey. Overall, this is about you as a student or about you as a professional.

Resume / Curriculum Vitae

Include an updated resume or vitae. This is a good place to add a link to your LinkedIn page.

Artifacts

Artifacts are the objects that you display in your portfolio that give evidence to back the story you are telling. Be sure to label them clearly and provide a detailed reflection for each.

Reflections

Your portfolio should include numerous narratives that tell your story. Use reflective writing to tell the story of your strengths and the meaning behind your artifacts.

Navigation

It is important for you to have an easy way to navigate these pages and access all the content. Navigation is crucial. Ask yourself, “Can an average person navigate my site with ease?” In a survey of employers, one wrote, “I really appreciated how I had options that I did not have to look at the whole thing to find what I wanted. I liked having options to see what I wanted to see—to navigate quickly.”

Contact Information

Let your reader know how to contact you. It is best to create a contact information page that will send you an email since you probably don’t want your email address, phone number, and address on the internet.

Course Objectives

It is increasingly popular for programs to ask you to make a portfolio as part of a capstone for your college program or as a final assignment as part of a central course. These types of portfolios are used so you can demonstrate how you have mastered each of the course/program objectives. If this is the case, you should follow the assignment closely. If given the freedom,  you should also design it in a way that it will be easy for you to convert it to a career portfolio.

Career Competencies

Many college portfolios will include career competencies. What this means is that you will organize the content in a way that you have learned about career competencies. What that means is that you will use the career competencies as major headings.

Design the Structure: You are the Architect!

Portfolios are as personal as the people who make them, that is what makes them so appealing. In the same way, an architect has a master plan for how things will fit together, you are the  information architect who decides what items you want to showcase and how those items should be arranged.

Your portfolio should be organized in a logical fashion that is suited to the portfolio’s application but is reflective of your personality. It can be helpful to sketch a diagram of how your portfolio will all fit together. When working with web design, there are certain key principles to follow: Design it as art, use white space, use fonts and letters that are accessible, use design principles, and make sure it can be viewed on different devices.

Design it as “Art”

Many years ago, I visited a career consultant who looked at my resume. She picked it up and walked across the room. When she got to the farthest wall in the room, she stood there and held it to the wall. “Is it art?” she asked. “Look at the balance between words and whitespace. Now, look at the headings and the format. Don’t look at the words, just look at the whole thing as a piece of art. How does it make you feel?”

I had mixed feelings about her asking me these very awkward questions. First, it wasn’t what I was expecting in this consultation, but second, it made me feel bad because my resume failed the “art test.” It was so packed with words that it looked like an overwhelming mess. That lesson forever changed the way I design text-based items.

All professional items –resumes, portfolios, slides, flyers, websites–should all pass the “art test.” You should stand back from your portfolio and look at it, not as words, but as art. Before anyone reads your portfolio, they will see the visual that is your portfolio, and they will form an impression of you based on that initial viewing. One key factor in passing the art test is your use of white or negative space.

Make Use of White Space

What is white space? It is the negative or empty space around your design or your words which is why it is sometimes called negative space. Fun fact, white space doesn’t have to be white, it can be any color. It counts as white space because it creates a blank spot, so things don’t look cluttered. White space helps to focus attention on key aspects of the page and it reduces overload. In one study, having white space between the lines of a paragraph increased comprehension of the materials by up to 20%. 

“White space in design composition is same as use of silence in a musical composition. Without proportionate use of silence, music is unstructured; some may call it noise. Similarly, without white space, design is unstructured and difficult to consume.” Mark den Hartog

Apply Best Practices for Font Types and Letter Sizes

Your portfolio might be viewed on a phone, a tablet, or a computer, so be sure it is readable on all devices. One way to do that is to carefully consider when picking fonts and sizes. For example, some cursive fonts do not work on some devices and other fonts may change to a smaller font version when viewed on some devices.

Using a plain san-serif font of 14 to 16 points is usually your best bet. Look at the S’s below, can you tell the difference? One set has frills or tails called serifs and one does not. Because plain letters are the easiest to read digitally, 85% of web-based fonts are plain, sans-serif font.

Top 5 fonts plain (san-serif) fonts for web use:

• Arial
• Helvetica
• Helvetica Neue
• Roboto
• Tahoma

Follow Key Design Principles

 Since your portfolio is essentially a webpage with a purpose, you should follow the best practices and design principles for websites. C.R.A.P. is an acronym created by Robin Williams (not the comedian) and used to describe four key design principles that all websites should follow: contrast, repetition, alignment, and proximity.

Contrast

Principle: Items should either be the same or very different. In general, high contrast provides more emphasis while low contrast provides less emphasis.

Example: Contrast large fonts with small fonts; thick lines with thin lines; or dark colors with light colors.

Repetition

Principle: Repetition creates consistency and helps the reader follow along. Repeat some aspect of design throughout the entire page or portfolio.

Example: Repeat design elements such as fonts, colors, or page layouts. Each page of your portfolio should use the same basic colors and the same basic style. 

Alignment

Principle: Aligned items give the page coherence. Make sure nothing is placed randomly and there is a clear visual connection between elements.

Example: Don’t make it look sloppy with things randomly scattered all over the page. Make sure things line up and look balanced. Create hard lines by aligning text and visual elements in a straight line. Connect these items through left, right, centered, or staggered alignment.

Proximity

Principle: Place related items close to each other and space unrelated items far apart. Proximity ensures related items are seen as one cohesive group rather than a bunch of unrelated parts.

Example: Things that go together should be placed close to each other. Place an image and its corresponding text next to each other.

Design it to Be Viewed on Multiple Devices

Realizing that your portfolio will be viewed on many different platforms, take the time to check and see how it looks on your phone and tablet. Many programs have a special feature to let you preview your site on different devices.

Closing

In this chapter, we covered some of the most important things to get you started as you build your portfolio: readability and design.  Later, we will talk about ethics and universal design and I will provide you with a checklist for your portfolio. When building your portfolio, you will find that it is not difficult if you take it one step at a time.

References

Brown, I. (2021).  University Writing. auburn.edu/writing

Cicchini, A. and Miron, L. (2022). Accessibility and Inclusivity Guide from University Writing. auburn.edu/writing. Copyright:Attribution-NonCommercial-ShareAlike CC License

Flores, A., & James, C. (2012). Morality and ethics behind the screen: Young people’s perspectives on digital life. New Media & Society, 15(6), 834-852. doi:10.1177/1461444812462842

Hegde, P. (2017). Importance of white space in design. https://blog.prototypr.io/importance-of-white-space-in-design-5a40c0e65bfd

Holcombe, J. (2022). 15 Web Design Principles for a Customer-Friendly Website. https://kinsta.com/blog/web-design-principles/

Peachpit Press.  University Writing Copyright: Attribution NonCommercial-ShareAlike CC License  https://auburn.app.box.com/s/kr7qycnu86o3doge21mvi1w73sw4ctaf

National Universal Authority. What is Universal Design? https://universaldesign.ie/what-is-universal-design/

Nuessler, S. (2012). EDUC8011—Action research project. Unpublished manuscript, Teaching and Learning Centre, University of Canberra, Canberra, Australia.`

Reynolds, N. & Davis, E. (2014). Portfolio Keeping: A Guide for Students.  Bedford St. Martin.

Stuart, H & Wade, Pl. (2019). Adapted from Megan Haskins & Ryan Laysaght Adapted from Williams, R. (2014). The non-designers design book: Design and typographic principles for the visual novice (4th ed.). Peachpit Press. | University Writing | (334) 844-7475 | auburn.edu/writing | universitywriting@auburn.edu | Copyright: Attribution-NonCommercial-ShareAlike CC License  https://auburn.app.box.com/s/kr7qycnu86o3doge21mvi1w73sw4ctaf

Vaughan, M.  (2021). There’s No Alternative to Good ALT Text. Dubbat.  https://dubbot.com/dubblog/2021/theres-no-alternative-to-good-alt-text.html

Williams, R. (2014). The non-designers design book: Design and typographic principles for the visual novice (4th ed.).

Wilson, C.B., Downer, T., Slade, C. Fisher, M.B., Kirby, M.M. Nuessler, S. (2018).  Digital ethics and the ups of ePortfolio: A scoping review of the literature. International Journal of ePortfolio 8(2). https://files.eric.ed.gov/fulltext/EJ1196633.pdf