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
- 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.
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.
Development guide
Site structure
-
Root Directory
- images directory – contains pngs
- styles2 directory – contains all of the style sheets
- hubs2 directory – contains hubs for navigation links
- works2 directory – contains individual creative works
- index2.html – home page for site, site purpose and overview
- about2.html - contains informationa about site purpose
Visual representation of site structure
-
Root Directory
- images directory – contains jpgs and gifs
- styles2 directory – contains all of the style sheets
- hubs2 directory – contains hubs for navigation links
- works2 directory – contains individual creative works
- index2.html – home page for site, site purpose and overview
- about2.html - contains informationa about site purpose
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
- Home
-
Written Works
- Inditerminate number of links to stories I write (Number will increase)
*For purposes of this assignment, 1 link
-
Comics/manga
- Inditerminate number of links to comics series I draw (Number will increase)
*For purposes of this assignment, 1 link
-
Sculptures
- Inditerminate number of links to photo collections of clay figures (Number will increase)
*For purposes of this assignment, 1 link
-
Drawings
- Inditerminate number of links to inidivdual drawings (Number will increase)
*For purposes of this assignment, 3 links
-
About
- No links
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:
- paper.png
- rjlogo.png (yet to be finalized)
Sample Images of Creative Works
- samplecomic1200.png
- mjug1200.jpg
- portrait1200.jpg
- Variant1200.jpg
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; }