libro de estilos web dearte.com

18
PROYECTO WEB

description

libro de estilos de sergio aguilera sánchez

Transcript of libro de estilos web dearte.com

Page 1: libro de estilos web dearte.com

PROYECTO WEB

Page 2: libro de estilos web dearte.com

arquitectura de la información

mapasweb

Home

Servicios

Portfolio

Identidad corporativa

Editorial

Web

Packaging

Fotografia

Grafica publicitaria

Zona acceso clientes

Los mapas de sitio pueden mejorar el posicionamiento en buscadores de un sitio, asegurándose que todas sus pági-nas puedan ser encontradas. También son una ayuda a la navegación por ofre-cer una vista general del contenido de un sitio de un simple vistazo.

012

34

3.13.23.33.43.53.6

4.1Clientes

Proceso de trabajo

Page 3: libro de estilos web dearte.com

arquitectura de la informacióncontenidos

Presentación de la empresa, filosofia, contacto...

Servicios que ofrece la empresa.

0

1.1

2

3

4.1

Fotografias e información del los trabajos realizados

agrupados por tipo del proyecto.

Proceso de trabajo de los proyectos realizados.

Zona de acceso para que los clientes puedan ver el

proceso de sus trabajos.

Page 4: libro de estilos web dearte.com

arquitectura de la información

estuctrurasposibles

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

Page 5: libro de estilos web dearte.com

arquitectura de la informaciónempresa VSusuario

Necesidades empresaFidelizar clientes

Buscar nuevos clientes

Afianzarse en el sector

Necesidades usuarioInformación sobre los servicios ofrecidos

Información sobre trabajos realizados

Contacto con nuestra empresa

VS

Page 6: libro de estilos web dearte.com

aspectoscompetitivos

puntofuerte

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 da-tos de la web. Para identificar al usuario necesita-mos 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 da-tos) mediante sesiones de usuario

Page 7: libro de estilos web dearte.com

distribución de espaciosproporciones

- 60% configurados a 1024 x 768

- 17% configurados a 800 x 600

- Resto iguales o mayores a 1280 x 1024

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:

Por tanto llegamos a la conclusión que la mejor resolu-ción es la de 1024 x 768 por tres razones fundamentales:

- Visibilidad inicial- Lectura fácil- Estética

960 px

usoScrool alinea-

ción

Horizontal

Vertical

Centrada

Page 8: libro de estilos web dearte.com

districuciónde espacios

tipologia web

Una web coorporativa está orientada a que mi empresa tenga una presencia notaria y de calidad en Internet

escaparatescomercio electrónico

Web coorporativa

foros portalesbuscadores

comunicaciónblog wikis

ocio

Page 9: libro de estilos web dearte.com

distribución de espaciosreticulas ymodulos

Grid Calculator es una herramienta que nos crea una retícula basada en un ta-maño de la letra, el número de colum-nas, el ancho de la columna y el ancho de medianil.

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 ca-racteristicas.

- Fuente base: 12 px- Columnas: 12- Ancho columna: 69 px- Medianil: 12 px

Page 10: libro de estilos web dearte.com

districuciónde espaciosreticulas y

modulos

960 px

69 px

usoScrool

Page 11: libro de estilos web dearte.com

distribución de espaciosinterfaz

Claridad.

Concisión.

Familiaridad.

Sensibilidad.

o Rapidez de la interfaz.

o Buen feedback

Consistencia.

Estética.

Eficiencia.

Errores.

Estas son las cualidades mínimas a tener en cuenta en el desarrollo de una buena interfaz:

A continuación se detella la propuesta para GUI (in-terfaz 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 informa-ción estará en la misma pagina.

Page 12: libro de estilos web dearte.com

districuciónde espacios

bocetosGUI

HOMEIDENTIDAD

CORPORATIVA

FOTOGRAFIA

Proyecto 1

Proyecto 2

Proyecto 3

Proyecto 4

Proyecto 5

Proyecto 6Cliente: cliente

Fecha: 2010

Page 13: libro de estilos web dearte.com

sistema denavegaciónmenús ysubmenú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).

Page 14: libro de estilos web dearte.com

sistema denavegació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.

La tecnologia utilizada para realizar la pagina web para el estudio creativo deArte es:

- HTML 4.0

- CSS

- JavaScript

- PHP

- MySQL

tecnologia ylenguajes

Page 15: libro de estilos web dearte.com

uso delcolorgeneral

Naranja corporativo

R. 255G. 185B. 1

Gris claro

R. 194G. 194B. 194

Gris oscuro

R. 128G. 128B. 128

Page 16: libro de estilos web dearte.com

tipografiageneral

Para la tipograifa de la web se utilizan dos fami-

lias tipográficas bien diferenciadas:

Familia tipográfica Arial12 px

Nativa: para todas las masas de texto (informa-

ción de proyecto, formulario, etc).

*para titulos de proyecto se utiliza la versión

bold

Britannic Bold14 px

Rasterizada: para el menú y submenú.

Page 17: libro de estilos web dearte.com

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 pro-mocionando la empresa.

Menú alternativo

del portfolio

Promoción de la empresa

568 px

302 px

Page 18: libro de estilos web dearte.com