<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>KernMe &#187; thickbox</title>
	<atom:link href="http://kernme.org/tag/thickbox/feed/" rel="self" type="application/rss+xml" />
	<link>http://kernme.org</link>
	<description>Mike Garrett's Portfolio</description>
	<lastBuildDate>Thu, 26 Aug 2010 13:33:12 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	
		<item>
		<title>VCU Art History Department</title>
		<link>http://kernme.org/portfolio/st-edward-epiphany-school/</link>
		<comments>http://kernme.org/portfolio/st-edward-epiphany-school/#comments</comments>
		<pubDate>Thu, 02 Apr 2009 14:58:51 +0000</pubDate>
		<dc:creator>admin</dc:creator>
				<category><![CDATA[Portfolio]]></category>
		<category><![CDATA[blueprint CSS]]></category>
		<category><![CDATA[front-end development]]></category>
		<category><![CDATA[full site design]]></category>
		<category><![CDATA[grid systems]]></category>
		<category><![CDATA[thickbox]]></category>
		<category><![CDATA[vcu arts]]></category>

		<guid isPermaLink="false">http://localhost:8888/kernmeWP/?p=13</guid>
		<description><![CDATA[2008 I was hired this summer as an intern for the Dean of the Arts at VCU. My first project was to redesign the Department of Art History website. It was old, outdated, tabled and buggy. They gave me free reign over the entire process, from creating a concept to coding the end product. I [...]]]></description>
			<content:encoded><![CDATA[<h3>2008</h3>
<p><img src="/wp-content/themes/thematic/images/ai.gif" alt="Illustrator" /><img src="/wp-content/themes/thematic/images/css.gif" alt="CSS" /><img src="/wp-content/themes/thematic/images/dw.gif" alt="Dreamweaver" /><img src="/wp-content/themes/thematic/images/fl.gif" alt="Flash" /><br /><img src="/wp-content/themes/thematic/images/ps.gif" alt="Photoshop" /><img src="/wp-content/themes/thematic/images/xhtml.gif" alt="xHTML" /><br />
<span id="more-13"></span></p>
<p>I was hired this summer as an intern for the Dean of the Arts at VCU. My first project was to redesign the Department of Art History website. It was old, outdated, tabled and buggy. They gave me free reign over the entire process, from creating a concept to coding the end product. I was the designer responsible for all communications, mockups, and updates. It was really an eye-opening experience. </p>
<p><a href="http://kernme.org/wp-content/uploads/2009/04/710531225432376jpg.jpeg" rel="shadowbox[post-13];player=img;"><img src="http://kernme.org/wp-content/uploads/2009/04/710531225432376jpg-300x80.jpg" alt="First Mock Up" title="First Mock Up" width="300" height="80" class="size-medium wp-image-203" /></a><br />
<a href="http://kernme.org/wp-content/uploads/2009/04/710531225432479jpg.jpeg" rel="shadowbox[post-13];player=img;"><img src="http://kernme.org/wp-content/uploads/2009/04/710531225432479jpg-300x272.jpg" alt="Second Mock Up" title="Second Mock Up" width="300" height="272" class="size-medium wp-image-205" /></a><br />
<a href="http://kernme.org/wp-content/uploads/2009/04/710531225432437jpg.jpeg" rel="shadowbox[post-13];player=img;"><img src="http://kernme.org/wp-content/uploads/2009/04/710531225432437jpg-300x136.jpg" alt="Third Mock Up" title="Third Mock Up" width="300" height="136" class="size-medium wp-image-204" /></a></p>
<h4>Mock Ups</a></p>
<p>In the initial mockups I was asked to develop a typographic logo, hence the large &#8220;Art History&#8221; in the second and third mockup. Each of these mocks were sketched out first and then reproduced in illustrator. There were countless variations, but these were the most prominent. The first is the most experimental (Art History Departments are notoriously conservative). In the second, I worked with the golden ratio to build out a design that allowed for as much user interaction and presented as much information up from as possible for an Art History department. The third and final was closest to what we ended up with. I focused on subtracting as much out of the design as possible without getting rid of some of the basic elements that needed to be included, in my opinion.</p>
<p><a href="http://kernme.org/wp-content/uploads/2009/04/710531225433254jpg.jpeg" rel="shadowbox[post-13];player=img;"><img src="http://kernme.org/wp-content/uploads/2009/04/710531225433254jpg-290x300.jpg" alt="Final Mock Up" title="Final Mock Up" width="290" height="300" class="size-medium wp-image-208" /></a><br />
<a href="http://kernme.org/wp-content/uploads/2009/04/710531225433338jpg.jpeg" rel="shadowbox[post-13];player=img;"><img src="http://kernme.org/wp-content/uploads/2009/04/710531225433338jpg-291x300.jpg" alt="Final Mock Up" title="Final Mock Up" width="291" height="300" class="size-medium wp-image-209" /></a></p>
<h4>Design Direction</h4>
<p>These mockups whittled down the fine points of all the features the department did and didn&#8217;t want on their site. They kept bringing up Yale&#8217;s site and how they wanted to mimic their level of professionalism, so I added a few things, like an images slide show, high-end typography and scripts like <a href="http://jquery.com/demo/thickbox/">thickbox</a> for images and subpages. These mockups are still in illustrator, but after we decide on a look for a page I don&#8217;t stay too far from the original design.</p>
<p><a href="http://kernme.org/wp-content/uploads/2009/04/710531225437724.png" rel="shadowbox[post-13];player=img;"><img src="http://kernme.org/wp-content/uploads/2009/04/710531225437724-300x187.png" alt="Built Out" title="Built Out" width="300" height="187" class="size-medium wp-image-210" /></a><br />
<a href="http://kernme.org/wp-content/uploads/2009/04/710531225437936.png" rel="shadowbox[post-13];player=img;"><img src="http://kernme.org/wp-content/uploads/2009/04/710531225437936-300x188.png" alt="Thickbox Example" title="Thickbox Example" width="300" height="188" class="size-medium wp-image-211" /></a><br />
<a href="http://kernme.org/wp-content/uploads/2009/04/710531225438005.png" rel="shadowbox[post-13];player=img;"><img src="http://kernme.org/wp-content/uploads/2009/04/710531225438005-300x188.png" alt="Built Out Faculty Page" title="Built Out Faculty Page" width="300" height="188" class="size-medium wp-image-212" /></a><br />
<a href="http://kernme.org/wp-content/uploads/2009/04/710531225438025.png" rel="shadowbox[post-13];player=img;"><img src="http://kernme.org/wp-content/uploads/2009/04/710531225438025-300x188.png" alt="Faculty Thickbox" title="Faculty Thickbox" width="300" height="188" class="size-medium wp-image-213" /></a></p>
<h4>The CSS</h4>
<p>The end product turned out to be a lot more detailed than I had anticipated. I&#8217;ve never used so many typographically specific code. The advantage is that it&#8217;s really beautiful because of those small details. The first screen shot captures the page, the second captures a Thickbox detail. The next two follow the same pattern, just with the faculty page.</p>
<p><a href="http://www.vcu.edu/arts/arthistory/dept/"><s>See for yourself.</s></a> &#8211; My design is no longer being used.<br />
<a href="http://www.behance.net/Gallery/VCU-Department-of-Art-History/139254">VCU Art History Department on Behance.net</a></p>
]]></content:encoded>
			<wfw:commentRss>http://kernme.org/portfolio/st-edward-epiphany-school/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
	</channel>
</rss>
