Website design - Features and basic elements

The design of the pages must be based on the requirements of the site and the users, taking care of the elements used to communicate the message.


Standards and guidelines for web page design

The standards and guidelines for the design of a Web site are a set of elements of vital importance to consider before its realization to obtain a good usability.
All these depend on the visitor first reaching the site and once inside, meet the objectives that led to it in a fast and simple, ensuring a future return.
Sometimes you think that just having a website on the Internet is achieved by visiting by people who have an interest in your content , but it really does not work that simple.
We must take into account a set of elements from its design and implementation so that happily this happens.
The fundamental elements are :

The design of sites

When a user comes to a page, you can usually figure out what is there, if only a little time would be taken.
Depending on the studies, the ability to find the correct page on which to perform an operation from the home page ranges from 26 to 42%.
This difference was explained in the knowledge or not on the part of the user that he should follow several steps to achieve his goal.
The underlying problem is that usability suffers dramatically as soon as the user leaves the homepage and starts browsing to solve the problem.
The Web was designed as an environment to read papers, and its usability for more complex tasks depends largely on a very simple design with the least possible distraction, very clear information about the architecture and effective navigation tools

Home page


The first success of a homepage is to answer two questions:
  • Where I am?
  • What does this site do?
Other missions that the homepage must fulfill are:
  • Offer a clear idea of the navigation scheme on the site .
  • Offer direct access to the most commonly used features of the site.
  • Announce news or promotions.
  • Provide a search tool.
  • Present the name and logo

Realization of a design according to the requirements of the site and users

The design of the site is a fundamental tool to attract users and the success that is obtained in many other aspects such as promotion, loading speed, user affinity among others, will depend largely on the considerations made when designing.
It is important to emphasize that the design of the pages must be done thinking of the client and not the administrator, carefully choosing all the elements that are used and using only the resources necessary to communicate the message that is desired, making the site have a Simple appearance and nothing ornate.
Consistency in appearance and feel is important to maintain the same look and design on all pages .
The home page should give a general idea of ​​the site, since it is its fundamental entry point.
It's the first thing that users see and creates that first impression that is so important .
It is in it where it is determined if the pages will continue to be explored or if one will navigate to another more interesting place.
The texts are significant elements in the design of the website. These contain most of the information provided, explanations and details of the elements that make up the site, are the main way of communication with the customer.
This is the fundamental reason for the texts to be chosen, revised and corrected in such a way that the ideas that are transmitted are reflected.
For the presentation of the text it is essential to know the type of source to be used so that it can be read well regardless of the type of browser or operating system of the users.
It is necessary to take into account the size of the text, which must be small and clear to allow quick reading.
Therefore, it is recommended to use the division by sections of the page, which allows the user to read more about a topic without losing the attractiveness of the page.
The implementation of images and graphics complements the information that you want to provide on the site. They constitute a fundamental tool because it provides the user with a visual criterion.
Keep in mind that indiscriminate use can slow down the process of loading the pages or cause visual stress. It is recommended to use images when it is really necessary to communicate the desired message.
The format of images and graphics will depend on the structure in terms of colors and definition, different types can be selected, the most used are the .jpg, .gif and .png, really although some patterns do not always meet in all cases .
It is recommended to record the images in the three formats and depending on the compromise between the aesthetic quality that is offered and the download speed of the page, which is the most appropriate.

Site navigation

Another aspect to take into account in the design is the navigation of the site.
A good navigation system is the basis for achieving the intended objectives, as this is the instrument through which users access from one page to another.
A useful navigation system is one that:
  • Guide visitors to the information that is required quickly and intuitively
  • It leads the visitor to the pages where it is able to interact with the elements of the site.
Build a navigation system that helps increase user satisfaction and, consequently, contributes to the success of the site, is beyond adding links .
This work should consider a set of factors such as the grouping of information, structure , page returns, among others.
Navigation is one of the basic elements of the Web, and goes beyond the use of hypertext links .
A navigation interface should help the user answer three questions:
  • Where I am?
  • Where I have been?
  • Where can I go?

Where I am?

It's probably the million dollar question.
The answer, in terms of situation within a site, must be provided at two levels:
The first is important as long as the user often perceives the Web as a whole.
Drastic changes in navigation mechanisms are not well understood within this perspective.
This also implies that the user will not know where he is unless you tell him. Therefore, the number one rule is to place your logo or identifying mark on all your pages.
The situation regarding the structure of the site is achieved through the inclusion of headers that show in broad strokes the structure of the web and highlight the current situation.
A third element to consider is the page title itself , which must be significant and individualized.

Where I have been?

With current Web technology it is difficult to answer this question. There are, however, some resources that allow us to face it:
  • The back button of the browser that gives us a sequential history of the pages visited.
  • The links already visited that indicate the options already seen within the links of a page
In this sense, it is important to respect the convention regarding the representation of links (blue for assets and pink for those visited).
The user always knows in this way what he has seen and what he has not, always within what he can see.

Where can I go?

This question is answered with the visible navigation options and with the rest of the linkswithin the page.
It is impossible to show all the possible destinations on a single page, a good structure of the site, easy to understand and assimilate by the user, will be very useful when it comes to knowing the possible points of destination from a given site.
There are three kinds of hyperlinks that can be used on one page:
  • Embedded links (The traditional underlined text)
  • Structural links (They point to another level of the structure, so they will differ from page to page, although it is necessary that they maintain a coherence understood and expected by the user. It is more convenient to use descriptive names of the hierarchical level that is itself)
  • Associative links (Provide additional or collateral information, such as "see also")

Extensive and deep

Generally, the most common navigation design is to list all the high-level elements of the site, often in a band to the right of the screen.
The benefit of this (Extensive) design is that the user is continuously informed of the services available on the site entered by the point entered.
The disadvantage is that there is a 20% loss of the screen on landing pages being able to retrieve same information with an additional click to the home page.
The alternative is to present information in depth, that is, on each page to inform of the different hierarchical elements that precede it, a navigation scheme that is known as breadcrumbs (breadcrumbs, known in the Hansel and Gretel story, where they left trails on the way to return home).
This second scenario has the advantage of taking up little space and being very simple, which allows the user to concentrate on the content area that is what he usually does.
Its drawback lies in the difficulty of using it in non-hierarchical structures.

The user controls the navigation

In traditional interface design, the designer can control where the user can go at all times. In Web design it is not so.
In addition, a traditional application is a closed interface system, within which the user is.
But on the web the user moves quickly from one site to another within the same window, from the same environment, so that he comes to perceive the Web as a whole, rather than as an accumulation of differentiated applications.
This implies sharing a series of rules that the user has learned through his experience and that he trusts that they are enough to move around any part of the network.

Creationist design vs Darwinist design

The traditional interface design was born from a deep and prolonged reflection, accompanied by studies, experiments (Xeros, PARC, Apple, etc.) and tests that were analyzed once analyzed and checked for their effectiveness in the GUI study guide.
It is therefore a creationist design, a long pregnancy that gave birth to a consolidated creature.
Elements are introduced continuously on the Web, in its field of experimentation is the network itself, its use.
Only good ideas survive, the others disappear in a pure evolutionary model of design.

Reduce browsing disorder

It is so much the volume of information that the designer must use varied methods to reduce confusion, methods such as:
  • Add (unit that represents a collection of smaller ones, which is simple within a site, but complicated when it comes to categorizing diverse sites)
  • Summarization (ways of representing large amount of information through a smaller one)
  • Filtering (eliminating non-relevant information, collaborative filters are especially useful, those in which a collective decides what information is valuable)
  • Truncated (leave only the initial part of the information and let the user select it to see the rest)
  • Representations based on examples (more than one billion data)

How wide the page should be

In terms of width it is best to create pages adaptable to the width.
If this is not possible, it is better to assume that many users will see 1024 pixel screens, which leaves a little more than 800 pixels in real terms.

The entry pages (intro) must die

In front of who says that it is a good way to start and give a welcome, the truth is that users jump them as fast as they can.
It is better to design a simple homepage that unifies situational information with the presentation of useful news and directory information.

Home vs. interior pages

The most important design element of the homepage should be the name of the company.
It does not necessarily have to be the largest, but at least it must be in the upper left corner of the screen.
This information should be repeated in all interior locations, especially because we do not know the user's entry point.
The inside pages should focus on the contents and leave the welcome for the home page.
To facilitate this access and relocate the user, always place a direct link to the home page.
The more famous your site is, the smaller the area dedicated to identifying should be, you already know it.
In front of those who prefer to force entry through the home page, the idea of ​​satisfying the user by providing entry points closer to their interests should prevail.

The challenge of screen space

When designing a page for printing, the physical size of the final document is taken into account.
A much larger text is used on a poster than on a business card, for example. But in the world of the Web this system is broken because users can configure their monitors in all kinds of different dimensions.
These details affect the amount of screen space with which the pages have to work.
The higher the resolution and the larger the navigation window, the more content fits on the screen. This presents a dilemma:
How do we make sure that the pages look the best if we do not know the visitor's screen settings?
Web designers use two design strategies to address these issues :
  • Seek flexibility with proportional sizes : With them the design expands or contracts to adapt to the space available in the browser window. For example, if you create a proportionally sized Web page with a menu bar and a variable content area, the first one will always remain the same width, while the second one increases or decreases to accommodate the browser window, no matter what large or small. If in doubt, proportional size is the best option because it guarantees that Web pages will fit any dimension. However, you can impose a maximum or minimum design to avoid excessive alteration.
  • Select a reasonable fixed size : Sometimes, too much flexibility causes its own problems. For example, if you reduce a page with size proportional to extremely small dimensions, some elements may crowd into odd positions. If you have a complex design with lots of graphics and floating elements, the result can be a mess. On the other hand, too large windows can cause other inconveniences. Think that if you stretch a page of proportional size to fill the width of a large screen monitor, it may result in extremely long lines of text that are difficult to read. The solution is the implementation of fixed-width pages that look good on any monitor size.
Fixed width size is the most common approach.
If you opt for the fixed width solution, you should know which one to use.
Of course, there is no way to know the visitor factor. The latest statistics reveal that 20% of users use screens 1024 pixels wide, both with old monitors and with nerbooks or iPads.
Obviously, as a Web designer you must satisfy the minority, so a fixed-width design will look great with a diameter of about 1,000 pixels.
In this way, Web users with reduced screen devices can enjoy the content of their pages, as long as the browser window increases so that it occupies the entire screen.

Understanding the resolution

A pixel is the smallest unit of measure of a monitor, also known as a dot.
A resolution of 1024x768 means that a grid that is 1024 pixels wide and 768 pixels high (with a total of 786.432) is displayed.
The lowest resolution you can find now (without counting mobile phones) is 1024x600, the size of a screen typical of a netbook.
Remember: people with large monitors do not necessarily configure the browser window to fill the screen.
After all, it is difficult to read long lines of text. For that reason 1,000 pixels is a good guess for the average width of a browser advantage.

Style templates

The CSS standard is one of the greatest hopes of recovering the separation between presentation and content.
It is important to use a unique style for the site, even when it is customized by content areas, as it gives coherence and unity to the site.

Ensure the operation of the templates

It must be considered:
  • Do not use more than 2 fonts (sources) and a third party for specific questions (references, textual quotes, etc.)
  • Do not use absolute font sizes
  • Do not use the! Important attribute, which disables user preferences. Respect their decisions.
  • If there are several templates, always use the same names for the classes.


The following is recommended regarding frames: Always say NO.
The original concept of the web (Tim Berners-Lee) was the total unity of different concepts in a single line, the page.
The website represents:
  • The information view on screen
  • The navigation unit
  • An accessible address ( URL )
  • An item to be stored on the server
  • An item to be edited by the author
Based on this, the use of frames should be restricted because:
  • Break the unique model
  • Blur the unique URL concept
  • Distorts the mechanics of links, favorites, backward navigation ...
  • Difficult vision on small screens
  • It poses problems when printing with some browsers
  • It is more complicated for the authors
  • Produces unwanted effects in some search engines
Many sites that offer alternatives with and without frames state that many users prefer browsing without frames.
They can, however, be used under certain conditions, provided that we take into account the above.


Pages are printed because:
  • It is customary or more comfortable to read from paper than from the screen.
  • Avoid losing information if the page moves or disappears
  • Users like to sort their information in folders
  • It is a good method to pass the information to others
It does not always print well what looks good. Therefore, it is better to make two versions of the documents, one for viewing and one for printing, but never leave information only available through the printer.
Nowadays in browsers it is possible to include in the <head> (header) of the page a link for the printable version (<link rel = "alternate" media = "print" href = "print-style.css" type = "text / css" />)


Simplicity should be the goal of page design.
The user accesses the network looking for something, does not enjoy seeing the design.
Pages must be made to work:
  • With different types of technologies
  • On different monitors and platforms
  • Accessible for any type of user
The review of the state of the art of the Web as well as its positioning on the Internet is a good starting point for the application of techniques that increase the visibility of Web portals.
The study of the general elements of the Web allows to obtain a greater understanding of these topics and to apply new ideas in their development.
With the investigation about the most common standards and guidelines for the design of Web sites it allows to take into account the last existing elements and be tailored to the latest technologies for its implementation and its design.
The knowledge acquired about Web browsers facilitates the creation of pages that are attractive to users, regardless of what they are using or the operating system installed, making them behave in the same way in all cases.
To achieve a good Web design for the Internet, the following should be considered:
With the review of all these factors it is considered that to achieve a correct positioning on the Internet and good visibility it is necessary to take into account from the beginning of the creation of the Web.

No comments:

Powered by Blogger.