Design Organized Website Structures

When developing a website, you must proactively decide its structure before starting the coding. But what does the Web Structure mean at the very first place?

Website Structure can be defined as follows:

When you talk about the structure of a website, you are talking about its components, their working, their location, their inter-dependency, and their interaction with the user.

The design of the Website Structure does not include code. Generally, the design includes, wire frames, sketches, mock ups, lists, flow charts and other visual aids.

What is a component? Well, it can be defined as follows:

Components are the useful or functional parts of a website

Every component has a particular purpose and function. For example, navigation bar of a website has a purpose of providing navigation links to the user. But some, components are versatile and have multiple purposes. For example, a header of website can contain a navigation bar, a search bar, a login form and also a toolbar (with small action buttons like language change). Now, the Header component has three to four functions. That's interesting to note that a component can have sub-components like in our example, the Header component includes the Navigation component.

Besides having a function, components also have some specific location on the website from where the user can interact with that component. The design must categorically specify the location of all the components. And if the components are fluidly moving, then their movement and other behaviours must clearly be defined.

When an application includes multiple components, chances are, they are sharing some dependency. For example, the login form of Facebook in the navigation bar is dependent upon the navigation bar. If, due to bad design, the navigation is not easily accessible then the login form is definitely inaccessible. That was a location-based dependency; it could be functional as well.

Now that we know the things, the methodology is as follows:

1. Make a list of all components to be developed
2. Label the functions of all the components in that same list
3. Categorize components that perform the similar functions
4. Make a new list of inter-dependent components
5. Make a another list of visible and invisible components (with interaction point of view)
6. Apply the naming conventions on the components and their classes & Ids
7. Make a detailed notes on the behaviour of the components

All of these steps are prior to the coding phase. You have to maintain the list and the follow it accordingly. And during the development phase, do not make decisions; just do the stuff as decided in the decision phase.

The benefits of such an approach are obvious and instant:

1. Organized Code
2. Lesser Errors and code optimization cycles
3. Oraganized Code
4. Quick Development than anticipated
5. the big picture is always in the mind
6. Keeps your project from the big bang approach