Join Shane Rebenschied for an in-depth discussion in this video The site construction process, part of Flash Professional 8 Beyond the Basics.
- View Offline
>>As you go forward and begin to develop websites for yourself or for a client, it's important that you have at least a basic understanding of the site construction process. Now keep in mind, as I go through these points, that the site construction process is really a sort of a subjective thing. It's not something that is the same for everybody that develops websites. It's going to change depending upon your style of developing websites and building them, as well as the people that you'll be working with. So just keep that in mind as we go through the following points, and that this is mainly just to give you a good starting place as you go to develop your own content.
The first step in the site construction process, and the process of taking a site from the idea phase to the final phase is - "what is the content that you have to work with?" In the case of the LA Eyeworks website, I know that I had some information about the company, the history of the company for example, the staff that worked there. I also wanted to display some information about the glasses frames that they sold. I also knew that I had a video to work with, as well as some audio. So I knew from the get go the basis of the content that I had to work with.
Once you have a decent understanding of what you have to work with, the next step is to figure out who is the target audience. The target audience is who is going to be viewing your content. And that's really one of the most important parts of the early phases of developing a website. You need to figure out who is going to be looking at the stuff that you're going to be designing. It's really important, because depending upon who is going to be visiting your website and the stuff that you design, it's going to have a large effect on whether or not you're using Flash altogether.
What kind of colors you use, what kind of type you use, and so forth. For example, if you're designing a website that is mostly going to be visited by elderly people, you don't want to have real small type on your website, because it's going to be more difficult to read. You'd want us use larger type in that case. And that's just one example of how the target audience really has a heavy bearing on how your website is both designed and developed, as well as what type of technology is appropriate to use. In the case of the LA Eyeworks website, our target audience is people who would most likely buy LA Eyeworks frames, and buy those particular glasses.
More than likely those are people who live in the LA area. So we know that they probably have a high-speed internet connection, and they probably have a newer computer, because those are the types of people that visit the LA Eyeworks store. So that is going to be our target audience. Now because we know they have a high-speed internet connection, and because they probably have a newer computer, we know for sure that we can use Flash, because that is appropriate for that particular target audience. Not only that, but we know we can also get away with having more in the site, such as rich media, like MP3 files and video, because again, they're on a high speed internet connection, so having a lot of media in the site is appropriate because the viewer can download that appropriately on their high speed internet connection.
So again, once we know who the target audience is, we can better craft and develop this site specifically for that particular target audience. Once you have an idea of what the content is, and you know who you're going to be developing and showing that content to, the next stop is to start with the layout and design. In particular, starting with a flowchart is a good place to begin working with developing the layout and the design of the site. Now as it name implies, a flowchart is a chart that depicts the flow of the website.
How is the viewer going to navigate through your website? Now flowcharts come in a variety of different forms. One of those is as you see here, which is basically just a chart that shows all the main elements of your website. For example, up at the top you can see that the main file is "master.swf." The "master.swf," as you'll see in the next chapter, is sort of the main Flash SWF file that all the other content loads into. That's where, as you can see again here in the flowchart, where the splash page, the main menu, and the MP3 player are presented.
That's the first section that the viewer is going to see. Oftentimes that is called tier 1, the first section that your visitors to your website will be presented with. From the main menu, the viewer can then navigate to the "About Us," "Frames," "Locations," and "Contact Us" sections, and that is depicted here in this flowchart. Now the lines and arrows depicted in this flowchart also show how the viewer can navigate from section to section. So you can see that the main menu is being presented in "master.swf" and from the main menu the viewer can navigate to that second tier section.
Which is "About Us," "Frames," "Locations," and "Contact Us." So the layout of the flowchart, as well as the lines and arrows, depict not only the structure of the site, but as well, how the viewer is going to flow, or navigate through the various sections of your site. So the flowchart is a really important part of the layout and design process of the site, because it gives you a really good understanding before you even start figuring out the design of it all. How the viewer is going to be navigating around your content.
The next step is to storyboard. Now this is a term that is actually taken from movies, but it also fits well here when you're developing a website. Now the storyboard is where you get a little bit more specific as to each individual section of the website. Now for example, you can see here that this is a storyboard of the very first main page of the website. Now as you can see here, this is just a simple sketch of the main page. A storyboard can be something simple like this, or it can be more refined and cleaned up in another graphics editing program of your choice.
Either way, the main purpose of a storyboard is to get more specific with how each page is being presented in your site. Again, you don't have to draw every single graphic, but the main purpose of a storyboard is to begin to show where the various elements in each page of your website are going to be presented at. The purpose of all these steps before you actually get in there and start designing every little nook and cranny of the website, is to get a lot of the elements figured out before you start spending the time with all the details that make up the website.
The site construction process is sort of like an oil painting. You start from the very general and work your way to the very specific. That way as you're developing your own work, and even showing that to the client, a lot of the broad concepts can be ironed out as you work more specific. So in the end you're left with a well-designed website. The storyboard is another element in that process. Now from here, an optional step that you can go to is something called a static mock-up. And that would be more like a more refined storyboard, where instead of just a simple sketch, maybe you've gone in there and put in some of the basic layout elements of the website.
You can put in squares where graphics might be and where text might be presented, but the point is to get a little bit more specific past the storyboard phase, so you're getting yet an even clearer idea with how each page is going to be laid out and ordered. Again, that's an option step. From there you can get even more specific and start working on the actual design of each section. So that is where you'd start going in, laying out your colors, laying out where all the graphics are going to be, where the text is going to be presented, video, music, and so forth.
Now once you've done all those various steps, by this point you should have a really good understanding with how the whole website looks, and how each page is going to be presented. Then once you've done that, you can most likely jump right in and start working on the development and implementation of the website. So it's at this point that you'd most likely make the transition from working in any old graphic editing program, PhotoShop, Illustrator, Freehand, Fireworks, and so forth, whichever you're comfortable with, and making the leap into Flash. You can then start working on laying out the navigation.
Now the reason why I put that toward the top of the development and implementation phase, the navigation is how the viewer is going to go to each section of your website, so it's a really important key part of the website as a whole. Once you figure out the navigation, and how that's going to be presented and ordered, it's going to give you as a designer and developer, a much better idea of how much space you have left to work with to present that information. So figuring out the navigation is a key part as you start developing and designing the actual website itself.
Once you've decided on the navigation, then you can start designing and implementing the main content, as well as the content that comes underneath that, sometimes called the tertiary content, or tier 2, tier 3 content. So you get the navigation figured out, then you can start working on, in Flash, designing and laying out, and actually implementing and programming all of the interactivity, laying out all the content, and so forth for your website. Once you get that all laid out, then you can actually start linking all the various pieces together by making the navigation interactive.
So you can take your navigational elements that you laid out in the first part of phase 3, and actually link those so that they load in or go to your tertiary content. So the whole thing starts to get interactive. This is one of the last phases of the development and implementation phase, because this is where you start to see all the pieces come together. Up until this point you've probably worked on each individual section of the website, but the last phase is to link them all together, and this is where it all comes together into one cohesive website.
The last step, but certainly not least, is to deploy and upload your website. So you would take everything that you've been developing on your computer and up load it to your website so you can test it there. Now this may seem like a minor sort of phase, but it actually is really important, because up until this point, again, you've been testing your work off of your local computer. Now when you take that same content and upload it to your website, and you view that content as it is being downloaded off of a web server, it can change into something complexly different. Because again, as you're viewing your content locally, it's loading off of your hard drive instantly.
So anytime you're loading text into your Flash project, or movies, or video, or audio, it's all loading in instantly. Depending upon the way that you've developed your site, Flash can be pretty sensitive as to when things are loading in, if they're loading in before something else, and so forth. So when you actually upload your website to a web server and you're viewing it over the internet, things are loading in a different times and that can have a major affect as to how the website functions as a whole. So once you've gotten your website finished, it's a really important process to upload it to your website and make sure that you test it there as it is being downloaded.
Not only that, but it's also important to try to test it on a variety of different computers, operating systems, internet speeds, and so forth, from different locations if possible. That way you have a much better idea as to what the end user that is actually going to be visiting your website will see. Then you can make fine-tuning adjustments based on what you've seen, and how that website is being downloaded off of the web server. So even though it may seem like a minor point, the deployment and the uploading of your website, it is actually a very important element in the whole site construction process.
Now again, keep in mind that the points I've mentioned here are just suggestions as a place to start. Most likely over time you will end up fine-tuning these steps to better suit you or your team's methods.
- Integrating Fireworks, Photoshop, and Illustrator content ActionScript Classes, Objects, Methods, and Properties Using the LoadVars Class to build scrolling text fields Using HTML and CSS with Flash Integrating usability and functionality Building an ActionScript-driven navigation system Building a dynamically loading slideshow with text and images Building a Preloader Using Components to create a feedback form Testing and publishing your final project