4 뛰어난 웹 디자인 원칙

로빈 윌리엄스 디자인 워크샵 확실히 내 좋아하는 디자인 중 하나입니다. 그것의 디자인 이론 더 실용적이 고 좋은 예를 보여 줍니다. http://www.aliyun.com/zixun/aggregation/9255.html의 가장 중요 한 "> 주요 탐색기의 디자인 컨셉 포함 4, 그들은: 대조, 반복, 정렬 및 분류. 이 문서는 이러한 4 뛰어난 웹 디자인 원칙을 설명 합니다. 당신의 마음에서 이러한 4 원리를 단단히 기억 더 단정 하 고 아름 다운 웹 페이지를 디자인 하 수 있을 것입니다.

1. 대조 효과

좋은 대비 효과 디자인 사용자 매우 좋은 첫 인상을 줄 수 있습니다. 사용자의 눈에 초점이 없는 경우 같은 크기 요소와 조판 인터페이스에서 어디에 나 관심을 손실 될 것입니다. 디자이너를 사용자의 경험을 안내 명백한 현저한 시각적 요소를 디자인 해야 합니다. 사진, 색상 및 글꼴을 선택 하 여 좋은 대조를 만들 수 있습니다.

그림의 대비

많은 작은 요소 뒤에 대형 그림을 표시 해야 할 때 유용 합니다. 예를 들면:

인보이스 기계

이 페이지는 사용자의 관심을 끌기 위해 큰 그림을 사용 합니다. 같은 시간에 웹의 자연 색상 블루 응용 프로그램을 더 나은 효과 페이지.

Instabox

눈에이 페이지를 볼 때 무슨 통보 합니까 먼저? 가장 가능성이 상자 위의 스타입니다. 인보이스 기계 처럼 그들은 큰 그림을 몇 가지 색상을 사용 하 여 시각적 초점을 만듭니다.

색상 대비

적당 한 양의 컬러를 사용 하 여 웹 페이지에 시각적 대조를 만드는 또 다른 효과적인 방법입니다. 웹 페이지의 머리와 텍스트 복사본에서 다른 색을 사용할 수 있습니다 하거나 사진이 나 그림의 색상에 적용할 수 있습니다.

Fatburgr

이 사이트는 모든 디자인 원리의 신청의 훌륭한 예입니다. 색상 대비에 대 한 그것의 큰 노란 머리와 작은 잿 빛 텍스트를 봐 보자. 정렬, 그림 대조, 반복과 분류의 원리는 모두 매우 철저 한.

내가 사랑 하는 활판 인쇄 술

만약 우리에 게 보여주려는 훌륭한 레이아웃 효과 페이지의 그것의 자신의 정상에, 그것은 사람들이 웹사이트의 레이아웃을 표시 하는 사이트 더 놀라움을 느낀다!

글꼴 대비

대비 효과 만들 수 글꼴을 사용 하려는 경우 2 매우 비슷한 글꼴 모양과 크기를 사용 하는 것이 좋습니다. 매우 비슷한 글꼴 혼란을 야기 하 고 디자인을 흐리게 수 있습니다. 그러나, 그것은 매우 매우 다른 글꼴 크기를 확인 하거나 글꼴의 최고의 고 두꺼운 버전을 함께 결합 하 여 효과적인 수 있습니다. 마찬가지로, 외관에 분명히 다른 두 개의 글꼴, 배치 하는 경우 당신은 놀랄 것입니다 그들은 시각적 효과에. 산 세리프 글꼴 필기 글꼴 함께 퍼 팅 예입니다.

Fixie 컨설팅

레이아웃 및이 사이트에 사용 되는 색상은 훌륭한, 특히 크기와 그들의 배너, 페이지에 뿌리 효과의 획과 파란색의 작은 금액의 사용.

2. 반복의 원리

반복적인 원칙 보다 웹 디자인, 책 디자인에 더 많은 공통점이 있습니다 하지만 그들은 동등 하 게 유효한. 반복적인 디자인 요소는 일관 된 표시와 브랜드를 향상 페이지를 만들 수 있습니다. 할 한 가지 방법은 웹 디자인에이 잘에서 머리와 발 웹 페이지의 요소를 반복 것입니다. 아래 예제를 보세요.

Ten24 미디어

Ten24 미디어 머리와 발에 창작 일러스트를 사용합니다.

고릴라 다

이 사이트는 절대적으로 굉 장입니다! "대조 원리" 섹션 앞 좋은 예로 볼 수 있습니다 하지만 그것은 또한 "반복 원리" 섹션에서 좋은 예는 인터페이스 스타일과 부분 브랜딩 명확 하 게이 원리에 적용 되기 때문에. 보세요 가까이 바나나에는 아이콘 목록 뿐만 아니라 머리와 피트의 숲 그림 앞으로.

3. 배열 원칙

귀하의 웹사이트의 디자인은 매우 아마추어 또는 매우 전문, 배열 원리는 그것에 매우 복잡 한 역할. 나는 최근 주 창 막대를 사용 하 여 웹 페이지를 디자인할 때. 이렇게 디자인 깨끗 하 고 좋은 디자인 프레임 워크를 제공 하 게 됩니다.

블랙 부동산 포도

이 사이트는 960 그리드 웹사이트에 표시 됩니다. 레이아웃은 일관 되 고 강력한. 난 있지만 일부 큰 클래스 머리 왼쪽된 사이드바에 규칙 쪽 나누기 그것 깔끔하게 왼쪽, 주요 콘텐츠를 다음과 아이디어를 주셔서 감사 합니다. 그것은 꽤 좋은 대비 크기 여백 및 글꼴을 많이 사용 하입니다.

떨어져 목록

목록 분리에에서 사용 되는 시각적 바는 매우 독특한. 내부 열은 잘 포함 된 내용을 모두 쉽게 읽을 수 있도록 설계 되었습니다. 연구는 너무 넓은 열 심각한 독서 어려움을 발생할 수 있습니다 보여줍니다. 넓은 열에 있는 텍스트에 따라 눈을 피곤 될 것입니다.

4. 분류 원칙

마지막 원리는 분류입니다. 이 원리는 관련 요소를 그룹화 하 고 외부 요소 구분 됩니다 경우에 사용 됩니다. 모든 텍스트의 같은 블록으로 분할 하는 경우 그것은 확실히 사용자 경험을 파괴할 것 이다. 그 이유는 그래서 머리 태그와 적절 한 패딩을 사용 하는 것이 중요 하다.

Envato

사이트는 멋지게으로 명확 하 고 정기적으로 정의 되는 세 가지 주요 범주로 깔끔하게에 콘텐츠를 구성 합니다.

환생 패러다임

사이트는 잘 구조화 됩니다. 머리는 단정 하 고 간단. 갭은 매우 좋은, 콘텐츠는 매우 논리적으로.

마지막 생각

당신의 마음에서 이러한 4 기본 원칙에 대해 생각 하면, 당신의 디자인 놀라운 개선 했다 찾을 수 있습니다. 물론, 많은 다른 것 들을 고려 하 고, 해야 하지만 대조, 반복, 정렬 및 디자인에 대 한 기준으로 분류 큰 진보 하 게 됩니다.

무단 전재가 문서의 소스를 표시 하시기 바랍니다: 4 우수한 웹사이트 디자인 원리

원래 영어의 소스