[엔지니어에게 적합] 디자인을 좋게 만드는 비결

개인적으로 뭘 하면서'디자인이 미묘하네요. 어떻게 하면 좋은 느낌을 받을 수 있을지 모르겠어요'라고 생각했나요?
tailwind labs를 맡고 있는 디자이너와 파트너인 선생이 트위터에 디자인을 좋게 만드는 팁을 공유하며 내용을 확인하면서 귀결을 시도했기 때문이다.
함께 일하는 엔지니어 Adam Wathan디지털 콘텐츠(RefactoringUI)과 함께 개발 및 판매합니다.
배울 정보가 많아 구매 의욕이 높다.

텍스트 색상에 배경색 추가

구체적인 방법

희롱

텍스트의 opacity 감소

세그먼트를 나눌 때border를 너무 많이 사용하지 마세요.

대안

input 표시줄에 배경색 추가

줄 간격 확대

섀도우

아이콘의 색을 문자의 색보다 옅게 하기

아이콘이 텍스트보다 무거운 경우

목록 태그를 아이콘 등으로 바꾸기

페이지 맨 위에 가는 선을 하나 긋다

효능

이완유도

발생

요소를 한 부분 중첩하다

효능

스크롤 촉진

디스플레이 깊이

입력란의 시간을 낭비하지 마라

크기뿐만 아니라 색깔과 weight도 차이가 있어요.

아이콘을 배경색으로 둘러싸기

텍스트 크기를 line height와 반비례

좋은 느낌의 시계 표시 방법

구체적인 방법

강조 표시 없음

세로줄 필요 없음

단위값은 오른쪽으로 정렬하고 이것을 제외하고는 왼쪽으로 정렬

가는 선

hover에서 동작 버튼 표시

동작 단추에서 텍스트 링크로 이동

너무 음영을 주지 마세요.

# bad
box-shadow: 0px 0px 8px rgba(0,0,0,0.18);
# better
box-shadow: 0px 2px 4px rgba(0,0,0,0.18);

컨텐트를 좋게 만드는 팁

제목 변경 font

본문의 문자 색상이 연하다

드롭다운 목록을 rich로 설정합니다.

2열로 설정

배지 증가

추가설명서

아이콘 추가

그레이에 색칠하기

파란색을 넣으면 차가운 색

티를 더하면 따뜻한 색

같은 페이지에서 크기가 다른 텍스트 보이기

크기가 커지면 weight가 작아진다

사이즈 감소 시 weight

증가

이미지 중첩

중첩된 측면의 이미지에 배경과 같은 색의border를 더하면 강조

데이터의 해석을 바꾸고 디스플레이 방법을 바꾸다

데이터베이스 같지 않음

프로젝트명 단위로 사용

현재와의 차이점(건축 연수 등)

표시

라디오 버튼을 카드 리스트에 놓고 바람을 보게 하다

간단한 텍스트만 사용하지 마라

여러 속성 조합

색상 추가

이미지 사용

짙은 배경 + 흰색 취소

얇은 배경+어두운 텍스트가 더 보기 쉬워

표시된 데이터가 없는 상태에서 행동하기 쉽다

삽화가 즐거움을 준다

CTA 버튼 등 구성

이미지에 inner shadow 추가

배경 간 명암비

차트 색상 일치

액세스 가능성도 우수

light 모드를 간단하게 반전한 후dark 모드로 설정하지 않음

배경을 앞의 레이어처럼 밝게

입력 출력 형식 표시줄

화면 폭만 바라보는 응답 디자인을 사용하지 않습니다

SP의 경우 모드의 위치를 아래로 등

제목 정리 letter-space

제목이 좁아지는 등

중첩된 부품의 가장자리가 정렬되지 않음

checkbox와 라디오의 라벨은 돋보이고 싶은 부분만 강조합니다.

브랜드 컬러는 잘 안 써요.