50 Portfolios de Diseño Web para Inspirarse

Despues de unos meses de parón creativo, retomamos de nuevo Webmasters Deluxe con un interesante artículo con una recopilación de 50 portfolios de diseñadores web para tener en cuenta a la hora de buscar ideas.

Estos portfolios destacan por su usabilidad y el diseño original. Desarrollados en muchas ocasiones con librerías de java y css + xhtml, formatos que cada vez se consolida más en el panorama del diseño web.

Fuente: WebDesignLedger

Diseño Web en Flash para Inspirarse

Si eres de los que adoran los diseños webs en formato flash, vas a disfrutar mucho con algunas de estas webs, que sin duda se encuentran entre los mejores diseños web en flash. Ya en otras ocasiones hemos mencionado 50 excelentes Diseños de Webs en Flash. Ahora sumamos algunas más a esta colección.

La utilización del video, el sonido y el aprovechamiento de la interactividad de los elementos las han convertido en diseños web de éxito, y aunque no siempre muestran funcionalidad, si que ganan en diseño.

Si realizas trabajos en flash, es probable que en esta pequeña muestra encuentres la inspiración necessaria, y solo eres un aficcionado al flash, déjate sorprender.

* Crommcruac.com

* 2advanced.com

* Derbauer.de

* Fiftyeight.com

* Nike.com

* Sensisoft.com

* Zeroix.com

Otros Diseños Web en Flash que pueden resultar interesantes:

* Ageencynet.com

* Targetscope.com

* Creaktif.com

* Madeinmtl.com

* Ecodazoo.com

* Hotel626.com

* Leoburnett.ca

* Ff0000.com

* Dragonhunters-thegame.com

* Syfy.com

* Prismgirl.org

* Mauriciostudio.com

* Zoomquilt2.madmindworx.com

* Parasol-island.com

* Saizenmedia.com

* Westcoastcornhole.net

* Mcbd.co.uk

Podeis encontrar más Webs con diseños Interesantes en The Favourite Website Awards

Diseño Web en Formato Video

Interesante idea la que propone esta agencia de publicidad.

Han elaborado un curioso video en formato de web, o una web en forma de video, según quien lo vea. Se puede navegar a través del mismo mediante los botones, como si de una web real se tratase. Además incluye un interesante efecto de barra de navegación, utlizando la linea temporal del reproductor de video.

Sin duda la idea ofrece una nueva forma de entender el diseño web, o los efectos de video. Eso si, solo funciona en plataformas del tipo Youtube, o adaptando el código para reproducir el video desde nuestra propia plataforma de vídeo.

El video ha sido desarrollado utilizando la característica que ofrece Youtube para incluir en los vídeos "Comentarios Embebidos", y sin duda la han aprovechado con mucha originalidad; la imagen corporativa de la agencia queda totalmente definida en los minutos que dura la navegación por los vídeos. Además esta totalmente optimizada para obtener una gran cantidad de tráfico a través del segundo motor de búsqueda más utilizado; Youtube. Una buena campaña publicitaria utilizando video y con un costo muy bajo en recursos... el sueño de cualquier publicista.

Puedes ver todos los vídeos que se incluyen dentro de la video-web, como si se tratara de navegar por una web normal, combinando las principales características que ofrecen el formato video y el formato web; la relación entre video-páginas que ofrecen los enlaces del formato web y la comodidad de la navegación que ofrece la imagen del formato video.

Una ingeniosa idea que sin duda te llamará la atención... y que inspira para imaginar otros resultados utilizando las mismas técnicas.

¿Algún día navegar por una web será así ?, ¿Es esto una web 3D?, ¿Es VideoHTML?, ¿Que pasaría si admitiera AJAX o PHP?

Una imagen vale más que mil palabras...

Dale al Play y navega por el / la vídeo-web...

Fuente: BooneOakley

35 Diseños Web Horizontales para Inspirarse

El Diseño Web Horizontal está cobrando mucha relevancia en los últimos tiempos. No resulta dificil encontrar este tipo de navegación web, que en otros tiempos era totalmente desaconsejable, e incluso penalizable por los diseñadores web.

La proliferación de este tipo de diseño se debe en parte a las nuevas tecnologías de desarrollo que han permitido combinar la eficacia y rapidez para ponerlas a disposición de la usabilidad. Mediante jQuery, MoooTools, Ajax, HTML+CSS, y otros recursos de programación web se han abierto nuevos caminos para el diseño de webs, permitiendo mejores tiempos de carga y una navegación más límpia para el usuario final, aportando una compatibilidad apta para el posicionamiento en buscadores y cumpliendo los estándares de diseño web.

De esta forma se ha ido desplazando las denostadas animaciones Flash por diseños menos animados pero más eficaces y límpios. Y de esta forma se ha permitido el acceso al diseño web de las navegaciones horizontales, otrora prohibitivas, dando lugar a una moda minimalista muy en consonancia con los preceptos de la Web 2.0.

En uno de mis blogs preferidos publican una buena recopilación de Diseño Horizontal de Webs, en donde se encuentran algunos de los desarrollos más interesantes y que servirán de inspiración a todos los diseñadores web que busquen nuevas tendencias para sus diseños. En muchos de estos diseños se hace dificil conocer a simple vista si se navega sobre Flash o HTML+CSS+JavaScript.

Pasen y vean...

Fuente: Vandelaydesign

Domestika: Comunidad de Creativos

Si todavía no conoceis Domestika (DMSTK), deberíais de visitar la web, en donde encontrareis todo tipo de material, ideas, referencias, ofertas, propuestas y muchas más cosas.

Entre los muchos servicios que ofrece Domestika se encuentra un foro que sirve como punto de unión para diseñadores y desarrolladores, una sección de portfolios, para mostrar tus trabajos más interesantes, recursos para poder encontrar todo lo necesario para el desarrollo y diseño de tus proyectos, coolsites en donde podrás encontrar los mejores diseños realizados y valorados, anuncios de empleo, grupos y muchas más utilidades. Como podeis ver todo muy completo y de una gran calidad.

Y todo esto con la garantía que ofrece el equipo de Domestika, compuesto por grandes conocedores y profesionales de internet y el diseño en sus diferentes aspectos. Felicitarlos sin duda por este espacio que han sabido llevar con tanta sabiduría, hasta convertirlo en un punto de referencia para los diseñadores y desarrolladores de habla hispana.

Fuente: Domestika

Videotutorial de PSD a CSS XHTML

En los últimos tiempos ha cobrado importancia la maquetación de PSD a XHTML/CSS debido a que permite trabajar comodamente el aspecto gráfico y obtener resultados eficaces en el paso al aspecto de desarrollo.

La integración del diseñador gráfico con el desarrollador se mejora notablemente con este tipo de técnicas, y se obtiene mejor calidad en menos tiempo.

A pesar de que información sobre este tipo de creación de webs hay mucha, en nuestro idioma no abunda tanto.

En esta recopilación de Videotutoriales se muestra de que forma trabajar con PSD y XHTML/CSS para mejorar nuestra técnica de desarrollo. Se maquetará a partir de un archivo fuente de Photoshop en .PSD y el resultado se obtendrá en XHTML/CSS, listo para poder subir a un servidor.

Os recomiendo que la sigais para los siguientes capítulos que vayan saliendo, porque es una buena forma de aprender una técnica de calidad de forma clara y en nuestro idioma.

Capitulo 1

Capitulo 1: y aqui les presento a la plantilla

Capitulo 2.1

Capitulo 2 parte I: Cortar, Organizar y Nombrar

Capitulo 2.2

Capitulo 2: parte II: XHTML!!!!!

Pasando de PSD a XHTML/CSS Online

Y si seguís interesados en la creación de archivos XHTML/CSS a partir de PSD, os recomiendo esta otra herramienta online para poder realizarlo en un solo paso; Ppsd2cssonline.

Subiendo un archivo en PSD os devuelve un archivo maquetado con CSS, al que solo tendreis que añadir los retoques para tenerlo finalizado. La aplicación cuenta con abundante material de ayuda para obtener resultados profesionales. Aquí teneis un video demostrativo de cómo convertir un archivo PSD en una plantilla para Joomla.

Y aquí cómo convertir un archivo PSD en un Theme para Wordpress.

Aquí teneis más información sobre esta herramienta.

Fuente: Cristalab

14 Themes para WordPress Gratis

Buena recopilación de 14 Themes para Wordpress Gratis, para mejorar el diseño de tu blog de wordpress. Y aunque no es la primera recopilación de themes para wordpress de la que nos hacemos eco, esta destaca por la calidad de los themes elegidos; lo mejores themes de su categoría, desde los más simples a los más completos... y lo mejor de todo es que son gratis.

En esta selección hay diferentes tipos de themes, desde los clásicos diseños con plugins adicionales hasta themes con diseño revista y pluings avanzados de administración. Una buena selección de themes para Wordpress. Además dispones de una vista previa y del enlace de descarga. Ya tienes una excusa menos para modernizar tu blog de wordpress.

Fuente: Smashing Downloads

50 Webs con Diseño Flash

Una recopilación para todos los amantes de las webs diseñadas en flash. Una recopilación de 50 Webs con Diseño en Flash hecha por uno de mis blogs preferidos.

A pesar de que la utilización de diseños web en flash ha decaído en los últimos tiempos, quizás por la dificultad de posicionarlo en buscadores y suplantado por otras técnicas más amigables y que hace unos años no eran posibles, paralelamente el desarrollo flash se ha ido mejorando llegando a alcanzar una calidad realmente sorprendente. La integración de movimiento, acciones y diseño gráfico ha dado lugar a algunas obras maestras del diseño web. En esta recopilación encotrarás algunas de las webs más sorprendentes del diseño hecho con flash.

Entre las webs podrás encontrar algunos de los diseños más innovadores de los últimos tiempos, webs reconocidas por la comunidad de desarrolladores y diseñadores como las mejores en su categoría. Desde portfolios profesionales a las webs corporativas de reconocidas marcas comerciales, pasando por webs de ocio o desarrollo. Todo un lujo de recopilación que servirá para inspiraros y aprender nuevas técnicas de los diseñadores web más reputados para poder utilizarlas en vuestros proyectos.

Estoy seguro que despues de echar un vistazo a muchas de estas obras del diseño web te harás la pregunta de cómo las habrán hecho.

Fuente: Smashing Magazine

250 Recursos de CSS

Un interesante artículo en donde se recopilan 250 Recursos de CSS para convertirse en todo un experto. Uno de esos post que no deben de dejarse pasar, y que nos ayudará a conocer nuevas herramientas para trabajar con CSS.

En este artículo podrás encontrar desde recursos esenciales de CSS, material de aprendizaje, tutoriales, material de referencia, cheatsheets, templates, frameworks, galerias de CSS, herramientas, blogs de referencia, técnicas e ideas y muchos más recursos para mejorar considerablemente tus conocimientos sobre CSS. Uno de los artículos más completos sobre este tema.

Si eres maquetador de HTML y CSS, o si estás iniciandote en el CSS esta información te vendrá muy bien para mejorar tus proyectos.

Fuente: Webdesignerdepot

Coleccion Iconos ECommerce

Interesante Colección de Iconos para Ecommerce, en donde puedes encontrar una gran variedad de iconos con diseño original y actual, preparados para descargar y utilizar. La temática de los iconos es el comercio electrónico, o sea que si administrais alguna tienda online, estos iconos os vendrán muy bien para poder modernizar el aspecto de vuestra web.

Fuente: Como ganar dinero desde casa

99 PortFolios Profesionales

Una buena forma de encontrar inspiración para comenzar nuevos proyectos es consultando los trabajos de otros. Y sin duda los PortFolios profesionales son una buena fuente de inspiración.

Os quiero recomendar un post en donde aparecen 99 PortFolios Profesionales de gran belleza y calidad, en donde puedes encontrar buenas ideas para tus proyectos. Van desde diseños gráficos muy logrados hasta desarrollos innovadores y poco utilizados. Y la selección es lo suficientemente amplia para saciar la curiosidad de cualquiera. Una de las mejores recopilaciones de PortFolios que he encontrado, y de la mano de uno de mis blogs de cabecera. Un post extenso y bien documentado que además tiene otra información relevante sobre PortFolios online, para que puedas documentarte en la realización de Portfolios.

Fuente: Instantshift

Paginas Web con Estilo Revista

El estilo revista se impone cada vez más. Es fácil encontrar blogs que adoptan este tipo de diseño para mostrar sus contenidos de una forma más organizada. A pesar de que tiene muchos seguidores, tambien tiene muchos detractores, y algunas debilidades. En cualquier caso esto es tema de otro post.

En este post quiero presentaros algunas de las webs más conocidas que han adoptado este estilo. Una recopilación de 25 Páginas Web con Estilo Revista que servirán de inspiración por si habeis pensado en utilizar este estilo. Y en caso de que no lo hayais pensado, os servirá para conocerlo y valorarlo más a fondo.

Algunos de estos diseños son simplemente inmejorables.

Fuente: VandelayDesign.com

Coleccion de 40 Paquetes de Iconos para Diseño Web

Una buena colección de 40 Paquetes de Iconos para Diseño Web, sin duda muy necesarias para los diseñadores web. Puedes utilizarlas para comenzar un nuevo diseño o realizar un rediseño de algún proyecto. Podrás encontrar todo tipo de temáticas y tendencias que van desde lo más clásico hasta las más novedosas, eso si son todos de descarga libre. Hay algunos paquetes realmente muy interesantes por su calidad.

Más que necesario tener una colección de este tipo a mano.

Fuente: TuProgramador.com

Vía: Puerto Pixel

20 Diseños Espectaculares de Webs

Una interesante recopilación de 20 Diseños Espectaculares de Webs hecha por uno de mis blogs preferidos.

Se puede encontrar una gran variedad de diseños que van desde los blog a algunas webs comerciales. Sin duda es de destacar la calidad del diseño gráfico de muchas de ellas, y tambien los recursos de desarrollo web que presentan. Diseñadores gráficos, desarrolladores web, bloggers y webmasters en general deleitarán la imaginación con muchos de estos diseños.

Os lo dejo para que os sirva de inspiración.

Fuente: Cofre Grafico

Nube de Tags Nativa en Blogger

Hace unos días podemos encontrar una mejora interesante en la plataforma de Blogs de Blogger. Para todos los usuarios del servicio será una buena noticia saber que ahora Blogger dispone de una nube de tags un poco más actualizada a los tiempos y de forma nativa, sin tener que instalar ningún código, de forma rápida y simple. Un buen regalo para celebrar los diez años del servicio.

Se pueden implementar como una "lista" o como una "nube", aunque sospecho que la forma que predominará será como "nube de etiquetas". Tambien se pueden escojer las etiquetas que quieres que se muestren, restringiendo aquellas que no quiera mostrar. Y por supuesto, manipular el diseño a través del CSS de la plantilla.

Para poder implementar la nube de tags tienes que acceder a la parte de "Diseño" de tu panel de administración de Blogger y añadir o modificar el plugin de "Etiquetas", seleccinando la opción de "Nube" y guardando los cambios, como se muestra en la imagen inferior.

Imagen tomada de Blog and Web

Para los que quieran ver la información pública sobre este recurso de Blogger, pueden hacerlo aquí.

Fuente: Blog and Web

Conferencia de Posicionamiento SEO

Sobre Posicionamiento SEO en buscadores se han escrito muchas cosas, pero a pesar de toda la información existente poca es veraz y aprovechable para mejorar el posicionamiento de nuestra Web.

En la siguiente conferencia ofrecida en las 1ª Jornada de Negocios en Madrid por Javier Casares de OjoBuscador se hace un repaso a las técnicas empleadas en Posicionamiento, se derriban mitos y se habla de las tecnologías de búsqueda y posicionamiento para un futuro cercano. La conferencia consta de una hora de duración dividida en diez partes, todas ellas disponibles en el mismo canal de Youtube. La charla se desarrolla a partir de las preguntas del público, tocando aspectos como las técnicas de posicionamiento en los diferentes buscadores, tendencias, penalizaciones, algoritmos de búsqueda, buscadores no tan populares y otros temas relacionados.

Una visión muy interesante de la mano de uno de los mejores expertos en SEO. Seguramente aprendas cosas que todavía no sabes sobre SEO. Indicado para principiantes y expertos.

Os dejo con la primera parte de la conferencia.

Fuente: Canal NetworkingActivo

15 Plantillas para tu Blog en Blogger

15 Plantillas para tu Blog en Blogger Gratis, listas para instalar y con un diseño inmejorable. Puedes ver un ejemplo de como funcionan instaladas. Tambien puedes descargarlas para su uso, de forma totalmente gratuita.

Advertencia:

Antes de realizar cambios te recomendamos que hagas una copia de respaldo de tu plantilla actual o que utilices en su defecto un blog de prueba. No nos hacemos cargo de los posibles desperfectos.

1º) Perhentian

Demo | Descargar

2º) Purple Rush

Demo | Descargar

3º) DF Marine

Demo | Descargar

4º) Angelic Designs

Demo | Descargar

5º) Japanese Fleur

Demo | Descargar

6º) Made in Spain

Demo | Descargar

7º) Green Light

Demo | Descargar

8º) Dark World

Demo | Descargar

9º) Astro Colorful

Demo | Descargar

10º) History Channel 11

Demo | Descargar

11º) Minima Stretch

Demo | Descargar

12º) Neuronic

Demo | Descargar

13º) IcyBlue

Demo | Descargar

14º) Owln Pussycat

Demo | Descargar

15º) Beauty

Demo | Descargar

Si quieres ver y descargar más Plantillas para Blogger gratis, puedes hacerlo en...

10 Plantillas para Blogger Gratis

Thumbalizr, Capturar Pantallas Web Online

Seguro que en alguna ocasión os habeis encontrado en la necesidad de realizar una captura de pantalla de una determinada web, bien para utilizarla en un post o para guardarla en vuestro pc.

Soluciones para hacer capturas de pantalla de webs hay muchas, pero pocas son tan eficaces y simples de utilizar como Thumbalizr. Simplemente tienes que incluir la URL de la web que quieras capturar, esperar unos segundos a que sea procesada, y a continuación descargar el formato que más te convenga. Dispone de diferentes tamaños para que puedas escoger. Así de simple y rápido. Además tiene la ventaja de ser un recurso totalmente online y gratuito, lo cual lo hace mucho más versatil.

Una herramienta indispensable para tener a mano cuando trabajes en tus proyectos.

Fuente: Thumbalizr

Basil Gloo Portfolio

El de Basil Gloo es quizás uno de los portfolios más conocidos y visitados de la red. Este joven diseñador y desarrollador web ucraniano, es además el fundador de Everyone Knows, estudio de diseño gráfico y cofundador de Webmasters Internacional entre otros conocidos proyectos. Tambien mantiene un conocido blog sobre estos temas de diseño gráfico y desarrollo web, pero por desgracia no está traducido al inglés.

Su trabajo va desde el diseño gráfico, hasta el desarrollo web, pasando por la imagen corporativa, diseño de logos, maquetación xHTML/CSS o programación y diseño en flash. Su estilo es simple, pero sin que por esto no tenga unas grandes dosis de diseño. Tambien está al corriente de las últimas tendencias técnicas en internet. Tipografías muy bien escogidas, diseños claros y limpios, colores dosificados con tendencia al minimalismo y poca carga de scripts y elementos de navegación innecesarios. Quizás sean estas características lo que lo han hecho tan conocido. Podeis ver algunos de sus trabajos aquí. Tambien podeis encontrarlo en las diferentes redes sociales como linkedin, facebook, twitter o xing, ya que ha sido uno de los primeros diseñadores web en valorar este tipo de servicios y potenciarlos para dar a conocer su trabajo. Y lo ha conseguido.

Sin duda un buen portfolio de uno de los creadores más prometedores del este de europa.

Fuente: Basil Gloo

59 Usuarios Twitter para Seguir (Followme)

A pesar de que Twitter es un recurso muy difundido y de gran valor, pero no siempre es fácil encontrárselo. Para poder quitarle rendimiento es necesario tener unos buenos usuarios para seguir, que te permitan información relevante y sobre el tema pertinente en poco tiempo.

Diego de Trazos Web ha publicado hace algunas semanas una interesante lista de Usuarios de Twitter para Seguir. En esta lista podrás encontrar usuarios en inglés y español divididos en diferentes categorías; Blogging, Desarrollo y Diseño Web, Web y Diseño Gráfico. Encontrarás de lo mejor para poder añadir a tu cuenta de Twitter. Y tambien en una de estas categorías se incluye Webmasters Deluxe. Agradecerle a Diego que nos haya concedido la oportunidad de aparecer en esta recopilación de twitteros, aparición que no nos merecemos, pero que agradecemos de corazón.

Ya sabes, si tienes una cuenta en Twitter esta lista te será muy útil.

Fuente: Trazos Web