Web Design Basics

Web Design Basics

The web is a medium that is becoming more and more available for everyone. If your nation has a Digital Infrastructure there usually is access to the World Wide Web. Most web users belong to 2 categories of people, consumers (visiting sites and surfing the web) or web site creators (be it content, design or programming). More and more I believe everyone will become a creator and consumer at the same time.

The first is usually interested is surfing many pages mostly of interest, and consuming content. This blog is written for those of you needing to create and establish a web presence. Given the open source tools today, this is getting easier all the time. There are Millions of pages out on the web that are just static and sitting there. The sites that are successful are the ones that are updated regularly. A few years ago one needed an ad/web agency or a dedicated team to do all that work. Today updating a site is possible on both ends, content updates can be done in-house , and more complex technical development would require either a team or company with the technology and coding know-how.

Today most of the sites we see online, run on a Content Management System (CMS) – (basically meaning a system that allows the content to be edited and changed without having to know code)  and many of theses CMS’s are Open Source. The art is taking the CMS and hosting a site that can have a unique look and feel that gives something identifiable to the client.

Running a site on a long term basis you will need:
  • A online web Strategy (part of your Overall communication strategy)
  • Conceptualize, Structure, design and Prototype
  • Navigation, User Interface (UI) Design (look and feel) (this is what we are focusing on)
  • Selecting a good CMS, and good web Host.
  • Gathering resources and creating  the Site
  • Beta Testing (with Feedback)
  • Launching site (advertising across multiple media)
  • Updating regularly

A good online Web Strategy should be a part of your overall communication strategy.So what we want to focus on in this Blog are some basic principles in the UI and navigation. As this is key to the success of not only keeping visitors but having them navigate and upon exiting having felt they got what they came for.

Versatile Navigation:

Place only links that are of value for any page – when I am given more than 9-12+ choices typically the human mind looses over site. Structure well and group areas of your site in ways that does not overpack that entry page. Content/Context driven navigation is essential. When Google decided to keep its original search page, it went against all other search engines by keeping their page empty and not filling it up like yahoo or Alta vista did . So the principle here is only put on the page what needs to be on the page not more and not less. Through Tabs and accordion you pack a lot of information on a page without cluttering it. We think more options are better for the visitor, not necessarily, sometime just enough is perfect. Its like a plate there is only so much space one can put food on. Over the years as the web has developed, the less is more principle is proven as successful. So whatever is of value to the visitor and what does the visitor need to direct him and guide him to what is of relevance and context at the current page, is what needs to be present and active on any page.

Structured Layout:

A website layout can be diverse. Typically you could read up on studies on what works and what does not. On one side we do want to create a familiar layout so the user senses a familiarity and at the same offer an element of surprise or as I would prefer to say a ‘freshness’, one that makes them want to interact. The wisest thing to do is start simply and then with time modify and add as need arises and as the site grows, its the healthier way to go. Defining what is primary, secondary and tertiary is key as well. Defining what is the most important for the end-user and what is maybe not as important.  Especially as you need to make sure that as design and content changes, the general overview of a page is consistent. Header, footer navigation and content are essential and unavoidable with the medium at this stage. The creativity lies in orchestrating form and function well, not so one overpowers the other but like a peas and carrots compliment so form and function should help to guide the visitor.

Solid Design:

Your Design is for upmost importance, so many sites can look like another, and at times that is ok, as we all do go out and buys shirts and find those wearing similar clothing. When it come to the web the same applies, what is key though is your signature in it all. Design elements such as typography, color, composition, contrast and balance between text images and videos are vital in leaving your mark. A well designed website does not overwhelm you, it respects you, helps you find what you need and even educates you … and if really good, it will keep you wanting to come back for more. Element sizes, typography structure on what should be bold and italicized and indented are the seemingly small details that will give a site the respect it deserves. Design is there to interface the content (product/ service/theme) to the the visitor. Its where the rubber meets the road. As the internet is a screen based medium, our eyes are the main sensory tool that is interacting in a visual dialogue. As a small company or medium size enterprise this is not done once and that’s it, But rather step by step you discover what are the best ways to communicate, give overview, highlight and entertain.

Modular design

As the world is going mobile, this is where a design of a site needs to be scalable to fit the desktop, the tablet and the smartphone. It is essential in the design process to think of the elements put on the site as modules and these modules can be reshuffled and relocated based on the design of the site. A good strategy would require you to think of this right at start so your prototyping involved multiple views of the same page on diverse set of screens!

These above mentioned principles are basic essentials. It is amazing to me that in a connected age such as ours there are people our there that think good design has to be pricey and is often treat it as a commodity. Good design is like basic education it should be available to every one. Any good piece of written text, solid graphics, good imagery and some basic good video work last a while. As Design and super styling is not the key component here but the interdependence of all the elements that are gathered and displayed. A good website is one that is easily found, has relevant content one that can be easily navigated, stays stays up to date, and can be viewed on multiple devices, these qualities will make your site attractive an productive. After all how many sites does the average person visit? And how many does one remember for its value? Do some self assessment on yourself and let us know what you think!

Print this post

2 Responses to "Web Design Basics"

  1. sidd   on Monday, July 15


    I am new learner, and learn lot of things from your post and this post force me to put comment.
    i am awaiting for your next post thanks for sharing such knowledge.
    Web Design Mumbai


  2. Steve Fort   on Wednesday, September 4

    Hello Admin, the formation of blog is really nice. In this article, you shows the different templates of web design is really appreciable. You mention here the basic and useful brief intro for different design and navigation part. I specially like the tree you design at the end of page’s right side.


Post a Comment:

Get latest news