Post Templates

An example of a post template I've made being used within a writing forum. Access to this page may be prohibited if you do not register to the JCINK community.

An Overview

The Challenge

Despite talented writers converging within online communities for the purpose of collaborative writing, there exists a stigma with posts that have not been beautified. Since HTML/CSS is an uncommon skill amongst writers, those seeking to write with others go unnoticed. Furthermore, different types of online, fictional interactions warrant different templates.

The Solution

Below I've showcased a handful of prose and tech/text templates I have designed to mitigate this problem. I make them available on online writing communities that I am a member of, and encourage writers to tinker with the code to adapt to their persona's style. The templates are designed deliberately for their intended post type and accompanying post-interactions.

My Role

Interaction Designer & Developer: HTML/CSS. Photoshop. Sketch.


Interactive/Layered Formats

Although rare, some writers also like to illustrate scenes with pictures. This template is an example of a visual lead-in to a post, which is available upon hover. Please note that the preferred medium for writing is on desktop applications, as it is painful to write and code on mobile devices.

Novella & Prose Formats

Many writers like to stylize their posts with an icon/avatar and a lyric. This template allows for that, while also justifying text. Through qualitative interviews, writers professed a distaste toward unjustified text (typically preferred in design) for two reasons: (1) justified text is reminescent of printed text, and (2) justified text is "cleaner."
Another example of the preferred justified text and icon feature, with an added scrollbar. At the time this template was made, scrollbars were very much "trendy" and sought after. A more recent preference shift toward non-overflow templates has made itself evident.

Technology Formats

A template to simulate a group chat akin to chatrooms. There's a feature for an avatar, black text to indicate communicated text through the chat, and greyed text to communicate persona actions that occur off-screen, but are nonetheless important for writers to know. There is also a section for Author Notes, and instructions for how to manipulate the template.
This template simulates a texting situation, group or otherwise. Rather than having several templates within one post for a character communicating to several other characters, it is condensed in one template. Each left-border indicates the other character of interest that the subsequent texts are pertinent to. This template also has a feature for an avatar and a recipient/s label.

The Design Process

Each format required its own, separate feature considerations with regard to the fictional situation it was being purposed for, as well as the desires of the writer. Usability features such as hovers and scrollbars, while less desirable for novella formats, are sought for tech templates as they simulate the original media.

Wireframe for interactive post template design, showing scroll bar for hidden text if a post exceeds a certain length. Allows for quote and image customization.
Wireframe for a prose post that expands with the length of the post (avoids scrollbars). Allows for icon and quote customization.
Wireframe for a text post, showing customizable features for an icon, own-character text color, and other-character text colors. Usually the author of the other character has pre-established an associated color to their own character. This makes it easy to find relevant information for certain characters when multiple are involved.

Effective communication is the highest priority, despite the need to also look aesthetically pleasing. Ease-of-use from a non-coder's perspective is also important, otherwise writers will feel discouraged and maybe even intimidated by the writing community. Lack of comfort ultimately results in the writer leaving, which leads to reduced site activity, and eventual site death.

Future Steps

As trends constantly change (just as fashion does), the need for appealing and user-friendly post templates is constant.