FE RYAN
완벽하지 않으면 어때
FE RYAN
전체 방문자
오늘
어제

블로그 메뉴

  • 💾 깃허브 링크
  • 홈
  • 태그
  • 분류 전체보기 (151)
    • 개인프로젝트 (8)
      • 개인 포트폴리오 웹앱 (6)
      • 프론트엔드 기술면접 아카이빙 웹앱 (2)
    • 기록 (121)
      • 원티드 프리온보딩 인턴십 (0)
      • 코드스테이츠 프론트엔드 (75)
      • 생각들 (3)
      • Today I learned (32)
      • 회고 (9)
      • 리뷰 (1)
    • 개발 (17)
      • React (3)
      • Javascript (7)
      • CSS (1)
      • HTML (3)
      • HTTP (1)
      • 자료구조 (0)
      • 알고리즘 (2)
    • 코딩테스트 (2)
      • 백준 (2)
      • 프로그래머스 (0)
    • 디자인 (1)
      • UI & UX (1)
    • 수학 (0)
    • 자기계발 (0)

공지사항

인기 글

태그

  • seb39
  • useMemo
  • 부트캠프
  • seb 39
  • 타입스크립트
  • css
  • HTML
  • 리액트
  • ES6
  • 메인프로젝트
  • 회고
  • 자바스크립트 딥다이브
  • Til
  • 자바스크립트
  • 포트폴리오
  • 신입개발자
  • 코드스테이츠
  • 프론트엔드
  • 딥다이브
  • 원시타입

최근 댓글

최근 글

티스토리

hELLO · Designed By 정상우.
FE RYAN

완벽하지 않으면 어때

디자인/UI & UX

똥손 개발자를 위한 간단한 디자인 스킬 14개 - 코딩애플

2022. 3. 30. 19:57
728x90

코딩애플님 영상 내용 그대로 정리한 글입니다.

1. 다양한 색 금지

흰 바탕에 검은 글씨로 UI 만든 다음 특정 부분(버튼, 아이콘, 강조할 글자, 로고)만 하이라이트 색 넣어주면 깔끔하다.

2. padding 많이

시인성, 가독성, 그리고 내용의 강조

3. 폰트는 제목용/ 본문용 2개만

한글폰트는 용량이 매우 크므로 용량을 줄이고 싶으면 하나의 폰트로 굵기조절해서 써도 됨.

4. 심심하면 글자에 gradient

제목 글씨에 넣으면 이쁘다.(요새 애플이 밀고있는 거)

5. 제목은 16px 이상, 본문은 16px 이하

제곧내

6. 자간간격 조절하면 이쁨

너무 붙어있으면 답답함.

7. 이미지 폭, 높이 동시조절 금지

width, height 동시 조절시 이미지가 짜부러질 확률 높음. width만으로 조절하던가 background-image로 주던가 해라.

8. 안 중요한 글씨는 회색으로

블로그글 태그 같은것들

9. 테두리는 옅은 회색부터 넣어보기

box나 card 등의 ui요소에 그림자나 테두리가 필요한 경우 우선 옅은 회색부터 넣어보자. 자주쓰는 회색 색상코드 외워두면 편하다.(#ddd)

10. 그래픽 애셋 사용 시 통일감이 우선

선 굵기, 채색여부, gradient 여부가 일치하는 요소들로 쓰기.

11. 급한 로고디자인은 fontsqirrel 사용해보기

저작권 잘 확인하고 갖다써라.

12. 사진 배경에 흰 글씨가 이쁨

배경 사진이 너무 밝으면 css로 어둡게 해준다.(background-color: #0005; background-blend-mode: darken;)

13. 여백의 미

한 곳에 많은 글자나 이미지 꾸겨넣지 마라.

14. 디자인 참고사이트들

dribbble이나 canva, 핀터레스트 같은데서 잘 된거 보고 하는데 똑같이 하면 표절이니까 구성같은거 참조해서 하기.

728x90
저작자표시 비영리 변경금지 (새창열림)
    FE RYAN
    FE RYAN

    티스토리툴바