Conceptualización y Planificación de sitios web




http://ucab-informaticaii.blogspot.com
Planificación de sitios web


                                           Generación de
Conceptualización      Desarrollo                                  Difusión
                                            contenidos




1. Idea
                                                               • Puesta en marcha
2. Concepto         1. Escoger la         • Creación de los
                                                               del plan de
3. Descripción         plataforma de      contenidos:
                                                               difusión.
4. Diseño de           distribución       Artículos, videos,
                                                               • Análisis y mejoras
   contenidos       2. Personalización    animaciones,
                                                               constantes a la
5. Diseño gráfico   3. Pruebas            audios, etc..
                                                               estrategia
Planificación de sitios web



             Todo
          comienza con
            una idea
Planificación de sitios web
Planificación de sitios web
Para comenzar se debe elaborar un
documento con el siguiente contenido:
• Descripción Corta: Descripción en una o dos línea
• Palabras clave: Palabras que definan el sitio, pueden ser conjuntos de palabras.
• Descripción Larga: Escriba con detalle los temas que tratará su publicación en un
máximo 20 líneas
• Público objetivo: Defina las personas que usted cree se interesarán en su propuesta.
Genero, edad, localización o intereses personales por ejemplo. Si es posible realizar una
estimación del tamaño del público.
• Referencias: Busque en Internet y de por lo menos 3 ejemplos (en Venezuela o en el
mundo) de páginas que manejan contenido similar al suyo.
• Diferenciación: Qué ofrece mi propuesta que la hace distinta y atractiva para el público
objetivo.
Diseño de contenidos
                            Arquitectura de la información
                HOME
                                                Además de definir la
                                                 estructura también
                                              debemos describir lo más
  Sobre
              Productos         Contacto       detalladamente posible
 Nosotros
                                                cada sección del sitio

Categoría 1   Categoría 2       Categoría 3


                   Producto 1


                   Producto 2
Diseño de contenidos
                                  Arquitectura de la información
Ejemplo: elearningvenezuela.com

                                  HOME                                 Autores


                                            Diseño
   Autoría             LMS                               Actualidad
                                         Instruccional

  Artículo 1         Artículo 1            Artículo 1     Artículo 1



 Artículo N          Artículo N            Artículo N     Artículo N
Conceptos básicos a tomar en cuenta
Conceptos Básicos


                                   Usabilidad
En interacción persona-ordenador, la usabilidad se
refiere a la claridad y la elegancia con que se diseña
la interacción con un programa de ordenador o un
sitio web.
http://es.wikipedia.org/wiki/Usabilidad
"El usuario pasa la
mayor parte del tiempo
 en otros sitio web".

    Jakob Nielsen
Guías de diseño gráfico

 Simplicidad
 • Menos es mejor: Utilice la menor cantidad de recursos para
 comunicar lo que desee.

 • Para lograrlo es indispensable tener claro el objetivo
 comunicacional.
 ¿Qué quiero decir?.

 • El visitante debe tener claro a primera vista y de manera muy
 sencilla de que se trata la página.
Qué quiere hacer la persona que ingresa en twitter.com:

Saber de que se trata el servicio
Ingresar a su cuenta
Suscribirse al servicio
Guías de diseño gráfico

 Menos columnas
 • Por norma general no debemos usar más de tres columnas.

 • Si el sitio no va a manejar demasiada información (ej.Página de
 noticias) lo recomendable es usar dos columnas
Guías de diseño gráfico

 Lo más importante arriba
 • El visitante va a ver la página comenzado por la parte superior
 izquierda como si fuera un libro. Por esa razón se coloca el logo en
 ese lugar.
 • La información más importante debe estar situada en la parte
 superior
Diagrama General - Ejemplo
    LOGO                          Explicación del sitio web en una frase

                  Barra de navegación si tiene varias secciones




                             Información destacada




           Área para noticias / artículos                         Área para widgets
Conceptualización y Planificación de sitios web
Conceptualización y Planificación de sitios web
Conceptualización y Planificación de sitios web

Conceptualización y Planificación de sitios web

  • 1.
    Conceptualización y Planificaciónde sitios web http://ucab-informaticaii.blogspot.com
  • 2.
    Planificación de sitiosweb Generación de Conceptualización Desarrollo Difusión contenidos 1. Idea • Puesta en marcha 2. Concepto 1. Escoger la • Creación de los del plan de 3. Descripción plataforma de contenidos: difusión. 4. Diseño de distribución Artículos, videos, • Análisis y mejoras contenidos 2. Personalización animaciones, constantes a la 5. Diseño gráfico 3. Pruebas audios, etc.. estrategia
  • 3.
    Planificación de sitiosweb Todo comienza con una idea
  • 4.
  • 5.
    Planificación de sitiosweb Para comenzar se debe elaborar un documento con el siguiente contenido: • Descripción Corta: Descripción en una o dos línea • Palabras clave: Palabras que definan el sitio, pueden ser conjuntos de palabras. • Descripción Larga: Escriba con detalle los temas que tratará su publicación en un máximo 20 líneas • Público objetivo: Defina las personas que usted cree se interesarán en su propuesta. Genero, edad, localización o intereses personales por ejemplo. Si es posible realizar una estimación del tamaño del público. • Referencias: Busque en Internet y de por lo menos 3 ejemplos (en Venezuela o en el mundo) de páginas que manejan contenido similar al suyo. • Diferenciación: Qué ofrece mi propuesta que la hace distinta y atractiva para el público objetivo.
  • 6.
    Diseño de contenidos Arquitectura de la información HOME Además de definir la estructura también debemos describir lo más Sobre Productos Contacto detalladamente posible Nosotros cada sección del sitio Categoría 1 Categoría 2 Categoría 3 Producto 1 Producto 2
  • 7.
    Diseño de contenidos Arquitectura de la información Ejemplo: elearningvenezuela.com HOME Autores Diseño Autoría LMS Actualidad Instruccional Artículo 1 Artículo 1 Artículo 1 Artículo 1 Artículo N Artículo N Artículo N Artículo N
  • 8.
    Conceptos básicos atomar en cuenta
  • 9.
    Conceptos Básicos Usabilidad En interacción persona-ordenador, la usabilidad se refiere a la claridad y la elegancia con que se diseña la interacción con un programa de ordenador o un sitio web. http://es.wikipedia.org/wiki/Usabilidad
  • 10.
    "El usuario pasala mayor parte del tiempo en otros sitio web". Jakob Nielsen
  • 11.
    Guías de diseñográfico Simplicidad • Menos es mejor: Utilice la menor cantidad de recursos para comunicar lo que desee. • Para lograrlo es indispensable tener claro el objetivo comunicacional. ¿Qué quiero decir?. • El visitante debe tener claro a primera vista y de manera muy sencilla de que se trata la página.
  • 12.
    Qué quiere hacerla persona que ingresa en twitter.com: Saber de que se trata el servicio Ingresar a su cuenta Suscribirse al servicio
  • 16.
    Guías de diseñográfico Menos columnas • Por norma general no debemos usar más de tres columnas. • Si el sitio no va a manejar demasiada información (ej.Página de noticias) lo recomendable es usar dos columnas
  • 18.
    Guías de diseñográfico Lo más importante arriba • El visitante va a ver la página comenzado por la parte superior izquierda como si fuera un libro. Por esa razón se coloca el logo en ese lugar. • La información más importante debe estar situada en la parte superior
  • 20.
    Diagrama General -Ejemplo LOGO Explicación del sitio web en una frase Barra de navegación si tiene varias secciones Información destacada Área para noticias / artículos Área para widgets