TOMAS OSORIO -/ GLORIA RIVERA - / MARIA TERESA ROSSEL - / JOSEFA URZUA

INDICE

SOBRE APHIA 05

SERVICIOS 06

PUBLICO OBJETIVO 06

DESCRIPCION DEL PROYECTO 07

FUNDAMENTOS DEL PROYECTO 08

FINALIDAD DEL PROYECTO 08

OBJETIVOS 09

CARACTERISTICAS FORMALES DE LA PAGINA 09

CARTA GANTT 10

USABILIDAD APLICADA 13

CARD-SORTING 21

TIPOGRAFIA Y COLOR 25

MOCKUP 31

SITIO WEB 39

Aphia / 03

Empresa chilena de diseño emergente, conformada por dos diseñadoras gráficas en el año 2009.

APHIA

Aphia / 05

SERVICIOSConfección personalizada de polerones a modo de pieza única, en base a un conceptos asociados de la marca; Conceptos asociados: vanguardia, geometría, ab-stracción.

PUBLICO OBJETIVOJóvenes con un grado de solvencia económica, de entre 18 y 28 años, relacionados con el área del dis-eño y las artes. Que tengan dentro de sus intereses la autenticidad entre sus pares.

Aphia / 06

DESCRIPCION DEL PROYECTOSe pretende hacer una plataforma online en la cual se exponga de mejor manera los diferentes produc-tos relacionados con la marca. Como también una forma en la cual el usuario sea capas de adquirirlos.Conocer la historia de estos nuevos diseñadores chilenos. Debido a que en la actualidad la marca posee dife-rentes redes sociales que otorgan esta información.Sin embargo no es optima para el usuario debido a su limitada y dispersa información.

Aphia / 07

FUNDAMENTOS DEL PROYECTO

FINALIDAD DEL PROYECTOEl impacto que generara en primera instancia que el usurio pueda navegar y encontrar todo lo necesario en un solo lugar.Como resultados a largo plazo la “pyme” se vera veneficia-da debido a un posible aumento de ventas debido a que la página podras (reservar - comprar - preguntar - agendar citas - presupuestos - diseños textil)

La marca posee en la actualidad diferentes plata-formas gratuitas en el cual el usuario es capas de conocer las diferentes cualidades de sus producto.Sin embargo la marca ha evolucionado en el tiempo y ampliado su espectro de público objetivo.

Aphia / 08

OBJETIVOS

CARACTERISTICAS FORMALES

DE LA PAGINA

Generales: Profesionalisar la marca / Posicionarse.Especificos: Aumentar ventas de los productos en su público objetivo y su nuevo público cautivo.

Para mayor facilidad y comodidad del usuario sera incorporado un método de presupuesto, el cual consistira en hacer “pedidos” online que le permita tener un estimado de su posible compra, basandose en telas, cortes, modelos pre establecidos, colores, entre otros.

Aphia / 09

Actividades

1

2

3

4

5

6

7

8

9

10

11

1

2

13

14

15

1

6

17

18

19

20

21

22

Org

aniz

ácio

n de

l equ

ipo

de tr

abaj

o y

elec

ción

de

pym

e

con

la c

ual s

e va

a tr

abaj

ar.

Reco

pila

ción

de

info

rmac

ión

disp

onib

le e

n la

s re

des

so

cial

es.

Des

arro

llo d

el b

rief c

ompl

eto

de la

em

pres

a.

Prim

era

revi

sión

Proc

eso

Cat S

atin

g.

Crea

ción

pro

gram

a de

uso

.

Proc

eso

Wire

fram

e.

Pres

enta

ción

prim

era

part

e de

l pro

yect

o.

Proc

eso

elec

ción

col

or y

tipo

graf

ía.

Reor

gani

zaci

ón d

e in

form

ació

n pa

ra la

pre

sent

ació

n.

Real

izar

un

estu

dio

prev

io d

e la

s ne

cesi

dade

s y

prob

lem

ati-

cas

del p

roye

cto.

Corr

ecci

ón d

e la

info

rmac

ión

obte

nida

de

la p

yme.

Corr

ecci

ón d

el c

at s

atin

g, m

apa

de n

aveg

ació

n y

wire

fram

e.

Aná

lisis

de

Usa

bilid

ad.

Dis

eño

Fina

l del

siti

o.

Conc

lusi

ones

del

pro

yect

o.

Pres

enta

ción

Fin

al.

CART

A GANTT

Presentaciones

CreaciOn

Proy

ecto F

inal

Procesos

ACTIVID

ADES

Proc

esos

Pres

enta

cion

esCr

eaci

ón F

inal

Aphia / 11

USABILIDADAPLICADA

Se refiere a la facilidad con que el usuario pueda utilizar un sitio web, con el fin de alcanzar un objetivo concreto.

Los puntos claves para la realización de un sitio deben ser: la rapidez, simplicidad, interactividad, buena navegabilidad y mantener al usuario actualizado.

De esto de desglosan los “10 principios de usabilidad” de Jakob Nielsen, lo que aplicare-mos a continuación.

Aphia / 13

1

VISIBILIDAD DEL ESTADO DEL

SISTEMAEn este punto decidimos llamar la sección “Hoddie” a la galeria de los productos, ya que es un lenguaje juvenil enfocado directamente al público objetivo, ya nombrado anteriormente, personas jóvenes las cuales estan enfoca-das al arte y al diseño, y también es el lenguaje en el cual las diseñadoras nombran a sus productos.El lenguaje visual es acorde al público por los colores tra-bajados y las tipografias, siendo atractivo para los clientes.

UTILIZAR EL LENGUAJE DE LOS

USUARIOSEn el caso del sitio de Aphia, nosotros proponemos tener una sección destinada a la cotización de los polerones, en esta mostraremos las telas, modelos de polerones y colo-res actualizados, para poder cotizar tu propio poleron.También se podra encontrar en la sección Hoddie foto-grafías de modelos ya terminados para mostrarle a usuario los trabajos que se van realizando.Básicamente el modelo de la página esta basado en foto-grafías las cuales potencian y muestran los productos.

2

“El sistema debe siempre mantener a los usuarios informados del estado del sistema, con una realimentación apropiada y en un tiempo razonable.”

“El sistema debe usar el lenguaje de los usuarios, con las palabras, las frases y los conceptos familiares, en lugar de que los términos estén orientados al sistema. Utilizar convenciones del mundo real, haciendo que la informa-ción aparezca en un orden natural y lógico.”

Aphia / 14

3

4

CONTROL Y LIBERTAD PARA EL

USUARIO En el sitio no hay restricción de usuario, tiene toda la información expuesta a todo tipo de público.Los usuarios disponen de un menú siempre visible, el cuál les ayuda en su navegación, en el caso de que se equivocaran o desearan cambiar a otra sección rápida mente.Como la página es navegable horizontalmente, cada sección tiene un formato que se adecua a la pantalla, en el cual la información visible es toda la infor-mación que hay, es decir no hay necesidad de subir o bajar para ver mas información. En el caso de querer cambiar de sección se puede hacer en el menú o con el scroll.

CONSISTENCIA Y ESTANDARESHicimos un menu simple y limpio, no cuenta con subdiviciones y posee una jerarquización adecuada para una navegación rapida y directa.La jerarquización de cada sección es la adecuada, cumpliendo una estructura simple de facil lectura.

“Los usuarios eligen a veces funciones del sistema por error y necesitan a menudo una salida de emergencia claramente marcada, esto es, salir del estado indeseado sin tener que pasar por un diálogo extendido. Es importan-te disponer de deshacer y rehacer.”

“Los usuarios no deben tener que preguntarse si las diversas palabras, situaciones, o acciones significan la misma cosa. En general, siga las normas y convenciones de la plataforma sobre la que está implementando el sistema.”

Aphia / 15

5

6

PREVENCION DE ERRORES

MINIMIZAR LA CARGA DE LA

MEMORIA DEL USUARIOEl sitio es muy pregnante al poseer mayoritariamente imágenes e iconos y muy poco texto. Es un sitio limpio, didactico e innovador, adémas cuenta con pocas secciones y precisas lo que permite al usuario recordar con facilidad las secciones ya visitadas.

El sitio no presenta errores, los enlaces se encuentran bien dirigidos a cada sección y todas estas estan funcionando.Y en el caso de que hayan modificaciones en la página, creamos una gráfica acorde al sitio, que dé la información necesaria explicando el por qué el enlace no está en func-ionamiento. Por ejemplo: “sitio en manten imiento, estamos trabajando para usted. Vuelve a visitar la sección en 7 días”.

“Es importante prevenir la aparición de errores. Qué mejor que generar buenos mensajes de error.”

“El usuario no debería tener que recordar la información de una parte del diálogo a la otra. Es mejor mantener objetos, acciones, y las opciones visibles que memorizar.”

Aphia / 16

7

8

FLEXIBILIDAD Y EFICIENCIA DE

USO

LOS DIALOGOS ESTETICOS Y

EL DISENO MINIMALISTA

El sitio cuenta con rutas únicas para llegar a cada sección. Lo cual en este caso si es funcional, porque no tiene una gran cantidad de información que justi-fique el uso de “atajos”.

La navegación de la pagina es muy amena debido a la simpleza de la página.En cuanto al diseño, creemos que es coherente, mantiene la linea gráfica y no contiene elementos distractores.

“Las instrucciones para el uso del sistema deben ser visi­bles o fácilmente accesibles siempre que se necesiten. Los aceleradores no vistos por el usuario principiante, mejoran la interacción para el usuario experto de tal manera que el sistema puede servir tanto para usuarios inexpertos como para experimentados. Es importante que el sistema permita personalizar acciones frecuentes.”

“No deben contener la información que sea inaplicable o se necesite raramente. Cada unidad adicional de la información en un diálogo compite con las unidades relevantes de la información y disminu-ye su visibilidad relativa.”

Aphia / 17

9

10

AYUDAR A LOS USUARIOS A

RECONOCER, DIAGNOSTICAR Y

RECUPERARSE DE LOS ERRORES

CONSISTENCIA Y ESTANDARESNo quisimos aplicar buscador ni preguntas frecuentes ya que se encuentra toda la información necesaria en el sitio, en este caso no se juntificaria tales elementos porque la página cuenta con imágenes y formulario de cotización para el objetivo de la empresa.

Hicimos un formulario para la cotización del diseño del poleron en el cual es necesario que los errores sean indica-dos en el momento en que se va escribi endo. Por ejemplo, en los espa cios destinados a números, no se permitan caractéres, en el espacio destinado al e-mail que se avise si falta el @, para ayudar al usuario a identificar los errores. En el caso de que el formulario se termine, y aún contenga errores, no permita ser enviado y el error destaque para poder volver a llenarlo. Y finalmente, una vez corregido y enviado, debe aparecer un men saje que confirme el envío.

“Los mensajes de error se deben expresar en un lenguaje claro, se debe indicar exactamente el problema, y deben ser constructivos.”

“Aunque es mejor si el sistema se puede usar sin documen­tación, puede ser necesario disponer de ayuda y docu-men­tación. Ésta tiene que ser fácil de buscar, centrada en las tareas del usuario, tener información de las etapas a realizar y que no sea muy extensa.”

Aphia / 18

Aphia / 19

CARD-SORTING

Aphia / 21

CARD-SORTING

Aphia / 22

MAPA DE NAVEGACION

Aphia / 23

TIPOGRAFIA YCOLOR

Aphia / 25

COLOR

Aphia / 26

Aphia / 27

Aphia / 28

KLAVIKA BOLD // TÍTULOS

........................................................................................................

A B C D E F G H I J K L M N Ñ O P Q R S T U V W X Y Z ........................................................................................................

a b c d e f g h i j k l m n ñ o p q r s t u v w x y z........................................................................................................

1 2 3 4 5 6 7 8 9 0........................................................................................................

% * / . & ( ) ¡ ? | ° # ¿ ‘ [ ]

VERDANA // TEXTOS

.............................................................................. A B C D E F G H I J K L M N Ñ O P Q R S T U V W X Y Z ..............................................................................

a b c d e f g h i j k l m n ñ o p q r s t u v w x y z.............................................................................. 1 2 3 4 5 6 7 8 9 0..............................................................................

% * / . & ( ) ¡ ? | ° # ¿ ‘ [ ]

TIPOGRAFIA

Aphia / 29

MOKUP

Aphia / 31

Aphia / 32

HOME

APHIA

HODDIE

TU DISEÑO

F FL

CONTACTO

LOGO

Aphia / 33

HOME

APHIA

HODDIE

TU DISEÑO

CONTACTO

LOGO

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean consectetur hendrerit orci vitae porta. Sed lectus leo, ultrices eget

interdum ac, consequat a ante. Nunc risus velit, consectetur ac venenatis vel, aliquam quis lectus. Pellentesque neque odio, facilisis

eget vehicula ac, tristique eget lectus. Praesent at ornare nulla. Donec in consectetur purus. Duis

Suspendisse tempor, enim in faucibus ullamcorper, orci purus iaculis lorem, id viverra tortor massa ut urna. Donec accumsan, neque in

malesuada varius, nunc felis laoreet elit, ut iaculis urna ligula in dui. Aliquam auctor ornare arcu, et eleifend justo posuere sed. Integer

F FL

Aphia / 34

HOME

APHIA

HODDIE

TU DISEÑO

CONTACTO

LOGO

HODDIE HOMBRE MUJER NIÑOS

F FL

Aphia / 35

HOME

APHIA

HODDIE

TU DISEÑO

CONTACTO

LOGO

RESERVA

MODELOS TELAS PATRONES

F FL

Aphia / 36

HOME

APHIA

HODDIE

TU DISEÑO

CONTACTO

LOGO

IJOJSDFOWIEJFOW // IDSNFWIJNFN // IEWFJN@IJSNFJWN // 18729823

EMAIL

NOMBRE

ASUNTO

MENSAJE

SUBMIT

F FL

Aphia / 37

PAGINAWEB

Aphia / 39

Aphia / 40

Aphia / 41

Aphia / 42

Aphia / 43

Aphia / 44

TOMAS OSORIO -/ GLORIA RIVERA - / MARIA TERESA ROSSEL - / JOSEFA URZUA