Principios para buen diseño web

Campos García 4ºL
Mind Map by Campos García 4ºL, updated more than 1 year ago
Campos García 4ºL
Created by Campos García 4ºL over 5 years ago
15
0

Description

Mind Map on Principios para buen diseño web, created by Campos García 4ºL on 03/05/2016.

Resource summary

Principios para buen diseño web
  1. 1. Preferencia (Guiando el ojo)

    Annotations:

    • El usuario debería ser guiado en la pantalla por el diseñador.
    • Un simple ejemplo de preferencia es que en la mayoría de los sitios, la primer cosa que ves es el logo. Esto pasa frecuentemente por que es grande y está colocado en donde ha sido demostrado en muchos estudios realizados ser el primer lugar que la gente ve (la esquina superior izquierda).
    • Para lograr la preferencia tienes muchas herramientas a tu disposición: – Posición – Donde algo en la página claramente influencia en qué orden el usuario lo ve. – Color – Usando colores sutiles es una manera sencilla de decirle a tu usuario hacia donde mirar. – Contraste – Ser diferente es lo que hace a las cosas resaltar, mientras que siendo similares las hace secundarias. – Tamaño – Lo grande toma preferencia sobre lo pequeño (a menos que todo sea grande, en cuyo caso lo pequeño quizá sobresaldrá gracias al contraste) – Elementos de diseño – Si hay una gran flecha apuntando algo, adivina ¿hacia dónde mirará el usuario?
    1. 2. Espacio

      Annotations:

      • El espacio hace las cosas más claras. En el diseño Web hay tres aspectos sobre espacio que deberías considerar
      • – Espacio entre líneas Cuando tú presentas un texto, el espacio entre líneas afecta directamente a lo legible que aparece. Muy poco espacio hace fácil que tu ojo caiga de una línea a otra en lugar de la siguiente; demasiado espacio significa que cuando terminas una línea de texto y vayas a la siguiente, la pierdas de vista. Así que necesitas encontrar una medida media feliz. 
      • – Relleno Generalmente hablando, el texto nunca jamás debería tocar otros elementos. Las Imágenes, por ejemplo, no deben de tocar el texto, ni tocar bordes o tablas. El relleno es el espacio entre los elementos y el texto.
      • – Espacio en blanco Antes que nada, el espacio en blanco no es necesariamente de color blanco. El término se refiere al espacio vacío en una página (o espacios negativos como a veces se le llama). El espacio en blanco es usado para dar balance y contraste a una página.
      1. 3. Navegación

        Annotations:

        • Una de las experiencias más frustrantes que puedes tener en un Web Site es cuando no sabes en donde estás ni para dónde vas. Hay dos aspectos sobre la navegación que hay que tener en cuenta.
        • Navegación – ¿Hacia dónde puedes ir? Hay algunas reglas con sentido común que hay que recordar. Los botones para navegar en el sitio deberían ser fáciles de encontrar – hacia la parte de arriba de la página y fáciles de identificar. Deberían verse como botones de navegación y estar bien descritos. El texto de un botón debe estar bien claro en cuanto hacia donde te está llevando.
        • Orientación – ¿Dónde estas ahora? Hay muchísimas maneras en las que puedes orientar a un usuario, así que no hay excusa para no hacerlo. En sites pequeños, es solo cuestión de un gran encabezado o una versión “menor” de la versión del botón correspondiente.
        1. 4. Diseña para construir.

          Annotations:

          • Considera cosas como: – ¿De veras puede hacerse? Puedes haber escogido un tipo de letra sorprendente para la copia del cuerpo de tu site, pero ¿Es un tipo de letra estándar en HTML? Quizá tienes un diseño que se ve hermoso, pero su tamaño es de 1100px y como resultado, tendrán que recorrer la página horizontalmente para poder verlo. Es importante saber lo que se puede hacer y lo que no, por lo cual creo que todos los diseñadores web deberían incluso hacer sitios completos, al menos unas cuantas veces.
          • – ¿Qué pasa cuando una pantalla cambia de tamaño?¿Necesitas fondos repetitivos? ¿Cómo funcionarán? ¿El diseño es alineado a la izquierda o centrado? – ¿Algo de lo que estás haciendo es técnicamente difícil? Incluso con el posicionamiento del CSS, algunas cosas como el alineamiento vertical son un poco dolorosas y algunas veces mejor evitarlas. – ¿Podrían algunos pequeños cambios en tu diseño simplificar enormemente cómo lo construiste?
          • A veces, mover un objeto en el diseño puede hacer una gran diferencia en cómo tendrás que codificar tu CSS después. En particular, cuando los elementos de un diseño se cruzan entre ellos le añade un poco de complejidad al proyecto.. así que si tu diseño tiene, digamos tres elementos y cada elemento está completamente separado de los otros, será muy fácil de crear.
          1. 5. Tipografía

            Annotations:

            • El texto es un elemento común en el diseño, así que no es sorpresa que muchos pensamientos se enfoquen en eso. Es importante considerar cosas como:
            • – Opciones de letras – los diferentes tipos de letras dicen cosas diferentes sobre un diseño. – Tamaño de letras – Años atrás era tendencia tener texto realmente chiquito. Felizmente, en estos días la gente ha empezado a darse cuenta de que el texto está hecho para leerse, no solo para observarse. – Espaciado – Como lo discutimos anteriormente, el espacio entre líneas y lejos de otros objetos es de importante consideración.
            • – Anchura de las líneas. – No hay una regla establecida, pero generalmente las líneas de tu texto no deberían ser tan largas. – Color. – uno de mis peores hábitos es poner texto de bajo contraste. Se ve bonito, pero no se lee bien desafortunadamente. Aun así, parece que lo hago con cada diseño de web que he creado, tsk tsk tsk. – Parrafeando . – antes de que empezara a diseñar, adoraba justificar el texto en todo. Lo hacía para que tuviera bonito bordeado en cada lado de mis párrafos. Desafortunadamente, el texto justificado tiende a crear espacios extraños entre las palabras donde ya han sido auto-espaciadas.
            1. 6. Usabilidad

              Annotations:

              • El diseño Web no solo se trata de fotos bonitas. Con la tanta información e interacción que hay que efectuar en un web Site, es importante que tú, el diseñador, lo proveas para todo. Eso significa que hagas tu web Site utilizable.
              • – Apegándose a los estándares. Hay un cierto tipo de cosas que la gente espera, y no dárselas provoca confusión. Por ejemplo, si el texto esta subrayado, tu esperas que sea un link. Haciéndolo de otra manera no es una buena práctica de usabilidad.
              • – Piensa sobre lo que los usuarios van a hacer. Hacer prototipos es una herramienta común usada en diseño para de hecho “probar” un diseño. Esto se hace por que con frecuencia cuando utilizas un diseño, llegas a notar pequeñas cosas que pueden hacer una gran diferencia.
              • – Piensa en las tareas del usuario. Cuando un usuario entra a tu sitio, ¿qué es lo que trata de hacer? Enlista los diferentes tipos de tareas que la gente hace en un Site, cómo las logran, y qué facilidad quieres darles para ello. Esto puede significar que haya tareas comunes en tu homepage (por ejemplo, “empieza a comprar”, o “aprende lo que hacemos”, etc.) o incluso puede significar asegurar algo como tener un cuadro de búsqueda que esté siempre accesible fácilmente.
              1. 7. Alineación

                Annotations:

                • Mantener las cosas alineadas es tan importante en el diseño Web como lo es en un diseño de impresión. No quiere decir que todo tiene que estar derecho, sino que debes tratar de mantener las cosas bien colocadas en una página. La alineación hace tu diseño más ordenado y digerible, al igual que lo hace ver más pulido.
                • Quizá también quieras basar tus diseños en una cuadrícula específica. Debo admitir que no hago esto concientemente, aunque obviamente PSDTUTS tiene de hecho una cuadrícula estructural muy firme.
                1. 8. Claridad (Nitidez)

                  Annotations:

                  • En tu CSS todo va a ser perfecto en cuanto los pixeles, así que no hay nada de que preocuparse, pero en PhotoShop no es así. Para lograr la nitidez tienes que:
                  • – mantén las formas de los límites pegados a los pixeles - Esto podrá incluir limpiar los límites manualmente, las líneas y los cuadros de texto si las estás creando en PhotoShop.
                  • – asegúrate de que el texto está creado usando el comando anti-alistado. Seguido usa “Nitidez”. – asegurarse que el contraste es alto para que los bordes estén claramente definidos. – sobre-enfatiza los bordes solo un poco para exagerar el contraste.
                  1. 9. Consistencia

                    Annotations:

                    • Consistencia significa hacer que todo combine. Tamaño de encabezados, tipos de letra escogidas, colores, estilos de botones, espaciado, elementos de diseño, estilos de ilustraciones, fotos escogidas, etc.
                    • Mantener tu diseño consistente es lo que te hace un profesional. Las inconsistencias en un diseño son como cometer errores ortográficos en un ensayo. Lo único que hacen es bajar la percepción de calidad.
                    • La manera más simple de mantener la consistencia es hacer decisiones tempranas y pegarte a ellas.
                    • Tener un buen set de CSS también puede ayudar a hacer un diseño consistente. Trata de definir etiquetas básicas como <h1> (header 1) y
                    • (paragraph) de una manera para hacer que las predeterminadas encajen perfectamente y te evites el estar tratando de recordar nombres de clases específicas todo el tiempo.
                    Show full summary Hide full summary

                    Similar

                    Characteristics and Climate of a hot desert
                    Adam Collinge
                    English Language
                    livbennett
                    Ionic Bonding
                    Evangeline Taylor
                    Novidades: Mapas Mentais de ExamTime
                    miminoma
                    Physics P2
                    Phoebe Drew
                    Perfect Tense French Irregular Verbs
                    Oliver Hall
                    AQA Business Unit 1
                    lauren_binney
                    The Strange Case of Dr. Jekyll and Mr. Hyde
                    K d
                    Junior Cert Physics formulas
                    Sarah Egan
                    Groups Starter Pack
                    Micheal Heffernan
                    Power and Conflict Poetry
                    Charlotte Woodward