Tu mejor ayuda para aprender a hacer webs
www.desarrolloweb.com
Introducción al diseño web
Primeros pasos para aquellas pe...
Tu mejor ayuda para aprender a hacer webs
www.desarrolloweb.com
Prólogo a los primeros pasos en el diseño web
Consideracio...
Tu mejor ayuda para aprender a hacer webs
www.desarrolloweb.com
leer las instrucciones es aburrido, y provoca lo que se co...
Tu mejor ayuda para aprender a hacer webs
www.desarrolloweb.com
llamaba la atención; incluso más que el bonito y “efervesc...
Tu mejor ayuda para aprender a hacer webs
www.desarrolloweb.com
Diseño adecuado
El diseño gráfico, industrial, de identida...
Tu mejor ayuda para aprender a hacer webs
www.desarrolloweb.com
nuevos obstaculos, sino dotar a las personas de mejores he...
Tu mejor ayuda para aprender a hacer webs
www.desarrolloweb.com
que su sitio se vea en todos los navegadores, sino también...
Tu mejor ayuda para aprender a hacer webs
www.desarrolloweb.com
Introducción al diseño web: http://www.desarrolloweb.com/m...
Próxima SlideShare
Cargando en…5
×

Introduccion Diseno Web

254 visualizaciones

Publicado el

Libro sobre el disenio web

Publicado en: Diseño
0 comentarios
0 recomendaciones
Estadísticas
Notas
  • Sé el primero en comentar

  • Sé el primero en recomendar esto

Sin descargas
Visualizaciones
Visualizaciones totales
254
En SlideShare
0
De insertados
0
Número de insertados
22
Acciones
Compartido
0
Descargas
2
Comentarios
0
Recomendaciones
0
Insertados 0
No insertados

No hay notas en la diapositiva.

Introduccion Diseno Web

  1. 1. Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.com Introducción al diseño web Primeros pasos para aquellas personas que deseen crear su propia página web, desde el punto de vista del diseñador. Motivación a seguir, programas a utilizar, etc. Autores del manual Este manual ha sido realizado por los siguientes colaboradores de DesarrolloWeb.com: Gck (6 capítulos) César Martín http://www.unosaficionados.com (1 capítulo) Serviweb Diseño web Murcia http://www.serviweb.es/ (1 capítulo) Introducción al diseño web: http://www.desarrolloweb.com/manuales/33/ © Los manuales de DesarrolloWeb.com tienen el copyright de sus autores. No reproducir sin autorización. 1
  2. 2. Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.com Prólogo a los primeros pasos en el diseño web Consideraciones a tener en cuenta a la hora de diseñar una página web. Hace unos días, durante una cena, mi padre me preguntó qué era exactamente eso de los chats, “o lo que quiera que la gente hace cuando se escribe a través de Internet”. Es un hombre un tanto suspicaz ante las nuevas tecnologías, de manera que me vi obligado a lidiar en tres frentes a la vez, añadiendo además el hecho de que la pregunta, planteada con intenciones solapadas, sonó como un aldabonazo y me desconcertó unos segundos. Las tres líneas de ataque de las que hablo eran las siguientes: una, la que me obligaba a describir de manera superficial las bases tecnológicas de los chats, ya que mi padre los había comparado con sistemas de comunicación más convencionales, y yo debía establecer las distancias adecuadas. En segundo lugar, le expliqué los elementos de la práctica, como por ejemplo la interfaz típica de un software de chat o las funciones básicas: flujo de texto en tiempo real y transmisión de archivos, así como el modo en que los chats se organizan y pueden ser disfrutados en diversas salas; se conoce que cosas muy elementales. En tercer lugar le sugerí la utilidad de los chats, sus ventajas frente a otras formas de comunicación a distancia y le expliqué, de forma más general ya, que pese a su postura, Internet constituye en gran medida el sistema sanguíneo del futuro, aunque en el mejor de los casos se trate arterias de fibra de carbono... De ahí pasamos a conversar acerca de cuestiones mucho más diversas en torno a la Red, pero esto ya no tenía importancia. Un tema u otro era un asunto de formas. En realidad, yo no siento mucha atracción por los chats genéricos, y si acaso opto por aplicaciones de mensajería instantánea. Pero aquella conversación me reveló algunas de las bases que, después, me ayudarían a responder a una usuaria en cierto foro de diseño web. Su pregunta era: “Aunque no sé mucho de ordenadores, siempre estoy enganchada, y ahora quiero hacer mi propia página web. ¿Por dónde empiezo?” Desde luego eso era toda una declaración de intenciones y no existía, ni existe, una respuesta infalible. El desarrollo web es un proceso creativo e íntimo, como lo es la navegación en Internet; ¿dónde voy si me conecto a la Red? Pues eso depende de ti. Es más: lo probable es que muy pronto ya ni siquiera dejes que otros usuarios compartan y fisguen en tu historial. De la misma manera, una vez que empezamos a diseñar, decidimos que nadie puede entrometerse en nuestra forma de trabajar. ¿Cierto? Entonces, ¿quiere esto decir que no hay una especie de protocolo de principiantes? Oh, sí que hay un protocolo, un camino de baldosas que todos solemos seguir para llegar a nuestro destino (naturalmente, el destino de cada usuario es distinto, y mientras más diferente e ingenioso, mayor será el aprendizaje). Artículo por Gck Introducción al diseño web Datos a tener en cuenta a la hora de empezar en el diseño web, pues la web es un canal de publicación con características muy especiales. Como en el caso de los chats, podemos considerar que existen tres directrices elementales que sirven de guías. Una de ellas es el conocimiento tecnológico de Internet; estamos obligados a saber cómo funciona de manera general, desde las conexiones de ordenador hasta el valor de los servidores, pasando por la arbitraria congestión de las líneas telefónicas y, desde luego, considerando los diversos navegadores que hay en el mercado, además de prestar atención a la necesidad de instruirnos, aunque sea un poco, en el lenguaje HTML. Es muy difícil tomarse en serio a alguien que no tiene constancia de que, echando un vistazo al código fuente de una página, hallará etiquetas tan básicas como <head> y <body>. Estos conocimientos técnicos nos informan de nuestras posibilidades creativas; no basta con crear una preciosa imagen y colgarla en nuestra página principal, si no sabemos que dicha imagen podría tardar un minuto en cargarse... Y a día de hoy ésa sí es una verdad infalible. En segundo lugar, estamos obligados a saber trabajar. No es más difícil que eso; si trabajas en modo código, debes dominar el HTML y, mejor aún, el HTML y otros lenguajes de uso común en la Red. Si empleas software de tipo WYSIWYG (lo que ves es lo que obtienes, en español), debes ser capaz de conocer las funciones de tu programa. Desde luego que detenerse a Introducción al diseño web: http://www.desarrolloweb.com/manuales/33/ © Los manuales de DesarrolloWeb.com tienen el copyright de sus autores. No reproducir sin autorización. 2
  3. 3. Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.com leer las instrucciones es aburrido, y provoca lo que se conoce como “curva de aprendizaje”, pero es la única manera de llegar a entender y desarrollar todas las posibilidades técnicas e imaginativas que te permiten las diferentes aplicaciones del mercado. Si usas DreamWeaver, aprende DreamWeaver; puede que conozcas FrontPage, por ejemplo, pero eso no conduce a ninguna parte. Son programas distintos que necesitan procesos de instrucción diversos. Artículo por Gck Características especiales de la publicación web Diferencias específicas de la publicación de contenidos en la web con respecto a otros medios como podrían ser la televisión. En tercer lugar es fundamental saber que Internet no es una conferencia telefónica, un CD-ROM o televisión a la carta. La Red sufre limitaciones propias y disfruta también de posibilidades más extensas y personales. Así, cuando diseñamos nuestros sitios web, debemos entender que el visitantes no espera lo mismo de nuestras páginas que de un programa de TV, incluso aunque ambos traten el mismo tema. Tomemos por ejemplo un documental sobre los elefantes africanos. E imaginemos a un ciudadano muy interesado en dichos animales, que en un momento del día debe elegir entre ver la vida de los elefantes en televisión, o buscar información en Internet a propósito de lo mismo. Nosotros tenemos la obligación de diseñar una página web al respecto. ¿Tomaríamos inspiración de la televisión? Quizás alguna, pero si sabemos lo que nos conviene, no pasaríamos de ahí. Por ejemplo, la tele se encuentra a un mínimo de dos metros del televidente; el monitor de la computadora, a unos palmos; el texto debe ser estrecho para no irritar al navegante. En la tele eso da igual. A la tele también le es indiferente mostrar cientos de tomas, cientos de perspectivas y cientos de sonidos emitidos por los elefantes africanos. El web apenas podría hacer eso, en condiciones estándar de conexiones de 56kb. Pero nosotros podemos crear enlaces a páginas que traten todas y cada una de las costumbres del enorme paquidermo. La televisión, no... La pregunta, sintetizada, es ésta: ¿qué damos al navegante para hacerle fiel a nuestros contenidos aunque tan sólo sea durante una sesión? Le damos personalización, le damos contenidos, le damos libertad, le damos ingenio, le damos belleza, le damos oportunidades, le damos buen gusto, le damos comodidad, le damos datos, le damos síntesis, le damos gráficos, le damos información detallada, le damos esquemas, le damos conocimientos en tres palabras o sabiduría en textos de tres kilómetros, le damos todo y más, le damos, en fin, lo que sea que busca. ¿Estamos en condiciones de hacer estas cosas? Más nos vale. Artículo por Gck ¿Algo más sobre el diseño web? Es importante tomarnos el trabajo en serio al hacer una página web: redactar sin faltas y organizar la información debidamente. Hay más cosas, cierto. El diseño enfocado a la Red suele ser hijo de la receptividad, como cualquier otro tipo de diseño. Más allá del aprendizaje técnico, que consiste en leer informaciones a veces aburridas y engorrosas, existe un modo complementario y muy excitante de aprender. Como decía, hablamos de receptividad. De ver lo que otros muchos hacen con un talento que parece inagotable, y dejar que lo que vemos sedimente en nuestro trabajo; desde el diseño gráfico de los sitios web, desde las imágenes que incluyen y que a veces definen su identidad, hasta la manera en que escriben sus textos. Dejadme decir que pocas cosas me parecen tan divertidas y poco serias como un párrafo mal escrito. ¿Es que desenvolvernos en un entorno digital nos da derecho a escribir mal? Sin duda que no. Los textos deben ser sugestivos, esclarecedores o enigmáticos, pero siempre llamativos y eficientes. Hace poco visitaba un sitio web de cierta gran empresa y terminé preguntándome si la redacción había corrido a cargo de algún narrador extranjero. El texto era breve y directo, pero cometía fallos gramaticales tan evidentes que era lo que más Introducción al diseño web: http://www.desarrolloweb.com/manuales/33/ © Los manuales de DesarrolloWeb.com tienen el copyright de sus autores. No reproducir sin autorización. 3
  4. 4. Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.com llamaba la atención; incluso más que el bonito y “efervescente” diseño. Tengamos en cuenta que si nos consideran poco aplicados, no nos tomarán como una alternativa razonable. (Y olvidemos la idea de que alguien nos pague por nuestro trabajo.) Miremos, analicemos, aprendamos de los demás. Es un proceso basado en la febril actividad de nuestro ratón. Tendremos que hacer clic cientos, miles de veces, antes de que el efecto de los maestros del web deje huella en nosotros. Para empezar podemos observar los estudios y casos de grandes empresas del medio como Adobe y Macromedia, que incluyen secciones ex profeso muy interesantes; y también tenemos la oportunidad de mirar las páginas de las agencias de publicidad y diseño; con frecuencia sus mejores trabajos están hechos para sí mismos, y no para sus clientes. Artículo por Gck Herramientas para profesionales del diseño web Herramientas que podemos utilizar para diseñar una página web con excelentes resultados. Algunas recomendaciones importantes y otras para trabajos más específicos. Después necesitas el software que interpretará tus deseos, inquietudes y talentos y les dará la forma que quieras —en el mejor de los casos—, de manera que puedas transferirlo todo a un servidor web abierto al público. Tampoco aquí existe acuerdo. Todo dependerá de si trabajas en modo html —1st Page 2000 es una aplicación reconocida y gratuita— o WYSIWYG, cuyo espectro es también muy amplio, desde el popular y doméstico FrontPage de Microsoft, hasta los profesionales y valiosos DreamWeaver o GoLive!, pasando por los accesibles pero potentes Namo Web Editor o NetObjects Fusion... Tampoco viene mal disponer de algún programa de diseño gráfico. De una manera elemental podemos decir que los hay de dos tipos más o menos puros, y un tercer tipo mixto. En uno de los casos se trata de aplicaciones de dibujo vectorial, es decir, aquellas que generan gráficos desde cero mediante herramientas de trazado geométrico, fundamentalmente, pero también a mano alzada; dicho de una forma más llana, hablamos de dibujos de líneas y curvas. Pero no nos confundamos. Estos programas son madre de muchas de las mejores ilustraciones que vemos tanto en la Red como en publicidad impresa y en los envases de productos cotidianos. Actualmente se asume que Adobe Illustrator es el mejor en este campo; sin embargo, compite con el clásico indiscutible CorelDraw, además de con Macromedia Freehand. Y, no obstante, existen alternativas baratas y eficientes, bien criticadas y admiradas en los medios, como ZonerDraw 4 o Xara. El segundo de los casos cuando hablamos de gráficos es el retoque fotográfico; o lo que es lo mismo, el trabajo de diseño visual sobre imágenes que normalmente combinan fotografías reales con objetos diseñados y efectos visuales. También Adobe y Corel se disputan el pastel, de momento favorable al primero. Sus estrellas son Photo Shop y Photo Paint. Las alternativas más accesibles suelen ser Paint Sho Pro de Jasc y Ulead Photo Impact. Una tercera opción es el software que combina retoque fotográfico y dibujo vectorial; cada vez más, ésta es una posibilidad que traen de serie todos los grandes programas, de manera que no hace falta cambiar de aplicación para mezclar los modos de trabajo gráfico. Artículo por Gck Introducción al diseño web: http://www.desarrolloweb.com/manuales/33/ © Los manuales de DesarrolloWeb.com tienen el copyright de sus autores. No reproducir sin autorización. 4
  5. 5. Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.com Diseño adecuado El diseño gráfico, industrial, de identidad, debe ser adecuado al producto, persona, empresa que representa. Luego podemos entrar a debatir otros aspectos del diseño. ¿Qué significa adecuado? El diseño es una representación formal y por tanto suele ser el primer punto de contacto entre la persona y el producto / servicio / persona. Para que un diseño sea adecuado se disponer de la información necesaria para conocer al cliente, mercado, consumidores, producto / servicio. Con esta información realizar los prototipos necesarios. Desarrollar el diseño final. Estilos Vs. Adecuación Hay diseñadores / consultores / "gurús" que defienden un estilo frente a la adecuación del diseño a la necesidad. El estilo sea "neutro", "barroco", "limpio", "alemán", "americano" no es más que un estilo y por tanto no puede ser el punto de partida para el desarrollo del diseño. El punto de partida debe ser el entendimiento de la necesidad del cliente. Las necesidades del cliente pueden depender de multitud de factores y no se pueden generalizar. Cada momento, cada región, cada canal, cada precio, cada consumidor, hace que la necesidad sea diferente. La mejor herramienta que puede demostrar el diseñador es la comprensión y entendimiento para luego poder realizar la solución gráfica. Diseño La adecuación del diseño frente al estilo hace que los valores del mismo sean algo más universales y duraderos. Es decir, si uno defiende un estilo (neutro, barroco) se puede ver comprometido por la realidad del entorno. Los valores del diseño con los que me siento identificado suelen ser del estilo: • Ayuda. • Cumple. • Duradero. • Se integra (con las personas, sistemas, usuarios). El diseño debe ayudar a las personas. La ayuda puede ser de muchos tipos, puede ayudar a la gente a ganar más dinero, a leer con más facilidad, a saltar más alto, a pasar un buen rato. El diseño cumple su función El diseño debe cumplir la función asignada. El diseño es una "utilidad" para llegar a un fin. Duradero. Lo efímero nos lleva al consumismo desmedido. Tender a que el diseño sirva hoy, mañana, dentro de 10 años. Esta lección me ha llevado tiempo aprenderla. Integrado Este concepto hace referencia a que el diseño se ha de integrar en los procesos naturales de las personas. No hay que crear Introducción al diseño web: http://www.desarrolloweb.com/manuales/33/ © Los manuales de DesarrolloWeb.com tienen el copyright de sus autores. No reproducir sin autorización. 5
  6. 6. Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.com nuevos obstaculos, sino dotar a las personas de mejores herramientas. Diseño no es diseño gráfico y no es diseño industrial En muchas conversaciones se cita "diseño" aplicándolo sin mucho criterio a disciplinas que pasan por el diseño industrial, gráfico, identidad... Visto desde fuera no pasa nada, pero desde dentro es como si hablando de deportes se citara el futbol, las barras paralelas y la natación como si fueran la misma cosa. Supongo que una cosa es ser espectador de sillón y otra subirse a una barra paralela a dar dos mortales. Diseño gráfico. Comunicación Color. Forma. Tipografía. Imágenes. Diseño industrial. Producto. Procesos industriales. Ergonomía. Materiales. "Diseño". Proceso "creativo". El proceso creativo de resolver un problema se puede llamar "diseño" pero es un término tan vago que por lo general no quiere decir nada. Buscar soluciones sin ataduras El diseño debe adecuarse a la resolución del problema, evitando que un estilo nos condicione una forma de pensar o buscar soluciones. Artículo por César Martín Diseño Web. Problemas generales Los princiapales problemas que nos podemos encontrar a la hora de decidir el diseño para nuestra web. Uso de Flash Las Facilidades y Utilidades que presenta flash son innumerables a la hora de interactividad, e impacto visual. Por otra parte la interactividad mejora notablemente en conexiones de cliente/servidor en sus últimas versiones, desafortunadamente las webs 100% flash pueden traer algunos problemas en la incorporación a buscadores. Interactividad El diseñador a la hora de buscar una solución a la interactividad deberá tomar en cuenta a que público está orientado el sitio. Unos de los principales problemas que se presenta en la interactividad, es la complejidad que el diseñador le agrega al site, y sin opción de volver atrás, o mostrar un mapa del site, logrando así que el usuario navegue secciones de subsecciones y quede perdido dentro de la página. Una página deberá ser lo que se llama APT (a prueba de tontos) así logra el objetivo deseado, que el usuario encuentre su búsqueda. Incompatibilidad En este tema entramos en una dura lucha entre los exploradores más famosos del mercado, pero a la hora de ser útil en este rubro, se puede invocar a flash ya que se ejecuta con su proyector y muy rara vez tendrás problemas. Hay que tener mucho cuidado cuando se hacen páginas dinámicas, con php, asp, etc... Y también con los CSS que se va a incluir en la hoja de estilo, esto te puede traer algunos dolores de cabeza ya que los exploradores interpretan diferente y algunos dejan pasar de largo código y otros no, o definen código diferente. Entonces ahí se entra en una disputa no solo con el cliente que quiere Introducción al diseño web: http://www.desarrolloweb.com/manuales/33/ © Los manuales de DesarrolloWeb.com tienen el copyright de sus autores. No reproducir sin autorización. 6
  7. 7. Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.com que su sitio se vea en todos los navegadores, sino también con uno mismo al intentar hacer que las cosas funcionen en varios navegadores. Una solución viable es conocer a fondo los exploradores mas usados en el mercado, y saber como interpretan código. Formularios Web Estoy seguro que a la mayoría le molesta completar formularios Web. Estos mismos si bien son útiles, pueden lograr que un usuario deje de hacer su consulta y se retire del sitio. En mi opinión estos formularios deben ser absolutamente claros y concisos, y por supuesto evitar hacer preguntas inútiles, sin olvidar que el formulario debe ser corto. (Preferencia general de los usuarios). Es útil configurar una auto respuesta para que le quede al usuario un comprobante de lo consultado, ya que este mail puede causar un visita futura. Uso desconsiderado de Ventanas Actualmente nos encontramos invadidos por las publicidades en pop-ups, evite el uso de pop-ups en el sitio, primero porque ya los exploradores más vendidos traen una herramienta para bloquearlos y resulta molesto para el visitante tener que activarlo para ver el material que busca. Artículo por Serviweb Conclusión a la introducción al diseño web Últimos apuntes de interés para el diseño de páginas web. ¿Existe vida más allá de los gráficos estáticos? En realidad sí. La opción más común es Flash de Macromedia, que permite crear películas realmente complejas e interactivas combinando ilustraciones embebidas, gráficos vectoriales, sonidos y ActionScript, el lenguaje de comandos específico de Flash, amén de otras posibilidades muy bien conocidas. Adicionalmente está disponible el formato vectorial SVG, del que es accesible un manual en Desarrollo Web. Conclusión En conclusión, el trabajo del desarrollador web (esa especie de alquimista obligado a dominar y combinar variables tan dispares, y a veces de apariencia incompatible, como la usabilidad y el atractivo de cara al usuario, y la efectividad técnica de cara a la empresa que paga sus honorarios, como por ejemplo en el caso de tiendas on-line), este trabajo, decía, es un proceso largo que requiere un enorme grado de instrucción y aprendizaje técnico, pero también generosas dosis de intuición y anticipación. A fin de cuentas, la Red muta y crece cada poco tiempo, y no podemos quedar atrás. Buena suerte. Por dónde continuar En DesarrolloWeb.com se ha publicado otro manual de diseño que seguro que resultará interesante para aquellos que quieran profundizar en el tema: Curso práctico de diseño web. Podemos concer algunos programas interesantes para el diseño en la categoría de diseño de la sección de programas. También tenemos otros contenidos sobre diseño clasificados en nuestro directorio, donde encontraremos otros manuales, categorías, artículos y enlaces a otras webs. Esperamos que esta introducción al diseño haya resultado interesante. Artículo por Gck Introducción al diseño web: http://www.desarrolloweb.com/manuales/33/ © Los manuales de DesarrolloWeb.com tienen el copyright de sus autores. No reproducir sin autorización. 7
  8. 8. Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.com Introducción al diseño web: http://www.desarrolloweb.com/manuales/33/ © Los manuales de DesarrolloWeb.com tienen el copyright de sus autores. No reproducir sin autorización. 8

×