A good example is this photo of this lady sitting at the pool; when turned 90 degrees, it appears that she’s sitting on a ledge and there is a wall of water.

Unfortunately, there are people as well as other distractions in this photo that take away that wall of water sensation.

It’s always a fun hobby to take a cool photo like this and make it even better.

This is the original photo.

This is after editing.

Everything was done in Photoshop CS4 using masks, patch tool and healing brush as well as rotating a layer to make the lady’s head look as if she’s not struggling to keep still in water.

Here’s a side by side comparison.  What do you think?

Head on over to one of these handy lorem ipsum generation sites and you’ll get your dummy text.  So have it bookmarked and you’ll always have it close enough.  Plus you can generate based on number of paragraphs, words, bytes or lists.  Not bad as its pretty customizable but how custom does it need to be since its only dummy text.

So repeat visits to the lorem ipsum generator can be mitigated if you plan accordingly.  Open up a new text document and copy and paste all your lorem ipsum into this new text document and have it around handy so you can use it at any time.

Finally, one of the neater things I’ve found is this Photoshop CS4 Extension that adds an additional panel that generates lorem ipsum text.  This Lorem Ipsum Photoshop CS4 Extension is quite useful, integrated and is easily installed.

Perfect for those mock up theme designs that I do, day in and day out.  This one is definitely a time saver for me.

How do you get your dummy text?  Do you also use some sort of plugin for your programs?

I needed my fix of Kratos.

As Epic as it Gets

To sum up, God of War 3 is a video gaming masterpiece and pure adrenaline to play.  It continues the tradition of the original series in its delivery of fluid game play.  The visual spectacles and grand scale of it all just completely immerses you.  If you have never played one of the God of War games yet, I highly suggest it.

The background story is that you control Kratos, a spartan warrior, who has made a deal with the Gods to have omnipotent power.  The setting is in ancient times of Greek mythology with characters like Zeus, Poseidon, Athena, Pandora, Hercules, etc.  The environment is detailed and graphically stunning as each game scene can be considered high quality desktop background.

In terms of scale and how ambitious the game is, the excitement starts right at the beginning.  The pace is say full throttle the entire way I would say.  Each level as the story progresses is like an entire game where you face a grand boss fight one after another.  There is some platforming and puzzles involved, but I would say the focus on God of War 3 has been to replicate all the excitement you experienced in the previous two games and holding that excitement level all the way through.  Good job, Team Santa Monica!

The Goods

• Intense battles with fluid game play mechanics expected from the God of War series.
• Diverse weaponry from the diverse Blades of Exile to three new weapons, Hercules Cestus, Claws of Hades and the Nemesis Whip.  You are able to upgrade each weapon to unlock new combos and more damage.  There is also ability to swap weapons on the fly to get some intense combos during combat.
• Boss fights are insane.  Not the difficulty on Normal mode but it does take awhile to get their patter down.  It is the delivery of these Boss fights that make it memorable because at times, these Boss fights are the level itself.
• Graphics and audio totally grabs you into the game especially if you play in 1080p HD.  Minor slowdown during movie scene transition but its negligible.
• Unlockables keeps you wanting to repeat the game and adds to the replay value.  From trophies for bragging rights to the Challenge of Olympus.  There are also video documentaries on the game creation.  Good bonus content.

The Bads

Can’t really pick on too many wrongs with the game except for a few items.

• There will be several instances when you use the Wings of Icarus to fly and the level becomes like a mini game where you control Kratos through a tunnel in a superman viewpoint.  You have to dodge falling rocks or fly through small holes.  I found these levels frustrating because you are not able to attack or defend but rely only on dodging.  This is fine but when you get hit, you set yourself to take multiple hit damages.  You die rather quickly if you aren’t able to navigate through.
• Camera angles cannot be controlled so there are instances where you are extremely far from the action or at angle where you do not know there is a gaping hole awaiting for you to fall and die.
• Game setting is mostly darker than what I’d like; so you might need to turn up the brightness a bit because it makes navigating through the platform levels more easier.  Combine that with the camera angles mentioned above; its an issue for me.
• The game should have ran 1080p natively without toggling settings in the PS3.  Sony needs to fix the upscale issue because it is a hassle to de-select 720p and 1080i to force upscale for games and then reselect them when I pop in a game that does not support 1080p.  Its both game developers and Sony’s job to fix this.

Overall, this game is bad ass!  Yes, some may say it is too gruesome and the treatment of women in the game is a bit over extreme.  But its a fun game to play and great experience.  The story wraps up at the end but I just get the feeling we might see Kratos again, perhaps, a prequel?

Kratos as a spartan without the power of the gods but still kicking ass on mortals.  What a concept.

I miss the days actually excited to go to my mailbox and see the famous Netflix envelopes.  I would already know what movie is arriving and that is the reason I chose Netflix over Blockbuster.

Unfortunately, these days, the movies arriving in the Netflix envelope is not exactly on my top ten list of movies.  Movies in my top ten are usually new releases in Blu-ray format.

That’s why I pay that extra $1 or $2 to get Blu-ray.  It is such disappointment now because either Netflix has a short supply of actual discs available to ship out or they are holding back on new releases.

My top 10 list (its more like top 20 movies) I would like to see that are new release and in Blu-ray have been sitting in my queue since last year with a “Long Wait” status.  Even the “Short Wait” status movies are not arriving as quickly as before.

Decision to Downgrade

So I made the decision, to not cancel Netflix but to downgrade my account from the 3 disc to the most basic single disc with unlimited streaming for $9.99 a month.

The reason?  I’m not getting the 3 movies I actually want and most of the time I am just streaming.  Netflix has been so focused on changing its business platform from DVD/Blu-ray rental to streaming content.

It’s nice but content selection is still sparse.  I do hope they will either provide better service for their disc service where the queue wait time is shorter or have a more complete selection of streaming movies and television shows.

At this point, I’m not quite ready to cancel Netflix but if once I’m done watching most shows or movies; there’s not point.  Especially if some of the shows are available at Hulu, YouTube or network television sites.

The Good

As always from the writers, content is key.  This book touches upon most topics that are relevant for any designer focused on the web as its medium.  The topics range from taking full advantage of CSS for layouts to typography options as well as color theory.  It covers on the fundamentals of user interface design and usability concerns that may not be something we may care as much as typical graphic artists.

Besides the graphical topics it covers, the book also covers the operations and business aspects that one may neglect.  From learning pieces of good coding for optimizing SEO to optimizing performance on websites.  There is also references to utilizing the free analytical tools to track metrics and conversion rates.  Finally, it teaches you to be aware of marketing and branding.

Another highlight subject is the insight Q&A from the authors.  This definitely provided ample rations of food for thinking.  It ends with a story of the Smashing Magazine.

Its a good amount of tips and insights that you may not gain from another book.  In addition, there are the references for you to further develop and learn on the topics the books chapters touches on.

The Bad

I can’t really fault any of the content in the book.  After all, its written by some of the leading minds in this industry.  However, I would have expected the book itself to be much better constructed.

The book is smaller than what I’d like.  I mean, the content is colorful full of graphics, screen shots and examples, it just begs to be done in a proper format like a coffee  table book.

The binding of the book, as others have reviewed, is horribly constructed as you have to be extremely careful when reading or else the pages may come apart.  Add to the problem is that the page layouts are tight where padding is minimal for the amount of content crammed in.  It makes reading the content much more difficult without opening the book up.

There is definitely some errata as well in terms of spelling and reference.  Particularly of note, in the chapter on usability, they reference a website that is clearly of the Korean language but state it as Chinese.  Small error but being international; they need to recognize this.  Korean and Chinese writing is completely different.

Finally, this book took way too long to arrive.  I pre-ordered in August and hoped it would have arrived in October.  It did get to me until December, in time for Christmas.  But had I known, I could have probably picked up all the content in the book from other resources already.

Looking Forward to the Next Installment

I am fairly critical but I do look forward to the next installment from Smashing Magazine.  I hope Smashing Book Vol. 2 will be even better; from content to presentation to construction.  It’s been three months since I’ve received the book and just about the same amount of time since I’ve read through.  I guess, like their shipment problems, it just took me awhile to get to actually putting up my thoughts on book.

***I hear the book binding issue has been resolved, unfortunately, my book has not been fixed.  Perhaps they can send me a electronic .pdf version so I can actually use this wonderful book as a reference manual.***

The problem is, displaying recent posts and recent comments is not as simple as just using a WordPress template tag found in WordPress Codex.  Instead, you will need to get creative and create a bit of custom code to grab the data from the database.

There are definitely some common code snippets used for WordPress but I found the ability to control and display recent posts and recent comments to be what I need most.

Displaying Most Recent Posts

There are several ways to display the most recent posts from just using the wp_get_archives tag to query_posts tag which involves using the WordPress loop.  There is a more customized solution that I found from Dino Latoga and its as follows:

<?php
$recentposts = get_posts('numberposts=12&category=4');
	foreach ($recentposts as $post) :
	setup_postdata($post);
?>
<li><a href="<?php the_permalink() ?>"><?php the_title(); ?></a></li>
<?php endforeach; ?>

Displaying Most Recent Comments

Also from Dino’s post on commonly used WordPress code snippets is being able to display recent comments.  Unlike displaying most recent posts, it doesn’t necessarily uses any WordPress tags.  Instead, you are actually querying your database to grab the necessary information you want to be displayed.

Here is the code for displaying most recent comments:

<?php
global $wpdb;
$sql = "SELECT DISTINCT ID, post_title, post_password, comment_ID,
comment_post_ID, comment_author, comment_date_gmt, comment_approved,
comment_type,comment_author_url,
SUBSTRING(comment_content,1,30) AS com_excerpt
FROM $wpdb->comments
LEFT OUTER JOIN $wpdb->posts ON ($wpdb->comments.comment_post_ID =
$wpdb->posts.ID)
WHERE comment_approved = '1' AND comment_type = '' AND
post_password = ''
ORDER BY comment_date_gmt DESC
LIMIT 7";
$comments = $wpdb->get_results($sql);
$output = $pre_HTML;
$output .= "\n<ul>";
foreach ($comments as $comment) {
$output .= "\n<li>".strip_tags($comment->comment_author)
.": " . "<a href=\"" . get_permalink($comment->ID) .
"#comment-" . $comment->comment_ID . "\" title=\"on " .
$comment->post_title . "\">" . strip_tags($comment->com_excerpt)
."&hellip;</a></li>";
}
$output .= "\n</ul>";
$output .= $post_HTML;
echo $output;?>

There a tons of custom codes to make your WordPress installation that much more feature and content rich, but these two code snippets have helped me create a better user experience when combined with Tabbed Menu in the sidebar.

A quick snippet of the author’s information can help users relate to the author as well as help the author promote himself or herself.

Using the_author_meta tag to grab information

In WordPress, each registered user can fill out information about themselves in their profile.  This is found in the Dashboard under Users -> Your Profile.  Some of the meta information fields that are available by default are the following:

• Username
• First name
• Last name
• Nickname
• Email
• Website
• AIM
• Yahoo IM
• Jabber / Google Talk
• Biographical Info

By using the_author_meta tag in your single.php, you are able to pull the information regarding the author.  Of course, you will need all the strings that you can use with the_author_meta tag.  Here is a list of all the strings to use the_author_meta tag:

• user_login
• user_pass
• user_nicename
• user_email
• user_url
• user_registered
• user_activation_key
• user_status
• display_name
• nickname
• first_name
• last_name
• description
• jabber
• aim
• yim
• user_level
• user_firstname
• user_lastname
• user_description
• rich_editing
• comment_shortcuts
• admin_color
• plugins_per_page
• plugins_last_view
• ID

Course, you can read more about the_author_meta tag at WordPress Codex.

Sample Code Snippet of Adding Author Bio to the Post

A quick simple sample is to grab the author’s display name, bio information and website.

<div id="author">
<p>Written by: <?php the_author_meta('display_name'); ?></p>
<p>Quick Bio: <?php the_author_meta('user_description'); ?></p>
<p>Website: <a href="<?php the_author_meta('user_url'); ?>"><?php the_author_meta('user_url'); ?></a>
</div>

Adding the code above into your single.php after the loop, you will be able to display the author information.  You will need to style with CSS.

Adding Gravatar to the Author Bio

To further customize the author info, you may want to add an avatar.  Because gravatar is linked to your email and recognized by all WordPress installation, the only tag you need to grab your avatar icon is the following code:

<?php echo get_avatar (get_the_author_email(), '100'); ?>

The code snippet above is just a function.  Basically, you are calling the function get_avatar and the two parameters following is for the author’s email and the second is the size of the avatar.

Other Guides on Adding Author Bio Information

• Add an author’s bio to WordPress posts – Stranger in a Strange Land
• Displaying Author Pic and Bio in Your WordPress – Gabe Diaz

Tabbed Menu as the Solution

In looking how to save some onscreen real estate as well as providing a more slick interface for users to navigate for content on the site, designers can choose to create a tabbed menu.

In searching the internet, there were many solutions.  There are actually a couple of specific plugins for WordPress.  Although, it is easier to use a plugin, the widget based style is less customizable for my liking.

I found several resources on the tabbed menu mechanism and some required a lot of coding as well as using different javascript framework libraries to achieve such effect.

Implementing the Yahoo! TabView

In the end, I chose to use the method found on Rubiqube because it uses a trusted code source, Yahoo’s TabView.  Rubiqube does a good job of explaining implementation and reassures that this technique will work with WordPress.

Here are the steps I took to implement:

1. Go to http://developer.yahoo.com/yui/tabview/#start and read through the instructions.
2. You will need to paste the following code in the header part of header.php for the theme your working on.  This will allow your theme to load the necessary javascript for the tabbed view menu.

   <!-- Sam Skin CSS for TabView -->
   <link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.8.0r4/build/tabview/assets/skins/sam/tabview.css">
   
   <!-- JavaScript Dependencies for Tabview: -->
   <script src="http://yui.yahooapis.com/2.8.0r4/build/yahoo-dom-event/yahoo-dom-event.js"></script>
   <script src="http://yui.yahooapis.com/2.8.0r4/build/element/element-min.js"></script>
   
   <!-- OPTIONAL: Connection (required for dynamic loading of data) -->
   <script src="http://yui.yahooapis.com/2.8.0r4/build/connection/connection-min.js"></script>
   
   <!-- Source file for TabView -->
   <script src="http://yui.yahooapis.com/2.8.0r4/build/tabview/tabview-min.js"></script>

3. Add the HTML code into the location of where you desire the tabbed menu, this is most likely somewhere in your sidebar.php.

<div id="demo">
<ul>
<li><a href="#tab1"><em>Tab One Label</em></a></li>
<li><a href="#tab2"><em>Tab Two Label</em></a></li>
<li><a href="#tab3"><em>Tab Three Label</em></a></li>
</ul>
<div>
<div>
Tab One Content</div>
<div>
Tab Two Content</div>
<div>
Tab Three Content</div>
</div>
</div></pre>

<pre><div id="demo"><ul>	<li><a href="#tab1"><em>Tab One Label</em></a></li>	<li><a href="#tab2"><em>Tab Two Label</em></a></li>	<li><a href="#tab3"><em>Tab Three Label</em></a></li></ul><div><div>
Tab One Content</div><div>
Tab Two Content</div><div>
Tab Three Content</div></div></div>

4. Do not forget to activate by enabling the Yahoo TabView by calling the  script with the following:

<script type="text/javascript">
var myTabs = new YAHOO.widget.TabView("demo");
</script>

5. Finally, make sure the tabbed menu is loaded on the desired page and the effects are working.  You can now begin customizing the content to be loaded.  Just replace items in the HTML code markup.
6. Once you customize what you want in each tab which is just a <li> element, you can add the CSS classes to style it to your liking.  The CSS classes used to style the tabbed menu are the following:

   .yui-navset {
       background: #E8F4FD;
       padding: 5px 5px 3px 5px;
       margin-bottom: 35px;
   }
   .yui-nav li
   {
       list-style: none;
       float: left;
       margin-right: 2px;
       text-align: center;
       font-size: 90%;
       font-weight: bold;
   }
   .yui-nav li a
   {
       text-decoration:none;
       color: #005288;
       display: block;
       padding: 8px;
   }
   .yui-nav li.selected a {
       background: #FFFFFF;
   }
   .yui-nav li a:hover
   {
       color: #000;
   }
   .yui-content {
       background: #FFFFFF;
       clear: both;
   }
   .tab-list li {
       padding: 8px;
       border-bottom: 2px solid #E8F4FD;
   }

Simple enough, I was able to implement it after reading both articles and having a rough idea on how to style it.  It works easily enough and I will use this for future projects as well.

If your running WordPress, you’ll know that if you want to log into the admin dashboard, you have to type in the URL for the login page.  This can be inconvenient if you set up a social website where you want users to be able to login.

Sure, a link to the login page can be done, but that requires one extra click and loading of the page.

WPDesigner has a great snippet of code to add to your theme so users can login from the front page.

The Code

You can download the code from WPDesigner.  But here is a quick preview of the code:

	<li>
		<?php global $user_ID, $user_identity, $user_level ?>
		<?php if ( $user_ID ) : ?>
		<h2>Control panel</h2>
		<ul>
			<li>Identified as <strong><?php echo $user_identity ?></strong>.
			<ul>
				<li><a href="<?php bloginfo('url') ?>/wp-admin/">Dashboard</a></li>

				<?php if ( $user_level >= 1 ) : ?>
				<li><a href="<?php bloginfo('url') ?>/wp-admin/post-new.php">Write an article</a></li>
				<?php endif // $user_level >= 1 ?>

				<li><a href="<?php bloginfo('url') ?>/wp-admin/profile.php">Profile and personal options</a></li>
				<li><a href="<?php bloginfo('url') ?>/wp-login.php?action=logout&amp;redirect_to=<?php echo urlencode($_SERVER['REQUEST_URI']) ?>">Exit</a></li>
			</ul>
			</li>
		</ul>

		<?php elseif ( get_option('users_can_register') ) : ?>

		<h2>Identification</h2>
		<ul>
			<li>
			<form action="<?php bloginfo('url') ?>/wp-login.php" method="post">
				<p>
				<label for="log"><input type="text" name="log" id="log" value="<?php echo wp_specialchars(stripslashes($user_login), 1) ?>" size="22" /> User</label><br />
				<label for="pwd"><input type="password" name="pwd" id="pwd" size="22" /> Password</label><br />
				<input type="submit" name="submit" value="Send" />
				<label for="rememberme"><input name="rememberme" id="rememberme" type="checkbox" checked="checked" value="forever" /> Remember me</label><br />
				</p>
				<input type="hidden" name="redirect_to" value="<?php echo $_SERVER['REQUEST_URI']; ?>"/>
			</form>
			</li>

			<li><a href="<?php bloginfo('url') ?>/wp-register.php">Register</a></li>
			<li><a href="<?php bloginfo('url') ?>/wp-login.php?action=lostpassword">Recover password</a></li>
		</ul>

		<?php endif // get_option('users_can_register') ?>

	</li>

Just copy and paste the code above into your sidebar or any other desired location where you want the login form on your front page.  You can do some CSS to edit the appearance so it fits your theme’s design.

Being hosted on Bluehost meant that my primary domain resided in the root folder.  Any add-on domains were in their own sub folders or sub directories inside the root or public_html.  The downside to this is it keeps all the files to my primary domain unorganized in the root folder.

In order to have it organized, I wanted to have my primary domain folder reside in its own sub folder or sub directory.  I am not as comfortable in the server environment as my knowledge of working with the .htaccess file is limited.

I searched Bluehost knowledgebase as well as other sources and finally came up with a solution that would work.  It required modifying the .htaccess file. You needed to redirect any traffic hitting your domain name to the sub folder directory.

The code is as follows:

# Bluehost.com
# .htaccess main domain to subdirectory redirect
# Copy and paste the following code into the .htaccess file
# in the public_html folder of your hosting account
# make the changes to the file according to the instructions.
# Do not change this line.
RewriteEngine on
# Change yourdomain.com to be your main domain.
RewriteCond %{HTTP_HOST} ^(www.)?yourmaindomain.com$
# Change 'subdirectory' to be the directory you will use for your main domain.
RewriteCond %{REQUEST_URI} !^/subdirectory/
# Don't change this line.
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
# Change 'subdirectory' to be the directory you will use for your main domain.
RewriteRule ^(.*)$ /subdirectory/$1
# Change yourdomain.com to be your main domain again.
# Change 'subdirectory' to be the directory you will use for your main domain
# followed by / then the main file for your site, index.php, index.html, etc.
RewriteCond %{HTTP_HOST} ^(www.)?yourmaindomain.com$
RewriteRule ^(/)?$ subdirectory/index.php [L]

Once that was accomplished, I was able to have my files in a sub folder directory organized like the other add-on domains.

As a side note, since my website is using WordPress, it took a bit more delicate effort to get it working structurally.  One of the problems I had after the redirection to my .htaccess file is that WordPress kept rewriting my .htaccess file rendering the redirection code above useless whenever I updated the Permalink structure.

After hours of testing and trying to figure it out, I found my problem.  The solution is to make sure that once you have done the redirect code to your root .htaccess file, the WordPress Address (URI) and Blog Address (URI) both need to match.

For example, even though, my domain is http://yourdomain.com but the WordPress installation is located at http://yourdomain.com/subfolder, both WordPress Address and Blog Address URI’s need to point to the path of http://yourdomain.com.  I made the mistake of pointing my WordPress Address to http://yourdomain.com/subfolder causing a loop or an Internal 500 Server error.

Here are some additional resources for you if you are on Bluehost and also about to do what I just did.  This can save you lots of time, like 4 hours worth.

• Bluehost Knowledgebase
• Discussion and Solution at WebProWorld
• Another Bluehost Redirect Method

For my installation, I have it hosted on Bluehost.  Since I installed it in 2007, I was not aware of its capabilities at the time.  I had it in directories nested two levels deep and also had it pointing to a different subdomain, http://blog.designrjc.com.  This is not ideal for SEO and it kept organization chaotic.

I had previously moved a WordPress installation to a different location on the server so I have had experience, but that one was a bit more straight forward.

There are several methods to move or migrate your WordPress to different locations on your server but I believe this to be the easiest implementation.

1. Backup your WordPress installation by downloading the entire contents via FTP as well as backing up your database.  Just in case something goes wrong and you need to do a re-install.
2. Create a new folder at the location of the directory where you want it to be in.
3. Log into your WordPress website
4. Go to Adminstration -> Settings -> General panel.
5. Change the WordPress address (URI): to the new location path of where all your main core files will end up at.
6. Change the Blog address (URI): pointing to where the new location is at.  In most cases, this will match the previous box.
7. Move all your files to the new directory into the folder you just created.
8. Now test to see if you have successfully moved and migrated your WordPress to the new location.

There are several things to note after you migrate.

1. If you were using Permalinks you will need to log into your Dashboard and update the Permalink structure.
2. Images may be missing from posts because they are pointing to the old path.
   • Old Path – http://yourdomain.com/wordpress/blog/wp-content/uploads/
   • New Path – http://yourdomain.com/newwordpress/wp-content/uploads/

Good luck on moving your WordPress installation to a more ideal location that is easier for you to keep organized as well as being SEO friendly.

Here are some additional resources and guides to help you with this:

• Moving WordPress via WordPress Codex
• WordPress Codex – Changing the Site URL

One of the limiting factors of WordPress by default is that the included pagination for navigation is too simple.

The default WordPress pagination allows for “previous” and “next” hyperlinks only.  As you can imagine, without using the search function, it may take you some time to jump several pages.  Bonus:  If your blog has many articles and posts, the number of pages displayed can show the visitor how much you’ve actually written on a certain subject.

As a web designer focused on user interface and experience, I am not satisfied with the default.  Instead, I want better pagination for the website.  Thanks to WordPress’ the ability to support plugins, this task is made simpler than creating my own PHP functions.

WP-PageNavi plug created by Lester Chan is a plug-in used for easy implementation of page navigation.  Here is a look at the default WP-PageNavi WordPress plug-in for page navigation:

I won’t go into detail, but you can see that this method of page navigation is found across the internet on many websites.

Download WP-PageNavi

Installation and Styling of WP-PageNavi

1. Download WP-PageNavi or search for it through the WordPress Dashboard Plugins section
2. Upload the downloaded folder, “pagenavi” into your wp-contents/plugins folder or you can also automatically install from the Dashboard
3. Now activate the plugin
4. In order to use it in a theme, you will need to add the following code:

   <?php if(function_exists('wp_pagenavi')) {wp_pagenavi(); ?>
   

5. You can toggle the different settings in WordPress Dashboard found under Admin -> Options -> PageNavi
6. Make sure to click “Update Options” once your done

To style the page navigation to your liking, the file to edit is pagenavi-css.css found here:

/wp-content/plugins/pagenavi/pagenavi-css.css

Good luck on making your WordPress installaion custom!

In design, there are four fundamental principles that need to be followed.  These four rules are as follows:

• Contrast
• Repetition
• Alignment
• Proximity

If you browse to a website or pick up a magazine, you will notice that many successful designs follow these principles.  Once you familiarize yourself with these principles, you will begin to notice them in other components from the table of contents in a book your reading or the flier you just picked up at the local coffee shop.

Contrast and Repetition

Contrast is the state of being strikingly different between two objects, colors or textures.  In design, contrasting elements is how to make things stand out.  You use opposite colors such as a dark colored background with a light colored text.  By using opposite or contrasted colors, you will be able to compare these elements in such a way to emphasize their differences.  An example would be the chapter heading in the table of contents, the font may be larger and it is usually emphasized with bold lettering.

Repetition is to repeat elements consistently.  An example would be the navigation menu items for a website or table of contents in a book.  If the navigation menu items came in assorted sizes and colors, a user will have difficulty using the website because of inconsistencies.  In the case of the table of contents, if chapters or subjects were not distributed evenly, you would have a hard time finding exactly what you are looking for in a book.

The header and navigation use contrasting colors and navigation items are repeated for consistency.

Alignment and Proximity

Alignment is to arrange elements in correct or relative positions.  By using alignment you can line up text or images so that it is evenly distributed and easier to read.  Without alignment, every paragraph would be indented differently or placed in random locations throughout a page in a book or magazine article.    This principle goes with images as well.  Imagine an image gallery with images placed without order on a page and how difficult that would be.  A good example is when you are using forms, the information fields are typically aligned so it makes it easier for you to follow the form to fill it out.

Proximity is placing similar elements in relationship or space.  An example is like the contact information on a business card.  Typically, the address, telephone, fax and email information are in proximity to each other.  They are all components that make up the contact information area.  It would be difficult to read if the address is separated from telephone number and if each item were typed out with a different font and size.

The Discounts and Commitment boxes are in proximity with each other and all items are aligned to the left.

Conclusion

I’ve just barely introduced you to some basic design principles by explaining the importance of using contrast, repetition, alignment and proximity in design.  Whether you are doing print or web design, you will need to follow these rules to be successful.  To see some great examples and have a basic knowledge to build upon, I suggest reading Design Workshop by Robin Williams.

This week, Netflix announced that it will be available on the Nintendo Wii console as well and you can get your disc request now.

Awhile back, it just wasn’t as easy unless you hooked up your PC as a server and then fed to your consoles with a third party software.  The downside to this is network speed because you will be sending data to your PC and then sending it back to the router and then to the console of choice.  That overhauls the network extensively.

So if you are an owner of a Nintendo Wii or Sony Playstation 3 and a member of Netflix, you can now stream it on your consoles.  Now that is value added!

Links below to directly request your Netflix streaming disc:

Nintendo Wii Disc | Sony PS3 Disc

Last time I worked on a quick header banner for my friend for his auto parts website.  Since then, the company is taking a different direction on their focus as opposed to just selling auto parts.  Truth be told, I believe this is much better because selling auto parts pulled from dismantled autos is hard to maintain a live inventory and selling on eBay just eats away your margins.

The above is a mock up and concept derived on the fact that they are in fact recyclers.  Scrapping all parts of an automobile that is no longer operational from usable parts to straight scrap metal.

Originally, I always felt that when you think of auto dismantling or junkyards you associate to those car compactor machines, a baler.  Unfortunately, I could not find many images out there of such device and it did not make for a good logo.

Moving along, I decided to go in the direction of the recycling arrows in a triangular format.  The original mock up had a bit of an obtuse angle to the arrows wrapping through the letters of LPD but it did not appear evened out but it did have the effect I was going for.

These corners need to be cleaned up a bit but for a flat image, it definitely works in my opinion.  But as I kept drafting and working away in Illustrator to find a way to wrap the arrows around the letter in a more multidimensional method.  The end result is simply using arrows that appear three-dimensional that wrapped the letter P and D and extending the L in the front.  It almost appears that the arrows are making a sphere.

The arrows were a bit strong and overpowering and took away from the lettering.  I changed the color and opacity and used the car outline combined withe the arrowing and shifted the lettering to the right for this effect.

Then adding some drop shadow effect to it, the lettering will stand out a bit.

It was good practice, not even sure if it will be used.  It appears simple enough to be used as a logo.  I’ll update if some variation takes off in the near future.

Below are a couple of other variations I created.