웹사이트 레이아웃 : 스타일리쉬하고 효율적으로 바꿀 수 있는 가이드라인 10가지 법칙

최근 1주일 유령 회사 다니다가 때려쳤다.
재택근무라는 메리트가 있었지만
신입인 내가 다니기에는
지금 내가 산으로 가는지 강으로 가는지 감이 안오고

대표가 내가 노는지 일하는지 모르니까 일을 겁나 시킴,,,,

일주일 자는 시간 4시간 빼고 (에디슨인줄)
20시간을 일했음. 월급 200^^^^

그래서 빨리 때려치고 다른 실존하는 회사로 가기로 했다.

 

<일주일 다니면서 느낀점>

1. 디자인은 창작이 아니다. 모방하자.
2. 난 아직 기초가 부족하다. 일 구해질 때까지 쉼없이 공부하자.
3. 긴장하지말자 신입은 원래 못하고 깨지면서 성장하는거다.

 

 

그래서 시작하는 디자인 기초 공부 Start!!

---

1. Avoid Clutter : 어수선함 피하기

avoid : 1. 방지하다 2. 피하다
clut·ter : 1. 채우다 2. 잡동사니; 어수선함

 

여백이 내 친구

---

2. Design Above The 'FOLD' : '폴드' 위의 디자인을 먼저하자

above : 1. (위치나 지위 면에서) …보다 위에 2. (수나이 등이) …보다 많은, …을 넘는 3. (위치가) 위에

“폴드”는 브라우저 아래의 경계 부분

---

3. Use Hick's Law : 힉 하이먼의 법칙 사용

힉 하이먼의 법칙이란 ?

결정을 내리는 데 걸리는 시간은 선택의 수와 복잡성에 따라 늘어난다.

선택의 수가 적으면 선택하는데 걸리는 시간도 짧다.

 

따라서 선택의 수를 최소화하자.

그리고 추천 옵션을 강조 표시하여

사용자의 부담을 덜어주자.

---

4. Encourage Scrolling, Not Clicking : 클릭이 아닌 스크롤링 장려

en·cour·age : 1. 격려하다 2. 권장하다 3. 부추기다

 

스크롤은 매끄럽게 웹 레이아웃을 이어준다.

 Crazy Egg의 연구에서 클릭에서 스크롤로 바꾸는 것으로

전환비율이 36% 증가했다고 밝혔다.

---

5. Keep Photos Authentic : 진짜같은 사진 사용하기

au·then·tic : 1. 진본인 2. 진짜인 3. 진짜와 꼭 같게 만든

인위적인 사진 ㄴㄴ

 진정성 있는 이미지로 친근감을 주자

---

6. Use Visual Cues : 시각적 단서 사용

cue : 1. 신호 2. 신호를 주다 3. 큐

직접적인 이미지 또는 그래픽을 사용하는 것은

방문객을 중요한 행동으로 이끌 수 있는 확실한 방법

---

7. Keep Type Legible : 스타일리쉬함보다 가독성있는 서체가 먼저

le·gible : 1. 읽을 수 있는 2. 또렷한

---

8. Color is Psychological : 색은 심리적인 것

psy·cho·logic·al : 1. 정신의 2. 심리학적인

 

컬러마다 주는 인상이 다름

---

9. Design For Mobile First : 모바일 페이지를 우선 설계하기

전 세계 모든 브라우징 세션의 절반 가량은 모바일 기기에서 이뤄진다.

일부 분야에서 모바일 사용자의 비율은 훨씬 더 높습니다.

---

10. Design For Everyone : 모두를 위한 디자인

 세계에서 적어도 22억 명이 시각 장애를 가지고 있거나 앞을 보지 못하는 사람이라고 밝혔다.

이는 전 세계 인구의 28.5%가 어떤 형태의 시각 장애를 가지고 있다는 것을 의미한다.

이들도 접근가능한

포괄적인 웹사이트를 디자인하자.

 

출처: https://www.shutterstock.com/ko/blog/how-to-design-a-website/

https://www.websiterating.com/website-builders/glossary/what-is-above-the-fold/