Lo más importante en el diseño web Julián Jiménez PLANIFICACIÓN Y ORGANIZACIÓN

Transcripción

1 Lo más importante en el diseño web Julián Jiménez PLANIFICACIÓN Y ORGANIZACIÓN El diseño web no está bien dicho ya que diseño web es solo un paso para la elaboración de un web site, el nombre correcto es desarrollo web, pero esta palabra asusta a mucha gente porque se imagina programación, noches largas y complicadas, pero no realmente se dice desarrollo web porque indica un grupo de pasos, uno piensa que el diseño web es solo el diseño, la creatividad, pero no es así hay algo más importante que es la organización y la planificación. Entrando en aguas nuevas Diseño Web no es lo mismo que el diseño tradicional Si hay mala planificación hay malos resultados Mientras más tiempo se pase planificando, menos tiempo se pasa desarrollando Debes entender un proyecto web como un conjunto de etapas y procesos Planificación y organización Etapas de un website Organización física y digital Tipos de website El mapa del sitio Bocetos 1. Etapas de un proyecto web Ver presentación en PowerPoint archivo etapas de un proyecto web 2. Organización física y digital El enemigo número uno de un diseñador web es el desorden, no son los virus, ni las nuevas tecnologías, ni las conexiones lentas. Hay dos tipos de desorden, el desorden físico y el digital. Cuando un proyecto web está bien organizado, nuestra mente también está más clara y así el cliente se siente seguro, porque cree que está hablando con un profesional Ej: Cd romos Documentos impresos Fotos Catálogos Artículos para fotografiar Devolverlos al final Organización fisica Documentos de office Pdf Imágenes Documentos html Archivos fuentes de la interfaz Archivos flash Videos Organización digital

2 3. Tipos de web site Nos aclara en qué tipo de proyecto vamos a involucrarnos Evita que coticemos mal a nuestros clientes Nos ahorra mal entendidos Elimina falsas expectativas desde el comienzo a. Website corporativos Entenderemos como un website corporativo cuando una empresa, institución o corporación decide publicar un sitio web. Son los más comunes: de cada veinte sitios que visitamos 15 son corporativos El objetivo es simple, vender Son formales, generalmente sobrios Son nuestro tipo favorito: son los mejores que nos van a pagar, ya que la empresa lo ve como una inversión, van a vender más o van a captar más público, mas clientes Ejemplos Verizon bireizon Baskin robbins Washington apples

3 b. Website personales Sitios donde individuos expresan todo tipo de ideas, mensajes y documentos de tipo personal. Son informales Nada de formalidad, puedo hablar de los temas que quiera Son experimentales, no tienen un objetivo claro, se publica lo que quiere el individuo Son sin fines de lucro, ya que no se venden productos No es nuestro enfoque principal No son los más lucrativos Los bloggs Ejemplo anabella Steve kamerman c. Website flash Son sitios repletos de elementos interactivos, como animaciones, videos y sonidos. Están creados en su totalidad con adobe flash Son muy vistosos y envolventes Requiere mucho tiempo de desarrollo, por los efectos especiales, es mas complicado, son web site de entretenimiento No son del enfoque de nuestro curso Ejemplos

4 d. Website portal o aplicaciones Se caracterizan por el uso de programación o software especiales para lograr fines específicos, igualmente tienden a ser websites de un tamaño considerable. Requieren de la participación de un programador en el proyecto Debes tener bien claro y por escrito que funciones especiales hará el website El tiempo de desarrollo es más largo Ejemplo Cnn.com portal de noticias Maneja tarjetas de crédito Nota: estos tipos de website se pueden combinar por ejemplo, un website corporativo hecho totalmente en flash 4. Mapa del sitio Es un organigrama pero de una página web, donde se mira la jerarquía, es la estructura base de un sitio de web Debe hacerse al principio, secciones principales secciones secundarias Debe estar completo antes de proceder con el diseño Debe incluirse una sección para el mapa del sitio dentro de la web a. Objetivos de un mapa de sitio Facilitar al máximo la navegación del usuario, para encontrar la información rápidamente Simplificar la navegación rápidamente, que hasta un niño lo pueda entender Que el usuario encuentre la información que busca en un máximo de tres click Que la información importante siempre este en los lugares importantes

5 b. Como hacer un mapa del sitio Ejemplo Empresa X Pantalones para hombre y mujeres Zapatos para mujeres Accesorios para mujeres Zapatos para hombres Regalos para hombres, mujeres y niños Perfumes para hombres Perfumes para mujeres Gorras, camisetas y colonias para niños Solución Empresa X hombres mujeres niños regalos Pantalones Zapatos perfumes Pantalones Zapatos perfumes Gorras Camisetas colonias Hombres Mujeres niños

6 5. Bocetos del diseño Todas las cosas son hechas dos veces, primero en la mente y luego cuando se realiza, primero se hace un maqueta y luego se desarrollo en el programa. Cuál es la importancia del boceto? Nos da una idea clara de cuál será la estructura visual del sitio y como estará distribuido el contenido Ahora tiempo al diseñar Es un característica distintiva de los verdaderos profesionales web Acostumbrarte a hacerlo te da mucha agilidad y desarrolla tu inteligencia espacial, a balancear las cosas Te mantiene alejado de los detalles para que te enfoques en la estructura genera a. Como hacer un boceto

7 6. Tipos de layouts Ver archivo Web del M- Real-mod1-6Tipos de Layouts (diagramación) 7. Las reglas del díselo digital Ver video Web del M- Real-mod1-7Las 6 reglas del diseño digital 8. Principios grafico para la web Ver archivo Web del M- Real-mod1-7Las 6 reglas del diseño digital 9. Como aumentar la creatividad Ver video Web del M- Real-mod1-8Tres pasos para aumentar la creatividad Manejo lenguaje Html Es el lenguaje más básico de la programación web, este funciona a partir de etiquetas, lo que hacen estas es imprimir en un documento web, el programa encargado de interpretar estos códigos son los navegadores, como el internet Explorer Manejo de la herramienta firework Es un programa especializado para la web Manejo de la herramienta Dreamweaver Es el programa encargado de hacer el ensamble de las páginas web, este permite insertar archivos de películas y sonidos