We will start by looking over some of our audio storytelling videos (1 -- 2 - 3)
Next we will focus on some of the aesthetic aspects of our portfolios. To get started, we will think about the structure of the document:
- Projects and Genres
-
One way to organize the portfolio is by type of project. If you choose this method, be careful not to create a list-like feel that just collects a series of project. One way to guard agains this is to have concrete aspects of learning or culture that are discussed. Another strategy is to create sub-sections in the project sections that deliberately focus on learning themes or points you want to make.
- Themes
-
You might also organize things around the key points that you want to make. The class has focused on digital communication and new ways of composing. You will also be picking a few aspects of learning--collaboration, adaptability, etc. The challenge with this approach is many projects will fit in more than one category. You can make take up a project more than once with this structure, but watch out for repetition.
The next thing to consider is how to signal your structure and guide navigation of users. You can use the <hr> tag to draw a break across the screen. You can also use visual dividers like this:
And you can use headers and other text styles to help signal the sections of the document.
You may also find it helpful to learn some more manipulation tricks for images. Once you add an image to the portfolio, if you look over its source code, you can adjust the size, alignment, and the space around the image, etc. Add codes like these:
style="width:128px;height:128px;padding:15px"
to an image tag so something like this donut can be made smaller and have text woven around it. This text is now wrapping on the side of the donut. You don't want to get too fancy because different screens will shift things some, but you can work with the flow of the materials in the document. When you want to stop text wrapping you can add codes like this: <div style="clear: both;"></div>
We end up with this code for the image: <img alt="donut" data-align="left" data-entity-type="file" data-entity-uuid="76b5020a-e3dc-40ae-985f-a06513e5d1e4" src="/makelit/sites/default/files/inline-images/domut.jpg" style="width:128px;height:128px;padding:15px />
You will most likely want to break up your social media postings and work on getting the sizes right.
Use your eye
There are many ways to draw attention to the points you want to make. Most of the adjustments will be conceptual, thinking through the flow of the materials and how to guide readers through your main points.
Here are the codes that make the heading above:
<h3>Use your <span style="color: blue">e</span>y<span style="color: blue">e</span></h3>
Use your judgment, and you can create an aesthetically appealing portfolio that complements the points you want to make and showcases your projects.
To get a sense of where we might head with these kinds of tweaks, we can look at an example.
And before we go forward, let's review how these kinds of aesthetics relate to the content of a portfolio by looking at some examples (1 - 2).
For homework, continue drafting your portfolio, revising the structure, and then working through any of these aesthetic items that we did not have time to cover in class while continuing to identify the big picture points you want to make and drafting reflections.