<?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>Red Graffix Blog &#187; web design</title>
	<atom:link href="http://www.redgraffix.com/blog/tag/web-design/feed/" rel="self" type="application/rss+xml" />
	<link>http://www.redgraffix.com/blog</link>
	<description>Blogging on graphic design and web development from Red Graffix</description>
	<lastBuildDate>Tue, 10 Jan 2012 12:29:23 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.3.1</generator>
		<item>
		<title>Don&#8217;t Forget your Audience</title>
		<link>http://www.redgraffix.com/blog/2010/02/22/dont-forget-your-audience/</link>
		<comments>http://www.redgraffix.com/blog/2010/02/22/dont-forget-your-audience/#comments</comments>
		<pubDate>Mon, 22 Feb 2010 17:06:59 +0000</pubDate>
		<dc:creator>jason</dc:creator>
				<category><![CDATA[Notes]]></category>
		<category><![CDATA[projets]]></category>
		<category><![CDATA[web design]]></category>

		<guid isPermaLink="false">http://redgraffix.com/blog/?p=275</guid>
		<description><![CDATA[I recently started a project for a jewelry artist. Basically a portfolio site with events, a bio, and a thumbnail gallery.I knew the majority of her visitors wouldn't be very tech savvy, but I may have still over estimated their abilities. The site has a page with a thumbnail gallery of her work, you click [...]]]></description>
			<content:encoded><![CDATA[<img src="http://redgraffix.com/blog/wp-content/uploads/2010/02/audience-150x150.jpg" alt="audience" title="audience" width="150" height="150" class="alignright size-thumbnail wp-image-276" /><p>I recently started a project for a jewelry artist. Basically a portfolio site with events, a bio, and a thumbnail gallery.</p><p>I knew the majority of her visitors wouldn't be very tech savvy, but I may have still over estimated their abilities. The site has a page with a thumbnail gallery of her work, you click a thumbnail and through jquery the photo enlarges to a full view. Unfortunantly the client came to me and said <span id="more-275"></span>many of her friends visited the site and couldn't figure out why the pictures of her art were so small and or cutoff. What was happening was they didn't know to click on a thumbnail to make it bigger.</p><p>I figured most people would see a grouping of small photos in the context of a gallery page and realize they are thumbnails and you can click them to make them big. I mean everyone knows what a thumbnail is on the web and what to do when you see one, right?</p><p>Wrong. We can't assume people have even close to same level of comfort on the web as we do. This was a bit of a wake up call to keep in mind those who have zero level of web understanding.</p> <p>I fixed this simply by adding a line of text that says Click image to enlarge photo. It may seem silly to have to state that, but some people may not know. Designing for the web, always keep the audience in mind and assume they don't know a thing about the web.</p>]]></content:encoded>
			<wfw:commentRss>http://www.redgraffix.com/blog/2010/02/22/dont-forget-your-audience/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Rounded Box with Gradient in CSS</title>
		<link>http://www.redgraffix.com/blog/2010/02/20/rounded-box-with-gradient-in-css/</link>
		<comments>http://www.redgraffix.com/blog/2010/02/20/rounded-box-with-gradient-in-css/#comments</comments>
		<pubDate>Sat, 20 Feb 2010 17:04:19 +0000</pubDate>
		<dc:creator>jason</dc:creator>
				<category><![CDATA[CSS]]></category>
		<category><![CDATA[Tutorial]]></category>
		<category><![CDATA[Rounded Corners]]></category>
		<category><![CDATA[web design]]></category>

		<guid isPermaLink="false">http://redgraffix.com/blog/?p=263</guid>
		<description><![CDATA[Rounded edges are naturally easier on the eye and give a calm flowing feel. They are in use on so many websites and can be assembled hundreds of ways. This is just one way to create this visual effect.First things first, you'll need some kind of image editing software. I prefer Adobe Illustrator cs4 and [...]]]></description>
			<content:encoded><![CDATA[<img src="http://redgraffix.com/blog/wp-content/uploads/2010/02/round12-150x64.gif" alt="Rounded Box" title="round1" width="150" height="150" class="alignleft" /><p>Rounded edges are naturally easier on the eye and give a calm flowing feel. They are in use on so many websites and can be assembled hundreds of ways. This is just one way to create this visual effect.</p><p>First things first, you'll need some kind of image editing <span id="more-263"></span>software. I prefer Adobe Illustrator cs4 and Adobe Photoshop cs4 to create graphic elements.  Make a rounded box to the width and minimum height that you need. Make sure the gradient starts above the corner and below the top corners. Also keep in mind the the Hexidecimal color code for you top gradient color and your border.</p><p>Here is a 200 pixel wide box with the top gradient color &#8220; #ebebeb &#8221; and a 1 pixel border that is &#8220; #7f7e77 &#8221;.</p>
<img src="http://redgraffix.com/blog/wp-content/uploads/2010/02/round12.gif" alt="Rounded Box" title="round1" width="200" height="64" class="alignnone size-full wp-image-267" />
<p> From there Slice it up into 3 sections. Make sure You have a solid color on the top where the gradient ends.</p>
<img src="http://redgraffix.com/blog/wp-content/uploads/2010/02/rounded2.gif" alt="Slice the rounded box into 3 sections" title="rounded2" width="200" height="102" class="alignnone size-full wp-image-265" />
<img src="http://redgraffix.com/blog/wp-content/uploads/2010/02/round3.gif" alt="1 pixel wide section of middle piece" title="round3" width="71" height="102" class="alignleft size-full wp-image-268" />
<p>Take the middle section and clip it down to 1 pixel wide. This is all you need because it will tile across the box</p><p>Now that you have these 3 peices save them as them as a GIF or PNG with transparency turned on, or make sure the background behind the rounded edge matches the background that the rounded box will go on.Be sure to keep in mind optimizing images for the web, I'll save that for another day.</p><p>Put the pieces in your image folder for all your site pieces on your server. Then you need to create the html for the box on your webpage.</p>
<code>&lt;div class="boxtop"&gt; &lt;/div&gt;</code>
<code>&lt;div class="boxcontent"&gt;  whatever you want in the box goes here &lt;/div&gt;</code>
<code>&lt;div class="boxbottom"&gt; &lt;/div&gt;</code>
<p>Easy enough. Now create an external style sheet that will contain this</p>
<code>.boxtop &#123;<br/>
background-image:url(images/posttop.gif);<br/>
height:6px;<br/>
position:relative;<br/>
width:200px<br/>
&#125;</code>
<p>This is the top of the box, we declare the exact size of the image that is the box top, and then place the image in the that area</p>
<code>.boxcontent &#123;<br/>
background-color:#ebebeb;<br/>
background-image:url(images/postbody.gif);<br/>
background-position:left bottom;<br/>
background-repeat:repeat-x;<br/>
border-left-color:#7f7e77;<br/>
border-left-style:solid;<br/>
border-left-width:1px;<br/>
border-right-color:#7f7e77;<br/>
border-right-style:solid;<br/>
border-right-width:1px;<br/>
position:relative;<br/>
width:200px;<br/>
&#125;</code>
<p>Here we create the center of the box. It can expand vertically, while the gradient image tiles across the bottom of the container. Then we put a border only on the sides, to match the border that goes around our curved corner pieces. The background color of this box matches the background color of the top rounded corner image. </p>
<code>.boxbottom &#123;<br/>
background-image:url(images/postbottom.gif);<br/>
background-repeat:no-repeat;<br/>
height:6px;<br/>
position:relative;<br/>
width:200px<br/>
&#125;</code>
<p>This part is just like the top. It's just a box that has the bottom rounded corners and buts up to the content box.</p>
<p>I should also mention it would be good to find a CSS reset code snippet and use that in your style sheet.  Just do a google search for css reset, Eric Myers has one I use all the time. </p><p>Basically think of css like putting together a puzzle. You make these little odd pieces that don't make sense on their own, but when put together they make a seamless picture. Also remember things like picture format and size, and as you understand css more use shorthand to compress the file sizes down even more. When using images and external style sheets, make sure to point to the correct places these files are stored. The biggest problem I see fellow students having is linking to the correct spot they stored files on their server.</p><p>I'm sure someone out there has a better way to make a rounded box, or this particular usage may not be appropriate in your design. The box only expands up and down, not left and right. But it works well in my site right here.</p>]]></content:encoded>
			<wfw:commentRss>http://www.redgraffix.com/blog/2010/02/20/rounded-box-with-gradient-in-css/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Working For Free</title>
		<link>http://www.redgraffix.com/blog/2010/01/12/working-for-free/</link>
		<comments>http://www.redgraffix.com/blog/2010/01/12/working-for-free/#comments</comments>
		<pubDate>Wed, 13 Jan 2010 02:36:59 +0000</pubDate>
		<dc:creator>jason</dc:creator>
				<category><![CDATA[Notes]]></category>
		<category><![CDATA[finding work]]></category>
		<category><![CDATA[freelance]]></category>
		<category><![CDATA[getting paid]]></category>
		<category><![CDATA[non-profit]]></category>
		<category><![CDATA[web design]]></category>

		<guid isPermaLink="false">http://redgraffix.com/blog/?p=177</guid>
		<description><![CDATA[Just getting started in any career field can be very difficult. Employers are looking for individuals with experience, Clients want someone who has a firm grasp of the job, so on and so forth. Where does one start? This is the predicament I'm in right now. I'm finishing up my degree in interactive media and [...]]]></description>
			<content:encoded><![CDATA[<img src="http://redgraffix.com/blog/wp-content/uploads/2010/01/poor-300x189.gif" alt="" title="poor" width="150px" height="150px" class="alignleft size-medium wp-image-178" /><p>Just getting started in any career field can be very difficult. Employers are looking for individuals with experience, Clients want someone who has a firm grasp of the job, so on and so forth. Where does one start? This is the predicament I'm in right now. I'm finishing up my degree in interactive media and am ready to jump head first into designing websites, developing online content, and just getting going in this career field.</p> <span id="more-177"></span>
<p>Unfortunately the job search is going poorly to say the least and as far as finding freelance, nothings biting. I'm passionate about web development and feel like I know the business enough to do a great job if given a chance. But all that doesn't impress potential clients or employers. They want to see someone who has been around and done the job for awhile. </p>
<p>So I've decided to gain the experience, sans the pay. I've started work for a nonprofit organization building their site. They can't offer any money, but I can gain valuable experience and get my name out there as someone who can do a great job. Not only that, I'm doing something worthwhile and helping a good cause, one can always feel good about that. </p>
<p>The idea here is to do professional work, expand my portfolio, and prove I'm dedicated to my craft. When a possible client or employer wants to see work I've done I can show them live sites, in use, and professionally done. Not to mention, it's always a networking opportunity. Who knows who may find my work and decide they want to hire me for their project, and have the money to spend on it. I'm still out there looking for that amazing well paying job, but for the mean time working for free will have to do.</p>]]></content:encoded>
			<wfw:commentRss>http://www.redgraffix.com/blog/2010/01/12/working-for-free/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>stearns mock-up</title>
		<link>http://www.redgraffix.com/blog/2009/10/25/animation-2d-class-project-1/</link>
		<comments>http://www.redgraffix.com/blog/2009/10/25/animation-2d-class-project-1/#comments</comments>
		<pubDate>Sun, 25 Oct 2009 20:26:26 +0000</pubDate>
		<dc:creator>jason</dc:creator>
				<category><![CDATA[Projects]]></category>
		<category><![CDATA[school]]></category>
		<category><![CDATA[web design]]></category>
		<category><![CDATA[work flow]]></category>

		<guid isPermaLink="false">http://redgraffix.com/blog/?p=114</guid>
		<description><![CDATA[This is my mock up for a non-profit farm that my web 2 class is doing a site redesign for. It's a local historic farm in Parma, oh. I decided to go with the rustic look, I also thought a simple navigation would be good for the site's audience. I built this mock up using [...]]]></description>
			<content:encoded><![CDATA[<img src="http://redgraffix.com/blog/wp-content/uploads/2009/10/stearns1-300x300.gif" alt="stearns1" title="stearns1" width="150" height="150" class="alignleft" /><p>This is my mock up for a non-profit farm that my web 2 class is doing a site redesign for. It's a local historic farm in Parma, oh. I decided to go with the rustic look, I also thought a simple navigation would be good for the site's audience. I built this mock up using Adobe Fireworks cs4 and PhotoShop cs4</p>
<span id="more-114"></span>
<a href="http://redgraffix.com/blog/wp-content/uploads/2009/10/stearns1.gif"><img src="http://redgraffix.com/blog/wp-content/uploads/2009/10/stearns1-300x300.gif" alt="stearns1" title="stearns1" width="300" height="300" class="aligncenter size-medium wp-image-117" /></a>
]]></content:encoded>
			<wfw:commentRss>http://www.redgraffix.com/blog/2009/10/25/animation-2d-class-project-1/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Copyright and Contracts</title>
		<link>http://www.redgraffix.com/blog/2009/09/27/copyright-and-contracts/</link>
		<comments>http://www.redgraffix.com/blog/2009/09/27/copyright-and-contracts/#comments</comments>
		<pubDate>Sun, 27 Sep 2009 13:24:11 +0000</pubDate>
		<dc:creator>jason</dc:creator>
				<category><![CDATA[Notes]]></category>
		<category><![CDATA[school]]></category>
		<category><![CDATA[Tutorial]]></category>
		<category><![CDATA[web design]]></category>

		<guid isPermaLink="false">http://redgraffix.com/blog/?p=68</guid>
		<description><![CDATA[I looked into copyright laws concerning web designers and artists in general and I think my head might explode from reading too much legalese. But it seems to me, the best thing an artist can do is retain ownership of their art even if it is created for someone else. When we as designers create [...]]]></description>
			<content:encoded><![CDATA[<img class="alignleft size-medium wp-image-69" title="funny pictures of cats with captions" src="http://redgraffix.com/blog/wp-content/uploads/2009/09/funny-pictures-of-cats-with-captions-300x231.jpg" alt="funny pictures of cats with captions" width="150" height="150" /><p>I looked into copyright laws concerning web designers and artists in general and I think my head might explode from reading too much legalese. But it seems to me, the best thing an artist can do is retain ownership of their art even if it is created for someone else. When we as designers create a site or piece of art for a client, we should hold on to the copyright for said idea. This way if our idea becomes a billion dollar piece of branding that a company uses, we're entitled to a piece of the pie. Designing a site and elements for a site, web designers should keep ownership of almost everything such as php pages, javascript, pngs, etc. this <span id="more-68"></span>way we control our ideas and are compensated fairly for them.</p><p>
The best way to be clear about all this when dealing with a client is to draw up a contract. In the contract we must clearly state what we hold the rights to and what the client is paying for. I'm also finding out contracts should be as clear as possible and not omit the smallest detail.</p><p> I looked through several web design contracts and they have several themes in common. Some of the things which should be spelled out are who's hosting, who owns the pages, who's liable if there's a lawsuit, what are the clients or our responsibilities, timelines, and a big one pricing. If you don't state it the contract, you could get bit in the butt by it later.</p><p> Clients always seem to have different expectations when it comes to web design. They might think they're entitled to 15 revisions for a site before it costs them a penny, meanwhile as designers, that's hours and hours of work. Or clients might expect to own the pages of a site and think they can change our design and come up with something new, meanwhile our name is at the bottom of this hideous new design hurting our reputation. It's because of things like this contracts need to be drawn up, we can't do business with out them.</p><p>
Unless, it's a "for hire" situation. For Hire is basically when you work for a design house or development type company. They hire you as an employee, give you work and pay you, but they hold the copyrights. You're the employee and they're the boss so they get ownership. For hire, for clients is normally a bad idea. By giving all rights and ownership of your work to a client you could be severely limiting possible income. It seems to me, if the client wants you to sign over all rights, or work without a contract at all, you should run away from them, far and fast.</p><p>
So after spending much time pouring over legal documents and copyright law, I've come to the conclusion, keep your ideas your own. As artists we own our ideas and are entitled to be compensated for them. The best way to hold onto our ideas is with a contract. In the contract spell everything out clearly so there's no confusion, and finaly never do business without a contract because you could end up really getting burned.</p>]]></content:encoded>
			<wfw:commentRss>http://www.redgraffix.com/blog/2009/09/27/copyright-and-contracts/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
	</channel>
</rss>

