![[ anatomy of a website ]](../../res/image/headers/anatomy-of-a-website.png)
The process of taking the idea and need for a website and translating into a useful online presence does not happen overnight. It starts with some need or goal within your organization. It is executed by converting that need or goal into a useful project for you and your audience. This process has litle to do with wishful thinking, and more to do with skillfully assembling your intention into creative ideas and technology that make sense. This page explains how this can best be done. Wishful thinking and imagination are important, but they don't get the job done.
Purpose of this page
Overview of the anatomy
Most people miss this step or do not take it seriously. At [ i ] motion design we take this step most seriously. We will work with you every step of the way to make sure you have the best plan possible for your budget.
Start collecting information, doing some research, and asking some hard questions:
Yes, a website. Yes, with information and maybe some selling, but what are some specific measurable outcomes that you can describe This is where building an outline comes in. Before you contact any designer for any project you should have an outline of the key points that you are trying to express and/or accomplish with that project.
Do not make a website. Do not outline what you imagine the menu buttons will say. Make a cognizant outline of the actual TOPICS that are important with some bullet points.
You'd be surprised how much this helps not only understand the goal, but how much time it saves down the road when it comes time to generate content, and decide what type of design will work best to communicate this information. Because the fact is information and communication is what a website is all about. Whether it is prim and proper or flashy and wild. Regardless of style of presentation, there is something being presented, and that invariably fits nicely in an outline.
Once you have the outline done, organize that information into logical groups. Categorize and prioritize. When you can hand that outline to a customer, prospective investor, or your sales team and they get a cursory but clear understanding of what your message and intent is, you have succeeded.
We can help advise and guide you through this step, but it is best if you take care of this step. You know your business, industry, and products/service better than we can. [ i ] motion design does do research and try to understand your business as best we can, but you will make the difference between a truly successful project and just another website.
Some people imagine that planning and organizing is the hardest part. But in reality, it is much easier to create an outline summarizing your message than to put together the real text and imagery that will really do the job.
This phase is all about gathering together existing marketing materials, photographs, graphic design, anything that contains information relevant to your current project. If it is digital material start a file that references the relevant information and imagery, or even make a new directory on your computer and start copying the stuff in there. If it is hard-copy stuff then start putting it in folders with sticky notes indicating some possible uses for that information. And remember to categorize it by potential use. You don't have to know that a particular picture will be used on the support page but you can label a picture, 'good general office shot', 'facility photo', 'this picture really demonstrates the efficiency of our marketing department'. And for all the topics and bullet points in your outline, start expanding these into complete well-written paragraphs.
Maybe you have previous marketing brochures or other websites that already have text and images that you can start pulling from. Look at your old copy and images and determine if the verbiage is still good, does it need updated, and add it to the outline.
By the time you are done with this phase you should have an outline that has sussed out into nearly ready-to-go site text. You should have folders (real manila one's and the kind on your computer) full of images, logos, branding, and other elements that can be used on your new site.
This step is where we really start to get involved. Once the outline is complete our creative minds really get flowing looking at the various ways the information could be best presented and delivered for maximum effect. We can also setup photo shoots, write copy based on your outline, and design whole database systems around your project needs.
Once we have a good understanding of the needs of your project and its goals and intentions it is time to look at what technology might be required. This process begins to work in tandem with the design process, as we determine what would be the most effective way to present and deliver your message.
It is often a bad idea to start with technological considerations, unless they might play some role integrating with existing systems you have in place. While getting started it might be necessary to know what database systems you currently use, thinking too much about what technology you want to use without knowing exactly what you are trying to do or how it will be presented may limit the outcome of your project. We nearly always start with the goal and the content, then move into technological and design considerations.
Whether you are doing your website in-house or hiring a design firm, once you have your planning, organizing, and content ready it is time to start thinking about layout.
Some people want to think about the design (what it will actually look like) first. But it is important to really examine the message and its intent to determine first what type of layout will best present that information. This becomes a grounding point for making important design choices later. Is your site full of information? Is it mostly images or product spec sheets with very little text? Is it mostly an online shopping system? All of this lends itself towards different presentation layouts and formats.
We help you every step of the way discussing the options and examining why one format would work better over another.
Below you will find several example layouts that embody nearly the entire spectrum.
Basic page layout - one column with header
Basic page layout - once column with footer
Common page layout - one column with header and footer
Two column only - typically used as the body layout for a one column page layout
two column with header
two column with footer
two column with header and footer
three column only
three column with header and footer
three column with header
three column with footer
Now we start getting into serious design decisions. Will the site design within the layout be mainly framework or integrated?
An open template style design that permits the display of wide and varied content. This type of layout is good for large informational sites where the pages have wildly differnt lengths and intentions. The framework is created in such a way as to best facilitate the broadest content possible. The framework layout is more like a traditional magazine layout where monthly columns and sections appear in the same style and formatting month to month.
The integrated layout is designed to by more stylized and typically uses the graphic elements and user interface as part of a very specific message. The integrated layout is more like a graphic intensive brochure with little text.
It is possible to use a hybrid integrated-framework layout where it is highly stylized and yet formulated on every page. But this least common.
Most websites are generally framework sites that have sections or pages with integrated layouts. A shopping cart where the top-level index looks like a glossy magazine ad and focuses on featured products that season, while the actual product pages are in one unique format.
Generally speaking a framework layout with 2-5 different layouts will cost less than designing a site with an integrated layout with even 1 layout. And unless you are making a one-off vanity site, such as for a film or one-time event, or you are in the fashion industry, an entirely integrated layout is usually unnecessary and actually gets in the way of the message.
Most websites have a somewhat integrated homepage and then all the subpages within the site are part of a framework, sometimes having key section indexes with their own integrated layout.
This is differnt than the actual design. The look and feel deals with the concept behind the message.
Examples of look and feel
Understanding the look and feel you want can help ensure that we make the best possible design.
This is where we start talking about the design specifics. Once we understand the look and feel we can dig into the actual design elements that we will use to convey the look and feel.
This does not necessarily mean choosing literal imagery, but it tells us how to style the design elements to best express your goals.
Once we have all the previous steps completed we can put together a design to review and revise.
We mockup our sites in photoshop so that you know what you are getting into and whether the project intentions have been met.
With the design approved, we output the art in appropriate formats so we can begin building the site
Next we setup your domains, both on the live server and our testing server. Every site we develop has its own testing zone, where we can safely work without affecting your real world business.
This is also where we install any software or code, such as Promarkit.
We take the design and begin translating it into valid CSS/XHTML pages. We start with the framework pages, which we will then use as templates to begin inserting other content and imagery. Integrated layout pages get their own focus at this time as well.
This is an important part of the project that so often gets overlooked. It is important to test the site, by as many people as possible. We test everything thoroughly, but it is easy to miss things when you have your nose right up in it, and you know exactly what it is supposed to do and how.
Often it is good to even encourage existing customers to help with the testing process. Invite select customers to have a look at the new project and see what they think. Because in the end, it is the customers who find flaws and bugs.
That's it! We change some settings in the magic world of the internet and there you are with a beautiful brand new website. We test it again on the live server for completeness and then we all sit back and watch the money roll in!
We hope that this page gives you a better understanding of what we do and how we can help you make the best website possible for the least amount of money.