Tendencias de desarrollo de sitios web. Fuentes de Google Fonts. Fuentes llamativas e inusuales: un enfoque en la tipografía

No es ningún secreto que la industria de TI se está desarrollando a pasos agigantados. Nuevas tecnologías, nuevo hardware, nuevos proyectos. Todo esto tampoco ha escatimado en el desarrollo web. Hoy en día los sitios están lejos de ser los mismos que hace al menos un par de años. Han cambiado bastantes cosas y ahora un poco más de detalle.

Usar un fondo de vídeo

Parecería que el fondo se utiliza desde hace mucho tiempo. Pero recién este año se convirtió en un fragmento verdaderamente significativo del interior del sitio. Para muchos usuarios crea un verdadero efecto sorpresa.
Un ejemplo de una buena implementación de un vídeo de fondo: http://globalmonitoring.ru/

efecto de paralaje

Otro concepto aparentemente próspero, pero que sólo recientemente ha comenzado a aplicarse en todas partes. Si alguien no lo sabe, esta es una forma de agregar capas volumétricas a un sitio web y hacer que se muevan según sea necesario. En otras palabras, agregue más interactividad.
Ejemplo: https://www.grabandgo.pt/

JavaScript y bibliotecas

Hablando de interactividad. ¿Has visto al menos un sitio web sin js en 2017? No. Y ni siquiera se trata de js en sí, sino de sus bibliotecas. Sí, jQuery es algo genial, pero todos los principales desarrolladores de aplicaciones para el usuario ya han cambiado a reaccionar.js, angular.js, vue.js y otras bibliotecas. Yo mismo aprenderé uno de ellos en el futuro (probablemente vue.js).
¿A dónde querías ir sin js? Todos estos elementos de salto, apagones, transiciones suaves y así sucesivamente: todo es conveniente implementarlo mediante scripts.

Adaptabilidad

Algo de lo que vale la pena hablar por separado, y definitivamente hablaremos de ello. Diseño Responsivo sitio: esto ni siquiera es una tendencia de 2017. Esta es una tendencia general últimos años. Como usuario de uno de los intercambios independientes de Runet, todos los días veo solicitudes como: "Crear un sitio web adaptable" o "Ya tenemos un sitio web, necesitamos uno adaptable", etc. La gente entiende que ahora la humanidad pasa mucho más tiempo en los teléfonos inteligentes que en una computadora, por lo que crear un sitio web adaptable (con el principio Mobile First) es, en principio, un componente muy importante de la creación de un sitio web.

robots

Probablemente el punto más interesante de este artículo sean los bots. Ahora paginas simples pocas personas lo necesitan. Dale a todos interactividad y vivacidad al sitio. Un bot es una especie de asistente que ya se utiliza activamente. Mayoría ejemplos simples— Bots de VKontakte y Telegram que te envían cualquier información previa solicitud o sin ella. Esto es muy conveniente para los administradores de la comunidad donde opera el bot. Todo es rápido, hermoso y automatizado.

Un buen propietario de un sitio web trabaja constantemente para mejorarlo. En este trabajo, necesita confiar no sólo en el análisis de su audiencia, los datos de análisis web y las opiniones de los clientes, sino también en las tendencias de la industria. Porque hay muchas cosas útiles en las tendencias que pueden mejorar la interacción del cliente con el sitio. Pero las tendencias deben aplicarse con cuidado y prudencia. Seleccione solo aquellos que sean adecuados para la solución. problemas actuales sitio web y para el desarrollo de negocios.

Por lo tanto, en este artículo no solo proporcionamos una lista de tendencias de diseño web, sino que también hicimos recomendaciones para aplicar estas tendencias a su sitio web.

1. La usabilidad se convertirá en una mercancía.

Un ejemplo de cómo mejorar la usabilidad del sitio http://www.telemirspb.ru/

Siguiente principios básicos La usabilidad ayuda a los sitios web a atraer más clientes y reducir la cantidad de llamadas de soporte. Cada vez más empresas ofrecen auditorías de sitios web, ya que existe una demanda para encontrar errores en el sitio. El hábito de comprar y solicitar servicios a través de Internet aumenta la demanda de sitios convenientes.

Por desgracia, muchos crean sitios web ellos mismos y luego acuden a nosotros con la desgracia creada. Es importante pensar de antemano en el proceso de interacción con el recurso: qué secciones estarán en la primera versión y cuáles se agregarán más adelante. Es imposible planificarlo todo, pero una navegación planificada previamente ahorrará tiempo y dinero en futuras mejoras. Además, elija cuidadosamente el motor de su sitio. No debe elegir un motor de blog (por ejemplo, WordPress) si planea vender algo en el sitio o crear páginas de productos/servicios.

Si trabaja en un entorno altamente competitivo, comprenderá lo importante que es diferenciarse de sus competidores.

Por eso, cuando planeas crear un sitio web o mejorar uno existente, primero debes mirar la interfaz a través de los ojos del cliente e intentar predecir los problemas que el usuario puede encontrar.

2. Los textos largos desaparecerán

Seamos honestos con nosotros mismos: textos largos nadie lee. Las excepciones incluyen libros y artículos. Cuando un cliente quiere pedir algún servicio o producto, está interesado en información específica: precio, principales características del contenido del producto/servicio, condiciones de entrega/tiempo de cumplimiento. La información breve y estructurada ahorra tiempo al cliente y le anima a realizar pedidos. Además, si el cliente compara varios sitios, la descripción más concisa definitivamente prevalecerá.

Además, los textos largos son incómodos de ver desde dispositivos móviles, que casi todo el mundo utiliza. Según las estadísticas mundiales, en octubre de 2016 el número usuarios móviles Hay más que los de escritorio.

Mire la audiencia de su sitio web, por ejemplo, en Yandex.Metrica en Resumen → Informe de tipo de dispositivo y vea qué porcentaje de clientes provienen de teléfonos y tabletas. Tenga en cuenta a esta audiencia al publicar contenido.

Agregue animación a su sitio web de manera inteligente. Debe ser lo más preciso y rápido posible. Ampliar una imagen al hacer clic en ella, indicadores de progreso mientras se esperan resultados en el sitio, aparecer una ventana emergente al agregar un artículo al carrito, cambiar el color de los botones y enlaces después de hacer clic son las microinteracciones más comunes que definitivamente ayudar a sus usuarios.

6. Uso de cinemagraphs o imágenes “en vivo”

Los vídeos panorámicos han sido sustituidos por cinemagraphs, imágenes en las que sólo se mueve un elemento. Lo mejor es colocarlos en la primera pantalla de la página para atraer la atención del usuario y crear un efecto sorpresa.

Si elige un gif que coincida con el tema del sitio, se verá genial. Por ejemplo, puede tomar una foto en vivo de su producto principal y publicarla en pagina de inicio o en pancartas con promociones.

En Rusia, los cinemagraphs se utilizan principalmente en las redes sociales, por lo que damos ejemplos de sitios extranjeros: un sitio para la protección del agua y el alquiler de automóviles.

7. Evite las fotografías de archivo "típicas"

Esperamos que todo tipo de personitas, niñas con auriculares y fotografías de familias sonrientes desaparezcan de los sitios. Ejemplo de imágenes de archivo:

9. Móvil primero

la esencia este enfoque es que al diseñar un sitio web hay que pensar en cómo se mostrará en dispositivos móviles. Se han escrito muchos artículos y libros sobre este tema, por ejemplo, recomendamos leer “Mobile First” de Luke Wrobleski.

Como se mencionó anteriormente (ver punto 2), tráfico móvil está creciendo e incluso hay usuarios que no tienen experiencia en escritorio. Por eso, para no perder clientes, recomendamos optimizar sus sitios para dispositivos móviles.

El artículo enumera sólo las tendencias más básicas. Veamos qué nos espera este año. Si también nota algunas tendencias y está seguro de que se desarrollarán, escriba en los comentarios, estaremos encantados de discutirlas. Y si dudas de que el diseño de tu web esté actualizado o has leído el artículo y has encontrado elementos desactualizados, presta atención al servicio

Infografías vívidas sobre los caminos de desarrollo de un desarrollador web moderno y las tecnologías que necesita aprender para convertirse en front-end, back-end o devops en 2017.

Introducción

La primera prioridad es determinar el perfil. mayor desarrollo. Pruebe, estudie, intente comprender qué está más cerca de usted: ¿frontend, backend, devops o tal vez fullstack?

El camino fronterizo

En cualquier área del desarrollo web, dominar los conceptos básicos está a la vanguardia. Para un principiante, obviamente la tarea número uno es aprendiendo HTML, CSS y JavaScript (+jQuery). A medida que desarrolle habilidades básicas y amplíe su formación teórica, podrá pasar a cosas más especializadas.

Existen muchos marcos y bibliotecas de JavaScript que hacen la vida mucho más fácil a un desarrollador web. Entre ellos, puede elegir el más conveniente y adecuado para un programador en particular. administrador de paquetes, una herramienta de prueba y construcción, un administrador de tareas y mucho más para todos los gustos y necesidades.

Hoy en día, el campo del desarrollo front-end se está desarrollando como ningún otro. Los marcos y las herramientas surgen y mejoran constantemente, están naciendo nuevas metodologías y patrones, la ideología misma del frontend ha ido mucho más allá de los límites del diseño. Por tanto, una de las principales tareas de un desarrollador web es mantenerse a flote, estar consciente tendencias modernas desarrollo de esta área.

El camino del backender

El desarrollo backend también ha experimentado grandes cambios en los últimos años. Hace tiempo que PHP ya no es un monopolio en el mercado de la tecnología backend, aunque última versión, PHP 7 es más que digno de atención. Node.js, Ruby y Go han irrumpido en escena. Tecnologías modernas permiten desarrollar una lógica empresarial compleja y lograr un alto rendimiento.

El camino devops

El trabajo de Devops es muy responsable. Aplicación web moderna Es un organismo enorme y complejo, y la tarea de los devops es mantener su correcto funcionamiento. Monitoreo de procesos, trabajo en la nube, contenedores web, integración continua: estas son solo una pequeña parte del conjunto de tecnologías web que permiten que una aplicación web exista como un todo y realice sus funciones.