Design, UX, tecnologia e performance - quando seu portal fica ainda melhor!

Design, UX, Tecnologia e Performance - quando seu portal fica ainda melhor!

Stefan Petri
publicado:

De marcante e visível a discreto, mas ainda assim útil - nas últimas semanas e meses, fizemos várias alterações no TutKit.com. Isso incluiu melhorias de desempenho e atualizações técnicas, bem como ajustes de design e navegação do usuário. Tudo isso afeta positivamente sua experiência de usuário. O que mudou por dentro e por fora - uma visão abrangente.

Agora vai escurecer

A partir de agora, você pode alternar o design entre escuro e claro com apenas um clique. Configuramos como está definido no sistema operacional.

Ativar o design escuro no TutKit.com.

Nesse mesmo movimento, também convertemos todas as imagens para o formato AVIF, para que seu navegador não precise baixar tantos dados (aproximadamente 70% das imagens ficaram menores em tamanho de arquivo).


Ativos, Modelos e E-books: mais visíveis, sem cliques desnecessários

Sempre exibimos pequenas miniaturas nas páginas dos nossos Ativos, Modelos e E-books para todos os conteúdos individuais. Dessa forma, você pode ver diretamente o que esperar ao baixar.

Antes, por trás de cada miniatura havia um pequeno menu. Através dele, você podia ampliar a miniatura, favoritar o conteúdo e obter informações de compatibilidade. Legal ... Mas também significava que você precisava abrir o menu, clicar em um ícone, visualizar e fechar a imagem para passar para a próxima. Um caminho desnecessário. Por isso, removemos o menu. Agora basta passar o mouse sobre uma miniatura e pronto: a versão grande é exibida.

Rapidamente, durante a revisão, surgiram outras adaptações válidas: As informações de compatibilidade agora podem ser acessadas através do ícone de info-i diretamente visível. Favoritar o conteúdo é feito através do ícone de estrela, que agora é exibido apenas para usuários logados.

Efeito hover em conteúdos individuais
Simplificado: Ao visualizar nossos conteúdos individuais, basta passar o mouse sobre a miniatura para exibi-la em tamanho grande. Outras funções, anteriormente escondidas em um menu, agora são acessíveis diretamente através de ícones.

Vídeo Aulas: Agora você também está por dentro da visualização da imagem!

Se você visitou uma de nossas páginas de Video Aulas há algum tempo, encontrou nada mais do que um deserto predominantemente cinza de textos e botões de reprodução. A visualização foi completamente revisada para seguir o layout dos Ativos, Modelos e E-books.

Portanto, agora, mesmo em nossas Video Aulas, há miniaturas visíveis, o que simplesmente parece esteticamente mais agradável. Se o vídeo é gratuito ou uma atualização fresca, é mostrada - como nos Ativos - por meio de distintivos coloridos nas imagens.

Nova visualização: vídeos com miniaturas.
De cinza a uau: Agora, nas Video Aulas, assim como nos tutoriais, você também visualiza as miniaturas.

Assim, nossas páginas agora são uniformemente apresentadas. Seja Ativo, Modelo, E-book ou Video Aula: há uma miniatura que você pode expandir ao passar o mouse sobre ela; um botão para baixar ou reproduzir o vídeo; ícones para mais informações e para favoritar; caso haja materiais adicionais como arquivos de projeto, instruções ou tutoriais em texto disponíveis, os links podem ser encontrados no final dos textos descritivos.

Além disso, removemos elementos desnecessários como ícones de triângulo para expandir e recolher os textos, para que a visualização seja mais limpa, seguindo o princípio de menos é mais. Todas as otimizações também foram preparadas para dispositivos móveis.

A grande limpeza nas páginas de Pacotes Completos

O que pode ser removido? O que pode ser apresentado de forma diferente? O que pode ser colocado em uma posição melhor? Fizemos essas perguntas às nossas páginas de Pacotes Completos para simplificá-las e manter o conteúdo informativo. Além das alterações mencionadas anteriormente na visualização dos conteúdos individuais, fizemos as seguintes adaptações:

Galeria: Nas galerias, mostramos como você pode usar nossos Ativos e Modelos, por exemplo. Antes, havia um efeito de rotação aqui. Bonito, mas também distraído. Portanto, reduzimos a nova visualização da galeria para exatamente três elementos: você vê a imagem selecionada, um subtítulo e a navegação para a esquerda e para a direita - sem grandes efeitos extravagantes.

Expandir/Recolher e um pouco mais de cor: Até agora, quase toda seção em uma página de Pacotes Completos poderia ser expandida e recolhida, com botões correspondentes em forma de triângulo disponíveis. A função foi removida. Torna as páginas mais limpas - e sejamos honestos: Existe alguém que realmente usava essa função? Além disso, adicionamos consistentemente mais cor aos subtítulos. Agora, ao invés de um preto pesado, um verde suave da Tutkit separa as diferentes seções de cima para baixo.

Zona de Informações: Na parte superior direita das páginas de pacotes totais, reunimos todas as informações adicionais, como compatibilidade, quantidade de conteúdo e categorias. Muitos dados são reunidos aqui.

Nós organizamos e melhoramos visualmente a Zona de Informações. Agora, o progresso do aprendizado nos tutoriais só é exibido para usuários logados (visitantes não logados não precisam disso de qualquer maneira). A avaliação dos nossos pacotes foi movida para a área de comentários. Novidade na Zona de Informações é um link para os direitos de uso. A mudança mais marcante afeta a representação das pessoas que criaram o pacote. Ao invés de seus nomes, mostramos seus retratos a você. Esperamos que isso torne tudo um pouco mais amigável ...

Pequenas melhorias detalhadas:

  • nenhuma navegação em slider mais para Software/Categorias
  • rolagem contínua em geral na busca, páginas de categoria etc.
  • Cards: menos sombras, ícones removidos, cantos quadrados
  • Cards: animação removida, em vez disso, sobreposição verde
  • Efeito hover otimizado no botão dividido
  • Rostos maiores, por exemplo, no blog e no tour de vídeo
  • Rosto no formulário de contato
  • Rodapé completamente novo (sem mais abertura, mostrando rostos etc.)
  • Página do Autor: "Ir para o site do autor" removido, rolagem contínua, sobreposições verdes
  • Página inicial: Novos conteúdos não são mostrados mais como slider
  • 4 colunas para autores
  • Pular páginas pop-ups
  • Novo módulo para grupos-alvo

Com menos perguntas sobre a melhoria de desempenho

Páginas rápidas, que carregam rapidamente - o Google gosta, nós gostamos e com certeza você também gosta. No que diz respeito ao desempenho do nosso portal, ainda faremos melhorias no futuro. No entanto, implementamos, por exemplo, a otimização de imagens. Elas foram mudadas do formato JPG para os formatos WEBP e AVIF muito mais leves.

Também nos ocupamos com as bases de dados e as consultas realizadas ao acessar nossas páginas. Tudo é muito técnico, mas para dar um exemplo: quando você acessa uma de nossas páginas de pacote total com tutoriais, o sistema precisa saber, entre outras coisas, até que ponto você pode assistir aos vídeos. Você tem uma assinatura? Comprou o pacote? Alguns vídeos são gratuitos? Temos que fazer muitas perguntas ao acessar as páginas, o que obviamente leva tempo. Por isso, estamos trabalhando para melhorar o desempenho (Cuidado, aqui vem a parte técnica):

  • Consultas à base de dados desnecessárias, que pediam mais informações do que realmente eram necessárias, foram removidas.
  • A velocidade das consultas mais frequentes à base de dados foram melhoradas.
  • O código em métodos PHP foi otimizado e consultas repetitivas à base de dados em loopings específicos foram eliminadas.
  • Todas as partes do nosso sistema foram verificadas quanto a consultas desnecessárias ao banco de dados, que eram utilizadas em todas as páginas, especialmente aquelas relacionadas aos nossos menus. Essas foram otimizadas para um melhor desempenho.
  • Foi identificado que algumas consultas ao banco de dados eram repetidas desnecessariamente, especialmente aquelas que relacionam usuários a pacotes. Essas repetições foram corrigidas com o auxílio de um sistema de armazenamento temporário (Cache), economizando tempo e recursos.
  • O log de erros do sistema foi monitorado e todos os problemas relatados foram resolvidos.
  • Tarefas automatizadas do sistema (Cronjobs) foram verificadas quanto àquelas que rodavam por muito tempo ou eram interrompidas. Essas tarefas foram otimizadas, filtrando informações diretamente do banco de dados em vez de indiretamente via código PHP.

Tudo atualizado com a tecnologia? Tudo atualizado!

Naturalmente, também otimizamos muito sob o capô e atualizamos pacotes de software como:

  • Atualização para a versão mais recente do PHP.
  • O Laravel (nosso Framework) foi atualizado da versão 9 para a 10.
  • Cerca de 35 pacotes do framework foram atualizados, bem como o SDK do nosso provedor de pagamento Braintree.
  • Agora estamos usando o http2 (preferiríamos usar a versão 3, mas ainda não é suportada pelo servidor Apache.
  • O Ubuntu foi atualizado de 20.04 para 22.04 (foi importante para o suporte a imagens AVIF).

O que ainda está por vir?

Estamos trabalhando intensamente para tornar nosso portal acessível em vários idiomas a partir de janeiro. Isso requer um esforço considerável, mas estaremos orgulhosos quando conseguirmos.

Também será possível comprar conteúdos individuais com desconto na próxima semana, caso haja uma promoção em andamento. Isso resultará no fato de que nossa loja separada (shop.psd-tutorials.de) não será mais atualizada com novos produtos e fechará até o final do 1º trimestre de 2024, com todos os nossos conteúdos disponíveis exclusivamente em TutKit.com.

Em 2024, pretendemos enviar pelo menos um boletim informativo por mês para que todos os membros e assinantes de boletins possam ver todas as novidades. Até agora, conseguimos sempre ter pelo menos um novo conteúdo online a cada semana!

Também continuaremos a disponibilizar novos conteúdos interessantes. Eu mesmo quero gravar um novo treinamento sobre o Adobe Photoshop Elements, pois a interface mudou e agora vale a pena oferecer um treinamento completamente novo sobre o assunto. O tema da IA continuará sendo relevante, então vamos manter produtos existentes atualizados ou disponibilizar completamente novos produtos.

Falta alguma coisa? Então escreva-me um e-mail para info@tutkit.com. Eu ficaria feliz se o blog também tivesse uma função de comentários. O que você acha? É útil ou ninguém comenta mais por falta de tempo?

Publicado em de Stefan Petri
Publicado em: De Stefan Petri
Stefan Petri administra junto com seu irmão Matthias o popular fórum especializado PSD-Tutorials.de, bem como a plataforma de E-Learning TutKit.com, que tem como foco a formação e o treinamento de competências profissionais digitais. 
Voltar para a visão geral