732.369.6243

732.369.6243

The Basic Design of a Website - XINDESIGNS LLC

Share: Bookmark and Share

A modern phenomenon has developed over the past several years. The internet has become a large source of new information. Building websites these days is a form of art that few people currently understand and can do well. The first websites created in the 90’s are nothing in comparison to some of the most visually appealing websites we have today. Some good examples of these modern marvels in the website industry are subcide.com and crowdspring.com.

The key to an attractive, modern website is the layout and organization. Any good website consists of three main parts: the header, the footer, and the body. Generally, the first thing you see when you open up a website is the header. A header usually consists of an image and the navigation bar. The header image is often the website’s name and logo, immediately welcoming visitors to the site. The navigation is a series of buttons that serve as links to separate pages within the website. These can either be aligned vertically or horizontally. When creating a website, it is important to develop a well structured navigation to maximize functionality. The structure of the navigation is known as Information Architecture. The term Information Architecture refers to the way a website’s pages are organized. It is essential to organize these links in a logical way.

Scrolling down the page, you reveal the meat of the website: the body. The content of a website can consist of a large variety of different things. It may be paragraphs of information, images, videos, Flash animations, submission forms, or any number of different objects related to the focus of the website. To effectively lay out this information, it needs to be divided and positioned properly. The Box Model defines how the content of a website should be organized. The main parts to The Box Model are the content, the padding, the margin, and the border. These are defined by width and height in pixels. Content is the actual text and images located within the box. The border will surround the content. The border’s style can be set to solid, dotted, or dashed, depending on the preference of the customer. The padding determines how far away the content is from the border. The margin clears a space outside the border. Properly designating these four aspects will allow any web developer to create an effective layout for a website’s body.

Eventually the website will come to a close. The footer occupies a very small portion of the website, located below the header and body. The footer is usually short and separated from the body by a different background color, or a border. This is a good place to put contact information, copyright information, and links to other websites.

There are a vast number of ways to style a website and make it flashy, attractive, or weird. But without a concept of what makes an attractive website layout, web developers may be lost, not know how to make the site appeal to the costumer, or may not be able to grab anyone’s attention for more than a few seconds. That’s why it’s absolutely essential to know how to make a website simple, easily navigable, and appealing to the average human’s natural sense of order.


Services

CALL FOR A FREE QUOTE TODAY or Request for Proposal

Recent Post

Install WordPress Dev Sites on Vagrant with Variable VVV

March 28, 2015 - Coolestguidesontheplanet.com | Neil Gee Vagrant and WordPress Local Development – Spinning up sites with Variable VVV...more

Announcing the DZone Guide to Developer Programs

March 27, 2015 - Announcing the DZone Guide to Developer Programs! Developer programs are focused communities of practice, gathering de...more

Enterprise Agile or Agile Enterprise?

March 27, 2015 - Recommended Links Perspectives: How do you estimate on an Agile project? Online project management: Try Mingle Getting...more

From Our Blog

Install WordPress Dev Sites on Vagr...

March 28, 2015 - Coolestguidesontheplanet.com | Neil Gee Vagrant and WordPress Local Development – Spinning up sites with Variable VVV Vagrant – Getting Started on OSX Vagrant and WordPress – Local Dev Set Up Vagrant and WordPress – Adding Multiple Sites wit...

  Read more

Announcing the DZone Guide to Devel...

March 27, 2015 - Announcing the DZone Guide to Developer Programs! Developer programs are focused communities of practice, gathering developers around specific technologies and offering high-quality tools, shared expertise, and all kinds of community support. That'...

  Read more

Enterprise Agile or Agile Enterpris...

March 27, 2015 - Recommended Links Perspectives: How do you estimate on an Agile project? Online project management: Try Mingle Getting Better In 60 Seconds - Cycle Time Analytics 6 Reasons to Ditch Your Old Chat Client SVN to Git: How to make the switch Like this ...

  Read more