castrain

Web Design Principles

2010-10-20T07:40:00.000-07:00

There are a few principles I've developed for myself along the way that have become a sort of standards I always try to adhere to when developing for the web. Of course, there are always exceptions to every rule; especially in an area so wide like web design and multimedia.

Some of these I've learned from other developers, but for the life of me, I can't remember any single source on information. I'd certainly give credit if I could. These principles have always served me well.

1) Single Source of Navigation:
User friendly navigation is essential in development. Having more than one method of navigation can cause confusion and make the user feel overwhelmed.

There are a few principles I've developed for myself along the way that have become a sort of standards I always try to adhere to when developing for the web. Of course, there are always exceptions to every rule; especially in an area so wide like web design and multimedia.

Some of these I've learned from other developers, but for the life of me, I can't remember any single source on information. I'd certainly give credit if I could. These principles have always served me well.

2) Simple Navigation:
You always have to consider your audience with this one. In most cases you're developing for the lowest common denominator of user. I try to imagine what my grandparents would do when coming to the page. If the navigation is too complicated or difficult to find, they'll simply leave. Remember that in most cases people are a simple back button click away from looking at what else Google has to offer them.

There are a few principles I've developed for myself along the way that have become a sort of standards I always try to adhere to when developing for the web. Of course, there are always exceptions to every rule; especially in an area so wide like web design and multimedia.

Some of these I've learned from other developers, but for the life of me, I can't remember any single source on information. I'd certainly give credit if I could. These principles have always served me well.

3) Funneling Information:
This is one of the biggest and hardest parts of a project. In some cases, the client already has their content and how they want to present it. I always try to steer them to a more funneling type of information. If you have a 100 different things to show them, on the menu show only 5. When they click on one of those five, show them only 4 new ways to find what they're looking for. Then within that 4, they'll have 5 options.

It seems like a lot of clicking, but compare that with someone having to read 100 different links to find what they want on the front page, and it's no contest which one users prefer.

There are a few principles I've developed for myself along the way that have become a sort of standards I always try to adhere to when developing for the web. Of course, there are always exceptions to every rule; especially in an area so wide like web design and multimedia.

Some of these I've learned from other developers, but for the life of me, I can't remember any single source on information. I'd certainly give credit if I could. These principles have always served me well.

4) Clean Simple Design:
The hardest part of this is convincing the client that sometimes you don't need to put all of the information on their site. I had a client once that wanted to put the weather and local information on their front page. This had nothing to do with the content of the site, they just thought it was cool.

Most of the time the content a client gives you is a lot of information. That information has a place on the site, but it's not all in one place. A good example of this is when you're looking at hardware to buy on the Dell site. Below you'll find technical information about the device, but you can click buttons or tabs to find out more. If you were to put all of this information on a single page, it would be daunting for the user to find the information they're looking for. Compartmentalize and break down the information.

There are a few principles I've developed for myself along the way that have become a sort of standards I always try to adhere to when developing for the web. Of course, there are always exceptions to every rule; especially in an area so wide like web design and multimedia.

Some of these I've learned from other developers, but for the life of me, I can't remember any single source on information. I'd certainly give credit if I could. These principles have always served me well.

5) Avoid Plugins and Script:
The methods I use typically avoid using javaScript and plugins when possible. When I do use them, I try and make sure that they won't hinder navigation if they aren't working. We can't control what people have on their computers; in some cases, they can't either. Never use Flash or other methods in your navigation. I've developed a CSS method of roll over effects with buttons to avoid using javaScript and it works cross browser. I've written a blog on this.

If you do use Flash, imagine what happens to the user if it isn't showing. Can they still get the information they want?

Wacom's Cintiq

2010-06-22T06:31:00.000-07:00

Well, almost two years ago I found out about the Wacom's Cintiq. This is a drawing pad (if you didn't bother clicking on the link) that shows the screen as if you were drawing on the monitor. It works as a second monitor so that you can have your tools on your usual screen while drawing on the pad.

Two years ago when I saw this on Wacom's site, I was both excited and disappointed. One thousand dollars? Well, I thought, "maybe it's just because it's new technology". That excuse is getting old Wacom. I still can't afford to spend a thousand dollars on a tablet no matter how cool it may be. I thought that maybe after two years the price would come down somewhat. You haven't changed the product. There's no 2.0 or anything. If you'd just come out with a new version, the older version would at least become affordable on Ebay.

I realize that technology really doesn't change that much with tablets as it does with much of the other computer world. Still, I know the components prices must have come down some. Clearly you're not taking into consideration the troubled economic times and the typical starved-situation that it is to be an artist.

Wacom, might you consider changing your prices after two years?

Portfolio Assessment

2010-05-25T07:03:00.000-07:00

I am currently entertaining the idea of creating a new portfolio for my Web Design work. There are several different aspects I'd like to add tot he site that would be more appropriate under a new design.

First I'd like to add case studies. Maybe not for all of the projects, but I do get many questions about some of the higher profile pieces such as Disney or the U.S. Army. In the case studies, I'd focus on my tasks and problems that were solved. The design and development process is so different per project that each could lend to completely unique stories.

I'd also like to focus a little more on print. I prefer multimedia projects over print, but I have to admit I've done a lot of print lately and it's a shame it isn't currently shown in my portfolio. The only print piece shown in my portfolio currently is the NASA brochure I did. That could be a case study right there considering I took some of the photography and borrowed pieces of the suit from NASA just for the cover shot.

More importantly I want to increase stay time on my site. I thought it important for people to get to the meat of my work right away so I placed my portfolio on my home page and made it scrollable reducing any need to click. This made it extremely user-friendly, but perhaps a little boring and quick to thumb through.

If you have any hints or ideas as to how I can improve my portfolio at www.castrain.com, then by all means, don't hesitate to contact me and let me know what you think.

Video Games and Art

2010-04-22T13:27:00.000-07:00

After reading Roger Ebert's Video games can never be art article, I felt I should respond. With a history in developing games and as an artist from a family of artists with a Bachelors of Art, I felt I could contribute to the debate.

Roger Ebert is responding to a TED Video by Kellee Santiago in which she asserts that video games are art. He takes the opposite approach claiming that video games can't be art because they involve a goal to win, they are more business in their creation, and that the games currently made do not hold up to his standard of what art is. He also re-quotes himself as saying, "No one in or out of the field has ever been able to cite a game worthy of comparison with the great poets, filmmakers, novelists and poets." This is a dangerous way to decide if something is or isn't art, but I'll start with the first argument.

Can Art Involve a Goal to Win?

Mr. Ebert has placed a limit on art as saying that "One obvious difference between art and games is that you can win a game. It has rules, points, objectives, and an outcome." Implying that art cannot have rules, objectives, and an outcome is setting limitations on art. He only argues this because of the direction games are coming from.

Forest Gump is a wonderful film and one Mr. Ebert would probably agree is art as he has claimed to love film as art. What if the next technology allows us to stand in the middle of the movie Forest Gump? We are still watching the movie, but now it is happening all around us. I would imagine this still fits Mr. Ebert's definition of art. Now imagine we can touch things and possibly move them. A story is going on around us but we are like ghosts that might possibly change the outcome. Suddenly we have interaction, rules, possibly objectives and goals. Has adding the ability for a viewer to change art make it no longer art?

Mr. Ebert argues against games being art in this case because he thinks of Pong or simple games as their origin and cannot conceive these as art. I'd agree. Pong is not art. Pong is more a sport. There is no storyline and no creation beyond simple rules and function. The games today however, even your simple first person shooters, have story arc and characters in them. They are no different in structure that if you could move a cup in a Tom Hanks film.

Can Art Come From Business?

One of Mr. Ebert's commentators answers this question already by reminding us that most of the art in history was thought of and requested by patrons. It is easy to compare a Video Game Producer telling his team of Designers and Developers what he wants to a Patron telling Michelangelo what he wants on a ceiling.

Even today there is "Corporate Art". Art directly created for a purpose of business. Mr. Ebert could argue that "corporate art" isn't "true" art, but I will get to that after I address his earlier points.

What Standard Does Something Have to Reach to Become Art?

Mr. Ebert cites Kellee Santiago's examples of games that are art as "pathetic". This is an opinion and not a valid argument for whether or not a game is or isn't art. He expresses his disappointment and says that these games are no where near what he would agree to being art. He also asks as I said before, for someone to show a game to him that will compare to the works of great artists. This is a dangerous and ill-conceived way to define art.

I do not enjoy Jackson Pollock's paintings. I find them to be meaningless and uninspiring. That being said I do not hold my opinion as the definition of art. I would not define art as something that I personally enjoy as art. When a man throws paint against a wall and calls it art, I cannot stand up and say it isn't art. What I can say is that it is "bad art". This is not a debate about Pollock's work. This is a shared opinion. Just as Mr. Ebert's dislike of the three examples Kellee Santiago provided was just his opinion. You cannot give definition to a thing based on personal opinion.

Conclusion

Mr. Ebert's opinion of what defines art is at best limited. It seems to be limited to what art has been in the past and what he considers to be "good" art. As he asks for a game to be compared to any of the Master's works, I refuse. I will always refuse to define something as art based on someone else's art. That being said I don't think that any games today do compare. I do however define them as art if they contain some original story. Games are no different than a choose-your-own-adventure book. While these books aren't great art, they are a form of art, and so are games that feature story lines. Someday these primitive forms of art will grow and evolve into something comparable to works of Da Vinci, Frost, or possibly even, Tom Hanks.

CSS rollovers

2010-04-09T08:17:00.000-07:00

There are a few tricks I've found along the way that in CSS that have helped me out to a great degree. One of these tricks is the CSS button roll over. You can find different versions of this all over the web, but after using this for over a two years, I believe I've tweaked it so that it is the most SEO and browser friendly version. This is how it works:

You create the button image with both the static and rollOver state on the same image like below.

The static state of the button is on top. This image is 100x50. That means that your button will actually be 100x25. What we're going to do is simply show only the top half of the button. When a user rolls over the button, we'll only show the bottom half. What this does is eliminate the need for Java Script to load images for the roll over state.

Here's the CSS:

.btn_black a {
width:100px;
height:25px;
float:left;
text-indent:-2000px;
background:url(../images/css_rollover_btn.jpg) 0 0;
}

.btn_black a:hover {
background:url(../images/css_rollover_btn.jpg) 0 -25px;
}

I've created a Class called "btn_black" for the button. As explained before, the width and height are defined as 100x25. The button is set to "float:left;" I've fond that setting the button to a float state solves cross-browser issues.

The text-indent is there for SEO purposes. When using images as buttons, you want to still have text involved so that the Search Engines can better read the link. In this case, it takes the text you'll write as the link, and shoves it -2000 px off screen.

Finally we set the button as an image. You'll notice the "0 0" after the URL in the background. This is setting the coordinates of the image shown. Next when there's a roll over (a:hover) we move the image up by 25px with "0 -25px".

Now you need to have it placed in HTML. We'll set it to go to a homepage:

<div class="btn_black"><a href="http://www.blogger.com/index.html" title="black button">HOME</a></div>

All this does is create a DIV tag with the Class of our button. The link inside points to our home, and the text "HOME" is there for the Search Engines, but pushed off screen by 2000 px.

That's the simple CSS roll over button. You can also remove the words "button" from the image and remove the "text-indent" from the CSS. This would allow the text to be on top of the button. Either way would work, and I recommend doing it that way if what you want fits this. Often though we want more from our buttons that just simple text on top of them.

The New Addition

2010-04-06T22:49:00.001-07:00

It's been a long time coming, but I've needed to add a blog to my site at www.castrain.com for some time now. Not only do I advocate it to many of my clients for their own websites, but I also believe it's a good practice to keep your site fresh and current.

It is my hope that this blog will help me record the new CSS solutions, design implementations, and all-around good web development and design practices I've discovered in my experiences. I also want to convey best practices on a more business and team-building point. When dealing with the multitude of clients I've worked with, you start to learn a few things that are helpful in the Web Design business.

Hopefully this blog and this site can not only promote my work in Houston, Texas and nationally, but it can also help to educate others that are looking for help. I know I've learned a lot from other developers.