Diseño de diseños de la interfaz de usuario web de Killer con regalos gratuitos - Guía definitiva

El campo del diseño web ha tomado un respiro en solo unos pocos años. Ahora hay más diseñadores activos en todo el mundo que nunca, todos colaborando en ideas de proyectos innovadores. Y los conceptos detrás de muchas de estas tendencias se han desarrollado a través de diseñadores gráficos profesionales..

Pueden pasar meses o incluso años antes de que entienda completamente los aspectos técnicos de la construcción de una interfaz de usuario. Debe tener en cuenta el tamaño y la ubicación de los elementos de la página, así como la legibilidad del texto y las etiquetas. Con un poco de tiempo libre, puede profundizar en un enfoque minimalista para crear sitios web con menos y reducir la confusión. E incluso entonces, hay docenas de otras técnicas de diseño para considerar también.

Para esta guía he emparejado algunos Técnicas modernas de diseño de interfaces de usuario. con regalos que puedes descargar y jugar con. Espero que esto ofrezca algo de motivación a aquellos interesados en una carrera en la creación de gráficos / diseño web. Incluso los diseñadores web profesionales pueden encontrar algunas de estas tendencias útiles para su próximo proyecto.

Practica con plantillas completas

Cuando tiene las habilidades para diseñar su propio diseño desde cero, no es necesario comenzar con las plantillas. Los principiantes, por otro lado, pueden sentirse más cómodos comenzando con un diseño completo y trabajando en los detalles más finos.

Hay excelentes descargas gratuitas de plantillas de sitios web de PSD completas para carteras, páginas de inicio, blogs y muchas otras categorías. Estos son los diseños perfectos para comenzar a familiarizarse con un “general” diseño web. Cada sitio web tendrá diferentes necesidades de elementos de página y tendrá que determinar qué elementos son importantes.

Aquí hay un ejemplo de PSD llamado "AppCivilization", diseñado por Martin Fabricius. El diseño se presenta para un estudio creativo que diseña aplicaciones móviles y posiblemente sitios web. Hacia la parte inferior encontrará un pequeño panel de iconos de aplicaciones que se muestran en una cartera. También notará que todo el diseño se divide horizontalmente en un encabezado, una presentación de diapositivas superior, contenido principal y pie de página oscuro..

Fuente original - Descargar

Diseñando Páginas De Aterrizaje

Veamos otro regalo de promoción también diseñado por Martin. El siguiente ejemplo es una página de destino que puede utilizar para vender cualquier tipo de productos. En general, se trata de productos digitales que pueden ser descargados por el usuario, es decir, aplicaciones, fotos, iconos, plantillas, etc..

Fuente original - Descargar

Pero la mejor parte de su diseño es que es muy flexible para los principiantes. El encabezado aún utiliza una navegación superior pequeña con una imagen grande, pero notablemente las acciones esperadas del usuario son diferentes. Tiene un gran “Cómpralo!” Botón que destaca justo encima del pliegue. En la página de destino de un producto, esto atraería más atención que una presentación de jQuery..

Otra gran técnica de UI es la pequeña función de iPhone que se muestra en la mitad de la página. Martin incluye una captura de vista previa del iPhone, el botón de la tienda de aplicaciones y una pequeña lista de características clave. Cuando los visitantes buscan detalles del producto, no puede hacer las cosas más simples que a través de una lista formateada.

Más plantillas:

Aquí hay un par de plantillas PSD gratuitas que lanzamos en el pase:

"BiZ" Plantillas de sitio web de negocios PSD
Plantilla PSD "ThinkJuice" del sitio del producto
Plantilla PSD profesional de sitio de negocios
Plantilla de PSD "Polo360" Portfolio Site

También te pueden interesar los siguientes:

Plantillas de sitios web de negocios
Página de "Próximamente" tutoriales + plantillas

Navegación del sitio principal

Los menús y botones son solo herramientas para crear elementos de página mucho más grandes. No se puede negar que la navegación principal de su sitio web tiene un propósito muy importante. Lo necesita para que su sitio sea fácilmente accesible con posibles métodos de respaldo para usuarios móviles.

A continuación se muestra una barra de navegación fresca con un efecto de textura de costura. El estilo de resaltado se puede presentar como un cuadro oscuro o como una punta hacia abajo que apunta al contenido de la página. Este estilo ha sido prominente a lo largo de los años y se ve muy bien en el ambiente correcto..

Fuente original - Descargar

Otro freebie similar es este encabezado con textura de navegación diseñado por Edi gil. Realmente me gusta cómo esta segunda barra de navegación incluye tanto una lista de enlaces como algunos botones de página adicionales. Querrá ofrecer enlaces secundarios a los visitantes donde puedan encontrar sus perfiles en la Web..

Fuente original - Descargar

Estilos de menú alternativos

Aparte de la barra de navegación horizontal típica, hay otros estilos de diseño a considerar. Los enlaces verticales se pueden dividir en diferentes subtítulos, lo que deja más espacio para el contenido de la página.

Tomemos, por ejemplo, el menú gratuito a continuación diseñado por el sitio web Icojam.

Cada encabezado está diseñado para expandirse y contraerse en función del objeto seleccionado. Además, el diseño permite que un pequeño contador de números se ubique en el lado derecho de cada categoría. Esto se completaría mejor como una navegación de blog para contar cuántas publicaciones se archivan en cada tema.

Fuente original - Descargar

Consejos de navegación / Tutoriales:

50+ Scripts de navegación basados en pestañas de CSS limpio
Principales prácticas y ejemplos de navegación de ruta de navegación
Construyendo Navegación Móvil con jQuery
Codificación Breadcrumb Navigation En CSS3
Diseñando Navegación Con MENOS CSS

Formularios web más limpios

La era moderna de Internet está lejos de ser un lugar de encuentro estático. Los usuarios están constantemente compartiendo información e interactuando entre sí diariamente. La mayor parte de este intercambio de texto y medios se gestiona a través de formularios web..

Deberíamos ver solo un par de ejemplos de cómo puede diseñar entradas y botones de formas de apariencia limpia. El diseño de sus elementos puede contribuir en gran medida a invitar a sus visitantes a que realmente los utilicen. Y esto, a su vez, construye la credibilidad de su sitio y obtiene más visitas de página..

Campos de inicio de sesión

Hay algunos ejemplos excelentes de formularios de inicio de sesión de PSD que puede consultar. Este inicio de sesión gratuito a través de WP Scientist tiene todos tus elementos standard Dos campos de entrada para inicio de sesión / contraseña, un botón de envío y casillas de verificación para administrar las cookies de sesión.

Este modelo de diseño es perfecto si puedes implementar los efectos a través de jQuery. La punta de flecha superior derecha te hace pensar en una configuración de ventana de estilo emergente. Esta es una técnica maravillosa para ahorrar espacio en su sitio web manteniendo el formulario oculto hasta que un usuario haga clic en el enlace de registro.

Fuente original - Descargar

El formulario de abajo es gratuito para descargar gracias al diseñador. Gil huybrecht. Utilizó un patrón similar con un fondo granulado y textura de papel. Lo que más me gusta del diseño de Gil son los elementos "sobredimensionados". Es mucho más amigable aterrizar en un formulario de inicio de sesión que llena toda la página. Los usuarios pueden ver fácilmente lo que están escribiendo y hay menos desorden.

Fuente original - Descargar

Si tiene experiencia como desarrollador frontend usando CSS3, es muy fácil traducir este gráfico en código. Incluso puede implementar el efecto de brillo externo seleccionado y las esquinas redondeadas para el botón y los campos de entrada.

Contactos

Otro formulario que encontrará en prácticamente todos los sitios web es un formulario de contacto. Esto normalmente incluirá campos para el nombre del remitente, el correo electrónico y el contenido del mensaje..

El siguiente obsequio es un ejemplo asombroso del uso de texturas e íconos personalizados..

El diseño también utiliza. texto del marcador En lugar de etiquetas. Esto significa que cuando el formulario se carga por primera vez, cada campo se configura con un valor predeterminado (por ejemplo, su nombre). Pero luego, a medida que comienza a escribir, el marcador de posición se borra y su contenido se muestra en su lugar. Todos los navegadores compatibles con los estándares admitirán este efecto y pueden ahorrarle algo de espacio en la página.

Fuente original - Descargar

Otro obsequio maravilloso para tomar es este formulario de contacto con pestañas diseñado por el talentoso Jonno Riekwel. Este diseño es mucho más simple y tiene etiquetas de características sobre cada entrada. Esta es una gran solución para empresas grandes o empresas nuevas que necesitan enviar mensajes a través de diferentes departamentos de la empresa..

Fuente original - Descargar

Formularios de contacto tutoriales:

Formulario de ingreso / registro: Ideas y hermosos ejemplos
Crear un formulario de inicio de sesión de efecto de papel apilado
Crear un formulario de contacto HTML5 / CSS3 basado en Ajax

Cintas y Banners

Hace solo 6 o 7 años, las esquinas redondeadas comenzaban a aumentar en las tendencias de diseño popular. Ahora hemos llegado aún más lejos con sombras y cintas de esquina..

Fuente original - Descargar

Algunos de estos elementos se pueden usar como puntos destacados del diseño, como un contador de comentarios o como una fecha de publicación de un blog. La cinta cosida de arriba es perfecta para portafolios o páginas de proyectos donde desea captar la atención de sus visitantes. También puedes probar una cinta vertical similar donde el diseño cae desde la parte superior.

Estos pequeños efectos de página hacen mucho para mejorar su diseño. Los visitantes toman nota y les encantarán estas bromas estéticas. Pero tenga en cuenta que las pequeñas cintas de esquina son solo una parte de esta tendencia de diseño.

Fuente original - Descargar

Además, los diseños de banners completos se han vuelto increíblemente populares para desarrollar el reconocimiento de marca. Puede utilizarlos en su logotipo, navegación, página de inicio o incluso en publicaciones de blogs destacados. Las implicaciones son prácticamente ilimitadas con buenas capacidades de diseño..

Envolviendo la esquina

Otro efecto de banner de cinta muy específico se realiza envolviendo el diseño alrededor de la esquina de la página. Esto crea la ilusión de que su página sea tridimensional y la cinta se enrolla alrededor de la parte superior de su sitio web.

El diseño a continuación es 100% gratuito para descargar y puede usarse para sus propias ideas de proyectos. Puede ver cómo esto atraería la atención de los visitantes y por qué esta tendencia se ha convertido en un frenesí. Tenga cuidado de no abusar de las pancartas. A granel, estos pueden volverse muy molestos, como los efectos brillantes / duplicados más antiguos de la "web 2.0".

Fuente original - Descargar

Diseñar con botones

Aparte de los hipervínculos, obtendrá la mayor interacción de los visitantes con los botones. Estos elementos de la página pueden realizar cualquier cosa con la ayuda de las llamadas jQuery y Ajax, excepto que también puede usar botones para enlazar a contenido estático, como las descargas gratuitas, por ejemplo.!

El kit de interfaz de usuario a continuación, diseñado por Matt Gentile Tiene mucho más que solo botones. Su set de PSD es fantástico para los principiantes que buscan gradientes y texturas para construir formas similares. Muchas veces encontrará botones de mayor calidad en los kits de UI que con PSD singulares.

Fuente original - Descargar

Cómo crear variaciones

A medida que pase el tiempo practicando estas técnicas, querrá crear muchos estilos diferentes a lo largo del tiempo. Esto puede resultar en el cambio de botones similares entre diferentes proyectos y diseños. Un buen ejemplo es el conjunto de botones lácteos que ofrece el diseñador. Robert van Klinken.

Fuente original - Descargar

Cada uno de los tres botones originales tiene un estilo de degradado diferente, excepto los estados activo y activo que se ven similares. Cuando trabaje en Photoshop, deberá hacer coincidir los colores entre los gradientes o mover los colores a una capa de efectos. Con este entendimiento, usted podría incluso construir su propio conjunto de botones para descargar!

Fuente original - Descargar

Madera + Texturas de papel

Cuando necesite mejorar sus diseños de diseño básicos, tendrá que avanzar hacia métodos más astutos. Las texturas siempre son bienvenidas si puede implementarlas correctamente a través de fondos CSS o contenido de ancho de conjunto. Y dos de las texturas más populares que he visto son madera y papeles en blanco..

La idea del bloc de notas es realmente simple, pero puede convertirse en un diseño de marca atractivo, ya sea como parte de un elemento de interfaz de usuario o integrado en la totalidad de su diseño. Pero el papel no siempre se ve mejor por sí solo, y otra textura puede ayudar a que los estilos se mezclen. Aquí es donde pueden entrar en juego texturas más detalladas de la madera..

Fuente original - Descargar

Las imágenes se destacarán y se verán maravillosas envueltas en una cubierta exterior. Todo el concepto de textura es darle a tu sitio web una sensación o emoción específica. Los temas de madera pueden evocar un sentido de hogar y naturaleza. Incluso hay un increíble kit de interfaz de usuario web de madera para descargar por Jeremiah Wingett. Si se siente creativo, intente armar algunas de sus propias texturas y vea cómo se comportan en un entorno basado en la web..

28 texturas de madera de alta resolución

Conclusión

Los mejores diseñadores web son los que practican diariamente y nunca dejan que sus fracasos disuadan de sus objetivos finales. Debe ser receptivo y recuperarse rápidamente tanto del éxito como de los intentos fallidos. Los consejos y regalos de esta guía deberían ser un buen punto de partida para comenzar a aprender cómo crear diferentes conceptos de página para un proyecto web. Y nos gustaría leer sus pensamientos sobre el tema en el área de discusión posterior..