desarrollo y diseño de un sitio de noticias. del boceto al producto final

Desarrollo y diseño de un sitio de noticias

Del boceto al producto final

Planificación

• Qué sitio queremos. • Para quién. • ¿Quién –creemos- es el usuario? • Cuáles son nuestros objetivos.

Contenido

Cuál es “el pacto” con el usuario. • Tipo de contenido. Formatos: video, audio, texto, reportajes,

ránkings, fotografías, etc. • Cuál es el fuerte del sitio. • Determinar la jerarquía de la información. • Flujo de actualización. ¿Cuántas notas publicaremos por día?• Afianzadar conocimientos de SEO.• Afianzadar conocimientos de redacción web.• Determinar tono y estilo.

Tecnología

Qué CMS elegir o como modificar el existente.

• Amigable para los periodistas.• Flexible.• Adaptado a las necesidades del medio.• SEO friendly.• ¿Propietario , de código abierto y/o desarrollo propio?• Soporte.• Qué tecnologías requiere: ¿Flash? ¡No! HTML5, CSS3. • Versión móvil: aplicación o responsive design (o ambas).

Diseño

• ¿Rediseño integral o parcial? Determinar la cantidad de páginas.

• ¿Logo y marca también?• ¿Agencia externa o interna?• Buscar diseño simple. • Eliminar redundancias. • Tamaño correcto de los elementos.

Recursos

Qué tenemos y hasta dónde podemos llegar.

• Producción de contenido: cantidad de periodistas para cumplir con el objetivo. Volumen de contenido.

• Presupuesto para diseño y tecnología.• ¿Tenemos diseñadores propios? ¿Expertos en

usabilidad y arquitectura web? ¿ingenieros?

“Inspiración”

http://nico.cc/snowfallnewyorktimes

“Inspiración”

http://nico.cc/espnellis

“Inspiración”

http://nico.cc/pitchforkespecial

“Inspiración”

http://www.awwwards.com

Crear el prototipo: Mockup o Wireframe

• Definir qué bocetaremos: home, artículo interno, sección, resultados de búsqueda, galerías de fotos y videos.

• Qué contenido incluiremos en cada pieza.

Twitter

Vimeo

Prototipo BBC

Prototipo por Khoi Vinh

Debemos preguntarnos todo.

• Logo.• Buscador.• Menú.• Herramientas sociales.• ¿Clima?, ¿Registración?• Interior de los artículos.• ¿Qué pasa al hacer scroll?

Header

Portada

• Jerarquía de la información. • ¿Destacado de secciones?• Herramientas sociales. • Elementos multimedia. • Largo de la home. • Espacio para banners.• Carga del sitio.

Artículos individuales

• ¿Empezamos el prototipo desde aquí?• Título, bajada, elemento multimedia: ¿cómo se

mostrarán? • Texto, extensión (tener en cuenta los diferentes largos). • Fecha y hora de publicación (muy importante).• Autor. • Elementos sociales. • El artículo como puerta de entrada al sitio. • Notas relacionadas, últimas noticias. • ¿Comentarios? (¿moderación o no?).

http://preview.reuters.com

http://nico.cc/theverge-nota

Secciones

• ¿Diseño como una portada más? • Jerarquía de la información.• ¿Noticias destacadas o formato cronológico?• ¿Qué elementos diferenciadores tendrá cada

una?• Paginación.

Footer

• Accesos. • Aprovechamiento para SEO. • Contacto. • Mapa del sitio.• Información institucional.

Tipografía

• Elección fundamental. • Color y tamaño. • Pocas por sitio. • ¿Sobre fondo blanco? • Diferenciar títulos, subtítulos, enlaces.• ¿De sistema o de uso libre?

Etiquetado

• Descripción de elementos multimedia: fotografías, videos, animaciones, infografías, etc.

• Etiquetado de notas > Organización del sitio. • Atributo <ALT>

Otras páginas

• Resultados de búsqueda.• Tags.• Personajes, temas del día. • Clima.• Resultados de fútbol.• Infografías o especiales.• Encuestas. • Cartelera de cine, teatro, espectáculos, etc.

Integración con redes sociales

Opciones:• Registración al sitio.• Widgets y botones para compartir.• Streaming de actividad.• Más desarrollo vía APIs.Gestión en redes:• Equipo “social media”: administración, gestión,

métricas. • Tipo de contenido, estrategia, planificación.• Distribuir el contenido diferenciado por redes.

“La usabilidad mide la calidad de la experiencia que una persona tiene cuando interactúa con un sitio Web, aplicación, software o cualquier

otra interface”.

Algunos problemas

• Links que no cambian de color una vez visitados.• Links que no funcionan.• Apertura de nuevas pestañas.• Apertura de pop-ups.• No respetar los estándares Web.• Diferenciar contenido de publicidad.• Textos no adaptados para la Web.• Multimedia y videos excesivamente largos.• Incompatibilidad de plataformas (Mac, PC y navegadores).• URLs largas y/o complejas.• Velocidad de carga lenta.

Arquitectura de la información

Disciplina que consiste en organizar, jerarquizar y nombrar la información presente en sitios

Web, dispositivos móviles e interfaces en general.

Descargar el material: http://nico.cc/fopea2013

<!DOCTYPE html><title> Usen HTML5 y CSS3</title>

Algunos beneficios:

• Síntesis en el uso de etiquetas.• No se necesitan plugins adicionales para insertar <video> <audio>

<canvas> <svg>• No más flash y cosas extras.• Compatible con Javascript y frameworks como jQuery, entre otros.• Utilizar cualquier fuente de la web: @font-face, Google Web Fonts,

etc.• CSS3 para realizar animaciones simples, bordes redondeados,

transparencias y opacidad, etc. Sin utilizar imágenes. Puro código.• Responsive Design.

Prueben: http://es.html5boilerplate.com/

</html> 

El día después…

Trabajo diario:

• Medir, medir, medir.• Contenido más visitado, fuentes de tráfico,

etc.• Herramientas de webmaster Google.• Eyetracking (crazyegg.com).• Desarrollo y rediseño CONSTANTE.• Elaborar estrategias de crecimiento de tráfico.

¿Preguntas?

Gracias ;)

NicolasPiccoli.com@sic

nicolaspiccoli@gmail.com