개발자 대 디자이너 경로 : 방법

디자이너가되기를 원하는 개발자 인 저는 웹 사이트, 모바일 앱 등을위한 최고 수준의 UI를 만드는 방법에 관심이 있습니다. 그러나 Photoshop이나 디자인과 관련된 것, HTML과 CSS에 대한 주요 기술에 대해서는 전혀 알지 못합니다. .

어디서부터 시작해야합니까? 아름다운 웹 사이트와 인터페이스를 만드는 방법을 배우려면 어떻게합니까?

디자이너가 된 전 개발자로서 제안 할 것이 몇 가지 있습니다. 우선 디자인 작업을 시작하십시오! 능력이 있다면, 이미 UI / UX 디자이너 인 멘토를 찾아 프로젝트에 참여하십시오. 나는 실제로 책을 읽는 것보다 몇 년 동안이 일을 해 온 사람들의 지식을 흡수하고 프로젝트를 수행함으로써 더 많은 것을 배웠습니다.

UI / UX / etc 등을 읽고 싶다면이 훌륭한 쓰레드를 살펴 보겠습니다. 꼭 읽어 봐야 할 사용자 인터페이스 북? 개인적으로 가장 좋아하는 사람은 Steve Krug의 "Do n't Make Me Think"라고 생각하지만 결국에는 자신이 가장 좋아하는 것을 찾을 수있을 것입니다.

마지막으로 Photoshop, Illustrator 등과 같은 도구와 관련하여 걱정하지 마십시오! 궁극적으로 가장 적합한 도구를 찾을 수 있습니다. 개인적으로 필자는 연필과 종이 모형으로 시작한 다음 프로젝트에 따라 Balsamiq 또는 Axure의 무언가로 이동 하거나 때로는 HTML 및 CSS로 이동합니다. 실제로 프로젝트의 크기, 범위 등에 따라 다릅니다. 가장 편합니다. 하루가 끝날 무렵 중요한 것은 디자인에 사용한 도구가 아니라 디자인에 대한 비전을 명확하게 전달하는 것입니다.

저는 오랫동안 디자인과 개발을 혼합 해 왔습니다. 그러나 초기에는 좋은 디자인을 만드는 것보다 편집 도구를 배우는 데 더 많은 시간을 보냈습니다. Photoshop, Illustrator, Fireworks 등을 사용하는 방법을 배우기위한 많은 자습서가 있습니다. 그러나 디자인 감각과 방향을 갖는 것이 좋습니다. 이것은 내가 여전히 더 좋아지고 싶은 것입니다.

내 영감 중 하나는 Robby Ingebretsen이라는 사람입니다. 개발과 디자인을 모두 잘 수행하기 때문입니다. 그의 웹 사이트는 nerdplusart.com에 있습니다.

내가 그에게서 살펴볼 몇 가지가 있습니다 ...

• 디자이너를위한 필독 책의 나의 (매우) 짧은 목록
• 개발자를위한 설계 기본 사항
• 디자인 문제를 공격하고 승리하는 방법 10 가지

그가 모든 프리젠 테이션에서 이야기 할 때 디자인에 영감을주는 것이 중요하다고 생각합니다. 최고의 디자이너조차도 단순히 얇은 공기 에서이 물건을 생각해내는 것이 아닙니다. 내 책갈피 중 하나는 주로 인쇄 작업에서 볼 수있는 "New Graphic Design"모음입니다 . 대부분은 타이포그래피 자체를 주요 그래픽 요소로 사용하여 매우 간단합니다. 이처럼 간단한 것만으로도 디자인을 구체화하는 데 도움이 될 수 있습니다.

Visual Studio를 배우는 것이 좋은 소프트웨어 개발자가 아닌 Photoshop을 배우는 것도 좋은 UI 디자이너가 될 수 없습니다.

공식적인 길을 가고 싶다면 미술 / 그래픽 디자인, 인적 요소, 심리학, 정보 아키텍쳐 / 도서관 과학 교육을 모두 볼 수 있습니다.

비공식적으로, 일하러 가십시오! ;) 배우는 가장 좋은 방법은 그냥하는 것입니다.

저는 정식으로 훈련 된 그래픽 디자이너로 업무에 소프트웨어 개발 기술을 습득했습니다. 나는 순수한 필요성에서 출발했다.

개인적으로, 최고의 UX 팀원은 두 기술이 혼합 된 팀원이라고 생각합니다. 그래서 당신이 올바른 길을 가고 있다고 생각합니다.

나는 Watrall & Siarto (O'Reilly 출판)의 "Head First Web Design" 책을 읽는 것으로 시작 합니다. 그것은 말도 안되고 소화하기 쉽고 디자이너가 고려해야 할 모든 것을 안내합니다. 심층적 인 연구는 아니지만 다음에 어떤 질문에 대답해야하는지 알 수 있습니다. 내비게이션, 구성, 레이아웃, 쓰기, 색상 및 접근성을 다루고 있습니다.

또한 Photoshop, Adobe Illustrator 등으로 뛰어 들기 전에 디자인을 와이어 프레임하여 디자인이 예쁘게 보이도록 추가 시간을 투자하기 전에 모든 것이 올바른 위치에 있는지 확인하십시오. 종이나 화이트 보드에 스케치하거나 도구를 사용할 수 있습니다. 이 단계에서 실제로 도움이되는 도구는 Balsamiq Mockups 입니다. 먼저 사이트 구성 및 레이아웃에 대해 생각할 수 있습니다.

실제로 UX Designer에서 UI Developer로 반대의 접근 방식을 취했지만 Design을 선택할 때 몇 가지 영역을 시작하는 것이 좋습니다.

나는 "나를 생각하지 마라!"라는 책을 보겠다 . Steve Krug 은 웹에서 디자인하기위한 디자인에 관한 훌륭한 책이라고 생각합니다.

SmashingMagazine.com 및 PSDTuts.com을 비롯한 수많은 웹 리소스가 있으며 이는 디자인 및 웹 기술 분야의 최신 기사를 제공합니다.

또한 UX 디자이너가되기 위해 특별히 노력하고 있다면 HCI 의 원칙을 이해하는 것을 살펴볼 것 입니다.

행운과 행복한 디자인!

웹 사이트, 모바일 앱 등을위한 최고의 UI를 만드는 방법을 배우고 싶습니다.

자, 그것은 광범위한 주제입니다. "아름다운", "최고의 노치", 전문적으로 보이는 웹 사이트를 만들고 싶기 때문에 사람들이 무엇을 "아름다운"것으로 인식하게 만드는지 알아야합니다.

아름다운 시각적 디자인의 열쇠 중 하나는 조화 입니다.

조화가 부족하면 디자인이 아마추어처럼 보입니다.

그리고 가장 좋은 점은 시각적 조화가 수학으로 귀결된다는 것입니다. 직감이 아닙니다.

다른 사람들이 지적했듯이 직접 웹 사이트를 디자인하는 것이 좋습니다. 준비된 프레임 워크를 사용하는 대신 배우는 디자인 원칙을 적용하십시오. 처음에는 어려울 수 있지만 더 나아질 수 있습니다.

웹 사이트 디자인에 조화를 포함시키는 방법

다음은 실제적인 예이며 지금 할 수있는 재미있는 작은 운동입니다.

개인적으로 선호하는 한 가지 방법은 모듈 식 스케일 을 사용 하여 웹 사이트 요소의 크기를 조화로운 비율로 조정하는 것입니다. 모듈 식 스케일 생성에 도움이되는 웹 사이트는 다음과 같습니다.

모듈 식 스케일을 사용하면 스케일에서 숫자를 선택하는 것만 큼 크기 결정을 쉽게 내릴 수 있다는 이점이 있습니다.

예를 들어, 시각적 계층 구조를 전달하기 위해 웹 사이트 제목의 크기를 조정하십시오.

선택한 19px 본문 글꼴 크기 (19px는 내가 사용한 글꼴과 가장 잘 어울리기 때문에 19px이지만이 단계를 건너 뛰고 기본 16px 크기로 갈 수 있음)와 1.412 (아니요) 이 비율을 선택한 이유를 자세히 설명해야합니다. 프로젝트에 비율이없는 것보다 비율이 더 좋습니다.) :

이를 살펴보면 H1을 2.815em으로, H2를 1.994em으로, H3을 1.412em으로 선택합니다. 본문 글꼴 크기보다 큰 처음 3 개 숫자 쉬워요? 본문은 1em입니다 (제 경우에는 19px). 그런 다음 1em에서 H4-H6의 크기를 조정하고 대비 (서체 무게 또는 스타일)를 사용하여 본문과 구별합니다.

따라서 지금 시도하십시오.

1. 자신 만의 모듈 식 스케일 생성
2. 일반 HTML 문서를 가져옵니다 (실제 컨텐츠, Lorem Ipsum은 사용하지 마십시오)
3. 스케일을 사용하여 제목의 크기를 조정하십시오.
4. 그런 다음 다른 크기 결정 (여백, 패딩 등)에 스케일을 사용해보십시오.

더 나은 디자인을 향한 작은 발걸음이지만 도움이되기를 바랍니다.

이 정보가 도움이 되었다면 HTML과 CSS를 아는 초보자 웹 디자이너를위한 7 가지 팁 목록을 읽어보십시오.

추신 : 당신은 정말로 읽을 거리가 많습니다.

다른 사람들이 말했듯이 다음을 읽으십시오.

• Alexander White의 그래픽 디자인 요소
• Robert Bringhurst의 인쇄 스타일의 요소
• Steve Krug의 저를 생각하지 마십시오

또한 블로그 및 커뮤니티와 같은 온라인 리소스의 목록은 다음과 같습니다. enboard.co/webdesign/