Diseño y web 2

21

description

WEBDISEÑO

Transcript of Diseño y web 2

Page 2: Diseño y web 2

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 Word 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

Page 3: Diseño y web 2

El diseño de páginas web trata básicamente de realizar un documento con información híper enlazado con otros documentos y asignarle una presentación para diferentes dispositivos de salida (en una pantalla de computador, en papel, en un teléfono móvil, etc.).

Estos documentos o páginas web pueden ser creadas:

creando archivos de texto en HTML, PHP, Asp, Aspx, JavaScript, JSP, Python, Ruby.

utilizando un programa WYSIWYG o WYSIWYM de creación de páginas.

utilizando lenguajes de programación del lado servidor para generar la página web.

Page 4: Diseño y web 2

Para el diseño de páginas web debemos tener en cuenta tres etapas: La primera, es el diseño visual de la información que se desea editar. En esta etapa se

trabaja distribuyendo el texto, los gráficos, los vínculos a otros documentos y otros objetos multimedia que se consideren pertinentes. Es importante que antes de trabajar sobre el computador se realice un bosquejo o prediseño sobre el papel. Esto facilitará tener un orden claro sobre el diseño.

La segunda, es la estructura y relación jerárquica de las páginas del sitio web, una vez que se tiene este boceto se pasa a 'escribir' la página web. Para esto, y fundamentalmente para manejar los vínculos entre documentos, se creó el lenguaje de marcación de hipertexto o HTML. Los enlaces que aparecen subrayados en este documento y otros de Wikipedia son ejemplos de hipertexto, puesto que al pulsar sobre ellos conducen a otras páginas con información relacionada. La importancia de la estructura y arborescencia web radica en que los visitantes no siempre entran por la página principal o incial y en ese caso el sitio debe darle la respuesta a lo que busca rápido, además permitirle navegar por el sitio.

La tercera, etapa consiste en el posicionamiento en buscadores o SEO. Ésta consiste en optimizar la estructura del contenido para mejorar la posición en que aparece la página en determinada búsqueda. Etapa no gustosa por los diseñadores gráficos, porque a diferencia del texto, aún para el año 2012 no se pueden tener nuevos resultados en los buscadores con sitios muy gráficos.

Page 5: Diseño y web 2
Page 6: Diseño y web 2

Características de diseño web

Simplicidad

El diseño es más simple que nunca, ya que 2.0 significa limpieza y simplicidad.

Diseño centrado

La gran mayoría de las páginas web están utilizando un diseño centrado en la ventana del navegador,

ya que ofrece una sensación de simplicidad y “honestidad”

Pocas columnas

Cuantas menos columnas aparezcan en la página, el diseño de la web será mucho más sencillo, y

mostrará con mayor claridad los contenidos; dos columnas es el ideal aunque deberíamos evitar más de

tres columnas.

Sección superior separada

En la sección superior o cabecera, generalmente aparece el logotipo y el área de navegación; es

importante que se diferencie la cabecera del resto de la página para poder centrar la atención en lo

que es realmente importante.

Navegación sencilla

Utilizar un menú permanente de navegación, facilitará a los usuarios el acceso a tus contenidos, aunque

en algunas ocasiones deba ser necesario utilizar un submenú que permita acceder a secciones internas

de la página. El menú debe ser claro, obvio y destacado.

Logotipos en negrita

Un logotipo claro, en negrita, permitirá que en una primera impresión los usuarios presten atención.

Tamaño de texto grande

Si eliminamos los elementos “sobrantes” de la página, dispondremos de mayor espacio para poder

incrementar el tamaño de la letra, facilitando que los usuarios puedan leer y asimilar nuestro contenido.

Instrucciones de texto en negrita

Destacar la introducción de la página o las instrucciones en negrita, nos permitirá recalcar la

importancia de este contenido por delante del resto, permitiendo atraer la atención del usuario.

Page 7: Diseño y web 2

Diseño web 2.0 y maquetación según estándares W3C. XHTML 1.0 transicional + CSS2. Diseño web 2.0 y maquetación XHTML+CSS accesible para el portal comercial y

corporativo de la promotora BIGECO Diseño web y desarrollo web Diseño web 2.0 y maquetación según estándares W3C. XHTML 1.0 transitional + CSS2. Diseño web 2.0 y maquetación XHTML+CSS accesible para el portal comercial y

corporativo de la promotora BIGECO Diseño web y desarrollo web

Diseño web 2.0 y maquetación según estándares W3C. XHTML 1.0 transicional + CSS2. Diseño web 2.0 y maquetación XHTML+CSS accesible para el portal comercial y

corporativo de la promotora BIGECO Diseño web y desarrollo web Diseño web 2.0 y maquetación según estándares W3C. XHTML 1.0 transicional + CSS2. Diseño web 2.0 y maquetación XHTML+CSS accesible para el portal comercial y

corporativo de la promotora BIGECO Diseño web y desarrollo web

Diseño web 2.0 y maquetación según estándares W3C. XHTML 1.0 transicional + CSS2. Diseño web 2.0 y maquetación XHTML+CSS accesible para el portal comercial y

corporativo de la promotora BIGECO Diseño web y desarrollo web DISEÑO

Page 8: Diseño y web 2

El diseño web contiene un amplio abanico de posibilidades, lo que lleva a una amplia variedad de tipos de diseño web. A continuación veremos algunos de estos tipos de diseño y su público objetivo.

Diseño web avanzado

Es el tipo de diseño web orientado a profesionales, aquellos que quieren contar con las nuevas tecnologías en el diseño de sus páginas web. El diseño web avanzado es demandado principalmente por empresas tecnológicas o clientes relacionados con el mundo audiovisual.

Diseño web clásico

Es el diseño web tradicional, utilizando los elementos básicos: texto e imágenes. Este diseño web prescinde de elementos como flash, video streaming o cualquier tecnología avanzada.

Diseño web industrial

El diseño web industrial se encarga de las páginas web para industrias, presentando unas webs corporativas cuyo objetivo es representar la imagen de la empresa.

Page 9: Diseño y web 2

El primer diseño web de una página se realiza en 1993, la página web

tenía el nombre Mosaico, y en menos de un año había recibido 2

millones de visitantes. El navegador web era capaz de mostrar tanto

imágenes como textos, aunque con una limitación muy alta a la hora

de diagramar la información de la página web. El diseño web de estas

páginas era lineal y estaba orientado para científicos que eran los

usuarios que compartían su información alrededor de todo el mundo

mediante estas páginas web. La tecnología de los navegadores web

era limitada y no disponía de la capacidad de transmitir información

grafica para la comunicación visual.

Page 10: Diseño y web 2

El diseño web de esta generación está basado en los

conceptos de la primera salvo por que empieza a

utilizar iconos en lugar de algunas palabras, las páginas

web comienzan a poseer imágenes de fondo, aparece

el diseño y uso de botones con relieve para la

navegabilidad, el uso de banners en lugar de

cabeceras, la estructuración de texto de forma

jerárquica mediante menús o listados, propiedades del

código HTML Standard definido.

Page 11: Diseño y web 2

En la tercera generación, el diseño web sigue teniendo muchas restricciones con el uso del lenguaje para los dos navegadores web. El diseño web se orienta en esta generación a los diseñadores, los cuales tienen mucho más dinamismo al aparecer el plumín de Macromedia Flash, el cual revolucionaría la concepción de diseño web.

Es una era de enfocar las páginas web según el objetivo de las mismas: vender productos o servicios, comunidades, información, noticias. Para esta especialización del diseño web de acuerdo al objetivo de las páginas se necesita ayudar al usuario a encontrar la información, generando una navegabilidad estructurada e intuitiva.

La gran mayoría de páginas web que aparecen en esta generación son de publicidad y venta de productos y servicios, con lo que es este el diseño más utilizado. Conseguir acercarles al producto, que deseen ver más páginas del sitio web.

Page 12: Diseño y web 2

En la cuarta generación, el diseño web ya está enfocado totalmente a la multimedia, integrando en las páginas web los elementos multimedia de última generación. Con usuarios de todos los tipos, cualquiera tiene una página web a día de hoy y la variedad de diseño es enorme debido a todas las posibilidades que ofrecen las últimas tecnologías para los programadores. A esto le podemos añadir que las últimas versiones de los navegadores soportan muchas más prestaciones y elementos en las páginas web.

Page 13: Diseño y web 2

Se podría añadir una última generación de diseño web que

representaría el auge de las páginas de televisión ip o televisión

online. La integración de televisión en la web para empresas,

ayuntamientos o asociaciones representa el movimiento más

notable del diseño web en la actualidad. Un ejemplo de empresas

de diseño que ya ofrecen la posibilidad de integración de televisión

en web es Hooping.net mediante su plataforma de televisión IP

Hooping.tv.

Page 14: Diseño y web 2

El diseño web es un proceso elaborado

que está formado por varias fases.

Cuanto más grande es el proyecto,

más fases puede tener. A continuación

hablaremos de las fases básicas del

diseño web, aquellas con las que

cuentan todos los proyectos.

Page 15: Diseño y web 2

Mientras los productos comerciales obedecen a las leyes del mercado, que en parte están influenciadas por los recurso si

el usuario quiere algo, lo va a obtener, o crearlo.

Page 16: Diseño y web 2

La mayoría de nosotros está de

acuerdo en que los sitios de hoy siguen

siendo difíciles de usar. Están llenos de

información irrelevante, y

funcionalidades confusas. Si abres un

sitio web informativo de estos tiempos,

serás bombardeado con

funcionalidades y publicidad. Muchos

sitios quieren hacer demasiado, en

poco tiempo.

Page 17: Diseño y web 2

Todavía son pocos los dueños de sitios web que tienen en

claro un modelo de negocios o un plan. Muchos sitios se

ponen a sí mismos a hacer dinero a través de publicidad

invasiva y una carga excesiva de funcionalidades de

escomers; esperando que mientras más ofrezcan, más

chances van a tener de conseguir una moneda.

Sitios exitosos como Google, Flickr, o Word of Warcraft

muestran lo contrario:

1 – Haz UNA cosa realmente bien.

2 – Simplifica!

3 – No confíes en publicidad al azar

Page 18: Diseño y web 2

Los sitios son funcionalmente confusos porque no son lo

suficientemente delicados, al no ser diseñados con el cuidado

correspondiente. Mientras los sitios web necesitan ser más simples,

esa simplicidad no significa hacer las cosas de una manera

descuidada. Al contrario. La simplicidad se alcanza cuando alguien

se encarga de los de Miren Google por ejemplo. Se ve simple.

Como usuario no te ves afectado por la parte técnica que conlleva

hacer una búsqueda. La máquina se da cuenta por vos y te lo

muestra de una manera tan acabada, que no te haría pensar que

el diseños Más

y más sitios funcionarán de esta manera simple, pero delicada a la

vez. No porque me guste, sino porque a TODOS nos gusta, cuando

los detalles han sido cuidados. Los diseñadores web necesitan ser

más cuidadosos.

Page 19: Diseño y web 2

La razón más importante por las que -para el asombro de muchos

colegas- la TV sigue siendo un medio tan popular, es que ningún sitio vence la velocidad del control remoto.

Ningún diseño de interfaz puede igualar a la velocidad de pasar de una página a la otra en papel. Lo mismo se puede decir de las radios. Es más simple pasar de estación a estación con el dial de la radio, antes que ponerte a preparar tu iPod. En términos de velocidad, las interfaces tradicionales siguen siendo la vara de medida de los diseñadores web.

La gente comenzó a usar twitter y Facebook para enviar mensajes directos en lugar del email, porque requiere menos manipulación física para enviar un mensaje. Los diseñadores web del futuro se centrarán menos en el diseño de la superficie, y más en hacer que los procesos sean más rápidos al reducir la cantidad de interacciones físicas.

La mejor manera de aprender de interfaces veloces es estudiar las que usamos a diario, como: picaportes, cajones, botellas de shampoo. Los diseñadores web necesitan aprender de los diseñadores de productos tradicionales.

Page 20: Diseño y web 2

Belleza

Los diseñadores web se quejan a menudo de que no tienen suficiente libertad. Esto no tiene sentido. Hay más que la suficiente libertad. Es más, hay demasiada libertad. “Demasiado” es la razón por la que tantos sitios se ven y sienten tan horribles.

La Experiencia de Usuario está en la interfaz, no en la superficie. Fíjense en los sitios móviles. A pesar de todo el hipé creado alrededor de lo móvil, los sitios móviles no se ven lindos. Casi no tienen diseño “de superficie”. Y aun así, todos los amamos. Principalmente, son el tamaño de la pantalla y la capacidad de transferencia de nuestras redes inalámbricas lo que lleva a los diseñadores a recortar todos los elementos ornamentales, y enfocarse pura y exclusivamente en la interacción. Desde el punto de vista de un diseñador web, esta es una muy sana práctica.

En vez de perder muchísimo tiempo en los adornos y en discutir con el cliente si verde o amarillo, si sheriffs

o san serif, tenemos que centrarnos en lo que constituye a la interfaz. Estoy más que seguro que el futuro del diseño web va a estar menos enfocado sobre el estilo visual. Estoy seguro porque los sitios que les importa menos lo visual y más la interacción, venden mejor. Y eso es lo que los dueños de los sitios quieren.

Page 21: Diseño y web 2

La Experiencia de Usuario está en la interfaz, no en la superficie. Fíjense en los sitios móviles. A pesar de todo el hipé creado alrededor de lo móvil, los sitios móviles no se ven lindos. Casi no tienen diseño “de superficie”. Y aun así, todos los amamos. Principalmente, son el tamaño de la pantalla y la capacidad de transferencia de nuestras redes inalámbricas lo que lleva a los diseñadores a recortar todos los elementos ornamentales, y enfocarse pura y exclusivamente en la interacción. Desde el punto de vista de un diseñador web, esta es una muy sana práctica.

En vez de perder muchísimo tiempo en los adornos y en discutir con el cliente si verde o amarillo, si sheriffs o san serif, tenemos que centrarnos en lo que constituye a la interfaz. Estoy más que seguro que el futuro del diseño web va a estar menos enfocado sobre el estilo visual. Estoy seguro porque los sitios que les importa menos lo visual y más la interacción, venden mejor. Y eso es lo que los dueños de los sitios quieren.