헤드라인을 장식하는 5가지 최고의 뉴스 및 잡지 웹사이트 디자인

잡지와 신문 출판물은 소셜 미디어의 즉각적인 정보 흐름의 시대에 여전히 매우 관련성이 있습니다. 미국 성인의 91%가 잡지를 읽습니다.

그러나 오늘날 디지털 플랫폼은 지배적인 미디어이며 출판물은 이에 적응하고 있습니다. 2025년까지 전 세계적으로 18억 명의 디지털 잡지와 신문 독자가 있을 것입니다.

이 부문의 매출도 2021년에 10% 증가한 3,590만 달러에 이를 것으로 예상됩니다.

업계의 성장하는 성격은 잡지 및 신문 발행인에게 새로운 과제를 제시합니다. 즉, 훌륭한 웹 디자인으로 독자의 관심을 끌기 위해 싸우는 것입니다.

감각적인 미학과 멀리 내다볼 수 있는 유용성으로 청중의 상상력을 자극하는 최고의 뉴스 및 잡지 웹사이트 디자인을 나열하므로 좋아하는 독서 의자에서 편안하게 휴식을 취하십시오.

바로 가자!

1. Ruby Studio의 CARE 기후 변화 및 탄력성

뛰어난 기능:

• 생생한 전체 화면 탐색을 여는 메뉴 아이콘
• 홈페이지의 비주얼 위주 스토리텔링
• 수직 탐색 모음

CARE Climate Change and Resilience(CCCR)는 기후 변화로 고통받는 빈곤 지역의 사람들을 돕는 인도주의 단체입니다. 덴마크의 Ruby Studio에서 제작한 웹사이트에서는 시각적으로 매력적인 사용자 여정을 통해 조직의 사명을 자세히 설명하고 있습니다.

홈페이지는 전체 화면 사진, 큰 흰색 글꼴로 된 조직 이름 및 검색 표시줄과 함께 열립니다. 녹색, 주황색 및 갈색 톤이 우세하여 CCCR의 주요 목표 중 하나인 자연 보호와 인지적 연관성을 형성합니다.

사용자가 페이지 아래로 이동할 때 사이트에 남아 있는 한 가지 일정한 요소는 화면 왼쪽에 있는 기존의 수직 메뉴 막대입니다. 여기에는 CCCR의 가장 유익한 페이지에 대한 몇 가지 중요한 링크가 포함되어 있습니다.

그러나 다른 페이지로 연결되는 대부분의 링크는 전체 화면 탐색 화면을 생생한 노란색으로 여는 햄버거 메뉴 아이콘 내에 있습니다.

탐색 페이지의 레이아웃은 특히 매력적이고 매력적입니다. 상단에 있는 편리한 도구를 통해 방문자는 국가, 테마, 언어, 연도 또는 형식을 기반으로 성공 사례를 필터링할 수 있습니다. 결과는 각 사이에 충분한 공간이 있는 둥근 모서리 사진이 있는 2열 격자 레이아웃으로 아래에 나타납니다.

전문 사진, 세계 지도 및 둥근 주황색 CTA 버튼은 독자에게 충분한 양의 간결한 메시지를 전달합니다. 오른쪽의 슬라이딩 "기부" 창은 방문자가 이 고귀한 대의에 기여하고 싶은 일정 금액을 선택하거나 입력할 수 있는 간단한 지불 양식을 엽니다.

2. 유리 비트렌코의 도서관 By Nextpage

뛰어난 기능:

• 최소한의 목적 지향적인 디자인
• 집중과 관심을 위한 책과 같은 레이아웃
• 타이포그래피의 탁월한 선택

Yuriy Vitrenko는 Naftogaz와 Gazprom, 우크라이나와 러시아의 석유 및 천연 가스 거물 간의 역사적인 중재 과정에서 핵심 인물 중 한 명입니다.

Nextpage 디지털 에이전시에서 설계 및 개발한 Vitrenko의 웹사이트에는 Naftogaz 재직 기간의 내부 문서 모음이 포함되어 있습니다. 이 문서는 Naftogaz가 최근 러시아와의 분쟁에서 우크라이나의 주권과 독립을 보장하는 데 중요한 역할을 했는지 설명합니다.

웹사이트의 테마와 콘텐츠의 진지함은 너무 많은 눈요기를 자랑하지 않으면서 간결하고 직접적인 방식으로 정보를 전달하는 레이아웃을 결정합니다. 따라서 Yuriy Vitrenko의 라이브러리는 매우 효율적이고 UX 중심적이며 탐색 중심적인 이벤트 기록입니다.

이 웹사이트 디자인은 큰 메인 제목, 전체 흰색 배경 및 고전적인 기울임꼴 글꼴이 있는 책의 디자인과 유사합니다. 웹 디자인 에이전시의 말처럼 "가장 일반적인 정보 전달 형태이자 지혜와 지식의 상징이기 때문에" 책을 주요 영감으로 사용했습니다.

단순한 콘텐츠 전달, 집중적인 관심 관리 및 목적 있는 스타일은 이 웹사이트의 세 가지 특징입니다.

메인 메뉴 탐색은 거대 석유 기업을 독립시키려는 Vitrenko의 투쟁과 관련된 모든 페이지를 가리킵니다. 사용자가 이 사건에 대한 모든 세부 정보를 얻고 토론에 참여할 수 있도록 이 독특한 법적 사건의 다른 측면으로 바로 넘어가고 싶은 경우를 대비하여 메뉴가 방문자에게 항상 남아 있습니다.

3. Nick Noordijk의 머리카락에 소금

뛰어난 기능:

• 다양한 글꼴과 고르지 않은 레이아웃으로 다채로운 디자인
• 매우 가벼우며 빠른 로딩 시간
• 올바른 형식의 블로그 기사 페이지

Salt in Our Hair는 네덜란드 부부인 Hannah와 Nick이 설립, 디자인 및 개발한 여행 블로그 웹사이트입니다.

스포츠 재미와 엉뚱한 디자인, 우리 머리카락의 소금은 기분 좋은 관광 라이프 스타일의 구현입니다. 점점 영향력이 커지는 여행 블로거와 인스타그래머의 미학에 호소합니다.

이것은 방문자가 홈페이지에 도착하자마자 매우 비공식적인 맞춤형 로고, 최고 수준의 사진 및 직관적인 메인 메뉴 탐색으로 인사를 받는 순간 분명해집니다. 웹 사이트의 Shop 섹션에서는 사용자가 이동 중에 사진 색상을 편집할 수 있는 수많은 라이트룸 사전 설정 컬렉션을 판매합니다.

홈페이지를 아래로 스크롤하면 완벽한 사각형에서 자유형 원 및 그 사이의 모든 것에 이르기까지 다양한 형태와 모양의 콘텐츠 모듈이 나타납니다. 고르지 않은 레이아웃은 예측할 수 없는 환영 요소를 도입하는 반면, 서로 다르지만 보완적인 글꼴 모음은 이 모든 것을 함께 유지합니다.

겹치고 의도적으로 일치하지 않는 색상, 많은 여백 및 큰 제목이 이 여행 잡지 웹 사이트 디자인의 캐주얼한 성격을 나타냅니다. 홈페이지 사용자 여정은 창립자의 전기와 리드 캡처 뉴스레터 구독 양식을 자세히 설명하는 사랑스럽게 디자인된 회사 소개 섹션으로 끝납니다.

웹사이트의 가장 큰 장점은 콘텐츠의 다양성입니다. 그런 점에서, 그것은 장소의 예쁜 사진 그 이상을 제공합니다. 여행 일지와 저널이 핵심이지만 지속 가능성, 예산 책정, 기술 및 기타 관련 주제에 대한 블로그 기사뿐만 아니라 유용한 조언과 사진 팁도 있습니다.

4. Antyra의 실론 이야기

뛰어난 기능:

• 매우 깨끗하고 잘 구성된 메가 메뉴
• 눈에 띄는 배경 그래픽
• 자동 결과 제안이 있는 검색 창

Tales of Ceylon은 민속, 신화, 스리랑카의 도시 및 기타 주목할만한 목적지의 실제 역사에 중점을 둔 여행 블로그 및 온라인 잡지입니다. 열렬한 여행자와 관광객에게 팁을 제공하는 것 외에도 스리랑카(1972년까지 이름은 Ceylon)에서 즐길 수 있는 다양한 경험과 활동을 나열합니다.

Antyra Solutions에서 만든 웹사이트는 스리랑카의 엄선된 목적지에 대한 멋진 회전식 표시로 매우 포괄적인 사용자 여정을 시작합니다.

미묘한 입자 효과와 모션 그래픽이 적용된 전체 화면 사진에는 크고 굵은 글자로 각 장소의 이름이 포함되어 있으며 각 목적지의 주요 랜드마크 기능 뒤에 "숨겨져" 있어 매우 설득력 있는 3D 효과를 얻을 수 있습니다.

페이지 상단의 기본 메뉴 탐색은 실제로 방문자가 메뉴 항목 위로 마우스를 가져가면 열리는 메가 메뉴입니다. 메가 메뉴에는 특정 기사 및 카테고리의 이미지가 포함되어 있으며 대비가 높은 흰색 배경이 있습니다.

스크롤 없이 볼 수 있는 부분 아래에는 함께 제공되는 콘텐츠에 흥미를 더하는 눈에 띄는 일러스트레이션과 맞춤형 그래픽이 있습니다. 제목의 손으로 쓴 타이포그래피와 주요 콘텐츠에 일반적으로 사용되는 산세리프체 글꼴은 즐거운 독서 경험을 선사합니다.

기사 페이지는 콘텐츠를 둘러싸고 있는 충분한 여백이 있고 페이지의 양쪽에 추가 요소가 없는 매우 단순하고 깔끔한 형식입니다. 이를 통해 사용자는 중요한 정보에 집중하고 불필요한 요소에 압도되는 느낌을 피할 수 있습니다.

5. Tokyo Voice by 다케다 준스케

뛰어난 기능:

• 멋진 인물 사진
• 일관된 반쪽 레이아웃 디자인
• 흑백 색상 및 이미지의 브랜드 내 사용

Tokyo Voice는 일본의 흥미로운 수도의 "일반" 시민들을 소개하고 인터뷰하는 잡지이자 온라인 포털입니다. 모든 연령대, 성별, 각계각층의 사람들이 자신의 삶의 이야기와 경험을 공유할 수 있습니다.

히로시마에 기반을 둔 Junsuke Takeda가 구상하고 제공한 웹사이트는 더 나은 브랜드 일관성을 위해 실제 잡지의 모습을 밀접하게 따릅니다. 그러나 로고의 글꼴은 잡지의 표준 세리프 글꼴보다 온라인에서 더 효과적인 대담한 산세리프 모양을 채택하여 약간 다릅니다.

Tokyo Voice의 웹사이트 홈페이지는 세로로 두 부분으로 나뉩니다. 왼쪽에는 회전 목마와 갤러리 보기를 통해 움직이는 짧은 인터뷰 스니펫과 함께 도쿄 거주자의 사진 초상화가 있습니다. 오른쪽에는 브랜드 로고와 왼쪽 절반을 보완하는 사이트 검색에 도움이 되는 다양한 해시태그가 포함된 큰 공백 덩어리가 있어 시각적으로 훨씬 더 매력적입니다.

오른쪽 상단 모서리에 있는 주 메뉴 버튼을 클릭하면 동일한 2열 레이아웃을 따르는 전체 화면 탐색이 열립니다. 유일한 차이점은 홈페이지와 비교하여 "네거티브" 색 구성표를 사용한다는 것입니다. 오른쪽은 검은색이고 왼쪽은 흰색입니다.

개별 인터뷰의 전체 컬렉션을 포함하는 기사 섹션은 4개의 열과 맨 오른쪽에 밀어넣은 기본 메뉴 탐색 모음이 있는 단순하지만 효과적인 그리드 레이아웃을 따릅니다. 독자가 특정 기사를 선택하면 개별 인터뷰 페이지가 홈페이지의 절반 디자인으로 되돌아갑니다.

왼쪽에는 방문자가 기사를 읽고 아래로 스크롤할 때 매우 부드러운 효과로 전환되는 인터뷰 대상자의 전문적으로 촬영된 이미지가 있습니다. 한편, 오른쪽에는 두꺼운 흰색 배경에 가늘고 검은색 글꼴로 피사체의 스토리가 펼쳐집니다.