Diseño, experiencia del usuario, tecnología y rendimiento: ¡cuando su portal es aún mejor!

Diseño, experiencia del usuario, tecnología y rendimiento: ¡cuando su portal es aún mejor!

Stefan Petri
publicado:

Desde llamativos y vistosos hasta más bien discretos y, sin embargo, útiles: en las últimas semanas y meses hemos introducido numerosos cambios en TutKit.com. Entre ellos se incluyen mejoras de rendimiento y actualizaciones técnicas, así como ajustes en el diseño y la orientación al usuario. En conjunto, todo ello ha repercutido positivamente en la experiencia del usuario. Lo que ha cambiado bajo el capó y en la parte superior - una visión general.

Ahora se oscurece

A partir de ahora, puedes cambiar el diseño a oscuro o claro en cualquier momento con un solo clic. Lo hemos preestablecido tal y como está almacenado en el sistema operativo.

Activar el diseño oscuro en TutKit.com

Al mismo tiempo, también hemos convertido todas las imágenes al formato AVIF para que tu navegador no tenga que descargar tantos datos (esto ha reducido el tamaño del archivo de las imágenes en torno a un 70%).


Activos, plantillas y libros electrónicos: más de un vistazo, sin un clic de desvío

Siempre hemos mostrado pequeñas imágenes de previsualización de todos los contenidos individuales en las páginas de nuestros activos, plantillas y libros electrónicos. Esto le permite ver directamente lo que puede esperar al descargarlos.

También había un pequeño menú detrás de cada imagen de previsualización. Puedes utilizarlo para ampliar la imagen, marcar el contenido como favorito y consultar la información de compatibilidad. Bonito... Pero también significaba que para ampliar cada imagen había que abrir el menú, hacer clic en un icono, ver la imagen y cerrarla antes de pasar a la siguiente. Una distracción innecesaria. Por eso hemos eliminado el menú. Ahora basta con pasar el ratón por encima de una pequeña miniatura para que aparezca la versión grande.

También se han realizado rápidamente otros ajustes útiles durante la revisión: La información sobre compatibilidad puede consultarse ahora a través del icono directamente visible con el Info-i. El contenido puede favorecerse mediante el icono de la estrella, que también es directamente visible y ahora sólo se muestra a los usuarios registrados.

Efecto de hover en elementos individuales
Reducido a lo esencial: Al visualizar nuestros contenidos individuales, basta con pasar el ratón por encima de la imagen de previsualización para visualizarla en tamaño grande. A otras funciones que antes estaban ocultas en un menú ahora se puede acceder directamente a través de iconos.

Videotutoriales: ¡ahora usted también sale en la foto!

Si hace un tiempo visitabas una de nuestras páginas de videotutoriales, habrías encontrado poco más que un desierto predominantemente gris de texto y botones de reproducción. La vista se ha rediseñado por completo para que coincida con el diseño de los activos, las plantillas y los libros electrónicos.

En otras palabras, nuestros tutoriales en vídeo ahora también cuentan con pequeñas miniaturas, lo que es simplemente más agradable estéticamente. Al igual que con los activos, puedes ver si el vídeo es gratuito o una nueva actualización en forma de insignias de colores en las imágenes.

Nueva vista: Vídeos con miniaturas
Del gris al wow: Si antes sólo veías los botones de reproducción de los tutoriales en vídeo, ahora también te mostramos las imágenes de previsualización de los tutoriales.

Esto significa que nuestras páginas tienen ahora un aspecto uniforme. Tanto si se trata de un activo, una plantilla, un libro electrónico o un tutorial de vídeo: hay una imagen de vista previa que se puede ampliar pasando el ratón por encima; hay un botón para descargar o reproducir el vídeo; hay iconos para obtener más información y favoritos; si hay materiales adicionales disponibles para el contenido, como archivos de proyecto, instrucciones o tutoriales de texto, encontrará los enlaces al final de los textos de descripción.

Además, se han eliminado elementos superfluos como los iconos triangulares para expandir y contraer los textos, lo que da a la vista un aspecto más ordenado en línea con el lema "menos es más". Por último, también hemos preparado todas las optimizaciones para dispositivos móviles.

El gran orden en las páginas de los paquetes completos

¿Qué se puede eliminar? ¿Qué se puede mostrar de otra manera? ¿Qué se puede colocar en mejor posición? Estas fueron las preguntas que nos hicimos en las páginas de nuestros paquetes completos para racionalizarlas sin dejar de mantener un alto contenido informativo. Además de los cambios en la vista de los contenidos individuales mencionados anteriormente, hicimos los siguientes ajustes:

Galería: En las galerías, mostramos cómo se pueden utilizar nuestros activos y plantillas, por ejemplo. Anteriormente había un efecto de rotación aquí. Bonito, pero también distraía. Por eso hemos reducido la vista de la nueva galería a sólo tres cosas: se ve la imagen seleccionada, un subtítulo y la navegación a izquierda y derecha, sin muchos efectos pirotécnicos alrededor.

Expandir y colapsar y un poco más de color: hasta ahora, casi todas las secciones de una página completa de un paquete podían expandirse y colapsarse, para lo que se disponía de los correspondientes botones en forma de triángulos. Esta función se ha eliminado. Hace que las páginas sean aún más limpias, y seamos sinceros: ¿hay alguien que haya utilizado alguna vez esta función? También hemos dado más color a los subtítulos. De arriba a abajo, un suave color verde TutKit separa ahora las secciones individuales en lugar de un tosco negro.

Área de información: en la parte superior derecha de las páginas del paquete completo, hemos agrupado toda la información adicional, por ejemplo, la relativa a la compatibilidad, el número de contenidos y las categorías. Aquí se reúnen muchos datos.

Hemos vuelto a ordenar el área de información y la hemos mejorado con ilustraciones. Por ejemplo, el progreso de aprendizaje de los tutoriales ahora sólo se muestra para los usuarios registrados (los visitantes desconectados no lo necesitan de todos modos). La calificación de nuestros paquetes se ha trasladado a la sección de comentarios. Se ha añadido un enlace a los derechos de uso en la sección de información. Por último, probablemente el cambio más notable se refiere a la presentación de las personas que crearon el paquete. En lugar de sus nombres, mostramos sus retratos. Esperemos que esto también les resulte más simpático...

Muchas pequeñas mejoras en los detalles:

  • No más navegación deslizante para software/categorías
  • en general, desplazamiento continuo en las páginas de búsqueda, categorías, etc.
  • Tarjetas: menos sombras, iconos desaparecidos, esquinas cuadradas
  • Fichas: Animación eliminada, superposición verde en su lugar
  • Efecto Hover optimizado para el botón dividido
  • Caras más grandes, por ejemplo en el blog y en el recorrido en vídeo
  • Cara en el formulario de contacto
  • Pie de página completamente nuevo (ya no se abre, muestra la cara, etc.)
  • Página del autor: "Al sitio web del autor" eliminado, desplazamiento continuo, superposiciones verdes
  • Página de inicio: Nuevo contenido ya no como slider
  • 4 columnas para los autores
  • Salto de página para ventanas emergentes
  • Nuevo módulo para grupos destinatarios

Con menos preguntas sobre preguntas para mejorar el rendimiento

Páginas rápidas que se cargan rápidamente: a Google le gusta, a nosotros nos gusta y seguro que a usted también. En cuanto al rendimiento de nuestro portal, seguiremos introduciendo mejoras en el futuro. Por ejemplo, hemos optimizado las imágenes. Hemos pasado del magro formato JPG a los formatos WEBP y AVIF, mucho más magros.

También hemos trabajado en las bases de datos y las consultas que se realizan cuando se consultan nuestras páginas. Es todo muy técnico, pero por poner un ejemplo: Si llegas a una de nuestras páginas de paquetes completos con tutoriales, el sistema necesita saber, entre otras cosas, hasta qué punto puedes ver los vídeos. Entonces, ¿tienes una suscripción? ¿Ha comprado el paquete? ¿Es posible que los vídeos individuales sean gratuitos? Tenemos que hacer muchas preguntas de este tipo al abrir la página, lo que, por supuesto, lleva tiempo. En consecuencia, aquí es donde empezamos a mejorar el rendimiento (atención, ahora se está poniendo muy técnico):

  • Se eliminaron las consultas innecesarias a la base de datos que pedían más información de la realmente necesaria.
  • Se ha mejorado la velocidad de las consultas a la base de datos ejecutadas con más frecuencia.
  • Se ha optimizado el código de los métodos php y se han eliminado las consultas repetidas a la base de datos en determinados bucles.
  • Se han comprobado todas las partes de nuestro sistema en busca de consultas innecesarias a la base de datos utilizadas en todas las páginas, especialmente las vinculadas a nuestros elementos de menú. Se han optimizado para mejorar el rendimiento.
  • Se descubrió que algunas consultas a la base de datos se repetían innecesariamente varias veces, sobre todo las que vinculaban a los usuarios con los paquetes. Estas repeticiones se han corregido mediante un sistema de caché a corto plazo, que ahorra tiempo y recursos.
  • Se supervisó el registro de errores del sistema y se resolvieron todos los problemas notificados.
  • Se comprobó si las tareas automatizadas del sistema (cronjobs) se prolongaban demasiado o se cancelaban. Estas tareas se hicieron más eficientes filtrando la información directamente desde la base de datos en lugar de hacerlo indirectamente mediante código php.

¿Todo al día con la tecnología? Todo al día.

Por supuesto, también hemos optimizado mucho bajo el capó y actualizado paquetes de software como

  • Actualización a la última versión de PHP.
  • Laravel (nuestro framework) se ha actualizado de la versión 9 a la 10.
  • Se han actualizado casi 35 paquetes del framework, así como el SDK de nuestro proveedor de pagos Braintree.
  • Ahora dependemos de http2 (preferiríamos usar la versión 3, pero el servidor Apache (todavía) no lo soporta.
  • Ubuntu ha sido actualizado de 20.04 a 22.04 (esto era importante para el soporte de imágenes AVIF).

¿Qué más está por venir?

Actualmente estamos trabajando duro para garantizar que nuestro portal también esté disponible en varios idiomas a partir de enero. Es todo un esfuerzo, pero nos llena de orgullo lograrlo.

Además, será posible adquirir contenidos individuales con descuento a partir de la semana que viene, siempre que haya una promoción en curso. Como consecuencia, nuestra tienda independiente (shop.psd-tutorials.de) dejará de actualizarse con nuevos productos y también se desconectará a más tardar a finales del primer trimestre de 2024, y todos nuestros contenidos estarán disponibles únicamente en TutKit.com.

También queremos enviar un boletín al menos una vez al mes en 2024 para que todos los miembros y suscriptores del boletín puedan ver las novedades. Porque una cosa siempre hemos conseguido hacer hasta ahora: ¡cada semana se ha puesto en línea al menos un nuevo contenido!

Por supuesto, seguiremos ofreciendo nuevos contenidos interesantes. Por ejemplo, a mí mismo me gustaría incluir un nuevo curso de formación sobre Adobe Photoshop Elements, ya que por fin ha cambiado algo en la interfaz y ahora merece la pena ofrecer un curso de formación completamente nuevo. El tema de la IA seguirá ocupándonos y mantendremos actualizados los productos existentes o proporcionaremos productos completamente nuevos.

¿Todavía le falta algo? Envíeme un correo electrónico a info@tutkit.com. También me encantaría que el blog tuviera una función de comentarios. ¿Qué le parece? ¿Tiene sentido o casi nadie comenta por falta de tiempo?

Publicado el de Stefan Petri
Publicado el:
En Stefan Petri
Stefan Petri opera junto con su hermano Matthias el popular foro especializado PSD-Tutorials.de así como la plataforma de aprendizaje en línea TutKit.com, que se centra en la formación y el perfeccionamiento de competencias profesionales digitales.
Volver a la vista general