What is a grid system & responsive mobile & tablet design – Adobe Illustrator CC 2017 [10/45]

안녕하세요, 제 이름은 댄입니다 이 비디오에서 우리는 Illustrator를 사용할 것입니다

UI 및 웹 그래픽을 제작할 수 있습니다 내 채널에는 많은 무료 콘텐츠가 있습니다 구독 해주세요

알림을 받으려면이 구독 버튼 옆에있는 작은 종소리를 치십시오 더 많이 원하면 더 많이로드하십시오 bringyourownlaptopcom을 확인하거나 설명의 링크를 확인하십시오 안녕하세요,이 비디오에서 우리는 이야기 할 것입니다

그리드 시스템 및 반응 형 웹 디자인 그래서 사람들이 반응에 대해 이야기 할 때 그것이 의미하는 전부는 내가 사이트를 디자인 할 예정이다 내가 사용하는 다른 기기에 응답합니다

여기이 사이트를보고있는 경우 내 사이트, bringyourownlaptopcom 데스크톱에, 그것은 다음과 같습니다

그러나 그것이 모바일 크기로 내려갈 때, 이런 식으로 당신은 사이트 변경, 그들은 최고의 화면 부동산을 사용하는 것을 볼 수 있습니다 또는이보기의 화면 크기 이 사람들은 커다란 변화라는 것을 알 수 있습니다 이것들은 나란히 있습니다 그러나 데스크톱에있을 때는 연속 2 개가 아닌 연속 4 개가 있습니다 그리고 모바일로 내려 가면 다시 바뀝니다

큰 변화는 모바일에서 내가 그 큰 이미지를 상단에 결정했습니다 저기있는 웃고있는 잘 생긴 남자가 사라진다 그는 모바일에서 유용하지 않습니다

화면이 많이 떨어졌습니다 그래서 저는 기본적인 것들을 이해하고 있습니다 여기서 미리보기 이미지 만 사용하면됩니다 그래서 그들은 하나의 열에 서로의 위에 겹쳐서 하지만 태블릿에서는 2로 설정되고, 바탕 화면에서는 4로 설정됩니다 그래서 그 조정, 화면 크기의 최고의 사용 반응 형 웹 디자인 (Responsive Web Design)입니다 Illustrator를 사용할 때 우리가하는 일은 그 세 가지 견해를 디자인 할 때입니다 – 그래서 스스로 또는 개발자가 빌드를 시작하면

그들은 그들이 크기를 조정하는 데 필요한 것을 알고 또는 웹 사이트가 다른 화면 크기처럼 보이게 할 수 있습니다 이제보아야 할 다음 것은 좋은 시스템입니다 이것이 사이트를 깨뜨리는 가장 일반적인 방법이기 때문입니다 무슨 일이 일어날 지, 밑에있는 12 개의 열 그리드가 있습니다 모든 웹 페이지에서 실행됩니다 그리고 그게 당신이 콘텐츠를 나누는 방법입니다 무슨 일이 일어나는가는 인쇄물이나 잡지 디자인에 있다면 매우 유사합니다 신문에 12 열 그리드가 익숙해 져서

다양한 페이지에서 일관성을 유지하는 데 도움이됩니다 웹 디자인에서도 마찬가지입니다 그것을 보는 가장 쉬운 방법은 최종 버전입니다

이것이 우리의 최종 디자인입니다 데스크톱 버전, 태블릿 버전 및 모바일이 있습니다 그리고 무슨 일이 일어나는가는 이것을 보아라 내가 가지고있는 그리드를 켜면 당신은 내가 데스크톱을 나눈 것을 볼 수 있습니다 심지어이 12 개의 기둥을 명심해야합니다

나는이 칼럼을 통해 절반을 가지지 않을 것이다 모두 12에 이릅니다 그래서이 남자는 여기에 4 명이 있습니다

그들 모두는 12를 더한다 여기 상단에 선이 있다는 것을 의미합니다 실제로 12 개에 걸쳐 있습니다

괜찮습니다 여기이 사람들은 조금 조정해야합니다 내 디자인은이 두 열을 여기에 걸쳐 있습니다 그들을 좀 더 잘 조율 해 줘야 겠어 그리고이 사람은 여기

그는 여기에 아무것도 없기 때문에 모든 것을 포괄합니다 이제 우리가 한 일을 살펴보고 태블릿을 다시 디자인 해 봅시다 이제 우리가하는 일은 12 열을 넣을 수 있습니다

하지만이 열 12 개를 여기로 눌러 주면 상상할 수 있습니다 비록 그들이 기술적으로 모두 거기에 있어도 수 백 줄의 디자인으로 약간 더 어려워집니다

모바일에 도달하면 악화되는 것을 알 수 있습니까? 그래서 내가 한 일을 볼 수 있고, 디자이너로서 당신이 할 일은 – 나는 12 모두를 필요로하지 않는다 그런 종류의 최종 조정은 나를 위해 너무 많이 필요하다 여러분은 그것을 좋아할 것입니다 여러분은 그것을 12 열로 유지할 수 있습니다, 저는 여기에 6을 넣었습니다 그리고 나는 그들을 균등하게 나눠 썼다

이 하나는 3에 걸쳐 있으며 그 중 하나는 3에 걸쳐 있습니다 여전히 12로 나눌 수 있습니다 범위를 볼 수 있습니다 그것의 절반은 6이 될 것이고 그것은 6이 될 것입니다 그래서 우리는 여전히 12 열 그리드를 사용하고 있습니다 그러나 시각적으로 볼 때 너무 많은 것을 보는 것은 너무 어렵습니다

우리가 여기에서 결정한 것은 가이드를 끄겠습니까 그것이 태블릿 기기에있을 때처럼 보이기를 원하는 방식입니다 모바일로 내려 가면 다시 변경하고 싶습니다 우리는 이것을 꽤 바꿨습니다 내비게이션이 여기로 바뀌 었어 우리는 전체적으로 꽤 많이 사용했습니다 우리는 전체 너비를 사용했습니다 전체 12 열입니다

가이드를 다시 켜 겠어 모바일에서 작업 할 때 종종 2 열만 처리합니다 그쪽에는 6 명이 있고 그쪽에는 6 명이 있습니다 난 그냥 2를 사용하여 좀 더 쉽게 만들 수 있습니다 거기에 모두 12 개를 넣을 수 있습니다

그것이 그리드 시스템이며, 그것이 어떻게 반대편에있는 웹 디자이너가 콘텐츠를 나눕니다 중간을 나눌 수 없기 때문에 13을 할 수 없습니다

홀수이기 때문에 숫자도 대부분 12 열입니다 그래서 다음 비디오에서 살펴 봅시다

이 열을 만들어서 디자인 할 수있는 방법 그게 얼마나 좋은가요? 더 원한다면 bringyourownlaptopcom을 확인하십시오

또는 설명의 링크를 확인하십시오

The Grid | AI Websites That Design Themselves

귀하의 웹 사이트는 귀하의 인터넷 코너입니다 집에 전화 할 수있는 곳

당신을 위해 비즈니스, 포트폴리오, 취미 당신이 원하는 것을 말하기위한 자신 만의 공간 웹 사이트를 만드는 방법은 많습니다 그러나 템플릿은 당신을위한 것이 아닙니다 페이스 북 페이지는 당신을위한 것이 아닙니다

귀하의 사이트는 귀하가 누구인지를 반영해야합니다 그리고 그 일을 잘해야합니다 물론, 당신은 자신을 만들 수 있습니다 그러나 설계, 개발, 드래그 및 드롭 – 이러한 모두 풀 타임 직업입니다 네가 걱정하는 것을 할 수 있다면 더 좋지 않을까? 그 다른 모든 것들을 단지

일어날 수 있을까요? 웹 사이트가 방금 만든다면 더 좋지 않겠습니까? 이제 그들은 그렇게합니다 그것은 그리드라고 불립니다 템플릿이 없습니다

코딩이 없습니다 벽으로 둘러싸인 정원 없음 The Grid에게 원하는대로 인공 지능을 사용하여 콘텐츠에 맞는 맞춤형 홈을 만들 수 있습니다 전문가가 보이기 위해 사이트가 필요하십니까? 끝난 아니면 좀 더 캐주얼 해 보일까? 쉬운

그리드에게 당신이 원하는 것을 알려주십시오 더 많은 고객, 더 많은 추종자, 매출 증가? 선택을하면 사이트가 그 목적에 맞게 최적화됩니다 더 많은 콘텐츠가 필요하십니까? 한 번의 클릭으로 웹 어디에서나 무엇이든 캡처하고 게시 할 수 있습니다 그리고 여기에 더 많은 것을 추가함에 따라 귀하의 사이트가 진화 할 것입니다 레이아웃은 다음에 맞게 조정됩니다

귀하의 콘텐츠 최대 효과를 위해 이미지가 잘리고 색상이 보정됩니다 디자인은 다음으로 조정됩니다 모든 브라우저와 모든 기기에서 잘 어울립니다 자동으로

그것만큼 쉽습니다 사실 그것은 엄청나게 복잡합니다 그러나 그리드는 그렇게 생각합니다 당신은 필요가 없습니다 그리고 우리 각자가 우리 자신 만의 웹 코너, 우리 고유의 공간을 가지고있을 때

그것이 더 아름다운 인터넷의 시작입니다 내용은 힘입니다 The Grid에서 컨텐츠를 강화하십시오