Writing Projects
Multimodal Piece: Building an ePortfolio
The process of building an ePortfolio has to be purposeful to be effective. Read on to learn more about the design choices made while creating this website.
​
by Valerie Eikenberry | Published December 18, 2020
Before and after view of the homepage of my ePortfolio
​
​
This multimodal presentation of my writing projects has been purposeful in sharing my writing journey throughout the W131 course. Looking at the rhetorical context of my multimodal discourse, I have targeted an educational and client-based audience. My ePortfolio covers the topic of interior design through the lens of starting my own interior design business.
​
My film review introduces the viewer to the overall topic. Then, the feature narrative gives more insight into my personality as I go through the process of setting up the website for the Naptown Interiors business. Ultimately, this allows my W131 professor to assess my writing. Meanwhile, my W131 classmates get to get to know me better and any future clients can now understand the origin story of my startup.
​
​
this was done by choosing an appropriate template, implementing the “Five 3s” strategy, understanding eye tracking optimization and folio layout, and ensuring the entire website was consistent in design.
Intentional design choices have been made across the ePortfolio in hopes of engaging the viewer. Specifically, this was done by choosing an appropriate template, implementing the “Five 3s” strategy, understanding eye tracking optimization and folio layout, and ensuring the entire website was consistent in design.
​
First and foremost, I chose the coaching professional template. Its use of large photos and minimal buttons would allow me to showcase the visual nature of my topic. I changed the colors of the font and buttons to black and white to draw attention to the photos included on each page. This contrast helps the viewer navigate the website without distraction.
​
​
Screenshot of the orientating information on the homepage
​
​
"Both orientate the reader as to the rhetorical context of the ePortfolio and where to find the writing projects."
Meanwhile, the homepage features a bulky black title and downward arrow that guides them to the welcome section below. Both orientate the reader as to the rhetorical context of the ePortfolio and where to find the writing projects. The featured image of each project along with its title and a brief description occupy the rest of the entire homepage. Clicking on either the photo or any of the text will take the reader to the writing project for simple navigation. Additionally, the header above includes my name, the purpose of the website, and the writing projects in order to be accessible at all times.
​
​
Screenshot of design elements part of the "FIVE 3" strategy in my feature narrative
​
​
Moving forward included utilizing design strategies on each page. The “Five 3s” strategy incorporates three of various design elements on each page, including images, hyperlinks, and pull-out quotes (Oesch-Minor). Each of my writing projects incorporated a feature image followed by other smaller images throughout the body text. Similarly, three pull-out quotes were separated from the text using bold font and a colored line. Both added visual interest. This same color was used for words that included a hyperlink to acknowledge outside sources in conversation with my writing.
​
​
"Having the title stick out draws the reader downward into learning more about Jan Gehl in my film review. "
The next strategy incorporated was the understanding of eye tracking optimization and folio thinking. Having the title stick out above the featured image and body text to draw the reader’s eyes to look vertically and scroll downward (Zehra). This can be seen on the title page of my film review that guides the reader downward to read about Jan Gehl. Similarly, the body text of each project is centered on the page and narrow to prevent eye strain that occurs when spanning across the page (Zehra). Meanwhile, this current page includes a slider that shows the before and after view of my ePorfolio website. Adding this dynamic interest keeps a viewer engaged in the portfolio as well as provides context ("What is Multimodal?").
A screenshot of the film review title
​
​
On all writing projects, my use of a uniform title section, featured image layout, and text format ensures the cohesive design of the website that I intended. On the other hand, varying lengths of text, colors in the images, and placement of pull-out quotes and hyperlinks added variation to keep the viewer engaged. This balance between cohesiveness and variation was achieved through intentional use of design strategies in conjunction with folio thinking.
​
​
​
​
​
​
Works Cited
​
Oesch-Minor, Debbie. "WP3 ASSIGNED: Multi-Modal Discourse Using a Website Platform + Commentary." Canvas, Instructure, iu.instructure.com/courses/1921940/pages/wp3-assigned-multi-modal-discourse-using-a-website-platform-+-commentary?module_item_id=22396040.
​
"What is Multimodal?" Center for Academic Success, University of Illinois Springfield, www.uis.edu/cas/thelearninghub/writing/handouts/rhetorical-concepts/what-is-multimodal/.
Zehra, Nida. "How Eye Tracking Can Help You With Website Optimization?" VWO, Wingify, 10 Sept. 2020, vwo.com/blog/eye-tracking-website-optimization/.
​
​
​
​
Draft #1
Throughout this multimodal presentation of my writing projects, my purpose has been to share my writing journey throughout the W131 course with both an educational and client-based audience. Looking at the rhetorical context of my multimodal discourse, I wanted to discuss interior design through the lens of starting my own interior design business. My film review introduces the viewer to the overall topic while the feature narrative gives more insight into my personality as I go through the process of setting up the website for the Naptown Interiors business. Ultimately, this allows my W131 professor to assess my writing, my W131 classmates to get to know me better, and any future clients to understand the origin story of my startup.
​
​
Wix has made this process both simple and fun to customize. Because my writing covers interior and website design, I chose this coaching professional template. Its large photos and minimal buttons showcase the visual nature of my topic. The homepage now features a translucent photo of a dog lying on a cozy couch full of warm colors. Meanwhile, the entire website includes a black and white theme to draw attention to the photos included on each web page. This contrast guides the viewer across the website to the information they are searching for.
​
​
Once you land on the homepage, you are presented with a large photo and a bulky black title that orientates what you have stumbled upon. Clicking on the “Read More” button takes you down along the screen to a bit of information about me, the author, followed by my various writing pieces featured on this website. This was a conscious choice to not overwhelm the viewer in the beginning. Above lies the translucent white header that includes my name, the purpose of the website, and various tabs linking directly to my writing projects. Again, these elements allow the viewer to navigate the website without being distracted by this information.
​
​
Each writing project has the same uniform design elements with varying photos and text layouts. The “FIVE 3s” strategy was used to balance out these elements, including pull-out quotes, hyperlinks, and images, across the web pages while keeping them connected through their page layout (Oesch-Minor). Each page begins with a title that stands above the rest of the text. It also includes an overview of the writing project followed by the author name and published date. After familiarizing the viewer with the content, the writing project features a large cover image across the screen and the content begins.
​
​
This guided downward scroll is another example of a purposeful design strategy: eyetrack optimization. Having the title stick out draws the reader downward into learning more about Jan Gehl in my film review (Zehra). Additionally, including a large photo of the finished website in the beginning of the feature narrative leads the reader to keep scrolling in hopes of seeing photos of the process throughout the writing. These visual cues guide the viewer to stay interested. I also worked to accomplish this by breaking large paragraph into smaller pieces and keeping the overall body of the writing centered and not span across the page straining the viewer’s eyes. Doing so engages the reader by making pieces easier to digest ("What is Multimodal?"). This also applied to the size and font being large and clear which emphasized any pull-out quotes and hyperlinks.
​
​
Each page has their own implementation of these strategies, but the similarities of each page were what I focused on to showcase the ePortfolio as a whole. Keeping my writing pieces connected was important and doing so visually was a fun challenge for me.
​
​