Ejemplos de integración de los enlaces de social media en tu sitio web.

21 nov 2011

• Blog

Escrito por: Cristina García comentarios

A la hora de diseñar una web es importante tener en cuenta cómo vamos a integrar los enlaces a los perfiles sociales. El diseño, la posición en el flujo de contenidos y en la estructura de la web serán fundamentales para conseguir la participación de los usuarios.

En este post he seleccionado algunos ejemplos donde la integración de los enlaces sociales se lleva a cabo de una manera eficaz, adaptados al diseño e integrados de una forma inteligente y creativa.

Forefathers group

Una compañía de diseño con una web estilo vintage. Tipografías elegantes, ilustraciones detalladas y una gran variedad de texturas ayudan a lograr ese efecto retro. Los iconos texturizados del footer se adaptan a la perfección con el resto del diseño.

http://forefathersgroup.com/

Sonny Tulyaganov

La página del diseñador y desarrollador neoyorquino Sonny Tulyaganov es una web limpia y sencilla con una home minimalista donde los enlaces a facebook y twitter forman parte del diseño.

http://www.sonnyt.com/

Tower

Tower es un poderoso cliente de escritorio de Git. Los iconos están maquetados en la parte derecha de la web. Gracias a la propiedad de css fixed, los enlaces se posicionan respecto a la ventana del navegador, por lo que se quedan fijos e independientes del scroll.

http://www.git-tower.com/

Riser media

Riser es un equipo de creativos con una web en la que muestran el portfolio de trabajos al estilo “Magazine” Incluyen los enlaces en el menú de navegación del header como un sencillo vínculo tipográfico.

http://www.risermedia.com/

Doodle Pad

Es una página que conecta a diseñadores y clientes. En el footer encontramos el pájaro de Twitter dibujado a mano. Así demuestran sus habilidades creativas de una manera original y divertida.

http://www.doodlepad.co.za/

SWE projects

Utiliza unos enlaces prácticos y ordenados en el footer. Los enlaces tienen un diseño sutil y sencillo integrádose muy bien con el resto de la página.

http://www.swe.se/

Work at Play

Es la web de una agencia digital canadiense. Los perfiles sociales se presentan en el footer como una atractiva combinación de color, forma y tipografía. El color fucsia vibra, brilla y destaca del blanco y el negro del resto de la web.

http://www.workatplay.com/

Luxus

Es una agencia digital con sede en Helsinki. Una web muy limpia con un slide de imágenes muy potente a nivel gráfico y de contenidos. Los enlaces de twitter, facebook y vimeo en color blanco se sitúan en la misma línea de la llamada “follow us” dentro de una pastilla azul corporativo.

http://luxus.fi/

Matthew Byrne

El músico Matthew Byrne hace uso de la fotografía a pantalla completa de fondo. Haciendo scroll nos encontramos los iconos de las redes sociales en blanco sobre fondo negro.

http://matthewbyrne.net/

Carsonified

Una de las cosas que admiro como diseñadora es la tipografía. Esta web está basada en la tipografia Cooper, una tipografía que vuelve a estar de moda a pesar de sus 90 años. Por supuesto el “follow us on twitter” está diseñado con esta tipografía de curvas sofisticadas.

http://carsonified.com/

Zach Klein

Zach Klein, co-fundador y diseñador de vimeo, tiene una web de página única cuyo principio es la simplicidad y la rapidez informativa. Todo el contenido de la web se muestra a primera vista, resalta en color las diferentes las palabras destacadas, entre ellas los enlaces a sus diferentes perfiles sociales.

http://www.zachklein.com/

My name is Jarad Johnson

Este es otro modelo de página única. Haciendo scroll nos encontramos con los iconos sociales diseñados con la misma combinación de colores que el resto de la web y seguidos de una claim divertido y muy creativo.

http://www.jaradjohnson.com/

Nike Better World

Una nueva tendencia en el diseño web es la profundidad. Nike consigue el efecto con sombras, parallax scrolling y superposición de elementos. Todos los elementos de la página se mueven y se desplazan con el scroll, excepto los enlaces de la redes sociales, dos pequeños botones en blanco y negro sencillos y elegantes, que destacan en la esquina inferior derecha ya que son los únicos que permanecen estáticos.

http://www.nikebetterworld.com/

Head2heart

Otro ejeplo de parallax scrolling es head2heart una web dibujada íntegramente a mano que se sale de los esquemas gráficos predefinidos y los elementos repetitivos. Podemos ver en la cabecera los logotipos de facebook y twitter como ilustraciones tipo scketch.

http://www.head2heart.us/

Joshua Sortino

la web del desarrollador Joshua Sortino consigue mediante una combiación de colores desteñidos, tipografías al más estilo años 60 (honey) e iconos estilos vintage un aspecto retro.

http://joshuasortino.com/

Youzee

La página de Youzee ha diseñado unos botones especiales para los marcadores de twitter y facebook que combinan el enlace a la red social junto al widget “tweet” y “like”.

http://youzee.com/

Design Deck

Una forma muy habitual de integrar los perfiles sociales es como hacen en Design Deck. De una forma sencilla y eficaz integran los iconos en la barra lateral, mediante tooltip muestran la acción de cada uno de los botones.

http://www.designdeck.co.uk/

A continuación os propongo una seleccion de iconos que pueden ser muy útlies a la hora de empezar con el diseño de una web.

Social Essential

http://www.fasticon.com/freeware/

Somacro

http://veodesign.com/2011/en/11/08/somacro-27-free-big-and-simple-social-media-icons/

Mini social icons

http://www.designdeck.co.uk/iPad/article_details.php?id=1239

Helveticons

https://helveticons.appspot.com/goodies/

Sketchy

http://buildinternet.com/2010/07/sketchy-social-media-icons-freebie/

Charms

http://www.micronicon.com/2009/10/02/icons/new-icon-pack-social-charms-pack-2

HTML + css Icons

http://designmoo.com/5368/html-css3-icons/

Glyphs by GSIX

http://designmoo.com/4424/glyphs-by-gsix/

Dark

http://emrah-demirag.deviantart.com/art/2011-New-Social-Media-Icon-Pack-psd-267293021?q=boost%3Apopular%20Social%20media&qo=8

Draw

http://plechi.deviantart.com/art/Social-media-icons-118416641

Sweet frames

http://designmoo.com/3637/sweet-frames/

Socialis (pixel perfect)

http://www.designkindle.com/2011/10/27/socialis/

Fast icon

http://www.iconfinder.com/search/?q=iconset%3Aweb2

Google Plus icon

http://www.seriftuts.com/free-resources/google-plus-icon-set-png/

También podemos descargar los logotipos de las redes sociales en formato vectorial para poder trabajar con ellos y customizarlos a nuestro antojo.

Logo twitter
Logo facebook
Logo youtube
Logo vimeo
Logo flickr
Logo google plus
Logo linkedin