PROYECTO WEB
arquitectura de la información mapas web Los mapas de sitio pueden mejorar el posicionamiento en buscadores de un sitio, asegurándose que todas sus páginas puedan ser encontradas. También son una ayuda a la navegación por ofrecer una vista general del contenido de un sitio de un simple vistazo.
0 Home 1 Servicios 2 Portfolio 3.1 3.2 3.3 3.4 3.5 3.6
Identidad corporativa Editorial Web Packaging Fotografia Grafica publicitaria
3 Proceso de trabajo 4 Clientes 4.1 Zona acceso clientes
arquitectura de la informaci贸n contenidos
0 Presentaci贸n de la empresa, filosofia, contacto... 1.1 Servicios que ofrece la empresa. 2 Fotografias e informaci贸n del los trabajos realizados agrupados por tipo del proyecto.
3 Proceso de trabajo de los proyectos realizados. 4.1 Zona de acceso para que los clientes puedan ver el proceso de sus trabajos.
arquitectura de la informaci贸n estuctruras posibles 3 Grupos de Usuarios de la web: - Clientes - Profesionales - Estudiantes
Clientes 1er Nivel
Zona clientes, Servicios, Portfolio
2o Nivel
Empresa
Profesionales 1er Nivel
Portfolio, Servicios, proceso trabajo
2o Nivel
Empresa
Estudiantes 1er Nivel
Portfolio y Servicios
2o Nivel
Empresa
arquitectura de la informaci贸n empresa VS usuario
Necesidades empresa Fidelizar clientes Buscar nuevos clientes Afianzarse en el sector
VS Necesidades usuario Informaci贸n sobre los servicios ofrecidos Informaci贸n sobre trabajos realizados Contacto con nuestra empresa
aspectos competitivos punto fuerte El punto fuerte de mi pagina web será el proceso de trabajo que se lleva a cabo a la hora de hacer un proyecto. Como rasgo caracteristico los clientes tendrán acceso a ver el proceso de trabajo de sus proyectos mediante una zona de acceso a clientes que tendrán que estar registrados en la base de datos de la web. Para identificar al usuario necesitamos una base de datos donde estarán los datos de cada cliente, asi como su login y contraseña.
Punto fuerte de la web: Proceso de trabajo de los proyectos que se realizan en el estudio.
Diferencia competitiva: Zona de acceso a clientes (base de datos) mediante sesiones de usuario
distribución de espacios proporciones
Una de las preguntas más frecuentes al diseñar una web es ¿Cual es la mejor resolución? Respondiendo a esta cuestión actualmente:
- 60% configurados a 1024 x 768 - 17% configurados a 800 x 600 - Resto iguales o mayores a 1280 x 1024
Por tanto llegamos a la conclusión que la mejor resolución es la de 1024 x 768 por tres razones fundamentales: - Visibilidad inicial - Lectura fácil - Estética
960
px Horizontal
uso
Scrool
Vertical
alineación Centrada
districuci贸n de espacios tipologia web
escaparates comercio electr贸nico
Web coorporativa foros portales buscadores comunicaci贸n blog wikis ocio
Una web coorporativa est谩 orientada a que mi empresa tenga una presencia notaria y de calidad en Internet
distribución de espacios reticulas y modulos Al igual que en el diseño editorial el uso de reticulas es esencial para realizar un buen diseño. En este caso se realizará una reticula con estas caracteristicas. - Fuente base: 12 px - Columnas: 12 - Ancho columna: 69 px - Medianil: 12 px
Grid Calculator es una herramienta que nos crea una retícula basada en un tamaño de la letra, el número de columnas, el ancho de la columna y el ancho de medianil.
districuci贸n de espacios reticulas y modulos 69 px
uso Scrool
960 px
distribución de espacios interfaz
Estas son las cualidades mínimas a tener en cuenta en el desarrollo de una buena interfaz:
Claridad.
Concisión.
Familiaridad.
Sensibilidad.
o Rapidez de la interfaz. o Buen feedback
Consistencia.
Estética.
Eficiencia.
Errores.
A continuación se detella la propuesta para GUI (interfaz de usuario) de nuestra web. La estrategia utilizada es crear un menú gráfico el cual te permite mediante un script moverte por el scrool según la sección. Por tanto toda la información estará en la misma pagina.
districuci贸n de espacios bocetos GUI
Proyecto 1 Proyecto 2
IDENTIDAD CORPORATIVA
Proyecto 3 Proyecto 4 Proyecto 5 Cliente: cliente Fecha: 2010
Proyecto 6
FOTOGRAFIA
HOME
sistema de navegación menús y submenús Tanto el menú principal como el submenu serán gráficos, mediante el uso de iconos. Adjunto los iconos del menú. El color principal será el gris, al pasar el ratón por encima del icono este será diferente (naranja).
sistema de navegación ayudas
Para ayudar al usuario a navegar por la web a cada icono del menú y del submenú le acompaña el nombre de la sección, asi reforzará a la imágen y no dará lugar a equivocaciones.
tecnologia y lenguajes La tecnologia utilizada para realizar la pagina web para el estudio creativo deArte es:
- HTML 4.0
- CSS
- JavaScript
- PHP
- MySQL
uso del color general
Naranja corporativo R. 255 G. 185 B. 1 Gris claro R. 194 G. 194 B. 194 Gris oscuro R. 128 G. 128 B. 128
tipografia general
Para la tipograifa de la web se utilizan dos familias tipográficas bien diferenciadas:
Familia tipográfica Arial 12 px Nativa: para todas las masas de texto (información de proyecto, formulario, etc). *para titulos de proyecto se utiliza la versión bold
Britannic Bold 14 px Rasterizada: para el menú y submenú.
Recursos gráficos
En el index de la pagina tenemos una presentación en Flash con la siguiente estructura: Las imágenes van pasando automaticamente promocionando la empresa.
Promoción de la empresa
Menú alternativo del portfolio
568 px
302 px