Gary Simon의 UI 디자인 기본 사항에 대한 무료 Scrimba 과정을 시작했다고 발표하게 되어 기쁩니다.
https://www.freecodecamp.org/news/learn-ui-design-fundamentals-with-this-free-one-hour-course/
Gary는 지난 20 년간 UI 디자이너이자 프런트 엔드 개발자였으며 인기 있는 YouTube 채널 인 DesignCourse를 운영하고 있습니다.
Gary는 단 1 시간 만에 모든 우수한 사용자 인터페이스의 가장 중요한 7 가지 빌딩 블록을 파악함으로써 UI 디자인 기술을 향상 시킵니다.
이 과정에는 강의와 대화식 코딩 과제가 혼합되어 있으므로 브라우저에서 실제로 UI를 빌드하게 됩니다.
따라서 등록하기 전에 HTML 및 CSS에 대한 기본 지식이 필요합니다.
그러나 방금 시작한 경우 걱정하지 마십시오. Scrimba의 HTML 및 CSS에 대한 훌륭한 충돌 과정이 있습니다.
이 과정의 초기 설정은 전제 조건이 없습니다! 이 과정은 Scrimba에 있으므로 과정이 진행됨에 따라 코드와 상호 작용할 수 있습니다.
강좌를 즉시 시작하려면 여기를 클릭하고 강좌 구성 방법을 자세히 보려면 계속 읽으십시오.
1 장 : 공백
첫 번째 레슨에서는 공백을 사용하는 방법을 배우게 됩니다.
공백은 UI 요소 사이의 빈 공간입니다.
Gary는 3 가지 CSS 속성, 패딩(padding), 여백(margin) 및 줄 높이(line-height)를 사용하여 텍스트 모양을 크게 향상 시키는 방법을 보여줍니다.
2 장 : 정렬
이 장에서 Gary는 정렬을 통해 최소한의 코드로 작업을 개선하는 방법을 보여줍니다. 정렬은 모든 요소가 다른 요소와 관련하여 올바르게 배치되도록 하는 프로세스입니다. 마진(margin), 변환(transform) 및 텍스트 정렬(text-align)이라는 세 가지 속성 만 사용합니다.
3 장 : 카드 챌린지
코스의 첫 번째 도전에 오신 것을 환영합니다. 이 문제와 다음 과제는 솔루션을 코딩하고 조금만 밀어 붙이도록 고안된 것으로 Gary가 나중에 비교할 수 있는 기회를 보여줍니다.
이 도전에서 그는 공백과 정렬을 개선하는 데 필요한 몇 가지 카드를 제공합니다.
완료되면 캐스트에 뛰어 들어가 게리가 해결책을 취하는 것을 보십시오.
제 4 장 : 대조
이 스크린 캐스트에서는 대비에 대해 배웁니다. 대비는 다른 것과 '놀랍게'다른 상태에 있는 것으로 정의됩니다. Gary는 '대비 가이드 라인'과 시각 장애가 있는 사용자가 디자인에 액세스 할 수 있도록 하는 방법을 다룹니다.
5장 크기(Scale)
이제 규모에 대해 이야기 할 때입니다. Gary는 다양한 요소의 스케일을 활용하여 디자인을 크게 향상 시킬 수 있음을 보여줍니다.
6 장 : 못생긴 UI 수정
잘하셨습니다. 과정의 두 번째 과제에 도전했습니다. 이 도전에서, 당신은 당신에게 더 추악한 디자인을 제공 할 것입니다.
지금까지 공백, 정렬, 대비 및 배율의 4 가지 설계 기본 사항을 배웠습니다.
이 네 가지 모두에 분명히 문제가 있습니다. 최선을 다해 해결하고 도전에 대한 그의 솔루션을 확인하십시오.
7 장 : 타이포그래피
타이포그래피에는 몇 가지 다른 고려 사항과 함께 다른 기본 사항에 대한 이해가 필요합니다. 이 캐스트에서 Gary는 글꼴, 크기, 간격 등을 효과적으로 선택하는 방법에 대한 조언을 제공 할 것입니다.
제 8 장 : 색깔
색상은 사용자 경험을 형성하는 최초의 UI 디자인 기본입니다! Gary는 대상 고객을 위해 색상을 선택할 때 고려해야 할 몇 가지 주요 고려 사항, 일반적인 일과 하지 말아야 할 일 및 색상 조합 기본 사항을 다룹니다.
제 9 장 : 색 도전
색상이 디자인의 중요한 측면이므로 색상 기술을 굳히기 위해 도전해야 합니다. 아래 디자인이 주어집니다.
의도적으로 그레이 스케일이므로 오른쪽 하단의 색상 만 사용하여 몇 가지 디자인을 만들 수 있습니다.
둘 이상의 옵션을 사용하여 가능한 옵션 및 조합을 실제로 탐색 할 수 있습니다. 몇 가지 옵션이 준비되면 Gary와 비슷한 디자인의 솔루션이 있는지 비교하십시오.
10 장 : 시각적 계층
시각적 계층은 사용자 인터페이스에서 요소의 중요성을 설정하는 방법입니다. 어떤 요소는 다른 요소보다 더 중요합니다.
이 장에서 Gary는 간단한 이메일 가입 양식을 사용하여 디자인의 주요 측면을 강조하고 시각적 계층 구조를 개선하여 상당히 단순한 디자인을 개선하는 방법을 보여줍니다.
11 장 : 시각적 계층 도전
이제 우리의 지식을 연습하고 적용합시다. 당신은 간단한 카드를 받게 될 것이며 그것이 가진 유일한 문제는 시각적 계층 구조가 모든 곳에 있다는 것입니다.
가능한 한 많이 개선하고 솔루션에 대한 Gary의 테이크를 확인하십시오.
12 장. 마지막 도전
디자인 챌린지 인 마지막 챕터 챌린지에 오신 것을 환영합니다. 시각적 계층, 공백, 색상 및 정렬 문제가 있는 이 레이아웃이 있습니다.
이 디자인을 최대한 향상 시키기 위해 이 4 가지를 해결해야 합니다.
완료되면 Gary가 솔루션을 취하는 것을 볼 수 있습니다.
마무리 생각
이 과정을 마치면 이 과정을 마친 것을 축하합니다! 대부분의 사람들은 과정을 마치지 않고 시작하기 때문에 자신을 자랑스럽게 생각할 수 있습니다. 이제 이러한 UI 디자인 기본 사항에 대한 기본 지식을 갖추었습니다.
디자인을 올바르게 하기 위해서는 모두 똑같이 중요합니다. 이러한 영역 중 하나에서 디자인이 부족한 경우 디자인의 품질에 문제가 있는 것을 쉽게 알 수 있습니다.
따라서 다음에 사용자 인터페이스를 구축해야 할 때 이러한 모든 기본 사항에 대해 생각하십시오.
등록된 댓글이 없습니다.
