Category Archives: Diseño Web

3 elementos esenciales del diseño web

Cualquier desarrollo web necesita del diseño para tener éxito y existen tres elementos de la creatividad visual que son esenciales dentro de este propósito.

1.- Tipografía
Aunque la imagen, el audio y otros elementos multimedia pueden ser lo más llamativo en cualquier red social, blog o tienda online, sin el texto no será posible cumplir procesos necesarios ni existirá un entendimiento de los contenidos ahí expuestos. Para lograr buen entendimiento y una lectura fluida, evita utilizar más de dos fuentes tipográficas. Recuerda también que en web es innecesario utilizar serifas y que el tamaño de la fuente debe ser legible y no debe saturar todo lo se ve en pantalla.

2.- Color
La selección de la paleta de colores para un portal en internet depende del objetivo y temática del sitio. Recursos como el contraste y la teoría del color resultan preponderantes para que la página tenga una apariencia que invite al lector a entrar y lo haga permanecer en la dirección web. Como consejo adicional te decimos que no busques saturar de color el portal o el lector se confundirá.

3.- Arquitectura de la información
Debes determinar cuál es el público que predominantemente va a utilizar el sitio, de sus hábitos de navegación va a depender la estructura que debe tener el portal. No todos leen igual, no todos buscan los mismo y la temática central y los objetivos de la página deben influenciar directamente el modo en que se organice todo visualmente; fotografías, imágenes, botones, ligas, texto, etcétera.

shutterstock_260665868-e1445863518443

Colección de 50 “shortcuts” para diseñadores

50 imagenes “shortcuts” para diseñadores que ayudarán a acelerar su trabajo y hacer las cosas mucho más rápidamente. El acceso a los atajos de los olvidados, los principios de diseño, consejos, listas de verificación, y más puede ser sólo un escritorio de distancia. Un recurso cheatsheet integral que usted puede dar vuelta a una y otra vez …
Algunas veces cuando estás ocupado con varios proyectos de diseño o de desarrollo, hay mucho que pensar que usted tiende a olvidó varias cosas que normalmente parecen obvias. Su mente está tan atestado. En tiempos como estos, hojas de trucos pueden ayudar mucho.
Sin embargo, el problema con la mayoría de las hojas de trucos es que están en formato PDF, y tendrás que andar a tientas, buscando la carpeta del ordenador que los está sosteniendo, abrirlos, y desplazarse a través de ellos para encontrar lo que quieres. O eso, o imprimirlos y sentarse en ellos.
Esto puede ser un inconveniente, ya menudo puede ser una pérdida de tiempo.
Si usted quiere una manera más rápida para acceder a la información importante en sus hojas de trucos, considere convertirlos en fondos de escritorio en su lugar. Entonces van a estar a sólo un clic de distancia. Pero si usted no tiene tiempo para hacer su propio, sin embargo, considerar el uso de estos preparados.
He aquí una muestra de 50 fondos de pantalla de hoja de trucos para los diseñadores que le ayudarán a optimizar sus trabajos y hacer las cosas mucho más rápido …

Adobe Flash Cheat Sheet Wallpapers

Adobe Flash Shortcuts Cheat Sheet Wallpaper

(#1. Adobe Flash Shortcuts Cheat Sheet Wallpaper)

Adobe Illustrator Cheat Sheet Wallpapers

Adobe Illustrator Shortcuts Cheat Sheet Wallpaper

(#2. Adobe Illustrator Shortcuts Cheat Sheet Wallpaper)

Adobe inDesign Cheat Sheet Wallpapers

Adobe inDesign Shortcuts Cheat Sheet Wallpaper

(#3. Adobe inDesign Shortcuts Cheat Sheet Wallpaper)

Adobe Lightroom Cheat Sheet Wallpapers

Adobe Lightroom Cheat Sheet Wallpapers

(#4. Adobe Lightroom Cheat Sheet Wallpaper)

Adobe Photoshop Cheat Sheet Wallpapers

White Adobe Photoshop Cheat Sheet Wallpaper

(#5. White Adobe Photoshop Cheat Sheet Wallpaper)

Adobe Photoshop Shortcuts Cheat Sheet Wallpaper

(#6. Adobe Photoshop Shortcuts Cheat Sheet Wallpaper)

Photoshop Shortcuts CheatSheet Wallpaper

(#7. Photoshop Shortcuts Cheatsheet Wallpaper)

Apple Cheat Sheet Wallpapers

Apple Aperture Shortcuts Cheat Sheet Wallpaper

(#8. Apple Aperture Shortcuts Cheat Sheet Wallpaper)

CSS Cheat Sheet Wallpapers

CSS Cheat Sheet Wallpaper

(#9. CSS Cheat Sheet Wallpaper)

Design Theory Cheat Sheet Wallpapers

Color Theory Cheat Sheet Wallpaper

(#10. Color Theory Cheat Sheet Wallpaper)

Color Theory Reference Cheat Sheet Wallpaper

(#11. Color Theory Reference Cheat Sheet Wallpaper)

Elements of Design Cheatsheet Wallpaper

(#12. Elements of Design Cheatsheet Wallpaper)

Elements of Design Cheatsheet Wallpaper 2

(#13. Elements of Design Cheatsheet Wallpaper 2)

Drupal Cheat Sheet Wallpapers

Drupal 7 Cheat Sheet Desktop Wallpaper

(#14. Drupal 7 Cheat Sheet Desktop Wallpaper)

Drupal Cheat Sheet Wallpaper

(#15. Drupal Cheat Sheet Wallpaper)

HTML Cheat Sheet Wallpapers

HTML5 Cheat Sheet Wallpaper

(#16. HTML5 Cheat Sheet Wallpaper)

HTML 5 Canvas Cheat Sheet Wallpaper

(#17. HTML 5 Canvas Cheat Sheet Wallpaper)

HTML5 Reference Tags Cheat Sheet Wallpaper

(#18. HTML5 Reference Tags Cheat Sheet Wallpaper)

Basic HTML Coding Cheat Sheet Wallpaper

(#19. Basic HTML Coding Cheat Sheet Wallpaper)

jQuery Cheat Sheet Wallpapers

jQuery Cheat Sheet Wallpaper

(#20. jQuery Cheat Sheet Wallpaper)

jQuery 1.3 Cheat Sheet Wallpaper

(21. jQuery 1.3 Cheat Sheet Wallpaper)

jQuery Performance Tips Wallpaper Cheat Sheet

(#22. jQuery Performance Tips Wallpaper Cheat Sheet)

jQuery 1.2 Cheatsheet Wallpaper

(#23. jQuery 1.2 Cheatsheet Wallpaper)

jQuery 1.2 Wallpaper Cheatsheet

(#24. jQuery 1.2 Wallpaper Cheatsheet)

jQuery 1.4 Cheatsheet Wallpaper

(#25. jQuery 1.4 Cheatsheet Wallpaper)

Linux Cheat Sheet Wallpapers

Linux Commands Cheat Sheet Wallpaper

(#26. Linux Commands Cheat Sheet Wallpaper)

PHP Cheat Sheet Wallpapers

PHP Background Cheat Sheet Wallpaper

(#27. PHP Background Cheat Sheet Wallpaper)

Kumbia PHP Spirit 1.0

(#28. Kumbia PHP Spirit 1.0)

Manialib PHP Framework Cheat Sheet Wallpaper

(#29. Manialib PHP Framework Cheat Sheet Wallpaper)

Prototype Javascript Cheat Sheet Wallpapers

Prototype Javascript 1.5.0 Cheat Sheet Wallpaper

(#30. Prototype Javascript 1.5.0 Cheat Sheet Wallpaper)

SEO Cheat Sheet Wallpapers

SEO Basics Checklist Cheatsheet Wallpaper

(#31. SEO Basics Checklist Cheatsheet Wallpaper)

TextMate Cheat Sheet Wallpapers

TextMate Shortcuts Cheat Sheet Wallpaper

(#32. TextMate Shortcuts Cheat Sheet Wallpaper)

Text Mate Shortcuts Cheat Sheet Wallpaper

(#33. Text Mate Shortcuts Cheat Sheet Wallpaper)

Typography Cheat Sheet Wallpapers

Periodic Table of Typefaces Cheatsheet Wallpaper

(#34. Periodic Table of Typefaces Cheatsheet Wallpaper)

Font Anatomy Cheat Sheet Wallpaper

(#35. Font Anatomy Cheat Sheet Wallpaper)

Typeface Decision Chart Cheat Sheet Wallpaper

(#36. Typeface Decision Chart Cheat Sheet Wallpaper)

Ubuntu Cheat Sheet Wallpapers

Ubuntu Natty Cheat Sheet Wallpaper

(#37. Ubuntu Natty Cheat Sheet Wallpaper)

Unity Shortcuts Wallpaper Cheat Sheet

(#38. Unity Shortcuts Wallpaper Cheat Sheet)

Ubuntu Commands Cheat Sheet Wallpaper

(#39. Ubuntu Commands Cheat Sheet Wallpaper)

Vim Cheat Sheet Wallpapers

Horizon Vim Movement Commands Cheat Sheet Wallpaper

(#40. Horizon Vim Movement Commands Cheat Sheet Wallpaper)

Blue Vim Movement Commands Cheat Sheet Wallpaper

(#41. Blue Vim Movement Commands Cheat Sheet Wallpaper)

Vim Movement Commands Cheat Sheet Wallpaper

(#42. Vim Movement Commands Cheat Sheet Wallpaper)

Vi and VIM Graphical Help Sheet Wallpaper

(#43. Vi and VIM Graphical Help Sheet Wallpaper)

Web Design Cheat Sheet Wallpapers

Web Content Accesibility Cheat Sheet Wallpaper

(#44. Web Content Accesibility Cheat Sheet Wallpaper)

Web Design Themer's Cheatsheet Wallpaper

(#45. Web Design Themer’s Cheatsheet Wallpaper)

Yahoo UI Cheat Sheet Wallpapers

(#46. Yahoo UI Cheat Sheet Wallpapers)

Screen Resolutions Cheat Sheet Wallpaper

(#47. Screen Resolutions Cheat Sheet Wallpaper)

WordPress Cheat Sheet Wallpapers

Wordpress Plugin API Cheat Sheet Wallpaper

(#48. WordPress Plugin API Cheat Sheet Wallpaper)

Wordpress Help Sheet Wallpaper

(#49. WordPress Help Sheet Wallpaper)

Wordpress Cheat Sheet Wallpaper

(#50. WordPress Cheat Sheet Wallpaper)

50 Tutoriales de Illustrator que todo diseñador debe ver

Adobe Illustrator puede ser un poco difícil de entender a primera vista, sobre todo después de acostumbrarse al flujo de trabajo de aplicaciones como Photoshop. Las diferencias entre el uso de la capa y la creación de objetos y formas pueden ser realmente extraño en un inicio. Por suerte hay una variedad de ayuda disponible de forma gratuita en línea en forma de tutoriales. Aquí está una colección de artículos seleccionados a mano de varios sitios que todo diseñador debe ver, si usted es un principiante o un usuario avanzado, habrá algo aquí para usted!

 

Vector Tracing a Photo

Illustrator tutorial

Create the Photoshop CS2 Splash Graphic

Illustrator tutorial

Illustrating a Summer Field Landscape

Illustrator tutorial

How to Turn Glasses into a Great Geek Icon

Illustrator tutorial

Create a Vector Film Slate Icon

Illustrator tutorial

A Guide to Illustrator’s Paintbrush Tool and Brush Panel

Illustrator tutorial

A Guide to Illustrator’s Blend Tool

Illustrator tutorial

How to Create a Cute Bunny Vector Character

Illustrator tutorial

Design with Swirls and Flourishes

Illustrator tutorial

Swirl Mania in Illustrator and Photoshop

Illustrator tutorial

Designing a Sleek Pencil Icon

Illustrator tutorial

Illustrator Watercolour Brush Tutorial

Illustrator tutorial

Creating a Vector Folder Icon

Illustrator tutorial

Adobe Illustrator Cartoon Snail Tutorial

Illustrator tutorial

Creating Vector Graphic Circles

Illustrator tutorial

How to Make a Map in Illustrator

Illustrator tutorial

Creating Convincing Characters

Illustrator tutorial

Creating a Crazy Cool Logo

Illustrator tutorial

Draw Your Own Vector Self Portrait

Illustrator tutorial

Create a Vector Cartoon Character

Illustrator tutorial

Guide to Illustrator’s Pen Tool

Illustrator tutorial

From Sketch to Vector Illustration

Illustrator tutorial

Create the Design Float Circle Icon

Illustrator tutorial

Illustrator 101 – Opacity Masks

Illustrator tutorial

Create a Vector Home Cinema Design

Illustrator tutorial

Creating a ribbon in Adobe Illustrator

Illustrator tutorial

Recreate the Obama Logo in Illustrator

Illustrator tutorial

Create the Perfect Diamond in Illustrator

Illustrator tutorial

Old School Type with Line Gradients

Illustrator tutorial

Simple organic shapes the Illustrator way

Illustrator tutorial

Learn Illustrator CS3 in 30 Days

Illustrator tutorial

Creating a Friendly Green Type Treatment

Illustrator tutorial

Blueprint-Style Text in Adobe Illustrator

Illustrator tutorial

Building a Website Wireframe in Illustrator

Illustrator tutorial

Create an envelpe icon with a satin feel

Illustrator tutorial

How to Create Anatomy Illustrations in Illustrator

Illustrator tutorial

Illustration 4 Pt Series – From Sketch to Finish

Illustrator tutorial

Create Sketchy-Style Vectors

Illustrator tutorial

Create Vector Japanese Style Tattoos

Illustrator tutorial

Create a Tasty Skate Deck Graphic

Illustrator tutorial

Just in case you didn’t know, I also have a collection of Illustrator tutorials right here on Blog.SpoonGraphics, to finish off the last 10 here’s some shameless self promotion of Illustrator turorials of my very own!

Create a Vector RSS Icon with Illustrator

Illustrator tutorial

Create a Vector Pirate Cartoon Character

Illustrator tutorial

Vector Monster Character Illustrator Tutorial

Illustrator tutorial

Create a Colourful Abstract Wavy Ribbon

Illustrator tutorial

Translucent IM Style Illustrator Icon Tutorial

Illustrator tutorial

Create Your Own Spoof Airplane Safety Illustrations

Illustrator tutorial

How to Create a Vector iMac Graphic in Illustrator

Illustrator tutorial

How to Create a Vector Safari Compass in Illustrator

Illustrator tutorial

Illustrator Tutorial – Create a Blissful Vector Scene

Illustrator tutorial

Create a Themed Repeating Pattern in Illustrator

Illustrator tutorial

  • 38
    Share

6 maneras fáciles para crear una jerarquía tipográfica efectiva

Creación de una jerarquía tipográfica fuerte es crucial para el éxito de cualquier diseño dinámico. Es la diferencia entre compartir eficazmente un mensaje importante y poniendo una carretera-bloque de texto sin sentido delante de sus lectores.

Si usted puede aprender a utilizar las principales señales visuales tales como tipo de letra, color y espacio en blanco para organizar los elementos de texto, podrás virtualmente garantiza el énfasis adecuado para su contenido y crear el enfoque que lo más importante en su mensaje.

1. Limite sus tipografías

No utilice demasiados. Tenga en cuenta que el objetivo de la creación de la jerarquía es la claridad. El uso de dos tipos de letra para un diseño es un estándar de seguridad. ¿Por qué?A menos que se hace con cuidado, combinando más de dos tipos de letra puede tener un efecto de distracción y desordenado. Una fuente interesante siempre combina bien con una fuente y un neutro para los títulos y otro para el cuerpo. Lanzando otro en la mezcla podría deshacerse de las señales visuales que conducen el ojo a través del diseño.

fontpairings

 

2) Complementar y contraste

Emparejar remates y sans-serif es un principio omnipresente del diseño. Esto se debe a los remates complejos, interesantes y, a menudo elegantes encajan bien con las claras y sencillas sans serif, creando jerarquía sin esfuerzo, sin causar tensión. Utilice una de las rúbricas y uno para copia más pequeña. Tenga cuidado si usted decide emparejar dos remates o dos sans serif – tipos de letra de la misma clasificación por lo general terminan en el limbo entre complementar y contrastar. No se incline demasiado hacia el contrario, debido a la elección de dos fuentes con personalidades vívidas puede ser una distracción.

contrastar

 

3) Sea consciente de tono

No siempre es suficiente para emparejar un serif y sans-serif juntas. Tienen que lograr el mismo objetivo. Evite el emparejamiento de un serif seria con una sans serif juguetón, o un trazo de pie decorativa con una sans serif rígidos. Pregúntate a ti mismo lo que la personalidad de cada tipo de letra transmite en el contexto de su trabajo, y si esa personalidad está de acuerdo con su mensaje general.

 

4) Emplear apresto estratégico

Cuando se trata de escribir, es la supervivencia del más grande y más audaz. Si su punto principal es del mismo tamaño que el cuerpo del texto o está rodeado de otros elementos grandes y audaces, los espectadores probablemente se mueven antes de captarlo. Para embalar realmente un golpe con su punto principal, hacer la diferencia entre ésta y la copia que rodea drástica. Elija un tipo de letra con el peso para dar realmente su prioridad la información clave.

Debido a que las fuentes escala diferente y dimensionamiento puede ser complicado, desea tener cuidado con la ampliación o minimizar ciertas fuentes. Por ejemplo, minimizando una tipografía pantalla decorativa como Sediento Guión  será, en un punto, que sea difícil de leer y poco profesional en apariencia. Sin embargo, puede utilizar algunas fuentes del cuerpo en los titulares elegantes. Por ejemplo, Abrir Sans  es una excelente opción copia de cuerpo, pero puede funcionar bien para un titular si es ligero o Extra Bold.

dimensionamiento

 

5) Colores de contraste

El color puede ser utilizado tanto para clasificar la información y añadir personalidad.

Pero el toque de color hace más que decirle a su espectador dónde buscar – que influye en su percepción emocional. Colores están asociadas a las emociones, y se asocian tradicionalmente con diferentes cualidades. Implicación es un aspecto de la jerarquía visual.Mediante el uso de las rosas fuertes, usted está transmitiendo un tono junto con su mensaje de que el espectador puede percibir como juguetón, descarado, sensual e intenso. Usted puede utilizar el color para mejorar el estado de ánimo que la copia y la tipografía ya transmiten, o se puede utilizar para dar un nuevo significado a los elementos. Considere la posibilidad de no sólo el tipo, pero el color de fondo y los colores de otros elementos, así.

de color

 

6) Observe el espacio en blanco

Otro aspecto de dar un mensaje a su debido énfasis está utilizando el espacio en blanco – el espacio entre el texto. Un diseño repleto de ocupados texy no es probable que tenga una jerarquía clara, incluso si sigue el resto de estas reglas. La mayoría de la gente ni siquiera se toman la molestia de leerlo. Usted debe dar suficiente espacio para los elementos de modo que sean más fáciles de analizar de forma individual y el diseño en general se ve limpio.

El uso de los espacios en blanco no significa que su contenido tiene que ser escasa o simple.Significa tomar la mejor ventaja del espacio que está dado y usarlo sabiamente. El uso adecuado de los espacios en blanco le permitirá encajar la cantidad necesaria de contenido al tiempo que ayuda al espectador a localizar el punto focal de su diseño. El espacio en blanco es más que espacio vacío – es una señal de que juega un papel importante en la creación de la jerarquía visual.

espacio de pantalla
 vía: webdesignerdepot.com