Que es el Diseño Web?

El diseño web es una actividad que consiste en la planificación, diseño e implementación de sitios web. No es simplemente una aplicación del diseño convencional, ya que requiere tener en cuenta la navegabilidad, interactividad, usabilidad, arquitectura de la información y la interacción de medios como el audio, texto, imagen, enlaces y vídeo. Se lo considera dentro del diseño multimedia.

La unión de un buen diseño con una jerarquía bien elaborada de contenidos, aumenta la eficiencia de la web como canal de comunicación e intercambio de datos, que brinda posibilidades como el contacto directo entre el productor y el consumidor de contenidos, característica destacable del medio.

El diseño web ha visto amplia aplicación en los sectores comerciales de Internet especialmente en la World Wide Web. Asimismo, a menudo la web se utiliza como medio de expresión plástica en sí. Artistas y creadores hacen de las páginas en Internet un medio más para ofrecer sus producciones y utilizarlas como un canal más de difusión de su obra.
fuente.wikipedia

Freepik, un motor de busqueda de diseños gratuitos, interesante herramienta para diseñadores

Hace poco me han escrito sugiriendome a Freepik como un buscador de diseños gratuitos , y en así, de acuerdo a su filosofía de trabajo Freepik es un motor de búsqueda que ayuda a los diseñadores gráficos y web para localizar fotos de alta calidad, vectores, ilustraciones y archivos PSD para sus proyectos creativos.

Freepik rastrea y localiza contenidos gráficos libres (es importante separar lo que es libre de lo grauito) en Internet y muestra los resultados en una presentación adecuada para facilitar el acceso. Freepik hace más fácil encontrar los archivos necesarios para nuestros proyectos sin tener que buscar manualmente decenas de sitios web.

¿Cómo funciona?

Robots Freepik visitan cientos de páginas web en busca de recursos gráficos gratuitos, leen el contenido de estas páginas y seleccionan los que consideran interesantes, trabaja con un algoritmo que determina el valor del contenido y clasifica los resultados según criterios de calidad y pertinencia.

¿Por qué es gratis?

El trabajo duro en Freepik no se hace por la gente. Los robots rastreo de Internet mantienen la base de datos actualizada con los últimos contenidos.

Freepik objetivo es convertirse en una de las fuentes más importantes de la gráfica relacionada con el contenido libre y una herramienta esencial para los diseñadores. Una vez que el usuario encuentra los archivos que tanto se necesitan, él / ella se redirige a los sitios de alojamiento de los archivos originales, es decir que Freepik no almacena los archivos en sí, solo los enlista..

Puedes entrar desde freepik.es

fuente.Freepik

Errores comunes en el Diseño Web

Para aquellos que empiezan con sus primeros diseños web y aquellos que busquen mejorar sus proyectos con el objetivo de hacerlos destacar sobre el resto, Naldz Graphics ha reunido una colección que resultara de especial interés para repasar y evitar cometer algunos de los considerados como errores más comunes.

Errores comunes en el diseño Web:

• Mensaje poco claro: consigue que tus usuarios sean capaces de captar el mensaje y propósito de tu site con tan solo un vistazo.
• Uso inadecuado de colores: una incorrectacombinación de colores puede ofrecer una imagen poco profesional capaz de ahuyentar a un buen número de usuarios.
• Contenidos ilegibles: evita usar fuentes tipográficas que no sean de lectura fácil. El tamaño y el color de la fuente son dos elementos a tener en cuenta.
• Respeto al usuario: incluye un resumen de tu política de privacidad para favorecer la suscripción de usuarios y crea un sistema que permita darse de baja.
• Incluye un buscador: haz que el acceso a contenidos en tu site sea más fácil a través de un buscador visible dentro de la portada de tu web.
• Evita una navegación complicada: trata de no confundir a tus usuarios, es recomendable crear apartados identificables y espaciados, enlaces fáciles de encontrar y diferenciados del texto con el típico subrayado y/o color azul, así como evitar un diseño sobrecargado con excesiva cantidad de texto.
• Cuidado con las introducciones: evita usar una introducción flash excesivamente larga, sin que esta ofrezca un botón para saltársela
• Cuidado con la música de fondo: en muchos casos la solución rápida que toma un usuario que no encuentra de su agrado la música implementada en cerrar el site y buscar en otro lugar. Si estas decidido a usar música incluye la posibilidad de detenerla o enmudecerla.
• Correcto formato de imagen: JPEG, PNG y GIF son los formatos estándar que evitan la mayor parte de los problemas de carga de imágenes. El uso de un tamaño optimizado de imágenes evita además un excesivo tiempo de carga.
• Publicidad acertada: evita la confusión de tus contenidos con la publicidad de tu site, elige un lugar visible para colocar tus anuncios pero diferenciado del resto de la página.
• Compatibilidad navegadores: asegúrate que tu website es compatible con los principales navegadores web. Especial mención merece Internet Explorer 6, con diferencia el navegador que más dolores de cabeza produce a diseñadores y desarrolladores web pero que sin embargo sigue siendo usado por cerca del9% de usuarios en todo el mundo.

Esta selección está abierta a la participación de todos aquellos que quieran contribuir con aquel/aquellos errores que consideren suelen cometerse con mayor frecuencia y resultan especialmente lesivos de un mejor diseño web afectando tanto a la calidad como a la cantidad de tráfico en nuestro site.

fuente.desarrolloweb

Diseño de Temas para WordPress

He aqui un ejemplo diseño con css de un tema (solo el index) wordpress, de 3 columnas, una barra de navegación , pie de página y cabecera de página, la imagen que se muestra debajo describe el funcionamiento del mismo, y los detalles que se aplican con el css, debajo de la imagen el codigo html para general la web y el css que la formatea.

Este diseño cuenta con lo siguiente:

– Container
– Header
-Top Navigation Menu
– Left Navigation Menu
– Right Navigation menu
– Content Part
– Footer

Aqui vemos el codigo html del index:

<div id=container>
<div id=»header»>
<h2>Header</h2>
</div>
<div id=»topnav-container»>
<ul id=»topnav»>
<li> <a href=»#»>Home</a> </li>
<li> <a href=»#»>Categories</a> </li>
<li> <a href=»#»>Services</a> </li>
<li> <a href=»#»>About us</a> </li>
<li> <a href=»#»>Contact us</a> </li>
</ul>
</div>
<div id=»leftnav»>
This is a left navigation bar.
This is a left navigation bar
This is a left navigation bar
</div>
<div id=»rightnav»>
This is a right navigation bar
</div>
<div id=»content»>
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod

tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam
</p>
</div>
<div id=»footer»>
<h2>Footer</h2>
</div>
</div>

Aqui vemos el CSS que formatea este diseño:

#container {
margin: 10px auto;
width: 95%;
border: 1px solid gray;
}
#header {
padding: 3px;
border-bottom: 1px solid gray;
}
#topnav-container {
border-bottom: 1px solid gray;
padding: 4px 0;
background: #e0e0e0;
}

%