PDF de programación - Abordar el diseño de un sitio web Experiencias y Reflexiones

Imágen de pdf Abordar el diseño de un sitio web Experiencias y Reflexiones

Abordar el diseño de un sitio web Experiencias y Reflexionesgráfica de visualizaciones

Publicado el 12 de Junio del 2020
165 visualizaciones desde el 12 de Junio del 2020
1,2 MB
49 paginas
Creado hace 13a (01/07/2008)
Abordar el diseño de un sitio web

Experiencias y Reflexiones

Ricardo Castillo “negro”

www.rcgrafica.com

Índice

1
2

3

4

5

Objetivo
Temática
Usabilidad
Navegación
Colores

6

7

8

9

Logotipo
Composición
Accesibilidad
Maquetado

El sabio cumplimiento de todas las
etapas en la construcción de un sitio web hará
que el resultado final esté bien resuelto

y arroje mejores resultados.

Objetivo

Definir un objetivo debe preceder
el resto de las etapas

¿Qué quiero lograr?
¿A quién me estoy dirigiendo?
¿Qué deseo comunicar?





Si no tengo claro a dónde ir,

cómo puedo saber que camino tomar

Temática

Motivar la inspiración y
preparar los elementos de trabajo

Analizar sitios de la competencia y en el rubro.
Mirar revistas de diseño.
Elegir tipografías y fotografías adecuadas y atractivas.
Seleccionar colores relacionados a la temática.
Iconografía que siga una línea estética.



Estar informado es estar



Usabilidad

¿Estoy pensando en los usuarios o estoy
pensando en hacer lo que a mí me gusta?

Crear interfaces familiares a la temática.
Destacar los elementos correctamente.
Sintetizar los textos.
Simbología y fotografía coherente .

Usabilidad Definición y beneficios

Definición

Efectividad, eficiencia y satisfacción con la que un
producto permite alcanzar objetivos específicos a
determinados usuarios en un contexto de uso.

Beneficios de la usabilidad

La usabilidad permite que tu web sea fácil de usar,
eficiente y transmita una buena experiencia.

Usabilidad Beneficios

Beneficios para el cliente:

Mayor satisfacción de los usuarios.
Mejor posicionamiento de la marca.
Aumento de la tasa de conversión.
Menor esfuerzo en futuros rediseños.
Menos recursos en atención al cliente.

Usabilidad Beneficios

Beneficios para el usuario:

Mayor rapidez en la ejecución de tareas.
Mayor productividad.
Experiencia de uso más agradable.
Facilidad de entendimiento.

Usabilidad Buen ejemplo

www.digg.com

Usabilidad Buen ejemplo

www.flickr.com

Usabilidad Buen ejemplo

www.apple.com

Usabilidad Buen ejemplo

www.yahoo.com

Usabilidad Mal ejemplo

www.godaddy.com





Simple no es fácil, hacer

las cosas simples es complejo

Navegación

¿Cómo vamos a construir nuestro menú de opciones?
¿Cuántos ítems y/o sub ítems vamos a tener?
¿Nuestros menús serán desplegables o no? ¿Por qué?

Navegación Ejemplo

www.infobae.com

Navegación Ejemplo

www.download.com

Navegación Ejemplo

store.apple.com

Navegación Ejemplo

www.maxim.com



Mejor navegación, menor tiempo



Colores

Creando una paleta de colores

Seamos moderados.
Busquemos paletas en Internet.
Aprendamos sobre colores.

www.colourlovers.com

Colores Ejemplo

Trabajando con tonos

Trabajar con pocos colores de base.
Utilizar tonos, hacia blanco y hacia negro.
Los iconos y las fotografías también nos
aportan color a nuestro diseño.

Colores Ejemplo



El sentido común es el menos común de
los sentidos, no podemos atribuir saber
combinar colores únicamente al sentido
común, hay que aprender sobre colores



Logotipo

Tener una buena idea.
Saber abstraer.
Representativo.
Distintivo.
Fácil de recordar y asociar.
Fácil de aplicar en diferentes medios.
Debe poder aplicarse en pequeños tamaños,
escala de grises y blanco/negro.

Logotipo Ejemplos

Un logo es síntesis, simbiosis,

abstracción y distinción. No es un dibujo,
no es un texto, no es un texto con un dibujo.





Composición

¿Cómo voy a distribuir el espacio?
¿Qué cosas voy a destacar y por qué?
¿Cómo ubico el contenido en el sitio?
¿Qué grado de tensión tienen los elementos?
¿Cómo logro equilibrio y armonía?

Composición Espacios y distancias

Entrar al sitio

Composición Iconografía

Entrar al sitio

Composición Multimedia

www.neostream.com

Composición Productos

www.apple.com

Composición Información

www.clarin.com

Composición Entretenimiento

www.gamespot.com



saber componer ya no es tan sencillo

Componer es crear un

elemento a partir de otros,



Accesibilidad

Capacidad de acceso a la web y a sus contenidos.
Cualidad íntimamente relacionada con la usabilidad.
En la web, el W3C ha desarrollado directrices o pautas
específicas para permitir y asegurar este tipo de
accesibilidad.
El grupo de trabajo dentro del W3C encargado de
promoverla es el WAI (Web Accessibility Initiative).

Accesibilidad Aplicación en la web

Niveles de accesibilidad

A (mínimo).
AA (extendido).
AAA (Máximo).

TAW (Test de Accesibilidad Web)

Herramienta para el análisis de la accesibilidad
de sitios web.

www.tawdis.net

Accesibilidad Aplicación en la web

Acceso de todas las personas en condiciones
de igualdad

Colocar textos alternativos en las imágenes.
Enlaces con nombres significativos.
Videos con subtítulos.
Contenidos escritos en un lenguaje sencillo.
Presencia de diagramas y animaciones.
Usar la tecnología de forma moderada
(Adobe Flash, Java Script, AJAX).

Accesibilidad Aplicación en la web

Tamaño de texto suficientemente grande.
Tamaño adecuado de botones o áreas activas .
Evitar acciones que dependan de un dispositivo en
concreto (pulsar una tecla, hacer clic con el ratón).



La accesibilidad no es un tema

comercial, es un tema de ética, todos
merecemos acceder a la información



Maquetado

Maquetar correctamente significa:

Identificar adecuadamente los elementos en el HTML.
Utilizar hojas de estilo (CSS) para aplicar el diseño.
Utilizar correctamente las imágenes.

Maquetado HTML

HTML (HyperText Markup Language)
Lenguaje de etiquetas de hipertexto

Describe la estructura y el contenido en forma
de texto.
Cada etiqueta identifica un tipo de contenido.
Se estructura identificando cada una de las partes
por separado.

Maquetado

XHTML

XHTML (eXtensible Hypertext Markup Language)
Lenguaje extensible de marcado de hipertexto

Sustituye al HTML como estándar para las páginas web.
Es la versión XML de HTML.
Cumple las especificaciones más estrictas de XML.
La información se separa de su presentación, la cual
estará dada por hojas de estilo (CSS).

Maquetado

CSS

CSS (Cascading Style Sheets, CSS)
Hojas de estilo en cascada

Lenguaje para definir la presentación del HTML.
Nos permite aplicar diferentes estilos a cada una
de las zonas del HTML.
Para un HTML dado, se pueden aplicar “n”
diseños diferentes.

www.csszengarden.net



El gran diseñador web conoce y

muestra interés por varias disciplinas,

está más allá del software,

es autocrítico y acepta la crítica.

El gran diseñador web NO tiene límites



Nos encontramos en www.abcdisegno.com
Comunidad hispano parlante de diseño,

programación y creatividad.

¡Hasta pronto!
  • Links de descarga
http://lwp-l.com/pdf17766

Comentarios de: Abordar el diseño de un sitio web Experiencias y Reflexiones (0)


No hay comentarios
 

Comentar...

Nombre
Correo (no se visualiza en la web)
Valoración
Comentarios...
CerrarCerrar
CerrarCerrar
Cerrar

Tienes que ser un usuario registrado para poder insertar imágenes, archivos y/o videos.

Puedes registrarte o validarte desde aquí.

Codigo
Negrita
Subrayado
Tachado
Cursiva
Insertar enlace
Imagen externa
Emoticon
Tabular
Centrar
Titulo
Linea
Disminuir
Aumentar
Vista preliminar
sonreir
dientes
lengua
guiño
enfadado
confundido
llorar
avergonzado
sorprendido
triste
sol
estrella
jarra
camara
taza de cafe
email
beso
bombilla
amor
mal
bien
Es necesario revisar y aceptar las políticas de privacidad