Documenti di Didattica
Documenti di Professioni
Documenti di Cultura
Versin desktop
1- ndex:
El ndex o landing es la pgina en donde llega el cliente a travs de la publicidad y se registra, es el
sitio ms importante porque es el primer contacto del cliente con el vidente, en pocas palabras, es
te sitio tiene que ser llamativo y con un formulario que genere muchos registros.
La estructura siempre va a ser la misma, esto no va a cambiar, lo que vamos a cambiar va a ser el
diseo de los elementos que la componen, ejemplo: en las siguientes imgenes vern un
formulario, la estructura ser la misma siempre en cantidad y tamao de los elementos, pero el
diseo de los mismos ser el que cambiar.
ejemplo1:
ejemplo2:
ejemplo 3:
Son dos formularios distintos pero solo en las imgenes, las estructura y la cantidad de elementos
son las mimos. Incluso tambin puede tomar como ejemplo el ndex de la portada de este manual.
ndex 1 video
ndex 2 vidente
Cada ndex se constituye de varios elementos grficos, para as poder crear uno completo, a
continuacin estos elementos.
1a- Fondo: 1366 x 756px en jpg siempre optimizado por https://tinypng.com/
Este fondo debe destacar al formulario, nunca debe ser el protagonista, debe apoyar al formulario
a ser el principal y destacar.
1b- Formulario: Para realizar un formulario completo se necesitan varios elementos que permitan
realizar uno en su totalidad, a continuacin se explican los elementos a crear en un formulario.
Adjunto varios ejemplos de formularios.
1b.2- Imgenes deseos: 1346 x 537 px en png, esta es la imagen de los deseos de la parte superior,
los que indican soltera, pareja, dinero y trabajo. No se debe colocar el texto, solo la imagen en
sprite de la siguiente manera.
1b.3- Icono de los imputs: 57 x 276px en png, esta es la imagen que describe los imputs, es decir,
gnero, nombre, fecha de nacimiento y e-mail.
La idea es que estn en ese orden y que refleje cada icono las categoras a las que se refieren.
1b.4- Contenedor de los imputs: 290 x 53px en png, esta es la imagen que contienen las palabras
que dicen: gnero, nombre, fecha de nacimiento y e-mail.
Gnero:
Normales:
La diferencia es la pequea flecha en genero, para que el usuario entienda que es un men
desplegable. Pero es simplemente el arte normal con una flecha que seala hacia abajo.
1b.5- Botn de registro: 484 x 130 px en png, este es el botn inferior que le permite al usuario
registrarse, en donde dice haga clic aqu para recibir su videncia, en el formulario es una de las
partes ms importantes debido a que debe llamar tanto la atencin que genere en el usuario
ganas de hacer clic, es decir, que den hagas de hacer clic a pesar de no haber llenado el
formulario.
Usted tiene todo el espacio para hacer el botn, pero es agradable agregarle elementos como el
ejemplo para llamar ms aun la atencin, claro que estn acorde con el formulario y el vidente.
Todo est relacionado entre s para tener una misma tendencia y lnea grfica.
Usted debe escoger incluso el tipo de tipografa y enviarla adjunta con los archivos de imgenes y
especificando en donde se debe utilizar en el caso que sean ms de 2 tipos de fuentes utilizadas.
Los formatos de las fuentes deben ser en ttf, eot y woff para hacer la conversin de ttf a las
dems est este sitio web: https://everythingfonts.com/ en donde puede realizar la conversin
en la pestaa "font conversion"
Recuerde que todo debe estar en armona y que cada elemento es importante y que en conjunto
deben formar la parte ms importante de la compaa, que es donde el usuario se registra.
1c- imagen del vidente: 700 x 660 px en png, es la imagen del vidente que contiene el logo del
nombre.
Es la imagen principal del vidente y usted la adaptar dependiendo de las fotografas que recibir,
como por ejemplo volupta. Para poder diferencia esto ingrese a los siguiente links.
www.volupta-clarividencia.com / www.irina-clarividencia.com / www.adriana-clarividencia.com
1d- El video: el video no debe preocuparse ese lo crear otro departamento.
Hasta la lnea tiene para colocar el texto del nombre del vidente y la frase, de all para abajo la
imagen podr ser tapada.
1e.2- Tapa del vdeo: 512 x 380 px en jpg, esta es la imagen que sustituir al video una vez quede
en pause. A continuacin ejemplos:
2- Textos:
Texto normal:
Texto una vez que se hace scroll, es decir cuando se baja para seguir leyendo el texto:
Este diseo de los texto tambin contienen una cantidad de elementos que se necesitan para
completar un diseo general, al igual que el ndex todo debe ser una armona de colores y basados
en la misma paleta que la del ndex pero que por supuesto sean diferentes.
2a- fondo texto: 1450 x 990px en jpg siempre optimizado por https://tinypng.com/
Este fondo debe destacar al diseo del texto, nunca debe ser el protagonista y debera tener la
misma tendencia del fondo del ndex pero nunca ser el mismo.
Ejemplos:
Fondo ndex:
Fondo texto:
Fondo ndex:
Fondo texto:
2b- fondo del texto: Esta es la imagen que est debajo del mismo texto como tal y que separa el
texto del fondo, esta imagen realmente est constituida de varas imgenes. A continuacin la
explicacin de esta imgenes y la forma de proceder.
El fondo est constituido en tres imgenes, una superior, un centro que es la imagen a repetirse y
la inferior, entonces cuando usted realice el arte debe tomar en cuenta que estas imgenes deben
tener una continuidad y concordancia, ejemplo:
La idea de esto es poder crear una imagen de fondo del largo del texto, que esta se adapte a la
cantidad de caracteres.
Como pueden ver los patrones y texturas estn diseados para que se pueden repetir y seguir
dando la apariencia de que hay continuidad. Entonces una vez que disee tome en cuenta estas
consideraciones para poder enviar imgenes que se puedan utilizar. Respete siempre las medidas.
2c- Botn del texto: 222 x 222px en png, el botn del texto es aquel que contiene la oferta y que
ser uno de los elementos que llevar al usuario a realizar la compra, por ello este botn debe ser
muy llamativo pero a la vez que permita tener texto arriba y que tenga lectura. Si este botn se
puede hacer con una pequea animacin eso sera genial, un sprite con la secuencia de la
animacin nada elaborado pero s que lleve al usuario a ver el botn, aqu ejemplos de los botones
estticos.
La idea es crear una animacin como si fuese una pelcula de cine. El diseo y la forman dependen
de lo que usted quiera para el diseo del vidente. Respetando las dimensiones.
2d- Header texto Vidente: 799 x 226px en png, esta es la imagen del vidente de la parte superior
antes de hacer el scroll, es el encabezado del texto y es importante que siempre conserve este tipo
de estilo como el ejemplo, claro adaptndose a los requerimientos de diseo del vidente.
2e- Imgenes de ttulo y sub-ttulo: estas imgenes son las que destacan al ttulo y al sub-ttulo
-Ttulo: 493 x 109px en png, debe desatracar el ttulo y tener el estilo del vidente.
-Sub-ttulo: 388 x 42px en png, debe desatracar el sub-ttulo y tener el estilo del vidente.
Ejemplo de cmo debe ser la imagen: Siempre en armona con los colores del vidente.
2g- Vidente scroll: 320 x 230px en png, es la imagen del vidente que va en la barra "top scroll"
2h- iconos de perfil y oferta o carrito: Este es un sprite de 150 x 58px en png, es la imagen de la
parte inferior del texto.
Nuevamente la idea es que todo vaya en conjunto a la lnea grfica y que todo tenga la misma
armona.
3- NOV: Este es la pgina de pago, aqu reutilizaremos los elementos como el fondo texto, fondo
del texto, la imagen del ttulo, header del vidente, elementos del scroll y un botn, botn que
depender del estilo del diseo, ya vern en la explicacin. Ejemplo de nov:
**Dependiendo de qu funcione mejor con el estilo del vidente se podr utilizar el botn de
registro del ndex o el subttulo de los textos, pero preferiblemente el botn del ndex para que
haya una relacin en la mente del usuario entre el ndex y el pago, es decir que para el sea natural
presionar ese botn. Pero a veces los diseos no se ven bien, entonces se vale apara acortar el
tiempo de diseo reutilizar elementos y adaptarlos a los colores que deseamos, un ejemplo de
esto en la siguiente imagen en donde en el nov se utiliz el botn del registro en el botn del nov.
La idea es optimizar los tiempos pero jams sacrificando la calidad, si ninguno de los botones no
funciona se realizar uno nuevo acorde a la tendencia del vidente.
Imgenes a crear:
3a- Checkmark: 20 x 20 en png, este es un icono de checkmark que cuadra con los colores y
destaca.
3b- lazos de regalo: Esta se compone de dos imgenes y la idea es que se genere un lazo distinto
por vidente con el mejor color para resalta esta parte:
-lazo superior: 53 x 80px en png, es la imagen del lazo del regalo de la parte superior.
-lazo inferior: 53 x 25px en png, es la imagen del lazo del regalo de la parte inferior.
Ejemplo:
3c- Oferta 1: 500 x 500px en png, es la imagen de la oferta del mtodo de pago, esta es una de las
imgenes que llevara texto, es la palabra oferta. De igual forma la forma del diseo la elige usted,
pero respetando esta inclinacin y procurando de escoger el mejor color que resalte y concuerde
con los colores del vidente. En el ejemplo se justifica la inclinacin y el uso del espacio.
Traducciones:
ES: OFERTA
EN: SALE
FR: OFFRE
PT: OFERTA
Para guardar los archivos, estos en especficos se deben guardar de la siguiente manera:
ES: oferta_tag-es
EN: oferta_tag-en
FR: oferta_tag-fr
PT: oferta_tag-pt
3c- Sello de garantizado: 150 x 150px en png, es la imagen 100 % garantizado, esta es una de las
imgenes que llevara texto. De igual forma la forma del diseo la elige usted, pero respetando el
mejor color que resalte y concuerde con los colores del vidente. El uso de maysculas o
minsculas depende de usted
Traducciones:
ES: Satisfaccin 100% Garantizada
EN: Satisfaction 100% Guaranteed
FR: Satisfaction 100% Garantie
PT: Satisfao 100% Garantida
Para guardar los archivos, estos en especficos se deben guardar de la siguiente manera:
ES: sello_bg-es
EN: sello_bg-en
FR: sello_bg-fr
PT: sello_bg-pt
3d- Contenedor de pago: 388 x 405 en png, es la imagen que contiene los botones y mtodos de
pago.
Esta imagen es la que destaca a los metodos de pago y normalmente se ha diseado con un
motivo de fondo que concuerda con las tendencia de colores y elementos del vidente. Ejemplos.
3e- Estrellas de los testimonios: 47 x 10px en png, estas son las estrellas que llaman a la atencin
en la seccin de los testimonios, si usted decide que este arte debe ir pero con otra forma lo
puede hacer, lo importante es que el nombre del testimonio resalte. Ejemplos:
4- Rituales:
Esta seccin es una variacin del punto 2 (textos, pgina 9), y es que una
modificacin del mismo y est destinada a un texto que se le regala al usuario. En base es igual al
punto 2 pero posee elementos que lo diferencian.
Se pueden reutilizar elementos para crear las variaciones como hay que crear otros, a
continuacin los elementos a crear.
4a- fondo texto: 1450 x 990px en jpg siempre optimizado por https://tinypng.com/
Este fondo debe destacar al diseo del texto, nunca debe ser el protagonista y puede tener una
tendencia diferente al del ndex y textos.
4b- fondo del texto: Al igual que en los textos, esta es la imagen que est debajo del mismo texto
como tal y que separa el texto del fondo, esta imagen realmente est constituida de varas
imgenes. A continuacin la explicacin de esta imgenes y la forma de proceder. Puede utilizar el
mismo estilo modificndolo o realizando un nuevo arte para esta seccin verifique bien porque
las medidas son distintas.
El fondo est constituido en tres imgenes, una superior, un centro que es la imagen a repetirse y
la inferior, entonces cuando usted realice el arte debe tomar en cuenta que estas imgenes deben
tener una continuidad y concordancia, ejemplo de la modificacin:
Es importante destacar que las medidas en esta seccin si cambian y que es importante respetar
completamente estas medidas. Esto est as por un propsito de programacin.
Como pueden ver los patrones y texturas estn diseados para que se pueden repetir y seguir
dando la apariencia de que hay continuidad. Entonces una vez que disee tome en cuenta estas
consideraciones para poder enviar imgenes que se puedan utilizar. Respete siempre las medidas.
4c- botn del ritual: 143 x 143px en png, el botn del texto es aquel que contiene la oferta y que
ser uno de los elementos que llevar al usuario a realizar la compra, aunque es base se parece al
del texto no lo es, tiene un menor tamao y debe ser distinto al del texto, pero igual
preferiblemente en una animacin. Ejemplos de botones de rituales:
La idea es crear una animacin como si fuese una pelcula de cine. El diseo y la forman dependen
de lo que usted quiera para el diseo del vidente. Respetando las dimensiones.
4d- ttulo y sub-ttulo: Se pueden reutilizar estos elementos de los textos, pero como pueden
observar con ciertas modificaciones que permiten hacer diferencias, de igual manera este arte no
tiene que ser totalmente parecido al de los textos, es decir, usted decide si desea hacer un arte
nuevo. En esta seccin las medidas nuevamente son diferentes, este pendiente de esto.
Ttulo: 461 x 101px en png
4d- Oferta ritual: 311 x 156px en png, esta es la imagen de oferta de la parte inferior del ritual.
Este arte debe ser siempre diferente para cada ritual que se haga, este es un ejemplo:
Aproveche siempre el espacio para crear un arte grande, la forma del arte la decide usted.
5- Bluesnap: Esta son las imgenes de uno de los mtodos de pago, este se constituye solo de
dos secciones.
5a- Header bluesnap: 900 x 260px en png. En esta imagen es reutilizar el "Header texto Vidente"
(pgina 13) adaptarlo y colocarle un fondo que vaya acorde con toda la lnea grfica del vidente,
ejemplo de la adaptacin:
5a- Fondo bluesnap: 1200 x 890px en jpg, este fondo ser sencillo ya que solo es el complemento
para un sitio de pago. Ejemplos:
6b- Header superior profile: 2000 x 600px en png o jpg, es la imagen superior del men del
profile. Adjunto ejemplos:
6c- Fondo profile: 1450 x 990px en jpg siempre optimizado por https://tinypng.com/
7- Bot o Chat:
nuevamente verificar tendencia de colores del vidente para realizar estos artes, es decir que los
colores de los artes vayan acorde con la tendencia del vidente, debido a que son artes de
naturaleza sencilla.
7a- Imagen del vidente: 526 x 668 px, esta imagen es la correspondiente al vidente y debe
contener al vidente con el nombre de la maraca y con un fondo que vaya acorde con el fondo y las
tendencia del vidente.
7b- Fondo bot: 1280 x 800 en jpg, la idea de este fondo es que de la sensacin de que est adentro
de la pantalla y no encima, es decir, que tenga sensacin de profundidad. Adjunto ejemplos:
7c- Foto vidente: 200 x 200 px en png, es la imagen del vidente de la parte superior. Debe
contener la cara del vidente con un fondo acorde a su tendencia. Se debe realizar con una sombre
interna para darle sensacin de profundidad.
7d- Foto del chat usuario y chat vidente: 50 x 50 px en png, esta es la imagen del usuario en el
chat y la del vidente.
7e- Iconos de los imputs: 30 x 30 px en png, las imgenes correspondientes a los imputs del
formulario, es decir, gnero, nombre, fecha de nacimiento y e-mail. La idea, como en todos los
casos, es generar nuevos iconos, pero siempre respetando las limitaciones de tamao y de color
del vidente. No es un sprite, las imgenes van por separado.
Gnero
Nombre
Fecha
7f- Iconos de los deseos: 672 x 88 px en png, esta es la imagen de los deseos de la parte superior,
los que indican soltera, pareja, dinero y trabajo. La idea, como en todos los casos, es generar
nuevos iconos, pero siempre respetando las limitaciones de tamao y de color del vidente. No se
debe colocar el texto, solo la imagen en sprite de la siguiente manera.
Amor
Soltera
Dinero
Trabajo
7g- Separador: 517 x 20 px en png, es una imagen utilizada para separar los imputs.
Respetar siempre las dimensiones, es decir no hacer ms gruesa la lnea a pesar de tener el
espacio para hacerlo.
7h- Firma del vidente: No posee una altura determinada, ya que la forma de fuente puede variar,
pero esta no debera pasar los 300px de ancho ni los 100 px de alto en png.
7i- Raspadito bot: 1000 x 350 px en png, este es el raspadito del bot recuerde que son dos artes,
uno superior (el que dice raspe aqu) y uno inferior (que contiene el premio), y su diseo debe
estar siempre relacionado al dinero y la abundancia del dinero, aqu ejemplos y las frases a utilizar.
Arte superior:
Arte inferior:
Frases a utilizar arte inferior: Importante resaltar las palabras Gratuita (en maysculas en todos los
idiomas) y 24 Horas.
ES: Usted ha ganado una videncia GRATUITA recbala en 24 horas.
PT: Voce ganhou uma videncia GRATUITA recebera em 24 horas.
EN: You have won a FREE psychic reading and will receive it in 24 hours.
FR: Vous venez de gagner une voyance GRATUITE! recevez la dans moins de 24 heures.
8- Pop-up: Es el que permite recuperar a la gente antes de que se vaya del sitio, en este seccin
reutilizaremos elementos, solo voy a colocar los que necesitamos que generen:
8a- Botn de Registro: 325 x 325 px en png, este es el botn de haga clic aqu del po-pup, ejemplo
de los botones, ya que son dos artes uno normal y uno modificado una vez que el usuario hace clic
en l, y la vista del pop-up:
Normal:
Al hacer clic
8b- Sello 24 horas: 163 x 149 px en png, es la imagen superior que indica que esta videncia es
gratuita, esta debe parecer un sellos, ejemplo y frases en sus idiomas:
9- Foto facebook: 450 x 380 px en jpg, y esta es simplemente la foto de perfil del vidente para
facebook.
500 x 150 px en jpg, estas son las imgenes de los e-mails que ya
realizado anteriormente, en este caso necesitaremos 6 headers genricos para la entrega de cada
vidente, de la misma forma que hemos trabajado los anteriores recortados horizontalmente.
Versin desktop
En este solo se har la versin ndex 1 para la versin mvil, con alguna
modificaciones por el espacio, solo colocar las imgenes que hay que crear, las que se pueden
reutilizar se obvian. Este ndex se divide en formulario de registro y en login o inicio de sesin. A
continuacin los elementos del ndex mvil.
Formualrio de Registro
11a- Fondo: 1080 x 1920 px en jpg, es la adaptacin de la versin desktop a una forma vertical,
aqu los ejemplos:
Desktop:
Mvil:
Desktop:
Mvil:
11b- Fondo formulario login: 376 x 346 px en png, esta es la versin recortada de el fondo
formulaio desktop y es para ser utilizada en el login en la versin mvil.
11c- Contenedor Registro / Login: 338 x 50 px en png, esta es la imagen que separa a las palabras
Registro y login, esta tiene que ir acorde con el Fondo formulario login para que exista una
armona entre los artes.
11d- Icono de los imputs de Usuario y contrasea: 57 x 124 px en png, es la imagen que de los
imputs del login. Esta imagen debe describir a el Usuario y la Contrasea.
12- textos mvil: Al igual que el ndex esta es una adaptacin de la versin desktop a mvil,
por ende solo se colocarn los artes a realizar. En este caso ser el header normal y cuando se
realiza un scroll.
Header normal
Header scroll
12a- Header normal: 1080 x 396 px en png, es la imagen superior cuando no se ha realizado un
scroll en la pgina.
12b- Header scroll: 1080 x 248 px en png, es la imagen superior cuando se ha realizado un scroll
en la pgina.
Adapte las fotos que ha recibido para que hacer que vayan en armona con los artes que va
disear.
Si tiene alguna duda por favor comunquese con su superior para que se aclarar lo antes posible,
no importa cul sea la duda preferiblemente pregunte antes de hacer algo y perder valioso tiempo
laboral. Este manual podr ser actualizado, cualquier eventualidad se le ser notificada.
Por favor no distribuir a personas ajenas a la compaa y no divulgar la informacin que aqu se
encuentra.