Skip to main content

Designing Your Digital Presence Online

by Elizabeth Gibes and Taylor Ralph
This lesson introduces undergraduates to online hosting options for portfolios, websites, designing a personal brand, and digital privacy.
Designing Your Digital Presence Online
·
Contributors (10)
E
T
M
J
N
& 5 more
Published
Sep 19, 2019
DOI
10.21428/65a6243c.7682e70e

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

  1. Learner knows what CMS/Platforms/options exist for creating an online portfolio and which one will work best for them.

  2. Learner can articulate some design choices involved in creating a personal website.

  3. Learner can identify (using the Brand Voice Matrix) what “professional voice” to use for their portfolio.

  4. 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:

  1. A Professional Biography

  2. Master Resume

  3. Work & Writing Statement

  4. 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:

  1. What works for this site? What doesn’t?

  2. What stands out to you?

  3. What story is this person telling about themselves?

  4. What information did they choose to share, and where and how within the architecture of their website?

  5. What kind of navigation exists?

  6. 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?

  • Dreamweaver is intended for creating original and custom designs. Dreamweaver can help you build something from scratch that is still beautiful and responsive.

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?

  • 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.

Comments
0
comment

No comments here