Mostrando entradas con la etiqueta web. Mostrar todas las entradas
Mostrando entradas con la etiqueta web. Mostrar todas las entradas

martes, 3 de julio de 2018



Entre las distintas modalidades de la creatividad visual podemos contar al diseño web y digital entre las más importantes en la actualidad, por ello debes poner especial atención en sus maneras de realizarse para llegar a buen puerto.

El equipo creativo de Paredro elaboró esta infografía con recomendaciones esenciales para renovar el diseño de un sitio web, sigue los tips, llévalos a la práctica, compártelos entre tus colegas y comenta también si realmente son de utilidad.

Fuente: paredro

lunes, 2 de julio de 2018


piCSSel-art es una herramienta gratuita basada en la web desarrollada a modo de experimento por Kushagra Gour, para posibilitar la realización de creaciones pixel-artusando sólamente código CSS.
Ahora la vuelve a lanzar completamente renovada con una serie de funciones interesantes: posibilidad de compartir URL, opciones de configuración de lienzo y tamaño de píxel, disponibilidad de cuadrícula, con paletas de colores, y más accesible por teclado.
Los usuarios, una vez configuren las opciones disponibles, tan sólo tienen que ir pintando píxeles sobre el lienzo que tienen frente a ellos, generándose automáticamente el código CSS subyacente al propio diseño.
De hecho la misma herramienta ofrece tanto el código HTML como el código CSS generado, para aquellos que quieran llevar sus diseños una vez completados directamente a la web, aunque también tienen la posibilidad de ver el resultado de sus diseños a través de la plataforma codepen. También existe un botón para compartir la URL de los mismos a través de la red social Twitter.
El código fuente de esta herramienta está disponible en la plataforma GitHub bajo licencia MIT. Sin duda, una interesante y curiosa herramienta de la cual algunos con dotes creativas le podrán sacar bastante rendimiento.
Fuente: wwwhatsnew

martes, 23 de mayo de 2017


Al igual que otras especialidades de la creatividad visual, el diseño web tiene requisitos puntuales que se deber respetar si se quiere lograr un buen desempeño y obtener los resultados esperados, algunos de estos puntos son más sencillos de recordar de lo que pudiera pensarse y se convierten en parte de la manera de pensar de quienes desarrollan proyectos y soluciones en pantalla.
El diseñador gráfico español Igor Fernández  presenta en un breve, colorido y contundente mensaje visual cuáles son los cinco elementos fundamentales de un diseño web de éxito, por si no lo conocías te los presentamos, y si ya sabías de ellos, esta imagen te serirá a manera de recordatorio. Compártelo.
Fuente: paredro

lunes, 3 de abril de 2017


Nofollow es un atributo del código HTML adjunto a un hipervínculo con la finalidad de que dicho enlace no arroje ninguna tipo de mejora al sitio web de destino, con el nofollow lo que se busca es evitar que usuarios ganen posición con el spam, por ejemplo, sin este atributo en páginas de mucho tráfico, los usuarios dejarían información para posicionarse mejor en la web.
El Nofollow está innovando dado el auge de las tecnologías de Internet y el uso del Marketing Digital según indica comScore en sus últimos estudios publicados online.
Las innovaciones del Nofollow están fundamentadas en evitar que usuarios consigan hacer referencias a sus sitios y aunque el SPAM se ha frenado gracias a este atributo aun se ve, esto se debe en gran medida a la obtención de backlinks.
Hoy en día el atributo rel=nofollow es usado fuertemente en la técnica del SEO para filtrar y limpiar el contenido de referencias erróneas y SPAM y ofrecer a las masas contenido más puro y acertado, otra característica es que el nofollow no suma puntos a tu página en cuanto a posicionamiento web hablamos.


Fuente: iiemd


El blanco en el diseño web

El uso del color blanco en el diseño grafico es más importante de lo que a priori puede parecer. Es una técnica de diseño que hace que sobre un fondo blanco, cualquier cosa que coloquemos en medio va a resaltar.
Puede parecer algo obvio pero el uso del espacio en blanco es un conductor de primer nivel para incrementar las conversiones. Pon aquello que mas te interesa sobre un fondo blanco. En la mayoría de ocasiones (no siempre) destacará.
El color rojo vende
Cuando hay ventas implicadas, el rojo es un recurso fantástico. El rojo es un color fuerte que llama la atención de una persona debido a su fuerte personalidad. Entre los colores que incitan a comprar el rojo es sin lugar a dudas el mejor.
Traducido al marketing, el rojo es una opción ideal para utilizar en los botones de acción de compra a causa de la sensación de urgencia y la energía que crea. Es el color de la pasión, también aumenta el ritmo cardíaco. Entre los colores que más venden están sin lugar a dudas el rojo.
El video marketing
Aunque por lo general se piensa en contenido escrito cuando hablamos de contenidos en Internet, el contenido de vídeo es cada vez más popular. Hay estudios que hablan de que el uso del vídeo incrementa las ventas y aumenta en un 85% la predisposición de un consumidor a realizar la compra. Crear un video de marketing en el que explicamos los beneficios de nuestra empresa o servicio es muy buena opción.
Diseño basado en tarjeta
El diseño en forma de tarjeta es una filosofía ingeniosa que probablemente has visto en Pinterest, pero se ha ido ganando peso en otros sitios web en los últimos años.
La belleza del diseño en forma de tarjeta es que mejora la experiencia de los usuarios. Permite ver de forma rápida y eficiente la información que se les presenta en una página web. Esto se logra mediante la clasificación de contenido en diferentes categorías, en base a un tema común.
Combinar colores web
Los ojos de los visitantes del sitio se sienten atraídos por las explosiones de colores audaces. Esto hace que el contraste de color sea uno de los mejorestrucos para mejorar las ventas en un negocio en las compras de Navidad.
El contraste guía a los ojos de los compradores a lo que es más importante en una página web. Y lo realmente importante aquí es la llamada al botón de acción. El contraste de color es también una estrategia de diseño para asegurarse de que los visitantes del sitio no se pierdan lo que realmente queremos que vea.
Echar un vistazo a los sitios web de comercio electrónico durante la temporada de compras de Navidad, Rebajas o cualquier otra época similar es una gran oportunidad. Podremos inspirarnos y/o copiar cualquier estrategia de ventas online que nos parezca interesante.
Los diseños para aumentar las conversiones es la mejor manera de maximizar las ventas y conversiones para los sitios de sus clientes. Y de paso convertirá al diseñador web en un valor al alza.
Resumen: todas las recomendaciones sobre diseño web
Recapitulamos un poco todo lo expuesto en el artículo para saber cómo aumentar las conversiones en nuestra página web:
- Utilice gran cantidad de espacio en blanco.
- Hacer llamadas a botones de acción de color rojo, sobre todo para las ventas
- Incorporar vídeo en su página
- El diseño en forma de tarjeta facilita la clasificación de información
- Utilice el contraste de color para resaltar lo más importante
Con estos cinco simples consejos para un mejor diseño web todos se verán beneficiados.


Hace ya un tiempo que los sliders se pusieron de moda en el mundo del diseño web. Para aquellos que todavía desconozcan qué es un slider deberían saber que es una especie de pase de diapositivas en las que se muestran varias imágenes con los artículos mas destacados.
Visualmente son muy atractivos y de entrada enamoraron a muchos diseñadores web para mostrar el contenido destacado de una web o blog. Además, en gestores de contenido como WordPress son muchos los plugins para mostrar contenido tipo slider que existen.

Razones por las que deberías quitar el slider principal

Con el tiempo se ha demostrado que a pesar de ser muy atractivos pueden no ser tan efectivos. Los mayores de los problemas a la hora de utilizar un carrusel de imágenes tienen que ver con el posicionamiento web, aunque no son los únicos. A continuación te explicamos algunas de las razones:

Distrae la atención web

El primer problema con el que nos encontramos es que los sliders consiguen el efecto contrario del que persiguen. Vamos a explicarnos. La función de un slideres la de destacar varios contenidos. La realidad es bien otra. Y es que el pase de imágenes provoca que nuestra mirada siga el movimiento, lo que provoca que el resto de la página pueda pasar inadvertido. Lo que sucede en muchas ocasiones es que ese movimiento distrae al usuario de lo que son los Call to Action, las conocidas como Llamadas de Acción.

Descenso de las ventas por internet

Y esa distracción provoca una segunda consecuencia: el descenso de las ventas online. De hecho, la mayoría de sitios de comercio online ya no utilizan este tipo de carruseles de imágenes.

Problemas de carga web

Por norma general los sliders suelen sobrecargar la web. Un plugins más, varias imágenes, mas texto y sobre todo el efecto de movimiento se traduce en mas código que añadimos a un portal web, lo que le hace más lenta. Ya hemos explicado en muchas ocasiones que la velocidad de carga incide en el posicionamiento web.

Slider responsive, pero no siempre

Tener un diseño adaptado a móviles también es otro de los requisitos que Google impone. Los sliders no siempre se visualizan bien en todo tipo de dispositivos. Esta circunstancia debería ser suficiente para no publicar un slider.

Demasiados H1

Cualquier experto en posicionamiento web te dirá que utilizar más un titular H1 en una página puede ser contraproducente. Llenar de varios o muchos H1 una URL puede despistar a Google. Esto significa que utilizar varias palabras clave como H1 puede hacerles perder fuerza. Si un carrusel utiliza tres imágenes está utilizando tres keywords principales y eso no es muy recomendable.

Muy lejos del inicio

Como es de suponer, Google realiza rastreos de una página web de arriba hacia abajo. Si el contenido importante lo arrastramos hacia abajo por querer meter un slider con tres contenidos estamos provocando un problema añadido. Lo importante al inicio, lo menos importante después.

martes, 17 de enero de 2017


A pesar de que la mayoría de programadores y diseñadores trabajan en entornos locales a veces es necesario comprobar que el código HTML, CSS y Javascript está bien escrito.
Incluso para aquellos usuarios que no non unos expertos en la materia es muy recomendable tener a mano alguna herramienta para probar la fiabilidad de un código de programación.
Una de las opciones más convenientes es utilizar herramientas online para comprobar si el código HTML, CSS y JavaScript está bien escrito y estructurado.

Herramientas para revisar el HTML, CSS y JavaScript

En este artículo hemos recogido cinco de estas herramientas que pueden ser útiles y sacarte de algún problema. A veces pueden servir para detectar algún error en una web o blog.

1. CSSDesk

Se trata de una de las herramientas más populares entre programadores que se utiliza para probar código HTML y CSS. Cuenta con una gran cantidad de funciones como la vista previa en tiempo real.
No requiere de ningún tipo de configuración, solamente acceder a la página y comenzar a escribir el código. También hay sintaxis básica con números de linea, además de texturas de fondo.

2. JS Bin

Otra excelente herramienta para probar código con diseño minimalista y que de forma predeterminada solamente muestra el HTML y los paneles de vista previa en tiempo real. Sin embargo el desarrollador puede agregar fácilmente código JavaScript también.
Una de sus características principales es que el código escrito permanece aun cuando se actualiza la página e incluso se tiene una combinación para actualizar la vista previa de forma manual.

3. jsFiddle

Esta es una herramienta para analizar código de programación online muy completa. Cuenta con cuatro paneles para el HTML, CSS, JavaScript y la vista previa de tal manera que el usuario puede ver todo lo que necesita al mismo tiempo y realizar los cambios sobre la marcha. Se pueden personalizar los panales del CSS y JavaScript para utilizar herramientas de terceros y ofrece soporte para la sintaxis Sass SCSS y CoffeeScript.
JsFiddle permite crear un inicio de sesión y visualizar un tablero de instrumentos donde se guardan trabajos anteriores.

4. Dabblet

Otra opción para revisar el código HTML, CSS y JavaScript. De forma predeterminada, se divide en cinco pestañas: CSS & Result, HTML & Result, All, JSalpha y Result. Esto ofrece flexibilidad y enfoque al mismo tiempo que permite mantenerse atento a los resultados.
La división puede ser horizontal o vertical o eliminada por completo y se ofrece la opción de guardar lo realizado de forma anónima, además que se puede vincular con cuentas GitHub.

5. Liveweave

Terminamos esta lista de las mejores herramientas online para probar código con Liveweave. Estamos hablando de una plataforma que destaca por incluir soporte para HTML5, CSS3 y JavaScript, especialmente diseñada para desarrolladores web y diseñadores.
La interfaz se divide en cuatro secciones, la primera corresponde al HTML5, la segunda a JavaScript, la tercer a CSS3 y la última es la vista previa del código que se actualiza en tiempo real. Hay soporte para múltiples librerías e incluso opciones para crear paletas de color o generar texto LOREM IPSUM con colocación del cursor. Lo realizado también puede guardarse de forma manual.

lunes, 12 de diciembre de 2016


La negociación puede ser cansada y, en algunos casos, hasta un poco fastidiosa. En este artículo, Luiggi Santa María, CEO de la agencia de diseño de páginas web Staff Creativa, comparte algunos consejos que te ayudarán a ganar el respeto y el dinero que mereces.
Ser un terrible negociador es una epidemia entre los profesionales creativos. En este sentido, quisimos crear una lista de diez mitos que debes saber para ayudarte a conseguir lo que necesitas cuando te sientes presionado.
  1. La negociación genera respeto
Cada vez que hablas con un cliente, empleador o, incluso, un compañero de trabajo acerca de dinero, presentaciones o cronogramas, se espera que negocies. Si no pides lo que necesitas para tener éxito, no solo perderás dinero, sino también respeto. Y el respeto es más importante que el dinero porque te lleva al tipo de libertad que necesitas para hacer tu trabajo. El respeto te da el poder de lograr el éxito, que lleva a más dinero. Espera negociar: hazlo y ve cómo crece el respeto de lo demás hacia ti.
  1. El temor es normal
La ansiedad que sentimos cuando negociamos es completamente normal. Todos lo sentimos. No se va. Siento la misma ansiedad hoy que cuando tenía veinte años. Pero, pese al temor, me he convertido en un negociador más capaz. Tú también lo puedes ser. Aprende a esperar el temor. Es una alarma que te dice que prestes atención, a tomar acción. Y dicha acción es una forma comprobada para ganar confianza. La acción crece y la confianza vence al temor. Cuando negocias, la simple acción de formular una pregunta reducirá tu miedo.
  1. Entiende a los demás
El trabajo del diseñador web siempre implica emociones, así que no es sorpresa que tengamos el corazón en la mano cuando estamos en una mesa de negociación. Como profesional creativo, tu corazón siempre está en riesgo. Acepta esta verdad, es buena porque te hace ser más empático con otros. Aprende a usar tu creatividad para entender las vulnerabilidades de otros. Y, en este proceso, incrementa tu comprensión y tu bienestar en la mesa de negociaciones.
  1. Tu energía es contagiosa
Estamos absolutamente dedicados a hacer nuestro mejor trabajo, cuando se trata de algo que amamos hacer. Deja ver tu búsqueda interminable de perfección en tu servicio. Es contagiosa. Es poderosa. Es persuasiva. Ellos querrán tu poder creativo trabajando a su favor cuando saben que tú los entiendes y que no descansarán en pos de su causa.
  1. La experiencia iguala el poder
Tu poder y tu influencia provienen, enteramente, de lo que puedes hacer por los demás. Ellos te necesitan, y solo a ti, por lo que puedes hacer por ellos. Los verdaderos creativos, desde Miguel Ángel hasta Steve Jobs, pasaron sus vidas concentrados en mejorar su experiencia.
La diferencia entre ser bueno y deslumbrante está en la concentración en la experiencia. Mientras mejor eres, más te necesitarán y menos necesitarás negociar. Es simple, ellos necesitan satisfacer tus necesidades si  quieren tu magia.
  1. Todos caemos en el rechazo
Pedir más es caer en avaricia. Se trata de establecer tu poder en la relación, de modo que puedas ayudarlos a lograr sus objetivos. ¿Tienes miedo al rechazo? Todos lo tenemos.
Practica pidiendo cosas pequeñas. Otra semana para completa el proyecto… un poco más de dinero, una lista de fuentes… lo que sea. El proceso de solicitar cosas pequeñas te ayudará a superar tus temores. Se llama terapia de rechazo. Pruébala. Funciona.
  1. El planeamiento te ayudará a ganar
Con el dolor emocional causado por el estrés de negociar, usualmente nos resistimos a usar nuestras habilidades de planeamiento bien desarrolladas. Sí, la negociación produce ansiedad, pero la ansiedad es causada por cosas desconocidas que el planeamiento te ayudará a reducir.
Haz una lista de lo que sabes y de lo que no. La lista de lo que sabes debe incluir hechos básicos de la situación. La lista de lo que no sabes debe incluir lo que piensas que necesitas para tener éxito. Mientras más cosas  desconocidas puedas transferir a lista de las cosas conocidas, mejor te sentirás.
  1. Ellos también sienten lo que sientes
Los creativos crean conexiones entre las empresas y sus clientes, productos y personas, películas y música con memorias. Escucha la música que crea la magia.
Escucha la historia que se conecta con tu corazón. Eso es lo que hacemos. Es extremadamente valuable. Las imágenes que creamos proveen significados de los sentimientos que tenemos. La creatividad es nuestro lenguaje universal. Los sentimientos que evocamos son el poder real de nuestra experiencia creativa. Úsalas para conseguir lo que deseas.
  1. La única razón para negociar es para conseguir lo que puedas
Es tu mejor interés sentirte bien pagado. No serás capaz de hacer lo mejor si no te sientes valorado. Negocia todo lo que puedas pero con respeto. Tus clientes siempre te recordarán por la forma como los haces sentir. Pide y consigue lo que necesitas para conseguir el éxito tanto para ti como para ello. Recuerda: lo vales.
Esperamos que uses estos consejos para mejorar tus habilidades de negociación. Si te gustó este artículo, compártelo y deja tus comentarios.
Fuente: frogx3

viernes, 2 de diciembre de 2016



Contact pages are critically important for websites—the more efficient and user-friendly a contact page, the more opportunities are likely to arise.
A good contact page design can even influence conversion rates; if a visitor can easily contact you, that same user will likely have a positive impression of your site. Additionally, if the process is simple (i.e. fewer number of form fields), you could be looking at a huge jump in conversion rates.
In the same way contact pages improve your site, they also create a relationship with your users. In fact, contact pages are used by a wide number of sources: eCommerce, news magazines, online services, etc.
Despite this fact, however, many designers underestimate the importance of a well-designed contact page, choosing instead to focus on other content.

What Does a Great Contact Page Need?

riccardozanutta.com_
Imagine you want to contact the owner of a website, or better yet, you want to contact customer service. You search and search the website but are unable to voice your concern. Sometimes the information is there, but it is “hidden.” Even finding a phone number can lead to a long call of automated messages.
Brands who provide the bare minimum in support aren’t doing themselves any favors. In fact, great contact pages don’t just convey information—they are informative and interactive. Most importantly, a great contact page encourages users to continue doing business with you.
Additionally, exceptional contact pages can influence a customer’s impression of the brand as a whole, providing a resource for discussion, feedback, and yes, even complaints. This freedom is important for users, because it allows them to feel heard and appreciated.
Remember, a web presence is also a way to communicate with others. By allowing customers to tell us what they think and what they want, we are establishing a dialogue with them. Web developers and users alike can benefit from this collaboration, and this is exactly the reason why designing an excellent contact page is important for your brand.

Well Designed Contact Pages – How Should They Look?

rodesk.com_contact_
Functionality comes first
We all know functionality is key. You may even be thinking, Of course my contact page is functional. That’s what it’s there for. And you may be right.
However, a double check on functionality can do more good than harm. Broken links and crowded pages will not help your business, especially if it means you’re missing important messages, or you’re providing incorrect information.
When in doubt, consider your users. After all, this page is for them.
Location
Make sure your contact page is easily accessible. Appearance and sophistication mean nothing if customers are unable to locate the page. As obvious as it may seem, remember to list instructions. Life is easier when we have a step-by-step guide.
In general, designers place contact information in two places:
  1. Primary Navigation can be the key to a successful contact page. Users are supposed to find a contact link from the very first moment they access your website.
Experience shows users tend to look at the right side of the page, so you might consider putting your contact link there. Remember, this information is of secondary importance to your user, so don’t make it too big or intrusive.
  1. Sub navigation is also an idea—you can place a small, but clear link in the upper right corner of the page. Whatever you do, avoid including the link in a drop-down menu, because it will likely be overlooked.
Excellent design
We already know how important contact pages are for our business.
While the contact page may not be the most impressive aspect of your website, it should still be seamlessly designed and user-friendly. Without proper visuals or functionality, it’s unlikely you’ll establish a stable relationship with customers.
Shorten the contact forms
Screenshot_1
Remember when we talked about forms and conversion rates? Users have no time to complete long forms, which is why simpler is better. For a better user experience, ask only for the basics.
Keep language value-oriented
Be clear and precise about the benefits your customers can obtain from the brand you are presenting.
Why? Clear language is the most secure way to attract and maintain attention. Nicely summarized information should be concise, so people can easily find the information they need.
Use Google maps
walkwest.com_contact_
If you want a productive company, help your customers locate you. In big cities, an address may not exactly ring a bell. A physical explanation can help your credibility (even if you are online-based).
Take care of responsiveness
marcelww.com_contact
Responsiveness is everything in a web-based businesses. This is one rule with no exceptions.
As the internet continues to be integrated with more and more operations, contact information needs to be available through any browser or device. After all, you don’t want to lose out just because your info isn’t mobile-friendly.

Integral Components 

Email Addresses or Contact forms
We’ve discussed users and what they want: short, easy ways to contact the service provider. How do you help users do that?
hugeinc.com_contactus
Here are some pros for both components, whether you choose contact forms or email addresses exclusively.
Contact forms
  • Don’t ask people to switch between pages
  • Don’t ask users to create accounts and/or log in with emails
  • Enable autofill function, if available
  • Enable the ability to send notifications and emails
Email addresses only
  • Set up the system to feel personal and safe
  • Enable the email to be saved and used later on
  • Copy sent messages and make them accessible
When in doubt, why not use both? Since different methods work for different users, it is best to include both a contact form and an email address option.
Form validation – why is it so important?
kreativa
Form validation is significant when it comes to submitting contact forms.
In fact, form validation will save your customers time, as they will know their information has been successfully submitted.
Additionally, form validation can guide users, as it will actively draw their attention to wrongly entered data or missing fields.
Telephone numbers
Phone numbers are usually excluded because businesses are afraid they will be bothered all the time. However, the same as a physical location, phone numbers provide credibility and they invoke a feeling of safety among customers.
deutsch.com_contact
Adding telephone numbers is essential if you want your customers to trust you.
It is perceived as the approach of real companies, both traditional and online-based.
Social media profiles
motherlondon.com_contact
Social media buttons are more and more common on contact pages. Social media can really add value to certain businesses, especially if 24/7 customer support is offered via social (Twitter, Facebook, etc.) Is this something you could include for your business?

Designing a Contact Page

Great contact pages require technical knowledge to be designed. The most important part is visual styling.
Screenshot_2
For instance, if applying a contact form, include spacious fields that look friendly and inspiring. Padding and whiteness can seriously improve the look.
Before designing a completely new layer out of nothing, a designer should do long and detailed research. Elements should be diverse and well-organized. The functionality of the home page should be essential, and mockups should be done to ensure the site has been successfully developed.
locomotive.ca_en_contact
Finally, contact pages must fit the visual scheme that identifies the site and brand. Content consistency will keep customers focused and pleased to be on your site.

Ending Thoughts

sidlee.com_en_Contact
Above all, ensure your contact page can be accessed through a clear, functional and very visible link (main navigator, footer, right corner).
Remember, some users are only able to contact you through the provided information. Make it easy! A good support system can be the peak of your business—inviting a great partner, excellent sale or promotion opportunity.
Usability is the key to success. Give people what they want. Remember to ask only essential questions; give proper formats and input options, and validate them. Be accessible through every browser or device. Not only will following these guidelines help you, but simplicity will also help your users. Oh, and a good website ensures that you (and your users) succeed.

Nuestros servicios

  • Diseño Gráfico
  • Desarrollo Web
  • Social Media
  • Marketing Digital

Attic OB-11 Corp

Nuestro equipo

Contact us

Nombre

Correo electrónico *

Mensaje *