30 Jun

Tablas de precios en PSD

Son varios los proyectos en los cuales debemos contar con una sección en la cual mostramos los precios a los que estamos ofreciendo un servicio ya sea de una única forma o con diferentes planes. Hay que tener en cuenta que estamos buscando que el que visita el sitio sienta deseos de adquirir un producto y eso hoy en día con tantas herramientas gratuitas no es tarea fácil. Los puntos a tener en cuenta son varios, comenzando por su atractivo. No es lo mismo presentar precios en un marco liso y aburrido que hacerlo en banners atractivos visualmente y funcionales.

En este caso es cuando debemos dedicar el tiempo necesario al diseño de los mismo o, si es que las fechas de entrega nos apremian, encontrar uno gratuito que pueda ayudarnos o servir de base para el resultado final.

El usuario de DeviantArt prkdeviant puso a disposición de todos un grupo de tres banners para generar tablas de precios utilizables en todo tipo de proyectos. Los mismos se encuentran en formato PSD, para que podamos abrir en Adobe Photoshop y adaptar sus colores, texto y cada elemento que deseemos hasta llegar a obtener una imagen atractiva que refleje lo deseado y al mismo tiempo sea adecuada para el resto del entorno en el cual estamos trabajando.

Free PSD Source por prkdeviant – Descargar

Share this
28 Jun

10 reglas importantes del Diseñador Web

 

Un sitio web bien diseñado no solo atraerá a muchos lectores, sino que también ayudará a que su negocio crezca más de lo que imaginas! En el diseño hay que respetar algunas reglas básicas de usabilidad, diseño y SEO con el fin de hacer el sitio web exitoso. Las siguientes normas esperando que le sea útil y puedan llevarse a cabo en sus sitios.

1. Utilice las fuentes adecuadas
Las fuentes pequeñas, con mucha decoración, o la famosa “comic sans” pueden llegar a arruinar un sitio web. Para ello tenga cuidado de no utilizar fuentes que son ilegibles. El objetivo principal es hacer que sus visitantes lean tu sitio web, no que descifre lo que está intentando transmitir. Los sitios que tienen fuentes demasiado pequeñas, por lógica son difíciles de leer y no estipule que han de utilizar la función de zoom con la que vienen los navegadores, ya que no todos conocen de su existencias.

2. Evite nuevas ventanas del navegador
Una de las reglas principales a la hora de un sitio, es dejar que el usuario final tenga el control de todo el sitio y por ello de los enlaces también. Por eso la apertura de nuevas ventanas del navegador además de ser molesto, da una sensación al usuario de no poder controlar todas las acciones que él quiere. En todos los navegadores hay botones para volver “Atrás” así que no se preocupen, el usuario volverá a su sitio si lo desea.
En caso de que el enlace es hacia un sitio interesante con contenido mucho más relevante que el suyo, recién aquí se aconseja utilizar el abrir una nueva ventana, ya que el usuario puede perderse en un contenido relevante de tercero olvidándose de su sitio por completo

3. Suscripciones no automáticas
El envío de correos electrónicos con el último contenido de su sitio es algo muy importante que mantendrá informado a sus seguidores y hará que lo visiten periódicamente. Pero no por ello subscriba a las personas sin su consentimiento.
Ya que no es profesional, es muy probable que pierda visitantes y corre el riesgo de ser penado por motores de búsqueda (más si ha comprado base de datos de email)

4. No utilice música.
Esta es una regla bastante sencilla. No poner música en un sitio! Claro que existen excepciones que su cliente se vea empecinado en que se reproduzca un sonido cuando ingresen a su sitio, o que deba incorporarlo en un sitio de algún grupo de música, por ello se recomiendo que no reproduzca la música de manera automática, sino que deje que el usuario siga teniendo el control y sea el mismo el encargado de hacer clic en el botón “play” de su reproductor.

5. No cargue de publicidades el contenido
Si está interesado en que el lector de su sitio no odie sus molestas publicidad (o incluso su sitio), no coloque publicidades engañosas para que hagan clic en ella. En caso de tener mucha publicidad trate de tener una sección apartada para que no interfiera en el contenido que se está leyendo. En la mayoría de los sitios una publicidad en el contenido es tolerable, más de una ya no es aconsejable debido a que suele romper la lectura del contenido y por lo general suele mal presentando.

6. Cambio de color en enlaces.
Esta es una regla de usabilidad importante. Color a los vínculos que ya se le ha hecho clic, permitirá a los visitantes de su sitio, conocer las páginas que ya ha visitado, y para que no se pierdan en la navegación del sitio. También no se olvide de destacar con otro formato los enlaces en su sitio, recuerde que usted sabe en dónde se encuentran cada uno de los enlaces, mientras que sus visitantes desconocen de ellos, y si no son reconocibles en la navegación, no podrá acceder a todo el contenido relevante de su sitio

7. Sin desplazamiento horizontal
El desplazamiento vertical es algo que puede aceptarse, siempre y cuando se respeten sus límites. Pero el horizontal es algo que debe ser evitado en su totalidad. Recuerde que la resolución de pantalla más utilizada es de 1024 x 768 píxeles así que al diseñar un sitio web asegurarse de que encaja dentro de él.

8. Utilice CAPTCHA de lectura.
Muchos sitios web utilizan filtros de CAPTCHA para reducir el spam entrante por medio de los formularios de contacto o comentarios. El problema surge cuando los visitantes deben cargar más de una vez para poder descifrar dicho código CAPTCHA. Por ello trate de colocar palabras que sean entendibles para los usuarios visitantes, caso contrario; tendrá alguna serie de malos comentarios del sitio, y en el peor de los casos no comentaran o no enviaran las sugerencias. No demuestre su habilidad de hacer cosas complejas, haga que lo complejo sea fácil y útil en el sitio: Fácil al usuario y útil para usted.

9. No obligar a registrarse
La mayoría de las personas sólo quiere obtener información precisa al navegar por Internet y dejar los datos personales de uno, es desagradable. Mucho más si una vez registrado descubre que el contenido que visualiza no era el deseado. Por supuesto, que si el sitio es realmente bueno, el registro obligatorio no será un problema para los usuarios..

10. No sature el sitio
Muestre todos los premios, anuncios y sponsor que quiera a tal punto que saturen y vean que tan reconocido es usted, pero al mismo tiempo prepárese para perder lectores. No significa que sus logros no sean importante, pero sepa dónde ubicarlos para que no saturen la imagen del sitio y la lectura de sus visitantes. Es recomendable colocar un apartado en “Sobre nosotros” / “About Us” o utilice algún sector de la página que no canse a la vista del usuario.

Share this
28 Jun

Animar sombras con jQuery

Real Shadow es un pequeño plugin desarrollado con jQuery y que hace un uso intensivo de la propiedad CSS box-shadow. Este fantástico script nos permite animar sombras de forma dinámica, teniendo como posibilidad utilizar el puntero del mouse y su ubicación para definir la orientación de las sombras.

Al momento de configurar el plugin podemos definir si deseamos que las sombras se muevan con respecto a la posición del puntero del ratón, o bien fijando unas coordenadas que son las que muestran la ubicación del foco de luz, por lo que las sombras se verán directamente en la posición opuesta, obviamente dependiendo de la forma del objeto.

En la imagen que muestro a continuación el puntero del mouse se encuentra en el centro, de ahí que las sombras se reflejan en distintas direcciones.

Ejemplo: Como animar sombras con jQuery


$(selector).realshadow(); // options are optional

$(selector).realshadow({
followMouse: false, // true by default

pageX: x, // x coordinate of the light source
pageY: y // y coordinate of the light source

c: { // shadow color
r: 1, // red channel for shadow
g: 1, // green channel for shadow
b: 1, // blue channel for shadow
}
});

El plugin funciona en la mayoría de los navegadores modernos, la única limitación es simplemente que acepten el uso de box-shadow, algo que hacen casi todos los navegadores publicados en estos últimos años.

Web: Real Shadow

Share this
26 Jun

Iconos sociales en 8-bit

Sin duda los 8-bit han generado con el tiempo su propia estética, y a lo largo de todos estos años hemos podido ver como pasaron a ser fuente de inspiración para diversas expresiones artísticas.

Películas, videos, indumentaria, mobiliario y diseño, todo se ha visto en algún momento inspirado por la estética propia de los 8-bit. Conozco algunos fans de los primeros videojuegos que vieron la luz hace ya más de tres décadas, y es por ello que creo que este set de íconos sociales, no solo escapa a lo ordinario sino que puede ser una excelente forma de tener un rinconcito 8-bit en su sitio.

Descargar 8-bit Social Icons | PixelPixelPixel

Los íconos fueron diseñados por Patrick Jones para PixelPixelPixel, y se ofrecen de forma gratuita en formato .psd que les permitirá editar su tamaño. Un excelente pack para los fanáticos de los videojuegos vintage.

Share this
24 Jun

Cymera: Los mejores efectos para tus fotos en Android

Todos sabemos que tener una aplicación con efectos para fotos en Android no nos hace fotógrafos. Aplicar un filtro con dos pasos no se compara ni levemente al trabajo de alguien que aprendió fotografía. Sin embargo, no deja de ser entretenido e ideal para quienes quizás no tienen tiempo para aprender todavía, o simplemente les gusta probar nuevas herramientas.

Cymera es sin dudas una de las aplicaciones mas completas si hablamos de modificar imágenes por varios motivos que van desde su agradable estética hasta la cantidad de opciones que ofrece.

Para empezar cuenta con siete lentes diferentes y cuatro modos de disparo. Es así como podremos tomar sesiones de cuatro o dos imágenes en varios formatos, utilizar el modo retrato o el ojo de pez. Dentro de los modos de disparo cuenta con una interesante opción que nos deja enfocar en una sección de la imagen desenfocando el resto.

Una vez estemos conformes con la foto tomada, llegaremos al menú de edición, con cuatro botones en la parte superior:

Edit: Con las herramientas clásicas de edición para rotar, cortar, mejorar brillo, contraste y balance de colores, entre otras opciones.

Filter: Donde podremos aplicar tres tipos de elementos diferentes. En el primer icono veremos 21 filtros mas que atractivos, en el segundo efecos de iluminación y en el tercero marcos de todo tipo.

Beauty: Para mejorar esos detalles estéticos y pequeñas imperfecciones que notemos en el rostro sin problemas.

Decorate: La parte de “fantasía” de la aplicación, para agregar elementos estilo cartoon que van desde dibujos variados a marcos pasando por rasgos faciales de lo mas divertidos.

Cuando terminemos con la edición de nuestra fotografía, solo queda guardarla en nuestra galería y si lo deseamos, compartirla en el sitio de Cymera, previo registro.

Cymera – Tamaño: 16M – Descargar

Fuente: http://www.kabytes.com/software/cymera-los-mejores-efectos-para-tus-fotos-en-android

Share this
22 Jun

Gestor de archivos con jQuery

elFinder es un proyecto open-source para ser utilizado como un gestor de archivos online. Esta escrito en JavaScript usando jQuery UI para el desarrollo de la interface, y su nombre no es casualidad ya que se encuentra inspirado en el Finder de Max OS X.

Los requerimientos de instalación son de lo más sencillos, tan solo necesita un navegador web moderno. Esta completamente testeado en Firefox 10+, IE 8+, Safari 5, Opera 11 y Chrome 15+. Del lado del servidor no hay demasiada ciencia, funciona en cualquier servidor web que tenga instalado una versión de PHP 5.2 o superior.

Así se ve el gestor en todo su esplendor:

Algunas de sus características principales:

  • Funcionan todas las operaciones básicas, incluso en servidores remotos.
  • Permite la creación y extracción de archivos (zip, rar, 7z, tar, gzip, bzip2).
  • Calcula el tamaño no solo de los archivos sino también de los directorios.
  • Menú contextual que brinda funciones básicas y útiles.
  • Miniaturas para imágenes.
  • Interface muy liviana.
  • Atajos de teclado.
  • Vistas con listas e iconos.
  • Les recomiendo visitar la web del proyecto para recibir más información sobre sus distintas formas de instalación. Inclusive encontraran un apartado en donde se indican distintas metodologías para su instalación en distintos entornos como Ruby on Rails, Django y muchos más.

    Web: elFinder

    Fuente: http://www.kabytes.com/programacion/gestor-de-archivos-con-jquery

Share this
20 Jun

Plantillas PSD gratis para diseño web

Les dejo una pequeña selección de plantillas PSD gratis para diseño web, son un total de 6 plantillas de paginas web para continuar el diseño de tus sitios en photoshop, todas estas plantillas PSD son gratis y las podrán descargar haciendo click sobre la imagen, espero sean de utilidad para ustedes ya que son una gran ayuda para diseñar paginas web, como ya antes hemos mencionado el hecho que sean gratis no significa que no mencionemos al autor y mucho menos que las apliquemos tal cual las descargamos pues este tipo de archivos son descargados por cientos de personas así que es recomendable modificarlas y aplicarles un poco de nuestro estilo antes de pasar a implementar.

PLANTILLAS PSD GRATIS

(hacer click sobre la imagen)
 

plantillas psd dark mobile Plantillas PSD gratis para diseño web

plantillas psd restaurant Plantillas PSD gratis para diseño web

plantillas psd onepage Plantillas PSD gratis para diseño web

plantillas psd modern Plantillas PSD gratis para diseño web

plantillas psd hosting Plantillas PSD gratis para diseño web

plantillas psd elegant Plantillas PSD gratis para diseño web

Share this
18 Jun

Plantilla para currículum vitae con detalles verdes en PSD

Este diseño se destaca por la efectividad de comunicación de la información, en una sola hoja, podrán colocar todo lo concerniente a su carrera profesional y la experiencia a través de espacios concretos bien diferenciados.

Descargar CV Resume Free PSD | FreePSDFiles

También, y como no puede ser de otra manera en esta época, hay un espacio destinado a la inclusión de perfiles en redes sociales variadas, allí verán ustedes cuáles son las que resultan útiles para mostrar su perfil y cuáles no. Con esto me refiero a que si se dedican a la animación, probablemente sea una buena idea incluir su cuenta en Vimeo para que el consultor tenga acceso a él y vea la calidad de su trabajo.

La plantilla se encuentra diseñada en Photoshop, con muy pocos pasos pueden cambiar tipografías y colores, aunque no recomendaría cambiar los espacios ya que se encuentran bien delimitados y desequilibrarían la página. Obviamente, queda a criterio de ustedes y la forma en la que desean presentarse. La única falla que veo es que no posee espacio para una fotografía, algo que suele requerirse en los trabajos. Por lo demás, creo que es un buen recurso para guardar y tener en cuenta.

Share this
16 Jun

Kit de elementos UI transparentes

En el último tiempo, hay diseñadores que utilizan las transparencias para realizar interfases sobre fondos texturados o de colores llamativos, este paquete de elementos UI está desarrollado justamente para tal función.

Creo que esta serie puede resultar útil para aquellos que quieren destacar sus propias imágenes y utilizar fotografías en el background, no se trata de elementos web particularmente sino que contiene botones e interfases dentro de lo que podríamos llamar interactivas o multimedia.

Descargar Transparent UI Kit | Design Kindle

Controles de reproducción de audio y video, scrolls, avatar, ecualizador y check boxes, son algunos de los elementos que podrán encontrar en esta plantilla de elementos transparentes, combinados con azul celeste, color que pueden editar como deseen y de esa forma destacar al mismo tiempo fondo y frente de manera satisfactoria.

Share this
14 Jun

Cuenta regresiva animada con jQuery

Muchas veces vemos cuentas regresivas en sitios que están a punto de lanzar nuevas versiones, o bien cuando estamos a punto de presenciar un gran evento. Crear estas cuentas regresivas no es nada complicado con JavaScript, no obstante si lo que buscamos es una cuenta regresiva animada y que sea atractiva visualmente, entonces jQuery Countdown puede ser lo que estamos buscando.

jQuery Countdown es un plugin jQuery, gratuito, que nos permite instalar una cuenta regresiva con apenas unas lineas de código. Y que a diferencia de otras cuentas regresivas cuenta con un diseño de lo más atractivo.

La cuenta regresiva se visualiza de la siguiente manera:

Pueden ver una demostración online directamente desde el sitio oficial del proyecto dentro de Google Code.

Ejemplo de uso:


$('#counter').countdown({startTime: "01:12:32:55"});

Ejemplo más avanzado:

$('#counter').countdown({
stepTime: 60,
format: 'hh:mm:ss',
startTime: "12:32:55",
digitImages: 6,
digitWidth: 53,
digitHeight: 77,
timerEnd: function() { alert('end!!'); },
image: "digits.png"
});

Para los más preocupados por el rendimiento, el plugin solo tiene como dependencia el framework jQuery, luego la biblioteca completa tiene un peso despreciable de apenas unos 1.7 KB.

El proyecto se encuentra liberado bajo licencia Apache 2.0, lo que nos da un muy buen nivel de libertad para su uso

Web: jQuery Countdown
Demo

Fuente: http://www.kabytes.com/programacion/cuenta-regresiva-animada-con-jquery/

Share this

© 2006 Miracle Design. Todos los derechos reservados