はじめに
サイト開発をデザインからチャレンジしてみたい!第2弾の記事。
最初は、ムードボードにチャレンジしてみた。
本来であればもっと情報を細かく列挙して検討・整理するものだと思うけれど、
今回は、初挑戦かつ全体的な概要をつかみたいので、大まかに(?)デザインの流れを体験してみる。
デザインコンセプトを考える
今日は参考となるデザインを収集してみる。
前にデザイナーさんと雑談していたときに、「Pinterestとかでデザインのイメージを教えてほしい」と言われたのをふと思い出したので、Pinterestで情報収集にチャレンジしてみる💡
(っ'ヮ'c)< なにこれ見てるだけで楽しくて保存する手が止まらない・・・!
すべてが素敵すぎて保存する手が止まらないし、ずっと見ていられる。
でもこれすっごく難しいな、、、
今回は私のプロフィールアイコンと同じ8bitっぽく宇宙感のある(?)雰囲気にしていきたいと思う。
レイアウトを考える
まずは、Figmaを使ってワイヤーフレームをこんな感じで考えてみた。
見やすさに不安は残るが、一旦このレイアウトで実装してみたいと思う。
トップページは、左ペインにプロフィールを表示して、右ペインをカード形式で記事のリンクを表示するイメージする。PCメインで考えるので、SPは後回しにする。
記事ページはこんな感じ。
左にカテゴリを表示して、右はサムネイル(MV)と本文の予定。
トップも記事のページも右ペインだけ、スクロールできるイメージ。
自分で作った後に気づいたけど、RSS Readerと同じようなレイアウトだから意外と見やすいかもしれない💡
マージンとかは、あまり気にして作っていないので、のちに調整する。
まとめ
今日は、Pinterestで参考となるデザインの収集とワイヤーフレームまで検討してみた。
Pinterestで情報収集したり、色を検討したりするの慣れなくてすごく難しい。
見る人に与える印象や、見やすさ・アクセシビリティとか考えること色々あって勉強になる。
明日は実際のデザインに取りかかる予定!
(金曜なのでいっぱいがんばれそう😊!)