Because this is a visual based site, and not a word based site, the emphasis will be on the picture based content. Except for the blog, the only text in the content will be about the image.
The sidebar will correspond with the content; this will vary on what page it is, and will be explained page by page later in this manual. Next in the order of hierarchy will be the header, to remind the viewer that this is MY work.
The main navigation will list the pages, which will be most frequently visited. The footer will also list those main pages, as well as portions of pages that may not seem to the user to fall under the category of any “main” page.
The measurements here are the areas of the DIVs splitting apart these areas.
Working with a 960px by 600px interface, the top and bottom margin start at 20px, where the left and right sides will start at 10px. Nothing other than background images will come into this border.
For the purpose of this manual When I refer to something being 20px from the “top” I am referring to the 0px line where the interface starts.
Each column is 40-points wide, and in between each column is a 20px gap. This allows for 16 columns.
All elements will fit within the grid, in increments of 10px. This will be explained in more detail page by page later in this manual.
On every page the sidebar will start at the second column and expand to the end of the fourth column, making it a total of 220px wide. The top of the column will always start at 170px down from the top of the interface. The red stripes on the top of the columns represent the border around the sidebar box.
If the page is not expandable then the sidebar will only be 390px tall; if the page is expandable the table will extend in increments of 10px with the help of a vertically repeating image div.
The content will also start 170px down from the top, and be 390px tall if the page is not expandable, and extend in increments of 10px if it is. The width of the content will be 580px. Starting one column over from the sidebar, and ending at the end of the 15th column. Like the sidebar, the content box it will have a 10px border.
The content and sidebar boxes are images. They consist of three DIVs: the first encompasses the others. The top and bottom are single images, and the middle is a 10px tall image that repeats vertically. Their borders are within the image, thus all padding is from the edge and not from the ‘border’.
Like most websites’ header, the header at claireification.com’s header is the branding part of the page.
The navigation bar will have the links to the portfolio, about and blog pages; going one step further it will also have links to go directly to the graphic design, illustration, and, arts, portfolio pages.
I want it to be visually obvious to people as to what I do; but search engines can’t deduce great design from a jpeg, so I have it written here.
The navigation bar will begin vertically 20px down from the top of the interface – the top edge of the margin. Horizontally the text will start at the beginning of the 6th grid column
The logo and logotype is one image, at 553px by 66px. It will start vertically at the point where the header DIV starts, and horizontally at the third column.
The brief description will vertically align visually to the top of the “m” on “com”. Horizontally it will align flush left to the 13th column.
The background image is 1024px by 293px. It vertically extends so that just below the coded header the doodles and texture separates the header from the content. The image will stay center no matter how wide the user makes his or her browser screen.
The footer is used as a secondary navigation bar.
The sites that people are initially are looking for are in the main navigation. The footer has those same “main page” links plus “contact me” (another link to the about page) and “resume” (a direct file download) which some people may not know what page to visit for those if that’s what they came to my site to find.
There is a line image that will extend 960px and rest 15px up from the bottom, right under the footer text.
The home page is very simple. It needs to be a landing page for the user, where they are aware that they have entered my site, but instead of staying stagnant on the home page, they are encouraged to now explore the site. To do this, the home page needs to be intriguing. Once this engages the user, they need to be directed, through a link, to visit another page within the site.
Compliant with the grid standards already set forth, the sidebar will be 220px wide, and the content will be ###px wide. This is not a page that will expand vertically, so the height of both the sidebar and content will be ###px.
The sidebar will include a list of blog feeds. It will not show the whole blog, but just the title, date, the first paragraph, and a link to that blog post. The sidebar has a 10px border, and the text will lie within 20px of that border, totaling the padding from the edge of the box to 30px.
The content will have a dominant featured work image fitting within a 380px x 350px rectangle. The next column over will be a short paragraph (not exceeding 320 characters) describing the featured work. Immediately following will be a link to the portfolio page.
Like the sidebar the text will lay 20px inside that border (30px padding). The text will be flushed left against the 13th grid column.
The portfolio page(s) will be the most dominant of all the pages that encompass “claireification.com”. To view works is the main ‘give back’ feature of my site. It is the main reason my audiences will be visiting my page, and it is the reason they will come back. Thus, these pages need to be the most intriguing and engaging.
Compliant with the grid standards already set forth, the sidebar will be ###px wide, and the content will be ###px wide. The page is not to be expandable until there are too many works listed in the left sidebar to fit within its measurements.
Unlike any other sidebar or any other page, the portfolio pages’ sidebar will be tabbed at the top. The tabs will be 30px high, and 72.5px wide. The front tab will be hex code color # ######, the middle # #######, and the bottom, # ######; these will always change depending which portfolio page is active.
Like the Home page, content will have a dominant featured work image fitting within a 380px by 350px square.
The next column over will list the title of the work, the client (or class), the date it was completed, and a brief description.
Starting 20px from the bottom of the content box, flushed left to the same grid column of the text, will be thumbnails of more pictures of the work. each thumbnail will be 40px by 40px, with 10px in between; and three thumbnails to each row, no more than two rows.
The about page will be, well, about me. Along with a description of who I am and claireification.com, there will be contact information. This will be the usual e-mail address, but also give links to my networking sites. Most importantly there will be a link of my resume.
This is compliant with the grid guidelines, and it is an expandable page.
The sidebar will consist a list of links and corresponding images of ways to contact me. The Images will be 30px by 30px. It will fall within a border of 30px from the edge of the sidebar box. The text will start 10px left of edge of the images.
The about page will have a picture of myself starting at the 7th column and expanding to the 8th column. The text will be flushed left against the 9th column grid and expand to the edge of the 14th column.
The blog will have updates of my work, my life, pleasingly aesthetic findings, links of other blogs, people I admire, etc.
This is compliant with the grid guidelines, and it is an expandable page.
Will have widgets. Some widgets will be a list of links, my Flickr feed, a calendar of posts, archived posts, tagged keywords, etc. Other than the 20px border inside the box, the layout is at the mercy of the widgets.
The content will be posts. Vertically the text will start 30px from the top. Horizontally the text will start at the 7th column and extend over to the 14th.
h1 HELVETICA: REGULAR “ALL CAPS” 14PT
h2 HELVETICA: REGULAR “lowercase” 14PT
h3 HELVETICA: ITALIC 10 PT
h1 HELVETICA: REGULAR “ALL CAPS” 10PT
h2 HELVETICA: REGULAR “lowercase” 10PT
SIDEBAR
h6 HELVETICA: REGULAR “all lowercase” 10PT
h5 HELVETICA: REGULAR 10PT
h4 HELVETICA: REGULAR “all lowercase” 10PT
h3 HELVETICA: REGULAR 12PT
h2 HELVETICA: BOLD 12PT
h1 HELVETICA: BOLD 16PT
P PALATINO: REGULAR 10PT
CONTENT
h5 HELVETICA: REGULAR 10PT
h4 HELVETICA: REGULAR lowercase12PT
h3 HELVETICA: REGULAR 10PT
h2 HELVETICA: BOLD 14PT
h1 HELVETICA: BOLD 16PT
p PALATINO: REGULAR 12PT
H1 HELVETICA: BOLD 24PT
H2 HELVETICA: BOLD 14PT
H3 HELVETICA: BOLD 12PT
H4 HELVETICA: REGULAR “ALL CAPS” 12PT
H5 HELVETICA: REGULAR 10PT
P PALATINO: REGULAR 14PT
Currently used logos:
Black and White Okay
The logo is always square; do not stretch or distort
The cursive “cd” is transparent and can reveal colors behind it. Only reveal flat colors.
Other versions of this logo are not to be used on the current site, but may be used in future versions.
The only time any textured images can be revealed through this is with a corresponding cursive form & texture. These images are ONLY under my art direction.
Different color circles under my art direction Okay.
When an image’s height is more than it’s width, center the image horizontally and extend the height to 350px
When an image’s width is more than it’s height, center the image vertically and extend the width to 380px
Thumbnails for the portfolio page need to be made; all thumbnails are square (preferable: 60px by 60px at 72 dpi scaled down to 40px by 40px).
