Arquitectura Info, Wireframes y Escribir Para La Web PDF

7/23/2019 Arquitectura Info, Wireframes y Escribir Para La Web PDF

1/24

Cmo organizar los contenidos en la webArquitectura de la informacin

/basado en textos de Juan Carlos Camus, Poynter.com y otros aut


2/24

Cada edificio sirve para propsitos diferentes y nicos.Su arquitectura, diseo, tipo de construccin, sus muebles, sus habitanteTodos estos factores juegan un rol juntos en la experiencia total del espaEl todo es mayor que la suma de sus partes.

ARQUITECTURA DE LA INFOR


3/24

1. Una combinacin de organizacin, etiquetas, bsquedas ynavegacin en sitios webs o intranets.

2. El arte y ciencia de dar forma a los productos de la inform

experiencias para apoyar la usabilidad y la accesibilidad.

3.Disciplina emergente y prctica comunitaria enfocada en t

principios del diseo y la arquitectura al paisaje digital.

DEFINICIONES: Arquitectura de la in


4/24

Estructurar : definir informacin especfica de un sitio y decidir cm

Organizar : agrupar los contenidos y componentes de tu sitio de ungenere significado y categorasdistintivas.

Etiquetar : resolver cmo nombrar categoras, links y navegaciones

a ellas.Bsqueda y gestin: el sitio falla si los usuarios no pueden encontranecesitan en una combinacin de navegacin, bsqueda y pregunta

Arte y ciencia: Metodologa, experiencia, intuicin y creatividad.

CONCEPTOS B


5/24

1. El mapa d


6/24


7/24

2. Wir* Dibujos simples que muestran donde se encuentran los elementos en una pgi

*Es un primer paso para crear un sitio, sin distracciones acerca de colores, tipogelementos de diseo. La idea es concentrarse en los porcentajes de espacio que

elemento dentro de un sitio. Estos elementos incluyen:

Navegacin: Los botones para las secciones principales de tu sitio.

El logo

Las reas de contenido: donde estarn las distintas secciones de contenid

rea de bsqueda (buscar)

Login usuario


8/24

WIREFRAMES


9/24


10/24


11/24

Existe una variedad de formas de crear un wireframe:

-----------------------------------------------------------------------------Dibujarlo a mano

----------------------------------Usando Adobe Photoshop, Illustrator, u otros software para

------------------------------------------------Usando software creados especficamente para real

www.gliffy.com http://www.mockflow.com/

http://www.axure.com/

mvil http://iphonemockup.lkmc.ch/
http://iphonemockup.lkmc.ch/http://www.axure.com/http://iphonemockup.lkmc.ch/http://www.axure.com/http://www.mockflow.com/http://www.gliffy.com/


12/24

Cmo organizar los contenidos en la webArquitectura de la informacin


13/24

contenidosinteractivosactualizadosmultimedialesno lineales

Cmo escribir en espacios digital


14/24


15/24

fcil de comunicar:de escuchar, escribir y leer: no utilice letras que

explicacin, evite los nmeros

fcil de recordar: no tenga ms de diez letras

representar el contenido: esto adems ayudar a la indexacin del motores de bsqueda para los temas

funcionar sin las www: para facilitar uso del dominio, permita acce

pginas cuando se escriba su nombre con y sin las www

Nombre del si


16/24

Se descubri que hay un cierto orden para mirar el contenido de unDespus de mirar el contenido en la esquina superior izquierda o principales los movimientos de ojos de los participantes usualmcontemplaban revisiones hacia arriba y debajo de las pginas, paracuadrante superior derecho.Ojo: a diferencia de los impresos, las fotografas noson un punto dpginas ya que los usuarios prefieren los textos.

LECTURA DIAGONAL: eye

TTULOS CONTEXTO E
https://www.youtube.com/watch?v=ylPLFoIyR3Qhttps://www.youtube.com/watch?v=O6DRl6tTjCUhttps://www.youtube.com/watch?v=ylPLFoIyR3Q


17/24

1. El ttulo debe ser comprensible sin contexto: debe ser Auto-explicativo

2. Las palabras del ttulo deben apoyar el clic del usuario: se debe considerar la inclusinusuario - clic al enlace-- ir hacia la informacin

3. El ttulo debe sostenerse en el tiempo: los ttulos deben plantearse en trminos neutralespara que no queden amarrados a una fecha en particular.

4. El ttulo debe tener un largo adecuado: para ser adecuadamente indexado en los buscadotener un mximo 64 caracteres (incluyendo espacios)

5. El ttulo debe usarse segn el estndar web, en dos zonas de cada pgina.1)como elemento del encabezado o a travs de la etiqueta 2) como parte del a travs del uso de la etiqueta que permite indicar que se trat

principal de la pgina, ya que describe su contenido.

TTULOS: CONTEXTO E


18/24

titulares auto-explicativos

no dependientes del contextopara ser entendi

motiven al usuario a hacer clicpara saber mextensinpermita aparecer en resultados de los bus

TIT

TIPOGRAFA LA LETRA CORRECTA


19/24

1. TIPO DE LETRAS:usuarios prefieren letras sans-serif a las que tienen serif, nueva generacin de letras h

2. NEGRITAS Y CURSIVAS:para destacar ciertas palabras en los prrafo en recorrido visual de la informa

3. NMERO DE COLUMNAS: una columna mejor que tres

4. INTERLINEADO DEL TEXTO: uso de espacio blanco promedio entre prrafos produce mayores niveles

5. ANCHO DE LA COLUMNA:velocidad de lectura es mejor con un ancho de columna en torno 80 a 100 caradeber tener lmites concretos en su ancho y no estirarse junto con el sitio.

6.LARGO DEL TEXTO:aunque no hay reglas estrictas, se recomienda limitar el scroll y ofrecer sumarios al que el lector se interese por todo el contenido. Opciones:- Enlaces en el comienzo (anclas) hacia las diferentes partes del texto, para que el usuario elija y accedanecesidad de leer todo el contenido.

- botones de accin PDF.

TIPOGRAFA: LA LETRA CORRECTApara todos


20/24

;

CUNTO ES
https://www.youtube.com/watch?v=wkoX0pEwSCw


21/24

Jacob Weisberg dice que las personas deben escribir distinto para el web:

...La escritura nativa del web es diferente

El tono de una buena escritura para e

el correo electrnico. Es ms directo, personal, urgente, ingenioso, eficiente; no te

tiempo. Refleja el compromiso, la receptividad y el apuro de los usuarios del web e

pasividad textos impresos. Integra el uso de enlaces al proceso creativo e intelec

abordarlo despus de dicha etapa. Yusa la multimedia en forma orgnica, ms qu

ornamental.

CUNTO ES

RECOMENDACIONES


22/24

RECOMENDACIONESSER SUCINTO: mitad de las palabras y ahorrar expresiones para lasideas.

ESCRIBIR PARA LA COMPRENSIN: ofrecer en el caso del primer prrafo de un texto laresumen del tema.

USAR VERBOS DIRECTOS: menos palabras y directo para expresar laaccin. Preferir modo Infinitivo al Presente Perfecto o cualquier otrocompuesto.

EVITAR LAS EXPLICACIONES NEGATIVAS: exafirmativos

ESTABLECER JERARQUAS DE INFORMACIN: utilizar Pirmideinvertida, lo ms importante primero, luego elementoscomplementarios.

PREFERIR LOS HECHOS A LOS DISCURSOS:discursos descriptivos.

CREAR SUBTTULOS DESTACADOS: ideal que los subttulos sean unresumen de los prrafos a continuacin DESTACAR PALABRAS SIGNIFICATIVAS: comvisual de la pgina. Con moderacin.

CREAR LISTAELEMENTOS: si estos requieren mayor explicacin,pueden ir enlazado hacia otras pginas con texto ms detallado

OFRECER ENLACES HACIA OTRAS PGINAS:sitios externos que aporten al tema.

EVITAR LAS ABREVIACIONES Y LA JERGA TCNICA: a menos que se tratede instituciones muy conocidas, evitar el uso de siglas, acrnimos o

abreviaciones.

CLARIDAD Y PRECISIN

ESCRIBIR PARA LA WEB R


23/24

ESCRIBIR PARA LA WEB - RLOS CONTENIDOSConoce a tu audiencia: Los lectores no leen, escanean el contenido (eye tracking). Se directo, preciso y claro Ttulo: 64 caracteres mx.

Bajada informativa / 150-160 caracteres Subttulos informativos Usar negritas en nombre propios y puntos importantes Usar listados Prrafos cortos No ms de 800 palabras de largo Usar verbos directos y activos:menos palabras y directo para expresar la accin. Preferir modo Infinitivo al P

cualquier otro compuesto. Evitar sobre uso de adjetivos y adverbios Explica: tus lectores no slo quieren las 5w, quieren saber razones, por qu la historia es importante. Textos escaneables y divididos- Escaneables: resaltar palabras claves o frases para destacar algn punto.- Divididos: divide la informacin en links que tambin estn desplegados en orden y estilo pirmide invertida. Usa links para contenidos relacionados que aporten al tema, para amplificar contenido sin usar palabras de m Tener fotos o grfica. Recordar la mxima ve el caballo, no nombres al caballo.

Tipografa: sans-serif

ESCRIBIR PARA LA WEB R


24/24

ESCRIBIR PARA LA WEB - RLAS FORMASCmo escribimos y cmotrabajamos las historias son dos cosas diferentes. Escribepara dar o agregar profundidad a una historia, por qu es importante. Permite a tu audiencia escuchar o verel drama humano, o la accin. Engancha a tus lectores de forma interactiva con grfica u otros elementos (mapas, lneas de tiempo) que sum

a tu historia. Las galeras de fotos, con o sin audio con explicaciones al pie cuando se trate de imgenes de fuerte contenid Agregar siempre crditos del fotgrafo o archivo desde donde proviene la imagen. Posibilidad de agregar encuesta o diccionario de trminos para algn tema. Analizar si la informacin que estoy presentando en largos textos estara mejor y ms claramente presentada

tabla.

Link, link, link!: que funcione, que aporte, que relacione contenidos internos y externos.* Interactuar orgnicamente con contenido multimedia complementando el texto, ocupando la narrativa y lenguaje denriqueciendo la experiencia del usuario.FUENTES_http://www.poynter.org/how-tos/newsgathering-storytelling/writing-tools/83326/writing-for-the-web-the-basics-stillhttp://tienes5segundos.cl/
http://tienes5segundos.cl/http://www.poynter.org/how-tos/newsgathering-storytelling/writing-tools/83326/writing-for-the-web-the-basics-still-apply/http://www.poynter.org/how-tos/newsgathering-storytelling/writing-tools/83326/writing-for-the-web-the-basics-still-apply/http://tienes5segundos.cl/http://www.poynter.org/how-tos/newsgathering-storytelling/writing-tools/83326/writing-for-the-web-the-basics-still-apply/

Arquitectura Info, Wireframes y Escribir Para La Web PDF

Documents

Transcript of Arquitectura Info, Wireframes y Escribir Para La Web PDF