Este documento presenta un proyecto para rediseñar la página web de un banco mexicano. Se pide analizar los sitios web de varios bancos, generar propuestas de diseño para escritorio, tableta y teléfono del sitio del Banco Santander que mejore la legibilidad y navegabilidad. El proyecto final incluirá análisis, diseños propuestos y justificación del diseño.

1. Escuela Comercial
Cámara de Comercio
Desarrollo Web
Proyecto Final
2015
Entrega 21 de Agosto 2015
Diseño de página para Banco.
Introducción:
Hay varios factores que han permitido la evolución
del diseño web en los últimos años.
Estos factores tienen que ver con el ancho de banda,
que permiten tener mayores velocidades de descar-
ga, para obtener imágenes a mejor resolución,
videos de alta calidad.
La evolución de HTML a su versión 5 y hojas de esti-
los más complejas.
La utilización de más fuentes tipográficas.
La aparición de más dispositivos móviles de difer-
entes tamaños y con interfaces táctiles.
Entre otros factores.
1

2. Proyecto
Rediseño estético de página
de un Banco en México
Antecedentes:
El diseño gráfico es la presencia de una
empresa, marca o corporación. A seme-
janza de un mundo físico, el mundo
virtual del diseño gráfico puede dar
confianza, seguridad, un status, un men-
saje a partir de su apariencia, acompaña-
do de su discurso, y credenciales.
Por poner un ejemplo, si una persona
quisiera adquirir un vehículo de lujo,
esperaría que el personal de la conce-
sionaria automotriz estuviera vestido de
una forma adecuada, y que conociera las
características del vehículo que va a
vender, para infundirnos confianza y
poder resolver las dudas que el compra-
dor pudiera tener, para contribuir a la
venta y que el comprador decida dar un
enganche.
Por el otro lado, si alguien anda con
antojo de tacos y el presupuesto es limit-
ado, no es de esperarse acudir a un lugar
suntuoso con meseros y anfitrión en la
entrada, si no acudir a un lugar modesto
pero que a la vista los tacos sean prepa-
rados y exista más gente consumiendo
para dar esa confianza. Esa primera
impresión en un mundo físico de estar
dirigidos a la audiencia adecuada y trans-
mitir el mensaje correcto es facilitada por
los diseñadores.
La experiencia es lo que hará que un
consumidor o usuario regrese. Y una
adecuada experiencia como mínimo
debe hacer sentir al usuario cómodo,
como en casa, donde los elementos
estén donde deben estar, que la
sensación ambiental a través de colores,
espacios, distribución le haga sentir
empatía, que van de acuerdo a sus
expectativas, a su tiempo, a lo que
espera obtener.
En internet es más evidente como las
tendencias cambian, así como las expec-
tativas de los usuarios, por lo que las
marcas o empresas necesitan estar en
constante renovación gráfica y tec-
nológica para ir de acuerdo a las dinámi-
cas de sus usuarios o consumidores.
Pero no todas las empresas tienen esta
visión respecto a su imagen, por falta de
presupuesto, por falta de conocimiento,
por falta de las áreas internas adecuadas,
u otros diversos factores donde relegan
la prioridad de su imagen.
Las instituciones financieras por se
aquellas en donde literalmente, los usu-
arios depositan su confianza, deben estar
comprometidas con su imagen y su
discurso hacia sus clientes. En el rubro de
internet una imagen limpia, ordenada,
moderna, complementará la tecnología y
oferta.
2

3. Proyecto
Rediseño estético de página
de un Banco en México
Primer actividad
El alumno revisará al menos 7 de las
páginas de los principales bancos de
México y el mundo, así como tendencias
de diseño actual.
México
http://www.banamex.com/
https://www.bancomer.com
https://www.hsbc.com.mx
http://www.scotiabank.com.mx/
Internacionales
http://www.bnpparibas.com/
http://www.hsbc.com/
http://www.barclays.co.uk/
https://www.chase.com/
https://www.bankofamerica.com/
https://www.ubs.com
https://www.wellsfargo.com/
Tendencias de diseño
http://www.awwwards.com/websites/business-corporate/
http://www.awwwards.com/websites/institutions/
http://www.cssawds.com/
http://bestwebgallery.com/
http://www.thefwa.com/site
Recomendamos el uso del traductor de sitios de
google para mejorar la comprensión de la
información:
https://translate.google.com.mx/
Del lado izquierdo se coloca la dirección del
sitio, y se presiona el botón azul de“Traductor”
para obtener la dirección del sitio en español
(ojo al traducir el sitio, es posible que las
proporciones de los textos en el diseño, sufran
desfases).
Lo importante a revisar en estos sitios es:
El uso de imágenes que utilizan: (cuál es el tema, cual es la
proporción, tamaño y tratamientos (efectos sobre la
imagen))
El uso tipográfico: (cuántas tipografías utilizan, que tipo de
fuentes son, cuantos niveles jerárquicos de títulos y subtítu-
los utilizan)
La retícula: (Cuantas filas y cuantas columnas utilizan)
Estructura de contenidos: (que hay en la cabecera, en la
zona principal, en las zonas secundarias)
Gama de color: (cuántos y qué colores utilizan)
3

4. Proyecto
Rediseño estético de página
de un Banco en México
Segunda actividad
Se generará un documento donde se
seleccionarán 3 sitios (de banco) donde
el Alumno presentará un análisis de
cuales son los elementos más destaca-
bles en cuanto a diseño, basado en los
elementos anteriormente mencionados
a revisar.
(el documento se generará en illustrator
o powerpoint, tamaño carta y se expor-
tará como PDF)
4

5. Proyecto
Rediseño estético de página
de un Banco en México
Tercer actividad
Esta es la actividad más importante
Basado en los hallazgos anteriores y el
aprendizaje de las tendencias de diseño,
el alumno generará una propuesta de
rediseño para el sitio de
http://www.santander.com.mx/
El proyecto se basa principalmente en
diseño gráfico.
El sitio actual de primera impresión
aparece muy amontonado, puesto que
los textos son muy pequeños, Esto hace
que el sitio se vea viejo, y difícil de leer.
Al entrar al sitio desde un dispositivo
móvil, arroja una ventana para descargar
la app, pero no existe una vista móvil en
linea del sitio.
Los elementos gráficos de complemento
se ven antiguos, poseen muchos degra-
dados y tipográficamente no destaca.
En la retícula los elementos aparecen sin
espacios, demasiado juntos, lo que difi-
culta la legibilidad.
Muchas páginas interiores aparecen en
una ventana nueva, lo cual es muy poco
recomendable porque se saca al usuario
de la interfaz, y en móviles presenta
confusión en la navegación. Debería
aparecer con el mismo header, el mismo
footer dentro de la zona central.
El alumno creará 3 versiones del sitio a
partir de la página Home y página interi-
or.
1. Una para escritorio, diseñada a 1000px
de ancho por lo que de de alto.
2. Una versión para tabletas, con un ancho
de 600px.
3. Una versión móvil con un ancho de 320
pixeles.
Esto significa que los elementos no se
reducen, los elementos se reordenarán
para que puedan ser legibles adecuada-
mente dependiendo del dispositivo.
Es importante crear una retícula en
photoshop para acomodar los elemen-
tos, de tal modo que se tengan filas y
columnas donde ordenar y posicionar los
elementos.
Esta retícula será colocada en una capa
hasta arriba de la composición y oculta
para fines de exportar el archivo.
5

6. Proyecto
Rediseño estético de página
de un Banco en México
Tercer actividad
Páginas a rediseñar:
Página de Home:
http://www.santander.com.mx/Nue-
vaVersion/index.html
Página interior:
https://servicios.santander.com.mx/tar-
jetas/tarjetas/index.html
En total se tendrán 6 páginas diseñadas:
1. Home para escritorio (ancho 1000px)
2. Home para tabletas (ancho 600px)
3. Home para teléfono (ancho 600px)
4. Interior de tarjeta de crédito para escrito-
rio (ancho 1000px)
5. Interior de tarjeta de crédito para tableta
(ancho 600px)
6. Interior de tarjeta de crédito para teléfo-
no (ancho 600px)
6

7. Proyecto
Rediseño estético de página
de un Banco en México
Tercer actividad
Páginas a rediseñar:
Una vez realizadas las propuestas gráfi-
cas en photoshop, se exportarán para
web en formato PNG con la capa de
retícula visible.
Y se pegarán en el documento de illus-
trator (o powerpint) donde se explicarán
los elementos de diseño.
- Retícula
- Tipografía
- Gama de color
- Estructura
La entrega en total consistirá de los siguiente entregables
1. Archivo de PDF con análisis de sitios, y con las propuestas
gráficas explicadas
2. 6 Archivos de Photoshop por capas de las propuestas gráfi-
cas de Santander
Con esto se evaluará:
1. Capacidad de entender un requerimiento de diseño
2. Capacidad de análisis y comprensión de tendencias
3. ¡¡¡Diseño gráfico!!! orientado a web
4. Capacidad de generar un documento que justifique el
diseño
Entrega 21 de Agosto 2015
a las 9:00 am en el laboratorio de computadoras del
plantel Chiapas.
Llevar documento PDF impreso, y usb con archivos
de photoshop para presentar y explicar al profesor.
7

8. Referencias para entender el diseño móvil
http://www.destacaimagen.com/diseno-y-maquetacion-web-smartphones-y-tablets/
http://www.40defiebre.com/recursos-diseno-aplicaciones-moviles/
http://es.slideshare.net/slideadwe/disear-para-dispositivos-mviles
Para selección de fuentes tipográficas se recomienda utilizar:
https://www.google.com/fonts
Para selección de gamas de color se sugiere
http://www.colourlovers.com/
Para obtener imágenes de stock se recomienda
https://pixabay.com/
http://www.freeimages.com/
http://thenuschool.com/free-stock-photos-websites-awesome-list/
http://www.entrepreneur.com/article/238646
Recursos gráficos de utilidad
http://www.fusionplate.com/2465/25-best-free-psd-ui-kits/
https://www.designmaz.net/best-free-psd-flat-ui-kits/
http://designscrazed.org/flat-psd-ui-kits/
http://freebiesbug.com/psd-freebies/ui-kits-psd-freebies/
8