これは、フロントエンドチャレンジv24.09.04の提出物です。 私が作ったもの

ランディングページには、ライト/ダークモードの切り替え、滑らかなスクロール、完全なレスポンシブレイアウトなどの最新のユーザビリティに関する考慮事項を備えたレトロなスペースにインスパイアされたデザインがあります。訪問者は、インタラクティブなカルーセルを介して惑星、月、および天のオブジェクトを探索でき、コンテンツは教育的でありながら楽しいように設計されています。

主な機能は次のとおりです。

ライト/ダークモードトグル
• ：ユーザーは、よりパーソナライズされたエクスペリエンスのために、明るいテーマとダークテーマを切り替えることができます。
Interactive Carousel
• ：ダイナミックカルーセルにより、訪問者はさまざまな惑星、月、および天体を探索することができます。
滑らかなスクロール
• ：「Exploration」ボタンは、ソーラーシステムの概要セクションへの滑らかなスクロールをトリガーします。。
完全なレスポンシブデザイン
• ：このサイトは、デスクトップデバイスとモバイルデバイスの両方で見栄えがするように設計されています。
デモ

githubでコードを表示できます：githubリポジトリ

そして、ライブデモをご覧ください：ライブデモ

スクリーンショット

ライトモード：

ダークモード：

Carouselの例：

モバイルビュー：

旅

私は設計計画なしでこれに行きました、そして、私がプロジェクトを通じて働いたとき、計画は変わりました、それは現実世界で起こることを模倣できます。しかし、私は自分のプロジェクトとブレーンストーミングの側面をワイヤーフレーム化してすべてをまとめるのにもっと時間を費やしていたらいいのにと思います。

私はもともとヴィンテージのターミナルスタイルを使用しました。楽しい間、私はネオングリーンが私に努力しているプロの表情を私に与えていないように感じました。

だから、私は最終的によりミニマルな外観を選択しましたが、それでもいくつかの楽しい要素を維持しました。私の新しいビジョンは、使用されている色とASCII仕切りやフォントなどのデザイン要素のいくつかで見ることができるビンテージの教科書に触発されました。

私がデザイン以外に直面した最大の課題は、モバイルデバイスでプロジェクトが見栄えを良くすることを保証することでした。設計を最適化するために、いくつかのセクションに特定のモバイルCSSを作成する必要がありました。 FlexBoxはレイアウトの調整に役立ちましたが、真にシームレスなエクスペリエンスを作成するには試行錯誤が必要でした。

全体として、このプロジェクトは、私が創造的に考え、その場で適応し、デザインの美学とフロントエンド開発における貴重なスキルである使いやすさとバランスをとるように私を押し進めました。