5 essential website elements that web design directory must include

The 5 essential website elements that an inspirational web design directory must include

Diseño Web Inspiracional

All web page designers, however inept, need inspiration from time to time. It’s fairly normal practice to look around at what your peers are doing and transfer, or simply “rip off” elements from other sites for your own. Let he who is without sin cast the first stone…

There are any number of inspirational references for web design, and the best known are Awwwards, Site Inspire or my go-to directory: The Best Designs.

Most of the websites shown in these directories are excellent and can boast high quality design, although they may not be quite so impressive when you want to actually use them. Many of these websites, however, aside from a few honourable exceptions, share structural similarities that bring to mind the uniformity of communist architecture in the ex-Soviet Union.

In this article I want to create a top 5 of the most common elements among the designs that we can find in this type of directory.

Sticky Menu

The sticky menu is the result of landing pages where we are forced to scroll a lot in order to see all the content it has

 

Example of a sticky menu in www.cliffsliving.com
Example of a sticky menu in www.cliffsliving.com

They may be thick or thin, abrupt or smooth, rigid or fluid, etc., but they are still one of the most common beasts in this ecosystem. I am in favour of a sticky menu when it is well-used, retaining the logo and essential navigation elements without distracting from viewing the content.

The sticky menu was forced upon us by the preference for very large homepages and landing pages, and the need for extensive scrolling to see all their content, because without them navigation of these pages would be rather tedious. However, do we really need them for the other pages with less content? We have to decide.

Full Width

It doesn’t make sense to use the typical fixed-width container in the age of responsive design.

 www.imperialhomes.co.uk uses the full width of the container.
In www.imperialhomes.co.uk/ uses the full width of the container.

 

I am very much in favour of pages that use the full width of the browser. In the age of responsive design, where we can adapt our design to the width of the device (or is it the device which adapts to us?) the regular fixed-width container with white space at the sides makes no sense. It is especially useful for visual content, but using it to display plain text would not be a good idea, and would lead to an epidemic of torticollis in the developed world.

Video background

This should be used to enhance the content but not for the content itself.

Video background
Video background on www.rideforthechild.co.uk/

Is it good? Yes. Is it useful? Depends. A video background is what it says it is, a video to run in the background, usually above the fold, to embellish the content but not to be the content. It is best not to abuse this resource by using long videos that user will rarely see fully and do nothing more than delay the page from loading. Everything has its place in this world, and the place for videos is YouTube.

Ghost Buttons

When combined with solid buttons, they allow us to rank the CTA and avoid visual saturation when there are many buttons together.

The use of ghost buttons
The use of ghost buttons at www.isl.co

This is this generation’s button, everyone’s favourite, the boy wonder. We are talking about those transparent buttons with only an outline that fill with solid colour when we pass over them. They are very useful when combined with solid buttons, they allow us to rank the CTA by importance and avoid visual saturation when there are many buttons together. Sometimes I wonder if they are the ghost of the old gradient button in relief. What do you think Iker?

Flat colours

This is an attractive technique used by designers to achieve pages which are correct, light, straightforward and responsive.

Template based on flat colours
Template based on flat colours at www.colouredlines.com.au

Template based on flat colours at www.colouredlines.com.au

We have left those backgrounds with textures of paper, cardboard and sand behind us. Flat colours are the setting for today’s world. It’s trend that comes directly from the Flat Design pack, and offers an attractive way to easily create pages that display correctly and are light and responsive, without pulling our hair out (those who have any hair left, at least). While it’s true that there are some repeating patterns in some backgrounds, they are always discrete and best taken in moderation, like alcohol or exercise.

That is my top 5. Try them yourself at home: put these 5 elements into a cocktail shaker with some stock images, give it a gentle shake and pour it into your favourite browser. The result is a modern-looking web directory, a college where the most outstanding pupils look just like the rest in their uniforms.


Leave a Reply

Your email address will not be published. Required fields are marked *

If you need development specialists to develop or improve your digital business, we can help you.

  • Los datos que nos faciliten el usuario a través este formulario se incorporarán a tratamientos cuyo responsable es FLAT 101 S.L. con CIF B99393613 y domicilio social en Avda. Maria Zambrano, nº 31, Edif. WTCZ, Torre Oeste, 12D, 50018 de Zaragoza. Puede contactar llamando al 976419856 o a través del correo electrónico info@flat101.es. La finalidad de recogida de datos en este formulario es poder contestar las consultas planteadas y enviar al usuario la información solicitada a través del correo electrónico o teléfono indicados en el formulario. Solo se realizan cesiones si existe una obligación legal. Reservados sus derechos a acceder, rectificar y suprimir, así como otros derechos, como se indica en la Política de Privacidad.