ALL MENU

닫기

좋은 이미지로 웹 사이트 디자인하는 법

dianedesign | 15-11-17 17:24

본문

좋은 이미지로 웹 사이트 디자인하는

 

멋있는 사진들을 전시할 수 있는 웹사이트를 디자인하는 것은

단지 CSS와 HTML로 만든 패키지에 모든 이미지를 갔다 붙이는 것만큼

간단하지 않습니다. 전체적으로 계획하고 그 이미지를 지원하도록 제작될 필요가 있습니다.

 

 

◆ 디자인과 많은 사진들을 웹 사이트에 적용하는 방법 10가지

 

1. 대형 이미지를 사용

​​​​​​​​3236817b1b0cc69ba54498eded21f6ef_1447748 

3236817b1b0cc69ba54498eded21f6ef_1447748 


​​​​이미지가 큰 경우 그래픽을 사용하여 시각적으로 근사한 효과를 나타냅니다.

대형 이미지가 웹 사이트의 방문자를 유인할 수 있는 극적이 영향을 미칠 수도 있습니다.

 

 

2. 여러 장의 사진을 슬라이더로

 

​​​​​​3236817b1b0cc69ba54498eded21f6ef_1447748
​​​​​​

3236817b1b0cc69ba54498eded21f6ef_1447748 

사용할 이미지가 많을 경우, 슬라이더는 좋은 옵션이 될 수 있습니다.

전체 화면 이미지에 고정되지 않도록 여러 크기를 수용할 수 있는 슬라이더는

가장 큰 이미지의 스틱, 각 이미지의 관련성 및 중복 또는 다른 이미지처럼 보이지 않는지

확인해야 합니다. 만약 계절에 사진 이미지를 교체하거나 새로운 제품의 이미지를

추가해서 시간에서 시간으로 이미지를 변경할 수 있습니다.

 

 

3. 콜라주와 그리드

 

​​​​​​​​3236817b1b0cc69ba54498eded21f6ef_1447748


3236817b1b0cc69ba54498eded21f6ef_1447748 

​​​​​​

사진의 아름다운 그룹화는 웹 사이트에서 여러 분위기를 연출할 수 있습니다.

하지만 디자인시 사진 선택, 자르기 및 그룹화에 주의해야 합니다.

스크롤 기능은 사진의 그룹을 통해 이동하는 사용자를 유지할 수 있는

아주 재미있는 방법이라고 할 수 있습니다.

 

화면의 사진 크기 - 콜라주 나 그리드를 만들 때 유의해야 할 몇 가지가 있습니다.

작은 크기로 볼 수 있는 이미지를 선택하며 일반적으로 간단한 프레임 및 조성물과

이미지를 포함합니다.

하지만 이 방법은 디테일 사진이나 많은 풍경이나

이미지에는 최적화되지 않는 이미지를 제공합니다.

 

 

4. 최소한의 미학을 사용

 

3236817b1b0cc69ba54498eded21f6ef_1447748
​​​​​​​​
3236817b1b0cc69ba54498eded21f6ef_1447748
​​​​​​​​

테마로 이미지 작업을 할 때 디자인과 테마의 공간을 유지해야 합니다.

사진에게 훨씬 많은 공간을 주고 간단한 버튼, 요소, 화면 색상을 작업합니다.

 

5. 너무 많은 효과는 No!

 

3236817b1b0cc69ba54498eded21f6ef_1447748
​​​​​​​​
3236817b1b0cc69ba54498eded21f6ef_1447748
​​​​​​

고해상도의 사진에 효과를 적용하려는 경우

간단한 보정이나 자동 로딩 이미지를 고려한다.

 

 

6. '사진' 테마 디자인

 

3236817b1b0cc69ba54498eded21f6ef_1447748
​​​​​​​​
3236817b1b0cc69ba54498eded21f6ef_1447748
​​​​​​

일부 이미지 사이트는 사진과 다른 디자인 기술을 과시할 수 있는 "테마"를 사용합니다.

인스타그램의 디자인 테마, 흑백 갤러리, 테두리나 테두리 색상, 오버레이 효과를

포함하며 사진 기반의 테마로 사이트를 만드는데 사용할 수 있는 많은 옵션이 있습니다.

 

 

7. 사이즈와 크기를 혼합

 

3236817b1b0cc69ba54498eded21f6ef_1447748
​​​​​​​​
3236817b1b0cc69ba54498eded21f6ef_1447748

​​​​​​

이미지는 서로 다른 모양 과 크기 및 방향으로 시각적 관심을 만듭니다.

뿐만 아니라 사진의 구도와 구성에 대해 생각하며 색상과 배경에 관한 차이도 생각해야 한다.

 

 

8. 전략적인 텍스트 배치

 

3236817b1b0cc69ba54498eded21f6ef_1447748
​​​​​​​​

3236817b1b0cc69ba54498eded21f6ef_1447748

텍스트 배치가 잘못되면 좋은 이미지로 만든 웹 사이트를 망칠 수 있습니다.

텍스트나 버튼, 다른 요소는 이미지의 주요 부분 위에 배치하지 않습니다.

 

 

9. 명암 만들기

 

3236817b1b0cc69ba54498eded21f6ef_1447748
​​​​​​​​

3236817b1b0cc69ba54498eded21f6ef_1447748

​​​​​​대비 디자인의 주요 원칙 중 하나로 이미지 위주의 웹 사이트 디자인에 대해 생각할 때

사진과 다른 텍스트와 배경을 만드는 겁니다.

 

검정, 흰색이나 그 사이의 배경이 이미지 웹 사이트에서 대표적인 작품이 될지. 아닐지

색상을 어떻게 대조하느냐에 따라 나뉩니다.

흰색 공간을 많이 사용하고 각 이미지는 주변의 사진에서 구별할 수 있을 정도로 상황과

대비를 해야 합니다.

 

 

10. 이미지 제작

 

3236817b1b0cc69ba54498eded21f6ef_1447748
​​​​​​​​​​​​​​​​
3236817b1b0cc69ba54498eded21f6ef_1447748 


​​​​​​사진 기반의 웹 사이트를 디자인할 때 가장 중요한 것은

사진에 집중하여 사진을 위해 디자인을 하는 것입니다.

첫 번째 이미지를 선택하고 콘텐츠를 지원하는 프레임 워크를 제작합니다.

 

 

결론

사진은 웹 사이트에서 가장 큰 비중을 차지합니다. 

이미지의 활용에 따라 웹 사이트의 퀄리티가 결정됩니다.

 

성공적인 비지니스를 위한 디자인과 마케팅 누구와 함께 가느냐에 달려 있습니다.