Las redes sociales, los carteles publicitarios, los sitios web… el diseño se adapta a los diferentes canales para atraer la atención de los clientes, adoptando líneas y marcando tendencias que cambian cada año.
Las tendencias van y vienen, pero siempre quedan algunas que se mantienen por una buena cantidad de tiempo, pues su éxito es tan grande que no cesan los proyectos que las implementan. El diseño web es una parte de la tecnología que tiene como finalidad principal ofertar y vender. Para ello, es indispensable un sitio de calidad que se actualice cada cierto tiempo con nuevas herramientas y aspectos visuales que atraigan la atención del cliente.
El 2018 será el doble de digital que el año anterior, así que siempre es recomendable que tengas en cuenta algunas tendencias que puedes implementar en tu sitio web para darle mayor aspecto e imagen. A continuación verás 3 de las mejores tendencias de diseño para tu página web. Continúa leyendo «Algunas tendencias de diseño web para 2018»
Internet ha cambiado enormemente en los últimos años. Atrás quedó el uso extendido de Flash, que dejó paso a tecnologías mucho más eficientes, como el HTML5. Además, el aspecto de los sitios web ha mejorado enormemente con el paso del tiempo gracias a los avances en el mundo del diseño y del desarrollo web. Hoy os hablamos de Ten Years Ago, una web que nos enseña cómo eran nuestras páginas favoritas hace 10 años.
En concreto, la web de la que hablamos nos muestra el aspecto de 15 páginas web distintas el 29 de julio de 2007. En concreto, podremos navegar por las versiones antiguas de YouTube, Reddit, Amazon, Apple y The New York Times, entre otras. Para ello solo tenemos que hacer clic en la web que queramos visitar y automáticamente se cargará la versión antigua (algo posible gracias a la tecnología de The Web Archive. Lo mejor de todo es que no se limita a la portada de la web, ya que podemos hacer clic en todos los enlaces disponibles.
Como sabréis, con frecuencia os recomendamos diferentes recursos de utilidad relacionados con el mundo de la programación y el diseño web. Recientemente hemos descubierto Sharingbuttons, una curiosa página web que nos facilita el proceso de instalación de botones de redes sociales en nuestro sitio web.
Teniendo en cuenta el modo en el que los usuarios utilizan en Internet, a día de hoy es impensable poner en marcha una web sin incluir botones para compartir el contenido en las redes sociales. A pesar de ello, a menudo los scripts proporcionados por las propias redes sociales son demasiado grandes, nos obligan a descargar múltiples archivos y rastrean a los usuarios. Es aquí donde entra en juego la magia de Sharingbuttons, una herramienta que no usa Javascript (por lo que es realmente rápida), es accesible y no rastrea al usuario.
Estamos seguros de que muchos de vosotros habréis oído hablar acerca de Markdown, el popular lenguaje con el que dar formato a un texto de una forma sencilla: por ejemplo, podemos emplear un asterisco (*) para escribir en cursiva o dos asteriscos (**) para escribir en negrita. Recientemente hemos descubierto «markdown to web», una curiosa herramienta que nos permite transformar cualquier documento escrito en Markdown en una página web.
En general, el funcionamiento de «markdown to web» es de lo más simple e intuitivo. De hecho, tan solo es necesario introducir el texto en Markdown a través de la propia página web o subir un documento Markdown que previamente hayamos preparado. Tan pronto lo hayamos hecho tendremos que pulsar sobre el botón «Continue» e indicar nuestro nombre y dirección de correo electrónico.
Hay muchísimos recursos y plataformas que pueden recurrir aquellos interesados en dar sus primeros pasos en diseño y desarrollo web o mejorar sus habilidades.
Para no se sentirnos abrumados con tanta información, hay iniciativas como Tutset que permiten concentrarnos en aquellos contenidos que se adapten a nuestras necesidades.
Si damos un recorrido por Tutset, veremos que organiza tutoriales online en diferentes categorías. Por ejemplo, tenemos “Web Fundamentals” para aquellos que recién se inician en el desarrollo web, con una serie de tutoriales de diferentes plataformas.
Si preferimos recursos que nos guíen para crear páginas web, podemos ir “Frontend Development”, que nos mostrará tutoriales sobre HTML, CSS y JavaScript. Encontraremos tutoriales para principiantes, para aquellos que quieren poner a prueba sus conocimientos, así como recursos más avanzados.
Hay recursos tomados de Codecademy, Udacity, Treehouse, Khan Academy, W3schools, entre otras plataformas. En cada una de las sugerencias se nos dirá el tipo de recurso que se ofrece, si es un libro, video, si es de pago, etc. Solo tenemos que decidir si es lo que estamos buscando según nuestros conocimientos.
No es necesario registrarse, ni crear ninguna cuenta para ver los tutoriales que se sugieren. Solo dar un recorrido por las diferentes opciones y estar pendientes de los nuevos tutoriales y categorías que se vayan sumando.
Una nueva propuesta educativa pensada para aquellos usuarios que desean iniciarse como trabajadores independientes en diseño web: WixEd.
Es una iniciativa de Wix, plataforma que nos permite crear sitios web personalizados, que ha diseñado un programa de cursos online gratuitos para ayudar a los usuarios potenciar su negocio de diseño web.
Además, de tener una sección dedicada a conocer las características de Wix, también hay clases dedicadas a guiar a los freelance a desarrollar su negocio aplicando diferentes estrategias, desde la gestión de los clientes, marketing online hasta cómo llegar el control de nuestra carrera.
Por ejemplo, veremos cómo conseguir nuevos clientes y cómo educarlos para que valoren el potencial de tener presencia en la web mediante diferentes propuestas que se ajusten a sus necesidades.
También hay clases para ayudar a los usuarios a ser productivos en su negocio de diseño web, teniendo en cuenta diferentes tips. Y por supuesto, también se ha tenido en cuenta detalles relacionados con la estimación de precios en los trabajos y cómo controlar el presupuesto.
Para participar de este programa de entrenamiento, solo tenemos que crearnos una cuenta y escoger la clase de nuestro interés. A medida que vamos avanzando en las clases recibiremos badges y diferentes recompensas, así como un certificado al terminar todo el curso.
Palettab es una extensión para Chrome que nos sugiere una serie de paletas de colores y fuentes en la nueva pestaña del navegador.
Podemos tomar nota de la paleta entera o considerar los colores que mejor se ajustan a nuestro proyecto.
En cada tarjeta de color tendremos el valor del color que podemos copiar automáticamente al posicionar el mouse, además de dirigimos a Google Fonts para visualizar la fuente sugerida.
Si deseamos tener más detalle de la paleta nos dirigirá a la comunidad de COLOURlovers, donde podremos ver los comentarios de la comunidad, así como su popularidad entre los miembros. Además nos permitirá crear un patrón basándonos en los colores de la paleta.
Es una extensión simple que puede servir como fuente de inspiración al trabajar en proyectos creativos, además de mostrarnos las interesantes características de COLOURlovers.
Otras herramientas gratuitas que pueden tener en cuenta aquellos que trabajen en diseño web son las que compartimos en el artículo Extensiones Chrome para diseñadores web.
Echamos hoy un vistazo a brillantes opciones online que seguramente servirán a muchos en la búsqueda de la respuesta a una de las más difíciles decisiones a la hora de trabajar en el diseño de un nuevo proyecto web: Sus tipografías, el combo de fuentes que le harán relucir. Pues bien, para la tarea repasamos las recomendaciones de un hilo en Reddit y algunas que ya habíamos tenido oportunidad de reseñar, en todo caso, espacios perfectos tanto para quienes tienen una idea inicial como para quienes no saben por dónde empezar. Un detalle extra: Si deseas ayuda con el texto de relleno en tus pruebas, no olvides estas alternativas al Lorem ipsum.
Selecciona una de las elegantes fuentes dentro del menú principal de Type Genius, pulsa en View Matches y enseguida tendrás varias recomendaciones de tipografías que irían bien con ella, además, como muestra, algunos ejemplos de texto de relleno -similar al Lorem Ipsum- y sitios web que ya ocupan dichas combinaciones. Ojo a la parte inferior de Type Genius pues, aunque casi imperceptibles, están los botones para cambiar entre las webs de ejemplo a modo de presentación.
En Fonts in use pueden encontrarse cientos de ejemplos de combinaciones presentes tanto en sitios web como en publicaciones físicas, en particular, libros, revistas, películas y anuncios publicitarios. Aunque las vistas previas recogen detalles rápidos de las fuentes consignadas en cada ejemplo, lo más recomendado, además del buscador, es valerse de los tres filtros que le componen para iniciar las consultas: Industries (negocios, arte, noticias, música, deportes, etc.), Formats (publicidad, infografías, revistas, diarios, software, móviles, etc.) y Typefaces.
Otro escaparate de sitios web que logran destacar por sus muy bien escogidas combinaciones de tipografías, eso sí, Typewolf es mucho más personal que las anteriores opciones así que además de las selecciones generales podremos encontrar artículos especializados, rankings y recomendaciones subjetivas, muy valiosas valga decir, que su respectivo autor comparte frecuentemente.
Y finalmente un par de herramientas con las que podremos conocer rápidamente qué tipografías utiliza determinado sitio web que nos haya llamado la atención. Nombre, Font family, Font Size, Line Height y Line Spacing, y en ocasiones hasta el lugar donde pueden conseguirse, se incluyen en los detalles presentados.
Vale destacar que Fontface Ninja además de como bookmarklet está disponible en forma de extensión para Google Chrome y Safari, y WhatFont solo funciona en Chrome. Por cierto, para identificar fuentes de texto en publicaciones físicas no sobra recomendar al siempre útil WhatTheFont!, un servicio online que se encargará de la detección con apenas cargar una imagen y/o captura de pantalla.