웹 디자인에서 타이포그래피의 효과적인 사용
게시 됨: 2015-10-192015년은 기술 부문에서 심오한 발전을 이룬 한 해였습니다. 세계는 모바일과 웹 디자인 및 개발 기술에서 일어난 몇 가지 놀라운 변화를 목격했습니다.
이번 포스팅에서는 주로 웹 개발 분야의 최신 트렌드인 폰트와 타이포그래피에 대해 이야기해보려고 합니다.
타이포그래피는 메시지를 대상 청중이 이해할 수 있는 의사 소통적이고 시각적으로 즐겁고 균형 잡힌 레이아웃으로 조합하는 기술입니다. 웹사이트와 같은 새로운 미디어 기술은 오늘날의 사용자에게 자신의 취향에 따라 웹 오타를 수정하고 수정할 수 있는 권한을 주었습니다. 예를 들어 크기를 늘리고 색상을 변경하며 더 나은 가독성을 위해 글꼴을 수정할 수도 있습니다. 웹 타이포그래피는 일반적인 인쇄 타이포그래피와 완전히 다릅니다. 인쇄 디자인에서 인쇄된 타이포그래피는 더 이상 수정할 수 없습니다. 웹사이트와 관련 매체의 경우는 정반대다.
그러나 이것을 말한다고 해서 웹에서 타이포그래피를 수정함으로써 디자이너가 예술적이고 논리적으로 다루어야 하는 작품을 만들어야 하는 책임에서 벗어날 수 있다는 의미는 아닙니다. 많은 규칙이 인쇄 디자인에 적용되는 것과 유사합니다. 글꼴 선택에 약간의 차이가 있습니다. 웹 사이트 디자인에 사용되는 글꼴은 인쇄 글꼴과 다른 "웹 글꼴"로 알려져 있습니다. 그들에 대해 자세히 읽어 봅시다.
웹 글꼴
웹 글꼴은 모든 웹 브라우저에서 인식할 수 있는 공통 글꼴이며 사용하는 이유도 같습니다. 아무도 웹 사이트 디자인이 다른 브라우저에서 엉망이 되는 것을 원하지 않습니다. 최근에 디자이너들은 글꼴을 거의 선택할 수 없었습니다. Georgia, Times, Verdana 또는 Courier의 일부 버전. 동일한 글꼴의 반복적인 사용으로 인해 디자인의 개념과 동질성에 대한 묘사가 다소 우울해졌습니다.
고맙게도 Type kit, Google Web Fonts 및 Font Deck와 같은 새로운 웹 글꼴이 출시되었습니다. 웹에서 처음으로 다양한 글꼴을 사용할 수 있게 되었으며 웹 디자인은 이를 최대한 활용하기 위해 진화하고 있습니다. 그러나 이제 선택의 폭이 넓어지면서 디자이너가 웹 디자인에 사용할 글꼴을 선택하는 것이 훨씬 더 어려워졌습니다. 여기에서는 웹 디자인에 적합한 글꼴을 선택하는 데 도움이 되는 몇 가지 지침을 제시합니다.
어수선하지 마십시오
디자인 프로세스 초기에 기본 및 디스플레이 글꼴을 모집합니다. 웹 디자인 프로세스에서 사용할 글꼴을 모집하면 전체 프로세스가 쉬워질 뿐만 아니라 디자인이 여러 글꼴로 과밀해지는 것을 방지할 수 있습니다.
편차 없음
기본 글꼴과 표시 글꼴을 선택했으므로 이제 이 선택 항목만 고수하면 됩니다. 디스플레이 글꼴이 크고 헤드라인에만 이상적이기 때문에 글꼴을 교체할 논리적 이유가 없습니다. 사용 중인 글꼴이 동일하지 않는 한 선택 항목만 고수하는 것이 좋습니다.
적절한 글꼴 선택
디자인 프로세스를 시작하기 전에 적절한 글꼴을 선택했는지 확인하십시오. 스크립트 양식은 손으로 쓴 편지에 적합할 수 있지만 기업용으로 작성하는 경우 다시 선택하는 것이 좋습니다.
이제 웹 페이지 디자인을 시작하기 전에 글꼴 선택 프로세스에서 수행해야 할 작업을 알았으므로 2015년 전 세계 디자인 전문가 사이에서 트렌드인 다양한 새로운 글꼴을 살펴보겠습니다.
타이포그래피/글꼴은 매력적인 사용자 경험을 만드는 데 중요한 역할을 하기 때문에 제작자는 디자인에 적합한 글꼴을 선택하는 데 많은 시간과 노력을 투자합니다. 다음은 올해 유행하는 글꼴 목록이며 많은 디자이너가 자신의 창작물에 글꼴을 사용하는 것을 선호합니다.
브랜든 그로테스크
이 깨끗하고 현대적이며 읽기 쉬운 글꼴은 청결함과 단순성으로 인해 오늘날 많은 웹 제작에 사용됩니다. 기하학적 산세리프 스타일에서 영감을 받아 완벽한 시각적 계층 구조를 위해 선택할 수 있는 여러 가중치와 함께 웹 디자인에 커뮤니케이션의 명확성을 제공합니다.
무세오 산
Museo sans는 잘 알려진 museo를 기반으로 한 인기 있는 글꼴 중 하나입니다. 다중 디스플레이 및 텍스트 사용의 요구 사항에 따라 매우 적합한 강력하고 대비가 낮고 가독성이 높은 산세리프체입니다.
레일웨이
처음에는 하나의 굵기로 디자인되었지만 나중에 다양성과 인기로 인해 9가지 굵기로 확장된 Google 제품군에 속하는 우아한 글꼴입니다. 기하학적 산세리프 스타일에서 영감을 받은 또 다른 글꼴입니다. 일부 디자이너는 개성 때문에 사용하는 것을 좋아한다고 말합니다. 시크하고 깨끗하고 우아한.
플레이 페어 디스플레이
이름에서 알 수 있듯이 이 글꼴은 제목과 헤드라인에 사용하기 좋습니다. Play Fair는 raleway, roboto, lato 등과 같은 산세리프 글꼴과 쉽게 짝을 이루는 최신 유행의 Google 글꼴입니다.
글꼴과 그 사용법에 대해 간략하게 논의했으므로 이제 웹 디자인 프로세스로 넘어갈 수 있습니다.
전문 웹사이트 디자인은 지난 몇 년 동안 매우 중요해졌습니다. 방문자가 귀하의 웹사이트에 머무는 가장 최근의 예상 시간은 오늘 단 4초입니다. 8초 전이었다. 방문자는 즉각적인 결정을 내리며 이 4초 동안 그를 설득하는 가장 중요한 열쇠는 방문자가 더 머물고 귀하가 제공하는 서비스에 기대도록 유도할 심오한 웹사이트 디자인을 갖는 것입니다. 당신이 그를 10초 이상 붙잡고 있으면 그가 성공적인 판매로 변할 확률이 거의 50% 증가합니다. 그들이 머물게 하려면 웹사이트가 거의 즉각적으로 그들의 관심을 사로잡아야 합니다.
따라서 방문자가 귀하의 웹 사이트에 계속 머물도록 하기 위해 염두에 둔다면 방문자가 귀하의 웹 페이지에서 더 많은 시간을 보내도록 유도하는 몇 가지 중요한 요소에 대해 논의해 보겠습니다.
오늘의 고객은 배운다. 특정 서비스를 찾기 전에 사람들은 일반적으로 시간을 내어 이에 대해 조사합니다. 따라서 고객이 귀하의 웹사이트에 방문할 때마다 90% 이상의 확률은 그가 인터넷, 모든 검색 엔진에서 귀하에 대해 알게 되었고 고객이 찾고 있는 것이 무엇인지 정확히 알고 있기 때문에 요점에 도달하기를 원한다는 것입니다. 시간을 낭비하지 않고. 그들이 처음 몇 초 안에 원하는 것을 찾지 못하면 영원히 사라질 것입니다. 우리는 어떤 기업도 그러한 상황을 경험하고 싶어하지 않을 것이라고 확신합니다. 언제 무슨 일이 일어 났는지 알기 위해 웹 사이트에서 테스트 기술을 암시해야합니다!
전 세계의 디지털 마케팅 전문가들은 제품 판매를 목적으로 하는 모든 웹사이트가 위에서 아래로, 왼쪽에서 오른쪽으로 로드되어야 한다고 제안합니다. 귀하의 웹사이트에는 독자들이 읽고 필요한 중요한 정보를 찾을 수 있는 양질의 콘텐츠가 있어야 하며, 이 콘텐츠는 디자인을 통해 광학적으로 최적화되어야 합니다. 올바른 콘텐츠, 올바른 디자인이 최대의 효과를 냅니다!
어떤 그래픽 형식을 사용해야 합니까?
이 질문은 아마도 웹 디자인 측면에서 가장 중요할 것입니다. 너에게 물어보고 싶다. 사진을 로드하는 데 너무 오래 걸리는 웹사이트를 몇 번이나 방문하셨습니까? 사진 로드가 완료될 때까지 기다리셨습니까 아니면 다른 곳으로 이동했습니까? 이사를 가셨나 봅니다. 느린 로딩 웹사이트는 웹사이트 디자인 및 개발 산업에서 큰 실패로 간주됩니다. 이에 대한 답은 클라이언트가 웹사이트 로딩 시간을 잊어버려야 한다는 점을 잊어버린 경우에도 웹사이트 로딩 시간을 염두에 두고 있는 전문 웹사이트 디자인 및 개발 회사를 고용하는 것입니다.
.JPG 형식:
.JPG 구성을 사용하면 사진에 최대 1600만 가지 색상을 담을 수 있습니다. 또한 가변 압축을 강화하여 미묘한 요소의 비율을 희생시키면서 그림의 크기를 줄일 수 있습니다. 이 요소를 활용하려면 최적화한 후 그림을 볼 수 있는 디자인 프로그램이 필요합니다.
JPG는 몇 가지 색조만 있는 사진이나 사진으로 만든 콘텐츠에 권장되는 형식이 아닙니다. 완성된 사진은 저화질입니다.
.GIF 형식:
.GIF는 최대 256개의 색조를 지원합니다. 또한 웹 사이트 페이지의 색조가 표시되도록 하는 이러한 선을 따라 그림의 기초를 감지할 수 없음을 나타낼 수 있는 "직관성"을 강화합니다.
이 형식이 포함된 디자인은 거의 영향을 받지 않으므로 이미지를 압축할 때 품질에 큰 영향을 미치지 않습니다.
일반적으로 다음은 사이트의 표현에 사용해야 하는 그룹을 파악하기 위한 적절한 접근 방식입니다.
- 디자인에 다양한 색상이 있는 경우(예: 사진) .JPG를 구성으로 사용합니다. 그러나 레코드 크기가 웹사이트 페이지가 빠르게 쌓이는 것을 방지할 만큼 너무 크지 않은지 확인하십시오. 화질과 문서 크기 사이의 적절한 조화를 찾으십시오.
- 디자인에 몇 가지 색상만 있는 경우(예: 그래프) .GIF를 구성으로 사용합니다.
분명히 이것은 사이트 계획에서 일러스트레이션의 중요한 부분을 어느 정도 왜곡합니다. 귀하의 웹 주변을 만들기 위해 전문 웹 개요 조직을 고용하는 경우에는 구성 프로세스 중에 이러한 규칙을 따라야 합니다. 제작자로부터 진행 중인 작업이 훌륭한 구성 모델을 유지하고 있는지 확인해야 합니다.
더 많은 것을 원하게 만드세요
분명히, 귀하의 사이트가 얼마나 잘 정리되어 있고 손님의 관심을 사로잡는 데 얼마나 성공적인지 관계없이 그들은 귀하의 사이트를 유익하고 관련성 있는 것으로 볼 필요가 있습니다. 당신은 그들에게 당신의 사이트에 머물고 스캔할 동기를 부여해야 하고, 그들이 다시 언급할 수 있도록 당신의 사이트를 북마크에 추가하고, 당신이 새로운 손님을 만들 수 있도록 당신의 사이트에 관해 다른 사람들에게 알려야 합니다.
이것이 오늘의 기사의 전부입니다. 다음 기사에서는 검색 엔진이 웹 사이트와 관련 문제 및 해결 방법을 최적화하는 기술에 대해 자세히 설명합니다. 검색 엔진 최적화는 신흥 및 지속 비즈니스를 위해 수년 동안 그 효과를 입증했으며 이러한 기술을 통해 비즈니스는 실제로 많이 번성했습니다. 검색 엔진을 통해 유기적인 결과를 얻는 데 도움이 되며 인터넷에서 고유한 콘텐츠 포함 및 링크 구축이 필요합니다. SEO는 또한 전 세계적으로 많은 찬사를 받는 직업으로 간주됩니다.