starting from scratchAfter completing the exercises in this book and seeing how easy it is to create unique, responsivewebsites in Flash MX, I bet you are just champing at the bit to take this knowledge and apply itto your own projects. All in good time, little grasshopper! After all, the ideas and media for theseexercises were all diligently conceived and prepared for you beforehand. What happens whenyou yourself are faced with the ominous “blank page”? It can be pretty daunting, believe me. So,let’s take a moment (or a chapter!) to discuss how you might prepare for your own projects,before you even go to open Flash!

So many questions...Before you put pen to paper, or mouse to mousepad, your first step should be to answer someimportant questions about the site you are planning. Whether this is a personal site or a businesssite, for yourself, your company, or your client, there are a few major areas that you need tostrictly define, which will inform your ideas and design for the entire site.

What is the purpose of this website?

Your website could have any number of primary goals: e-commerce; entertainment; apoint of contact; or simply just to have a presence on the web. If you are creating apersonal site, the only purpose might be to create a playground for your own ideas orartwork. Whatever the goal, it should be clearly defined at the outset of your project soyou will know which direction you should be heading and where you should be focusingyour attention. Without a defined goal, you’ll soon find yourself wandering aimlessly in thedesert.

Who is the intended audience?

Almost as important as the purpose of the site is a definition of its audience. This shouldinclude age ranges, interests, and web-experience, as well as technical information aboutthe hardware they will be using to view your site, and their connection speed. Choosingan audience will dictate the language you use, the font size, the colors best suited, and the

iii

III Build Your First Web Site

2

possible methods of navigation. Their hardware and connection speed will help you to decide whatyou can offer on the site that will be viewable for your entire audience. In addition to defining theaudience, you need also to consider what they will be looking to accomplish at your site. Does thisgo hand-in-hand with your site’s objectives?

What will be the main content on the site?

Clearly, this is a very important aspect of site design, you should have a concise outline of theinformation that your site will contain before you start work. Also, if you are producing acommercial website, consider how the color of the company’s logo will work with the rest of thesite, or if there are specific images that need to be included.

What media will I be using on the site?

Depending on the website, this question might not need to be addressed at such an early stage,but often the design and the navigation for your site depends upon the media you are presenting.For example, an online gallery of images, with a defined purpose of displaying the images as anadvertisement for the artist, should consider this question very early on. Will you need to presentvideo on your website? How about music?

These questions all need answers before you can proceed with the design, and that’s where thefun starts!

The blank pageOnce you have established the reasons, audience, and content of your site, you must face the often-daunting task of establishing a design for your site. Sometimes, inspiration will come almost instantly.Sometimes, you will rack your brain for days in an attempt to come up with anything of value. No matterhow long it takes, it’s important that you don’t become discouraged, and instead realize that everyone,even the most prolific of creators, can feel trepidation at this stage. The ideas will come. But how do youhelp them along?

Finding inspiration

Inspiration can be found in all corners of our everyday lives. One of the best ways to excite ideas of yourown is to take cues from everything around you. And yes, I do mean everything. Here is just a brief listfor you to consider:

Music

Whether it’s your favorite baroque composer, or the latest hip-hop sensation, music can key right into thecreative areas of your mind. Music has an uncanny way of taking us immediately back in time. Weassociate it with instances in our lives. It moves us in subtle, subconscious ways like nothing else. Listento your standards, but also take care to challenge yourself with new artists (or ancient ones!) wheneveryou can.

Television and movies

These two forms of entertainment are not only easily accessible, but they also offer loads of variety andinspiration. So many movies have set the benchmark for what makes something visually appealing. Watch

Inspirations -III

3

both the pop cultural juggernauts, as well as the programs on the fringe. Check out biographies anddocumentaries, animation and political discussions. Watch something that will frighten you. Rememberthat you can be just as inspired by the mediocre—it challenges you to consider the reasons for themediocrity.

Theatre

Live performance exudes its own unique energy, whether it be a play, stand-up comedy or performanceart. If you wish to see interactivity in a human, public setting, head to a comedy club and witness how anaudience’s reaction affects the performance of an entertainer. You may not realize it as you enjoy theshow, but you’ll be breathing in ideas and inspiration all the time – and anyway, it beats sitting in front ofa computer screen!

Museums

I used to make the mistake of going to a museum and attempting to take in as much as I possibly couldin one trip. Now, I concentrate on a single exhibit, a single room, sometimes a single piece of art. Go andstare and take it in from all angles. Think and consider, and let your mind wander as you view.

Books

You could read a book a day for the rest of your life, and still not come close to taking in all of theliterature—good and bad—that our society has produced. Be sure to take in the classics, but don’t turnyour nose up at the latest airport fare. Pick up children’s books and graphic novels. Examine the layoutof illustration and how it supports a story. Spend a little time in all genres.

Also, head to a bookstore and just have a look at the packaging. Forget the old adage and judge bookscompletely by the cover. Does it excite you? Do you want to buy the book? Are they selling the title, theauthor, and the genre? These are the kind of critical questions you need to consider about your own work,and it’ll soon become second nature to start assessing the design merits of everything around you.

III Build Your First Web Site

4

Advertisements and packaging

I have such a love/hate relationship with commercials on television. Some I find more entertaining thanthe surrounding programs. Others annoy me beyond comprehension. Either way, I like to examine whythey make me react as they do.

Magazines also offer a huge amount of advertisements to consider, as well as general layout of an entireproduct. Look at how space, both positive and negative, is arranged. Try to determine how an ad attemptsto manipulate, be it with color or imagery or wordplay.

I’m also a big fan of movie posters. Riding the subway here in Manhattan, I am treated to posters forpretty much every major release, whether I like it or not. In a movie poster, advertisers are forced toencapsulate the feeling of an entire picture in a single rectangular image. Some succeed admirably, whileothers fail majestically. Not only examine why (as you stand there waiting for a train), but also whatfeelings the poster evokes, and how you might approach it differently.

Finally, and this might not be an apparent source of inspiration, but have a look around you next timeyou are out shopping, especially at a grocery store, where the variety of products and brands arestaggering. Creating a suitable and unique package for a product is quite a task in such an oversaturatedmarketplace, so take a moment to consider which product packaging works or doesn’t work for you.

Websites

Well, since we’re talking about finding inspiration for creating websites, it should go without saying thatyou should take a look on the web for other examples. On a regular basis, head to one of the many sitesthat have a site of the day or site of the week to see what else is out there.We recommend www.macromedia.com , www.flashkit.com, and of coursewww.friendsofed.com. Where you can not only find a site of the week, butalso check out the best weird and wonderful sites posted onto our weblog.

Consider how certain effects were achieved, and what makes a site intuitiveor too convoluted and complex. As with all of these categories, it can bejust as educational to look at the bad as the good.

Inspirations -III

5

Architecture

We build art around us every day (well, maybe not us personally,but those friendly construction workers like to drill and hammerat 6 am on your days off certainly are!). Of course, tract housingmight not be the pinnacle of architecture, but it sure offersperspective. Stroll through your neighborhood, and then strollthrough the nearest downtown district. Find the historic districtsin your cities. If you have access to castles, cathedrals, or missions,take advantage of it! Personally, I love the cities that have century-old buildings next to the most modern of skyscrapers. Some feelthat one might destroy the beauty of the other, but I find theplacement right next to each other of two magnificent worksfrom two different eras to be inspiring in its historic scope.

Nature

I left this until last, for I believe unequivocally that it is the most important. What better place to findinspiration than nature itself? From the awe-inspiring grandeur of the Grand Canyon to the meticulousbeauty of a rose, be inspired by what was created long before man’s works. Take a walk through a localpark when your inspiration appears dried up and admire the detail found in the leaf of a tree, the intricacyof the tree’s twisting limbs, the fluidity in its form when the wind is blowing. Head to a zoo and observeanimals, both native and exotic, and how they interact and play in their man-made habitat. Go hiking ontrails and visit natural wonders, which you will find there are more of than the stated list of seven!

Of course, there are many more areas in which to explore and find inspiration, including video games,DVD interfaces, mathematical algorithms or the circus. Inspiration is all around us, from a simple cerealbox to Niagara Falls. What is important is that you experience and take in as much as you can, as muchvariety as possible. Watch something that makes you angry, read something that makes you cry, and dosomething that you never do. These are the ways to become inspired.

III Build Your First Web Site

6

Exercising creativity

I’ve had many talks with friends or co-workers who express the lament, “I’m just not creative,” as if it wassomething that was controlled by a simple on/off switch. An argument that I’ve defended for years is thatcreativity is like a muscle—the more you exercise it, the stronger it becomes. Sure there are those whoare naturally more creative, but to believe that creativity isn’t something you can develop and nurture isself-defeatist.

Every parent will tell you that children are all capable of inventing the most outrageous stories. Creativityis inherent in all of us, but if we don’t use it then over time it will become flabby, like an under-usedmuscle. It’s time to start working out again!

The way to foster creativity is to use it, over and over, as often as possible. This may be easier said thandone, but it is possible. Most creative writers will tell you that it’s best to write every day, whether theideas are there or not. I knew a playwright who had written at least ten pages a day for over ten years. Alot of the work never saw live performance, but it did help to produce some outstanding work along theway. You need to keep the wheels turning and ideas coming.

Have you ever played a game or worked in an application so often that it becomes part of yoursubconscious? I had a Nintendo Gameboy when they first came out and was addicted to its tiny versionof Tetris. I played it constantly for the first few weeks. Soon I discovered that I would begin to recognizegeometric shapes around me in everything I saw. Everywhere I looked I saw collections of blocks (whichwas a good enough warning for me to put down the Gameboy for a while).

Far closer to the topic: about ten years ago I began to experiment with writing lyrics for the stage. At first,developing unique rhymes was slow going, but in a fairly short time I found myself reading passages inbooks and immediately finding rhymes for every odd word that cropped up. This would occur withoutthinking. Ideas for songs would jump out of a newscast, an anecdote, or a single word that had afascinating sound. Places I had often visited, books I had previously read, movies that I had seen countlesstimes—all became sudden sources of inspiration and catalysts for ideas, where before there had been

Inspirations -III

7

none. In other words, my mind was becoming practiced in the creative angle I was developing it for. Butit required my developing of it.

Sometimes, things come naturally. At other, more frustrating times, it takes a lot of hard work (and evenmore discarded, bad ideas). But in any case, it takes practice, diligence, and patience. Make no doubtabout it, though—being creative is an ability that we all can achieve.

Once you get your mind focused on your desired task, though, it’s important that you often distract it.That’s the time to head to the museum, go see a movie, walk through a park. Find the things that inspireyou. I carry a small pad with me most places that I go, and whenever ideas fly at me from out of the blue,I jot them down. You might find carrying a small dictaphone helpful to record your thoughts. Whatevermethod, take down whatever ideas strike you and peruse them later.

When it’s time to sit down and concentrate on a specific creative problem, let your pen flow freely andrecord your whole stream of consciousness. These are the times to think outside the box and brainstormto your heart’s content. Don’t censure yourself or your ideas at this point, but instead think completelyaround a problem, offering practical solutions next to Dr. Seuss-like wild imaginings.

In these ways, you can develop your creative abilities. Then, with a healthy combination of inspiration andcreativity, you can use the skills that this book has taught you create for your own projects.

Mapping the siteI know you’re itching to begin throwing things together in Flash, but unless you layout structurally whereyour content needs to go, you’ll just end up with a big, virtual mess. You don’t need to lay out all thecontent on a single page, but you do need to decide how content will be divided, and where it will belocated within the structure of the entire site. I can’t stress this enough – if you don’t plan properly at thisstage then it will come back to haunt you later.

There’s no hard and fast rule on how to divide your content. It depends on the site. What you shouldconsider is how your audience will expect to find content. If you are an illustrator, then no doubt yourusers will be looking for a gallery. Do you have magazine illustrations that you want to have separate fromchildren’s book illustrations? Then this is the stage when you should decide.

Go through your content and your media and break it down into intuitive sections. A Flash design firmmight have a section for a portfolio, which could be further divided into online and offline projects. Youwill usually need to have a section containing contact information, and another perhaps with a client list.Play with different ways of dividing your information, though you’ll often find the pieces fall nicely intoplace. To aid in this task, create flowcharts of the site hierarchy.

III Build Your First Web Site

8

Once you have defined a structure for your site, you can begin dividing the media that you have collectedinto appropriate folders on your server or hard drive. Keep your content together in a parent folder asyou construct your site, creating subfolders for your intended sections, creating further subfolders withinthese for different media types. Each of us has a different way of organizing, so arrange files in a systemthat works best for you, but be sure to keep it consistent throughout the project.

Developing a designThere are so many ways that people work when developing, and you will find countless books that explainvarying methods (and I would encourage you to read as much as you can on the subject). I am going toexplain the methods that have worked best for me, but obviously what’s important is that you find whatmethods work best for you. The one point I would like to stress is that, whatever methods you use, alwaystake the time beforehand to carefully plan your site before you even open Flash. It’s true that, as withmost things, the more work you do in preparation, the easier and less problematic the actual productionwill be. Believe me now, or realize it on your own after your first debacle, but it’s a true point and oneto heed.

After you have answered the practical questions that we posed at the beginning of this chapter aboutyour site’s purpose, audience content and media, then you can begin to brainstorm ways to present theinformation. Don’t open Flash just yet! Take out a pencil and paper and write down ideas and sketch outlayouts. There are a few exercises that might help you in this.

Metaphors

Metaphors not only allow for some fun creative thinking, but they can also help your audience tounderstand your site and how it works. Consider this: the web is a completely new medium and one thatis still developing its own language. When motion pictures were first being developed, films were oftennothing more than a recorded version of what an audience might see live on a stage. Only when directorsdiscovered how to utilize the camera as a new tool of creation, allowing for new ways to communicate,did we see the language of motion pictures develop. It is always a process of development, and thatprocess requires inviting an audience in to accept the new medium. One way to accomplish this on theweb is to incorporate metaphors.

Inspirations -III

9

A metaphor is real world parallel. It’s a 3D button on the screen that acts like a tactile 3D button youmight find on your computer monitor. It’s a slider that operates just like the equalizer on your stereo. It’sQuickTime video controls that mimic exactly the controls on your VCR or DVD player. It’s something theaudience is already familiar with, and so more than willing to accept on your website, an environmentwhere real world buttons really have no place.

By using these often-tactile items that your audience is comfortable with in their real world, you makethem all the more comfortable within your virtual world. Of course, this can extend far beyond the simplebutton or interface control. It can be as complex as a 3D virtual world through which users can stroll andchat with other users, or as simple as a question mark on a button as an icon metaphor for “help”. Themetaphor can encompass an entire site or a single button, and anything in between.

Considering metaphors is a great way to break down creative blocks as well. Having trouble developing asite for a dance studio? How about creating a navigation system based on the old numbered-footstepmethod of dance instruction? That will give you a unique look that immediately brings to mind “dance”and “instruction”, as well as footsteps that can offer physical direction and orientation—a possible funmethod for directing an audience to different pages within the site.

Of course, metaphors are extremely useful, but not always necessary or welcome. A news site wouldprobably not be improved by the real-world metaphor of a newspaper. Considering the audience, whovisit the site first and foremost to find information about the current happenings in the world, a text-based page with little superfluous frills seems most appropriate. Just as in language, you must also becareful not to start mixing your metaphors within a single site. Once a user is used to your method ofpresenting content, stick to it.

Navigational systems

OK, I have to admit that this is an area that I jump to early in the process (remember, I said that you needto find which methods work best for you!). Once I know what I am building, why I am building it, andwhom I am building it for, I consider how users will navigate through that content. Usually for me, this istied in very closely to a metaphor, taking into consideration the level of web user I believe will be visitingthe site. Navigation systems can vary in complexity from a simple HTML-type navigation bar for the user

III Build Your First Web Site

10

with limited web experience, to interactive 3D navigation systems for those with more experience, toexperimental navigation systems developed for the design community. Navigation can be an over-the-topmetaphor like a remote control sending a virtual television screen from link to link, or a standard drop-down menu similar to those found in most applications—anything that will allow your users to travelthrough and examine the content in your site.

It is best to consider your navigation at an early stage of development, as this will be your user’s maininterface to the content. Who will care about the color, font or layout if the navigation system is not wellthought out and planned carefully? Your users certainly won’t.

Color scheme

The first thing a user will see when they reach your website will not be the logo, the amazing navigationsystem, or the wondrous Photoshop montage you put together. No, the first thing a user will notice is thecolor scheme. Whether consciously or subconsciously, the user will form a first impression of your sitefrom your choice of colors. We as humans, and more generally as animals, react strongly to color.Consider in nature the extraordinary plumage of certain sexes, all in an effort to attract attention.Consider that red automobiles are pulled over for speeding (even when they are not) more often thanany other color. Consider that the color of paint in a hospital room has been carefully selected to evokethe proper feelings in the patient. Just as with music, we have base, unconscious reactions to colors.

This is not to say, however, that red is always best used for “hot” and blue for “cool”. Coca-Cola has doneextraordinarily well selling a cool, refreshing drink with a red label. However, it is definitely something tokeep in mind as you experiment with colors. If there are any colors that you automatically associate withyour site and its goals, then start with these first. Then pick wild opposites for consideration as well.Develop a number of color schemes built around your primary color choices, selecting complementaryor tertiary colors on the color wheel (CorelDRAW has a wonderful facility I like to play with that createstinted palettes based on three, four or five associated colors). Of course, there’s nothing to say you can’texplore a monochromatic website instead, if it helps to support (or doesn’t distract) from your purpose.

Inspirations -III

11

The color palette is something that you can play with throughout the course of your design, but isnecessary to solidify before you start processing supporting images. You don’t want to have tinted anumber of JPGs an orangey hue, only to discover that the orange clashes with the color of the logo.

Visualizing layout

You have the reasons for the website, a definition of the intended audience, the content and media youwill be presenting, a color scheme, a possible concept for the site and a system to navigate with.Eventually, you have to get to the actual layout of the information. As in all of these steps, there areseveral ways how to proceed.

At this stage, I still tend to stay away from the computer (though it will enter in shortly, I promise!) Onemethod I find very useful is rather “crafty”, but easily allows exploration of layout. After determining thenecessary content for my home page, keeping in mind the method of navigation I have devised, I cut uppieces of construction paper to match the relative dimensions of each of my assets (sometimes I simulatethis in an illustration program like Illustrator or Flash itself, but here I want you to focus on the exerciseand not the tool). Once I have each of my assets, I get a blank piece of white paper and I begin to arrangethe pieces of construction paper on the white paper in various configurations, experimenting with waysto block out the information. Even if I have already definitively determined my color scheme, I stick withwhite paper and a single solid color of construction paper as I arrange at this stage. This is because I amplaying more with the space of the page than I am with the ways the colors fit on it.

There is a term in theatre coined by Peter Brook called “The Empty Space”, and this is what I think of asI’m pushing the paper around. What it means is that the negative space on the page, (in other words spacewithout any content) is just as important to balance as the positive. The empty space offers relief for theviewer’s eyes and helps to focus the important information. We have all been to sites that seemed intenton cramming as much content onto a single page as possible. No empty space is left unturned! I don’tknow about you, but I feel claustrophobic at such sites, and they often scream “amateur!” So, alwaysremember to offer an adequate amount of breathing space for your content. Examine how positioningthe empty space can direct a user’s eyes around the page.

I also keep in mind how I will be bringing on future content. Unlike on an HTML page, I usually prefer tobring subsections right onto a main page, as opposed to replacing the entirety of the page with newcontent when a link is pressed. This means that the home page layout will directly affect the subsections’layout, and vice versa. It’s important to consider this as you space the content.

III Build Your First Web Site

12

Another thing to consider is an asymmetry of design. There is nothing wrong with symmetry, per se, butit often produces an unexciting, motionless site—a layout more at home in a stuffy application than adynamic web page. This is another great way to utilize the cutout papers. Since all you are doing isrearranging paper, there’s no reason not to explore every possibility before you get on the computer.

Once you have satisfied yourself with how pieces will fall on the page, you can finally boot up yourmachine if you’d like and try the layout in an illustration program like Illustrator, Freehand, CorelDRAW,or even Flash itself. If you use Flash, remember that this stage is about laying out the design, not buildingit. This is the stage where I examine how the colors will fit together on the page, what background colorI will use, and how each of the elements on the home page will be colored or tinted. Again, I use onlybasic geometric shapes to simulate each asset, instead of the actual asset itself. I’m examining more theabstract feeling I get from the arrangement of the colored content. If I like how the colors and shapesare interacting, I proceed. If not, I look at what is still troubling me and try to fix it.

The feeling of a font

The last step I usually take before I begin mocking up a layout within Photoshop or Illustrator (I tend tostick with Flash for creating the interactivity, but not for the design and layout) is to look into which fontswill best suit the site I’m creating. Most of the time, this will only be one or two fonts—a sans serif fontthat’s easily readable like Arial or Verdana for the body text, and possibly a livelier font for headings.When you develop a Flash site, you have the option to embed fonts in your movies so they will remainconsistent for all users. This is great in the sense that you know your design will look the same foreveryone, but there are also problems, like added file size and sometimes-unwanted anti-aliasing (asdiscussed earlier in this book). However, you might not need to embed heading (since the letters you usewill be limited), and the anti-aliasing will probably be desirable for the larger font. Either way, the choiceof which fonts you use can be just as important to the look of the site as the color scheme.

Inspirations -III

13

Letters that appear to be cut out from different newspaper clippings, as in a ransom note, evoke veryspecific feelings. Illuminated lettering, as would appear in a Bible from the Middle Ages, evokes acompletely different feeling. Whether you use novelty fonts, hand written fonts serif or sans serif, yourfont will give users an immediate impression of your site. Choose with care the fonts you will usethroughout your site, and remain consistent.

CorelDRAW has another great facility that I utilize when choosing fonts—a live preview of the font for atextbox. Using this, I can type in a heading name I intend to use, then quickly scroll through my installedfonts to see what best supports the feeling of my site. Flash has a similar feature. You can also use a fontmanager to quickly scan your installed fonts to choose the proper font. Head online if you can’t find onethat works for you—countless sites offer fonts that you may purchase for a minimal fee.

One terrific feature to explore with Flash, as you continue working with the application, is the ability toexport a font from the library, and then use the embedded font throughout your movie. The benefit ofthis becomes most apparent when you want to change the font used in the movie. A simple switch in thelibrary will update all of the text fields using this font throughout your movie. It’s a great way toexperiment with different fonts during the design stages.

Mocking up

Finally, with all of your practical questions concerning the site addressed, the colors and fonts chosen, themedia prepared and structured, the navigation decided, a concept explored and the layout determined,you can approach mocking up the design with the knowledge you have prepared what you need toconfidently create. The preparation acts as a support structure. You are not heedlessly throwing togethercontent in a haphazard way that will irritate or confuse your audience, but instead building a site thatsupports and enhances the content you have prepared to place on the web.

With that support structure providing the foundation, open up your layout program of choice, whetherit’s Photoshop, Illustrator, Freehand, Fireworks, Flash, or whatever, and start putting it together. The designnow is up to you. Arrange the actual content on the page as you planned in your earlier design stages.Make adjustments as you need, play with the arrangements further, and feel free to experiment as yougo along—just because you decided on a layout earlier doesn’t mean you’re stuck with it! Take your earlierlayout decisions as blueprints, but don’t feel confined by them.

Bring it back to Flash

Once you’re satisfied with what you have produced in a static form, it’s time you begin putting it togetherfor the web. You are now at the same point at which you started the exercises in this book—a fullyrealized idea that you want to make interactive for the web. So now it’s time to get to work!

Bring it all into Flash, and apply the knowledge you’ve gained working through the exercises in this book.You have started your own site from scratch, and come up with a solid design that supports your content,so now it’s time you make Flash work for its supper!