How to design a beginner website

Day by day Web space is being cluttered with new websites. If you are launching a new product or setting up your business or simply you want to share your views a website is the way to go. Not only does it provides you a much wider platform for your audience but also gives you a unique identity. But, choosing a proper design for your website is a time consuming and very thought invoking task. Here in this article I would like to focus upon various aspects that need consideration while creating and designing your website. This article is purely based on my own personal experience and the information I gathered from several resources.

To make this article useful, let’s take an example before hand - An online discussion forum. 

  • Decide about the content
    There are many things that should drive your designing process as far as a website is concerned. Different factors attribute different weights. According to me "content" is something that should actually drive the designing process for a website. After all, it’s the content that the end user is going to see and like. If you are familiar with OOP (Object Oriented Programming), then you know everything revolves around objects - the core data element. In case of a website, this object is "content".

    So how does content attribute to different design models?
    You got to be crystal clear about your content right from the beginning. News / feeds have a different requirement then an online selling store. Online games need entirely different infrastructure then a website that provides online library of books. Design of a blogging site is different than a discussion forum. Simply put - Focus on content and design accordingly.

    coming to our example:
    Discussion forums require dynamic content and are mostly end-user driven. You got to provide your users an interface to reply back to the ongoing discussions. Not only this, the data has to be divided and stored categorically. You can think of the design as a tree, where at the top you might have category and sub-categories to distinguish various discussions. Next you can have several threads as children of categories and the same relation applies to the replies posted for a specific thread. Advanced users can create one more level where a reply to a previous posted reply needs some relation-ship too e.g. When you provide "quote" for already posted replies. In short, you need to handle a hierarchical structured data

 

  • Static OR Dynamic
    A static website is something where the data shown in webpages needs to be updated manually. You would go and manually edit your html files and upload them again. You can create a simple webpage of yours with your Resume and interests which doesn’t require frequent updates. This is an example of static website. On the other hand, Dynamic websites are mostly user-driven and are in a need of constant updates and that too from several different geographical locations. Examples includes social networking sites, discussions etc. etc.

    Now I know my site is dynamic/static, how does it affect my website design ?
    Well, it does make a difference. A Static website can be simply uploaded within hours; all you need to know is html, CSS and a bit of copy/paste skills. However, for a dynamic website you need to have the knowledge of one server side language (most common are php and asp), knowledge of at least one Data Base (mysql is by far the easiest to integrate and use) apart from the combination of HTML and CSS. And yes, this requires a bit of programming and would surely consume much more time.

    coming to our example:
    As mentioned already discussion forums are purely dynamic in nature and thus require the above mentioned skill set.
  •  Using Design Tools or build from scratch
    This is the most troublesome question to answer. Every individual has its own taste and liking. Some like it cooked, while others earn and work hard for it. I would say that it’s up to the developer to decide which way they want to go. There are plenty of design tools available - both free and paid. Some tools like Joomla, Wordpress provide full end to end design capabilities, while others might help at one particular aspect like FrontPage, Dreamweaver and Photoshop etc. But remember, everything has it pros as well as cons. So think before you decide.

    coming to our example:

    My personal choice is designing and building website from scratch. It gives you immense freedom and you can do what you want. Building website on your own takes its own sweet time, but it also saves a lot of time which you would waste in understanding the design tool if you plan to use One. It is easy to debug and isolate issues if you design it yourselves; Trust me, issues will come as soon as your design logic grows. The most important thing to consider before going for a design tool is - What if in future the tool stops providing you their services?

  •  Development Process: What all do I need
    Lets categorize the development process itself:
    * Front End - this is the output that is visible on the webpage. Its written in HTML and stylized by CSS.

     * Back End - this is the piece of code that is run at the server and is actually managing the user's request and sending back the desired output to them. You can use any programming language to help you in this case. Most common are PHP and ASP.

     * Data Base - This is the storage for all important data related to your website. Eg. If you want to create a login page, user's information can be stored in Database for retrieval at later stage. There are a lot of choices available, but MySQL is easy to integrate and is open source.

    * Front  End Scripting - Front end scripting provide those cool features like popup boxes, confirmation boxes, cool rating widgets, side menus and many more. JavaScript and jQuery are best suited for this purpose.

  • Focus on Usability not show-Off
    A good website is one which provides the users an interface that is easy to navigate, easy to understand and easy to remember. What good a site is if we don’t even know how to navigated through its links. So always focus on usability, always design your website from the perspective of a user. Place yourself in his shoes and then think, Take suggestions from your friends, Go through websites with similar content.

    coming to our example:
    Thinking of discussion forum, I am listing down few points that needs consideration ;

                    * Easy navigation from one category to other

                    * Easy navigation from one thread to other

                    * Some way to list down related threads

                    * Some way to list down threads from same category

                    * Some way to list down threads posted by same user

  • Smooth transitioning between pages
    Whenever you leave one page and move on to another, the transition should be smooth. Sudden changes while browsing different pages is an example of bad designing and yes bad coding. While developing, you should have a standard template and all other pages should be rendered from it.
  • Test it with all the errors and warning flags ON
    Sometimes, we just go and change the reporting tool not to throw any warning while we are writing code. E.g. marking off all the error flags for PHP in its configuration file.

    But, that is a bad programming practice; all warnings unhandled are potential errors. One way or the other, some day they will bug you and it would be really bad if you have your site up and running for few months and suddenly people start complaining about errors. It’s hard to isolated error in later stages, so better take care of them while coding itself.

    I prefer Firebug that comes free as an add-on to Mozilla Firefox to check for run-time errors.

  • Lastly, Learn From Mistakes
    Who doesn’t make mistakes, and if you going to design a website even for the nth times you are bound to make mistakes. So, better not to worry about them, in fact try to analyze their root cause and rectify them in your next attempt. Every new mistake makes us think and thus opens our minds to ponder and suddenly we are flooded with new alternatives. So, make mistakes but be sure to learn from them.

- Pankaj
Happy Designing !!

 

comments powered by Disqus