Principios para buen diseno web

Rios Munoz 4-L
Mind Map by Rios Munoz 4-L, updated more than 1 year ago
Rios Munoz 4-L
Created by Rios Munoz 4-L over 5 years ago
7
0

Description

Mind Map on Principios para buen diseno web, created by Rios Munoz 4-L on 03/05/2016.

Resource summary

Principios para buen diseno web
  1. 1. Preferencia (Guiando el ojo)
    1. Breves ejemplos da click en la nota ►

      Annotations:

      • – 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? “Marius” tiene un sitio muy limpio, muy sencillo con bastante espacio.
    2. 2.Espacio
      1. Breves ejemplos da click en la nota ►

        Annotations:

        • – 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.
      2. 3. Navegación
        1. Breves ejemplos da click en la nota ►

          Annotations:

          • 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.
          • 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. En un sitio más grande, podrías utilizar la técnica de las migas de pan, sub-encabezados y un mapa del sitio para los que están realmente perdidos.
        2. 4. Diseña para construir.
          1. Breves ejemplos da click en la nota ►

            Annotations:

            • 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
            • Por otro lado, si los tres se superponen uno con otro, quizá sea fácil también, pero probablemente será un poco más complicado. Debes encontrar un balance entre lo que se ve bien y los pequeños cambios que puedan simplificar tu creación.
          2. 5. Tipografía
            1. Breves ejemplos da click en la nota ►

              Annotations:

              • – Opciones de letras – los diferentes tipos de letras dicen cosas diferentes sobre un diseño. Algunas lucen modernas, algunas lucenRetro.
              • – 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. Pero también deberías de pensar en el espaciado entre letras, aunque en Internet esto es de importancia menor, ya que no se tiene mucho control sobre ello.
              • – 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.
            2. 7. Alineación
              1. Breves ejemplos da click en la nota ►

                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.
              2. 9. Consistencia
                1. Breves ejemplos da click en la nota ►

                  Annotations:

                  • La manera más simple de mantener la consistencia es hacer decisiones tempranas y pegarte a ellas. Aún así, con un Site grande, las cosas pueden cambiar en el proceso de diseño. Cuando yo diseñé FlasDen [link] por ejemplo, el proceso me llevó meses, y ya para el final, algunas de mis ideas para los botones y las imágenes habían cambiado, así que tuve que regresar y revisar las paginas anteriores para que encajaran perfectamente con las que hice después.
                  • 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) 
                2. 8. Claridad (Nitidez)
                  1. Breves ejemplos da click en la nota ►

                    Annotations:

                    • – 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.
                  2. 6 .Usabilidad
                    1. Breves ejemplos da click en la nota ►

                      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.
                      • – 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.
                    Show full summary Hide full summary

                    Similar

                    Databases
                    Dean Whittle
                    English Language Terms
                    ekimlauretta
                    English Placement Test
                    CoachDanielDixon
                    Edexcel Additional Science Chemistry Topics 1+2
                    Amy Lashkari
                    Moon Phases Quiz
                    Kennedy Kerr
                    Social Influence
                    olimcconnell
                    Chinese HSK -1 Characters Flashcards
                    Diem Huong Bui
                    Cells - Biology AQA B2.1.1
                    Georgia Morton
                    Biology - the digestive system
                    Nurgül Şimşek
                    GCSE Maths: Geometry & Measures
                    Naomh McKee
                    Epithelial tissue
                    Megan Pilmaier