デザイン、UX、技術、パフォーマンス - もっと良くなるポータル!

デザイン、UX、テクニック&パフォーマンス - あなたのポータルがさらに良くなる場合!

Stefan Petri
掲載:

目立つものから目立たないけれども便利なものまで - 過去数週間および数カ月にわたり、TutKit.comで多くの変更を行いました。これには、パフォーマンスの向上や技術的なアップデート、デザインやユーザーガイダンスの調整が含まれています。すべての変更がユーザーエクスペリエンスにプラスの影響を与えています。エンジンルームとその上で何が変更されたか - 包括的な概要。

暗くなります

今後、デザインを暗いまたは明るいに切り替えることができます。オペレーティングシステムにデフォルトで設定されているとおりに設定されています。

TutKit.com でダークモードを有効にする

この流れに合わせて、すべての画像をAVIF形式に変換し、ブラウザがダウンロードするデータ量を少なくしました(ファイルサイズは約70%減少しました)。


アセット、テンプレート&電子書籍:クリックせずに一目で確認

以前から、当社のアセット、テンプレート、電子書籍の各コンテンツページでは、個々の内容について小さなプレビュー画像を表示しています。ダウンロード時に何が待っているかをすぐに確認できます。

各プレビュー画像の背後には、拡大表示やお気に入りに追加、互換性情報の取得などが行える小さなメニューがありました。これまでのように、各画像の拡大表示のためにメニューを開いてアイコンをクリックし、画像を表示して閉じる必要があるため、次に移る前にこれを繰り返す必要がありました。不要な回り道でした。そのメニューは削除され、今では小さなプレビュー画像の上にマウスを置くだけで、ふっと大きなバージョンが表示されます。

改訂に伴い、さらに有益な適応が可能になりました。 互換性情報は、情報アイコンを直接表示することで取得できます。コンテンツのお気に入り登録は、ロゴインユーザーの場合のみ表示されるアイコンで行えます。

単一コンテンツのホバーエフェクト
基本に集約:当社の個々のコンテンツを表示する際は、プレビュー画像にマウスを合わせるだけで、大きく表示されます。以前はメニューに隠されていたその他の機能は、今や直接アイコンで利用できます。

ビデオチュートリアル:画像で完全に理解

過去に当社のビデオチュートリアルページを訪れた場合、ほとんどがグレーのテキストや再生ボタンだけの荒野に直面したかもしれません。その表示を完全に見直し、アセット、テンプレート、電子書籍のレイアウトをそのまま採用しました。

つまり、ビデオチュートリアルでも今は小さなプレビュー画像が表示され、視覚的に洗練されます。ビデオが無料であるか、新しいアップデートであるかは、アセットのように、画像のバッジで確認できます。

新しいビュー:プレビュー画像付きの動画
グレーからワオ:ビデオチュートリアルページでは再生ボタンが表示されているだけだったのが、今ではプレビュー画像も表示されます。

したがって、当社のページは今や一貫して統一されています。アセット、テンプレート、電子書籍、ビデオチュートリアル、どれもプレビュー画像があり、ホバーすることで拡大表示できます。ダウンロードやビデオ再生のためのボタンがあり、さらなる情報やお気に入り機能のためのアイコンもあります。コンテンツにプロジェクトファイルやガイド、テキストチュートリアルなどの関連資料がある場合は、説明文の最下部にリンクが表示されます。

また、テキストを開閉するための三角アイコンなど、不要な装飾を削除することで、より整然とした表示になりました。すべての最適化は最終的にモバイルデバイスにも適用されます。

パッケージ全体のページの大掃除

何を削除できるか?何を異なるものにできるか?より良い場所で提供できるものは何か?そうした問いかけにより、パッケージ全体のページをスリムにし、情報量を高く保ちつつ改善しました。個々のコンテンツの表示に関する上記の変更に加え、次の調整を行いました:

ギャラリー:例えば、当社のアセットやテンプレートをどのように使用できるかをギャラリーで示します。以前は回転効果がありました。素敵ですが、気が散ります。新しいギャラリーの表示は、選択した画像とサブタイトル、左右へのナビゲーションの3つに厳密に絞りました - その周りに多くの効果はなくなりました。

開いたり閉じたりと少し多くの色:これまで、パッケージ全体のほぼすべてのセクションを開いたり閉じたりできましたが、それには三角形の形で提供される対応するボタンが必要でした。その機能は削除されました。ページがさらにすっきりしている - 誰かが本当にその機能を使ったことがありますか?それに加えて、区切り上から下に向けて、ゴツゴツとした黒の代わりに、柔らかいTutKitグリーンが各セクションを分けるようになりました。

情報エリア: 各パッケージページの右上には、互換性、コンテンツ数、およびカテゴリに関する追加情報をまとめています。データがたくさん集まります。

情報エリアを整理して見栄えの良くしたおり、チュートリアルの学習状況は今後はログインユーザーのみに表示されます(ログアウト状態の訪問者は必要ありません)。パッケージの評価はコメントエリアに移動しました。 一番注目すべき変更は、パッケージを作成した人々の表示方法です。 彼らの名前の代わりに、その人の肖像画を表示します。心よりもフレンドリーに見えるといいですね...

多数の細かい改善点:

  • ソフトウェア/カテゴリのスライダーナビゲーションはもうありません
  • 検索、カテゴリページなどで常にスクロールするように変更
  • カード: 影を減らし、アイコンを削除し、四角い角を作成
  • カード: アニメーションを削除し、代わりに緑色のオーバーレイを追加
  • スプリットボタンのホバーエフェクトを最適化
  • ブログやビデオツアーで、例えばより大きな顔
  • コンタクトフォームに顔画像
  • フッターを完全に新しくしました(もう開閉しない、顔を表示しない等)
  • 著者ページ: "著者のウェブサイトへ" を削除、スクロールを続け、緑色のオーバーレイ
  • ホームページ: 新しいコンテンツはもうスライダーとして表示されません
  • 著者の4列
  • ポップアップ時のページめくり
  • ターゲットグループ向けの新しいモジュール

パフォーマンス向上に関する質問が減りました

Googleも、私たちも、そしてあなたもおそらく、高速な読み込み速度にあこがれるでしょう。 ウェブサイトのパフォーマンスに関しては、今後も改善を進めていきます。 たとえば、画像の最適化はすでに実施されています。 JPG 形式からはるかに軽い WEBP および AVIF 形式に変更されました。

また、私たちはサイトの読み込み時に行われるデータベースクエリと操作に応じて考えました。 かなり技術的な話になりますが、例を挙げると、チュートリアルのページにアクセスした際に、システムはビデオを視聴できるかどうかなどを知る必要があります。 会員になっていますか? パッケージを購入しましたか? 個々のビデオが無料かもしれませんか? このような質問をたくさん行う必要があり、もちろん時間がかかります。 そのため、パフォーマンスの向上を図るために対策を講じています(ここで本当に技術的になります)。

  • 必要以上の情報を尋ねる無駄なデータベースクエリが削除されました。
  • 最も頻繁に実施されるデータベースクエリの速度が向上しました。
  • PHP メソッド内のコードが最適化され、特定のループ内で繰り返されるデータベースクエリが削除されました。
  • 当社のシステムのすべての部分で使用されている無駄なデータベースクエリ(特にメニューアイテムに関連するもの)が最適化されました。
  • ユーザーとパッケージをリンクするデータベースクエリなど、不要に繰り返されるデータベースクエリが、リソースを節約するためにキャッシュシステムを使用して修正されました。
  • システムのエラーログが監視され、すべての報告された問題が修正されました。
  • 長すぎるまたは中止された Cron ジョブがチェックされ、これらのタスクは、PHP コードを介した間接的なフィルタリングではなく、データベースから情報を直接取得することによって効率化されました。

技術面はすべて最新の状態!

もちろん、私たちはハードウェアの中でも最適化を図り、次のようなソフトウェアパッケージの更新を行いました:

  • 最新の PHP バージョンへのアップデート
  • Laravel(当社のフレームワーク)がバージョン 9 から 10 にアップデートされました。
  • Framework の 35 パッケージと支払いサービスプロバイダ Braintree の SDK の更新
  • http2 への移行(できれば Version 3 を使用したいところですが、現時点では Apache サーバーが対応していません)
  • Ubuntu を 20.04 から 22.04 にアップグレード(AVIF 画像サポートに重要)

今後の展望

私たちは現在、1月から複数言語でポータルにアクセスできるようにする取り組みを行っています。 かなりの労力が必要ですが、達成できた時には達成感を得られます。

また、今週以降、特別セールが行われている場合は、個々のコンテンツを割引価格で購入できるようになります。 これにより、当社の別個のショップ(shop.psd-tutorials.de)は新製品で更新されなくなり、2024年第1四半期までに閉鎖され、全てのコンテンツが TutKit.com で入手可能になります。

また、2024年からは最低でも1か月に1回はニュースレターを配信し、メンバーやニュースレター購読者が新規コンテンツを確認できるようにしたいと考えています。 これまで常に1週間に少なくとも1つの新しいコンテンツがオンラインで公開されていたことは変わりません!

もちろん、引き続き興味深い新しいコンテンツを提供します。 たとえば、Adobe Photoshop Elements に新しいトレーニングを追加したいと考えています。 インターフェースにもついに変更が加えられたため、新しいトレーニングを提供する価値があります。AI(人工知能)のテーマは引き続き私たちを取り組ませます。そのため、既存の製品を最新の状態に保ったり、完全に新しい製品を提供する予定です。

何か足りないですか?その場合は、info@tutkit.com にメールでお知らせください。ブログにコメント機能を追加できると嬉しいです。あなたはどう思いますか?有益ですか、それとも時間の都合で誰もコメントしませんか?

公開日 より Stefan Petri
公開日:
より Stefan Petri
Stefan Petriとその兄弟Matthiasは、人気のある専門フォーラムPSD-Tutorials.deと、デジタル職業能力の教育と研鑽に重点を置いたEラーニングプラットフォームTutKit.comを運営しています。 
概要に戻る