Website design - Basic features and elements

Standards and guidelines for the design of web pages

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 it is thought that just having a website on the Internet is achieved by visiting by people who have an interest in its 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:

• Clarity in the objectives of the site
• Basic information corresponding to the content
• Selection of a correct domain name
• Selection of technology for design and programming
• Proper selection of a Web hosting (hosting)
• Clarity of search engines, Internet directories and SEO, optimization for search engines
• Realization of a design according to the requirements of the site and users
• The navigability
• Realization of the programming in determination of the requirements of the site and of the users
• Application of SEO techniques to achieve greater visibility on the Internet
• Update the contents periodically

The design of sites

When a user arrives at a page, he can usually figure out what is there, if only he would take a little time.

Depending on the studies, the ability to find the correct page on which to perform an operation from the home page goes 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 home page and starts navigating 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.

The home page

It is the flagship of the site and must be designed differently to the rest

The first success of a home page is to answer two questions:

• Where I am?
• What does this site do?

Other missions that the home page 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 the 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 obtained in many other aspects such as promotion, speed of loading, affinity of users among others, will depend largely on the considerations that are made when designing.

It is important to emphasize that the design of the pages should be done thinking of the client and not the administrator, choosing carefully all the elements that are used and using only the necessary resources to communicate the desired message, making the site have a Simple appearance and nothing overloaded.

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 is the first thing users see and creates that first impression that is so important.

It is there where you determine if you will continue to explore the pages or if you 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 client.

This is the fundamental reason for the texts to be chosen, revised and corrected in such a way that the ideas they want to transmit are reflected.

For the presentation of the text it is essential to know the type of source that will be used in such a way 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 should be small and clear to allow quick reading.

So, 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, you can select different types, the most used are the .jpg, .gif and .png, really although there are some patterns are not always met 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 to achieve the objectives that are intended, because this is the instrument through which users access from one page in another.

A useful navigation system is one that:

• Guide visitors to the information they require 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 contributes to increase user satisfaction and, consequently, taxes the success of the site, is beyond adding links.

In this work we must consider a set of factors such as the grouping of information, structure, returns to pages, 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:

• In relation to the Web as a whole
• In relation to the structure of the site

The first is important in that 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 they are unless you tell them. Therefore, rule number one 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 roughly the structure of the website and highlight the current situation.

A third element to take into account is the title of the page itself, which must be significant and individualized.

Where I have been?

With the 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 provides 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 the 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 other links within 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 a page:

• Embedded links (The traditional underlined text)
• Structural links (point to another level of the structure, so they will differ from page to page, although it is necessary to maintain a coherence understood and expected by the user.) It is more convenient to use descriptive names of the hierarchical level that is in 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 on the right of the screen.

The benefit of this design (Extensive) is that the user is continuously informed of the services available on the site entered by the point that has entered.

The disadvantage is that there is a loss of 20% of the screen on destination pages and can retrieve same information with an additional click on the home page.

The alternative is to present information in depth, that is, on each page to report the different hierarchical elements that precede it, a navigation scheme that is known as breadcrumbs (breadcrumbs, known as the story by Hansel and Gretel, where they left traces on the way back home).

This second scenario has the advantage of occupying little space and being very simple, which allows the user to concentrate on the content area, which is what he usually does.

Its drawback lies in the difficulty of using it in non-hierarchical structures.

The user controls the navigation

In the design of traditional interfaces, the designer can control where the user can go at any time. Web design is not like that.

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 design of interfaces was born from a deep and prolonged reflection, accompanied by studies, experiments (Xeros, PARC, Apple, etc.) and tests that were analyzed once analyzed and proven effective in the GUI study guide.

It is therefore a creationist design, a long pregnancy that gave birth to a consolidated creature.

In the Web elements are continuously introduced, in their field of experimentation is the network itself, its use.

Only good ideas survive, the others disappear in a pure evolutionary model of design.

Reduce navigation clutter

It is so much the volume of information that the designer must employ various methods to reduce confusion, methods such as:

• Add (unit that represents a collection of other smaller ones, which is simple within a site, but complicated when it comes to categorizing diverse sites)
• Summarization (ways to represent a large amount of information through a smaller one)
• Filtering (eliminating non-relevant information, collaborative filters are especially useful, those in which a group 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 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 welcome, the truth is that users jump as fast as they can.

It is better to design a simple home page that unifies situational information with the presentation of useful news and directory information.

Home vs. interior pages

The most important design element of the home page should be the name of the company.

It does not have to be the biggest one, but at least it should 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 point of entry.

The inner 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.

For 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:

• • Find 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 Web page in proportional size with a menu bar and a variable content area, the first will always remain at the same width, while the second increases or decreases to accommodate the browser window, no matter what big or small that is. If you have doubts, the proportional size is the best option because it guarantees that the Web pages will be adjusted to 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 problems. 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 choose the fixed-width solution, you must 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 netbooks 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 measurement of a monitor, also known as a point.

A resolution of 1024x768 means that a grid that is 1024 pixels wide and 768 pixels high (with a total of 786.432 pixels) is displayed.

The lowest resolution you can currently find (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 one for specific questions (references, textual citations, etc.)
• Do not use absolute letter sizes
• Do not use the! Important attribute, which disables the user's preferences. Respect their decisions.
• If there are several templates, always use the same names for the classes

Frames

The following is recommended with respect to 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 vision of information on the screen
• The navigation unit
• An accessible address (URL)
• An item to store 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 concept of unique URL
• Distorts the mechanics of links, favorites, navigation backwards ...
• Difficulty viewing on small screens
• Poses problems when printing with some browsers
• It is more complicated for authors
• Produces unwanted effects in some search engines

Many sites that offer alternatives with and without frames confirm that many users prefer browsing without frames.

They can, however, be used under certain conditions, provided that we take into account the above.

Printing

Pages are printed because:

• It is customary or more comfortable to read from paper than from the screen
• It avoids 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 to see and another to print, but never leave information only available through the printer.

Nowadays in browsers it is possible to include in the <head> of the page a link for the printable version (<link rel="alternate" media="print" href="estilo-impression.css" type="text/css" />)

Conclusion

Simplicity should be the goal of page design.

The user accesses the network looking for something, does not enjoy viewing the design.

The pages must be made to work:

• With different types of technologies
• In 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 achieve a greater understanding of these issues and 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, consider:

• Clarity in the purpose of the site
• Existence of the basic information corresponding to the content
• Select a correct domain name
• Select the technology for the design, programming and adequate web hosting
• Realization of a design according to the requirements of the site and users
• Search Engines and Internet Directories
• The optimization for the search engines

With the review of all these factors it is considered that to achieve a correct positioning on the Internet and good visibility is necessary to take into account from the beginning of the creation of the Web.