30 Páginas web increíblemente simples

Algunas de las páginas más famosas están muy sobrecargadas de información, pero yo me quedo con todo lo contrario: las sencillas.

Obviamente el gran exponente de este grupo es Google con su minimalista página de inicio desde que comenzó su andadura, pero claramente no se trata de la única en Internet que apuesta por hacer las cosas sencillas.

Ejemplos de páginas web sencillas en HTML

Kean Richmond

Kean Richmond nos hace ver la sencillez de jugar con pocos elementos, pero muy bien colocados para dar una gran sensación a minimalismo. Su logo en la parte superior izquierda, los iconos de Twitter y contacto en la parte derecha y en el centro, con una tipografía llamativa, a lo que se dedica.

Enlace a la web: Keanrich Mond

Alice Drougard

Alice Drougard va a lo simple también con su logo situado en el centro, cuatro pestañas para pasar entre las páginas principales de su web y una serie de fotografías colocadas adecuadamente para que de un vistazo sepamos a que se dedica y que hace.

Enlace a la web: Alice Drougard

Jonathan Ogden

Ogden sigue jugando con lo simple que es su nombre como logotipo, las redes sociales situadas justamente abajo sin llamar la atención y sus trabajos de diseño para que podamos pasar rápidamente por ellos. En una página muestra todo lo que interesa.

Enlace a la web: Jonathan Ogden

Finch

Finch ya va por otros lares para jugar con la tipografía y esos colores que denotan elegancia y sapiencia de lo que hace. Con pocos elementos deja toda su profesionalidad a la vista. También deja claro cuales son las páginas que le han enlazado.

Enlace a la web: Finch

A different Design

Este sitio web juega de otra manera. Usa un fondo de pantalla con un header desde el que podemos pasar a las páginas principales, su teléfono y los enlaces a sus redes sociales.

Enlace a la web: A different Design

Brizk

Kai nos ilustra con su propia figura con un triángulo abstracto y una paleta de colores adecuada para dar cercanía. También ofrece parte de su bio con una tipografía en un tamaño menor por si queremos conocer más de él.

Enlace a la web: Brizk

Vertical Garden Design

Al igual que el anterior, Vertical Garden Design se va hacia una fotografía que muestra rápido uno de sus mejores trabajos en el aeropuerto de Oslo. En la parte superior tenemos el header con la «nav bar» o barra de navegación e incluso la posibilidad de cambiar de idioma. El logo lo pone en formato vertical para darle el toque final a una página bien simple.

Enlace a la web: Vertical Garden Design

247Grad

247Grad juega con el monocolor y una imagen de fondo casi totalmente oscura. La tipografía del header, en menor tamaño que la de texto y cabecera, va en mayúsculas para crear un gran contraste en el diseño general.

Enlace a la web: 247Grad

Enjoy this

Una gran tipografía puede ser la señal de ser auténticos y de que sabemos lo que hacemos. No hay que dar nada más si el mensaje es directo. Lo dejan bien claro: les encanta crear apps y sitios web de gran belleza. Dejan el correo para proyectos y su estudio en otro enlace.

Enlace a la web: Enjoy this

Allison Hou

Allison nos lleva ante otros derroteros e incluye más imágenes y esa tipografía más «femenina». Lo mismo ocurre con su imagen principal y ese header. Se da el lujo de presentar una tarjeta en la que muestra trucos para el shopping.

Enlace a la web: Allison Hou

Pixelot

Pixelot es un poco locura, pero también indica la creatividad del autor. Utiliza el puntero del ratón para crear una máscara que desdibuja allá donde lo tengamos posado.

Enlace a la web: Pixelot

Lionel Scholtes

Si quieres hacer tu curriculum online sin nada más que eso, Lionel te muestra los pasos. Una tipografía adecuada, su fotografía en la parte superior izquierda, enlaces a sus redes sociales y su experiencia. El único elemento decorativo son esas dos líneas horizontales de distintos colores.

Enlace a la web: Lionel Scholtes

Elegant Seagulls

Volvemos a la elegancia del minimalismo y esos grandes espacios en blanco. Por un lado el header muy alejado del resto de elementos, y por otra parte esos elementos conformados de tal forma que crean una gran armonía visual entre ellos.

Enlace a la web: Elegant Seagulls

Lebensraum

Como podéis ver en todos los ejemplos, es importante las pestañas de header para pasar a las distintas páginas del sitio web. La tipografía es de gran importancia, jugar con ua para la cabecera y otra para el texto con una sans serif que haga un gran trabajo.

Enlace a la web: Lebensraum

PinkPoint

El contraste de colores nos lleva a una web un poco más compleja de todas las vistas. No faltan todos esos elementos principales para jugar esta vez con los degradados para la imagen de fondo y esas dos secciones que tienen los colores principales del degradado de la imagen principal.

Enlace a la web: PinkPoint

IWC

Una gran fotografía con una tipografía bien elegida y un elemento «hero» puede dar a esta web. Con un slider muestra parte del trabajo para ser bastante simple en su concepción.

Enlace a la web: IWC

Chop Chop

La ilustración digital nos lleva a Chop Chop con esa imagen que se come toda la presencia visual de la misma. El color azul en el header la da su punto para crear unos valores cromáticos con sintonía en toda la imagen que proyecta la web.

Enlace a la web: Chop Chop

7Pine

7Pine jeuga con el verde para ser el gran protagonista del home. El resto lo compone una imagen con mucho verde y una cabecera simple que quiere pasar desapercibida ante el logotipo.

Enlace a la web: 7Pine

The Sum

The Sum sí que nos lleva a otros derroteros. Juega con el blanco y negro de fábula, una ilustración muy creativa y que va a la par que el resto de elementos y otras dos ilustraciones para crear un paisaje más que interesante. Todo un ejemplo para crear una web que se distinga del resto.

Enlace a la web: The Sum

Hatbox

El azul es el color predominante en esta web en la que no faltan imágenes totalmente iluminadas por el blanco y lo que sería el juego en 3D de ese constructor de sites que se mueve según nos desplazamos.

Enlace a la web: Hatbox

Kara Lyte

Kara va hacia el simplismo y el minimalismo con su natural y bella presencia en su fotografía. El resto es un texto que le viene a la par y lo que son los elementos principales para el header y un botón hamburguersa para abrirlo.

Enlace a la web: Kara Lyte

Instrinsic Studio Marketing

Es de las web más simples pero que nos muestra lo que es hacer un blog. El rojo y el negro son los protagonistas en un sitio muy de «blogs».

Enlace a la web: Instrinsic Studio Marketing

Cómo crear una web sencilla en HTML

Os vamos a enseñar a crear una web sencilla en HTML para que conozcáis los elementos más básicos que la componen. Faltará tener un alojamiento web donde podamos cargar el código y algunos retoques en CSS, pero vamos, que estos son los principios para comenzar nuestro periplo en HTML.

Después de haber visto algunos ejemplos de webs sencillas con las que os podéis motivar lo suficiente para realizar vuestros propios diseños sin romperos mucho la cabeza. A veces lo simple crea un mejor efecto que complicarnos en cosas complejas. Veréis que en la mayoría de casos lo simple funciona muy bien. Vamos a ello.

Crear una web sencilla en HTML es más fácil de lo que en un principio puede parecer. Un sitio web se compone de un header, el cuerpo o contenido y el pie o footer como elementos principales. Podemos clasificarlos de esta forma:

• Documentos: todos los documentos que vayamos a crear hay que hacerlo con un <!DOCTYPE html>. Abrimos con un <html> y se cierra siempre con un </html>
• El cuerpo o body: la parte visible del documento se encuentra entre <body> y </body>
• Cabeceras: se les conoce por los H1, H2, H3… Comenzamos con un <h1> y cerramos con un </h1>. El texto que se encuentre dentro aparecerá como cabecera y dependiendo de su numeración lo hará en un menor o mayor tamaño.
• Párrafos: el párrafo se mete dentro de un <p> y se cierra con </p>
• Enlaces:  el ejemplo más claro es <a href:»https://www.creativosonline.org/»> Enlace a Creativos Online</a>
• Imágenes: las definimos por la etiqueta <img>. Un ejemplo sería <img src=»pajaro.jpg» alt=»Pájaro volando» height=»142″>. Invocamos a la imagen entre las comillas y usamos un alt para el texto alternativo que para SEO es imprescindible.
• Listas: las listas las definimos con <ul> para una desordenada y con <ol> para una ordenada. Los elementos de las listas se usan con <li>. Recordad siempre cerrarlos con la barra.

Con estos elementos tendremos la base para crear una web sencilla como veréis en la buena cantidad de ellos que os enseñaremos en la siguiente sección. Digamos que la estructura semántica con sus elementos más importantes quedan así:

• Header con su barra de navegación para las distintas páginas del sitio.
• El artículo o espacio del body en el que podemos crear una entrada de un blog, poner nuestro curriculum o una imagen.
• La barra lateral o sidebar para poner información adicional.
• El footer o pie, donde colocaremos enlaces a las páginas más importantes del sitio al igual que los iconos de redes sociales (siempre como ejemplo).

En los ejemplos que veréis a continuación están basados todos en un logo simple, pero elegante, un header donde colocan la navegación a las distintas páginas del sitio, un espacio central dominado por un texto o una imagen y un footer con los elementos dichos en el anterior párrafo.

Os recomendamos que no os rompáis la cabeza y vayáis a lo simple. Lo primordial es que esas zonas se diferencien del resto en una pasada visual de segundos. Con el tiempo ya podremos complicarnos y currar más otros espacios.

Este es un ejemplo claro de un código en HTML con los elementos más importantes:

<!DOCTYPE html>
<html lang='es'>
  <head>
    <meta charset='UTF-8'/>
    <title>HTML Semántico</title>
  </head>
  <body>

    <h1>Crear web es fácil!</h1>
    <ul>
      <li><a href='#'>Inicio</a></li>
      <li><a href='#'>Acerca de</a></li>
      <li><a href='#'>Blog</a></li>
      <li><a href='#'>Iniciar sesión</a></li>
    </ul>

  </body>
</html>

Con estas líneas de código HTML habríamos creado primero el título de la página en el header con <title>, en este caso «HTML Semántico», cerraríamos tanto el título con </title>, el header con </head> y daríamos paso a abrir el cuerpo con <body>.

Tendríamos una primera cabecera en H1 con <h1> para cerrarla con </h1>, y pasaríamos a una lista que nos serviría para crear la barra de navegación para las distintas páginas de nuestro sitio. Cerramos la lista con </ul>, cerramos </body> y finalmente el documento html con </html>.

Para finalizar, siempre hay que abrir un documento con <!DOCTYPE html> para cerrarlo al final de todo el código con la barra. Después de abrir el documento siempre se utiliza la referencia al idioma, que en este caso es el español con «es» y con un <html lang=’es’>.

Es importante que os fijéis bien en el código y siempre que abráis una función cerrarla con la barra correspondiente.

Un poco de CSS

Entramos un poco en el CSS, pero de pasada para que entendáis como dar estilo al HTML. Digamos que el CSS y HTML van de la mano para dar esas webs sencillas que encontraréis a continuación.

Si por un lado tenemos el uso semántico del HTML para lo que es el header o cabecera, el cuerpo o body con su artículo o imagen y el footer, en CSS usaríamos la función «Div» para identificar a cada uno de esos espacios para luego poder aplicar los cambios necesarios en el diseño.

Algo tan simple como:

Mientras que podemos aplicar los estilos con Div, una estructura adecuada y perfecta ayudará a que los rastreadores web puedan «leer» perfectamente de que va nuestro contenido, así que si seguimos esa estructura básica, tendremos un gran trabajo y base de primeras.

Un ejemplo sencillo de código CSS:

h1 {
color: white;
text-align: center;
}

Llamamos al H1 y el texto lo pondremos en blanco con color: white; y lo alinearemos al centro con «text align». Siempre hay que cerrar con corchetes después de abrir a la llamada del H1.

Foto de cabecera de Greg Rakozy