좋은 결과를위한 간단한 웹 디자인 팁

웹 사이트를 디자인하는 방법은 무한합니다. 이를 염두에두고 그것을 엉망으로 만드는 무한한 방법도 있습니다. 두 번째 범주에 속하지 않는 두 가지 주요 방법이 있습니다. 디자인의 기본을 배우고 그에 따라 적용하는 것입니다. 또한 잘 작동하는 것과 그렇지 않은 것을 배울 수있는 충분한 경험이 있어야합니다.

모든 디자이너는 서로 다른 학습 경로를 사용하며 종종 여정의 여러 단계에 있습니다. 이 글을 읽고 있다면 작업을 더욱 개선하고 더 나은 디자인을 만들려고 노력하고있는 것입니다.

불행히도 필요한 모든 지식을 1500 단어에 맞추는 방법은 없습니다. 대신 UX / UI 요소에 접근 할 수있는 방법을 다시 생각할 수 있도록 몇 가지 팁을 대상으로합니다. 이상적으로는 이러한 사고 방식을 디자인 작업의 다른 영역에도 적용 할 수 있습니다.

제품 / 사이트에 대한 좋은 이해로 시작

콘텐츠 / 웹 사이트를 완전히 이해하지 못하면 디자인을하기가 매우 어렵습니다. 이제 의학 웹 사이트를 만들기 위해 의학을 공부할 필요가 없습니다. 그것이 목표가 아닙니다. 그러나 사용자가 필요로하는 정보에 액세스하는 방법을 알아야합니다.

음악 제작 앱을 디자인하고 싶다면 먼저 기존 앱 몇 개를 가져 와서 그 앱에 대한 느낌을 얻고 그 뒤에있는 이론과 특정 요소가 어떻게 작동하는지 읽어야합니다.

이상적으로는 프로젝트에 매우 참여하고 사용자를 위해 더 나은 UX를 구현하는 데 도움이되는 클라이언트와 함께 작업해야합니다.

그러나 사이트의 내용과 해결하는 문제에 대한 근본적인 이해가 부족한 경우 사용자 경험을 손상 시키거나 기존 솔루션을 따르고 스킨을 다시 입힐 수 있습니다 (때로는 작동 함).

웹 사이트의 경우 적절한 탐색 작업을 수행하고 특정 방문 페이지에 적합한 요소를 결정하기 위해 사이트 맵을 앞에 두어야합니다. "초콜릿 공장"디자인을하는 경우이를 만드는 과정을 시각적으로 보여 주거나 정보 덤프를 할 수 있습니다. 그것은 모두 사이트의 목표에 달려 있습니다.

이 모든 정보는 성공률을 높이기 위해 사전에 필요한 것입니다. 이것이 얼마나 복잡한 지 고려할 때 초보자 프리랜서 디자이너라면 일어날 수 있으므로 처음부터 많은 질문을하는 것이 가장 좋습니다. 팀에서 일하는 경우 콘텐츠, UX, 목적 등에 대해 팀원과상의하는 것을 잊지 마십시오.

디자인 관련 팁 및 요령 :

이제 다음 디자인에서 활용할 수있는 몇 가지 특정 UI / UX 팁을 살펴 보겠습니다.

1 – 대비!

사이트의 대비를 엉망으로 만드는 것은 매우 쉽습니다. 경험이 적은 디자이너를 찾는 빠른 방법은 전체적인 대비를 확인하는 것입니다. 이 예를 참조하십시오.

출처

텍스트가 어디에나 얼마나 밝은 지 보십니까? 흰색 텍스트가있는 녹색 버튼, 밝은 회색 텍스트?. 좀 더 대조적 인 UI와 비교해 보겠습니다.

출처

글꼴의 큰 부분은 검은 색 (또는 거의 검은 색)이며 덜 중요한 정보는 약간 회색입니다. 녹색이 더 어두워 져 이제 상단에 흰색 텍스트가 표시됩니다.

여기서 팁 은 텍스트 작업을 할 때 흰색 바탕에 검은 색 또는 검은 색 바탕에 흰색으로 시작한다는 것입니다. 더 많은 요소를 추가하고 시각적 계층 구조로 분리해야하므로 먼저 굵게 표시하거나 글꼴 크기를 변경하십시오. 그 후에 만 ​​작동하지 않는 경우 색상이 변경되지만 이상적으로는 차이가 30-40 %를 넘지 않습니다 (일반적으로 불투명도는 70 %로 설정 됨).

2 – 일관된 공백

또 다른 일반적인 실수는 요소 주변의 간격이 일치하지 않는 것입니다. 사실, 대부분의 디자이너가 수년간의 작업 후에도 계속해서이 문제를 해결하기 위해 고군분투하는 것은 매우 일반적이며 이해하기 쉽습니다. 마우스로 상자를 이동합니다. 조금 미끄러 져서 한두 픽셀 씩 옆으로 옮기는 것은 쉽습니다. 또는 그 차이를 직접 발견 할만큼 눈을 잘 훈련하지 않았을 수도 있습니다.

다음 예에서 서로 다른 구성 요소 주변에 서로 다른 공백이있는 방법을 살펴 봅니다. 일부는 서로 어수선하고 일부는 많은 간격을두고 있습니다. 시각적으로 매우 일관되지 않습니다.

대조적으로 다음은 구성 요소의 콘텐츠 / 유형이 다소 비슷하지만보다 일관된 모양을 가진 예입니다.

출처

이를 달성하는 방법에는 여러 가지가 있지만 대부분의 경우 측정만으로는 작동하지 않습니다. 당신이 그것을 볼 때 그것은 종종 "느낌"입니다. 균형 잡힌 것처럼 보입니까? 상자가있는 경우 항상 측면에서 30px, 제목 아래 30px, 자막 아래 15px 등을 측정 할 수 있습니다. 그리고 좋은 접근 방식입니다! 그러나 제목이나 이미지와 같은 더 큰 시각적 요소를 사용하면 더 무거운 요소를 보완하기 위해 약간 늘릴 수 있습니다.

3 – 색상

좋은 디자인의 또 다른 기본 요소입니다. 색상은 함께 잘 작동해야합니다. 웹 사이트에 접근하는 한 가지 쉬운 방법은 단일 기본 색상을 고수하고 나머지는 단색으로 유지하는 것입니다.

다음 예제는 지금까지 세 가지 제안을 모두 따릅니다. 대비, 균형 및 색상 사용 :

출처

색으로 시작하는 쉬운 방법 중 하나는 https://colorhunt.co/와 같은 사이트에서 잘 알려진 색 구성표를 따르거나 조합을 위해 Dribbble에서 영감을 얻는 것입니다. 색상환을 사용하면 조합을 파악하는 데 도움이되지만 최상의 조합을 결정하기 위해 디자이너로부터 약간의 추가 작업이 필요한 경우가 많습니다. 색상환은 종종 디자인에 적용 할 완벽한 색상을 생성하지 못합니다.

Adobe의 색상환의 예 :

출처

중간에 좋은 녹색이지만 왼쪽 / 오른쪽의 결과를 사용하기가 다소 어렵습니다.

4 – 사이트 전체에서 스타일 고수

웹 사이트의 느낌을 만드는 것은 디자이너의 주요 작업 중 하나입니다. "예쁘다"라는 개념은 정의하기가 매우 어렵지만 특히 사람들은 종종 좋은 것과 그렇지 않은 것에 대해 다른 견해를 가지고 있기 때문입니다. . 이에 대해 걱정하는 대신 일관성에 집중하고 스타일을 고수하십시오.

그게 무슨 뜻입니까? 자, 버튼을 디자인합시다. 글꼴 크기, 글꼴, 색상, 배경, 간격 등을 설정합니다. 그러면 다음과 같은 결과가 나타납니다.

이제 이미지와 제목을 추가하려면 다음과 같은 결과를 얻을 수 있습니다.

모서리를 참조하십시오. 모든 완벽한 90도 모서리, 반올림 없음. 이것은 우리의 디자인이 대부분 날카로운 모서리를 따라 간다는 것을 의미합니다. 그리고 이미지에 이러한 완벽한 모서리가 있으면 더 일관되게 보입니다. 입력을 추가하는 것처럼 모두 이러한 모서리가 더 뾰족합니다. 요소를 하나 더 추가해 보겠습니다.

오른쪽 상단과 왼쪽 하단 모서리에 상자 그리드를 추가했습니다. 이것들은 원일 수도 있지만, 선명한 모습을 유지하기 위해 사각형으로 설정했습니다. 전체 사이트에서 동일한 생각이 유지되어야합니다. 요소를 변경하기 시작하면 그 느낌을 잃기 시작하여 일관성없는 디자인으로 이어지고 브랜드가 약화 될 수 있습니다.

위와 동일한 디자인이지만 둥근 모양입니다.

똑같지 만 지금은 많이 달라요.

5 – 구성 요소를 사용한 디자인

구성 요소는 Figma 및 Adobe XD와 같은 모든 최신 디자인 도구에 있습니다. 개발자는 사이트를 가능한 한 많이 재사용 할 수있는 방식으로 구현합니다.

위와 같은 요소를 만들면 다른 페이지에 "복사-붙여 넣기"만하면 작동합니다. 약간의 차이를 제외하고 다시 코딩 할 필요가 없습니다. 디자이너로서 이상적으로는 유사한 방식으로 컴포넌트를 재사용하고 싶을 것입니다.

3 개의 게시물이 연속 된 홈페이지를 만들면 홈페이지에서 동일한 게시물을 재사용 할 수 있습니다. 이를 통해 시간을 절약하고 개발자 시간을 절약하며 사용자를 위해 일관된 디자인을 유지할 수 있습니다.

출처

섹션 제목을하고 있다고 상상해보십시오. 제목이있는 8 개의 섹션이 필요한 경우 매번 디자인 하시겠습니까, 아니면 이전 항목을 복사하여 붙여 넣으시겠습니까? 이상적으로는 재사용하고 싶습니다. 하지만 가운데 정렬에서 왼쪽 정렬로 변경해야한다면 어떨까요? 크기를 조금 변경하거나 색상을 변경 하시겠습니까? 이것의 팁은 그것을 시도하고하지 말라는 것입니다. 원본 그대로 유지하십시오. 정말 다른 뷰 (왼쪽 / 중앙 / 오른쪽 정렬 제외)가 필요한 경우 하나의 변형 만 만드십시오. 5 개나 10 개가 아닙니다.

DevriX의 예

요약하자면:

좋은 결과를 얻으려면 색상, 대비, 공백, 균형, 시각적 계층, 순서 등과 같은 디자인 기본 사항에 대한 강력한 이해가 필요합니다. 이를 염두에두고 디자인하고 사용성, 일관성 및 스타일에 집중할 때, "와우!"가 아니더라도 디자인, 그것은 모든면에서 견고하고 잘 기능 할 것이며, 이는 종종 장기적으로 브랜드에 더 나은 결과를 가져옵니다.