A Note on Graphic Design

Before we get too far with all the cool tips and tricks you are going to learn from this blog, it may the best time to talk about graphic design. Graphic design is the base for all that we are going to do here. I feel the need to write about it because for me, its a love hate relationship. I studied it in college and have an aptitude for it. I can arrange elements on "whatever" and I can make it look good, and I got better as I soaked up more experience. I like to design for large companies, but I LOVE to design for myself, like my own website, and even better, I LOVE teaching design and watching people get good results from what I share with them.

In college, I studied the craft of illustration. The people in this major were like me, we liked to draw, paint and animate, and from a distance, we made fun of the "graphic designers". "Ahhhh, they can't draw", we would say. They always wore nice clothes, were always in front of the computer and designed business cards that had small letters on it that we could barely even see. This wasn't me, and in college, you are naturally going to gravitate to like minded people such as yourself. I was an illustrator.

That was many many years ago, and since then, here's what I know (graphic designers, you are about to be honored here)...

All businesses, in order to make money, survive and flourish, have to sell. It doesn't matter what they sell, it could be the greatest thing ever invented...but here is the key, and I want you to remember this....

"If nobody knows about it, or how its going to help them...nobody is going to buy it".

In other words..."marketing".

Companies spend millions of dollars to staff their marketing departments. They have the responsibility making sure that everyone knows what Company A sells and how their product is going to help people. A good example of this are the Paul Rand logos at the bottom of this post. Do any of those logos look familiar? How many of these companies still use that same logo?

Marketing and branding is a simple but powerful idea that affects you in every way, every day. Companies know it and will continue to send out company messages to you...think about the following:

• Have a Coke and a _______.
• What is Target's logo?
• What was the last pair of sneakers you bought? Why?
• What colors represent Coke? Pepsi? Mountain Dew?
• What colors does Tiger Woods wear when he plays golf?
• Superbowl commercials.
• What color is the Yahoo logo?
  
• Why do people like driving Prius, Mercedes and Toyota.
• What car do you drive today?
  
• The most popular toy this holiday season is?
• Why do you go to Starbucks (for the coffee drinkers)? What color is the Starbuck's logo and what color are their uniforms?

The list goes on and on, and each is a marketing decision, that contains a well crafted strategically delivered message that somehow crosses your senses: tv, radio, computer, cel phones, billboards, signs, and we even wear the messaging on our bodies - does anybody know why that Ed Hardy brand is so popular? Or why do ladies spend 400 dollars on a Coach purse (holy smokes! - I know those Coach people love this.) Its all around us, but companies need to be in front of our faces so that we are reminded of their existence, products and or services, and they plant reasons for us to buy.

As I'm writing this, I'm typing on a Mac Powerbook, using a Logitech Cordless Mouse and in a few minutes will take a break to play on my daughter's Nintendo DSi.

So where does graphic design come into play? They are the ones responsible for how everything looks and feels and how that message is delivered to you. They make sure it looks nice, appealing, and that the messaging is clear for the target audience. They are closely related to the company's ability to make loads of money and if things don't look nice, or aren't clear, a company is not going to have good results and will eventually tank.

By the way, graphic designers become art directors and therefore are responsible for hiring illustrators and animators like me. Like I said, they control the money. So I treat them pretty nice.

How does this relate to you? Remember that you are about to build your website... these days, one of the single most important marketing tools that you have as an independent creative individual. Whether you like it or not, you (and your name) are your own brand. You are the CEO of your own company, and this company is YOU.

Therefore, you have to market yourself professionally. You have to look good and your branding and messaging must be clear. This is evident and felt in the way you choose to present yourself through your website, and it includes the coordination of the following:

• your use of color
• your main image choice
• your layout
• font choice
• word usage
• usability
• flow

Which is why I decided to put together this blog. Unlike our graphic design counterparts, animation, digital film, visual effects and game art majors don't study marketing design as a graphic designer would, so it is my intent to post many of these main points that graphic designers are familiar with so that you too can have an effective, aesthetically pleasing website that you are proud of and that will help generate money or opportunities. If you follow the tips and tricks I share in this blog, you could potentially have a site that looks as if a professional graphic designer created it.

So there it is, be nice to graphic designers. Their job is important. Their talents help drive marketing, which then helps drive the economy. Be kind to them and do good work while you are in their presence because they might be able to use your talents and skills one day.

Graphic designers of the world, we grovel at your feet.

A Quick Homepage Design Technique

In this tutorial, shows you how to create custom homepages from existing ones. For this to work, you need to flag and take screen snapshots of well designed sites. I usually stick with the large companies homepages because of their design and simplicity. In the examples here, I'll be using the Jaguar site and the Mini Cooper site.

I usually show this technique to people who aren't trained graphic designers and I find the results to be pretty cool. At first, it seems like copying, but once you replace the main imagery, logo and navigation with your own, it will look totally new. You are only borrowing the template and the general flow for where items are placed.

Quantity is the key to this exercise, the more designs you do, the options you'll have, which will eventually lead to a better decision as you narrow things down to your final design. I recommend designing 3 - 5 mockups to get you started.

I also like this technique because it requires little or no coding. Everything is visual and I find that people have lots of fun doing it.

Be sure you check out my next video about adding functionality and programming to this homepage.

This will be my first customized video for this blog, it turned out better than I had expected. Looking forward to making my next one soon. The backround music for this video tutorial was provided by my friend DJ Ilo.

Let's Begin!

3 Seconds to Impress

For the last three years, I've taught a web design class where I help animation, game design, visual effects, and digital film students set up a website where in they can market their work. The class is essential and is now a requirement to graduate. The class is lots of fun to teach, its always different, there's always something new when it comes to the internet, and the product they make, which is personal, can help them generate opportunities for work or income.

These days instead of recruiters requesting to view demo reels (a video presentation of your best work) on CD's and DVD's, recruiters and art directors are requesting to see URL's and or websites. Its just the way things have been going, and now with mobile devices such as iPhones and Androids, they can look at your work from any where - even in the bathroom, now that's efficiency.

If you are reading this, you are probably interested in putting together your creative design website, and you probably have a few good reasons to have a site, this is awesome, but here are mine, perhaps some of our reasons match, and maybe some are new. There are many benefits/reasons to having a website of your own as an artist, animator or designer, here are the top reasons - the main one being last:

1. An art director can see your work through a gallery.
2. You could put more pieces in it (15-25) - Unlike a conventional portfolio that only holds what one could put in a case.
3. You can show a greater variety of pieces like concept sketches, color roughs and sketchbook pages...pieces that you wouldn't put in conventional portfolio, but in a web portfolio, its perfectly fine.
4. Sometimes art directors like to see how you arrived to a solution, showing a sketchbook is a direct way to show this.
5. You can show animation or video clips that you’ve created, which show your editing, timing, use of sound and presentation.
6. An art director or recruiter can learn about your interests if you keep a blog.
7. Its shows that you understand technology.
8. That you know how to present and market your work.
9. They can contact you easily through a "contact" page link.
10. A visitor to your site can see and interact with your work and contact from any computer any where in the world (this is cool, especially when people are contacting your from another country - it can be fun and eye opening).
11. And the last (and this can either be good or bad depending on how well you do), is that a visitor to your site can make a quick impression of you in about three seconds (thus the name of this blog).

In my experience in working with other web designers and usability experts, there is consensus that most of us on the internet, don't like to read. If you think about it, its true. Yes, we read here and there, and will read information that we are hunting for, but for the most part, humans are visual and tactile beings, which means that we like to see and do things, its how we learn, improve and get better, that's just how we are. This is a great thing if you understand and believe it, and here, we'll use it to our advantage in designing our website.

Imagine looking at a large web page with nothing but text, no colors, no thought to the design...boring right? People react more to images first before reading text and their eyes are scanning the page looking for something to click and or type.

So, when we visit your creative design website, in the first three seconds, we are going to make an impression of you and your work. We are not going to verbalize it but everything from what I know is done through feeling. Let me walk you through what happens in those three seconds, and as you read this, see if you can relate to it by visiting your next website. Pay attention to your first impressions and feeling upon entering a site. You already have assumptions about the site just from what you see from the homepage (more on this later).

Here's an example, when I visit your site, I am first going to be affected by your main image, which is the largest image on the homepage. This image and the term I use for this image is called "The Money Shot". I know, I know, its a porn term too, you are going to have to research that on your own - "no money shots" of the other kind here, but I really don't want to call this anything else, because you really could relate this first image impression to money, let me explain. This main image is crucial because it sets the tone for your website. It should be your best work. It’s the first piece we see, and its also the last one we remember upon leaving your site...this is key.

Also, in those three seconds, I have an idea of your sense and level of design. I can sense this by how you choose to display your main image, the colors you use around it, if it is clear and navigable, the typeface that you choose (there are some no no's here - a blogpost on this soon), and usability - can I get to things easily once I enter?

In about three seconds, I (the visitor to your site) will choose to either explore your work and learn more about you, or leave. These days, recruiters and art directors are so busy, that they are appreciative of the fact that you put the time into your design to make it clear, quick and easy to use.

When visitors to your site leave, you lose:

• Potential opportunities for work.
• Money
• Return visits.
• Your reputation might get damaged too.
  

On the topic of "3 Seconds", do you ever notice those "loading" graphics when you enter a website. For those non-web designers, that's called a preloader, and it’s a graphic that lets you know that something (usually a Flash graphic - Flash is an application used to create animations and presentations on the web) is loading up before it plays. Usually this is also accompanied by a "Skip Intro" button right. And I'm sure lots of people have worked hard on their intros, but can you tell me about how long people will wait for that "Loading" screen?

I ask my students all the time, and they almost always skip it. Me included. I'm telling you, people browse and scan the internet, and our impatience makes us move on to the next thing, its easy to do with a click of a mouse and we can't wait. This is one of the main reasons why I choose not to design in Flash as much.

In teaching this web-design class for non-web designers, I found it to be easy and fast to show someone how to put up a site without the use of Flash (a steep learning curve), but instead to just use Photoshop and basic Dreamweaver tools. It’s way easier, faster, easier to organize and keep track of, and it’s not unusual to have Flash designers switch. For these guys, I usually recommend for them to establish a design in Photoshop first, make sure the usability is nice, tight and clear, and then translate it to a Flash design.

Another option is to have a bumper page at the beginning of your site, where you give visitors to your site the option to either choose the HTML or Flash version of your site.

So, now you know why this blog exists. "3 Seconds" is all you have to make an impression, and on the internet, it is so true. Every design recommendation I offer you will always be from this "3 Second" standpoint, and therefore your choice to implement it or not, is a business decision. When it comes to your website, you are the captain of your own ship, the general of your own arm, and the CEO of "Place your name here" Incorporated.

Do your best, keep your eyes open to cool designs, and have fun. I wish you the be – of luck, thanks for reading and if this blog has helped you, let me know. I really would like to hear from you.

Until the next post...happy designing.

Placing Video Embed Code

The Assassin's Creed Trailer came out this week, and unlike the game, this trailer features live action footage. The interpretation is incredible. I think is so cool. They really should make a full movie. I would pay to see this.

In this example, we copied the embed code associated with a Youtube video and pasted it on to a blog post. The process is quite easy and I also recommend that as you post a video or picture, that you also write a small sentence or two about lending your opinion about the piece. Having both and image and text work together to make an engaging presentation.

Here are some images to help you with the process...

Copy the embed code from Youtube here:



Then, under Posting > Edit HTML Tab > paste the copied Youtube code. As seen below:

The Creative Blog: An Enhancement to any Website

I've had my website since 1999, and if I could do it all over again, I would simply make a blog, because it is easy to put together, you can update it from anywhere, you can post everything a website can do, like words, pictures, video and people can contact you through it. I'm pretty sure I could make it work as my main website, as I've seen many people do it. But that's not what happened...I have a regular website that I've designed in Photoshop and Dreamweaver but keep a Creative Blog as an enhancement to my site.

For those of you who have never designed before, and if you are wanting quick web presence, then a blog would be a smart decision for the reasons I mentioned. I've recommended this option for many instructors and they like the option. Designers, animators or game designers, will want a main website to showcase their work, and we'll get to that later, but before we do, a good move for you is to create a "creative blog" that will be an enhancement to your future site.

A blog can be about anything and I have many (yes, I went overboard and was hooked on the idea for a while - but I've calmed down a lot), I've used them to keep notes on images and videos I see on the internet to help me with research, another keeps track of my football scores, I post animation curriculum and my favorite...I use one as a source of creative inspiration for me and my students.

This is the blog that I maintain on a weekly basis and I love it, there are lots of funs things on it that inspire me and that I like to show my students:

http://randolfs.blogspot.com/

YOU will use your creative blog in this way...when you see something cool on the internet (which is pretty often), if it inspires you to make great work, if its funny, if it energizes you, if you think its a good example of great design or animation, maybe its an artist you admire, maybe its a cool website, you will post it on this blog. When you post it, it will be available to you for as long as you have the blog, and you will find great enjoyment watching it grow as you add posts and layers of inspiration to it. It is a great feeling and it gets better when you find that somebody out there finds what you are posting helpful and inspirational too. Its awesome, its simple, it spreads love and you can do it.

Some other benefits to creating a "Creative Blog":

• It shows that you are in tune with your industry.
• That you keep current.
• It shows initiative on your part for learning a new technology.
• Many professionals in your industry keep blogs.
• These same professionals check one another's blogs.
• It shows your interests (me, I like robots and awesome demo reels).
• You can showcase works in progress, like sketchbook work.
• Or current pieces that you like, but won't necessarily place in an online gallery.
• Its dynamic, constantly changing and growing, where as your main website might not change as much.
• Posts are automatically archived so you can look at the later (sometimes years later).
• It can be easily organized with the use of labels.
  
• Oh yeah, and did I mention that its FREE?

There are many blog formats out there, but the one I am most familiar with and the one I pitch most often is Blogger. I do so because of:

• An easy interface (super easy to use)
• From a design standpoint, the templates are nice and clean (this is huge).
• Its owned by Google (Its still the number one search engine, and is not going anywhere).
• You can customize the colors to make it feel like it is part of your main website.
• You can place ads on it (we'll talk about this later - I heard Wordpress doesn't allow ads).

So go ahead, let's start by establishing webpresence by creating a blog for you. Start first by signing up for a google account. Or logon to the official blogger website, I think they are same thing.

Once you logon, establish a name for your blog, as well as a URL name. For example, my blog is called randolfs.blogspot.com, but my blog title is, "The Caged Tiger's Templar". Its nice if your blog title is somewhat creative. I usually play with word combinations to help me brainstorm great titles, so pull up Thesaurus.com to help you generate more options or keep a friend's email or phone number handy so you can run ideas by them. Don't worry if you don't find a cool name or URL, you can always change it later.

The next lesson, will be about how to customize your blog, and some of the best practices I put into place about posting images, text and videos on a blog. Save the webaddress to your blog, and we'll connect it to your homepage (this will be another lecture).

Good luck and have fun putting together your creative blog, if you have any questions, send them my way.

Do your best and have fun.

Introduction

I'm an animation instructor and I enjoy what I do, but before animating however, my background was in graphic design and illustration. I've been a lead corporate webdesigner for a Fortune 500 company for many years, I've had the pleasure of working with IBM Usability Groups in designing various sites, and I've freelanced for a variety of companies of various sizes.

In my journeys, I've worked with many talented marketing and design groups to help companies establish web presence, nowadays we all know that it is a crucial marketing tool, and most importantly, as a designer, I've experienced the joys and pitfalls of effective design pertaining to a website. I learned how large corporations use their sites to market themselves and how they make money.

Design and marketing go hand in hand, but for many of us wanting to establish web presence, design is not an expertise and it makes a huge difference. Welcome aboard! This blog will address some of the essentials of putting together your own creative website. It will cover the elements of putting together a great first impression for a visitor to your site within the first 3 seconds, this includes, design, color, usability, maintaining your site, blogs, using the site as marketing tool to showcase your work, posting demo reels, and later on, the use of ads and twitter to generate revenue from your site.

At the college I teach at, many instructors and students who are non design majors want to put together a website. The instructors want to use it to showcase their work, keep in contact with students and to make themselves more marketable. Let's face it, education is using the online medium more and more and so the marketable teachers are the ones who have some kind of online teaching experience. Many classes are solely taught online. We teach and encourage our students to put together a website so they can market their work, shouldn't the teacher know how to do this as well? If you are a teacher who is need of some kind of webpresence, never fear, this blog will help you out.

For my students, many of them have studied animation and game design for many years. They really haven't studied design in a way that a graphic design student has. So I show them the essentials and help them make kickbutt websites that will help them land jobs that they want.

I hope you will find this information helpful. Be sure to subscribe so you are updated of new posts so let's get started. My first post will be about putting together...

Creative Blogs

Changing Gears

This blog, had served its purpose in helping me to achieve my MFA in Computer Animation. It has been over a year since my completion of the program. Things are going well. I continue to teach animation, everyone is healthy and all is clear.

The focus of this blog will be shifting towards the subject matter of creating and maintaining blogs, and websites. I teach this subject matter in a class, and having a blog like this will be an invaluable resource.

I'm currently working on my first post about the benefits of having a blog in the next week or so.

60 FPS : Final Animation

60 FPS from randolfd on Vimeo.

Here is the final animation. Thanks to everyone who made this project a success. I wish all of you continued health and prosperity. I'm going to rest a bit, and after resting, will work on a new animation soon (perhaps "The Final Task" sequel).

Until next time...

Randolf Dimalanta 

Mission Accomplished

As of Thursday Sept. 18. I finally passed the MFA Thesis Defense portion in order to achieve my degree. I'm currently making final changes to my animation and blog. Once they are completed in the next couple of days, I will post the link here.

Thanks to everyone for your support.

Randolf

Checking In

I haven't posted in  awhile. Things are going well. The animation is as complete as it can be, my document is almost done, just a few citations to update, and just an upload to the blog site that presents my animation curriculum. 

I'm excited that the end is near (fingers crossed), I'm not done yet and will work like crazy to finish things off by Tuesday, with enough to put together a simple powerpoint presentation by Wednesday. 

Thanks to all of you for your support and encouragement. Here we go. 

Woo Hoo. 

Randolf

60 FPS: Week 16 - 90% complete.

60 FPS: 90 percent complete from randolfd on Vimeo.

60 fps: Week 13 Animatic

Almost done. I'm planning to go over the phoneme shapes for Ollie's mouth in the beginning and end of the animation. Check previous post for other changes left to do. 

60 fps: Week 11 Animatic

Here is the latest animatic. I added more background noise, new end ollie shot, and a smoother reporter opening. Lots more stuff to do however during the next coming weeks.

• Tone down room tone. Too loud. 6/24
• First Ollie shot (betta performances you see)audio pops in dialogue (final cut).6/24
• Ollie 2 (Check Phonemes). Check beginning and “Expert”
• Ollie 3 (Both of these movements) Check tangents (smoother throughout.) 6/24
• Reporter to Blue Guy “Body Language” Check Phonemes
• Blue Guy Head, check tangents for smoothness at the end.
• Sound for smoothness during box jumps (swooshes)
• Ollie (after cowboy) shakespeare gesture, before hand goes on chin.
  Analyze the situation you see (move mouth more).
• Reporter: Can you give us an example? Smooth out tangents.
• Ollie smooth Mouth tangents.
• Ollie smooth head tangents “Mother No”
  
• Check Rig Creators
• Refine acknowledgements list.