Site: RJ's Art and Things Of Interest

Developer: RJ Roy

Project plan

Title

RJ's Art and Things Of Interest

Goal

The website I create for the purposes of this project will represent a framework that I hope to expand into a repository for creative works and personal projects I have created, including comics/manga, written works, sculptures, and miscellaneous drawings.

Target Audience

The author of the first webcomic, Eric Millikin, valued the Internet because it allowed him the creative freedom to self publish his work without concerning himself over censorship or pleasing specific demographics. I value the Internet for the similar reasons, and dislike the concept of target demographics.

By definition, repeated visitors to my website will probably be people who are interested in what I make. This may include fans of comics, sculptures, parodies of specific media, animation, the strange, and the incomprehensible. However, I have no intention of tailoring what I make to suite anyone's interests but my own. At most I will make and effort to organize my website so that it is simple to navigate, with the intention that my family and I can easily locate specific works.

Ideally, the majority of people to visit my website would be those to whom I have personally presented a link and who know what to look for.

Main Features
  • Navigation bar/list including links to different pages representing different mediums
  • Navigation hubs for specific mediums containing links to individual works or chapters
  • Images
  • Back and forward arrows (images linked for the purpose of navigating to immediately previous/subsequent chapters)
  • About page breifly describing purpose of website
Personality

Site Mood

  • Archaic
  • Dark
  • Cozy
  • Personal
  • Obscure
  • Secret
How the Mood Should Effect Visitors

If a stranger were to stumble upon my personal website, I’d hope they'd feel like they’d found something they were never meant to. I expect they'de feel some combination of intrigue and confusion at first, due to the seemingly random and mostly unexplained assortment of content. The aesthetic itself should convey a feeling of dark seclusion, like a cozy cave lit by a fire.

Limiting Factors

I expect I'll only create the basic outline of what I intend to be the final product in this class, because the scope of collecting and then digitally photographing/scanning/transcribing all my work is an undertaking that will require a huge time investment. The only way to get it done is to cumulatively add more works over time, along with increasingly specific sub-navigation lists to organize works as needed.

Other limitations include my grandfather's internet speed, and my desire to be able to look up my art while I'm traveling. Taking these limitations into consideration, I should check that my images show up well on mobile devices and that my site doesn't take up too much bandwidth.

Development guide

Site structure

Visual representation of site structure

Navigation elements

Navigation – There is a navigation bar at the top of the page that links to all pages in the site.

"Back" and "Next" arrows in the form of linked images will be present at the bottom of pages displaying individual chapters of a webcomic.

Navigation structure

HTML template

I will be basing my pages on this HTML template.

Wireframe site

These wireframes let you navigate the basic structure of my site.

Design guide

Color Palette

The following is the list of colors that may be used.

Light Sepia

#DAC17c

Dark Red

#990000

Black

#000000

Brown

#855723

White

#FFFFFF

Media assets

General Guidelines

All the images utilized in the creation of my website will be images I have authored.

Though currently I'm using a mix of pngs and jpgs, I intend to convert all my images into pngs before this assignment is over.

Images I Currently Plan to Use to Decorate my Site:

Sample Images of Creative Works

Note: Other size variations of each of these images will be included as part of responsive image design.

Styles guide

Background

Background is Black (will be overlayed with sepia parchment image)

{background-color: #000000}

Default font

Default text is white, 14 pixels

Note: I intend to overlay an image of parchment over the black background in main, and text written over this image should be black

Things like the footer may be in white against black.

p {
font-family: Georgia, serif,'Times New Roman', Times, Cochin;
font-size: 1.5em;
color: #000000; }

Header

The header section has 2em of top padding and 1em of bottom padding, is positioned along the top of each page, and contains the name of the wesbite. The background is dark red. Navigation will be placed outside of header.

header {
background-color: #990000;
padding-top: 2em;
padding-bottom: 1em;
text-align: center; }

Navigation

The main navigation will have a top and bottom padding of 1em, and bepositioned just below the header. It will have no background color if it contains a sepia scroll image. The font will also be black. Until I create a sepia colored scroll image, I'll use my paper image as a substitute.

nav { background-image: url("images/paper.png");
#cccccc;
background-repeat: no-repeat;
background-position: center;
background-size: cover;
margin-top: 1em;
margin-bottom: 1em; }

Images

There will be no background color or border applied to the figure container. By default images will have a padding of 1 em.

img { padding: 1em; }

Links

Links will be dark red. On hover, they will have a brown background, white text, and a solid dark red border.

a { color: #990000 }

a:hover { background-color: #855723;
color: #ffffff;
border 2px solid #990000; }

Layout sketch

Site layout sketch