<?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; full site design</title>
	<atom:link href="http://kernme.org/tag/full-site-design/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>Common Groundz Cafe</title>
		<link>http://kernme.org/portfolio/common-groundz-cafe/</link>
		<comments>http://kernme.org/portfolio/common-groundz-cafe/#comments</comments>
		<pubDate>Fri, 03 Apr 2009 04:19:34 +0000</pubDate>
		<dc:creator>admin</dc:creator>
				<category><![CDATA[Portfolio]]></category>
		<category><![CDATA[experimental typography]]></category>
		<category><![CDATA[full site design]]></category>
		<category><![CDATA[identity design]]></category>
		<category><![CDATA[print design]]></category>
		<category><![CDATA[pro bono]]></category>

		<guid isPermaLink="false">http://localhost:8888/kernmeWP/?p=17</guid>
		<description><![CDATA[2008 Common Groundz was my home for more hours out of the day than my own house. When they first opened I was so excited there was a big, accommodating coffee shop right next to my house that I literally did my best to stay from opening to closing. Eventually the owners and I developed [...]]]></description>
			<content:encoded><![CDATA[<h3>2008</h3>
<p><img src="/wp-content/themes/thematic/images/ai.gif" alt="illustrator" /><br />
<img src="/wp-content/themes/thematic/images/id.gif" alt="indesign" /><br />
<span id="more-17"></span></p>
<p>Common Groundz was my home for more hours out of the day than my own house. When they first opened I was so excited there was a big, accommodating coffee shop right next to my house that I literally did my best to stay from opening to closing. Eventually the owners and I developed a relationship with one another and we started bartering services. I designed this identity system to represent the modern interior, simple food and quirky attitude you get as soon as you walk in the door.</p>
<p><a href="/wp-content/uploads/2009/04/logo-compilation.jpg" rel="shadowbox[post-17];player=img;" ><img class="alignnone size-medium wp-image-185" title="Sketches digitized" src="/wp-content/uploads/2009/04/logo-compilation-300x187.jpg" alt="Sketches digitized" width="300" height="187" /></a></p>
<p>Above, you can see the variety of sketches that were reproduced in Illustrator.</p>
<p>In this case it was important to find a type face that matched the atmosphere. The guys, aka the owners of Common Groundz, informed me they wanted the logotype to be the primary form of communication. </p>
<p><a href="http://kernme.org/wp-content/uploads/2009/04/logo-v11.jpg" rel="shadowbox[post-17];player=img;" ><img src="http://kernme.org/wp-content/uploads/2009/04/logo-v11-300x41.jpg" alt="Logotype" title="logo-v1" width="300" height="41" class="size-medium wp-image-158" /></a></p>
<h4>The Type</h4>
<p><a href="http://new.myfonts.com/fonts/australiantype/halvorsen/">Halvorsen Extra Bold</a> by The Australian Type Foundry was the font of choice because of its clean lines, modern feel and barely-noticeable quirks. Instead of going with black on white, as pictured above, I decided a nice flat black on white would make the design feel more professional, as pictured below.</p>
<p><a href="http://kernme.org/wp-content/uploads/2009/04/logo-v31.jpg" rel="shadowbox[post-17];player=img;" ><img src="http://kernme.org/wp-content/uploads/2009/04/logo-v31-300x63.jpg" alt="logotype2" title="Logotype 2" width="300" height="63" class="size-medium wp-image-160" /></a><br />
<a href="http://kernme.org/wp-content/uploads/2009/04/logo-v41.jpg" rel="shadowbox[post-17];player=img;" ><img src="http://kernme.org/wp-content/uploads/2009/04/logo-v41-300x291.jpg" alt="Fourth Rendition" title="logo-v4" width="300" height="291" class="size-medium wp-image-161" /></a></p>
<h4>The Mark</h4>
<p>The mark for Common Groundz was definitely the hardest part. How do you pull in all the experiences you have at a coffee shop and encase it in one image? I went back to the roots. Common Groundz was originally established as a place for recovering addicts to come and enjoy away from life&#8217;s temptations. I wanted to show it was a place of healing, unity and recovery. The problem was every mark I came up with did not convey the idea effectively.</p>
<p><a href="http://kernme.org/wp-content/uploads/2009/04/logo-v21.jpg" rel="shadowbox[post-17];player=img;" ><img src="http://kernme.org/wp-content/uploads/2009/04/logo-v21-300x198.jpg" alt="Initial Sketch" title="logo-v5" width="300" height="198" class="size-medium wp-image-159" /></a></p>
<h4>The Result</h4>
<p>The final product was nice and simple. Combine the C and G to form a coffee mug. Don&#8217;t make it too obvious. Make sure it reads &#8220;coffee mug&#8221; first and &#8220;CG&#8221; after a second. The image above was the first sketch of the idea. The image below is the final draft.</p>
<p><a href="http://kernme.org/wp-content/uploads/2009/04/logo-v51.jpg" rel="shadowbox[post-17];player=img;" ><img src="http://kernme.org/wp-content/uploads/2009/04/logo-v51-300x200.jpg" alt="Final Logo" title="Final Logo" width="300" height="200" class="size-medium wp-image-162" /></a></p>
<h4>Initial Collateral</h4>
<p>The initial identity system Common Groundz had set up used Ambient, a free, widely available typeface. Before I finished the identity system, I was asked to do an ad for <a href="http://www.rvamag.com">RVA magazine</a> for Common Groundz. The below image is the result of using their identity system with RVA&#8217;s aesthetic.</p>
<p><a href="http://kernme.org/wp-content/uploads/2009/04/cg-ad.jpg" rel="shadowbox[post-17];player=img;" ><img src="http://kernme.org/wp-content/uploads/2009/04/cg-ad-259x300.jpg" alt="RVA Ad" title="RVA Ad" width="259" height="300" class="size-medium wp-image-168" /></a></p>
<h4>Further Collateral</h4>
<p>After the identity system was complete I worked with the guys to produce some materials that could be used for promotions as well as in-store materials. Below you will see 4-up handbills, business cards, frequent flyer cards and free coffee cards.</p>
<p><a href="http://kernme.org/wp-content/uploads/2009/04/promotion-fliers.jpg" rel="shadowbox[post-17];player=img;" ><img src="http://kernme.org/wp-content/uploads/2009/04/promotion-fliers-231x300.jpg" alt="promotional fliers" title="promotional fliers" width="231" height="300" class="size-medium wp-image-169" /></a><br />
<a href="http://kernme.org/wp-content/uploads/2009/04/business-card-black.jpg" rel="shadowbox[post-17];player=img;" ><img src="http://kernme.org/wp-content/uploads/2009/04/business-card-black-300x176.jpg" alt="Black Business Card" title="Black Business Card" width="300" height="176" class="size-medium wp-image-171" /></a><br />
<a href="http://kernme.org/wp-content/uploads/2009/04/membershipcard3.jpg" rel="shadowbox[post-17];player=img;" ><img src="http://kernme.org/wp-content/uploads/2009/04/membershipcard3.jpg" alt="Membership Card" title="Membership Card" width="252" height="144" class="size-full wp-image-172" /></a></p>
<p><a href="http://kernme.org/wp-content/uploads/2009/04/freecoffeecard.jpg" rel="shadowbox[post-17];player=img;" ><img src="http://kernme.org/wp-content/uploads/2009/04/freecoffeecard.jpg" alt="Free Coffee Card" title="Free Coffee Card" width="252" height="144" class="size-full wp-image-174" /></a></p>
<h4>Web Site</h4>
<p>Honestly, in this case there is not much to show or say. I built a web site for Common Groundz based on a free template from <a href="http://www.blogohblog.com/">Blog Oh! Blog</a>. I kept it updated with the latest information, but it did not go much further than that. They just needed something that was online, easy to update and had all their current information. I was happy to oblige.</p>
<p><a href="http://kernme.org/wp-content/uploads/2009/04/common-groundz-cafe.png" rel="shadowbox[post-17];player=img;" ><img src="http://kernme.org/wp-content/uploads/2009/04/common-groundz-cafe-90x300.png" alt="CommonGroundzCafe.com" title="CommonGroundzCafe.com" width="90" height="300" class="size-medium wp-image-175" /></a></p>
<h4>Conclusion</h4>
<p>This was a great project to work on because the owners trusted me enough to let me have some freedom to explore some different options. After finalizing the design of the identity system I merely had to keep the printing in their budget.</p>
<p>Despite all of this, Common Groundz has decided to close their doors in May 2009. They will be sorely missed as they provided companionship and coffee of which there is no equal. I wish Mark and Scott well in their endeavors as they move forward. I would also like to congratulate Heather and Scott on <em>finally</em> getting engaged. <br />
<a href="http://www.behance.net/Gallery/Common-Groundz-Cafe-Identity/142258">Common Groundz on Behance.net</a>
</p>
<p><a href="http://kernme.org/wp-content/uploads/2009/04/full-logo-text.jpg" rel="shadowbox[post-17];player=img;" ><img src="http://kernme.org/wp-content/uploads/2009/04/full-logo-text-300x38.jpg" alt="Full System" title="Full System" width="300" height="38" class="size-medium wp-image-177" /></a></p>
]]></content:encoded>
			<wfw:commentRss>http://kernme.org/portfolio/common-groundz-cafe/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>The Meade Law Firm</title>
		<link>http://kernme.org/portfolio/the-meade-law-firm/</link>
		<comments>http://kernme.org/portfolio/the-meade-law-firm/#comments</comments>
		<pubDate>Fri, 03 Apr 2009 04:18:40 +0000</pubDate>
		<dc:creator>admin</dc:creator>
				<category><![CDATA[Portfolio]]></category>
		<category><![CDATA[freelance]]></category>
		<category><![CDATA[full site design]]></category>
		<category><![CDATA[grid systems]]></category>
		<category><![CDATA[information design]]></category>

		<guid isPermaLink="false">http://localhost:8888/kernmeWP/?p=15</guid>
		<description><![CDATA[2009 Mr. Meade approached me through the head of the Graphic Design department. He requested a unique website that would knock the other law firm websites out of the water, but also did not want to pay an arm and a leg for a web design firm. Most of the other law sites were all [...]]]></description>
			<content:encoded><![CDATA[<h3>2009</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" /><br />
<img src="/wp-content/themes/thematic/images/fl.gif" alt="flash" /><img src="/wp-content/themes/thematic/images/xhtml.gif" alt="xHTML" /><br />
<span id="more-15"></span><br />
<a href="http://kernme.org/wp-content/uploads/2009/04/7105312372026441.png" rel="shadowbox[post-15];player=img;"><img src="http://kernme.org/wp-content/uploads/2009/04/7105312372026441.png" alt="Meade Law Firm Logo" title="Meade Law Firm Logo" width="187" height="82" class="size-full wp-image-191" /></a></p>
<p>Mr. Meade approached me through the head of the Graphic Design department. He requested a unique website that would knock the other law firm websites out of the water, but also did not want to pay an arm and a leg for a web design firm. Most of the other law sites were all designed and maintained by one company. As a result, they all looked exactly alike.</p>
<p><a href="http://kernme.org/wp-content/uploads/2009/04/710531237201377jpg.jpeg" rel="shadowbox[post-15];player=img;"><img src="http://kernme.org/wp-content/uploads/2009/04/710531237201377jpg-300x153.jpg" alt="Wireframe" title="Wireframe" width="300" height="153" class="size-medium wp-image-192" /></a></p>
<p>The above image is the original wireframe I brought to the table. I wanted to try and fit all the pages into the three column format, but in the end it didn&#8217;t work out. The home page fit very nicely into this format, though.</p>
<p><a href="http://kernme.org/wp-content/uploads/2009/04/format2.jpg" rel="shadowbox[post-15];player=img;"><img src="http://kernme.org/wp-content/uploads/2009/04/format2-300x288.jpg" alt="First Draft" title="First Draft" width="300" height="288" class="size-medium wp-image-194" /></a></p>
<p>The mock up pictured above was the first draft of the site. Mr. Meade explained to me he wanted the site to be clean and professional with large pictures, well-organized content and quick ways to get in contact with The Meade Law Firm. I was tasked with placing all the content on the home page without it looking overcrowded and messy. I employed the grid mentioned earlier and kept to strict rules about where content should and shouldn&#8217;t be. I offered two different versions of the site, one red and one white. The red page was widely accepted because it was bold without being too overpowering.</p>
<p><a href="http://kernme.org/wp-content/uploads/2009/04/710531237201595jpg.jpeg" rel="shadowbox[post-15];player=img;"><img src="http://kernme.org/wp-content/uploads/2009/04/710531237201595jpg-300x237.jpg" alt="Second Draft" title="Second Draft" width="300" height="237" class="size-medium wp-image-193" /></a></p>
<p>The mock up pictured above is the design we finally all agreed upon. It wasn&#8217;t my first choice, but I&#8217;m still happy with the way it turned out. A few things changed in the way the main points of interest were presented, but I think this option is just as viable as the previous instance.</p>
<p><a href="http://kernme.org/wp-content/uploads/2009/04/710531237201732jpg.jpeg" rel="shadowbox[post-15];player=img;"><img src="http://kernme.org/wp-content/uploads/2009/04/710531237201732jpg-272x300.jpg" alt="Web Site Capture" title="Web Site Capture" width="272" height="300" class="size-medium wp-image-195" /></a></p>
<p>The final site design can be found at <a href="http://www.themeadelawfirm.com">http://www.themeadelawfirm.com</a> and looks much the same as the image above. The biggest hang up with this design was the compatibility with older versions of Internet Explorer and the overlays of content above Flash. In the end, it all worked out. Mr. Meade is very happy with the result.</p>
<p>During the process of designing this site I experimented with <a href="http://jquery.com/">jQuery</a>, CSS 3 font embedding, multi-column paragraph layouts, <a href="http://www.blueprintcss.org/">Blueprint CSS</a> and the finer points of z-indexes.<br />
<a href="http://www.behance.net/Gallery/The-Meade-Law-Firm/197102">The Meade Law Firm on Behance.net</a></p>
]]></content:encoded>
			<wfw:commentRss>http://kernme.org/portfolio/the-meade-law-firm/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<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>
