Friday, October 30, 2009

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.

Tuesday, October 27, 2009

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

Wednesday, October 21, 2009

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.