인터넷 덕분에 그래픽 디자인과 프로그래밍이 점점 겹치는 분야가되었습니다.

프로그래머로서 나는 끊임없이 그래픽 디자인에 대한 기본 지식이 필요하지만 그래픽 디자인 학습 리소스를 찾는 데 어려움을 겪고 있으며, 대신 과제에 적용 할 수있는 약간의 지식과 지식을 찾습니다.

경험이 풍부하고 효과적인 학습 자료 인 웹 디자인에 대한 초보자 수준의 개요를 제공하는 몇 가지 팁을 제공하거나 좋은 책, 자습서, 블로그 및 웹 사이트를 추천 할 수 있습니까? 이미지 편집 도구를 사용하는 방법에 대한 팁을 찾고 있지는 않지만 기본 편집 도구를 사용한다고 가정하면 새로운 디자이너가 전문적인 디자인을 만드는 데 가장 도움이되는 리소스와 조언은 무엇입니까?

• 단순하게 유지 -처음에는 너무 화려하거나 모험적인 것을 시도하지 마십시오. 기본 사항을 먼저 알아 본 다음 실험을 시작할 수 있습니다. Star Trek 컴퓨터 인터페이스를 에뮬레이션하려고하지 마십시오.
• 일관성 유지 -일관된 디자인은 좋은 디자인의 기초의 일부입니다. 여백, 크기 및 배치를 추적하고 디자인 전체에 걸쳐 유지하십시오.
• 클러 터 제거 -디자인에 필요한 요소 만 포함하십시오. 다른 모든 것을 제거하십시오.
• 우선 순위 지정 -디자인의 기본 목적은 무엇입니까? 그 목적을 강조하십시오. 그것을 분명히하십시오.
• 공백 사용 -적절한 여백을 허용 하십시오 . 여백이 적거나없는 큰 텍스트 블록은 읽기가 쉽지 않습니다. 다른 디자인 요소에 적합합니다.
• 컬러 팔레트 사용 -총 4-5 가지 이상의 컬러를 사용해서는 안됩니다.
• 일관된 글꼴 -하나 또는 두 개의 글꼴을 고수하십시오. 그것들을 일관되게 사용하십시오, 보통 하나는 표제, 하나는 단락 텍스트. 일관된 글꼴 크기, 줄 높이 및 줄 간격을 계산하고 유지합니다. 맹렬한 벨로시 랩터 좀비를 막을 수 없다면 Comic Sans를 사용하지 마십시오.
• 디자인 우선 -디자인은 나중에 생각해서는 안됩니다. 기획 단계의 일류 회원이어야합니다. 디자인은 사용자가 프로그래밍과 상호 작용하는 방식이되며 디자인을 기반으로 먼저 의견을 구성합니다. 디자인에 적절한 중요성을 부여하십시오.

리소스에 대해서는 다음 웹 사이트를 확인하십시오.

• 스매싱 매거진
• PSD Tuts
• 아부지도
• UX 부스
• 나는 타이포그래피를 좋아한다
• 제이슨 산타 마리아

Jim Krause의 디자인 기본 색인 은 구성, 색상 및 유형의 기본을 매우 잘 요약했습니다. 나는 그의 대부분의 예에 대한 열렬한 팬이 아니었지만, 그의 요점을 잘 설명하고 다른 곳에서는 언급하지 않은 몇 가지 귀중한 것들을 만집니다. 그리고 아마도 가장 중요한 것은 그 책을 읽고 그가 소개 한 아이디어를 실험하고 실험하게되어 정말 기뻤습니다.

때로는 웹 개발과 웹 디자인간에 약간의 겹침이 있지만 웹 개발자가 프로그래밍을 배우는 것처럼 많은 노력을 기울이지 않는다면 풀 타임 디자이너가 되려고 노력하지는 않습니다. 주말에 손을 대고 잘 할 수있는 것이 아닙니다.

이것이 당신이 당신의 자신의 웹 디자이너가되는 법을 배울 수 있다면 (즉, 당신이 작업하는 모든 사이트를위한 당신의 자신의 웹 디자인을하는 것), 나는 당신이 공식적인 훈련을받는 것을 추천합니다. 시각 디자인과 구성의 기초를 배우기 위해. 데이먼이 게시 한 것과 같은 교과서 스타일의 디자인 책이 도움이 될 수 있지만 실제로는 책의 모든 연습을 수행하고 자료를 이해해야합니다. 그러나 가장 중요한 것은 온라인 디자인 갤러리 탐색, 잡지 및 잡지 광고 등을보고 디자인 작성 (일부 연습용 디자인 브리프를 온라인으로 다운로드하거나 온라인 디자인 콘테스트 참가)에 많은 시간을 소비해야한다는 것입니다.

작업하는 웹 / 그래픽 디자이너와 의사 소통하는 데 도움이된다면, 단어 (예 : 타이포그래피 개념)를 가르치고 유용성 , 접근성 및 UX 디자인 에 중점을 둔 책을 얻는 것이 아마도 시간을 가장 잘 활용할 것입니다. 이러한 방식으로 프로젝트의 창의적인 방향에 참여하고 인터페이스를 디자인 할 수 있지만 디자이너는 사이트의 "모양"또는 미학을 창조하는 사람입니다.

Virtuosi Media는 많은 훌륭한 리소스를 제공합니다 (Tutsplus 네트워크는 일반적으로 훌륭하며 Smashing Magazine은 모든 웹 개발자 / 디자이너에게 반드시 읽어야합니다).

• http://www.alistapart.com/
• http://webdesignledger.com
• http : //behance.net- 많은 세계적 디자이너의 포트폴리오를 호스팅하여 영감을 얻습니다.

저는 프로그래머이며 저에게 매우 도움이되는 다음과 같은 책입니다.

• Robin Williams의 비 디자이너의 디자인 북 :이 책은 그래픽 디자인의 기본 사항을 다룹니다.
• 베티 에드워즈 (Betty Edwards)의 뇌 오른쪽에 그리기 : 그리기 기술 개발을위한 책.
• Jef Raskin의 휴먼 인터페이스 :이 책은 사용자 인터페이스 디자인에 대한 몇 가지 생각을 불러 일으 킵니다.

아마도 모든 경우와 관련이 없지만 웹 Prgrammer의 경우 나에게 눈에 띄는 가장 큰 것 중 하나는 아마도 격차를 조금 메우는 것은 CSS를 안팎으로 배우는 것입니다. 작성중인 프로젝트에 통합 할 수없는 경우

2004 년에 나는 대부분의 삶을 살아 왔던 것처럼 두 세계 사이의 절반을 발견했다. 나는 닷컴 시대에 HTML 3.2부터 웹을하고 있었다. 부모님 (안무가이자 교육자)이 // e로 많은 시간을 예술과 함께 보내도록 허락하고 격려해 준 Apple과 함께 자랐습니다. 디자인은 예술이 아니며, 실제로 웹을하든 그렇지 않든 더 알고리즘적인 패턴 중 일부는 프로그래밍과 잘 어울립니다.

• Bookshelf Histogram (책장 히스토그램) – 대학원에서 디자인 및 개발 된 인쇄물.

하지만 2004 년 : 저는 대학원에 갈 때 차이를 쪼개 었습니다. 처음에는 일류 인쇄술 교육을받은 다음 탐구해야 할 위도가있었습니다.

따라서 아마도 고등 교육, 또는 당신을 위해 모든 것을 소비하는 방식으로 참여하는 것을 고려하십시오. 어느 쪽이든 행운을 빕니다.

타이포그래피에 대해 많은 것을 배우십시오.

에서 고전 ...

^{얀 티시 홀드}

광대가 아니라 …

^{데이비드 카슨}

전략적이고 효과적인 타이포그래피는이 분야에서 가장 일반적으로없는 특성 중 하나입니다.

나는 일반적으로 형식 처리에 전적으로 기반을 둔 디자이너를 모집 할 수 있습니다. 이야기의 약 80 %가 이력서 설정에 맞습니다.

좋은 (무료) 시작은 이 세부적인 적응 의 필수 자원을 웹에 적용하기 로버트 브링 허스트에서.

^{인쇄 스타일의 요소, Bringhurst}

이것은 유형과 레이아웃의 상호 작용을 다루는 더 넓은 고려 사항 입니다.

^{그래픽 디자인의 그리드 시스템, Brockmann}

1. 주위에 디자인 된 물체에 대해 비판적으로 생각하십시오

   인공 환경의 거의 모든 것이 그래픽, 웹 사이트 또는 패션 액세서리 등 어떤 종류의 디자인을 가지고 있습니다.

   의도 한 목적과 디자인의 모양에 따라 디자인 기능이 얼마나 잘 작동하는지 확인하십시오.

2. 디자인을 필요를 채우거나 문제를 해결하는 방법으로 생각하십시오.

   디자인을보기 좋게 만들려고 노력하지만 디자인은 실제 적용이 가능하다는 점에서 다른 유형의 예술과 다릅니다.

   예를 들어 로고는 브랜드 나 회사를 빠르게 인식 할 수 있도록 도와주는 그래픽 디자인 유형입니다.

   의복은 몸을 가리는 목적뿐만 아니라 착용자를 더욱 매력적으로 보이게하는 목적으로 사용됩니다.

3. 시각적 의사 소통을 연습하십시오.

   설계자는 설계를 구체화하고 설계 동료 및 제조업체와 같은 다른 사람들에게 설명하기 위해 설계 또는 도면을 표현할 수 있어야합니다.

   드로잉은 디자이너에게는 강력한 도구이지만 사실적으로 그릴 수없는 경우 걱정할 필요가 없습니다. 디자이너의 그림은 걸작 일 필요는 없으며 완성 된 제품으로 이어질 아이디어를 신속하게 포착 할 수있는 방법 일뿐입니다. 추적도 가능합니다.

   설계자는 도면 외에도 모형, 프로토 타입 및 컴퓨터 이미징과 같은 것을 사용하여 설계를 시각화합니다.

4. 물건이 어떻게 만들어 지는지 탐구

   디자이너로 일할 때 눈에 좋은 것을 고려해야 할뿐만 아니라 항상 디자인 구현 방법을 고려해야합니다.

   휴대폰 케이스와 같은 물체의 경우, 산업 설계자들은 어떤 종류의 플라스틱 및 성형 공정이 사용될 것인지, 그리고 각 부품이 어떻게 부착 될 것인지를 고려해야합니다.

5. 좋은 정보원 찾기

   디자인 잡지 외에 디자인 프로세스, 원칙 및 방법에 관한 책을 찾아보십시오.

   의류 제작, 제조 방법 및 다양한 공예 기술에 대한 교과서 및 기술 비디오를 살펴보십시오.

   디자인에 대한 학습은 패션을 읽고 잡지를 꾸미는 것보다 더 깊지 만 현재 트렌드를위한 좋은 자료입니다.

6. 디자인 기술 개발

   공부하고 연습하는 것이 좋지만 실제로 디자인을 한 단계 끌어 올리는 것은 실제 경험입니다.

7. 신속하게 실수

   많은 실수를하게되며, 더 빨리 통과할수록 좋습니다.

8. 항상 아이디어를 잡을 준비를하십시오.

   어디에서나 영감을 찾으십시오. 영감은 다른 디자인이나 디자인 트렌드에서 나올 필요가 없습니다. 종종 자연이나 사고로 인해 발생할 수 있습니다.

도서 및 자료

http://www.alistapart.com

http://webdesignledger.com

스매싱 매거진

PSD Tuts

아부지도

UX 부스

명심해야 할 몇 가지 사항 :

1. 모든 디자인은 문제를 해결

"어떻게하면 좋을까?"라는 관점에서 디자인에 대해 생각하지 마십시오. "인간적으로 가능한 쉽게 사용하려면 어떻게해야합니까?"라는 용어로 생각해보십시오.

웹 사이트를 만들 때 가장 넓은 의미에서 비즈니스 문제를 해결하고 있음을 의미합니다 .

사업 목표를 달성하기 위해 웹 사이트가 존재합니다 .

웹 사이트 사용자는 또한 자신의 목표를 염두에두고 있습니다. 즉, 물건을 사고, 제품을 비교하고, 주제를 읽거나 할 수 있습니다.

가능한 많은 사용자가 비즈니스 목표를 달성하고 사용자 가 자신의 목표를 달성 할 수 있도록 웹 사이트를 탐색 하도록함으로써 비즈니스 를 돕는 것은 디자이너의 일 입니다.

예를 들어 전자 상거래 상점을 설계하는 경우 비즈니스 목표는 제품을 판매하는 것입니다. 그리고 사용자의 목표는 구매하고자하는 제품을 가능한 한 빨리 찾고 확인하는 것입니다.

디자인 프로세스의 많은 부분이 문제를 파악하고, 사용자의 프로필을 작성하고, 비즈니스 목표를 실현하는 방법을 생각하는 등의 과정으로 진행됩니다.

색상, 글꼴, 레이아웃, 모든 디자인 결정 은 웹 사이트의 목표에 따라 결정되어야 합니다 .

2. 일이 예쁘게 보이도록 반복합니다 .

그것이 일관성에 관한 것입니다.

예를 들어, 글꼴 쌍입니다. 글꼴은 세부 사항의 반복에 따라 유사한 특성에 따라 쌍을 이룹니다.

Farnham과 Benton Sans가 일치합니다.

여기이 게시물에 따르면 이 개 두 글꼴은 때문에 일치 :

[...] 얼굴은 소문자의 웅크림이 비슷합니다. [...] 모두 소문자가 넓습니다.

특정 특성의 반복으로 인해이 두 글꼴이 함께 작동합니다. 웹 페이지에서 볼 수 있습니다 . 3 .

반복은 디자인에 조화를 가져옵니다. 조화가 디자인을 아름답게 보이게합니다.

그러나 보시다시피 Farnham과 Benton Sans도 대조합니다. –Farnham은 serif 글꼴이고 Benton은 sans serif입니다.

대비가 필요한 이유는 무엇입니까? 우리는 디자인에 유사점을 도입하려고합니다.

글쎄, 그러나 반복이 너무 많으면 디자인이 둔 해지고 사용하기가 어려워진다 .

치료법은 대조적입니다.

3. 대비는 사용자가 길을 찾도록 도와줍니다.

서로 다른 요소를 구별하는 데 도움이됩니다. 제목, 탐색, 버튼과 같은 주요 요소를 찾는 데 도움이됩니다.

요소가 중요할수록 주변 환경과 대조되어야합니다.

반복을 사용하여 디자인의 일관성을 유지하십시오. 다른 사람들이 말했듯이 2 글꼴에는 제한된 색상 표 등이 있습니다.

요소를 나머지 요소와 구분해야 할 경우 대비를 사용하십시오.

알아두면 좋겠지 만 다음 웹 사이트를 디자인하는 데 여전히 도움이되지 않습니까?

글쎄, 나는 그것에 대한 해결책도 가지고 있다.

웹 디자인을 향상시키는 1 단계는 다른 사람의 작업 을 관찰하고 흡수하는 것입니다. 그것의 많은. 그곳에서 "영감"이 시작됩니다.

좋아하는 백 가지 디자인을보고 분석하면 패턴을 발견 할 수 있습니다. 당신의 두뇌는 이러한 패턴을 자신의 디자인으로 결합하여 본 것과 비슷한 모든 디자인의 변형이 될 것입니다. "고유 한"것을 만들 필요는 없습니다.

요약 : 다음에 사이드 프로젝트 디자인을 시작할 때

비슷한 웹 사이트 / 웹 앱 12 개를 살펴보고 디자인을 빠르게 스케치하십시오. 그들이 사용한 워크 플로우에 주목하십시오. 그들은 왜 그것을 사용 했습니까? 어떤 모양, 색상 및 글꼴을 사용했는지 확인하십시오.

그런 다음이 프로세스를 통해 고유 한 디자인을 만드십시오.

1. 프로젝트를 정의하십시오. 자신을 프로젝트에 몰입시키고 더 많은 정보를 얻으십시오 :

   1. 목적, 의도 된 결과

   2. 그것의 (미래) 사용자
   3. 사용자 / 방문자를위한 의도 된 경험
   4. 프로젝트 뒤의 브랜딩
2. 필요한 자원을 확보하십시오. 콘텐츠를 직접 체험 해보십시오 (유사한 사이트에서 대여)

3. 내용을 구체화하십시오

   1. 콘텐츠를 조판 할 서체를 선택하십시오 (사이트의 분위기와 메시지에 맞는 서체 선택).
   2. 본문 사본의 글꼴 크기를 선택하십시오.
   3. 본문 사본의 글꼴 크기 (모듈 형 스케일-시각적 계산기 사용)에서 모듈 형 스케일 (비례 고조파 치수 표) 생성
   4. 프로젝트 요구 사항에 따라 다른 레이아웃을 스케치
   5. 모듈 식 스케일 (열 너비, 줄 높이, 제목 크기, 아래쪽 여백, 열 (필요한 경우))을 사용하여 HTML 및 CSS로 레이아웃을 작성하십시오.
   6. 브랜드 가이드 라인에 따라 색상 적용

당신은 할 수 있습니다 여기이 과정에서 각 단계에 대한 자세한 내용 .

몇 가지 더 :

1. 아이디어를위한 영감을주는 웹 사이트 모음을 살펴보십시오. 영감을주는 웹 사이트 컬렉션의 컬렉션 마더로드 에는 몇 가지 컬렉션이 나열되어 있습니다. 또 다른 좋은 두 사이트는 siiimple.com 과 minimalsites.com 입니다.

2. Virtuosi Media의 '클러 터 제거'제안은 확실한 이상적인 방법이지만 초보자가 수행 한 클러 터가있는 사이트는 초보자가 수행 한 미니멀리스트 사이트보다 낫습니다. 클러 터는 다른 열악한 디자인 요소를 다소 위장하여 내용에주의를 산만하게합니다. 일반적인 비즈니스 사이트는 거의 모든 템플릿과 마찬가지로 너무 복잡하지만 여전히 전문가 수준입니다.
   
   글꼴, 대비, 음수 공간, 채색, 밀도, 흐름 등과 밀접한 관련이있어 호흡이 잘되는 진정으로 잘 디자인되고 효율적인 사이트를 만듭니다.

3. 모두 압도적이라면 템플릿 구입을 고려하십시오.

UI 디자인에 관심이있는 프로그래밍 배경에서 온 사람들을 위해 몇 개의 링크를 추가하기 만하면됩니다.

• 해커를위한 디자인 (인쇄본)
• 사용자 인터페이스 디자인의 원칙 (사이트)
• 단계별 UI 디자인 (전자 책)
• 디자인의 모양 (무료 온라인 버전)

처음에는 어떤 일이 방해가 될 수 있으므로 문제에 직면하게됩니다. 그러나 인내심을 가지고 많은 연습을해야합니다. 디자인을 시작하고 4 년 전 일을 되돌아 보면 내가 그 일을했다고 믿을 수 없습니다.

다른 훌륭한 디자이너 작품을 찾아야합니다. 이를 위해서는 Dribbble에서 훌륭한 디자이너를 따라야 합니다. 또한 매우 중요한 것은 www.minimalistgallery.com 과 같은 CSS 갤러리 사이트에서 최신 디자인을 정기적으로 보는 것입니다 .

최선을 다하겠습니다 !!!

매일 뉴스 레터를 보려면 http://sidebar.io/ 를 구독 하십시오 . 각 기사는 어떤 식 으로든 도움이 될 것입니다. 디자인에 대한 자기 학습의 또 다른 좋은 방법은 드리블 입니다.

이것은 일반적인 팁 일 수도 있지만 누군가가 훌륭한 디자이너인지 아닌지를 실제로 알려주는 것입니다.

공백, 여백 및 정렬.

매끄럽고 전문적인 디자인을 만드는 열쇠입니다. 그것들은 일종의 '호흡 공간'을 생성하며 실제로 디자인이 어울릴 지 여부를 결정할 수 있습니다. 글꼴과 마찬가지로 레이아웃을 깔끔하게 유지하기 위해 특정 여백 / 공백을 고수하려고합니다.

이와 같은 것을 추적하려면 그리드 또는 안내선을 사용하여 디자인하면 매우 유용 할 수 있습니다.

귀하의 질문은 "디자이너로서 앱 프로그래밍에 대한 기본 지식이 끊임없이 필요하다는 것을 알게되었습니다."와 같습니다. 그들은 광대 한 지역이며 서로를 필요로하는 중첩 된 지역이 있습니다. 좋은 소식은 관심과 관심의 중요성을 이해하는 것입니다. 나쁜 소식 : 적절한 과정이나 방법론없이 좋은 디자인을 만들기 위해 무엇이 필요한지 완전히 이해하는 쉬운 방법이 없습니다. 그러나 첫 번째 단계 에서이 책은 어쨌든 시각적 인 시스템을 안전하게 구축하기 시작하는 것이 좋습니다.

비 디자이너 디자인 북