9 Principios para Buen Diseño Web

Description

Note on 9 Principios para Buen Diseño Web, created by Hernandez Zavala 4°L on 05/03/2016.
Hernandez Zavala 4°L
Note by Hernandez Zavala 4°L, updated more than 1 year ago
Hernandez Zavala 4°L
Created by Hernandez Zavala 4°L about 8 years ago
24
0

Resource summary

Page 1

El Diseño web Puede ser Totalmente Dificil.Pues Involucra una Buena Coherencia , Entrega Información,Crea Marcas y Es sonoro.A Continuación 9 Principios Para El Buen Desarrollo de este:Preferencia (Guiando el ojo):Cuando El Usuario Navega en la Pagina Normalmente es guiado por Características (Carga Visual Del Contenido).Esto es Dirigir al Usuario Por una secuencia de Pasos.Esto Quiere decir Que si tu quieres que tu usuario vea lo primero y fundamental que es para ti Como el Logotipo de la Pagina Web ; trataras llamar su atención Al poner un Buen logotipo Colorido (Se dice normalmente que Al entrar a un sitio web , lo primero que ve el usuario es lo que mas resalte en la pagina).Para poder lograr esto es necesario 4 elementos: Posición Donde algo en la página claramente influencia en qué orden el usuario lo ve. Color Usando colores sutiles para llamar la atención de tu usuario hacia donde puede mirar. Contraste Ser diferente , en este caso el contraste resaltara mas las cosas para que no sean o se vean similares. Tamaño Lo grande siempre resaltara mas tu texto y toma preferencia sobre lo pequeño , amenos que sea un caso contrario. Espacio: 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: El espacio entre lineas afecta directamente a que el texto sea legible. En caso contrario el poco espacio hace que el texto sea mas fácil de comprender y no perder la linea en la que vas. Relleno: Una regla calara del texto es que nunca deberá estar cerca o tocar Los bordes o las tablas de esta.El punto es que siempre debes de tener espacio ahí.Con excepción si el texto es un tipo de encabezado o Gráfico. Espacio en blanco: Esto hace referencia al espacio vació entre una pagina.Este espacio en blanco o vació puede ayudar a dar contraste o balance a la pagina, esto hace verlo mas Formal. Navegación: La navegación es un concepto que hemos pasterizado.Hay dos aspectos sobre la navegación que hay que tener en cuenta: Navegación – ¿Hacia dónde puedes ir? : Reglas básicas como , la facilidad de encontrar los botones que proporcione,El texto de un botón debe estar bien claro en cuanto hacia donde te este dirigiendo .Es importante hacer usable la navegación. Orientación – ¿Dónde estas ahora?: Esto sirve para orientar al usuario,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. Diseña para construir. Para realizar este diseño debes consideras ciertas preguntas hacerca de tus plantillas tales como:¿De veras puede hacerse?: Deberás adaptarte a tu tipo de archivo, pudieses haber escogido un tipo de letra para tu sitio sorprendente ¿Pero ese tipo de letra es estándar en tu programa HTML?, Quizá tu diseño lo ayas perfeccionado a tu gusto, pero su tamaño es de 1100px o mas por lo que deberá recorrerla pagina en una dirección horizontal, para poder verlo. Esto es importante considerarlo para analizar lo que se puede y no hacer en Tu pagina web.¿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 la estructura de este?: 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. Tipografía El texto es un elemento importante en el diseño, es importante para ello considerar estos 6 puntos: Opciones de letras: Algunas letras lucirán depende de como sea tu proyecto de web y tu lugar de trabajo, algunas son modernas , otras retro o elegantes.Esto normalmente es a tu gusto o lo que podría quedarle al sitio web. Tamaño de letras: Comúnmente las letras grandes llamarían mas la atención del usuario , a comparación de las pequeñas ya que estas son aburridas de leerse. Espaciado:El espacio entre letras pierde el interés de estar leyendo el articulo web. Anchura de las líneas:Mientras más largas son, más difíciles son de leer. Pequeñas Columnas funcionan mucho mejor. Color: Normalmente es preferible que este sea mas legible para su lectura. 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. 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. Alineación Mantener las cosas bien alineadas , da una buena impresion.Esto no quiere decir que todo debe de estar perfecto.Si no que debes de tratar de mantener las cosas en su lugar.La alineación hace tu diseño más ordenado y digerible, al igual que lo hace ver más pulido. Claridad (Nitidez) Mantener nítido tu diseño es algo importante en el diseño Web. Y en cuanto a la claridad, se trata de los pixeles.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. Consistencia Esto en general es todo lo anterior, para lograr que tu pagina web sea combinable:]tipos de letra escogidas, colores, estilos de botones, espaciado, elementos de diseño, estilos de ilustraciones, fotos escogidas, etc. Todo deberá basarse en un tema en específico. Para hacer tu diseño coherente entre páginas y en la misma página.Tener un buen set de CSS también puede ayudar a hacer un diseño consistente.

Show full summary Hide full summary

Similar

French Intermediate
PrincessLaura
Chemistry Quiz General -3
lauren_johncock
Themes in Pride and Prejudice
laura_botia
AQA GCSE Biology B1 unit 1
Olivia Phillips
MCAT Physics: Thermodynamics
Mike Nervo
Who was to blame for the Cold War?
Will Barnes
Edexcel Biology chapter 1
Anna Bowring
Jane Eyre
sennahlee
Physics GCSE equations unit 1
James Howlett
Food and Nutrients
zaynsquad5ever
2PR101 1.test - 9. část
Nikola Truong