Cómo personalizar tu página de perfil en Twitter

Tu página de perfil de Twitter es el único lugar en que tienes la oportunidad de mostrar tu marca visual y comunicar aquella información adicional que puede durar más que un tweet.

Si has decidido crear tu cuenta en Twitter, te resultará muy útil tener en cuenta las siguientes técnicas y consejos que otros diseñadores han desarrollado para crear páginas Twitter verdaderamente bonitas y sorprendentes.

Tips y técnicas básicas

La cosa más importante a notar es que el bloque de contenido principal en el diseño de una página de Twitter posee el ancho fijo de 765 pixeles, y siempre se encuentra centrado. Esto es bueno, porque hace posible que puedas mostrar tu imagen de fondo utilizando el espacio extra creado en ambos lados del bloque cuando se utilizan resoluciones superiores.

116

216

Otras cosas que deberías tener presente:

  • El fondo del timeline es siempre blanco
  • El fondo de la barra de menú es siempre blanco
  • El fondo de la barra de pie de página es siempre blanco
  • El logo es siempre el de Twitter
  • La imagen se puede cambiar
  • Puedes cambiar el color de texto, de los links, el fondo de la sidebar y el color del borde de la sidebar
  • Puedes cambiar la imagen y el color de fondo
  • La posición de comienzo de la imagen de fondo es siempre la esquina superior izquierda

Nota que si estás verdaderamente interesado solamente en crear una linda página de perfil, puedes hacer esto fácilmente incorporando alguna imagen de fondo impactante y personalizando los colores del texto, links y la sidebar. Pero si tus intenciones son ser completamente único, incoporar la identidad de tu marca y comunicar información adicional, necesitarás ser un poco más creativo con tu imagen de fondo.

A continuación te dejamos la lista con los consejos que pueden incorporar en sus propios fondos. Ten presente que las mejores páginas de perfil por lo general utilizan varias de estas técnicas combinadas.

Combina el fondo con la Sidebar

Esta es probablemente la técnica menos utilizada entre todos los tips que aquí proponemos. Al combinar los gráficos de tu fondo con una línea de tiempo o la barra lateral, puedes crear un diseño único con un look muy distintivo.

@adamplitt

36

45

Haz clic aquí para ingresar en@adamplitt

@gaksdesigns

55

64

Haz clic aquí para ingresar en el perfil de Twitter de @gaksdesigns »

Mezcla el patrón mosaico (Tiled) con otros gráficos

Twitter te permite incorporar una imagen de fondo que esté “tiled” (mosaico) o no. Pero tú puedes crear una sensación única al generar una página de perfil que posea ambas.

@spurrachel

75

83

Haz clic aquí para ingresar en el perfil de Twitter de @spurrachel »

Revela más con tus imágenes

Tu imagen de perfil es tu identificador principal en Twitter; se mostrará al lado de cada tweet que mandes a tus seguidores. Por ejemplo, puedes usar una imagen de fondo que esté de cierta forma relacionada con tu imagen de perfil.

@Doubleolee

93

102

Haz clic aquí para ingresar en el perfil de Twitter de @Doubleolee »

@mailchimp

112

122

Haz clic aquí para ingresar en el perfil de Twitter de @mailchimp »

Revela más con el efecto de “pasar de página”

Si posees una identidad visual establecida, puedes usar el efecto page peel para mostrarle a los usuarios quién está realmente debajo del perfil Twitter. Esta técnica te da la posibilidad de diseñar el resto del fondo de la forma en que más gustes, porque ya no deberás preocuparte por integrar marcas visuales y sus colores.

@sitepointdotcom

132

141

Haz clic aquí para ingresar en el perfil de Twitter de @sitepointdotcom »

@benek

151

161

Haz clic aquí para ingresar en el perfil de Twitter de @benek »

Añade en tu perfil una Sidebar personalizada

Los siguientes perfiles ilustran un eso específico de la primera técnica añadiendo sidebars en el diseño. Puedes añadir tantos paneles como desees para resaltar la información adicional que deseas comunicar.

@aaronmillerillz

17

18

Haz clic aquí para ingresar en el perfil de Twitter de @aaronmillerillz »

@robingood

19

20

Haz clic aquí para ingresar en el perfil de Twitter de @robingood »

@sickbrain

211

221

Haz clic aquí para ingresar en el perfil de Twitter de @sickbrain »

Muéstrate a ti mismo

En el mundo de las redes sociales, tu eres la marca. Con Twitter, ser uno de los mejores jugadores del mundo social, mostrarte a ti mismo en tu página de perfil puede ser una forma muy efectiva de darle fuerza a tu marca y a la comunidad de tu web.

@problogger

231

241

Haz clic aquí para ingresar en el perfil de Twitter de @problogger »

@unmarketing

25

26

Haz clic aquí para ingresar en el perfil de Twitter de @unmarketing »

Utiliza íconos y logos

Seguir perfiles es una técnica simple pero muy eficaz para comunicar la asociación con cierta comunidad, servicio, habilidad, etc. al mostrar iconos o logo relevantes.

@lanesa

27

28

Haz clic aquí para ingresar en el perfil de Twitter de @lanesa »

@rjacquez

29

30

Haz clic aquí para ingresar en el perfil de Twitter de @rjacquez »

Añade una barra en la cabecera

Añadir una barra en la cabecera puede ser usado para crear un look único para tu perfil, pero también se puede usar para separar el logo Twitter y el menú superior (el cual contiene links a los perfiles de usuario) del resto de tu página.

@thegraphicmac

311

321

Haz clic aquí para ingresar en el perfil de Twitter de @thegraphicmac »

@elitistsnob

331

341

Haz clic aquí para ingresar en el perfil de Twitter de @elitistsnob »

Menos es más

Andre Gide una vez dijo “El arte es una colaboración entre Dios y el artista, y mientras menos haga el artista mejor”. Aquí hay algunos ejemplos de cómo el minimalismo se puede usar para lograr estos efectos:

@line25blog

351

361

Haz clic aquí para ingresar en el perfil de Twitter de @line25blog »

@idesignstudios

37

38

Haz clic aquí para ingresar en el perfil de Twitter de @idesignstudios »

Acomoda el ancho de 1024px

Si te preocupa cómo lucirá tu perfil en pantallas widescreens de 1024px, necesitarás trabajar cerca de los bordes superiores e izquierdos de tu imagen de fondo. Aquí hay un ejemplo de cómo un bonito diseño visual se puede usar de forma adecuada para varias resoluciones de pantalla distintas:

@SohTanaka

39

40

Haz clic aquí para ingresar en el perfil de Twitter de @SohTanaka »

Aquí hay otra técnica interesante para asegurarte que tu página de perfil luzca bastante similar tanto en resoluciones de 1024 como de 1280px.

@adamplitt

411

421

Haz clic aquí para ingresar en el perfil de Twitter de @adamplitt »

Utiliza la tipografía

El uso de la tipografía en los fondos de Twitter no es algo muy común; sin embargo, si se usa de forma creativa, se puede crear un efecto genial, muy efectivo para comunicar información adicional.

@elitistsnob

431

441

Haz clic aquí para ingresar en el perfil de Twitter de @dickieadams »

@iamFinch

451

46

Haz clic aquí para ingresar en el perfil de Twitter de @iamFinch »

Coloca la información de una forma memorable

La composición es el plan, ubicación o arreglo de los elementos. Puedes colocar los elementos de tu fondo de una forma memorable, mostrando información que es importante para ti y tus lectores. Estas técnicas te permiten crear un ambiente, mostrar tu personalidad y proveer información adicional.

@sharebrain

47

48

Haz clic aquí para ingresar en el perfil de Twitter de @sharebrain »

@iamkhayyam

49

50

Haz clic aquí para ingresar en el perfil de Twitter de @iamkhayyam »

Haz lo que quieras hacer

El fondo de imagen más original, distintivo y creativa, es el que seguramente será más recordado y tendrás más presencia online. Experimenta con ilustraciones bonitas y personalizadas, imágenes de fondo y tipografías. Asegúrate de que tu imagen de fondo posea una voz personal, que no se vea genérica.

@ramesstudios

511

Haz clic aquí para ingresar en el perfil de Twitter de @ramesstudios »

@NIK0_BELLIC

521

Haz clic aquí para ingresar en el perfil de Twitter de @NIK0_BELLIC »

¿Qué consejos piensan implementar? ¿Cuál recomiendan ustedes?

Fuente: Smashing Magazine


1 comentarios to "Cómo personalizar tu página de perfil en Twitter"

  • Hola, les comento que aunque la nota original es de Smashing Magazine, en esta publicación el artículo está en inglés.
    La nota que su blog ha publicado ha sido tomada textualmente de www.elwebmaster.com, del siguiente link: http://www.elwebmaster.com/general/como-personalizar-tu-pagina-de-perfil-en-twitter
    Por favor, indiquen la fuente real de sus artículos. Si desean comunicarse con elWebmaster, pueden hacerlo al siguiente e-mail: info@elwebmaster.com

Publicar un comentario

Datos personales

Blog Archivo

Subscribete via E-Mail

Subscribete via RSS!

Ingresa tu email para:
Recibe actualizaciones del Blog.

Etiquetas

16-bit 2.0 2012 256 colores 2d 3 404 5 8 acelerar Acer Aspire ActionScript ADD-ONS addon adobe adobe air Adsense aerogarden agilidad airbender AJAX alarma alien all your base alta definición Android angulacion answers API APIs aplicacion aplicaciones Apple apps archive Argentina ask atajo atajos de teclado ataque audio avance avatar aventura grafica back background backtweets balsamiq mockups banda bang banners barcelona barra lateral bases de datos Batacazo bateria bbcode bear bebé Biblioteca Virtual big bing BitDefender BitTorrent blekko Blog blogger bloggers blogósfera Blogs bocetos bollywood bordes botánica brickify brush buenos aires buscador búsqueda avanzada cache caja calendario calidad cámara web canciones Canvas carrusel catástrofe ceguera de banners celular CEO charla chpimunk chrome chrome web store chromium chuck norris cine Cisco cita cliente ftp cloud cluster Cms cocina codec código coleccion color colorotate columna comercio commodore 64 compatibilidad Competencia compositio Comscore comunicacion Comunidad comunidad online Conferencia configuración consejos contenido content copia correo correo electrónico cotidiano cpanel Creatividad criminal cross-browser cse CSS CSS3 cubo cuenta cuentos cultivo Curiosidades curso photoshop Cursos daisies date Debian degradé dell desaparecer desarrollo web descarga Descargas descomprimir desfragmentar despertador despertar deviantart DHTML Digg diseñador Diseño Diseño Grafico Diseño Gráfico diseño web Disney dispositivo dispositivos moviles dispositivos táctiles div dominio dramatic dropbox duck go e-book e-commerce e-commerce day e-mail EBE ecología editor educación a distancia educativo Educativos Niños efecto efectos ejemplo emblema emprendimiento emulador emuladores encabezados encuesta enlace episodios error escritura España estadística Estados Unidos estilo estudio etica evento Eventos Excel exportar extensión extensiones extraterrestre Facebook facebook connect garage fc64 feeds Fiberparty film Filosofía Firebug firefinder Firefox firmware fixes Flash flex 4 Flickr fondo fondos font font dragr form formularios foto Fotografía Framework freelance fuente fuentes future FXG g1 gadget gadgets games gaming gazelle geek gestion gestor de contenido gestos gestuales gesture ghajini gm730 Gmail Google google analytics google app Google Calendar Google Chrome Google Docs gradient gradiente gradientes gráfico gran torino gratis groupon guerra guia h.264 habla hack Hackers handle handler hardware herramientas gráficas hitchcock hollywood homepage horizontal hover HP html HTML válido HTML5 HTTP hub huerta IBM icono IE illustrator imagen Imagenes imágenes importar impress inclinacion indio infecciones info-box infografías iniciador Inkscape inspiracion interactivo interfaz Internet Internet Explorer interno invasión investigación iPhone iphone os iPod island istick IT iTunes U jackson JavaScript jerarquía jetpack jQuery jQuery TOOLS jsc64 juego Juegos lanzamiento laptop lego lenguaje Lenovo Lg libre librería libro limpieza Links Linux literatura lógica logo logos logotipo lolcat Lotería love luca lucasarts luces luminoso luz Mac mac book pro mac os x MacBook macro mago Malware manejo mantenimiento manual mapa mapeo maquetación marciano Marketing mascara mascota McBook medicion medio ambiente meme memoria mente menú metafilter metropolis michael microsoft Mobile Learning mockup monkey moonwalker mootools moousture motivacional motor de busqueda motores de búsqueda mouse mouseprobe mov movil mozilla Mozilla Firefox Mozilla Labs mp3 MS Office mujer maravilla multimedia MultiTouch música MXML MySpace MySql N97 napkee navegación Navegador navegadores networking New York nightly nihilogic no ser encontrado nodos Nokia notebook noticias Novedades ochentoso oferta offers oficial online Open Source Open SUSE OpenOffice opera operativo oportunidad optimización orden organizacion orgullo os oscurecer oscuridad oso Outlook oz page speed PageRank pagespeed pageviews panaderia Panda paneles pantalla pantallas táctiles parasitos PDF peekfeed película pencil peoplebrowsr perfil pestaña photoshop photoshop clase 2 PHP php 5 Picasa picker pinceles pingie piratas pirates plagio plantación plantar plantilla plastic logic Plugin plugins pocket yoga podcasts port portal portátil posicionamiento powerpoint ppc prejuicio preparacion presentación Productividad Programación programas promocion protofish prototype proyecto prueba PSD Psicología public Publicidad puerto QEMU quickoffice quicktime quote rafael jimenez rank Recursos Red red social reddit Redes sociales reloj remake reproductor reseña resolución respaldo resultado retro robo rojo RSS rubik Ruby rust Safari Salud sans-serif sclipo script sculpting sdk seleccionador SEO serie serif SERP server servidor servidor web set shadow share sherlock shortcodes shuffle sidebar sidepost simple simpson Sin clasificar sistema sistema operativo sistemas operativos sitios web slideshow smart smooth SMS snow leopard social sociedad Software Software educativo software libre sombra sonido soundmanager2 spam spreadsheet SQL Squeeze startup steps left store streaming subdominio success suckerfish sun microsystems tablas table tabs tactil Taller de Fotografía Digital Taller de Photoshop taller photoshop Talleres Tarjetas de Crédito teaser tecnica Tecnologia teddy telefono television telltale template templates textbox the theme Themes theora thumbnails tienda time tipografía tipografias tips titulares to touchscreen tower defense trailer transform transition tres Troyano Troyanos truco Trucos tutorial photoshop tutoriales TV tweet tweetstats Twitter unplugged Usabilidad USB usuarios Utilidades para PC Utilidades para tu web variables vector vegetales velocidad venta Ventas verde verdura version video videojuego videojuegos videos Videos de Música Peruana viernes Viernes Unplugged VirtualBox Virus Visas VMware voucher w3c wallpaper wallpapers web Web 2.0 web participativa webcam WebKit webm webmaker Wi-Fi widescreen Wikipedia Windows Windows 7 Windows Mobile wiz wizard wolfram wonder woman Word Wordpress WorldBuilder wwdc 09 XHTML yahoo Youtube yui zip