Cocoda!

本

Cocoda! での取り組みをまとめました。

運営しているクリエイター: caracal

レイアウトの学び_メッセージの明確化

こんにちは。フロントエンドエンジニアのなけと申します。前回から３週間も空いてしまった！！！😱 ほぼデイリーで取り組むのは中々難しいですね.. ..🎨 レイアウトを考える際に役立つ３つのポイント。前回はターゲットを明確にすることを学びました。今回はメッセージ（内容）を明確にすることを意識して、カフェのホームページを作ってみました。 ..🎨 カフェの構成要素は色々あると思うのですが、「お店の雰囲気や商品」に焦点を当てて作成しました。完成したものはこちらです。

レイアウトの学び_ターゲットの明確化

こんにちは。フロントエンドエンジニアのなけと申します。展覧会を気軽に楽しむ！artmateを開発しています。さて、前回でデザイン４原則の課題を終えました。今回からは実際にデザインを作るためのフレームワークを学びます。枠組みを理解していれば作るものに説得力が出ますね。取り組んだお題：ターゲットが明確なレイアウトを作ろう ..🎨 子どもやその親をターゲットとした遊び場のLPです。早速ですが、完成したものはこちらです！【ポイント】・青や黄色などの、明るく

デザイン４原則の学び_コントラスト編

こんにちは。フロントエンドエンジニアのなけと申します。展覧会を気軽に楽しむ！artmateを開発しています。今日でデザイン４原則のお題は最後です！取り組んだお題：デザイン４原則（コントラスト） ..🎨 食べログ的なサービスの検索一覧画面が今回のお題でした🙌 早速ですが、完成したものがこちらです！！テキストのメリハリ、アイコンによる視認性のメリハリなど、コントラストを付けることで情報に優先度、強弱が生まれました！「近接」「整列」「反復」、そして「コントラ

デザイン４原則の学び_反復編

こんにちは。普段はエンジニアをやっているなけと申します。 iPad Proの液晶を割ってしまいめちゃくちゃ萎えてます😞 気を取り直して、今日もCocoda!に取り組みました。取り組んだお題：デザイン４原則（反復） ..🎨 求人サイトの検索一覧画面が今回のお題でした🙌 早速ですが、完成したものがこちらです！！今回勉強になったのは、「パターンの反復」です。「単純な繰り返し」としての反復（例：カードUIの反復）だけでなく中段左の「アイコン + テキスト」のようなパ

デザイン４原則の学び_整列編

こんにちは。普段はエンジニアをやっているなけと申します。急にめちゃめちゃ寒くなってないですか？？🍃 今回も前回に引き続き、デザインの初歩の勉強です。取り組んだお題：デザイン４原則（隣接） ..🎨 会員登録の入力フォームが今回のお題でした🙌 早速ですが、完成したものがこちらです！！ポイントは２つあって、１つはタイトルとフォームの項目は左寄せで統一していて、一方で、ボタンは振る舞いが異なるので中央寄せしているという点です。ユーザー登録が必要なサービスは多い

デザイン４原則の学び_近接編

こんにちは。普段はエンジニアをやっているなけと申します。 XDにも慣れてきたところでデザイン４原則の勉強です。 Cocoda!すごいなあ..１つずつ課題がありますね。取り組んだお題：デザイン４原則（近接） ..🎨 ECサイトの商品一覧ページが題材でした。早速ですが、完成したものがこちらです！！コレクションUIとリストUIの2パターン作ってみました！どちらも近接によって商品毎の区切りが明確になっていますね。そして今回もコーダー目線でレイヤー整理も行いました

名刺デザインで「よはく」を学ぼう

こんにちは。普段はエンジニアをやっているなけと申します。さて、前回はSNSのプロフィール画面を作りましたが今日は名刺のデザインに挑戦してみます！取り組んだお題：はじめてのデザイン ..🎨 慣れていないので30分くらい掛かっちゃいました。今回は下記の２点が勉強になりました。１. 余白名刺ってWebページやポスターなんかよりも余白の割合が大きいので、0 -> 1で作るとしたら情報と余白のバランス考えるのが難しいだろうな〜って🤔 色々なサイト、本で余白の

Cocoda!をはじめた

こんにちは。普段はエンジニアをやっているなけと申します。フロントメインでUXデザイン、IAなどにも興味を持ちつつもずっとアウトプットしよう！という気持ちにはなれず、、２年ぶりくらいにCocoda!を除いたらとても使いやすくなっていたので良い！！！！と思って始めました😊 取り組んだお題：UIデザインをはじめよう ..🎨 2~3時間掛けてついに完成したのですが、なるほど。これは、コーダーにとって良い勉強になりますね。良いデザインデータとは何か、を学べる気がしま