How do YOU do it?

[gilamran]

Hi,
Just wanted to ask...
When you start developing a site in Flash, do you start from the graphics of from the funtionality?

do you make it work first and than make it look good, or do you make it look good and than the functionality is easy enough?

or you do it together?

Thanks

[Odisey]

Is this question designed to confuse people? If so .. it works!

Design theory is somewhat an art. Let me rephrase that, "it is absolutely an art." Ask anyone how they do design and you will find everyone has a unique answer with their own methodology. People develop personal processes to the madness. People generally start off in a linear model. Say with graphix -- getting all images looking good, then move on to the code structures and function. One area, then the next, until you are done. Once you get proficient though, you will find yourself using a non-linear interactive model. In other words if you choose "Site Purpose" as a point of design departure, you will think graphix and function in one concept -- not two. As time goes on, you will begin to think globally and attain larger concepts which include more of your design options. You will evaluate them and adjust them as they are interactive (i.e., changing one changes the others).

And once you have it right, one day you will get a phone call. Someone will ask you to design something. Everything will rush to your head at once. And it will explode with a loud pop.

[Frets]

Oh I get it a flash question nevermind


*walks away*

[whispers]

I make things 'functional..then skin/theme them.

easier to make a square I made in flash into a button really quick..then it would be to spend some time making a layout in PS then slicing and importing each piece... IMHO.

as stated to each their own...everyone does their own 'thing' to reach the end goal.

[nocrapchurch]

It depends on the project. Sometimes, you need to mock-up something for a client to get approval. In that situation, the functionality comes second.

Other times, the functionality is the most important thing. Like if you were designing a complex calculator for mortgages.

It all depends.

[Sybersnake]

some will say otherwise but it is always good todo

technical deisgn > interface design (and coding which does not touch the interface) > interface coding > testing

when doing development for HTML.. it is usually most efficient to decide on the features then fully develop the XHTML/CSS/JS interface before any frontend development occurs.

[jAQUAN]

Form follows function. Art work takes no time and can be a complete after thought.
It's the information super-highway, not the animation superhighway. If you haven't thought out what the sites' purpose is and how to achieve that, all the design in the world wont save it.

Start with the menu, that will tell you how many pages to write. Then add content, meaningful content with a purpose. After all the information is there and everything works, THEN it is time to accent with art.

If you have FF and the dev tool bar, goto www.csszengarden.com and shut off style sheets. That is what a proper page looks like. If the main sections are all div tags, styling after the fact is quite easy.

[Sybersnake]

Form follows function. Art work takes no time and can be a complete after thought.
It's the information super-highway, not the animation superhighway. If you haven't thought out what the sites' purpose is and how to achieve that, all the design in the world wont save it.

Start with the menu, that will tell you how many pages to write. Then add content, meaningful content with a purpose. After all the information is there and everything works, THEN it is time to accent with art.

If you have FF and the dev tool bar, goto www.csszengarden.com and shut off style sheets. That is what a proper page looks like. If the main sections are all div tags, styling after the fact is quite easy.

the problem with form follows function is that form must be created in order for interactive function, resulting in the form step being created twice.

same thing goes with programming, a lot of times you define how a class or package does and not how it does it. that is actually the purpose of UML to design form before function (when it comes to programming)

[argonauta]

I hire someone in India.

[FlashLackey]

When you start developing a site in Flash, do you start from the graphics of from the funtionality?

do you make it work first and than make it look good, or do you make it look good and than the functionality is easy enough?

For me, most of the time, the assets (graphics, wireframes, etc) are worked out before flash development begins. BUT, a lot of functional concerns are decided in that phase, knowing what flash will and will not be more or less capable of. So, to answer, usually the graphics first.

However, I suspect your question is assuming that one person is working on a site from the ground up rather than a large team effort. In those cases, I do prefer to build an application without design in mind first. So, they end up being a bunch of unskinned components and place-holder graphics. Then, I go through and design everything out. I think that approach has some advantages toward building a more sound product. BUT, its entirely impractical toward getting client commitment for a project. Usually, the look and concept needs to be spec'd out and signed off on in the form of comps and wire-frames before a developers efforts will be invested in.

[Genesis F5]

I think one fundamental element that we can all agree on is establishing a foundatation on which your entire site will be built. That foundation is the objective of the site your building. So, say you're building a site for a local business that now wants to sell their products online.Your foundation you're building on is (objectively speaking) to build an ecommerce site that will showcase products that are also being sold locally.

That's the very first place I begin. Once I have that, now I need to decide what my site needs to be effective and non invasive. I want to build the most efficient page possible but deliver a substantial amount of content. To do that, I separate the site into "components." Here are a few:

• Media (background music / music players / video players)
• Photo galleries (dynamic photoreels / thumbnail galleries)
• Transactions (checkouts / payment options)
• Ecommerce (shopping lists / product galleries / product information)
• Community interaction (forums / blogs / bulletin boards)
• Body content (text which defines that objective of the site)
• Contact (email addresses / postal addresses / phone numbers / operational hours)

That's a very limited scope, but you should be able to get the idea from that. By dividing into components, you can make a better informed decision as to what's appropriate for your site, and it really helps design and deployment times because you have a clear gameplan.

Once you have the ingredients for your site picked out, it's time to think of a way to present them in a manner that's easy to understand by the person interacting with the site. I like to either get a pencil and paper or open up my favorite photo editor and roughly box in the components (literally just draw squares) to get an idea for placement. It's very important that you try to avoid an unbalanced distribution of content. What I mean by that is don't have a rotating Flash 3D photo gallery, a Flash logo with a ton of animated gradients, and a Flash media player with some whacked out equalizer that when all running together, bring your computer to its knees. Try to design the site with efficiency in mind, but keep the progression logical. You don't want to blare music on a site, but put the media player 4000 pixels below at the bottom of the page where the user has to try to frantically scroll down to shut it off.

After you have gone through a series of checks and balances with your layout, now's the time to fuse form and functionallity into an alternating entity. I've found that to be the most efficient and fail safe method which basically involves doing a little design work, then applying that with your backend work to create a small single unit.

By working modularly, you ensure that the site can function even if another part fails. It's also good practice because it makes maintenance and updates of site more manageable.

But, like it's already been said; to each their own. You have to find what works for you. There is no right or wrong way to develop as long as you can achieve the same end result. And every project is different, so sometimes you may have to code and then design and vice-versa.

[MagnusVS]

I hire someone in India.

Haha! You do?

[Frets]

I am never outsoursing to Ecuador again.

[Natsia]

pretty then function.
then frustration because function doesnt work.

[jAQUAN]

the problem with form follows function is that form must be created in order for interactive function, resulting in the form step being created twice.

huh?

same thing goes with programming, a lot of times you define how a class or package does and not how it does it. that is actually the purpose of UML to design form before function (when it comes to programming)

I write everything with the ability to be easily edited. I built an XML photo gallery package a couple years ago that to this day can be dropped in and skinned in a matter of minutes. For instance, my MCL's onLoadInit function is set to check for a callback instead of hard coding a reaction so I can design transitions long after the fact.

There's some truth to what odisey said in that I've spent so much time around the subject matter that it all kinda hits me at once. But it's an out of focus mental image and isnt enough to just run with. So yea I do have a general idea what style of design I will be using but do most of the development with stand in graphics.

[Genesis F5]

Same here, Jaquan. I have a ton of effects / media players / dynamic photo galleries that can all be pulled / swapped into different designs and I use them all the time. It really cuts down on the burden of the backend aspect and allows you more time to concentrate on creating a richer visual experience. Plus, it doesn't make much sense to reinvent the wheel each time. Jaquan's Cultureplayer is a good example. He has the key elements (play / stop / volume) but it can be drastically changed just by the skin modifications he makes for it and if additional functionality is needed, he already has a good tried and true foundation to build on.