Curated by: Luigi Canali De Rossi
 


17 July 2010

Guía De Diseño Web: Los Mejores Ejemplos De Interfaces, Soluciones Para La Navegación Y Website Design

¿Cómo puedes mejorar o crear excelentes proyectos de web design? A menos que haya algunas referencias y principios para mostrar cómo la legibilidad de la disposición y organización de contenidos son fundamentales para determinar la apariencia de tu sitio, no estarás satisfecho. Solucionar este reto de diseño web típico usando un modelo fresco para tu sitio no te llevará a ninguna parte. No se puede tener "belleza" o un diseño "cool", agregándole widgets, elementos decorativos y cosas interesantes a diseño. Hermosos diseños y buenas suelen ser el resultado de un análisis extremado, y no el resultado de un diseño inspirado de un diseñador de páginas web interesantes.

diseno_web.jpg
Crédito da foto: Villedieu Cristophe

En esta guía MasterNewMedia, encontrarás una selección de guías bien hechas, tutoriales y ejemplos visuales que pueden ser de gran ayuda para comprender mejor lo que hace un buen diseño, y cómo distinguir un diseño que funciona de un proyecto barato, lleno de parafernalia que lo promete pero no lo cumple.

Lo que es realmente importante es entender que los principios de diseño web y sus mejores prácticas no sólo para los blogs, sino también para sitios web y más aún para cualquier tipo de contenido que te hizo pensar construirlo.

Por ejemplo, algunos elementos críticos que la mayoría de los nuevos sitios web tiene que tener en cuenta son:

  • Above the fold: La gente debe sentirse como en casa cuando entra en tu sitio. No debería tener que desplazar la barra para saber dónde está, quién eres y qué tienes para ofrecer.
  • Legibilidad de la página: No te presumas de Monet. El virtuosismo es difícil encontrar en el diseño web, y tampoco es algo que se espera. Lo que realmente cuenta es si tu página puede transmitir adecuadamente lo que ofreces en cuestión de segundos.
  • Velocidad de carga: Cada componente del proyecto que agregas en tus páginas web (widgets, plugins, elementos Flash, etc) contribuye a retrasar la carga completa de tu contenido. Recuerda que la velocidad es ahora uno de los factores que Google utiliza para clasificar tu sitio dentro del ranking en las búsquedas.
  • Simplicidad: Mantente simple. No muestres una gran cantidad de contenido y actividades atractivas a las páginas de tu sitio. Empieza por enfocar el diseño de tu trazado en algunos artículos de contenido valioso y luego poco a poco guías al lector para que descubra.

Si esto es lo que estás buscando, aquí está un breve resumen de los principales temas que encontrarás en el interior de esta guía:

Si acabas de dar los primeros pasos en el diseño de un nuevo sitio o buscas por buenos ejemplos y buenas prácticas para optimizar tu trabajo de diseño, esta guía de MasterNewMedia es un recurso completo que cubre todas las bases, principios y prácticas necesarias para mejorar tu trabajo al diseño web.

Aqui está el nuevo Guía De Diseño Web de MasterNewMedia:

 

 

Antes Del Web Design: Wireframe Y Prototipos De WebSites



Estrategias Para Prototipos De Websites

website_design_guide_id13659501.jpg

Al iniciar un proyecto de diseño web, ya sea desde un sitio existente, o un wireframe o el mapa de un sitio, el primer paso ideal es poner toda la información recogida hasta la fecha en un prototipo, basado en una pantalla gris. Y luego desde allí, a hacer tu mapa del sitio o wireframe. Pero, ¿cómo se hace esto? En esta guía, Eric Holter muestra cuáles son los principales pasos a tomar para hacer prototipos en tu sitio web.

por Eric Holter - Newfangled

 



El Proceso Del Web Design: Del Borrador Al Prototipo

website_design_guide_black_and_white_by_zela.jpg

¿Cómo es el proceso de desarrollar el diseño de un sitio web? En esta guía, elaborada por Steven Wilson, puedes aprender las etapas clave del proceso de diseño, desde la idea básica y las transferencias a partir de cero para el prototipo, que muestran cómo hacer para diseñar un portfolio pequeño para la web (es decir, un sitio dedicado a mostrar tu mejor trabajo - como hacen los diseñadores).

por Steven Wilson - D79

 



Wireframing Y Prototipos Para Websites: Mejores Herramientas Para Diseñar Tu Sitio Web

wireframing_website_prototyping_best_free_tools_design.jpg

Los prototipos para websites y servicios para wireframes pueden ayudarte a esbozar el diseño general y la arquitectura de tu sitio sin tener que contratar un diseñador web para hacerlo. Por esta razón, el wireframing es el primer paso que debe ser considerado cuando se diseña un nuevo sitio. En esta guía, encontrarás las mejores herramientas disponibles en el mercado de wireframes y prototipos de sitios web.

por Robin Good y Daniele Bazzano - MasterNewMedia

 



Wireframing Y Prototipos Para Websites: Mejores Herramientas Bajo $150 Para Diseñar Tu Website

wireframing_website_prototyping_tools_under_150_dollars_design_site_b.jpg

Los servicios de prototipos de websites y wireframes te permiten tener un control total sobre la arquitectura de tu sitio web sin tener que contratar a un diseñador web para el trabajo. Puedes construir un verdadero diseño para tu sitio web en apariencia, sin detallar los colores, gráficos y elementos de diseño específicos. En esta guía de MasterNewMedia, encontrarás los mejores servicios para wireframes y prototipos por menos de $ 150 para empezar a dibujar tu sitio de inmediato.

por Robin Good y Daniele Bazzano - MasterNewMedia

 



Buenos Ejemplos Exemplos De Wireframes Y Maquetas

website_design_guide_sketched_wireframes.jpg

Ya sea haciendo el diseño de la interfaz de usuario de un sitio o una aplicación para el iPhone, siempre es bueno empezar por un wireframea. Henry Jones reunió a 18 grandes ejemplos de wireframes y maquetas. Muchos de estos son tan buenos que los puedes utilizar como fuente de inspiración para trazar tu próximo proyecto.

por Henry Jones - Web Design Ledger

 



Kits Para Interfaz De Usuario Y Web Design De Wireframes

website_design_guide_wireframing_kit_manicure-set.jpg

Todo lo que siempre quisiste saber acerca de wireframes y aplicaciones independientes, así como otros recursos útiles y ejemplos que puedes necesitar para construir tu propio wireframe.

por Paul Andrew - Smashing Magazine

 






Estándares De Web Design



Qué Es Un Estándar De Web Design

website_design_guide_pattern_grid_by_yahoo_pattern_library.gif

Los estándares de design interactivos son una forma de captar los problemas comunes en las mejores soluciones de usabilidad y accesibilidad dentro de un contexto específico. Los patrones de interacción lo hacen más fácil para los usuarios comprender la interfaz y cumplir sus tareas.

En otras palabras, el estándar de un proyecto es una solución general reutilizable a un problema que ocurre comúnmente. Un patrón de diseño no es un proyecto terminado que se puede transformar directamente en una interfaz lista para usar. Es más bien una descripción o modelo de cómo resolver un problema que puede ser usada en muchas situaciones diferentes.

por los Editores de Wikipedia - Wikipedia

 



Por Qué Necesitas De Estándares De Web Design

website_design_guide_id35564701.jpg

¿Qué son los "estándares de design" y dónde se originan? Aprende cuáles son las ventajas específicas del uso de patrones de diseño y las razones por las que debes incorporarlas a tu trabajo en diseño web.

por James Maioriello - Developer.com

 



Biblioteca de Estándares de Design Yahoo!

website_design_guide_yahoo_pattern_library.jpg

La Biblioteca de Estándares de Design Yahoo! es una colección de estándares de interfaz de usuario que muchos diseñadores web y desarrolladores web pueden utilizar como fuente de inspiración para la creación de nuevas páginas web. En e.sta biblioteca de Yahoo! se puede encontrar un gran número de estándares de diseño web y componentes típicos que colaboran en un útil conjunto de categorías que incluyen el diseño, navegación, selección, rica interacción y elementos sociales.

por la Red Para Desarrolladores Yahoo!

 



Web Design: Biblioteca De Estándares

website_design_guide_pattern_library_welie_logo.jpg

Una gran colección de estándares de web design, preparada y organizada por la interación del consultor de design Martijn van Welie.

por Welie

 



Tienda De Web Design: Pattern Tap

website_design_guide_pattern_tap_logo.jpg

Pattern Tap es una tienda online que ofrece estándares de web design listos para la utilización dentro de colecciones .segmentadas por nichos (navegación, botones, design, formularios, etc.).

por Pattern Tap

 






Templates Para Sites



Cómo Elegir Un Template O Tema Eficiente

website_design_guide__id45251751.jpg

¿Cómo elegir el tema más apropiado para tu blog? El reto para cualquier dueño de este sitio web no es una decisión fácil de tomar, ya que requiere un equilibrio entre las necesidades de contenido, funcionalidad y diseño ("look and feel". Aprenda a eeegir un diseño web efectivo en este modelo de análisis de calidad extraídos de as encuestas de JD Meier sobre blogs de éxito.

por J.D. Meier - J.D. Meier's Blog

 



Templates Para E-Commerce De Cualidad

website_design_guide_templates.gif

Templates comerciales de éxito reunidos y seleccionados por los editores de Smaishing Magazine. En esta colección, encontrarás templates específicamente preparados para WordPress, Prestashop, eCommerce, Magento, Zen Cart, CubeCart, y CRELoaded, así como una buena cuantidad de templates generales de e-commerce.

por Steven Snell - Smashing Magazine

 



Templates Para Websites Gratuitos

Las mejores colecciones gratis de templates disponibles en el mercado.

por Robin Good - MasterNewMedia

 



Templates Comerciales Premium

Los mejores templates comerciales premium para el design de websites del mercado.

por Robin Good - MasterNewMedia

 






Design De La Navegación



Estrategias Para El Design De La Navegación

website_design_guide_road-directions_id216170_size1.jpg

¿Cuáles son los puntos más importantes para tener en cuenta al diseñar la navegación de un sitio? Fíjate en los pasos básicos de esta guía para diseñar el sistema de navegación en tu sitio.

por M Editors - Mardiros

 



Diez Principios Para Un Design Navegacional Eficiente

website_design_guide_id6222831.jpg

Si el contenido es el corazón de un sitio, la navegación es el cerebro y un pilar básico en el diseño de la arquitectura de la información. Cuando se trata de grandes cantidades de contenido, la importancia fundamental de proporcionar la navegación de alta calidad no puede ser subestimada. Contenido no encontrado cont esenido que no se lee.

por Charlotte - Onextrapixel

 



Buenos Ejemplos De Menus Creativos Para El Design De Navegación De Un Website

website_design_guide_painter_id134155_size1.jpg

¿Necesitas inspiración? ¿Ideias? ¿Ejemplos de excelentes designs para la navegación? Descúbrelo aquí.

por Tehseen - Pro Blog Design

 



Ideias Para El Design De Menus De Navegación

website_design_guide_id17001711.jpg

Más ideas para el diseño de sistemas de navegación web que realmente funcionan. Aprende a superar tus límites para crear una solución creativa para la navegación web que sea a la vez notable y sobresaliente.

por SR Editors - Six Revision

 






Design De Layout De Sites



Design De La Interfaz: Ejemplos Y Mejores Prácticas

website_design_guide_jeff_han_ted_user_interface_of_future.jpg

Utiliza este conjunto de ejemplos útiles de intefaz para ayudarte a desarrollar y mejorar el diseño de interfaces de usuario y hacerlo más eficiente. El objetivo específico es la simplicidad y la legibilidad de las páginas web que debe ser la máxima prioridad, lo más crítico para la compatibilidad de cualquier diseño web.

por WSG Editors - Web Style Guide

 



Ejemplos De Soluciones Para Mejorar El Diseño Web

website_design_guide_layout_by_dereck_mack_2.jpg

¿Cuáles son las soluciones y técnicas más eficientes que puedes utilizar para crear un diseño limpio y organizado? Descubre esta en guía preparada por Matt Cronin ocho técnicas de interfaces de usuario que incluyen una explicación de cómo usar cursores, divisores, diseños progresivos, redes estructuradas, ventanas modales, barras de desplazamiento y los megas menus desplegables.

por Matt Cronin - Smashing Magazine

 



Ejemplos De Excelentes Layouts Para Web Design

website_design_guide_id7210481.jpg

¿Cómo usas los grids, columnas y bloques para concibir y organizar un nuevo design de interfaz? Giselle Muller muestra una excelente gama de buenos ejemplos que puedes usar y consultar.

por Gisele Muller - Web Design Ledger

 



Jeet Design Do: La Fórmula Ninja Para Web Designers

Los puntos fundamentales. por trás de mi propia estrategia de web design en MasterNewMedia están en estas cuestiones principales. Fíjate cuáles son.

por Robin Good - MasterNewMedia




Créditos de las fotos:
Estrategias Para Prototipos De Websites - Helder Almeida
El Proceso Del Web Design: Del Borrador Al Prototipo - Marja Flick
Wireframing Y Prototipos Para Websites: Mejores Herramientas Para Diseñar Tu Sitio Web - WebDesigner Depot
Kits Para Interfaz De Usuario Y Web Design De Wireframes - Venus Worldwide
Qué Es Un Estándar De Web Design - Biblioteca de Estándares de Design Yahoo!
Por Que Necesitas Estándares De Web Design - Alastor
Cómo Elegir Un Template O Tema Eficiente - Robert Kneschke
Templates Para E-Commerce De Cualidad - Brian Morgan
Diez Principios Para Un Design Navegacional Eficiente - Liz Van Steenburgh
Ideas Para El Design De Menus De Navegación - Brian Jackson
Interface Design: Ejemplos Y Mejores Prácticas - Jefferson Han
Ejemplos De Excelentes Layouts De Web Design - James Steidl
Ejemplos De Soluciones Para El Layout Para Mejorar El Web Design - Derek Mack

 

Originalmente escrito por y publicado por primera vez en MasterNewMedia.

 

Robin Good e Elia Lombardi -
Referencia: MasterNewMedia [ Seguir leyendo ]
Si te gustó la nota puedes recibir actualizaciones suscribiéndote via RSS o via email.

O compartirla:
 
 
 
 
Comentar    
blog comments powered by Disqus
 


 

 

 

 

Creative Commons License
This work is licensed under a Creative Commons License.

 

16058


Curated by

Publisher MasterNewMedia.org - New media explorer - Communication designer
Web Analytics