6 formas de hacer un diseño destacable

ByLuis

A la hora de hacer diseños mucha gente puede opinar sobre ello mejor que yo, pero a mí estos consejos me han gustado. Está claro que en muchos diseños no se pueden usar, pero para algunas circunstancias sí son interesantes de aplicar.

  • Fondos de pantalla grandes: los fondos de pantalla grande pueden hacer que el diseño resalte, a parte de que son fáciles de añadir.consejos1.png
  • Layout original: no es la primera vez que veo diseños con secciones de tamaños que superan el ancho y alto del navegador y que para acceder a cada sección hay que hacer un scroll progresivo (mediante javascript). Son originales y en algunos casos muy acertados. En el ejemplo que os pongo, cada color es una sección y el tamaño original tiene un ancho de 6000px.consejos2.png
  • Navigación creativa: la navegación puede dar mucho juego para mejorar el diseño, ya sea mediante rollovers u otras cosas. Eso sí, ante todo que prime la usabilidad. En el ejemplo que os paso los menús van a juego con los colores de la calle.consejos3.png
  • Minimalismo: aunque por ahora se ha tratado de consejos con un gran diseño, eso no implica que un gran diseño tenga que ser aparatoso, puede ser perfectamente minimalista, lo cual hace que llame mucho la atención.consejos4.png
  • Logo: está claro que un buen logo hace que te represente y además te diferencie.
  • Layout horizontal: aunque la gente está acostumbrada al scroll vertical, este tipo de diseño puede llegar a ser muy atractivo, aunque haya gente que lo odie.consejos6.png

6 Methods to Make Your Website Standout

Similar Posts

hCard con CSS

ByLuis

En 24 ways nos vuelven a regalar un buen artículo sobre cómo mostrar las hCard con estilos.
Claro, el diseño que han realizado quizás no se amolde al nuestro, pero la técnica que usan está bastante bien: usar una imagen de fondo y luego cuatro imágenes para cada esquina.
hcard.gif
Styling hCards with CSS

Clear de float en CSS

ByLuis

Aunque existe una forma común de hacer un clear de los float de los elementos anteriores:

<div class="clear"></div>

existe una forma más adecuada aunque realmente no es nueva, ya que ya se habló de ella en el 2004.

Para ello usaremos la propiedad :after que genera contenido antes del contenido del elemento. Tendremos una capa contenedora la cual modificaremos mediante CSS para que genere contenido invisible y con clear.

#container:after
{
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
#container
{display: inline-block;}
/* Oculta para IE-mac \*/
* html #container
{height: 1%;}
#container
{display: block;}

Clear Your Floats – The Right Way

10 ficheros que debería tener cualquier web

ByLuis

Cuando se realiza una web suelen ser necesarios una serie de ficheros que en algunas ocasiones no existen:

  • 404.html: para mostrar un mensaje de error que indique que la página visitada no existe, algo que ocurrirá más veces de las que pensamos.
  • about.html: una buena página about ofrece información de forma rápida sobre lo que el sitio hace, indicando por qué ha sido creada, qué deben tener en cuenta los usuarios, algunos enlaces de navegación. Eso sí, ante todo debe ser concisa y no muy extensa, porque entonces la gente no obtiene la información deseada.
  • contact.html: información sobre quién está detrás de la página y un medio para comunicarse con ellos, ya sea por internet u otros medios.
  • copyright.html: protege tus contenidos, ya sea con copyright o Creative Commons, pero que quede claro a quién le pertenece el contenido y que se puede hacer sobre él.
  • index.html: aunque tu página principal no sea esa, es conveniente que este fichero apunte a tu página principal. Si se es generoso también habría que hacerlo con el fichero index.htm e index.cgi.
  • index.rss: para aquellos que quieren leer la información que se ofrece de forma rápida mediante feeds.
  • privacy.html: si vas a obtener información de los usuarios, es necesario indicar qué se va a hacer con esta información y cómo se va a tratar.
  • robots.txt: para que los contenidos que deseas de tu web sean indexados automáticamente por los buscadores.
  • security.html: el uso no es siempre el mismo, pero si existen temas que conciernan a la seguridad es conveniente usarlo, por ejemplo si se usan datos sensibles de los usuarios o si existen procedimientos de seguidad.
  • sitemap: un lugar donde el usuario puede tener un vistazo de la estructura general de la web y así poder moverse con facilidad.

Web development tips: Ten (or a few more) files every Web site needs

Concurso: enseña a realizar una página Web

ByLuis

mdw.pngEn Maestros del Web han lanzado un concurso en el que se pide enseñar a realizar una página web. En Sentido Web nos gustan todo este tipo de iniciativas, sobre todo cuando se trata de ayudar a otros a aprender lo necesario para introducirse en el mundo del desarrollo web.

Además, me han pedido que forme parte del jurado, lo cual, a parte de un honor, es una oportunidad de aprender de los concursantes que no pienso desaprovechar.

Bases:

Necesitamos que desarrolles una página web y la publiques en cualquier espacio a tu disposición. En donde debes explicar a los internautas los pasos necesarios para crear su página web. Puedes utilizar cualquier recurso: textos, audios, vídeos y animaciones, estructurados, en un sitio web. Los contenidos deben estar en idioma español.

El material debe ser inédito, de la autoría del participante y ceder los derechos de reproducción por medio de una licencia Creative Commons de Reconocimiento 2.5 (lo que significa que todo el mundo podrá difundir tu creación una vez se mantenga tu crédito correspondiente).

A quién va dirigido:

Toda aquella persona que tenga conocimiento de publicación de contenidos en la web.

Fechas importantes:

30 de noviembre 2006 – último día de recepción de trabajos.
11 de diciembre – presentación de los 10 mejores trabajos.
15 de diciembre – anuncio del ganador.

Premio:

Un iPod de 30GB en tu color favorito.

Procedimiento:

Para participar necesitarás estar inscrito en forosdelweb.com para que tengamos tus datos. Deja un mensaje en el tema de Inscripción al concurso para confirmar tu participación.

La dirección URL del proyecto deberá ser enviada por correo a concurso(AT)maestrosdelweb.com antes del 30 de noviembre. Deberás incluir tu nombre de usuario de forosdelweb.com y una breve descripción del proyecto.

Vía / Maestros del Web

|

Peculiar: iconos realizados con CSS

ByLuis

Peculiar es un paquete de iconos realizado sólo en CSS. Ha sido creado pensando en sitios y aplicaciones web que dependan de un número muy reducido de peticiones HTTP o que no necesiten o no puedan utilizar ninguna imagen. El paquete contiene 45 pict …

Post original