이번 주 디자인 : 2014 년 9 월 12 일
누군가가 디자인과 연결되게하는 데있어 필수적인 부분은 감정과 느낌입니다. 그리고 이들은 예측, 설명 및 디자인하기 어려운 두 가지입니다. 그러나 감정과 느낌 뒤에는 약간의 과학이 있으며, 왜 당신이 어떤 방식으로 반응 할 수 있는지, 이것이 이번 주 디자인에 중점을 둡니다.
우리는 매주 주요 제품 릴리스 및 업그레이드, 도구 및 요령, 그리고 소셜 미디어에서 가장 인기있는 내용까지 살펴볼 계획입니다. 그리고 우리는 당신의 세계에서 무슨 일이 일어나고 있는지 듣고 싶습니다. 우리가 놓친 게 있습니까? [이메일 보호]에 연락주세요.
서체가 어떻게 느끼는지
타이포그래피에는 과학이 있습니다. 좀 더 구체적으로 말하면 글꼴이 어떻게 느끼게하는지 과학이 있습니다. Next Web은“글꼴 뒤에 과학 (그리고 그들이 느끼는 방식)”에서 유형이 사용자에게 미치는 영향과 설계자가 유형에 미치는 영향을 개선하기 위해 할 수있는 일을 잘 살펴 봅니다.
과학을 무너 뜨리는 것은 생각보다 간단합니다.
- 읽는 방법에 대해 생각하십시오. (자연스러운 패턴입니다!)
- 올바른 글꼴이 어떻게 느끼는지 생각하십시오. (읽는 내용의 색조와 일치합니다.)
- 레이아웃이 어떻게 느끼는지 생각하십시오. (텍스트 흐름을 방해하지 않는 방식으로 요소를 배치하면 더 행복합니다.)
- 서체와의 문화적 연관성을 생각하십시오. (문자는 다른 개체 나 항목과 관련이 있거나 도움을 줄 수 있습니다.)
그러나이 정보로 무엇을 할 수 있습니까? 더 나은 느낌과 관련된 서체로 디자인하는 데 어떻게 사용할 수 있습니까? 타이포그래피에 대한 이해가 시작됩니다. 서체 범주 (세리프, 산세 리프, 스크립트 및 장식)와 같은 기본 사항과 가독성 및 가독성 원칙을 아는 것이 좋습니다.
그러나 당신이 할 수있는 다른 것들도 있습니다 :
- 12 포인트보다 큰 글꼴 크기를 선택하십시오. "많은 디자이너들은 16pt 글꼴이 새로운 12pt 글꼴이라고 언급합니다."
- 줄 길이를 알고 있어야합니다. 데스크탑 웹 사이트의 이상적인 줄 길이는 50 ~ 75 자입니다.
- 간격에주의하십시오. 텍스트를 쉽게 읽을 수 있도록 텍스트 줄 사이에 공간이 충분한 지 확인하십시오.
CSS 도형 이해
이미지 또는 텍스트 블록의 모양으로 인해 느낌이들 수 있습니다. 모양은 또한 요소, 전체 디자인에서의 사용 및 기능에 대한 추가 정보를 제공합니다. 그러나 특히 복잡한 이미지를 사용하여 웹 프로젝트의 모양을 만드는 것이 항상 쉬운 것은 아닙니다.
CSS 모양은 그 문제에 대한 해결책을 만듭니다. UX Magazine의 Zack Rutherford는 다음과 같이 말합니다. "CSS 모양을 사용하면 흥미롭고 시각적으로 매력적인 매개 변수 내에서 또는 그 주변에서 콘텐츠를 윤곽을 그리는 디자이너에게 더 큰 자유를 줄 수 있습니다."
그러나 언제 프로젝트에서 CSS 셰이프를 사용해야합니까? 답은 "대칭, 크기, 속도 및 CSS 모양"기사에 있습니다.
재미 있고 CSS 형태로 작업해야하는 이유에 대한 설득력있는 목록이 있습니다.
- 참신 : "텍스트를 좁은 공간으로 압축하거나 더 넓은 범위로 확장 할 수있는 기능은 디자이너가 레이아웃을 구성 할 수있는 자유를 제공합니다."
- 사용자 흐름의 고급 제어 : 내용을 그림으로 변형하여 한 줄씩 텍스트를 줄이거 나 다른 페이지 요소를 강조하기 위해 텍스트를 모양으로 사용합니다.
- 컨텐츠를 형성하면 시각적 스토리 텔링이 용이 해집니다. "문서화 된 컨텐츠의 벽체 구조에 대한 아이디어를 버리고 나면 가변성에 대한 옵션이 엄청납니다."
- 대칭, 크기 및 속도 : "CSS 모양을 사용하여 뷰포트에 관계없이 콘텐츠 모양을 유지할 수 있으며 RWD 친화적 인 것은 말할 것도없이 보편적으로 대칭이됩니다."
폰트 디자인
글꼴을 만드는 것은 냅킨에 몇 글자를 스케치하는 것만 큼 간단하지 않습니다. 글꼴 및 서체 개발은 커밋해야하는 다단계 프로세스입니다. 그러나 많은 경험이 없어도 자신 만의 글꼴을 만들 수 있습니다.
유형 디자이너 타일러 핀크 (Tyler Finck)는 최근 18 분 분량의 비디오와 Creative Market을위한 기사를 정리했습니다. “글꼴을 만드는 방법”은 직접 무언가를 만드는 방법을 잘 보여줍니다 (그러나이 튜토리얼을 위해서는 Mac이 있어야합니다).
그리고 거의 누구나 할 수 있지만 약간의 인내심과 헌신을 가질 준비가되어 있어야합니다. 글꼴을 만드는 것은 1-2-3만큼 쉽지 않습니다.
Finck는이 기사에서“좋은 글꼴을 사용하려면 실용성과 많은 시간이 소요될 것입니다. “행복을 좋아한다면 '열심하지'않으며, 자신이 좋아하는 일이라면 바로 알게 될 것입니다. 아마도 수정을하고 다른 사용자의 의견을 반영하고 다양한 환경 (다른 앱 / 인쇄 / 웹) 등에서 테스트하는 등의 작업을 수행하게 될 것입니다.”
자신 만의 서체를 만드는 것이 차 한잔이 아닌 경우 Finck의 작품 중 하나를 다운로드하는 것이 좋습니다. 2005 년부터 전문 디자이너로 활동했으며 Creative Market에서 여러 서체를 사용할 수있었습니다.
재미로
마지막으로 프로그래밍 언어의 느낌을 시각적으로 표현합니다. (그리고 저에게는 매우 정확한 것입니다.)
Bjorn Tipling은“만약 프로그래밍 언어가 무기라면”에서 약간의 순서로 돈을 벌어 들였습니다. 이 게시물은 각 프로그래밍 언어와 관련 방법을 설명합니다. 비교는 매우 영리하고 관련성이 있습니다.
"C ++는 사용하는 경우 강력하고 인상적인 일련의 수녀 곡이지만 마스터하는 데 많은 시간이 소요되며 종종 다른 것을 사용하고 싶을 수도 있습니다."라고 그는 말합니다. “자바 스크립트는 칼자루가없는 칼입니다.”
꼭 읽어보세요. 그것은 많은 재미이며 늦은 오후 픽업 일 수도 있습니다.