지도 디자인: 예카테린부르크의 지하철 노선도 재설계

대규모 대도시 지하철 네트워크는 순간이동 장치가 될 수도 있습니다. 사람들은 A에서 B로 이동하는 방법에 관심이 없습니다. 런던, 파리, 모스크바에서는 시트에 빈 공간이 많지 않기 때문에 지하철 지도에 표면 지리가 표시되지 않습니다.

도시의 지하철 노선도를 디자인하는 것은 노선이 하나뿐인 경우에도 상당히 어려운 작업입니다. 작년에 제 동료인 Pasha Omelekhin과 저는 러시아 예카테린부르크의 지하철 노선도 재설계 작업을 하게 되어 매우 기뻤습니다. 우리는 즐거웠다(그가 디자인했고 내가 감독했다). 이 기사에서는 디자인 프로세스를 다룰 것입니다. 상세하게 설명할 예정이므로 관심사에 따라 매우 지루하거나 매우 흥미로울 수 있습니다. 그럼에도 불구하고 우리는 너무 많은 것을 남겼습니다. 유사한 프로젝트를 진행해야 하는 경우에 도움이 되길 바랍니다.

SmashingMag에 대한 추가 정보:

• 파리 지하철 노선도 – 재설계
• Google 어스 시대의 일러스트 지도의 즐거움
• 자연 지구 데이터에서 SVG 지도 구축 가이드
• 멋진 지리적 위치의 세계로 들어가기

뛰어들자!

접근

이것은 우리가 만든 최종 지도입니다:

비교를 위해 이전 버전의 지도는 다음과 같습니다.

위의 녹색 실선은 현존하는 유일한 지하철 노선입니다. 나머지 두 개는 건설이 시작되지 않은 "계획된" 노선일 뿐입니다. 세 가지를 모두 표시하는 것은 의미가 없습니다. 따라서 첫 번째 스케치는 간단한 단선 다이어그램이었습니다.

일반적으로 여러 노선의 지하철 네트워크에서 각 지하철 노선에는 열차 문 위에 별도의 단선 다이어그램이 표시됩니다. 그러나 여기에서는 하나의 다이어그램을 전체 네트워크 다이어그램과 라인 다이어그램으로 모두 사용할 수 있습니다. 약간의 수정이 필요하고 우리는 그것을 만들었지만 그러한 다이어그램이 일반적으로 어떻게 디자인될 것인지 다시 생각하고 싶었습니다.

언급한 바와 같이 런던, 파리, 모스크바와 같이 대규모 지하 네트워크가 있는 대도시 센터는 지하철 노선도에 표면 지리를 표시하지 않습니다. 그렇게 할 공간이 충분하지 않습니다. 작은 지하철에서는 그렇지 않습니다. 단순성과 표면 세부 정보 부족은 풍부한 지도가 사람들이 경로를 찾는 데 방해가 될 때만 필요합니다. 예카테린부르크에는 이 문제가 없습니다.

지하철 노선이 하나뿐이라면 시스템을 순간이동 장치처럼 묘사할 여유가 없습니다. 사람들은 가고 싶은 곳으로 이동하기 위해 다양한 교통 수단을 이용해야 합니다. 그래서 우리는 지하철이 다른 모든 것과 어떻게 연결되어 있는지 보여주고 싶었습니다.

오래 전, 파리의 지하 지도는 단순히 도시 지도 위에 놓였습니다.

우리는 두 가지 접근 방식이 결합될 수 있다고 생각했습니다. 표면 정보는 선형 다이어그램 위에 놓일 수 있으므로 지도를 풍부한 정보를 제공하고 기차에서 사용하기에 적합하게 만들 수 있습니다. 이것은 우리가 중요한 랜드마크에 맞게 이상한 방식으로 도시를 구부릴 것을 요구하지만, 이것은 뉴욕시의 지하 지도의 경우처럼 작동하는 것으로 알려져 있습니다.

선형 다이어그램

다음으로 지도에 일부 거리를 추가했습니다.

강은 여기에서 너무 어둡게 보였다. 또한 예카테린부르크는 인기 있는 관광지가 아니므로 러시아어가 영어보다 훨씬 중요합니다. 따라서 우리는 선을 기준으로 러시아어 이름을 안쪽에 배치하고 영어 번역을 바깥쪽에 배치하기로 결정했습니다.

우리는 스타일을 실험하고 싶었습니다. 우리는 비공식 M 로고로 시작하여 역의 "틱"을 비스듬히 잘라 이를 반영했습니다. 나중에 우리는 공식 로고로 교체했습니다.

그라디언트가 제대로 보이지 않았습니다. 그리고 로고가 너무 컸습니다. 그래서 하나의 큰 로고 대신 여러 로고(지하철 로고, 도시의 문장, 교통 당국의 상징)를 그룹화하려고 했습니다. 이런 모습은 보통 멋있어 보인다.

하지만 결국 우리는 두 개의 로고가 잘 작동한다는 것을 발견했습니다(도시의 로고가 그 중 하나임).

강과 거리가 선과의 관계를 더 잘 전달하기 위해 어떻게 변하기 시작했는지 주목하십시오. 우리는 더 많은 표면 지리를 계속 추가했습니다.

이제 우리는 나침반(북쪽을 가리키는 왼쪽 화살표), 도시의 TV 타워 및 서커스를 갖게 되었습니다. Botanicheskaya에서 출발하는 공항 셔틀의 노선은 진드기의 각도에 맞춰 정렬되었습니다. 지리를 더 사실적으로 느껴지게 하면 살아남을 수 없는 수정이지만 나름의 매력이 있었습니다. 아마도 다른 곳에서 작동할 것입니다.

우리는 틱으로 더 많은 것을 실험했습니다.

우리는 긴 그림자도 가지고 놀았습니다.

이들 중 일부는 훌륭했지만 여전히 어떤 면에서도 특별하지 않았습니다.

Ekaterinburg는 구성주의 건축이 특징입니다. 지도에서 이것을 암시하기 위해 무엇을 사용할 수 있습니까? 우리는 Malevich와 Kandinsky의 예술에서 영감을 찾았습니다.

효과가 있을 수 있습니다!

우리는 지하철 노선 위에 거리를 배치하여 현실의 유사성을 추가하려고 시도했습니다.

그러나 이것은 실수처럼 보였다. 실행 취소!

선을 구부리다

지하철 노선을 직선으로 그리는 것이 이상적이지만 도시를 너무 왜곡시킬 것입니다. 그래서 우리는 선의 진정한 형태를 암시하기 위해 굴곡을 도입했습니다:

이것은 깨진 것처럼 보였습니다. 우리는 선을 더 매끄럽게 만들고 싶었습니다. 안녕, 각진 진드기!

선의 형태에 영향을 미치는 지리를 파악한 후 우리는 도로, 광장, 공원, 식물, 도시 전체와 같은 선을 더 많이 원했습니다. 우리는 멋진 나무가 있는 공원을 추가하는 방법과 강에 물결 모양의 질감을 주는 방법을 상상하기 시작했습니다.

이제 지리학에 대해 더 많이 알게 되면서 진드기가 문제가 되었습니다. 역명이 아닌 역 출구 방향을 가리키는 것 같아 혼동을 줄 수 있다. 새로운 지표가 필요했습니다.

원이 줄을 서야 했습니까? 역 이름에 더 가깝게 배치하면 어떻게 될까요?

잠깐 기다려요! 역 출구의 위치 를 ​​나타내면 어떨까요?

이 출구는 선에 비해 너무 작아서 멀리서 볼 수 없었습니다. 우리는 "여기가 역입니다!"라고 외치는 솔루션이 필요했습니다. 미묘하게 출구를 나타내는 동안.

더 많은 표면 기능

그 사이에 다른 작업이 진행되었습니다. 서커스의 픽토그램이 더 알아보기 쉬워졌습니다.

버려진 TV 탑에 대한 자세한 정보:

다른 교통 수단의 픽토그램도 더 많은 관심을 받았습니다.

아, 그리고 우리는 지상 철도 네트워크와 우리 자신에 대한 디자인 귀속을 던졌습니다(오른쪽에 자리 잡고 있음).

강의 모양이 좋지 않았습니다. Harry Beck이 디자인한 고전적인 런던 지하철 노선도를 연상시키는 가는 선을 시도했습니다.

너무 얇아서 거의 보이지 않습니다.

그리고 우리는 종이에 역 출구의 표현을 계속 탐구했습니다.

한 가지 아이디어는 반투명한 지하철 노선 위에 상세한 출구 계획을 세우는 것이었습니다.

청소

이 시점에서 지도는 매우 혼잡해 보였습니다. 우리는 역 이름에 대해서만 영어 번역을 표시하기로 결정했습니다. 그리고 우리는 서커스를 제거했습니다. 또한 철도 및 버스 터미널의 표시기를 해당 지하철역으로 이동하려고 했습니다.

글꼴이 DIN에서 PT Sans Metro(낮은 대문자가 있는 PT Sans의 사용자 지정 버전)로 변경되었습니다.

다음은 지상 운송 경로를 나열하는 실험입니다.

이 시점에서 거리 이름이 가장 시끄러운 요소였습니다. 우리는 모두 대문자로 설정하려고 시도했습니다.

일반적으로 모두 대문자는 특히 길 찾기에서 부적절합니다. 문자는 직사각형과 비슷하여 구별하기 더 어렵습니다. 그러나 우리는 단어가 더 조용하고 단순해 보이기를 원했기 때문에 효과가 있었습니다.

우리는 역 출구에 대한 실험을 계속했습니다.

우리는 역을 멀리서도 볼 수 있을 만큼 크게 만들기 위해 반투명 원이 필요하다고 생각했습니다.

그러나 모든 출구를 그린 후 우리는 그것이 필요하지 않다는 것을 깨달았습니다.

더 두꺼운 반투명 선도 불필요하다는 것이 입증되었습니다.

이것이 역 출구에 대한 우리의 작업의 끝은 아니었지만 성취였습니다.

트롤리 및 버스 아이콘

지상 운송 경로를 나열하는 작업은 다음과 같이 수행되었습니다.

공원은 멋진 패턴을 얻었고 TV 타워와 강은 단순화되었습니다.

스테이션에 대해 진지하게 생각하기

우리는 여전히 멀리서 역의 가시성에 대해 걱정했습니다. 출구만으로는 역을 돋보이게 만들기에 충분하지 않았습니다. 그래서 우리는 다른 것을 시도했습니다:

우리는 지하철 노선을 점으로 만들기도 했습니다.

여기서 또 다른 주요 개선 사항을 확인하십시오. 거리 이름은 공간이 허용되는 거리 내부로 이동되었습니다. 모든 대문자는 이를 위해 매우 편리하여 명확성에 크게 기여했습니다.

우리는 방송국을 계속 사용했습니다.

우리는 강이 지도의 다른 곳에서는 사용되지 않는 매우 가는 선으로 구성되어 있는 것이 마음에 들지 않아 다음과 같이 변경했습니다.

우리는 여기에서 다른 많은 시도를 건너뛰지만 아래의 시도는 지적할 가치가 있습니다. 우리는 이것이 약속이 있다고 생각했습니다.

모든 것이 함께 오고 있다

거리로 돌아서서, 마른 것들은 이상하게 보였다. 그래서 우리는 모든 거리에 같은 너비를 제공하려고 했습니다.

더 이상 가는 선이 없었기 때문에 TV 타워에 윤곽 대신 채우기를 적용했습니다.

그런 다음 배경과 거리의 색상을 바꾸고 강이 흐르는 것처럼 보이도록 만들었습니다.

우리는 또한 강물을 내부뿐만 아니라 외부에서도 물결 모양으로 만들려고 시도했습니다.

그러나 이것은 뒤로 물러난 것처럼 느껴졌습니다. 그것은 물보다 파스타처럼 보였습니다.

우리의 나침반도 너무 단순했습니다.

우리는 Yuri Gordon의 화살에서 영감을 얻었습니다.

다음은 우리가 만든 것입니다.

<

최종 터치

우리는 계속해서 지하철 노선과 역으로 돌아왔습니다. 분명히 가장 중요한 요소이기 때문입니다.

지금 가장 못생긴 것은 무엇입니까? 공원. 그들이 도로에 부딪치는 방식과 서로가 좋지 않다. 특히 불쾌한 것은 강을 둘러싼 공원입니다. 배경을 제거하고 나무만 남기고 색상을 조정하여 훨씬 더 멋져졌습니다.

TV 타워도 개선되었습니다.

PT Sans 글꼴은 ALS Direct를 위해 사용되었습니다.

트램 노선은 거리에서 눈에 잘 띄고 길 찾기에 도움이 되기 때문에 추가했습니다.

또한 텍스트를 그리드에 정렬하려고 시도했습니다.

그리고 그림자를 추가했습니다.

그게 다야! Pasha는 이메일을 통해 나 Ilya가 지시한 Adobe Illustrator에서 모든 것을 구축했습니다.

이것은 지도 디자인에 대한 포괄적인 가이드를 의미하지 않습니다. 각 도시는 고유한 문제와 특성을 나타냅니다. 그러나 이것이 당신이 그러한 임무를 맡을 때 무엇을 찾고 무엇을 시도해야 하는지에 대한 아이디어를 제공하기를 바랍니다. 처음에는 작은 프로젝트처럼 보였던 것이 몇 개월에 걸친 혹독한 연습으로 밝혀졌습니다.