libro de estilos web dearte.com

Post on 11-Mar-2016

215 views 0 download

description

libro de estilos de sergio aguilera sánchez

transcript

PROYECTO WEB

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

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.

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

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

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

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

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

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

districuciónde espaciosreticulas y

modulos

960 px

69 px

usoScrool

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.

districuciónde espacios

bocetosGUI

HOMEIDENTIDAD

CORPORATIVA

FOTOGRAFIA

Proyecto 1

Proyecto 2

Proyecto 3

Proyecto 4

Proyecto 5

Proyecto 6Cliente: cliente

Fecha: 2010

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).

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

uso delcolorgeneral

Naranja corporativo

R. 255G. 185B. 1

Gris claro

R. 194G. 194B. 194

Gris oscuro

R. 128G. 128B. 128

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ú.

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