When I was in graduate school at NYU for Production Design, I was constantly hearing the term “form follows function,” or visa-versa. If you aren’t familiar, the terms simply describe the constant battle that designers have in deciding which is more important—the project’s esthetic appeal (how it looks), or the project’s functionality (how it works). Does one take precedent over the other? The simple answer is that it probably depends on who you ask. Not what you wanted to hear right? In the case of Web Design & Development, the structural designer or programmer is going to tell you that the site has to simply get the information to the user and collect feedback if needed, in the most efficient way possible. The artist, on the other hand, is going to tell you that if the site doesn’t have a striking or cohesive look, the user won’t bother even trying to see how it works. The true answer to this constant battle most likely falls somewhere in between. The key is make your site function smoothly and efficiently, and look great at the same time. It’s a tall order, but these tips should help.
Function, How your site works:
It is best to start with what you want your site to do for you and the user first. Being both an artist and a programmer I can tell you that it is easier to make a well functioning site look good, than the other way around. These following tips will help you get started. Microsoft, also, has one of the most detailed pages on site structure that I have ever seen, and it is worth a read at: http://research.microsoft.com/en-us/projects/website_structure_mining/
- Make a detailed list of goals for your site, including what information that you want supplied to your users and what information you want to get back from them.
- Break that list down into organized sections, and from there to pages. Try to keep one goal to a page, one set of specific information to provide to your user. Break that up so that the information is supplied through varying methods. (eg: Text, video, graphics, pictures) to keep your users from getting bored.
- Decide the most efficient way to collect each piece of information you desire from your users. Which information you want them to enter manually, and which you may want to collect behind the scenes with tracking scripts, or similar methods.
- Layout the flow of your site in a graphical map, showing the details of how you want the pages to link to each other, and how you want the whole site to flow under the user’s watch. Remember, you can manipulate the user to see what you want, when you want.
Form: How your site looks:
Once you have your entire site laid out and know the specific flow, before you begin to write the code and actually program the pages, you need to design the look of the site. Many programmers will wait until all the pages are set in rough skeleton form and then apply the look, this I have found to be a mistake. You end up compromising the esthetics this way. The Web Designer Depot has a list of sites with great looking designs that may give you some inspiration: http://www.webdesignerdepot.com/2008/12/100-websites-with-outstanding-artistic-design/
- Decide the emotional context of your site. Will it be bright and happy as for perhaps a travel agency site, or dark and somber. If emotion would be a detriment, as in the case of, say, a pipe-fitting manufacturer sales site, neutral shading that won’t confuse focus may be better.
- Choose a color palate for the site, don’t just randomly select colors. At minimum you need a dark, light, medium dark and medium light color. Try taking colors from a classic artwork, like something from Dennis Hopper for instance. Match them as closely as you can to web colors. You may have to substitute graphics.
- Choose a “theme” for the design, as in classical, or contemporary, maybe industrial. This may influence your color palette so you may decide to do this first. For instance, if you decide on a classical theme, you may choose a palette of sepias.
- Once you have a theme and palette, decide on your actual design. This is where you choose how the shapes of graphics, where to put images, how to layout each page. Also decide the functionality of the site, how interactive you want it, if you want animation, and so forth.
Once you have both the form and flow of information structured and laid out, and you have chosen a cohesive theme and palette, and once you know how you want your site to function and the programming you will use—then you can begin writing code and executing your design. The more time you spend planning, the smoother the actual programming will happen, and the better the final product will be. Form does not have to follow function or the other way around, both can be achieved simultaneously.
John Adams Jr,
John is a free-lance author and journalist born and raised in upstate New York. He is currently living and writing in Saint Augustine, Florida where the temperature is a bit warmer and the lifestyle more relaxed. The move has allowed John to broaden his range as a writer and he now lends his unique voice to everything from news and review articles in print and on the Web, to a broad range of eBooks and creative pieces. John’s work is beginning to attract attention from a wide variety of readers, in many countries. See John’s Google Plus Profile.
