Session Specifics
This 75-minute lesson is taught in an upper-level English class each semester. Students must create an online portfolio showcasing their writing. Because our university doesn’t offer server space or a domain for students, part of the lesson involves demonstrating free and affordable hosting options for students.
Instructional Partners
Additional post-session support through the Digital Scholarship Lab Librarian and tutors. Librarians work closely with the English faculty on this course.
Audience
Upperclass students, with many English majors and minors.
Curricular Context
This class is offered every semester and is called: Writing for the Workplace. It fulfills 3 credits of English coursework for the major or satisfies an elective requirement. This lesson can be applied to other upper-level writing classes and graduate courses.
Learning Outcomes
Learner knows what CMS/Platforms/options exist for creating an online portfolio and which one will work best for them.
Learner can articulate some design choices involved in creating a personal website.
Learner can identify (using the Brand Voice Matrix) what “professional voice” to use for their portfolio.
Learner knows what search results are connected to their name and what actions they can take to better control the information in their results.
Preparation
Prior to the workshop, we ask students to come with one website they like and to be prepared to describe to the class why they like the design.
Materials
Laptops, writing utensils, and paper.
Session Outline
Students will meet with their librarian in the Digital Scholarship Lab in preparation for their class assignment, an online website that showcases the student and their writing. The goals of this portfolio are two-fold: first, to give the student an opportunity to engage in purposeful revisions of previous writing for an audience beyond the classroom and second, to create a platform that the student can continue to revise and share with future employers, graduate programs, etc.
All of the design choices related to the portfolio are up to the student, including the website platform, font, and how texts and images are displayed. The library’s Digital Scholarship Lab facilitates an in-class workshop on potential platforms and design considerations, with optional individual consultations available by request. This lesson plan details the activities and learning outcomes of the in-class workshop day.
Requirements for portfolio:
A Professional Biography
Master Resume
Work & Writing Statement
Writing Sample
Introduce Content Management Systems
15 minutes
Introduce content management systems, offer up three options, and discuss the difference in these (see attached decision sheet that offers Dreamweaver, Wix, Wordpress, and their differences).
Approach: “Decision sheet” and facilitated discussion. Questions to consider in the decision sheet: Do you know HTML 5 and CSS? Do you need a place to host your site? Are you willing to pay yearly hosting fees to support your site?
Design choices
20 minutes
Approach: In this section of the workshop, we discuss their pre-workshop activity [websites they like and why] in small groups. We supply a short link to a shared google doc where they can submit the sites they found and peer review them with specific questions:
What works for this site? What doesn’t?
What stands out to you?
What story is this person telling about themselves?
What information did they choose to share, and where and how within the architecture of their website?
What kind of navigation exists?
Can you tell how it was made (custom design or particular platform)?
Introduce the idea of a wireframe with templates and applications (Balsalmiq). What makes a wireframe successful, and what are the best practices for wireframe crafting?
Homework: wireframe your design ideas before individual consultation. Example assignment available in Additional Instructional Materials below.
What is a “personal brand”?
20 minutes
Approach: Small group activity, report back to big group: brand voice matrix (see example in Additional Instructional Materials below): Brainstorm 3 brand characteristics and define their meaning to your website. What should you do and not do to stay consistent in your website to your brand?
Digital Presence and Privacy
15 minutes
Approach: “Google Yourself!” activity
Emphasize the importance of surveying your search results and looking for items that don’t match your personal brand or the digital presence you are hoping to represent professionally.
Wrap-up and post-workshop activity
5 minutes
Approach: Encourage individual research consultations, reinforce wireframe homework assignment (to bring with to consultation).
Post-activity
Students are asked to create wireframe of their website by the end of the next week and bring it with them to their consultation. The wireframe assignment is inspired by Miriam Posner’s wireframing activity for her DH101 course.
Assessment
Librarian instructor, in consultation with faculty, will review wireframes for feedback. Librarian instructor also has the opportunity to see final portfolios to review success of end work. Wireframe activity helps to assess the learner’s grasp of the design concepts mentioned in the workshop and the portfolio review offers additional evidence of learning outcomes #1, #2, and #4. The post-workshop reflection exercises described below can reinforce learning outcome #5.
Reflection
Discussion around personal brand and digital privacy asks students to reflect on their Google results, if anything surprising appears, and whether they had ever considered what personal information was publicly available prior to this class session. The regular faculty member follows up on these points in subsequent class discussions and may require a short writing exercise around the learner’s thoughts/concerns regarding digital privacy and preparing a professional digital presence.
Additional Instructional Materials
Slides
Designing Your Digital Presence Online
Brand Voice Matrix
Brand Characteristic | Description | Do | Don’t |
|---|
Dedicated | Giving the impression that you are invested in the future of your field of interest | Post updated content, keep revising resume and writing sample, post or link to new developments/news in professional area of interest | Post irregularly, include content that is not carefully reviewed (fake news) |
Polished | Cultivating a blog persona that is professional | Make sure all content is proof-read or peer-reviewed, use professional language | Use passive-voice, upload sloppy or unedited content, use colloquial language |
Unique | Ensuring that the blog stands out and is interesting to a diverse group of readers | Make appropriate references to personal life, post new or innovative ideas, post a wider variety of interesting content, use color or add images | Post content from the same sources, neglect or offend potential audience groups |
Wireframe Assignment Description and Assessment
(for consultation following session)
Assignment description: Create a wireframe for your website. Follow the best practices discussed during the session, and get inspiration from online examples. Think about layout, organization, and elements you would like to include. Your set of wireframes should include space for your: professional biography, master resume, work & writing statement, and writing sample. To draw your wireframes, we suggest Balsamiq (https://balsamiq.com/ — sign up for a free trial), but you’re welcome to use any tool you feel comfortable using, including Photoshop, PowerPoint, or pencil and paper.
Category | Meets requirements | Does not meet requirements | Instructor feedback | Student comments |
|---|
Was the wireframe assignment completed before the consultation? | | | | |
Are all website requirements present and clearly noted? Professional biography, master resume, work & writing statement, and writing sample | | | | |
Was the wireframe created using best practices? Grayscale, simple fonts, etc. | | | | |
Are the section elements clearly identifiable? Text, images, links, etc. | | | | |
Is the content logically organized? (Content placement) | | | | |
OR
Category | Excellent | Good | Adequate | Needs Improvement |
|---|
Assignment completion | The assignment was completed in full before the consultation | | | The assignment was not completed before the consultation |
Website requirements: professional biography, master resume, work & writing statement, and writing sample | All assignment elements were included | Most of the assignment elements were included | Some of the assignment elements were included | None of the assignment elements were included |
Wireframe best practices: grayscale, simple font, etc. | The wireframe was created using best practices discussed during session | The wireframe followed most best practices | The wireframe followed some best practices, with some errors | The wireframe did not follow best practices (too many colors, fonts, erroneous elements) |
Wireframe Elements: text, images, logo, etc. | All relevant wireframe elements were appropriately applied | Most relevant wireframe elements were appropriately applied | Some relevant wireframe elements were appropriately applied or some elements were misapplied | The wireframe did not include any text, image, logo, or hyperlink elements |
Content organization | The content organization was logical and well thought-out | The content organization was mostly logical, with some small areas for potential improvement | The content organization needs some revision in order to become logical | The content organization was not logical or easy to understand |
Which Website Builder is Best for You? Website Builder Decision Sheet
“I’d like to build this out on my own and customize my site as much as possible.”
Try Adobe Dreamweaver
The Digital Scholarship Lab has 27 computers loaded with Adobe CC, including Dreamweaver. Dreamweaver is a software that helps you build custom sites and supports HTML, CSS, JavaScript, and more. You’ll have the most success if you already know HTML, CSS, and PHP.
Why?
Why not?
For most personal websites, this amount of work is unnecessary [Check out the DS Lab blog post, “Are Online Website Platforms Making Web Building Software Obsolete?”]. With a proliferation of content management systems and website builders, there are a lot of great options for the “amateur” web developer, even you don’t know any code.
What are the costs?
If you don’t want to take advantage of the library’s software licenses, it will cost you $20.99 a month to purchase your Adobe Creative Cloud account. On top of that, you will need to identify a place to host your domain. In the Digital Scholarship Lab, we recommend Reclaim Hosting. They specialize in academic, faculty, and student websites; offer great support; and are pretty affordable at $25 a year.
“Actually, I’m looking for an easy-to-use website builder. I don’t want to/ know how to code. I prefer “drag and drop” functionality.”
Try Wix
Why?
Wix is one of the largest freemium website builders with more than 100 million users.
Wix has one of the biggest libraries of site templates.
It has an easy drag-n-drop site builder with custom options built in.
Wix provides decent tech support.
Why not?
Unless you pay, you’ll be dealing with Wix ads on your site.
The number of free templates is significantly less than the paid version.
There are limits on number of subpages and media storage on the free version as well.
What are the costs?
The free version limits the number of pages and the amount of media storage you can have on your website and has Wix ads. For $19 a month you can register your own domain name and take advantage of media storage (up to 20GB), no ads, and unlimited subpages.
“I kind of want something in between...what’s another option for a content management system?”
Try Wordpress
Why?
Wordpress is open source. This means anyone can build plugins and templates for it so there are thousands of great site themes.
Wordpress has both free and paid versions. The free version allows you to make a great site and take advantage of the knowledge and resources available on Wordpress--possibly the most popular and well tested content management systems out there.
Why not?
What are the costs?
Most of the best themes are for purchase. Themes can run from $20 to $100 or more.
If you don’t want to set up your own hosting somewhere (like Reclaim Hosting, above), you can host directly through wordpress.com. The personal plan is $48 per year.
Creative Commons Attribution 4.0 International License (CC-BY 4.0)