Designing Your Digital Presence Online
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.
Additional post-session support through the Digital Scholarship Lab Librarian and tutors. Librarians work closely with the English faculty on this course.
Upperclass students, with many English majors and minors.
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.
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.
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.
Laptops, writing utensils, and paper.
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
Work & Writing Statement
Introduce Content Management Systems
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?
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”?
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
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
Approach: Encourage individual research consultations, reinforce wireframe homework assignment (to bring with to consultation).
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.
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.
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
Brand Voice Matrix
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)
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
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.
Does not meet requirements
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)
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
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
Dreamweaver is intended for creating original and custom designs. Dreamweaver can help you build something from scratch that is still beautiful and responsive.
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.”
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.
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?”
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.
Wordpress is not a bonafide “website builder” in the Wiziwig, drag-n-drop sense of it. It will take more technical work.
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.