Los Principios Diseño Web

Jason Beaird publicó un excelente artículo en SitePoint.com sobre los principios para un buen diseño web, describiendo un reto que todo diseñador enfrente al inicio de un proyecto, desde el descubrir el rol de la compañía para quien diseña, ir logrando una identidad gráfica (en algunos casos hay que diseñar para organizaciones que no tienen una identidad gráfica definida), ir afinando tanto el diseño como el contenido web, y mucho más. Le recomendamos leer el artículo completo en el siguiente enlace

Aplicación 

El siguiente paso en el proceso de diseño es tomar lo que ha aprendido desde el cliente y utilizarlo para crear un diseño. Independientemente del proyecto, tratar de no quedar atrapados en la tecnología asociada a la construcción de sitios web – al menos no al principio. En este punto, no importa si el sitio va a comprender en HTML directamente, un modelo para un sistema de gestión de contenido, o una aplicación Ruby on Rails, el fondo de la cuestión es que tenemos una interfaz de diseño y de una hoja en blanco papel. «Papel?» Así es, el papel. ¿Realmente crees que iba a dejar que vuelva a su valioso equipo cliente inmediatamente después de la reunión fue de más? De ninguna manera. He aquí por qué: es muy fácil perder el enfoque en el diseño si usted comienza a pensar acerca de la disposición en el frente de una computadora. Si usted comienza a cabo en papel, puede hacer caso omiso de las limitaciones técnicas de los navegadores y CSS, y se centran en la forma en que desea que el producto final a mirar. Ahora usted podría pensar que todos los buenos diseñadores de llevar libros de lujo tapa dura esquema de utilización de los marcadores de cara a la pintura y representaciones de la obra maestra de diseño de página web. Para mí, es el equivalente a 79 céntimos de espiral determinada portátil y cualquier instrumento de escritura que puedo encontrar en mi escritorio que aún funciona. 

Empezar por trazar un posible algunos diseños. Después de unos pocos de esos bocetos, me decido por una que me gusta, salto en Photoshop, y usar la herramienta de rectángulo para bloquear las zonas que he marcado abajo en mi papel. Una vez que he definido mi diseño, yo experimento con colores de fondo y primer plano hasta que tenga un sólido esquema de color. Sigo twiddling el Photoshop botones y empujar alrededor de píxeles hasta que, finalmente, tengo una comp para mostrar el cliente. 

Simple, ¿verdad? Bueno, tal vez saltarse algunos pasos en ese breve descripción. Honestamente, sin embargo, cuando la gente me pregunta cómo hago lo que hago, por lo general obtener una explicación similar. La verdad es que hay ahora-los bloques de la información en mi subconsciente la experiencia pasada y los de edad universitaria de diseño y clases de arte que me han ayudado a definir mi propio proceso de diseño. 

Aprender a diseñar es como aprender a programar. Algunas personas tienen un poco de habilidad para ella, pero cualquiera puede aprender. Así como no hay código de buen código y feo, es un buen diseño y de diseño feo. Aprendiendo algunos de los principios y convenciones que están asociadas con el diseño le ayudará a entender la diferencia entre lo bueno y lo feo, y le ayudará a establecer su propio proceso de diseño.

Buena definición de diseño 
Hay dos principales puntos de vista de que la mayoría de las personas de determinar si un sitio web de diseño es «buena» o «malo». Hay un estricto punto de vista de usabilidad, que se centra en la funcionalidad, la efectiva presentación de la información, y la eficiencia. Luego está la perspectiva puramente estética, que es todo acerca de la presentación, animaciones caliente, sexy y gráficos. Algunos diseñadores de quedar atrapados en la estética y los gráficos y olvidarse de los usuarios, y algunos gurús de la usabilidad se pierden en su usuario de prueba y olvidarse de atractivo visual. Con el fin de llegar a la gente y mantener su interés, es esencial para aprovechar al máximo ambos. 

Lo más importante a tener en cuenta es que el diseño es acerca de la comunicación. Si crea un sitio web que funcione y así se presenta la información, pero se ve feo o no encaja con el cliente de la marca, nadie va a querer utilizarlo. Del mismo modo, si usted hace un hermoso sitio web que no es útil y accesible, la gente puede no ser capaz de utilizarlo. De hecho, los elementos y la funcionalidad de un acabado diseño del sitio web debe funcionar como una sola unidad cohesionada, de manera que:

Usuarios están satisfechos por el diseño, pero señaló a los contenidos 
Una de las mayores preocupaciones de los profesionales de la usabilidad es el tiempo que toma a los usuarios escanear la página de la información que desean, ya sea una pieza de contenido, un enlace a otra página, o un campo de formulario. El diseño no debe ser un obstáculo, sino que debe actuar como un conducto entre el usuario y la información. 

John Oxton del autobús lleno de hippies plantilla (en la foto, en la Figura 1.2) es un gran ejemplo de un diseño que a la vez hermoso y útil. Los gráficos coloridos crecer en torno a los bloques de contenido, que el ojo a la información sin interferir con las páginas’ legibilidad u organización.

Que los usuarios pueden desplazarse fácilmente a través de navegación intuitiva 
Hablaremos más acerca de la colocación posterior de la navegación, pero el bloque principal de navegación, que debe ser claramente visible en la página, y cada vínculo debe tener un título descriptivo. Una estructura de navegación que no sólo cambia de apariencia en hover ratón, pero también indica la página activa o de la sección, al igual que el menú se muestra en la Figura 1.3, ayuda a los usuarios a reconocer dónde están, y cómo llegar a donde quieren ir.

 

Navegación secundaria, campos de búsqueda, enlaces de entrada y salida no debe ser características dominantes de la página. Si hacemos estos elementos fáciles de encontrar, y separar visualmente el contenido, que permiten a los usuarios centrarse en la información, a pesar de que sabrá dónde buscar cuando estén listos para pasar a otro tipo de contenido. Que los usuarios reconocen cada página que pertenece al sitio  Incluso si hay una dramática diferencia entre el diseño de la página principal y el resto del sitio, un estilo o tema de cohesión debe existir en todas las páginas de un sitio para ayudar a sostener el diseño juntos.  Eche un vistazo a las capturas de pantalla de Steve Smith de la lista ordenada en la Figura 1.4. Aunque el contenido de los bloques en estas páginas están divididas de otra manera, hay varios indicadores visuales que permiten que los usuarios saben que éstas son las páginas del mismo sitio. Gran parte de esta unidad se debe a la repetición de la identidad y la navegación bloques. El uso coherente de una muy limitada paleta de colores (negro, blanco, verde y cian) también ayuda a unificar las páginas. Anatomía de una página web Incluso desde un punto de vista del diseñador-, la definición de un diseño que cumple todos los requisitos que se indica arriba es una tarea sencilla. Es similar a hacer una frase en su refrigerador magnético poesía con las palabras. Aunque hay millones de maneras de organizar las palabras, sólo unos pocos acuerdos tiene ningún sentido. La poesía magnética palabras son como los componentes, o bloques, de la página web. Aunque el número necesario de estos bloques depende del tamaño y el tema del sitio, la mayoría de los sitios web tienen los siguientes componentes, tal como se muestra en la figura Bloque que contiene  Cada página web dispone de un contenedor. Esto podría ser en la forma de la página del cuerpo de la etiqueta, todos los que contienen una etiqueta div, o (y yo realmente no quiero decir esto, pero) de una mesa. Sin algún tipo de contenedor, que no tendría ningún lugar para poner el contenido de nuestra página. Los elementos se deriva más allá de los límites de la ventana del navegador y desactivar en el espacio vacío. La anchura del contenedor puede ser líquido, lo que significa que se amplía para llenar el ancho de la ventana del navegador, o fijo, de modo que el contenido es el mismo ancho sin importar el tamaño de la ventana.  Logo  Cuando los diseñadores se refieren a la identidad, están refiriéndose al logotipo y los colores que existen en una empresa de comercialización de distintas formas, tales como tarjetas de visita, membretes, folletos, etc.  La identidad de bloque que aparece en el sitio web debe contener el logo de la empresa o el nombre, y sentarse en la parte superior de cada página del sitio web. La identidad de bloques aumenta el reconocimiento de la marca y permite que los usuarios saben que las páginas que estás viendo son parte de un sitio único.  Navegación  Es esencial que el sistema de navegación del sitio es fácil de encontrar y utilizar. Esperar para ver los usuarios de navegación a la derecha en la parte superior de la página. Si va a utilizar los menús verticales en el lateral de la página, o un menú horizontal a lo largo de la parte superior de la página, el menú de navegación debe ser lo más cerca de la parte superior de la distribución como sea posible. Por lo menos, todos los principales elementos de navegación deben aparecer «por encima de la tapa.»  Contenido  Contenido es el rey. Un típico sitio web visitante entrar y salir de un sitio web en cuestión de segundos. Si los usuarios no pueden encontrar lo que buscan, sin duda, cerrar el navegador o pasar a otro sitio. Es importante mantener el bloque de contenido principal como el punto focal de un diseño preciosos segundos para que no se malgasten como visitantes en la página de exploración de la información que necesitan.  Pie de página  Situado en la parte inferior de la página, por lo general el pie de página contiene los derechos de autor, contacto y la información jurídica, así como algunos enlaces a las principales secciones del sitio.  Al separar el contenido final de la parte inferior de la ventana del navegador, el pie de página debe indicar a los usuarios que están en la parte inferior de la página.  En blanco  El plazo de diseño gráfico en blanco (espacio o negativo) se refiere literalmente a cualquier área de una página que no es cubierta por el tipo o ilustraciones. Mientras que muchos diseñadores noveles (y la mayoría de los clientes), siento la necesidad de cubrir cada centímetro de una página web con fotos, texto, tablas y datos, que tengan un espacio vacío de la página es tan importante como el contenido. Sin cuidadosamente planificada en blanco, un diseño cerrado en sentir, como una habitación llena de gente. Ayuda a un diseño en blanco para «respirar» por la guía del usuario en torno a un ojo la página, sino que también ayuda a crear el equilibrio y la unidad – dos conceptos importantes que vamos a discutir con más detalle más adelante en este capítulo.  Ahora que tenemos esta información, ¿cómo podemos utilizarlo para crear un diseño de base para los servicios de Smith? Es hora de que algunos rejilla teoría.

Anuncio publicitario