🔖 UXUI 해외 주간 아티클 TOP3

🔖 2023년 6월 5주 TOP3

1️⃣ 웹사이트 헤더의 주요 요소

2️⃣ 깔끔한 UI 가이드: 9가지 대비 팁 및 예시

3️⃣ Midjourney를 사용하여 브랜드 아이덴티티를 디자인한 방법

1️⃣ 웹사이트 헤더의 주요 요소

웹사이트 헤더 디자인 세부 사항으로 드릴다운하기 전에 친숙해야 하는 주요 용어를 정의해 보겠습니다.

헤더는 웹사이트에서 가장 영향력 있는 영역 중 하나입니다.

그것의 핵심 기능은 웹사이트를 통해 방문자를 안내하는 정보 표시가 수행하는 기능과 유사합니다. 내비게이션의 주요 수단으로 사용되어야 합니다.

다음은 헤더로 구성될 수 있는 가장 일반적인 요소입니다.

일부 헤더에는 장바구니, 소셜 미디어 링크, 언어 옵션 등이 포함될 수도 있습니다. 이는 웹사이트의 특성과 방문자가 액세스해야 하는 필수 항목에 따라 다릅니다.

효과적인 웹사이트 헤더 디자인을 위한 5가지 팁

헤더는 웹사이트의 기본 탐색 도구입니다. 따라서 명확하고 직관적이어야 합니다.

웹 사이트 방문자는 필요한 모든 정보에 쉽게 액세스하고, 원하는 페이지로 빠르게 이동하고, 원하는 정보를 즉시 찾기를 원합니다.

따라서 헤더는 사용자를 지연시키고 시간을 낭비해서는 안 됩니다. 그렇지 않으면 단순히 많은 잠재 고객을 잃을 수 있습니다. 실제로 웹사이트 방문자의 55%는 페이지에서 15초 미만을 머문 후 떠납니다. 이에 대한 주요 이유 중 일부는 웹 사이트의 복잡성과 사용성 저하입니다.

이 문제를 해결하고 더 많은 고객을 유지하려면 기본부터 시작하여 웹사이트 헤더 디자인이 방문자를 밀어내지 않도록 하는 것이 좋습니다. 그래서 사용자 입장에서 논리적으로 공간을 구성하는 것이 좋습니다.

다음은 머리글과 히어로 디자인을 일관되고 인지하기 쉬우며 동시에 독특하게 만드는 몇 가지 팁입니다.

..

👇 더 자세한 내용은 아래 원문에서 확인해주세요.

2️⃣ 깔끔한 UI 가이드: 9가지 대비 팁 및 예시

차이점은 사용자의 관심을 끌고 기억하는 가장 효과적인 방법입니다. 대조를 통해 디자이너는 필수 요소와 정보를 강조하고 스타일리시한 레이아웃을 만들고 특이한 세부 사항으로 사용자를 참여시킬 수 있습니다.

모든 프로젝트의 디자인 레이아웃은 인터페이스를 구성하는 특정 요소 집합이 있다고 가정합니다. 인터페이스의 작업과 사용자의 요구에 따라 이러한 모든 요소는 중요도가 더 높거나 낮은 레이아웃에 배치되어야 합니다. 그리고 사용자 주의를 올바르게 관리하기 위해서는 대비의 기본 원칙과 규칙을 알고 적용할 수 있어야 합니다. 대비 팁에 대해 이야기해 봅시다.

대비를 사용하기 위한 중요한 원칙

프로젝트 설계 레이아웃을 만들 때 세 가지 주요 원칙을 준수해야 합니다.

UI 디자인의 대비 유형

일반적으로 디자인의 대비는 다음과 같은 레이아웃 요소의 다양한 기능을 기반으로 합니다.

9 대비 팁 및 예

UI 디자인에서 대비를 사용하여 사용자의 관심을 끄는 방법에 대한 팁을 알아보겠습니다.

컴포지션의 크기 및 포인트

레이아웃의 더 큰 개체는 사용자가 더 잘 인식합니다. 그들은 작은 것보다 대조되고 더 많은 관심을 끌고 있습니다. 크기 대비를 사용하는 예는 다른 글꼴입니다. 더 중요한 정보는 더 큰 글꼴로 강조 표시됩니다.

예를 들어 — 제목은 더 큰 글꼴이어야 합니다. 텍스트의 나머지 부분보다 더 잘 보이고 읽을 수 있습니다. 여기에서 크기 대비의 또 다른 예를 볼 수 있습니다. 대상 작업은 더 눈에 띄는 "예" 버튼으로 구현됩니다. 이것은 그것을 클릭하려는 욕구를 증가시킵니다. 더 작은 크기를 포함하여 실패 옵션을 덜 대조적으로 만드는 것이 더 정확합니다.

색상 및 배경 대비

색상 대비는 색상의 밝기 차이입니다. 눈에 띄는 대비는 색상이 얼마나 밝거나 어두운지를 보여줍니다. 디자인의 대비되는 색상은 구성의 주요 작업을 강조하는 데 사용됩니다.

크리에이티브 요소

또 다른 특이한 대조는 창의적이고 흥미로운 UI 요소와 친숙한 레이아웃 세부 사항의 차이입니다. 특이한 일러스트레이션, 흥미로운 모양, 팝업, 애니메이션 등이 될 수 있습니다.

이러한 요소는 버튼, 웹 양식 및 사이트에 공통된 기타 블록과 같이 사용자에게 친숙한 세부 정보 중에서 두드러집니다. 따라서 디자이너는 필요한 정보, 프로모션이 포함된 배너, 행동 촉구에 주의를 기울이고 사이트 방문자가 목표 행동을 취하도록 독려할 수 있습니다.

.. 👇 더 자세한 내용은 아래 원문에서 확인해주세요.

3️⃣ Midjourney를 사용하여 브랜드 아이덴티티를 디자인한 방법

AI가 내 디자인 작업을 향상시킨 방법 중 하나를 알아보세요.

지금쯤이면 AI가 브랜딩과 디자인의 미래에 상당한 영향을 미칠 것이라는 사실은 비밀이 아닙니다. 우리는 디자이너로서 대체할 수 없는 가치를 계속 제공할 수 있는 방법에 대해 의문을 갖게 됩니다.

It's Nice That의 Alif Ibrahim과 같은 일부 크리에이티브는 크기 조정, 내보내기 또는 생각 없는 픽셀 푸시와 같은 평범하고 반복적인 작업을 자동화하는 데 사용할 것을 제안했습니다.

IDP 다이렉트의 크리에이티브 디렉터인 Evelio와 같은 다른 사람들은 이를 보다 엄선된 무드 보드를 구축하고 브랜드 아이디어를 고객에게 신속하게 전달하는 방법으로 보고 있습니다.

브랜딩 에이전시의 창립자로서 저는 AI가 우리가 만드는 것과 만드는 방법을 개선할 수 있는 방법을 발견하기 위한 여정을 시작했습니다.

내가 한 일

Midjourney에 익숙하지 않다면 현재까지 AI 이미지 생성에서 가장 눈에 띄는 모델 중 하나입니다.

새로운 브랜드 아이덴티티를 위한 고유한 일련의 그래픽을 얼마나 잘 생성할 수 있는지 확인하기 위해 모델을 실험했습니다.

결과는 다음과 같습니다.

내가 한 방법

연습은 시험에 가까웠지만 그 과정에서 몇 가지 귀중한 통찰력을 배웠습니다. 그 과정을 함께 살펴보겠습니다.

1. 그래픽 기준 정의

스타일을 정의할 때 먼저 그래픽이 구현해야 하는 고유한 시각적 특성 또는 테마를 식별하고 구축합니다.

이 브랜드의 경우 3D 모멘텀과 빛나는 색상 혼합의 아이디어를 캡처하는 스타일을 살펴보겠습니다.

온라인에서 찾거나 개인적으로 캡처한 기존 영감을 참조하는 것이 도움이 됩니다. 영감을 버킷으로 수집하면 더 명확한 참조 프레임이 형성되고 나중에 Midjourney 입력으로 유용하게 됩니다.

우리의 경우 이미 로고와 색상 팔레트를 디자인했습니다. 새 그래픽이 밀접하게 정렬되어 통합 시스템으로 함께 작동하는 것이 중요합니다.

로고 및 색상 팔레트(위 참조)의 특성을 추상화하여 Midjourney에서 보다 브랜드에 맞는 이미지 결과를 안내할 수 있습니다.

그래픽 영감과 브랜드 자산 이미지를 모두 확인했으므로 이제 두 가지를 Midjourney로 가져갈 시간입니다.

2. 중간 여정에서의 혼합

우리 대부분은 /imagine 명령에 익숙하지만 개인적으로 매우 특정한 시각적 결과를 위해 작업할 때 이 명령이 강력하지 않다고 생각합니다.

이 경우에는 /blend 명령을 사용합니다. 이 명령은 여러 이미지를 함께 "혼합"하고 중간에 이미지를 생성합니다.

Discord 메시지 상자에 /blend + (Return)을 입력하면 위의 끌어서 놓기 모듈이 나타납니다.

Midjourney를 사용하면 한 번에 최대 5개의 이미지를 혼합할 수 있지만 더 나은 디자인 제어가 가능하므로 2~3개의 이미지를 사용하는 것이 좋습니다.

이제 노는 시간입니다. 끌어서 놓기 모듈에 이미지 입력을 업로드해 보겠습니다. 내가 탐구한 몇 가지 다양한 조합은 다음과 같습니다.

위의 결과 중 하나가 추가 정제가 필요한 것으로 보입니다. 예를 들어 이 이미지 결과를 다시 혼합하도록 선택합니다.

우리는 이 이미지를 다른 이미지와 다시 혼합하여 원하는 결과에 더 가까워지도록 할 것입니다.

이 과정을 반복하면 하나의 응집력 있는 스타일로 이미지 라이브러리를 확장하는 데 도움이 됩니다. 결국 내가 도착한 곳은 다음과 같습니다.

.. 👇 더 자세한 내용은 아래 원문에서 확인해주세요.

🎄from.designer 

🗓️ 행사 일정 & UXUI 자료 

디자이너 공유, UXUI 스터디 참관, UX 발표자료 공유등 다양한 정보를 노션에서 확인하세요.

💭 단톡방 가입문의  (2,070명)

🎥 유튜브 UXUI 자료 영상  

🔖 이메일 

📍 SNS   @from.designer 페이스북 , 인스타그램