PRESENTACIÓN PÚBLICA

PROYECTO WEB

de .com
introducción
proyecto
web

Sobre la empresa:

La marca “de Arte” es una empresa joven que se dedica al Diseño Grafico.
Nace en el año 2009 como una idea individual donde los diferentes campos a cubrir se
van definiendo en función de la demanda de los clientes. Finalmente se opta por trabajar
sobre estas lineas generales de forma especializada:

- Identidad corporativa

- Editorial

- Web

- Grafica publicitaria

- Packaging

- Fotografía
introducción
proyecto
web

¿Que necesita la empresa?, ¿Por qué?

El proyecto consiste en la realizar una plataforma web completa adecuada a las

necesidades de la empresa y de sus clientes. Tener tu propio sitio web establece tu
credibilidad de inmediato online y offline.

En nuestro caso en particular, necesitamos la web para:

- Promoción:

En la web debemos hacer saber al cliente los servicios que ofrecemos, también se
mostarán los trabajos ya realizados a otros clientes. Un amplio portfolio dividido en las
categorias: Imagen corporativa, editorial, diseño web, packaging...

- Imagen de marca:

Asentar la imágen de marca de nuestro estudio creativo.

análisis del
sector
proyecto
web
La competencia en la red

Dentro del sector del diseño gráfico nos disponemos a analizar las distintas web del
sector, para ello nos hacemos las siguientes preguntas:

¿Que webs analizamos?

Dividiremos las web a analizar en tres grupos:

- Estudios de diseño de tamaño mediano (son nuestra competencia directa).
- Agencias de publicidad
- Diseñadores Freelance

Se analizarán las web corporativas de las que disponenen. Dado la gran cantidad de
estudios de diseño que hay me decanto por las webs que veo más interesantes, y cuya
tecnologia sea accesible.

¿Que información nos interesa?

- Lenguaje que utilizan (HTML, PHP, MySQL, JavaScript, ¿Flash?).
- Numero de Secciones.
- Contenido.
- Aspecto.
análisis del
sector
proyecto
web GRUPO 1: ESTUDIOS DE DISEÑO

Brida Estudio creativo

Cabecera y menú

Zona de muestra
de trabajos

Botón ampliar trabajo

Este estudio creativo con sede en Málaga tiene una estructura sencilla, parte izquierda para
mostrar los trabajos y parte derecha para un menu que se divide en dos partes: estudio y
portfolio dividido en categorias. En la sección de estudio nos muestran los datos para contactar
y los productos/servicios que ofrecen. El menú y la cabecera se encuentran en la parte derecha
(algo poco habitual) y nunca cambia, exepto el recurso del circulo que cambia según la sección
en la que nos encontremos. Los trabajos se muestran verticalmente con scrool hacia abajo y
cada proyecto con un botón ‘ver mas’ que permite ampliarlo con más fotografias.
análisis del
sector
proyecto
web GRUPO 1: ESTUDIOS DE DISEÑO

Be My Design Studio

Cabecera y menú

Zona de muestra
de trabajos

Pagina de
inicio

La web de Be My Design Studio dispone de una pagina de inicio donde muestra una presentación
en Flash, en esta presentación está también el menú pudiendo entrar directamente a la sección
que desees. El tamaño de la pagina es fijo y esta centrado. Una vez dentro de las secciones los
trabajos se muestran hacia abajo. La web también esta disponible en inglés.
análisis del
sector
proyecto
web GRUPO 1: ESTUDIOS DE DISEÑO

Tac creativos

Zona de muestra de trabajos

Menú Detalles del trabajo

Esta web tiene la particularidad de mostrar los trabajos en la zona superior de la web, de forma
horizontal con una barra de desplazamiento. Abajo tiene una zona fija que es el menú dividido
en las siguientes categorias y clientes. También disponemos de una zona donde se muestras los
detalles del trabajo tales como año, cliente, producto...
La web está echa totalmente en Flash.
análisis del
sector
proyecto
web GRUPO 1: ESTUDIOS DE DISEÑO

Takeone

Cabecera

Zona de muestra
de trabajos

La caracteristica más importante de esta web es que no tiene menú. Se divide en dos bloques
(como podemos ver arriba), la cabecera y el contacto están en el primer bloque y el portfolio se
muestra hacia abajo pudiendo ampliarse los trabajos haciendo click en ellos. La tecnologia que
usa es HTML y JavaScrip para ampliar los trabajos en una nueva ventana.
análisis del
sector
proyecto
web GRUPO 2: AGENCIAS DE PUBLICIDAD

Limón publicidad

Contacto

Menú Zona de muestra de trabajos

Datos de la empresa

En esta web se divide en 4 zonas claramente diferenciadas como se indica arriba. No dispone
de ninguna sección sobre la empresa y opta por tener un footer inferior con la dirección, correo
electronico, telefono y demás datos.
Para contactar con ellos dispone de un formulario arriba. Todas las zonas son fijas excepto la de
muestra de trabajos que va cambiando según la categoria en que estemos. Respecto al tamaño
es fijo y la pagina esta centrada. Usa la metafora como modo de comunicar.
análisis del
sector
proyecto
web GRUPO 2: AGENCIAS DE PUBLICIDAD

Oi estudio creativo y publicidad

Zona de muestra
de trabajos

Menú y control

Respecto a esta web decir que es totalmente diferente a todas las vistas hasta ahora. Está echa
totalmente en flash y es muy dinámica. Tiene un escenario que incluso puedes cambiar a tu
gusto moviendo los iconos. La web tiene la particularidad de que interactua con el usuario
mediante el audio y video. Según la sección en que te encuentres se ejecuta un audio que te va
explicando cosas del estudio.
análisis del
sector
proyecto
web GRUPO 3: DISEÑADORES FREELANCE

Peha Personal Portfolio

Menú Zona de muestra de trabajos

Respecto a esta web del freelance nos encontramos con una pagina con una interfaz limpia,
con un menú en el lateral izquierdo que siempre se mantendrá en el mismo lugar, la pagina va
cambiando el contenido según la sección que escojamos en el menú. Los trabajos se muestran
verticalmente hacia abajo, nos muestra 5 trabajos en cada pagina, pudiendo pasar a la siguiente
mediante un botón “Next Page”.
análisis del
sector
proyecto
web GRUPO 3: DISEÑADORES FREELANCE

Isaac León

Menú

Zona de muestra de trabajos

Pagina web muy dinámica y realizada completamente en Flash, nos encontramos todos los
trabajos realizados por el diseñador en miniaturas ampliandose cuando pulsamos sobre ellas,
dandonos también la información del cliente, nombre del proyecto, año, etc. En el menú
podemos encontrarnos un enlace hacia un blog o la pagina de Facebook del freelance.
análisis del
sector
proyecto
web
CONCLUSIONES

- La interfaz tiene que ser clara e intuitiva (lo importante son los trabajos).
- Portfolio dividido en categorias.
- Para diferenciarnos necesitamos alguna sección diferente. Ejm: Proceso de trabajo.
- Lenguaje HTML, uso de javascript para efectos.

Uso de las siguientes tecnologías:

- HTML 4.0
- CSS
- JavaScript
- PHP
- MySQL
posiciona-
miento
proyecto
web
Posicionamiento web

Queremos posiconar a la web como una referencia para nuestros clientes, la cual acudan para ver
que está haciendo nuestro estudio y como (proceso de trabajo de nuestros proyectos). También
se usará de modo de promoción para captura de nuevos clientes.

Respecto al posicionamiento web depende de 2 procesos:

1º El grado de Optimizacion Web que tiene su página web.

Los buscadores tienen que identificar y entender a que se dedica su empresa y que palabras
son las que quiere posicionar. Para ello, el codigo fuente de su página web debe de estar
perfectamente optimizada para cumplir con los requisitos establecidos de posicionamiento.

2º La Popularidad Web. Una vez optmizada la página es necesario generar popularidad.

público
objetivo
proyecto
web
Público objetivo

El público objeto de la web se puede diferenciar en tres grupos fundamentales:

- Clientes: Empresas que necesitan de nuestros servicios. Es el grupo fundamental al

que va destinado la pagina web.

- Profesionales del diseño gráfico: Profesionales del mismo sector que entran para
investigar que se está haciendo en su materia.

- Estudiantes de diseño gráfico: Estudiantes del sector que quieren estar informados
del trabajo que se está realizando en los estudios de diseño, incluso les sirve de
inspiración para sus propios trabajos.

El diseño de la web debe estar muy cuidado ya que nos encontramos con un público objetivo
exigente, con grandes espectativas y que sabe apreciar el buen diseño. Por tanto es desisivo un
buen diseño web para atraer y retener al usuario.
 punto
fuerte
proyecto
web
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.
libro de
estilos
proyecto
web
Mapa Web y contenido

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

1 Servicios 1.1 Servicios que ofrece la empresa.
2 Portfolio 2 Fotografias e información del los trabajos realizados
3.1 Identidad corporativa agrupados por tipo del proyecto.
3.2 Editorial
3.3 Web
3.4 Packaging
3.5 Fotografia
3.6 Grafica publicitaria

3 Proceso de trabajo 3 Proceso de trabajo de los proyectos realizados.

4 Clientes 4.1 Zona de acceso para que los clientes puedan ver el
4.1 Zona acceso clientes proceso de sus trabajos.
libro de
estilos
proyecto
web
Proporciones

Una de las preguntas más frecuentes al diseñar una web es ¿Cual es la mejor resolución?
Actualmente, 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
libro de
estilos
proyecto
web
Reticulas y módulos

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
libro de
estilos
proyecto
web
Reticulas y módulos

69 px

uso
Scrool

960 px
libro de
estilos
proyecto
web
Interfaz

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.
libro de
estilos
proyecto
web
Interfaz

Proyecto 1
IDENTIDAD
Proyecto 2 CORPORATIVA HOME

Proyecto 3
FOTOGRAFIA
Proyecto 4

Proyecto 5

Proyecto 6
Cliente: cliente

Fecha: 2010
libro de
estilos
proyecto
web
Menú y submenú

Tanto el menú principal como el submenu se-

rán gráficos, mediante el uso de iconos.

Adjunto los iconos del menú. El color princi-

pal será el gris, al pasar el ratón por encima
del icono este será diferente (naranja).

Para ayudar a la navegación el icono de la

sección donde nos encontremos se quedará
en naranja, con esto ayudamos al usuario a
que no se pierda y sepa siempre donde se en-
cuentra. También a cada icono del menú y del
submenú le acompaña el nombre de la sec-
ción, asi reforzará a la imágen y no dará lugar
a equivocaciones.
libro de
estilos
proyecto
web
Uso del color

Naranja corporativo
R. 255
G. 171
B. 7

Gris claro
R. 214
G. 214
B. 214

Gris oscuro
R. 128
G. 128
B. 128
libro de
estilos
proyecto
web
Tipografia

Las tipografias elegidas para el proyectos son las siguientes:

Miryam Pro Nativa: para todas las masas de texto (infor-

12 px mación de proyecto, etc).

Britannic Bold Rasterizada: para el menú y submenú.

14 px
libro de
estilos
proyecto
web
Recursos gráficos

Las imágenes del portfolio tienen las siguientes dimensiones:

568 px

302 px
libro de
estilos
proyecto
web
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 o manualmente mediante los botones ant/sig.

Galeria de imágenes de la empresa

Menú alternativo del portfolio

conclusiones
proyecto
web

CONCLUSIONES

- Importante ver muchas web para coger ideas.

Ejemplo: el modo de navegación de mi web es original y no muy utilizado.

- Tener alguna sección que no tenga tu competecia directa.

Ejemplo: la sección de proceso de trabajo del estudio.

- La programación en JavaScript te permite multiples efectos faciles de emplear.

- Lo importante es el CONTENIDO y como se muestra.