반응형 웹 + 워드프레스 사이트 구축

웹접근성 인증마크

1. 색 배제하고 크기, 모양, 방향으로만으로 정보 제공 가능 < > 닫기

2. 텍스트 vs 배경 명도대비 4.5:1

폰트 18pt이상(=24px) 굵은 14pt(3:1 명도) =18.66px

http://www.colorsontheweb.com/colorcontrast.asp

3. 배너 마우스 키보드로 제어 가능

4. 반복되는 메뉴는 건너뛰기 링크 제공

5. 해상도 96dpi

 

반응형 웹 만들기

1. 일단 모바일 화면을 먼저 만든다.  조건 : 가볍게, 쓸데없는 걸 다 버린다.

2. 소스 확보해서 서칭

3. 서브와이어프레임, 메인 와이어프레임-> 모바일화, 그래픽 요소 분석

4. 벤치마킹

5. 레이아웃, 스타일 컨셉 셋팅

 

컬러도출

1. 로고 CI를 통해 메인 컬러 도출

2. 서브컬러 도출(유사컬러, 배색)

3. 보색컬러 – 결제창, 전송, 회원가입.

 

complementary color : 2개 서로를 돋보이게 하는 상반된 톤

analagous color : 서로를 돋보이게 하는 같은 톤

split complementary color : 3개의 상반된 톤

triadic color : 3개의 반전색

tetradic color : 4개의 반전색

monochromatic color : 비슷한 같은 톤

alternatives : 이 색 대체 가능한 색

 

 

황금비율

1. 가로 960px 황금비율

2. 타이틀은 18pt를 넘지 않는다.

3. 황금비율 1:1.618

 

가로 사이즈

pc 1920~1024

tablet 1023~768

mobile : 767~320

 

모바일 제작시 유의사항

모바일은 레티나 등으로 2배 사이즈로 만들어준다.

실제 보여지는 건 160px사이즈이나 320px로 만들어줘야 깨지지 않는다.

폰트 사이즈는 14px 이거나 그 이상으로 잘 보이도록_! 

작업할 때는 2배 사이즈인 28px를 기본 폰트로 한다.

 

버튼 사이즈는 작으면 누를 수 없기 때문에 18×18 사이즈로

아이폰 44X44 px
안드로이드 48X48 px
윈도우 34X34 px

 

용어

GNB

LNB

와이어프레임

as-is

to-be

 

 

반응형 웹의 완성도를 높여주는 유용한 사이트

http://iropke.com/blog/archives/3502

 

디자이너의 눈으로 본 반응형 웹

http://iropke.com/blog/archives/3428

 

반응형 웹사이트의 속도를 빠르게 하는 7가지 팁

http://cimple.postype.com/post/578/

 

2015년 주목해야 할 10가지 웹디자인 트렌드

http://uxd-trend.tistory.com/54

 

 

구축 예산에 따른 워드프레스 사이트 구축 방법

http://iropke.com/blog/archives/2811

 

 

디자인 포트폴리오 자료 모음집

http://dbfreebies.co/

 

원 페이지 웹디자인 템플릿 사이트

https://onepagelove.com

 

컬러매칭과 색상조합사이트

http://blog.naver.com/hjca1/220247743186

 

웹접근성 명도 4.5대1 확인하는 컬러대비 사이트

http://mae.dothome.co.kr/wordpress/archives/189

 

 

디자인소스 free

http://graphicdesignjunction.com

 

플랫 아이콘 free

http://www.designsrazzi.com/2015/free-flat-style-icons/

 

100+개 무료 로딩바(Loading Bar)/진행 바(Progress Bar) PSDs 파일

http://www.fbml.co.kr/2014/05/16/110-free-progress-loading-bar-psd-designs/

 

 

Leave a Reply

Your email address will not be published. Required fields are marked *