개발자와 디자이너 협업스터디 2일차
날짜:200704
HTML5
디자인관련
웹디자인 작업시 유의해야할점
1. 트랜드에 맞게 디자인했는지 확인
2. 느린 로딩시간은 금물
3. 이미지 사용시 고품질의 이미지를 사용한다
4. 너무 많은 컬러를 사용하지 않는다
2~3가지 색상으로 제한해서 사용한다
5. 기기에 상관없이 동일한 경험 제공하기
적응형과 반응형의 차이점 설명은 아래링크에서 확인
https://blog.naver.com/eirene100999/221652032305
6. 사용하기 쉽고 명확한 네비게이션 디자인하기(네비게이션은 간결성, 명확성, 일관성을 가지고 있어야 한다)
7. 클릭 가능한 요소는 정확하게 알려라
버튼 디자인을 위한 7가지 기본규칙은 아래링크에서 확인
8. 광고는 적절하게 복잡하지 않게 디자인하기
배너광고회피(banner-blindness)현상에 관련된 자료 설명
예전사이트를 검색해볼수 있는 사이트
Wayback Machine
web.archive.org
2020년 트랜드 웹디자인 및 피하면 좋을 디자인 참고 자료
2020 웹 디자인 트렌드 TOP9
2020년 웹디자인 트렌드 TOP 9
나름 저도 개발자이고 웹과 앱을 운영하는 입장에서 웹디자인에 대해서 아예 관심이 없을 수가 없습니다. 이번에 좋은 글을 보게 되어 제 블로그에 옮겨담는 정리를 해봅니다. 좋은 디자인과 경
nhj12311.tistory.com
한 번에 알아보는 2020 트렌드 웹 디자인
blog.naver.com/kosoodream/221790295323
2020디자인트렌드 알아보기! _ 웹디자인편
웹디자인 트렌드는 끊임없이 변화하고 있습니다.2020년에는 수많은 디자이너들이 다양한 방식으로 디자인...
blog.naver.com
모바일 UI디자인을 위한 UX원칙 10가지
1. 우리는 사용자가 아니다
사용자의 입장을 객관적으로 살필수 있는 가장 좋은 방법은 데이터 관찰, 데이터는 실제 사용자가 행동한 결과를 바탕으로 나타나기 때문에 논쟁보다는 문제 해결에 초점을 맞추도록 도와준다
2. 각화면에서 한가지 행동에만 집중하게 한다
스마트폰 화면은 아주 작다.따라서 한 화면에서는 한가지 행동에만 집중하게 한다
3. 반응을 보여줘야 한다
버튼을 누를때 로딩바이든 토스트이든 반응을 보여줘야 한다
마이크로 인터렉션 : 사용자에게 섬세하게(입력중에도) 반응해, 사용자가 도달해야 할 목표까지 매끄럽게 가도록 돕는 디자인(비밀번호 등록시에 적용하면 좋다)
4. 맥락 있는 흐름을 만든다
광고, 앱스토어, 앱 연결하는 흐름을 만들자
5. 시각적 일관성을 유지한다
컬러, 폰트, 버튼, 이미지, 아이콘, 간격 등등 일관되어야 한다
6. 예상할 수 있어야 한다
같은 속성은 통일하여 무의식 중에 예상할수 있도록 만들 수 있다
7. 의미있는 움직임만 보여준다
체크했을때만 버튼이 보여준다던지, 입력했을때만 버튼을 보여준다 던지 등이 의미있는 움직임 이다
모션은 좋은 사용자 경험을 위한 도구여야 한다. 모션 자체가 목적이 되면 안된다. 사용자의 시선을 움직임이 있는 버튼으로 향하게 만들어 자연스럽게 버튼을 누르는 행동을 유도할 수 있다.
8. 누구나 이해하기 쉬운 글을 제공한다
삭제하시겠습니까의 확인창에 확인과취소가 아니라 취소와 전체삭제(삭제)가 있으면 좀더 명확하게 쉽게 전달된다
9. 사용자의 익숙함을 존중한다
기존꺼에서 최대한 비슷하게 해야함
10. 필요한만큼만 단순하게 디자인한다
https://brunch.co.kr/@dalgudot/110
UI 디자인을 위한 UX 원칙 10가지(ver 2.0)
디자인 독학하기 07 | UI/UX 디자인 경험을 공유합니다 :) [Contents] UI 디자인을 위한 UX 원칙 10가지 01 우리는 사용자가 아니다. 02 각 화면에서 한 가지 행동에만 집중하게 한다. 03 반응을 보여줘야
brunch.co.kr
모바일 UI/UX 디자인시 고려해야할 사항
https://brunch.co.kr/@chulhochoiucj0/8
모바일 UI·UX 디자인시 고려해야 할 가이드라인 1
애플 iOS HIG와 Material design 가이드를 중심으로 | 모바일 앱과 웹 디자인은 데스크톱 웹 디자인과는 많은 부분이 다릅니다. 이는 각 기기device의 특성과 사용 맥락의 차이에서 기인합니다. 우선 모��
brunch.co.kr
그외 참조사이트
UI/UX 디자이너가 되기 위한 7단계
UX 디자인 배우기 #140 | 안녕하세요. [예민한 UX 디자인/총 25시간 인강] 전민수입니다. 지난 20년간 UI/UX 강의와 컨설팅을 하면서 수집했던 해외 자료를 저 혼자만 공유하기에 아까워 브런치를 ��
brunch.co.kr
웹디자인에서 반드시 해야 할 것과 하지 말아야 할 것
UX 디자인 배우기 #135 | 안녕하세요. [예민한 UX 디자인/총 25시간 인강] 전민수입니다. 지난 20년간 UI/UX 강의와 컨설팅을 하면서 수집했던 해외 자료를 저 혼자만 공유하기에 아까워 브런치를 ��
brunch.co.kr
미니멀리스트 디자인의 주요 원칙
UX 디자인 배우기 #121 | 안녕하세요. [예민한 UX 디자인/총 25시간 인강] 전민수입니다. 지난 20년간 UI/UX 강의와 컨설팅을 하면서 수집했던 해외 자료를 저 혼자만 공유하기에 아까워 브런치를 ��
brunch.co.kr
모바일 UI 디자인 애니메이션 3가지 원칙
UX 디자인 배우기 #120 | 안녕하세요. [예민한 UX 디자인/총 25시간 인강] 전민수입니다. 지난 20년간 UI/UX 강의와 컨설팅을 하면서 수집했던 해외 자료를 저 혼자만 공유하기에 아까워 브런치를 ��
brunch.co.kr
#09. 카드 UI 인터랙션
인터랙션 트랜드 깊이 파고 들기 | 카드 UI 인터랙션 카드 스크롤 방식 UI 패턴 카드 스와이프 방식 UI 패턴 스와이프과 스크롤 방식 혼합 카드 인터랙션 방식 UI 패턴 컨텍스트 기반 카드 방식 카��
brunch.co.kr
brunch.co.kr/@chulhochoiucj0/8
모바일 UI·UX 디자인시 고려해야 할 가이드라인 1
애플 iOS HIG와 Material design 가이드를 중심으로 | 모바일 앱과 웹 디자인은 데스크톱 웹 디자인과는 많은 부분이 다릅니다. 이는 각 기기device의 특성과 사용 맥락의 차이에서 기인합니다. 우선 모��
brunch.co.kr
2019 UI UX 및 웹디자인 벤치마킹 사이트 총정리
디자이너에게 필요한 UI/UX 및 웹디자인 벤치마킹 사이트 총정리 | 디자인팝 대표 김민호입니다. 오늘은 지난번에 이어 실무 디자인 프로젝트 작업 시 아이디어 및 콘셉트 도출을 위해 전 세계적�
brunch.co.kr
'프론트엔드 > 그래픽디자인_퍼블리싱' 카테고리의 다른 글
| 개발자와 디자이너 협업 스터디 프로젝트 한 이유 (0) | 2020.07.18 |
|---|---|
| 개발자와 디자이너 협업스터디 3일차 (0) | 2020.07.18 |
| 개발자와 디자이너 협업스터디 1일차 (0) | 2020.07.04 |
| 앱)html5 기본 템플릿 basic structure (0) | 2018.06.11 |
| 웹 표준 퍼블리싱 바이블 책 정리(3) (0) | 2018.06.04 |