How to build a creative web design? This is a common question for all web designers and they must find solutions to it. The basic concepts about web design are very important and the navigation bar is the most basic requirement of any website; it makes the site interesting.

What is the navigation bar?

The navigation bar is that part of the web design which includes various page links of websites. The primary concept of the navigation bar is to build with JavaScript, Flash design or common HTML.

Design structure:

Navigation bar includes main three HTML tags -  Div Id, li and ul - which can build the structure of the navigation bar. In the adjoining figure, the designed structure of the navigation bar shows the menu bar with Div Id which is already built in CSS. Another part of the navigation bar is “li” to include web pages link in the menu as a drop down bar. “li” can include the links of various web pages and the anchor text of those web pages.

Navigation bar can be simple or multilevel. In a multilevel navigation bar the sub menu includes an additional menu bar.

HTML structure of Navigation bar:

The common code system of navigation bar is mentioned below:
  1. <div id="class_name">  
  2. <ul>  
  3. <li><a href="web_page_link_1">first option</a></li>  
  4. <li><a href="web_page_link_2">second option</a></li>  
  5. <li><a href="web_page_link_3">third option</a></li>  
  6. <li><a href="web_page_link_4">fourth option</a></li>  
  7. <li><a href="web_page_link_5">fifth option</a></li>  
  8. </ul>  
  9. </div>  
Here, “ul”, “li” and “class_name” have specific CSS style.

CSS and JQuery:

CSS includes the designing structure of the website and provides a perfect style of different web design elements. Here we have Div Id with class_name so we can create the CSS as
  1. #class_name{  
  2. height:40px;  
  3. line-height:40px;  
  4. background:#5F6708;  
  5. padding:0 10px;  
  6. }  
Same as given, the web designer can also build the CSS with “ul” and “li” .
  1. #ul{  
  2. <!--Body part--!>  
  3. }  
  5. #li{  
  6. <!--Body part--!>  
  7. }  
This is coding of the simple level navigation bar. The multilevel navigation bar requires advanced CSS for different “li” and “ul” structures.

Jquery code needs to include two main events like “mouseover” and “mouseleave”.  A web designer has to just include the function in Jquery with “mouseover” and “mouseleave” event.
  1. <script >  
  2. function class_name(){  
  3. $('div#class_name ul li').mouseover(function() {  
  4. $(this).find('ul:first').show();  
  5. });  
  7. $('div#nav ul li').mouseleave(function() {  
  8. $('div#nav ul li ul').hide();  
  9. });  
  10. </script>  
  11. < !--Make same as given code system--! >  
By using the given JavaScript code the web designer can build the perfect style of navigation and build the perfect navigation bar.

Advantages of Navigation bar:

•    It helps to find landing pages of the website and also to manage the all web page links at different menu parts.
•    The graphic design and JavaScript effects make it possible to attract more users.
•    The multi-level navigation bar can include lots of web links of the website that can help to find lots of information at one place.
•    The navigation bar is also useful for SEO because of its link structure with particular web pages and the main keyword on the website.

Navigation bar is the best concept for a web designer and  is very useful if included in the web design. The latest web design trends and creative concepts are most effective for designing but this is the most common, so don’t forget it.
The user experience web design is also called UX design or UED which is the concept of providing best to the user and getting their response. Many designing factors like graphic design, typography, interface and full web elements are included in website design. If the design has a creative concept that is effective on the website and provides best response then we can call that website design UX design.


Whenever users visit the website they first check its look and then the functions of different web design elements. The user then decides whether the website is effective or not. If it’s effective then the user will visit more pages and also to that website a second time. Thus the website gets more users with user review and the UX design.

If a designer needs to build a UX web design then the first requirement is to find a creative plan for the website and use the best designing. The web design tools and designer creativity are inter-connected , if the designer uses effective web design tools then it will be easy to build best web design with least effort.

Multimedia concept for website design

The multimedia includes graphic design, videos, animation and many more elements. The most basic part of a website is the graphic design which can be seen by users at first look. Relevant images can help in effective design.

  • Make user friendly concept
Every designer has to build a website from a users' point of view. The designer knows the concept of the website but users are not aware about it. Easy but innovative concept can easily catch users, get perfect information and find the services of buy products from the website.

  • Support new users
All users are not technically proficient or they don’t have experience about surfing all types of websites so the help section is a necessary part of a website. The help section is the best idea for users to get step-by-step instructions.

Design concept of mobility

Latest information says 30% of internet users use mobiles to surf a website. So it will be best  to create a specific website for all mobile users. The important concept is to make effective mobile websites that can work on Android, iOS, Windows and Symbian mobiles. These operating systems have different structures so they need to use common concepts while designing website with the goal of UX design.

Do analysis, don’t make copies

The common concept of web designing is to check other similar websites and get some concepts from those designing ideas. It’s good to visit different websites and find designing concepts, but don’t copy. A unique design can increase real traffic on the website and also make users feel that they have found something new on your website.

Finally I just say that UX design is not simply making a website; it’s the concept of success. If a website has innovative design then users will visit that website.


    Hey I am Thomas! I am working as a professional website designer, blogging is my passion and I love to play basketball with my team when I will get time!


    February 2013
    January 2013


    Web Design