search

shinonome-inc / design-basic

https://design-basic.netlify.app/
BSD Zero Clause License
2 stars 1 forks source link

Shoko / kitakaze shoko #57

Open sho-thewinds opened 2 years ago

sho-thewinds commented 2 years ago

introduction

what is design

Figma

color scheme

Web page

trace

final

ここでやること

  1. 終わったら該当の課題にチェックを入れる
  2. その課題の中で理解するのに苦労したことや参考になった記事などを貼り、何を学んだのか積極的に発信する
  3. 課題を進めていく中で発見したこと、勉強会や定例会などで吸収したことを積極的に記入する
  4. 自分の知識を蓄積するノートとして活用する
sho-thewinds commented 2 years ago

このissuesの使い方を学ぶ

sho-thewinds commented 2 years ago

UIは、サイトや端末の要素のこと。 UXは、サイトや端末を使用するカスタマーが、それらを利用して感じること。

sho-thewinds commented 2 years ago
image

間隔は均等にする。 高さや幅をそろえる。 はっきりとした色を用いる。 強調するべき箇所かいなかの判断。 写真や図は、はっきりとしたもので、かつ、枠の大きさに合うようにする。 文字や画像だけでは見えにくかったり、無駄なものとして認識されてしまったりするため、その部分の背景に図形を入れるなどして、強調させる。 あまり押してほしくないボタンにはあえて色や枠をつけない。 画像や図形、フォントの種類、文字の大小はそろえる。 ボタンの角は丸みをつける。 適度に余白を作る。 文字の間隔はあけすぎない。 歪みはなくす。 影の位置はずらさない。ずれても左下にはつけない。 ボタンはクリックしやすいように、ある程度の高さと幅を出す。

sho-thewinds commented 2 years ago

CRUD機能 ・Create：登録、生成 ・Read：参照、読み取り ・Update：変更、更新 ・Delete：削除 ソフトウェアのシステムにおいて、基本的に備わっているべき４つの機能の頭文字のこと。 これらが備わっていることで、システムの完全性が高まる。 figmaのコメント機能はこれらのすべてが備わっている。

sho-thewinds commented 2 years ago

Clip content機能を用いると、フレーム外の要素が非表示になる。 目のアイコンで表示・非表示が、鍵のアイコンでロックができる。 ロックをすると、キャンバス上で操作ができなくなる。 ‎ウィンドウズ：‎"Ctrl"+"Shift"+"\"でショートカットキーの一覧が出る。

グループとフレームの違いは、Constraints と Auto Layout があるかないか

sho-thewinds commented 2 years ago

マスク 特定の部分を隠すことができる。

sho-thewinds commented 2 years ago

オブジェクトをクリックしたうえで、そのオブジェクトからの距離を知りたいオブジェクトの上にマウスを置くと、オブジェクト同士の距離を出してくれる。

コンポーネントとは、デザイン全体で再利用できる UI の部品のこと javaのクラスのようなもの。中にインスタンスが入る。 リンクができる。 一つ変えれば全部が変わるようなイメージ。 webページでボタンを押したときのパターン分けなどができる。

instance のアイコンは◇ optionキーはAlt