Archivo

Archive for the ‘Diseño Web’ Category

La Caja de Herramientas de un Diseñador: Principales Cosas de Adobe

26 de enero de 2019 Deja un comentario

Piense en Adobe Creative Cloud como la mejor caja de herramientas para diseñadores digitales. La colección de herramientas se conoció originalmente como Adobe Creative Suite y se vendió como un paquete de software. Ahora está disponible como un servicio de suscripción, también conocido como SaaS, o software como un servicio.

Creative Cloud o Creative Suite son aplicaciones que permiten a los usuarios crear, administrar y editar diseños e imágenes para Internet, impresión y dispositivos móviles. Puede suscribirse a aplicaciones individuales o al conjunto completo.

Tu abono a Creative Cloud incluye servicios gratuitos para ayudarte a encontrar inspiración, desarrollar tu creatividad y compartirla con el mundo. Encuentra la fuente, imagen o plantilla perfecta gracias a la tecnología de Adobe Sensei, crea y personaliza un portafolio, y muestra tu trabajo en la comunidad creativa más grande del mundo.

 

adobe2

 

Si está iniciando una carrera como diseñador independiente, sin duda está bien versado en Creative Cloud de Adobe. Si está buscando un diseñador, es útil conocer las aplicaciones clave de la colección para que pueda encontrar al candidato adecuado. Por ejemplo, si necesita un folleto diseñado para su empresa, necesitará un profesional en InDesign en lugar de Dreamweaver.

 

adobe creative cloud

 

A continuación se presentan los principales programas de Adobe:

 

creativecloud

 

Photoshop: “Photoshop” se ha convertido en sinónimo de lo que solía llamarse aerografía: alterar fotografías. Los anuncios y revistas son conocidos por usar Photoshop para hacer que las celebridades y los modelos se vean más delgados, eliminando manchas y arrugas y alterando los tonos de la piel. Aunque puede hacer mucho más. Con Photoshop puede modificar el tamaño, el color y la forma de cualquier elemento de una foto, así como colocar los elementos de una imagen en otra. ¿Le gusta el tema de la foto 1 pero prefiere el fondo de la foto 2? Photoshop le permite colocar el sujeto de la foto 1 en el fondo de la foto 2, o incluso eliminar el fondo o el sujeto por completo. En manos de un editor de fotos profesional, Photoshop puede ayudar a compensar las fotografías decepcionantes o las muestras de productos dañados. Ya sea un diseño de página web, personaje, icono o correo electrónico, la mayoría de los diseñadores encontrarán un uso para Photoshop. Y eso incluye a todos, desde diseñadores web y gráficos hasta diseñadores arquitectónicos e industriales. Photoshop es el programa de software más omnipresente para crear y manipular imágenes y mucho más.

Illustrator: esta herramienta permite a los usuarios crear y editar ilustraciones y otros gráficos vectoriales. Mientras que las fotografías se componen de una serie de pequeños puntos, los gráficos vectoriales son ecuaciones técnicamente matemáticas representadas como líneas y curvas. A diferencia de las fotos, que son imágenes de mapa de bits, los gráficos vectoriales se pueden ampliar o hacer más pequeños prácticamente en cualquier grado sin perder nitidez. En contraste, cuando una foto se amplía demasiado, los puntos que la componen se vuelven visibles, lo que hace que la imagen en su conjunto no se pueda distinguir (pixelada). Con Illustrator, los diseñadores pueden crear logotipos, dibujos animados, cuadros, diagramas y otros tipos de ilustraciones para usar en línea, en dispositivos móviles e impresión. La variedad de estilos posibles es virtualmente infinita, desde íconos perfectamente geométricos hasta imágenes desordenadas en forma de pastel. Mediante el uso de un lápiz óptico, puede incluso ‘pintar’ acuarelas.

InDesign: para el diseño de un folleto, un póster, una página de una revista o cualquier otro tipo de diseño de impresión, InDesign es su aplicación. Abarca las cuadrículas de diseño y la tipografía y le permite importar imágenes de Photoshop e Illustrator a su diseño. Los diseños de InDesign se pueden convertir fácilmente en publicaciones digitales como revistas electrónicas y pueden incorporar hipervínculos y códigos QR en los diseños.

Dreamweaver: Lo que InDesign es imprimir, Dreamweaver es para la web y el móvil. En otras palabras, permite a los usuarios diseñar, publicar y administrar sitios web y páginas web individuales. Aunque construye sitios en HTML, no necesita saber el código HTML para usar la aplicación. Puede trabajar en la pantalla WYSIWYG (lo que ve es lo que obtiene) o Diseño. El programa creará automáticamente el código, y usted u otro usuario pueden editarlo directamente en el código.

 

adobe1

 

Acrobat: si alguna vez ha abierto o leído un archivo PDF, ha utilizado Adobe Reader, anteriormente conocido como Acrobat Reader y parte de la familia de aplicaciones Adobe Acrobat. PDF es una abreviación de formato de documento portátil y permite que los documentos digitales, incluso aquellos con gráficos y URL, se transfieran, reciban y lean a través de múltiples software, hardware y sistemas operativos, así como para que estén preparados para la publicación impresa. Para los proyectos de equipo que requieren entrada y aprobación de múltiples partes, el PDF es un formato ideal que permite a cada persona agregar fácilmente sus comentarios. Adobe Reader se puede descargar gratis, pero solo podrá leer y comentar. Para crear y editar archivos PDF, debe pagar por Acrobat Standard o Pro.

Flash: en 2010, Apple decidió no admitir Flash en el iPhone, iPad e iPod. Esta carta de Steve Jobs explica las razones detrás de la decisión. Como resultado, la popularidad de Flash en el mundo del diseño se redujo rápidamente. Flash se usa principalmente para animaciones, medios de transmisión y juegos en la actualidad y se puede ver con Flash Player. Al igual que Adobe Reader, Flash Player es una descarga gratuita disponible que permite a los usuarios ver los medios.

Lightroom: una herramienta para fotógrafos y cualquier otra persona que mantenga una biblioteca de imágenes (un diseñador web, por ejemplo), Lightroom le permite organizar, importar y exportar archivos JPEG e imágenes en bruto. También puede permitirle realizar un retoque mínimo de las fotos, como recortar, enfocar y afinar colores y tonos. Hace esto de una manera no destructiva, editando lo que en realidad es una copia de la imagen en lugar de la imagen en sí.

After Effects: una herramienta de producción de vídeo, After Effects prácticamente hace honor a su nombre. Permite a los usuarios agregar efectos especiales a un vídeo, ya sea acción en vivo o animación, después de que se haya creado. Puede alterar los colores, agregar y animar texto y gráficos, permitir la incrustación de pantalla azul y verde, e introducir efectos que van desde toallitas a deformaciones. Al igual que Lightroom, le permite trabajar de manera no destructiva, de modo que el vídeo original permanezca inalterado.

 

Bluehost hosting

Anuncios

9 Recursos en línea para los dueños de las tiendas que pueden utilizar para crear bonitos Contenidos de Marketing

12 de octubre de 2014 Deja un comentario

Como dueño de una tienda en línea, entiende la importancia de un bello diseño en toda su presencia en línea. Saben que los grandes diseños conduce a más ventas y más ingresos.

Sin embargo, si es como la mayoría de los dueños de tiendas en línea probablemente no tiene un fondo con diseño y años de experiencia con herramientas como Photoshop e Illustrator.

Entonces, ¿cómo se puede crear hermosos contenidos de marketing que impulsen un mayor número de conversiones y de ingresos?

Cuando nos estaban poniendo a nuestra guía sobre cómo obtener mejores resultados de marketing con un hermoso diseño, pasamos incontables horas de búsqueda en la Web con las herramientas, plantillas  y los recursos que podrían ayudar a las personas  para que puedan crear hermosos contenido de marketing.

En este post, hemos querido compartir algunos de nuestros favoritos  para ayudarle a crear hermosos contenidos de marketing que impulsen los resultados de su tienda.

1. Canva

Canva es una gran herramienta para crear hermosas imágenes de marketing. Contiene miles de hermosas imágenes y, a continuación, puede agregar diferentes elementos, tales como texto, banners, botones, etc. en la parte superior, para crear una auténtica obra de contenido de marketing visual. ¿Qué juegos tiene Canva, aparte de arrastrar y soltar sobre el editor visual? lo que significa que puede simplemente seleccionar los elementos que desee y la función de arrastrar y soltarlos en el lugar exacto que desee.

He aquí algunos ejemplos de imágenes creadas con Canva:

Canva2

2. PlaceIt

PlaceIt es una gran herramienta para la exhibición de imágenes de la aplicación, sitio web o producto digital en diversos dispositivos. Puede subir una imagen desde su ordenador o introducir una URL, y PlaceIt va ‘tomar’ la imagen y ‘colocarla’ dentro de la pantalla de su elección.

¿Qué hace PlaceIt tan grande para los propietarios de tiendas como la suya?es su gran variedad de pantallas y dispositivos, lo que significa, que puede agregar fácilmente sus capturas de pantalla para todo, desde un Samsung Galaxy sentado en un escritorio a un Pro MacBook en un banco del parque.

He aquí algunos ejemplos de imágenes creadas usando PlaceIt:

Placeit

Placeit 2

3. Death To The Stock Photo

Death To The Stock Photo es un servicio de suscripción gratuita que le envía correos electrónicos con un puñado de hermosas fotografías cada mes para el uso en su contenido de marketing.

El hecho de que sólo tiene unas cuantas imágenes enviadas cada mes puede hacer que la cosa sea difícil, si necesita una imagen específica para una campaña específica, pero también hay una opción premium que le da acceso a todo el archivo de fotos y le permite descargarlas cuando las necesite.

A nivel personal, yo soy un gran admirador de la gran fotografía, así que me suscribo sólo para conseguir algunas fotos hermosas en mi bandeja de entrada cada mes.

He aquí un ejemplo de inventario de fotografos disponibles en Death To The Stock Photo:

imagenes

4. Graphic River

Graphic River es un mercado de diseño donde los diseñadores profesionales pueden subir sus propietarios trabajos y almacenar, alguien como usted puede comprar para su uso en su contenido de marketing. Hay más de 285.000 artículos a la venta en Graphic River y el sitio está bien categorizado-con gran funcionalidad de búsqueda, por lo que es fácil encontrar el punto exacto que está buscando.

Para los propietarios de tiendas en línea como, hay algunos grandes iconos y banners en el sitio que pueden ayudar a hacer su próxima pieza de marketing o promoción más atractiva a la vista.

Éstos son algunos ejemplos de banners disponibles para la venta en Graphic River:

Graphic River

5. SnagIt

SnagIt hace que sea fácil capturar imágenes y vídeos de todo lo que se ve en la pantalla, y puede ser muy bueno para capturar capturas de pantalla de su sitio web para su uso en su contenido de marketing.

Lo que diferencia a SnagIt aparte de que está construido-en la edición de habilidades- que permite modificar la pantalla antes de guardarlo. Con SnagIt, puede fácilmente:

  • Añadir elementos a las capturas – Puede añadir fácilmente el texto, globos de texto, flechas, círculos, y más a las capturas de pantalla para resaltar ciertos elementos clave en su pantalla o proporcionar algunos comentarios e información adicional.
  • Añadir efectos a las capturas – Puede agregar fácilmente efectos como sombras, reflejos, decoloración y más a sus imágenes para darles ese aspecto de diseño profesional.

He aquí algún ejemplo de imágenes capturadas utilizando SnagIt y añadiendo texto:

Snagit

6. IM Free

IM Free es una página web de stock de fotografías que ofrece miles de hermosas fotografías de archivo de forma gratuita.

La fotografía en el sitio está muy por encima de la media, las fotos que encuentra en otro lugar en la Web, y todas las imágenes están muy bien categorizadas, por lo que es fácil encontrar una hermosa fotografía de stock para su contenido de marketing.

He aquí un ejemplo de fotos de stock disponible de forma gratuita en IM Free:

im fREE

7. Canvas

Canvas es un constructor de la plantilla de correo electrónico única de Campaign Monitor que le permite crear fácilmente campañas de correo electrónico en HTML hermosas en minutos.

Lo que diferencia a Canvas aparte que es la única interfaz de arrastrar y soltar. La mayoría de los editores correo electrónico sólo le permite agregar texto e imágenes en los lugares establecidos por la plantilla, sin embargo, en Canvas puede literalmente arrastrar y soltar imágenes, texto, botones  y más en cualquier diseño que desee.

Todos los correos electrónicos creados por Canvas responden por lo que lucen muy bien en los dispositivos móviles, y una vez que haya terminado de crear la campaña de correo electrónico, puede inscribirse para una cuenta para enviar el correo electrónico y ver los resultados, o puede descargar el correo electrónico como HTML y enviarlo desde su herramienta de correo electrónico.

Aquí están algunos ejemplos de hermosas las campañas de correo electrónico creadas con Canvas:

Canvas

8. The Noun Project

The Noun Project es una colección en línea de iconos gratuitos y de pago que usted puede descargar y utilizar en su contenido de marketing.

The Noun Project es básicamente, la ventanilla única para los iconos. Dispone de una gran funcionalidad de búsqueda que le permite encontrar lo que necesita para los iconos de su contenido y una búsqueda simple de términos como “avión” o “libro” volverá cientos de los iconos que se pueden utilizar.

A continuación, se muestran algunos ejemplos de los iconos que se pueden encontrar en The Noun Project:

Iconos

9. Plugin Web Developer para Chrome

¿Alguna vez ha mirado a otro sitio web o tienda en línea y quería saber qué colores estaban usando, o qué imágenes se presentaron?

Web Developer es un plugin para Google Chrome que le permite a su navegador un poco de funcionalidad adicional. Mientras que su dirigida principalmente a los desarrolladores, hay unas pocas herramientas útiles para aquellos que quieran crear hermosos contenidos de marketing, incluyendo:

  • Una regla  – Web Developer incluye una regla que permite medir las dimensiones de un determinado elemento y obtener la altura exacta y anchura en píxeles. Si va a crear imágenes o contenido para un tamaño en particular, esta es una gran herramienta para la elaboración de las dimensiones que necesita para trabajar en su interior.
  • Un selector de color  – Web Developer incluye un selector de color que permite hacer clic en una parte determinada de un sitio web y ver exactamente de qué color es esa parte. A continuación, puede utilizar ese color en sus propios diseños de marketing.
  • Un navegador para diferentes tamaños de pantalla  – Web Developer le permite cambiar el tamaño de su navegador para diferentes tamaños de pantalla populares en diversos dispositivos, como los móviles, tablets, ordenadores portátiles de escritorio. Esto le permite ver lo que se ve en su contenido como en diferentes tamaños de pantalla y hacer los cambios necesarios para asegurar que se ve muy bien en todas partes.

Conclusión

Con la creciente cantidad de campañas de correo electrónico y posts en los medios sociales que compiten por la atención de los clientes, nunca ha sido más importante para abrazar el poder de un hermoso diseño en los resultados de marketing.

Aprovechando algunas de estas herramientas, los dueños de las tiendas en línea puede convertirse en magistrales artistas digitales, creando campañas de marketing muy bien diseñadas que aumentarán el tráfico, las ventas y los ingresos.

Artículos relacionados:

Construir una tienda online utilizando sencillas herramientas de comercio electrónico

30 Herramientas Gratuitas para la Visualización y el Análisis de Datos

Las Mejores 100 Herramientas para la Formación y la Productividad

Una Comparación de Herramientas de Blogging para Profesores y Estudiantes

+60 Mejores Temas Premium-Gratuitos para Magento 2014

+10 Temas de WordPress para Colegios, Escuelas y Universidades

+ 50 Mejores Temas de WordPress Responsive

Mojo_468x60_Browse100s

6 Herramientas Para Ayudar a los No Diseñadores a Crear Grandes Imágenes

29 de mayo de 2014 Deja un comentario

La creación de grandes imágenes para su SMB es más importante que nunca. Los medios sociales sigue poniendo énfasis en las imágenes, al permitir a las empresas crear grandes fotos de portada y banners para sus páginas de Facebook, páginas de Google+, canales de YouTube, páginas de empresa en LinkedIn y ahora los nuevos perfiles en Twitter. La mayoría de las redes, incluso han hecho que las imágenes compartidas sean más prominentes en sus alimentos.

¿No es un diseñador? No es un problema. Hay algunas herramientas fáciles de usar por ahí que pueden hacer que se vea como un diseñador sin serlo. Aquí están algunas de mis favoritas que le puede ayudar con una variedad de necesidades de diseño.

 

Canva

 

Canvas

 

¿Necesita una imagen para usar como un post social media, foto de portada en Facebook, presentación fondo de diapositiva, el blog gráfico, tarjetas de visita, u otros soportes de impresión? Si es así, entonces Canva es una gran herramienta para probar. Tienen cientos de plantillas que se pueden personalizar para una variedad de usos, tanto en línea como fuera de ella. Puede incluso agregar sus propias fotos, o usar la fotografía que ofrecen dentro de su plataforma. Lo mejor de todo es que si no necesita una fotografía, puede utilizar esta herramienta para crear todas las imágenes que desee de forma gratuita.

Un consejo: si no encuentra una plantilla que le gusta en un área de la herramienta (como la cobertura perfecta en Facebook), mire en otra área. Puede ser capaz de crear una gran cubierta de Facebook utilizando una plantilla a partir de las diapositivas de la presentación y simplemente recortarla hasta el tamaño adecuado para Facebook.

 

Piktochart

 

PIKTOCHART

 

Las Infografías tienden a propagarse como un reguero que cuando tienen una perfecta combinación de datos interesantes y útiles junto con un hermoso diseño. Piktochart puede ayudarle a crear una gran infografía que se puede utilizar para compartir datos muy ricos con el público y potenciar su visibilidad para su negocio. Tienen más de 100 temas para elegir para su infografía, con precios que comienzan en 29 $ por mes (o menos si paga la suscripción trimestral o anual).
Si no está seguro de cómo empezar con infografía, eche un vistazo a lo que otras empresas están haciendo en busca de inspiración. Puede buscar rápidamente una infografía en Pinterest para ver cuáles obtienen el mayor interés en una amplia gama de temas.
.

Wordle

 

WORDLE

No paguen por palabra de imágenes en sitios de nubes de gran stock de fotografías. Haga la suya propia con Wordle. Simplemente introduzca las palabras que desea mostrar, y obtendrá una palabra nube que se puede personalizar con diferentes tamaños de fuente, color de fuente y color de fondo.

El único inconveniente de esta herramienta gratuita es que no le permiten descargar la imagen que ha creado, por lo que tendrá que utilizar una captura con el programa Jing de captura de pantalla y guardarlo como PNG.  Y recuerde, las capturas de pantalla pueden hacer grandes imágenes cuando sea aplicable a su contenido, y lo mejor de todo es que es gratis.

 

Aviary

 

AVIARY

 

Si desea crear imágenes con su Android o dispositivo móvil iOS, entonces debe usar Aviary. Esta aplicación viene con 20 herramientas que le permite ir más allá de los filtros Instagram. Puede aplicar efectos de mejora rápida, utilice los filtros, marcos, superpuesto con pegatinas, cambiar la orientación, recortar, ajustar brillo, nitidez, color splash, dibujar, añadir texto, corregir ojos rojos, blanquear los dientes, blur, corregir las imperfecciones, e incluso su foto en un meme.

Es el último editor de fotos para dispositivos móviles y lo mejor de todo, es fácil y de uso gratuito. Y si necesita más filtros, marcos, pegatinas, y otras opciones, se pueden comprar cuando los necesite.

 

LogoGarden

 

Crear imagenes

 

Para aquellos que reciéntemente están entrando en un nuevo negocio, es muy difícil imaginar cientos de euros en un logotipo. ¿Qué pasa si puede hacer uno de forma gratuita? LogoGarden es una herramienta gratuita en línea que le ayuda a crear rápidamente un logotipo profesional. Para ello, sólo tiene que elegir entre cientos de símbolos que mejor representan su negocio, elegir las fuentes y, a continuación, añadir el nombre de su empresa y línea de etiquetas.

Si no está seguro de cómo empezar, eche un vistazo a los cientos de muestras que tienen en su galería de todos los sectores de la industria.

 

Imgflip Meme Generator

 

imgflip

 

¿Quiere agregar un poco de humor a su contenido y acciones sociales? Pruebe Imgflip Meme Generator. Esta herramienta gratuita le permitirá agregar un poco de mal humor Cat, Dux y el condescendiente Willy Wonka para alegrar su día a la audiencia. No cabe duda para compartir contenido de imagen. Sólo recuerde que no debe ir demasiado lejos sobre los memes – usarlos de vez en cuando para darle vida a su blog social o posts.

Si desea aprender sobre el uso general de ciertos memes, puede buscar para ellos en base de datos Know Your Meme. Y no olvide que puede crear sus propios memes personalizados utilizando su dispositivo móvil y la aplicación Aviary que hemos mencionado anteriormente.

P.D. La página principal de este sitio muestra las últimas memes enviadas por los usuarios. Tenga en cuenta que algunas son NSFW.

 

Ahora a empezar a crear

 

Gracias a estas impresionantes herramientas basadas en la Web, no tiene que ser un diseñador o disponer de un ordenador potente para crear imágenes profesionales que al público les gusta ver y compartir. Experimentar con estas herramientas para ver como mejorando la calidad de los gráficos puede mejorar su contenido y actualizaciones en los medios sociales. Y si crea una infografía o vídeo, asegúrese de darles un impulso promocional extra para lograr los mejores resultados posibles para su negocio.

¿Quiere leer más posts como este? Los comentarios son importantes para todos. Muchas gracias a todos los lectores

 

Artículos relacionados:

 

17 Herramientas para Presentaciones

+35 Herramientas de Audio

Apoyar a sus Clientes con Vídeos y Tutoriales Impresionantes

 

kindle-fire-hdx

 

Enhanced by Zemanta

Infografía: Crear un Diseño Responsive para el Email

27 de mayo de 2014 Deja un comentario

El correo electrónico móvil está aumentando, con aproximadamente en un 50% del correo electrónico que se abre en un dispositivo móvil. La mayoría del correo electrónico a través del móvil se abre en el iPhone, con Android e iPad relativamente en partes iguales.

Es crucial que los profesionales de marketing entiendan este cambio y sepan adaptarse en consecuencia. ¿Por qué? Ya que, aun cuando se escribe un correo electrónico perfecto con bellas imágenes y una perfecta copia, eso no significa que podrán leerlo. Una encuesta realizada por BlueHornet pedía a los usuarios lo que iban a hacer si un correo electrónico a través del móvil no era bueno. El 80,3 % afirmaban que lo eliminaban, y el 30,2 % diciendo que iban a darse de baja.

Si su correo electrónico no es algo que esté bien, la gente lo eliminará. Todos los mensajes de correo electrónico que envíe deben mirar perfecto, sea cual sea el dispositivo.

Así que ¿cómo se puede enviar el mismo mensaje de correo electrónico a todos los usuarios de su lista de suscriptores y asegurar el formato?

Mediante las prácticas de diseño Responsive.

Un correo electrónico “Responsive” (o página web) significa que proporciona un diseño óptimo a través de los dispositivos. “Responde” al dispositivo que se está utilizando. Al verlo en el móvil, un sitio web bien diseñado como responsive garantiza al usuario que no tiene que pinchar y hacer zoom. Una página web tiene que ser un sitio web usable.

Los correos electrónicos responsive deben tener este aspecto en el escritorio:

Infographic Creating a Responsive Email Design

Este es el aspecto en un dispositivo móvil:

responsive-email-mobile 2

 

El diseño del los cambios en el correo electrónico para que se ajuste a un dispositivo móvil. Ajustar las imágenes al tamaño adecuado y la CTA se mueve para un clic para que se de un toque. También se debe tener en cuenta el cambio de copia en la CTA. Cuando en el móvil, la CTA dice: “la aplicación y probar ahora”.  Se trata de unas mucho más adecuadas y específicas CTA.

¿Desea aprender cómo hacer que su cuenta de correo electrónico sea como ésta? Eche un vistazo a esta infografía, cortesía de la gente en Litmus:

 

how-to-responsive-email-design-infographic 3

 

Artículos relacionados:

 

 

Theme Junkie

 

¿Qué es Glogster EDU?: Plataforma de Educación Global Para la Expresión Creativa

14 de marzo de 2014 Deja un comentario

Glogster EDU es la plataforma de educación global para la expresión creativa de los

Ejemplo de Glogconocimientos y las habilidades en el aula y fuera de ella.
Motiva a los educadores y estudiantes con la tecnología para crear GLOGS – posters multimedia en línea – con texto, fotos, vídeos, gráficos, sonidos, dibujos, archivos adjuntos de datos y más.

Glogster EDU es muy fácil de usar, ahora más de 7.000.000 personas (incluyendo a los estudiantes tan jóvenes como de 4 años de edad) en todo el planeta están cosechando los beneficios de este sistema asombroso.

Un GlOg se crea usando una aplicación muy fácil de entender, arrastrar y soltar en la interfaz que sea relevante, agradable, y escalable para los estudiantes de todas las edades y estilos de aprendizaje. Un Glog es una plataforma visual interactiva en la que los usuarios crean una ‘página de cartel o web’ que contiene elementos multimedia, incluyendo texto, audio, vídeo, imágenes, gráficos, dibujos, y los datos.

  • Galerias Gráficas
    (imagen, vídeo, audio, texto)
  • Subir archivos/Enlaces/Grabar
    (imagen, vídeo, audio)
  • Web cam
  • Animación
  • Adjuntos
  • Muro Glog y Muro Página
  • Dibujos

Glogster EdU

Beneficios

 

Glogster EDU amplia la alfabetización digital  creando un entorno de aprendizaje digital, donde los profesores y los estudiantes aprenden la tecnología en un formato fácil de usar y escalable, que simplifica el proceso educativo y produce resultados multimodales evaluables a través del espectro currículo.

Glogster EDU permite el dominio de las normas , permite a las escuelas públicas o privadas, distritos, estados y a las instituciones de enseñanza de todo tipo, satisfacer y superar la tecnología educativa y los estándares de contenido temático para la creatividad y la innovación, la comunicación y la colaboración, la investigación y la información fluida, el pensamiento crítico, la solución de los problemas y la toma de decisiones, y la ciudadanía digital.

Glogster EDU promueve la independencia de los problemas creando un entorno de aprendizaje innovador para todos los estudiantes, independientemente de la edad, el género, la cultura o estilo de aprendizaje. Se alienta a los estudiantes a ser independientes en la resolución de problemas, la inventiva y el aprendizaje.

El formato de Glogster EDU demuestra comprensión de los objetivos del programa de estudios, anima a los estudiantes a expresarse de forma independiente y con pensamiento creativo, y ser competente y confíar en los solucionadores de problemas. Glog y la docencia sobre la base de las estrategias de aprendizaje facilitan dicho desarrollo, y abre las posibilidades de diseño de nuevos planes de estudio para satisfacer los objetivos de la educación.

La plataforma Glogster EDU cumple los principios UDL* (Diseño Universal para el Aprendizaje): múltiples medios de representación, con el fin de dar a diversos estudiantes opciones para adquirir información y conocimiento; varios medios de acción y de expresión, proporciona a los estudiantes las opciones para demostrar lo que saben; y múltiples medios de participación, a fin de aprovechar los intereses de los alumnos, ofrecer retos apropiados y aumentar la motivación.

Glogster EDU mejora las evaluaciones formativas y sumativas,  mejora las conexiones entre el currículo, la instrucción, y los métodos de evaluación. Glogster EDU, aumentará la eficacia de las evaluaciones sumativas y ampliará el alcance y la naturaleza de las evaluaciones formativas.

Glogster EDU  suministra distintas actividades instruccionales,  promueve un balance positivo entre la adquisición de conocimientos de hechos, el dominio de los conceptos y las habilidades, y el uso imaginativo de los multi-medios de comunicación y los recursos relevantes de Internet.

 

Características

 

Glogster EdU2

 

La interfaz de creación de un Glog se crea usando una aplicación muy fácil de entender, arrastrar y soltar en la interfaz que sea relevante, agradable, y escalable para los estudiantes de todas las edades y estilos de aprendizaje. Un Glog es una plataforma visual interactiva en la que los usuarios crean una ‘página de cartel o web’ que contiene elementos multimedia, incluyendo texto, audio, vídeo, imágenes, gráficos, dibujos, y los datos.

Crear proyectos de plan de estudios basados en clases, grupos, equipos o individuos, que el profesor puede trabajar con los estudiantes en un aula o a través de la instrucción a distancia utilizando esta plataforma multimedia – un sistema comunitario de intercambio se prepara en donde se almacena el trabajo de los estudiantes y está disponible en cualquier momento . El profesor crea proyectos con plantillas y directrices de instrucción, las asigna a los estudiantes, proporciona retroalimentación a lo largo de la asignación, y evalúa su trabajo terminado.

Las presentaciones GLOG. Compartir proyectos estudiantiles, con el profesor en clase, la escuela, el distrito o más allá cuando los proyectos se han completado, el profesor puede compartir el trabajo de los estudiantes en una variedad de entornos educativos. Los GLOGS se pueden incrustar en un blog, wiki, o en una página web, o compartirlos con otras personas que utilizan capacidades de presentación innovadoras de Glogster EDU. Elija proyectos de estudiantes ejemplares y demuestre los logros de los estudiantes con los padres, administradores, estudiantes, y otros educadores.

Aprendiendo en un ambiente seguro privado para Profesores y Estudiantes. El Profesor crea fácilmente un aula virtual privada con los estudiantes mediante el registro de una cuenta maestra administrada, genera cuentas de los estudiantes con los inicios de sesión y contraseñas seguras, y el seguimiento de todas las actividades dentro de la cuenta durante todo el proceso de aprendizaje. Las cuentas de los estudiantes pueden ser creadas sin proporcionar direcciones de correo electrónico u otra información de contacto. El Dashboard del Profesor ofrece acceso directo a todos los estudiantes, los proyectos, y otras actividades.

Simples múltiples sujetos y dashboards para Profesores y Estudiantes, con un usuario y contraseña para todos los educadores que utilizan la plataforma creativa de Glogster EDU, que tienen acceso directo a los estudiantes individuales a través de un portal único – el Dashboard Profesor. No sólo pueden los maestros ver toda la actividad del estudiante en su propio tablero de instrumentos del profesor, cada alumno también puede ver y administrar fácilmente todas sus clases y proyectos dentro de su tablero de instrumentos del Estudiante. Un único nombre de usuario y contraseña le proporcionará a cada profesor y estudiante un acceso completo a múltiples actividades en el aula. En un futuro próximo, los administradores tendrán un único acceso, inicio de sesión seguro para el monitoreo de distrito o de nivel estatal en todas las actividades en Glogster EDU.

English: Glog from Glogster EDU

Glog de Glogster EDU (Foto crédito: Wikipedia)

Resumen

 

Glogster es una red social que permite a los usuarios crear Glogs, que son carteles interactivos que permiten a los usuarios expresar su estado de ánimo, sus sentimientos, o cualquier cosa que deseen expresar. Glogster se ha vuelto tan popular en el mundo de la educación que lanzó Glogster EDU, una plataforma de aprendizaje colaborativo para profesores, educadores y escuelas. El sitio tiene más de 600.000 docentes, 7 millones de estudiantes, 8 millones de glogs y hay 12 glogs publicado cada minuto. Las cosas interesantes de las redes sociales son que el usuario puede empezar a determinar cómo una herramienta será utilizada, y el hecho de que Glogster se haya contagiado por la educación no es probablemente por accidente vs. diseño. Por eso, apuesto a que sorprende Glogster para ver como la gente utiliza la herramienta para crear.

*UDL:  UDL tiene tres principios que animan a los educadores a preguntar, “¿Está este currículo diseñado para maximizar el aprendizaje para todos los estudiantes?” Hacer esta pregunta simple pero a la vez muy compleja cambia el enfoque de ver a un estudiante como no apropiado para el reconocimiento de que el currículo presenta barreras, que interfieren con el aprendizaje (Rose & Meyer, 2002). Es el currículo, no el estudiante, el que necesita ser arreglado. Adicionalmente, la metodología UDL cambia el enfoque de un currículo de memorización y regurgitación de la información al dominio del proceso de aprendizaje. La meta de la educación en el siglo 21 es ayudar a los estudiantes a convertirse en aprendices ingeniosos y estratégicos y prepararlos para una vida de aprendizaje. Cualquiera que desarrolle o implemente las clases o currículos puede usar los principios UDL para asegurarse de que sus metas, materiales, métodos y evaluaciones educativas satisfacen las diversas necesidades de todos los aprendices.

 

Artículos relacionados:

 

Aplicaciones iPad para Profesores
+10 Temas de WordPress para Colegios, Escuelas y Universidades
Las mejores herramientas Web 2.0 para Profesores
¿Es usted un Líder Colaborativo?
Cómo crear un curso Udemy
¿Qué es Zotero?: Un software GRATUITO de gestión de citas
¿Qué es el LMS?: Learning Management System
¿Qué es SCORM & Tincan?


Los  Mercados Online de Envato: ebooks, tutoriales, plugins, vídeos, cursos, temas para WordPress y App

Enhanced by Zemanta

+45 Infografías Interesantes y Útiles para Diseñadores Web

6 de marzo de 2014 Deja un comentario

La infografía es una gran manera de presentar la información de una manera que es fácil para la mayoría de la gente entienda. Mucha gente aprende visualmente, y se puede obtener una mejor comprensión de lo que está tratando de decir si lo muestra gráficamente.

Como diseñadores, las infografías pueden presentar información a nosotros que beneficia a nuestros negocios de diseño, y nos da una visión más clara de las tecnologías de los que dependemos para nuestro sustento. A continuación se presentan +45 infografías que son útiles y / o interesantes, y que se relacionan directamente con el mundo del diseño web.

 

Interesantes Infografías

 

Estas infografías pueden no proporcionar la información que directamente está relacionado con el negocio y la práctica de diseño de páginas web, pero aún así se refieren a la Web en general, y pueden ser de interés para los diseñadores y desarrolladores:

Teoría del Color: The ABC’s of RGB es un desglose completo del modelo de color RGB. Una guía útil para todos los que trabajan en la Web.

Teoría del color-The ABC of RGB

The Darwinian Evolution of Photoshop — Esta infografía muestra la evolución del Photoshop, incluyendo los doce versiones principales y las diferencias entre ellas.

The Darwinian Evolution of Photoshop

The Journey of a Tweet — Esta infografía muestra el potencial recorrido de una foto publicada en Twitter a través de los medios sociales y el resto de la Web.

journey-of-a-tweet

The Biggest Shift Since the Industrial Revolution — Esta infografía muestra el cambio en el contenido y las relaciones a medida que avanzan a los medios de comunicación social.

The Biggest shift since the industrial revolution

Are We Addicted to the Internet? — Aquí hay una extensa infografía hablando del nivel de uso de Internet en los EE.UU., los signos potenciales y los niveles de adicción.

Are We Addicted to the Internet _ Flowtown flowtown

Marketing With the Masses: The Science of Word of Mouth — Esta infografía desglosa los efectos del marketing boca a boca, así como su funcionamiento y donde sucede.

Marketing witt the masses

Going Local — Esta infografía, creada por GigaOM por Column Five Media, muestra la participación de mercado y otra información para seis de los más populares servicios web basados ​​en la localización (Gowalla, Foursquare, MyTown, Brightkite y Geodelic).

Going Local

All You Need to Know About Web Designers — Aquí está un gráfico interesante que divide los datos demográficos de los diseñadores de la Web por todo el mundo.

All You Need to Know About Web Designers

Why Brands Cannot Ignore Social Media Mavens — Esta infografía informal muestra qué expertos en medios sociales son vitales para el éxito de marketing en línea de la marca.

Why Brands Cannot Ignore Social Media Mavens

B2B Social Media Marketing — Aquí está una infografía que ilustra las estadísticas sobre el B2B de marketing en los medios sociales, incluyendo las predicciones y la efectividad de los diferentes canales de futuros.

B2B Social Media Marketing

Everbody’s Doing It: How Marketers Are Utilizing Social Media in 2010 — Esta infografía ofrece una visión general de cómo las empresas están utilizando los medios sociales para promocionarse y sus productos, así como sus actitudes hacia los medios de comunicación social.

Everbody’s Doing It, How Marketers Are Utilizing Social Media in 2010

Anatomy of a Search Marketer — Esta infografía de SEOmoz muestra las respuestas a su SEO Industry Survey 2010.

Anatomy of a Search Marketer

DIY Guide to Successful Linkbait Infographic — Las Infografías se pueden utilizar para proporcionar la instrucción, así como los hechos que solo se presentan. En este ejemplo se hace un gran trabajo en proporcionar instrucciones paso a paso para la creación de contenidos de Internet más populares.

DIY Guide to Successful Linkbait Infographic

Why Do We Follow Companies on Twitter? — Esta simple infografía desglosa los resultados de una encuesta realizada a 1.500 consumidores sobre cuáles son sus motivaciones para seguir las marcas en Twitter.

Why Do We Follow Companies on Twitter.

The Business Behind Facebook — Alguna vez se preguntó ¿cómo Facebook hace su dinero y cuál es su modelo de negocio basado en…? Esta infografía explica todo en términos generales y las cifras reales en dólares.

The Business Behind Facebook

Understanding Google PageRank — Esta infografía muestra exactamente cómo funciona el sistema PageRank de Google, incluyendo cómo los diferentes tipos de enlaces entrantes afectan su rango de forma diferente.

Understanding Google PageRank

A Guide to Internet Memes — Aquí está una infografía que muestra una variedad de memes populares, empezando por The Baby Dancing e incluyendo Rickrolling y The Hamster Dance, con la historia de cada meme.

A Guide to Internet Memes

The Most Popular Design Blogs by Twitter Followers and Facebook Fans — He aquí una excelente infografía que muestra los más populares blogs relacionados con el diseño por ahí, que se muestran en función de sus seguidores y fans de Facebook y Twitter.

The Most Popular Design Blogs

History of the Internet — He aquí una interesante infografía que muestra algunos de los principales hitos en la historia de Internet, a partir de 1962.

History of the Internet

Famous Rivalries: Facebook vs. Everyone — Esta infografía muestra la historia de rivalidades de Facebook con otros servicios en línea.

Famous Rivalries Facebook vs Everyone

How Android is Taking Over — Esta infografía de GigaOM muestra como los smartphones Android están ganando cuota de mercado y es probable que continúen haciéndolo mediante la comparación de todos los principales sistemas operativos de smartphone.

How Android is Taking Over

Google vs. Apple — Esta infografía de GigaOm muestra la rivalidad entre Google y Apple, en forma de línea de tiempo.

Google vs Apple

The App Store Economy — Aquí está una infografía de principios de 2010 que muestra la economía en torno a App Store de Apple, por los números.

The Appp Store Economy

2010 Cloud Computing State of the Union — Esta infografía muestra lo que está sucediendo en el mundo de la computación en la nube y la virtualización, basada en una encuesta realizada por Zenoss.

2010 Cloud Computing State of the Union

The Social Buying Universe — Aquí está una infografía que muestra el mundo de compras sociales, incluidos los servicios como Groupon y Living Social, y su influencia.

The Social Buying Universe 2ND Dimension

The Rise of the Cloud — Esta infografía de GigaOM ilustra la demanda de software basado en la Web y el almacenamiento, así como el sentimiento público hacia esos servicios.

The Rise of the Cloud

How to Get Rid of Villains in Social Media — Esta infografía, basada en el post de Todd Heim “8 Villanos de los Medios de Comunicación Social“, muestra como derrotar a los villanos presentes en los medios sociales, incluidos los escépticos, los trolls,“y los enlace desvergonzados.

How to Get Rid of Villains in Social Media

Meet iPad’s Competition — Esta infografía muestra lo que la competencia principal del iPad está en el mundo de la informática, los juegos, y los e-readers.

Meet iPad’s Competition

Social Marketing Compass — Esta infografía muestra los diferentes aspectos del marketing en los medios sociales, y en que zonas diferentes de los tipos de usuarios debería concentrarse.

Soccial Marketing Compass

The Hierarchy of Digital Distractions — Aquí está una infografía similar a Hierarhcy of Needs de Maslow, pero en vez ilustra distracciones comunes digitales (como Twitter, correo electrónico, y diferentes tipos de usuarios).

The Hierarchy of Digital Distractions

Flickr User Model — Aquí está una mirada visual en el modelo de usuario de Flickr, y lo que potencialmente le sucede a una foto una vez que se contabiliza en Flickr.

Flickr User Model

Facebook Factbook — Aquí está una mirada visual en los primeros seis años de Facebook y es un crecimiento fenomenal.

Crecimiento Facebook 6 primeros años

The Social Media Effect — Esta infografía muestra lo que puede suceder, posiblemente, a los contenidos en línea, una vez que empieza a ser aprobado por los distintos canales de los medios sociales.

The-Social-Media-Effect-Small

Internet Censorship — Esta infografía muestra el estado de la censura de Internet en todo el mundo a partir de 2010, incluyendo el que los países más fuertemente censuran a sus usuarios de Internet.

internet-censorship-report-infographic

How Google Works — Esta infografía muestra como Google indexa y clasifica el contenido en Internet, en formato de diagrama de flujo.

How Google Works

The CMO’s Guide to the Social Landscape — Esta infografía muestra lo diferentes servicios de los medios sociales que son buenos para los diferentes tipos de marketing de contenidos (comunicación con el cliente, la exposición de la marca, dirigir el tráfico a su sitio, y el SEO).

The CMO's Guide To The Social Media Landscape

What Are People Really Buying Online — Esta infografía estilo gráfico circular muestra lo que la gente realmente compra en línea, y lo compara con lo que compran en las tiendas.

What Are People Really Buying Online

Who Participates and What People Are Doing Online — Esta tabla muestra los diferentes tipos de usuarios de Internet y lo que realmente hacen en línea.

Who Participates and What People Are Doing Online

Casting a Wider Net with Social Media — Esta simple infografía muestra cómo publicar y compartir contenidos a partir de los sitios de los medios sociales que pueden aumentar el tráfico de su sitio.

Casting a Wider Net with Social Media

Building a Company with Social Media — Esta infografía muestra cómo los medios sociales pueden ser utilizados por cada departamento de una empresa para construir esa sociedad.

Social Media Building

The Blogosphere We Call Home — Esta infografía rompe la blogosfera en términos de quién son los blogs, lo que están en los los blogs, y la cantidad de tiempo que están gastando en hacerlos.

the Blogospherewe call home

U.S. Data Consumption in One Day — Esta es una infografía increíble que muestra la cantidad de datos es consumida por las personas en los EE.UU. en un solo día.

U.S. Data Consumption in One Day

Five Years in History of Online Video — Esta infografía muestra la prevalencia del vídeo en línea y como cambió entre 2004 y 2009.

Five Years In History of Online Video

Profile of a Twitter User — Esta infografía muestra los tipos más comunes de los usuarios de Twitter y qué hacer con ellos.

twitter-users-profile1-600x450

How Much Time is Wasted on Loading Unnecessary Data? —Dado que el acceso a Internet de banda ancha es más o menos la norma en estos días, un montón de diseñadores han dejado de prestar tanta atención a presentar los tamaños y tiempos de carga. Esta infografía muestra cuánto tiempo y el ancho de banda que se desperdicia por todos los datos innecesarios que se cargan en un sitio web.

how-much-time-wasted-infographic-600x592

Infografías Útiles

Estas infografías incluyen información que es directamente útil al diseño web

How Do Colors Affect Purchases? — por KISSmetrics, nos muestra lo que los colores tienen impacto sobre las decisiones de compra de los compradores en línea. Un recurso invaluable para los diseñadores de comercio electrónico.

How Do Colors Affect Purchases.
8 Levels of Information Technology Security — Esta infografía muestra las posibles amenazas a la seguridad informática en un centro de datos, así como los métodos típicos utilizados para combatirlas.

8 levels of it security in the data center

Global Downloads Speed Comparison — Esta infografía compara las diversas velocidades típicas de descarga en todo el mundo.

Global Download Comparison

How Popular is the iPhone Anyway — Esta infografía muestra la popularidad del iPhone en términos de ventas, cuota de mercado, el número de aplicaciones descargadas, y más.

How Popular is the iPhone

Operation E-Commerce: A Game of Dissecting the Best E-Commerce Software — Esta infografía ilustra las características necesarias de un gran software de comercio electrónico, todas construidas alrededor del clásico juego de mesa de operaciones.

Operation E-commerce

Colours in Cultures — He aquí una infografía muy útil que muestra lo que los significados de los diferentes colores se encuentran en diferentes culturas, incluyendo Oeste/ americanos, japoneses, hindúes, nativos americanos, chinos, europeos del este, musulmanes y otros.

1276_colours_in_culture

 

Artículos relacionados:

 

25 Infografias explicando el SEO

3 Infografias: “Entendiendo los dígitos de las tarjetas de Crédito”

35 Infografias sobre Social Media

15 Temas Impresionantes Responsive para WordPress (Theme Junkie)

Seguridad y Protección de un Blog de WordPress (Infografía)

 

Los  Mercados Online de Envato: ebooks, tutoriales, vídeos, plugins, cursos, temas para WordPress y App

Enhanced by Zemanta

42 Ejemplos de Desplazamiento de Paralaje en el Diseño de Web

13 de octubre de 2013 1 comentario

El paralaje es una diferencia en la posición aparente de un objeto visto a lo largo de líneas diferentes en la vista. El término se deriva de la palabra griega parallaxis, significando la modificación. En el diseño  web, el efecto de paralaje es relativamente una nueva tendencia. El efecto en sí mismo ha estado alrededor un rato, pero últimamente se hace más usado y se habla más de él.

El efecto de Paralaje o el desplazamiento de paralaje en el diseño de web es la técnica que presenta imágenes acodadas que se mueven alrededor del sitio Web en velocidades/perspectivas diferentes que crean una 3ª ilusión agradable e interesante. Juntamos algunos ejemplos de sitios Web usando el efecto de paralaje para inspirarle. Este efecto ciertamente hace que el desplazamiento alrededor de los sitios Web sea una experiencia interesante.

cultural solutions uk

cultural solutions uk

Campaign Monitor is Hiring

Campaign Monitor is Hiring

International Watch Co

International Watch Co

Marmoset

marmowset(1)

Spotify podría querer esto para empezar a ver con este nuevo sitio de música.

Creado por un equipo de artistas musicales que trabajan honestamente, Marmoset le ayuda a crear la ‘banda sonora de su historia’, mientras que pelea la buena batalla para restaurar el valor y el respeto por la música y sus creadores.

La función única aquí es la forma en que Marmoset le permite encontrar el tipo de música que le gusta en función de variables tales como la ‘energía’, ‘longitud’ y ‘género’. Algunos efectos de desplazamiento de paralaje fresco y fotografía llamativa son la guinda del pastel, haciendo su oferta aún más atractiva.

Nike Better World

Nike

La Moulade

La Moulade

La Moulade presenta una singular navegación widget que flota en la parte superior como un ejemplo de la creciente cantidad de sitios que utilizan la posición de desplazamiento de la página para generar animación y movimiento, este diseño de una agencia francesa La Moulade también presenta una singular navegación widget que flota en la parte superior, que muestra tanto en dónde estás, y proporciona un acceso rápido a otras zonas.

Webdesign Karlsruhe

Webdesign Karlsruhe

Haga clic en los círculos y se sorprenderá.

YEBO Creative

Yebo

Health Service Payouts

Health Service Payouts

Esta infografía en línea destaca el problema de la cultura de pago de la compensación de la salud.

Si los servicios médicos se proporcionan en privado o públicamente, la cuestión de las indemnizaciones enormes es una preocupación creciente para las organizaciones de salud en todo el mundo. Y esta infografía en línea destaca el problema utilizando una técnica de desplazamiento del ojo en los fondos.

Al desplazarse por la página, usted sigue a un portero de un hospital empujando un carrito a través de las secciones de un corredor. Cada sección representa otro año en la historia del Servicio Nacional de Salud del Reino Unido, y un globo emergente muestra los detalles del mayor pago de compensación de ese año. Es un dispositivo simple, pero perfectamente ejecutado y una forma atractiva de transmitir una gran cantidad de información sobre una superficie seca, aunque en una importante tema.

‘Las piezas se construyen utilizando algunas de las técnicas más avanzadas en HTML5, CSS3 y JavaScript, explica Stickyeyes, la agencia que creó la infografía para Express Solicitors”. Como la animación fue un factor clave en esto, utilizaron principalmente la biblioteca Skrollr de animación para todos los efectos de movimiento. Cada uno de los elementos se ilustra de forma manual, entonces tomaron la función de desplazamiento con el fin de crear la función de imitación de scroll parallax. Esto fue luego apoyado por otras animaciones CSS3 para los toques finales.

Head2Heart

Head2Heart

We are Unfold

We are Unfold

La lista desplazable funciona bien con un menú de navegación superior derecho.

Aquí la agencia noruega Unfold  utiliza una combinación de desplazamiento sin fin y una pequeña cantidad de paralaje para crear un esquema inusual y eficaz en la navegación web. Los principales vínculos entre las áreas de contenido aparecen en la parte superior derecha de la ventana en todas partes, pero al llegar a la parte inferior del diseño en una sola página, la página sigue desplazñandose, dejando al descubierto la parte superior de la página, una vez más.

Len M

Len M

iutopi

iutopi

Savings Challenge

Savings Challenge

El sitio le ayuda a descubrir cuánto podría ahorrar en su coche.

La última promoción para dar a conocer un concesionario de coches de la red de Arnold Clark, donde se pide a los clientes a ‘desafiar’ al vendedor en su concesionario local para ahorrar dinero en sus gastos mensuales de automovilismo, el equipo web de la casa se le ocurrió la idea de un sitio de paralaje construido en un estilo de infografía – el sitio Savings Challenge.

‘El diseño se basa en la idea de los billetes que se puede plegar en el elemento clave’, dijo el diseñador, Stephen Kay. ‘De ahí el lema de’ hacer más con su dinero ‘. Esta noción de plegado ayudó a formalizar no sólo el diseño inicial del logotipo, sino también el potencial de una página móvil, web interactiva. En realidad, se presta a ser animada ‘.

Una vez en el desarrollo, el guión gráfico se divide en siete ‘escenas’ clave con el fin de ayudar a controlar el flujo de trabajo y el proceso de comprobación. Los desarrolladores utilizan skrollr.js como su tecnología central para controlar los eventos de desplazamiento del usuario. Esto permitió la creación rápida de prototipos, dándole más tiempo para suavizar las transiciones y la creación de una interfaz de usuario funcional.

Cyclemon

Cyclemon

El sitio cuenta con casi todos los tipos de bicicletas que hay.

Algunos dicen que somos lo que comemos, otros dicen que es lo que utiliza la bicicleta. Aquí, los diseñadores y entusiastas de la bici Romain BourdieuxThomas Pomarelle se unieron para crear el sitio scroll parallax Cyclemon. Con magníficas ilustraciones, tipografía inventiva y el desplazamiento inteligente, el sitio sin problemas se une.

Pasar de un hipster a un abuelo, un puma a un freestyler, los chicos han llegado a casi cualquier tipo de bicicleta que hay. Y no es sólo el sitio web que muestra las bicicletas – Bourdieux y Pomarelle también han creado una serie de impresiones serigráficas de bicicletas.

Cada ilustración está impresa en papel blanco FabrianoRosaspina en cinco colores diferentes hechos a mano con una técnica no-tóxica. Cyclemon es sin duda uno de los diseñadores de bicicletas locos que hay por ahí.

Drupalcon Denver 2012

Drupalcon Denver 2012

Ben the Body Guard

Ben the Body Guard

Fingerbilliards

Fingerbilliards

Lexus

Lexxus

Disfrute del nuevo Lexus sin visitar la sala de exposición en este sitio interactivo

El nuevo Lexus IS es una berlina de lujo, que ahora se puede experimentar de una manera completamente inmersiva, incluso antes de visitar una sala de exposición. Desarrollado por el equipo de consultoría tecnológica sorprenda, el vídeo interactivo permite a los espectadores a explorar a fondo el interior y características exteriores de la última edición a la línea híbrida de Lexus.

Como socio digital a largo plazo de Lexus, Amaze ha utilizado una combinación de secuencias de acción en vivo y CGI para permitir a los espectadores ver y controlar su experiencia de visualización. Los usuarios pueden hacer todo, desde la selección del diseño de color exterior para entender más acerca de los controles, el manejo preciso y la ingeniería que hay detrás del nuevo coche.
Fácilmente accesible

El equipo de Amaze para crear una mezcla perfecta entre lo real y lo virtual, se filmó la conducción de automóviles a través de diferentes paisajes y se asoció con una alta gama de visualizaciones 3D de  estudio RTT con sede en Munich para explorar y tomar imágenes de 360 ​​grados del medio ambiente en los puntos clave. Construido en HTML5, la experiencia funciona en todos los dispositivos y características que el contenido de una aplicación para promover y vender el nuevo modelo.

Kisko Labs

Kaiku

Guy Vernes

GuyVernes

Life in my Shoes

Life in my Shoes

La página cuenta con un animado efecto de paralaje.

Life In My Shoes es una potente campaña multiplataforma dirigida a los jóvenes que desafía el miedo y la incomprensión que rodea al VIH. La Agencia digital con sede en Londres ha informado con el desarrollo de un sitio web que atrae a un público juvenil.

La fuente de la marca, Houshka Rounded Medium, se llevó a cabo usando un font-face para obtener el sitio web con un aspecto más atractivo e intuitivo. Las imágenes decorativas y acentos amarillos dramáticos en todo proporcionan una estética atractiva.

La página ‘About Us’ cuenta con un animado efecto de paralaje que se ajustó para las tablets y teléfonos inteligentes. ‘Escribimos una consulta en los medios para estos dispositivos que cambia el fondo-attachment de fijo a desplazarse, y establece los distintos fondos en las posiciones para que las imágenes se sienten en el lugar correcto’., explica el equipo de Traffic.

Netlash-bSeen

Stel Jouw vraag

The Beast

The Beast

El sitio de la cantante popular con auto-desplazamiento que se lee como un poema.

El álbum de la cantante de Folk Laura Marling, Creature I Don’t Know, se le dio un sitio web de acompañamiento realizado por la agencia de Londres Juice Studio con ilustraciones de Shynola. Es un sitio que se auto-desplaza como un poema para leer, mientras vívidas ilustraciones y animaciones pasan con perspectivas de paralaje que se revelan.

El sitio hace un amplio uso de nuevos elementos semánticos y los datos * atributos utilizados para activar las animaciones en puntos específicos de referencia de audio (Por ejemplo, los cambios de escena, las claves de animación, etcétera) y también asigna velocidades de control y la orientación de los elementos móviles de paralaje.

Egopop Creative Studio

Efectos de paginas web

Mueva el ratón y verá los efectos.

Jan Ploch

Jan Ploch

unfold

Efectos para las paginas web

manufacture d’essai

manufacture d'essai

19 Simple and Clean Logos

19 Simple and Clean Logos

17 Inspiring Examples of Parallax Scrolling Sites

17 ejemplos de scrolling parallax

Type and Color Inspiration from Package Design

Type and color inspiration from package design

17 Clean Web Designs for Your Inspiration

17 clean web designs for your inspiration

The Lab

Alzheimer

Este sitio de desplazamiento de paralaje es diferente y al instante en la participación.

La investigación del Alzheimer, la principal organización benéfica de investigación de la demencia en el Reino Unido, tiene como objetivo comunicar la información sobre la demencia en una forma atractiva usando su sitio Web The Lab.

De la idea al tratamiento, el usuario puede desplazarse a través de dos laboratorios y una clínica, cada uno de los cuales está lleno de información emergente con botones.

Al hacer clic, se abren nuevas páginas con información detallada sobre cómo las ideas de los científicos se convierten en realidad y cómo esto puede hacer la diferencia para los miles de personas que viven con la enfermedad.

Why Your Brain Craves Infographics

Why Your Brain Craves Infographics

Una infografía para terminar todas las infografías.

Neo Mam Studios han llegado con un bonito diseño y con una  brillantemente ejecutada infografía. Una experiencia en línea construida con HTML5 y CSS3, el reto en la construcción de la infografía era mantener el CSS lo más simple posible.

‘Los efectos de desplazamiento de paralaje era probablemente lo más difícil de lograr’, dice Danny Ashton de Neo Mam.

‘Nuestros desarrolladores examinaron las bibliotecas disponibles y los describieron como un poco’ flojo ‘, por lo que terminaron creando su propio lugar.’ Siguió diciendo Danny Ashton de Neo Mam.

5emegauche

5emegauche

Cada página tiene su propio mecanismo de desplazamiento.

En la mayoría de los casos cuando se desplaza, que está desplazando a una página diferente. Pero en la página web de este organismo, cada página tiene su propio pedazo de mecanismo de desplazamiento o elemento que hace que todo sea muy interesante. Es un enfoque brillante y divertido diseño de paralaje y demuestra que la técnica sigue produciendo resultados inventivos.

Atlantis World’s Fair

Atlantis World’s Fair

Atlantis World’s Fair usa desplazamiento de paralaje para contar su historia.

Un ejercicio para demostrar apoyo WOFF de IE9, esta infografía en línea está diseñada por Frank Chimero donde utiliza algunos desplazamientos de paralaje, no simplemente como una manera de presentar la información, sino como una manera de animar y de contar la historia. Un divertido e interesante enfoque de información interactiva, este es un ejemplo de un perfecto de scroll parallax.

Every last drop

Every last drop

El uso justo del desplazamiento de paralaje de Atlantis World para contar su historia

Un ejercicio para demostrar apoyo WOFF de IE9, esta infografía online diseñada por Frank Chimero utiliza algunos scroll parallax no sólo como una manera de presentar la información, sino como una manera de animar a la información y contar la historia. Un enfoque divertido e interesante a la información interactiva, esto es un ejemplo perfecto de scroll parallax.

Golden State of Mind

Golden State of Mind

Golden State of Mind muestra lo mejor de California.

Golden State of Mind fue construido por Juxt Interactive para mostrar, ‘el arte, la moda y los acontecimientos en directo desde California. El Director creativo Jeff Whitney comentó: ‘una barra de desplazamiento personalizada fue un plug-in encontrado y algo pesadamente modificado para permitir el desplazamiento infinito, y un montón de sudor y lágrimas para conseguir la invertida del desplazamiento para que funcione correctamente’.

Living Word

Living Word

En el Reino Unido la Agencia de diseño Tribe ha desarrollado este desplazamiento de paralaje en el sitio para la Agencia de traducción WordWhen, que pidió un relanzamiento digital vuelve a enchufar, tribu llevó a la creación de un sitio a diferencia del resto. La solución fue desarrollar un efecto de paralaje capaz de ofrecer una gran cantidad de información, manteniendo el interés del usuario. La idea era valiente, pero funciona bien, la entrega de un impresionante viaje de los clientes de forma interactiva e intuitiva.

Spotify

Spotify

Spotify emplea el uso sutil de scroll parallax en su página introductoria.

El Streaming de música en la aplicación Spotify se explican sus características y beneficios en una página de aterrizaje que le da un toque sutil de scroll parallax para sus imágenes de fondo.

Madwell

Madwell

La agencia de New York Madwell utiliza scroll parallax para añadir una sensación de profundidad.

El diseño y desarrollo de la agencia Madwell, con sede en Nueva York, muestran su portafolio con una amplia gama de efectos de desplazamiento de paralaje para crear un estilo 3D notable que añade una gran cantidad de profundidad.

The Jacksonville Downtown Art Walk

The Jacksonville Downtown Art Walk

The Jacksonville Downtown Art Walk.

The Jacksonville Downtown Art Walk es un festival de artes mensual que abarca más de 15 bloques y toma en decenas de galerías, museos y bares, con artistas callejeros y música en vivo. Su hermoso lugar cuenta con un sutil efecto de paralaje en acuarela que hace desplazar una alegría.

Artículos relacionados:

Artículos y Tutoriales para Empezar con jQuery

+25 Plugins Asombrosos de Resbalador jQuery Responsive

La verdad detrás de diseño Web Responsive: ¿Es la próxima gran esperanza o todo es un bombo?

15 Memorables Plugins jQuery Timeline: Introduzca Líneas de Tiempo en su Página Web

15 Temas Impresionantes Responsive para WordPress (Theme Junkie)

+60 Útiles Deslizadores o Sliders de Imagen jQuery Responsive

+ 30 Herramientas útiles de Diseño Web Responsive

Los Mercados Online de Envato: ebooks, tutoriales, vídeos, plugins, cursos, temas para WordPress y Apps

A %d blogueros les gusta esto: