libro de estilos web dearte.com

Page 1

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



Turn static files into dynamic content formats.

Create a flipbook
Issuu converts static files into: digital portfolios, online yearbooks, online catalogs, digital photo albums and more. Sign up and create your flipbook.