Proyecto web (presentación + presupuesto)

55
Proyecto web Jordi Valls Telf: +34 622 689 018 Email: [email protected]

description

Presentación (+ presupuesto) de instalación de una web corporativa estilo visual (+servicios relacionados de mantenimiento y marketing).

Transcript of Proyecto web (presentación + presupuesto)

Page 1: Proyecto web (presentación + presupuesto)

Proyecto web

Jordi Valls Telf: +34 622 689 018

Email: [email protected]

Page 2: Proyecto web (presentación + presupuesto)

Información preliminar

Mi forma de trabajar es con un CMS Profesional (sistema de gestión de contenidos) de código

libre (php, html, css,…) que parte de unas bases para construir el sitio web según las necesidades

del cliente y facilitar su uso al mismo.

Se trata de un tipo de web 2.0 que permite al usuario (internauta o cliente de la compañía)

interactuar con el contenido, compartir el mismo en las redes sociales y comentar.

Incluye un blog como herramienta de marketing, para que la empresa pueda escribir sus artículos

o notas de prensa (clasificadas en categorías o secciones), dar a conocer los eventos y la misma

empresa, así como educar al cliente con los servicios o productos que se ofrecen. Sirve para

facilitar información de valor a los usuarios y generar comunidad entorno la marca o los servicios

ofrecidos.

Se pueden crear páginas individuales con presentaciones de la empresa, portfolios de los

productos o servicios, formulario de contacto, sección de ayuda, localización de la empresa,

presentación del equipo de trabajo, imágenes, slider-shows para mostrar contenido de forma

dinámica, vídeos de la empresa, etc. También una página de inicio personalizable y la posibilidad de

incorporar banners de publicidad en caso que el cliente lo desee.

2

Page 3: Proyecto web (presentación + presupuesto)

Información preliminar

También ofrezco el servicio incluido de SEO (Search Engine Optimization) que consiste en optimizar

y posicionar la web en Google (y dar de alta en otros motores de búsqueda como yahoo) para que

aparezca en los primeros resultados cuando un usuario de internet busque algo relacionado.

Además, doy de alta la misma en directorios, Google Maps y las redes sociales que el cliente haya

considerado en su estrategia de marketing electrónico (Facebook, Twitter, Google+, Pinterest, etc.)

Para todo ello es necesario disponer de contenido de calidad (sea proporcionado por el cliente o lo

diseñe yo mismo) como imágenes de calidad, textos bien escritos, vídeos bien producidos,

explicaciones correspondientes, etc.

Ofrezco un servicio personalizado, para que el cliente me explique sus necesidades y pueda

adaptar mi trabajo a las mismas, así como un posterior servicio de mantenimiento básico incluido,

con la posibilidad de ampliarlo a servicios avanzados con más dedicación en la web, escribir para

el blog, dinamización en redes sociales (funciones de Community Manager) y estrategia online (a

elegir por el cliente).

*Ver tabla de precios al final de la presentación.

3

Page 4: Proyecto web (presentación + presupuesto)

Estilos de web

Con la presentación de los siguientes estilos es posible ver los aspectos y funcionalidades

principales de una web.

Es posible ver las presentaciones de las web en una demo haciendo clic sobre las

imágenes. El contenido de la demo es ficticio pero incluye explicaciones de las

funcionalidades.

La páginas de inicio y otras individuales son personalizables.

Cuando son ‘’responsive design’’ significa que se adaptan a una tablet y dispositivos

móviles de última generación. Así, el usuario no debe ampliar con los dedos para verla

más de cera.

La demos están en inglés porque son sólo una demostración, pero el contenido de las

mismas se procedería a traducir para Internet.

4

Page 5: Proyecto web (presentación + presupuesto)

Estilo 1

Page 6: Proyecto web (presentación + presupuesto)

Estilo 1

Gran diseño web (recomendable) para todo tipo de empresas, visual y profesional. Responsive design (se adapta a los

tablets y smartphones), con posibilidad de personalizar los colores y las páginas (de inicio e individuales), sin límite de

barras laterales. *Hacer clic sobre la imagen para ver demo 6

Page 7: Proyecto web (presentación + presupuesto)

Estilo 1

Menús

Slider

interactivo

Portfolios

con acceso a

páginas

LOGO (Personalizable) Redes

sociales

7

Page 8: Proyecto web (presentación + presupuesto)

Estilo 1

Estilos de

página

Caracte

rísticas

Más estilos

de página

Estilos de barras

laterales

Portfolio Blog Página de inicio

personalizable

Slider que

permite

ampliar las

imágenes e

interactuar Se pueden añadir otros menús:

- Contacta (datos de la empresa,

mapa y formulario de contacto)

- Acerca de (la empresa, el

equipo,…)

- Servicios, etc.

Buscar en

la web

8

Page 9: Proyecto web (presentación + presupuesto)

Estilo 1

Pié de página con widgets

(cuatro secciones)

Portfolio.

Si haces clic sobre

la imagen o el

botón se descarga

la página

correspondiente

(se amplia la

imagen o accedes

a la sección)

Datos de la

empresa

copyright Otros

menús

9

Page 10: Proyecto web (presentación + presupuesto)

Estilo 1

Un tipo de slider especial para mostrar

imágenes (se controla el tiempo y las

imágenes a mostrar) . *Hacer clic

10

Page 11: Proyecto web (presentación + presupuesto)

Estilo 1

Otro tipo de slider para mostrar

imágenes, texto, vídeos, contenido del

blog, etc. *Hacer clic

11

Page 12: Proyecto web (presentación + presupuesto)

Estilo 1

Página tipo magazine que contiene

slider con la muestra de artículos, su

resumen i acceso a la información de la

misma

Barra lateral con posibilidad de

incorporar texto, imágenes, widgets de

acceso a las redes sociales, opciones

de contacto, banners publicitarios,

mostrar los últimos artículos, vídeos, …

12

Page 13: Proyecto web (presentación + presupuesto)

Estilo 1

Opciones de la demo: cambiar colores,

fondo, estilo de menú, etc. (para

hacerse una idea de cómo puede

quedar)

13

Page 14: Proyecto web (presentación + presupuesto)

Estilo 2

Page 15: Proyecto web (presentación + presupuesto)

Estilo 2

Estilo hermano del estilo 1 pero con diferente diseño. Responsive design ,con página de

inicio especial para presentaciones. *Hacer clic en la imagen para ampliar a la demo 15

Page 16: Proyecto web (presentación + presupuesto)

Estilo 2

OPCIONES DE LA DEMO: CAMBIAR COLORES, FONDO, ESTILO DE MENÚ, ETC. (PARA HACERSE UNA IDEA DE CÓMO PUEDE QUEDAR)

16

Page 17: Proyecto web (presentación + presupuesto)

Estilo 3

Page 18: Proyecto web (presentación + presupuesto)

Estilo 3

Estilo hermano del estilo 1 pero con diferente diseño. Responsive design ,con página de

inicio especial para presentaciones. *Hacer clic en la imagen para ampliar a la demo 18

Page 19: Proyecto web (presentación + presupuesto)

Estilo 3

Elección de dos secciones en la misma página estilo Tab

19

Page 20: Proyecto web (presentación + presupuesto)

Estilo 4

Page 21: Proyecto web (presentación + presupuesto)

Estilo 4

Gran estilo de web (recomendable) profesional y visual, para todo tipo de negocios. Personalizable (colores y bloques de

información de las páginas de inicio e individuales) y responsive design (se adapta a tablets y dispositivos móviles). Sin límite de

barras laterales. *Hacer clic para ampliar a la demo. 21

Page 22: Proyecto web (presentación + presupuesto)

Estilo 4

Ejemplo de portfolio a tres columnas con filtro

por tipo de servicio o producto.

22

Page 23: Proyecto web (presentación + presupuesto)

Estilo 4

Ejemplo de galería de portfolio. al pasar sobre las

imágenes es posible verlas ampliadas, ver vídeo,

acceder a la página individual en cuestión, etc.

(haz clic sobre esta imagen para ampliar a la demo)

23

Page 24: Proyecto web (presentación + presupuesto)

Estilo 4

Ejemplo de galería de imágenes a dos columnas

(posibilidad de elegir 3 y 4 columnas). hacer

clic en la imagen para ampliar a la demo.

24

Page 25: Proyecto web (presentación + presupuesto)

Estilo 4

Ejemplo de blog con imágenes de tamaño medio

estilo thumbnail (previsualización en miniatura).

25

Page 26: Proyecto web (presentación + presupuesto)

Estilo 4

Ejemplo de tabla de precios

26

Page 27: Proyecto web (presentación + presupuesto)

Estilo 4

Formulario de contacto

Datos de la empresa (nombre,

teléfono, dirección, email) y mapa

de localización.

27

Page 28: Proyecto web (presentación + presupuesto)

Estilo 5

Page 29: Proyecto web (presentación + presupuesto)

Estilo 5

Otro gran estilo de web tipo office que también es personalizable (colores, página de inicio e individuales) y responsive design (se

adapta a tablets y dispositivos móviles). Incluye páginas individuales para promociones (landing pages). *Hacer clic para ampliar a

la demo. 29

Page 30: Proyecto web (presentación + presupuesto)

Estilo Office

Página interactiva donde es posible dar a

conocer los servicios de la empresa. Al estilo

‘’tab’’ se descarga la página del servicio a la

derecha cuando haces clic sobre el nombre

del servicio que elijas de la izquierda.

30

Page 31: Proyecto web (presentación + presupuesto)

Estilo 5

Portfolio con filtro. Cuando haces clic sobre una

imagen se descarga la página correspondiente.

31

Page 32: Proyecto web (presentación + presupuesto)

Estilo 5

Página especial para mostrar las imágenes del

equipo de la empresa. Cuando pasas el puntero

sobre la imagen se muestra una pequeña

descripción de la persona y su categoría

profesional. Haciendo clic sobre la misma se

accede a una página individual donde se amplía

la información. También se puede ofrecer una

galería de imágenes según el departamento de

la empresa.

32

Page 33: Proyecto web (presentación + presupuesto)

Estilo 6

Page 34: Proyecto web (presentación + presupuesto)

Estilo 6

Web muy bonita y visual que también es posible adaptarla al smartphone.

34

Page 35: Proyecto web (presentación + presupuesto)

Estilo 6

CONTROLADORES DEL SLIDER GIGANTE AL SITUAR EL PUNTERO SOBRE EL MISMO

EJEMPLO DE PÁGINA DE INICIO

35

Page 36: Proyecto web (presentación + presupuesto)

Estilo 6

CONTROLADORES DEL SLIDER GIGANTE EN LA OPCIÓN DE MENÚ ‘’HOME’’ DE LA DEMO ES POSIBLE VER TODAS LOS TÍPOS DE PÁGINAS DE INICIO.

OTRO EJEMPLO DE PÁGINA DE INICIO

PORTFOLIO

36

Page 37: Proyecto web (presentación + presupuesto)

Estilo 6

OTRO EJEMPLO DE PÁGINA DE INICIO

37

Page 38: Proyecto web (presentación + presupuesto)

Estilo 6 OTRO EJEMPLO DE PÁGINA DE INICIO

CONTROLADORES DEL SLIDER GIGANTE

38

Page 39: Proyecto web (presentación + presupuesto)

Estilo 6 EJEMPLO DE PÁGINA ‘’ACERCA DE’’ CON LA PRESENTACIÓN DEL EQUIPO PRINCIPAL

VER EJEMPLOS DE PÁGINAS: -ACERCA DE - TESTIMONIALES -GALERÍA DE FOTOS -PÁGINA COMPLETA - CONTACTA

39

Page 40: Proyecto web (presentación + presupuesto)

Estilo 6 EJEMPLO DE FONDO BLANCO Y NEGRO

40

Page 41: Proyecto web (presentación + presupuesto)

Estilo 6

HACIENDO CLIC EN LA OPCIÓN DE MENÚ ‘’SKINS’’ ES POSIBLE VER OTROS DISEÑOS DE LA MISMA WEB DISPONIBLES.

BLOG Y SHORTCODES PARA TRABAJAR LAS PÁGINAS

41

Page 42: Proyecto web (presentación + presupuesto)

Estilo 7

Page 43: Proyecto web (presentación + presupuesto)

Estilo 7

Estilo limpio, visual e intuitivo. Responsive design (se adapta a tablets y smartphones) y foro

incorporado. *Hacer clic en la imagen para ampliar 43

Page 44: Proyecto web (presentación + presupuesto)

Estilo 7

Las imágenes del portfolio salen en blanco y

negro pero cuando pasas el puntero por

encima se ven en color. es posible mostrarlas

a color directamente.

Cuando haces clic sobre una imagen se amplia

la misma y la explicación en la misma página.

Desplegable para ofrecer alguna información

destacada.

Botones a las redes sociales que cambian de color cuando

pasas el puntero por encima.

Portfolios en 1, 2 ,3 y 4 columnas.

Shortcodes para personalizar páginas individuales.

Puedes ofrecer una galería de imágenes que se amplían a

una ventana pop cuando haces clic sobre ellas.

Tienes una página exclusiva para un foro. sirve para crear

conversaciones o como herramienta de atención al cliente

(preguntas y respuestas).

También dispones de blog. 44

Page 45: Proyecto web (presentación + presupuesto)

Estilo 8

Page 46: Proyecto web (presentación + presupuesto)

Estilo 8

Estilo hermano de Angular pero más sencillo, para diseño portfolio. Responsive design.

*Hacer clic en la imagen para ampliar a la demo 46

Page 47: Proyecto web (presentación + presupuesto)

Estilo 9

Page 48: Proyecto web (presentación + presupuesto)

Estilo 9

Estilo muy bonito, visual y con muchas funcionalidades. No es responsive design (la web se ve igual en los

móviles que en el ordenador), se ve bien aunque en formato pequeño. (Haga la prueba accediendo desde un

móvil de última generación). *Hacer clic para ampliar a la demo 48

Page 49: Proyecto web (presentación + presupuesto)

Estilo 10

Page 50: Proyecto web (presentación + presupuesto)

Estilo 10

Estilo muy bonito, profesional, visual y con muchas funcionalidades. No es responsive design (la web se ve igual en los

móviles que en el ordenador), se ve bien pero en formato pequeño. (Haga la prueba accediendo desde un móvil de ultima

generación). *Hacer clic para ampliar a la demo 50

Page 51: Proyecto web (presentación + presupuesto)

Estilo 10

Diferentes tipos de páginas (página de inicio,

servicios, precios, testimoniales, el equipo de

trabajo, etc.)

Más tipos de sliders especiales en opción de

menú

Slider especial (pasar el puntero por encima)

LA DEMO PERMITE PROBAR DIFERENTES COLORES

51

Page 52: Proyecto web (presentación + presupuesto)

Presupuesto

Page 53: Proyecto web (presentación + presupuesto)

Precios

Instalación de la web + seo + inicio redes sociales + mantenimiento básico = a partir de 350 € dependiendo

de varios factores que pueden incrementar el precio:

Cuando deba venir al local a tomar fotos con mi cámara (son necesarias fotos de calidad)

Cuando deba diseñar imágenes en photoshop (por ejemplo para el fondo de la web o la portada de

Facebook)

Extras. Se entrega la web con el contenido básico que la empresa proporcione (textos, vídeos,

imágenes,…) pero si el cliente solicita que incluya contenido especial no diseñado previamente por el

mismo se aplicará un precio extra. Por ejemplo: cuando deba escribir la misión/visión de la empresa en

formato texto (no habiendo sido facilitado previamente) o incluir imágenes tampoco proporcionadas

directamente por el cliente.

Mantenimiento básico post-venta incluido*:

Cambiar imágenes, vídeos, textos, etc.

Solucionar algún problema

*El mantenimiento básico es algo puntual , no se trata de estar continuamente realizando cambios (si se desea un servicio más

avanzado ver diapositiva siguiente)

53

Page 54: Proyecto web (presentación + presupuesto)

Tabla de servicios

Básico Medio Avanzado

Incluido 250 € / mes (12h/mes ) 475 € / mes (24h/mes)

Cambiar imagen, texto, vídeo y

solucionar problema (puntual)

Mantenimiento web: cambiar

imágenes, textos, vídeos, añadir

secciones y solucionar problemas

Mantenimiento web: cambiar

imágenes, textos, vídeos, añadir

secciones y solucionar problemas

4 artículos / mes en blog 8 artículos / mes en blog

Mensajes en redes sociales (20

minutos/ día)

Mensajes redes sociales (40 minutos

/día)

Reportes, estadísticas, etc Reportes ,estadísticas, etc.

Consejos Estrategia de marketing online,

campañas, consejos, etc.

Las horas extras a los planes diseñados salen por 20 €/h 54

Page 55: Proyecto web (presentación + presupuesto)

Contactar conmigo

Jordi Valls Telf: +34 622 689 018

E-mail: [email protected]

www.jordivalls.net

www.tarragonainnova.com

Gracias

Sitios web