Designing a website – Episode 1: Planning & site map!

– 안녕하세요 새로운 시리즈에 오신 것을 환영합니다

내 YouTube 채널에서 이 시리즈는 저의 과정을 문서화하게 될 것입니다 재 설계, 내 웹 사이트 재 구축 시작하자마자 매우 끝납니다 원래 하나의 비디오에서이 모든 작업을 수행 할 생각이었습니다 마치 내가 그것을 어떻게 만들 었는지에 대한 개요처럼, 결국, 결국 그렇게되었을 때, 할 수있을 것 같아

길을 따라 내 과정을 더 보여줘 내가이 비디오를 좋아할만한 덩어리로 만들고 있다면 프로세스의 각 부분 너는 더 깊이 볼 수있을거야 어떻게 일하는지, 그리고 그래, 그 이상을 얻으십시오 배후에, 그리고 더 많은 학습이 이루어지기를 바랍니다

뿐만 아니라 나는 그것이 당신에게 좋은 소리가되기를 바랍니다 시리즈의 첫 번째 동영상 인 오늘의 비디오에서, 우리는 계획 단계에 뛰어들 것입니다 사이트 맵 계획, 어떤 페이지 계획 나는 디자인 할 필요가있다 이것은 과정에서 정말로 중요한 부분입니다

프로세스의 가장 재미있는 부분이 아닐 수도 있습니다 네가 픽셀을 정렬 할 때가 아니야 멋진 디자인을하고 있습니다 많은 사고와 계획이 필요합니다 그것을 사전에

그 단계에 도달하기 전에 나는 그것이 중요하다고 생각한다 당신이보기에 중요한, 그래서, 나는 흥분 해요 오늘 당신과 함께 계획하십시오 나는 내 iPad를 가지고 있고, Apple Pencil을 가지고 있으며, 가자 먼저, 현재 웹 사이트를 살펴 보겠습니다

그대로 서 있나? 그래서 이것은 다시 설계되었습니다 2014 년이나 2015 년이면 기억이 안 나지만 나는 그것이 얼마 전 이었다는 것을 알고있다 과 따라서 디자인을 업데이트해야합니다

그 이후로 브랜드를 변경했습니다 이 웹 사이트는 실제로 더 이상 내 필요에 잘 들어 맞습니까? 그것은 내가 웹 사이트에서 필요로하는 것에 실제로 맞지 않습니까? 나는 꽤 정기적으로 블로그에 글을 쓰곤했지만, 내 옛날 웹 사이트에 지난 1 년 정도 지나지 않았지만 그 전에는 그렇지 않았습니다 나는 내가 가지 않을 것이라고 결정했습니다 이 블로그를 내 새 웹 사이트로 이식합니다

그건 그렇고, 나는 웹 플로우 (Webflow)에서 구축 할 것입니다 웹 사이트를 구축하는 것은 시각적 인 방법이라고 생각합니다 그래서 실제로 할 필요가 없습니다 그것을 처음부터 코드하는 법을 알아라 웹 플로우에서 만들 수 있습니다

그리고 그들은 정말 훌륭한 CMS를 가지고 있습니다 정말 강력 해 보입니다 그래서, 나는 그것을 시험해보고있어 기쁩니다 내 현재 웹 사이트는 WordPress에 내장되어 있으며 네가 할 수있는 모든 일을 WordPress는 Webflow에 게시하지만, 나는 방금 신경 쓰지 않기로 결정했습니다 나는 그 사람들을 과거에 남겨 둘거야

내가 전송할 수있는 몇 가지 게시물이 있습니다 내 새 블로그에 내가 할거야, 내가 들어갈거야 두 번째지만, 그래 대부분이 사이트는 완전히 개편되었습니다 내 새 사이트가 좀 더 유연 해지기를 바랍니다

나는 그것을 몇 가지 더 해보고 싶다 제일 먼저 내 콘텐츠 허브가되기를 바랍니다 이것은 이전 아이디어에 대한 제 아이디어였습니다 그러나 그것은 실제로 그런식이 아닙니다 대부분 블로그 게시물이었고 홈 페이지의 최신 링크 거기에 내 동영상을 올릴 수 있기를 원합니다

거기의 podcasts, 거기의 blog posts, 모두 함께 검색 할 수 있으므로 특정 주제에 대해 배우고 싶다 나는 그것을위한 페이지를 가질 수있을 것이다 이 비디오,이 블로그 게시물, 오,이 팟 캐스트 당신이 주제에 대해 들어야 만합니다 그래, 첫 번째 일은 모든 콘텐츠를 가져 오는 것입니다 함께하면 지금 당장은 분리되어 있습니다

두 번째 것은 분명히 디자이너이기 때문에, 내 웹 사이트에 내 포트폴리오가 있어야합니다 그리고 내가 갖고 싶은 디자인 작품 일뿐 만 아니라 새로운 포트폴리오, 나는 또한 갖고 싶다 화자의 페이지처럼 내 연설 및 워크샵 노력의 포트폴리오처럼 더 많은 것을 시도하고 끌어 들이기 나는 또한 다시 블로그를 시작할 계획이다

내가 전에 암시했던 것에 따라, 이번에 약간 다른 화제에 나는 정말로 쓰고 싶다 내 비즈니스의 뒷 배경 그래서,에 대한 게시물, 같은, LLC를 시작하는 것이 어떻습니까? 회계사와 일하고, 소득보고, 아마도, 내가 생각하고있는 것 내가 느끼는 이러한 것들은 특히 더 많은 디자인에 중점을 둔 YouTube 채널은 그러나 그들은 여전히 ​​나가고 싶은 것들입니다 그래서 나는 그들에 대해 글쓰기가 잘 맞는 것 같은 기분이 든다

그래서 그것은 나의 새로운 웹 사이트로 갈 것입니다 그리고 마지막으로, 결국 나는 가게를 가져오고 싶습니다 이 웹 사이트에 현재 내 온라인 상점은 별도의 플랫폼에 있습니다 그것은 완전히 다른 브랜드이기도합니다 그러나 미래에 나는 그것을 가져오고 싶다

한 공간에 다 가져라 그러나 나는 지금 그것에 대해 걱정하지 않을 것입니다 그래서, 우리는 단지 초점을 맞출 것입니다, 예, 내용 그리고 포트폴리오 측면의 사물들 그런 점을 염두에두고 계획을 세우십시오 그리고 내가 할 첫 번째 일은 이 페이지에 적어 두십시오, 실제로, 저는 글을 쓸 것입니다

함유량 또는 나를 고용해 왜냐하면 이것은 마음의 두 가지 프레임입니다 그들이 내 웹 사이트에 올 때 할 사람들이 무엇을 찾고 있는지, 나는 그것을 본다 그들은 콘텐츠를 찾고, 배우려고합니다 나 한테서 뭔가 달라 지거나, 어떤 것을 위해 나를 고용하는 데 관심이 있습니다

그 점을 염두에두고 계획을 세우자 사이트의 일부로 필요한 페이지는 무엇입니까? 첫 번째 것은 분명히 홈 페이지입니다 나는 내가 좋아하는 페이지를 원한다고 느낀다 콘텐츠 허브 그래서 나는 단지 내용을 쓸거야

그것은 ~ 일 것이다, 아마도 그것은 나열된 일부 범주가 될 것이며, 당신에게 제안했다 내가 가지고있는 재생 목록과 거의 비슷합니다 내 YouTube 채널에 있지만 대신에 비디오이기 때문에 블로그와 팟 캐스트도있을 것입니다 그리고 나서, 콘텐츠의 일부로서, 나는 또한 기본적으로 세 가지 템플릿 나는 갈거야

오디오, 비디오 및 서면 네가 지금 궁금해하고있을거야 심지어 내가 할 수 없을 때 내가 디자이너가 된 방법 상자를 깔끔하게 그리지 만, 헤이 그것이 작동하는 방법입니다 나는 또한 나의 포트폴리오가 필요하다

그리고 내가 갈거야 ~ 같이 개별 프로젝트 물론 템플릿을 필요로 할 것입니다 내 말하기 페이지도 여기에 추가 할 것입니다 나는 언급했다

그렇다면 기본적인 내용이있을 것입니다 마치 페이지에 관한 것입니다 아마도 연락 페이지도있을 것입니다 실제로, 접촉의 한 부분으로, 좋은 아이디어 일 것입니다 내 웹 사이트에서 내 포트폴리오에 대한 양식을 갖고 있습니다 내가 생각하는 리뷰 시리즈

지금 내 지시는 당신이 내게 이메일로 보내는 것입니다 구체적인 제목과 함께 정보, 알다시피, 내가 검토 할 수있게 그 시리즈에서 내가 YouTube에서하는 포트폴리오? 그러나 모든 사람이 올바른 제목을 사용하는 것은 아니며, 그래서 그것은 올바른 폴더에 들어 가지 않습니다 내받은 편지함에는 모든 사람이 모든 정보를 제공하지는 않습니다 나는 또한 필요합니다 그래서 저는 제 웹 사이트에 일종의 양식이 있다고 생각합니다

여기서 귀하의 세부 사항을 기입하고 제출할 수 있습니다 전체 프로세스를 훨씬 쉽게 만들어줍니다 참여한 모든 사람들에게 내 웹 사이트에서 꽤 많이 방문한 페이지 현재 인기가있는 동영상 덕분에 여기서 내 스크린 인쇄 가이드를 다운로드 할 수 있습니다 기본적으로 비디오와 양식 만 있습니다

그게 가이드가 당신에게 보낸 곳입니다 그래서 많은 사람들이 그 비디오에서 왔습니다 나는이 페이지를이 새 페이지의 일부로 생각했습니다 웹 사이트,하지만 내가 실제로하려고 생각하고있는 것 내 콘텐츠의 카테고리로 화면 인쇄를하고 있습니다 여기, 그래서 이것의 일부가 될거야? 그러면 양식이 해당 페이지에 표시됩니다

당신이 다운로드 할 수 있고, 또한 비디오와 같은 것을 볼 수 있습니다 또는 블로그 게시물 또는 내가 작성한 내용 스크린 인쇄에 대해서도 그래서, 사실,이 일환으로, 여기에 끼어 드는 것도 있습니다 어쨌든 그냥 옆에 붙일거야 카테고리 페이지처럼? 콘텐츠 페이지는 모든 콘텐츠의 집처럼, 카테고리 페이지 그 재생 목록입니다, 제 생각에는 오디오, 비디오, 서면

이 연락처 페이지에 대해서 더 생각해보십시오 나는 또한 내가 가질 것이라고 생각한다 프리랜서 양식 제출, 그래서, 니가 나에게 관심이있는 프로젝트가 있다면 너와 함께 일하면서 너는 이걸로 채울 수있어 프로젝트에 대한 정보 또한 일반 페이지 템플릿을 원합니다

나는 경품 행사가 필요할 때마다 철수 할 수 있습니다 이것은 제가하고 싶은 것입니다 로그 중간에, 때때로, 그냥 공짜를 던져라 그리고 그렇게하기 위해 나는 사람들로 하여금 양식을 채우게한다 그래서 나는 거기에서 임의로 승자를 골라 낼 수 있습니다

그래, 그래 내가 할 수있는 일반 페이지 언제든지 복제하고 새로운 공짜를 만들어라 정말 도움이 될 것입니다 내 현재 웹 사이트에서 무엇이 다른지 생각하기 내가 전복하고 싶을지도 모른다 내가 정말로 고려하지 않고있는 유일한 페이지는 여기에있다

추가하지 않으면 내 뉴스 레터 페이지입니다 그래서, 방금 페이지가 있습니다 내 뉴스 레터 가입에 대해 내가 그걸 할거라고 생각하지 않아 왜냐하면, 솔직히 말해서, 난 정규 수퍼 정규되지 않았습니다

최근에는 뉴스 레터를 보내고 나는 뉴스 레터를받는 대신에, 사람들이 가입하는 이유, 나는 대신에 각 콘텐츠 카테고리 페이지의 양식 그들이 확실한 것을 얻기 위해 거기에서 채울 수있는, 나도 몰라, PDF 옵트 인, 뭔가 또는 다른 나는 만들거야 그리고 나서 그들은 이메일을받을 수 있습니다 그 특정 주제, 일반적으로, 그리고 그들은 또한 내 목록에 추가됩니다 내가 뉴스 레터를 보내면 나는 그것이 더 좋은 방법이 될 것이라고 생각한다

전용 뉴스 레터 페이지를 갖는 것보다 나는 이것을 정말로 옮겨야한다고 생각한다 나는이 애플 리케이션에서 물건을 이동하는 방법을 모르지만, 그래서 나는 그것을 지우고 다시 쓸 것입니다 그러나 나는 집을 위의 모든 것처럼보아야한다고 생각한다 다른 것들 내 홈페이지가 모든 것의 허브가 될 것이기 때문입니다

아마 어떤 것들은 집에 연결되지 않을 것이며, 좋아, 나는 사실 그걸 경품에서 벗어날거야 하지만, 그 밖의 모든 것들은 홈 페이지 및 홈페이지에서 오는 당신을 옳은 것으로 인도하도록 설계 될 것입니다 이 두 가지 사항을 염두에두고, 특히 : 콘텐츠, 또는 나를 고용, 당신이 찾고있는 가장 중요한 것 그게 내가 처음으로 내리는 결정이야 누군가 만들어

(웃음) 누군가가 만들 때 만들어라 이 페이지로 오십시오 그것은 닮았다 이것은 콘텐츠 물건, 이것은 나를 고용 물건, 이 두 페이지는 두 가지 모두에 적합합니다 지금 이것은 많은 일처럼 보인다, 그렇지? 이처럼 많은 페이지를 디자인해야합니다

그래서, 처음부터, 압도당하는 걸 막으려 고 먼저 실제로 할거야 MVP 내 홈페이지 따라서 모든 하위 페이지가있는 것은 아닙니다 그것은 단지 여러 가지로 연결되는 홈페이지 일 것입니다 따라서 YouTube에 연결해야합니다

소셜 미디어, 나는 그곳에도 연락 형식이 없을 것이라고 생각한다 처음부터, 나는 이메일 주소, 바이오, 어쩌면 대신 전체 포트폴리오를 구축하고 거기에 내 Dribbble에 대한 링크가있다 그리고 나는 그것을 약간 업데이트 할 것입니다 왜냐하면 그건 내가 자주하지 않는 일이기도합니다 이렇게하면 사람들은 내 콘텐츠에 액세스 할 수있게되며, 그들은 저에게 연락하는 방법을 알게 될 것이며, 그들은 나에 대해 조금 배우게 될 것이다

내 작품의 비트를 참조하십시오 하지만 내가 모든 일을 끝내지 않고 이 모든 여분의 페이지를하고 있습니다 그래서 나는 내 새로운 사이트를 얻을 수 있다는 것을 의미한다 실행 및 실행 이 페이지를 디자인 할 때, 내가 할 수있을 것 같아

그것을위한 디자인 시스템을 개발하고, 브랜드와 같은 종류입니다 내 웹 사이트도 쉽게 사용할 수 있습니다 이 다른 페이지를 디자인하십시오 그리고, 일반적으로, 나는 이것이 좋은 출발이 될 것이라고 생각합니다 프로젝트에

(웃음) 이것이 내 웹 사이트에 대한 내 계획이 너무 엉망입니다 그것은 꽤 간단합니다 그러나 이것을 생각하면 정말 좋습니다 당신이 필요로하는 것보다는 시작과 끝 사이에 중도에 들어가기 알다시피, 프로젝트는 거기에서 계속 확장됩니다

특히 알아낼 수있는 부분 어떤 사람들이 귀하의 사이트를 방문하게 될지, 나는 내려 오는 것이 정말로 중요하다고 생각한다 따라서, 작업중인 웹 사이트 프로젝트가 있다면, 이 단계를 먼저 수행하는 것이 좋습니다 단지 필요한 페이지를 정확하게 파악하는 것입니다 고객과 함께 일한다면, 어쨌든이 작업을 수행하여 프로젝트를 범위 지정합니다 그리고 얼마나 많은 디자인 작업이 당신을 위해 개입 될 것인가

그러나 그것은 또한 내가 정말로 그것을 보도록 돕는다 그리고 어떤 일이 일어나고 있는지 알기 위해서, 그리고 내가 할 수있을거야 이 섹션별로 다뤄야한다고 생각합니다 어쨌든이 재미있는 것을 보시길 바랍니다 그것은 당신에게 어떤면에서 유용했습니다

그리고이 새로운 것에 대해서도 흥분하고 있습니다 일련의 내, 내 웹 사이트를 재 설계 나는 그것에 대해 매우 흥분하고있다 오랫동안 그것에 대해 이야기 해왔다 나는 그것에 대해 비디오를 만드는 것 실제로, 마침내, 나를 도울 것입니다

내가 너를 갖기 때문에 끝내라 나를 책임 져야 해 괜찮아? (낄낄 거림) 그게 지금이야 당신이 그것을 즐긴다면 엄지 손가락을 줘 지켜봐 줘서 고마워

다음번에 보자 그리고 다음 동영상은 와이어 프레임 및 가능한 설계 이 MVP 홈페이지의 그래서, 당신을 만날 것을 고대합니다 안녕

Como hacer una Pagina Mobile First y Responsive Design 26 | Layout del video

다음으로 이동 한 후 와서 우리는 그들이 트위터 및 비디오 박스 공유 페이스 북을위한 버튼, 공유 가야이 부분을 만들 것입니다 다음은이 응답 종로가 나타납니다에 표시되지 않습니다해야, 가로 스크롤 것을 볼 수 있지만이 걱정하지 마세요 나는 사실, 여기에 비디오 태그를 사용하고 있기 때문에이기 때문에이 삭제 여기 와서 당신이 더 이상 나타나지 볼 업데이트 할 경우 그러나 결국 나는 다른 코드는 그게 유튜브 준다 삽입 않을 경우 그 비디오 태그가 사용되는 것이 아니다 당신에게 그 마지막으로 사용하지 않을 나타나기 때문에 내가 여부 줄을 상관하지 않기 때문에 그래서 당신은 여기에 플레이어를 볼 수 있습니다 그래서 어디 보자, 여기에이 권리는 우리가 개발해야 할 것입니다 단순히 모두 동일 넣어 가고 있기 때문에 음이 아니라, 우선 현재 코드를 공유 모두 동일한 배경 색상을 가지고 있지만 그들이 이해하기 때문에 어이가 문제가되지 않지만 잘 하나 어떤 다른 것입니다 하지만 이렇게 코드를 저장하고,이 부분은 매우 간단하기 때문에 지금은 비디오 공유, 괜찮아요을 공유하러 온 난 그냥 아니라, 오히려 내가 그렇게 할 것입니다, 여기에서 복사합니다

그리고 여기에 공유 수준의 비디오에서 난 단지 위치를 제공합니다 : 상대를 나는 그것이 내가하고 측면에 10px 아무것도 아래로 넣어 것 100 % 폭과 여백을 차지 말할 것이다, 지금 그래서 나는 이러한이 아무것도하지 않는 것입니다 만약 내가 코스를 할당 할 필요가 고정 된 높이로 볼 흰색으로 배경 여기를 넣어 경우 의 헤이, 250 픽셀을 상상하자! 아니, 많이 될 것 그래서 음이 나는이에 600PX을주지 헤더가 더 당신을 줄 것입니다 사실 헤더 나는 이미 만 수용 할 수 있기 때문에 제거하는거야

내가 좋아,이 공유의 일부가 될 것입니다, 잘 넣어 지금은 여기 와서 다음을 수행, 우리는 각각의 버튼을 놓을 게요, 그래서 나는 이것을 복사하여 여기에 나는 주 비디오 쓰기 페이스 북 버튼, 두 가지를 될 것입니다 내가 잘 걸었습니다와 트위터가 동일한 특성을 갖는 것, 그들은 폭을 모두 차지합니다 (100) 그래서 폭이 100 %가 될 것이고, 픽셀 (10)의 상하에 의해 서로 분리 될 넣어 배경이 파란색과 높이를 착용하는 것입니다, 당신은 100 픽셀 각각의 높이를 넣을 수 있습니다 업데이트를 여기가 나는 두 개의 막대가 이봐! 용서 만 100 픽셀 위아래로 내가 총 100 말했듯이 내가 떠날 이유가입니다 그러나 잘, 아마 (100)는 많은 수 있습니다 내가, 내가 좋아하는 경우에, 조금 더 합리적이라고, 잘, 60, 60 (120)보다 여백을 60 놓을 게요, 내가 넣어거야

물론, 이것과는 사실에 맞게 제거합니다 이봐, 왜 그녀는 간다? 우리는 여기에 (150)의 높이를 넣어 것입니다 저장, 보관하지 않습니다 그렇지 않은 경우, 음, 그 crazy'm는 한 나는 그것을 제거하기 위해 계속 당신을 당신이 무엇을하고 있는지 볼 수 있지만 싶은 호기심이있다 여기에 버튼이 이제 동영상 플레이어를 누락, 그래서 내용 비디오 것을 여기에 넣어 보자 이 내용 요소의 비디오는 여기에, 우리는 폭 100 %, 너비의 100 %를 차지주고 더 마진이없는 것 단지 위로 및 측면에 20 픽셀 0 아래로, 높이가 300 픽셀 예에 의한 할당합니다 그리고 우리는 배경을 넣을 예정 눈에 띄는 아니라 그 동영상입니다로서 배경이 그렇게 녹색 넣어 것입니다

죄송합니다, 여기에 비디오 거기에, 음, 다음이 그 것이다 지금, 응답 버전에서 내가 원하는 것은 다음 물론 서로이 두 개의 버튼을 배치하는 것입니다 이것이 가능하기 그때 디스플레이 인라인 블록과 수직 정렬 여기에 놓을 게요 나는 상단에 넣어 갈거야 지금은 여기에 와서 내가이 복사거야 미안, 나는이 두 가지 요소를 참조 할 필요 해요 무엇을 말해주지 내가 지금 여기 와서 나는이, 나는 이 그가 그렇게 추한 왜 그 열쇠를 닫습니다 것은 여기에서 말하는거야 말할 것이다, 나는 키를 닫습니다 나는 각각의 폭은 45 %가 될 것이라고합니다

다음은 업데이트 여기 저기 상승이 45 %를 가지고 있지만, 어떻게됩니까? 나는 중간에 여기에 공간을 유지하려고합니다 그래서 내가 무엇을 할 거 야하는 것은 이것이다 나는 여백 말할 것입니다 버튼 페이스 북 아래 왼쪽 10px의 0 픽셀에, 4 % ~ 4 %의 권리를 통해, 10 픽셀 이상입니다 그리고 지금 버튼 트위터 나는 같은 말을 하지만 공은 오른쪽에,이 측면에있을 것입니다, 그래서 완전히 붙어 권리 이동의 차이 0과 그리고 여기 왼쪽에 4 %를 줄 것이다 내가 업그레이드 할 때, 나는 그것을있다

글쎄, 나는 내가 좋아 좋아 좋아 사실, 나는 그것이 작동하지 않을 것입니다 알고 나는 그것이 작동하지 않습니다 생각, 내가 나쁜거야 난 5 %를주고 여기에 시도 할 것이다 그러나 당신이 머물 경우가 4 % 좋은보다 아직 설정합니다

그 때문에 확인 음, 즉, 모든 여러분의 비디오 부분에서 이미 반응이다 그리고 이제 코스 타이틀 정보의이 섹션, 이전, 다음 등 연습을 유지하기 위해 다시 이리와 여기에서 왼쪽으로

Deconstructing a Flexbox Layout Quiz – Responsive Web Design Fundamentals

여기 또 다른 도전이 있습니다 표시되는 레이아웃은 Flexbox를 사용하여 만듭니다

화면에 표시되는 모든 다른 색상 요소의 경우, 프레젠테이션 작성 이 레이아웃을 만드는 데 필요한 요소를 정렬합니다 나는 당신에게 첫 번째 요소를 보여줄 것이다 밝은 녹색 상자를 가린다 위는 뷰 윈도우의 전체 너비이므로 100 % 보이게됩니다 이것은 일반적인 것으로 보일 수 있습니다

탐색 막대는 페이지 상단에 나타납니다 그래서 저는 그것을 0으로 분류 할 것입니다 이제 계속하고 나머지는 채워야합니다

Create beautiful Web Design layout – Website Coming soon page – Photoshop Web Design

Photoshop 자습서는 웹 사이트 레이아웃을 디자인합니다 Photoshop에서 곧 제공 될 웹 사이트 레이아웃을 만드는 법을 배우고 있습니다 당신은 곧 나오는 웹 사이트를 디자인하는 것을 배우고 있습니다

Beginning Graphic Design: Layout & Composition

"레이아웃과 구도" 자막 어떤 면에서 그들은 디자인의 기초입니다 그들은 당신의 작업을 구조화하고, 가장자리의 여백부터 그 안의 내용까지 탐색하기 쉽게 만들어줍니다

당연하게도, 글을 다루는 것만을 의미하는 게 아닙니다 구도는 그래픽 디자인이나 웹디자인, 그밖의 다른 매체에서도 중요한 역할을 합니다 잘 짜여진 레이아웃이 없다면, 당신의 작품은 기본적으로무너질 것입니다 레이아웃과 구도를 잘하기 위한 열쇠는, 디자이너처럼 생각하는 것입니다 다행이도, 듣기보다 쉽답니다 여기 다섯 가지 기본 원칙이 있습니다 이들은 당신의 작품을 탈바꿈시키고, 디자인에 관해 예리한 시각을 갖도록 도와줄 것입니다

가장 위에서부터 하나씩 살펴보죠 근접성이란, 내용 안에서의 관계를 보여주기 위해 활용하는 시각적 공간에 관한 것입니다 실제로 해보면 꽤나 간단합니다 관련된 요소들이 함께 묶여있는지만 확인하면 됩니다 예를 들어, 텍스트의 블록이나 그래픽 안의 요소들처럼요

서로 관련이 없는 그룹은 분리됨으로써 그들의 관련성 부족을 시각적으로 강조할 수 있습니다 대체로, 근접성은 당신의 작품을 한눈에 이해할 수 있게 만듭니다 텍스트로만 이루어졌거나, 더 시각적인 디자인이어도 상관없습니다 여백은 모든 구성에서 아주 중요한 부분입니다 한편, 여백은 말그대로 '빈 공간' 만을 의미하지는 않습니다

여백은 내용들 사이, 줄 사이, 그리고 바깥쪽의 여유부분 같은 공간만을 가리킵니다 여백을 올바르게 활용하는 '정석' 은 없지만, 목적을 이해하는 것은 중요합니다 여백은 서로 다른 부분을 정의하고 분리하는 것을 돕습니다 당신의 콘텐츠가 숨 쉴 공간을 주는거죠 만약 당신의 작품이 어수선하고 불편하게 보이는 것 같다면, 약간의 여백을 활용하는 것이 적절한 처방이 될 수 있습니다

정렬은 당신이 인식하지 못할 때에도 항상 처리하고 있는 것입니다 이메일을 쓰거나 문서를 작성할 때마다, 텍스트가 자동으로 정렬됩니다 직접 대상을 정렬할 때는, (이미지나 대화상자 등) 제대로 하기 조금 어려울 수 있습니다 핵심은 일관성입니다 무슨 뜻인지 함께 알아보죠

당신의 콘텐츠가 격자 안에 배열되어있다고 생각하면 쉽습니다 보이지 않는 선이 각각의 이미지와 텍스트를 중앙에 정렬하고 있는 걸 알아차리셨나요? 각 그룹은 또한 동일한 간격과 같은 크기의 여백을 두고 정렬되어있습니다 바로 이런 디테일에 주목함으로써, 구도의 방향성을 쉽게 잡을 수 있습니다 일관된 정렬이 없다면, 당신의 작품은 체계적이지 못하다고 보여질 것입니다 대비는 간단히 말해서 요소들 간의 차이입니다

레이아웃과 구도에서 대비는 여러가지 일에 도움이 됩니다 예를 들어, 독자의 시선을 끌고, 강조를 보여주고, 무언가 중요한 것에 주목하도록 만들 수 있습니다 대비를 만드는 전략은 매우 많습니다 색을 활용하거나, 크기, 형태 혹은 물체의 시각적 무게감을 조정할 수 있습니다 혹은 대비되는 스타일의 글을 활용할 수 있습니다

대비는 위계와도 밀접한 관계가 있습니다 위계는 독자가 당신의 작품 속 방향성을 알려주는 시각적 기술입니다 다시 말해서, 위계는 서로 다른 단계의 강조를 통해 그들에게 어디서 시작해서, 어디로 가야하는지를 알려줍니다 위계를 설정하는 법은 간단합니다 먼저 독자가 주목했으면 하는 요소를 결정하고, 그들이 눈에 띄도록 만드세요

높은 단계에 있거나 중요한 요소는 주로 더 크고, 더 선명하고, 어떤 방식으로든 눈길을 끌게 됩니다 반복은 모든 작품이 일관된 모습과 느낌을 가져야함을 상기시켜 주는 도구입니다 즉, 특정 요소를 반복함으로써 당신의 디자인을 개선할 방법을 찾는 것입니다 만약 당신이 특정한 색팔레트를 가지고 있다면, 그것을 온전히 활용할 방법을 찾아보세요 특정한 스타일의 머리말을 선택했다면, 매번 그 스타일로 쓰세요

미적인 이유때문만은 아닙니다 일관성을 지니는 것은 당신의 작품을 더 읽기 쉽게 만들어줍니다 앞으로 보게 될 것을 예측할 수 있을 때, 독자는 편안하게 느끼고 콘텐츠에 집중하게 됩니다 어떻게 말하면 레이아웃과 구도는 디자인의 숨은 영웅들입니다 그들의 역할은 간과하기 쉽지만 당신이 하는 모든 일의 일부분입니다

여길 조금 밀고저길 조금 띄우고 그러면, 어떤가요! 디테일에 조금 집중하는 것만으로도, 아름답고 전문적인 구도를 만들어낼 수 있습니다 레이아웃과 구도의 기초에 함께해주셔서 감사합니다 타이포그래피, 색깔, 그리고 이미지와 같은 다른 디자인 주제들도 확인해보세요!

How to design a CREATIVE web layout | Illustrator Tutorial | Design 8

시작 전 연구 아이디어 Google 이미지로 분위기 보드 수집, 레이아웃 웹 사이트에 대한 영감을 불러 일으 킵니다 그라디언트 도구의 몇 가지 팁 그라디언트 도구의 불투명도 알림 그라디언트 도구 최적화 디자인에 대한 체계 색상 수집 첫 번째 추상적 배경 만들기 펜 툴로 로켓에서 구름 (연기) 만들기 시작 색칠 공부

atention this를 지불하십시오!

5 Cool Web Design Layout You Shouldn’t Miss

꽤 인기있는 첫 번째 레이아웃은 시차입니다 스크롤링

현재이 레이아웃을 사용하는 많은 웹 사이트에서 인정해야합니다 그것 실제로 사이트를 스크롤하는 좋은 느낌을줍니다 하지만 내가 갈 일은 오늘 시경 스크롤이 아니라는 것을 보여줍니다 그것보다 조금 더 parallaxjs에 오신 것을 환영합니다! 보시다시피 마우스 움직임을 감지하고 이에 따라 요소를 스크롤합니다

또한 모바일 사용자 인 경우 parallaxjs가 기기를 감지합니다 정위 기기를 기울이면 요소가 스크롤됩니다 데스크톱 컴퓨터에서 마우스를 움직입니다

그래서 이것은 당신은 당신이 당신의 웹 사이트를 위해 새로운 것을 만들 것인지를 찾고 있습니다 이미 많은 사이트에서 보았을지도 모르는 또 다른 하나는 그리드입니다 또는 벽돌 레이아웃 그러면 자동으로 이미지가 눈금으로 조정됩니다 자바 스크립트 그리드 레이아웃 라이브러리가 있기 때문에 많은 코드가 망가질 염려가 없습니다

유효한 그리고 제가 여기서 제안하고있는 것은 석공 술입니다 시작할 수있는 문서와 빠른 자습서가 있습니다 공식 웹 사이트를 확인하고 문서를 다운로드하거나 기둥 또 다른 흥미로운 레이아웃은 사용자가 귀하의 사이트를 스크롤하면 내용이 동적으로 나타나거나 "게으른 로드 "하지만 귀하의 레이아웃을 최대한 활용하고 귀하의 사이클을 재미있게 만들 생각 어떤 종류의 스크롤 애니메이션과이를위한 플러그인이 필요합니다 나는 "Super scroll orama"를 추천합니다

이 플러그인은이 작업을위한 플러그인으로, 페이드 (fade), 플라이 (fly) 및 스핀 (spin)과 같은 다양한 종류의 효과로 더욱 흥미 진진하게 스크롤 할 수 있습니다 네 이름은 뭐든간에 이전 레이아웃과 비슷한 또 다른 하나는 전체 페이지입니다 미니멀리스트 디자인 중에서 인기있는 수직 레이아웃 이렇게하면 간단하고 깔끔한 디자인과 사용자가 내용을 섹션으로 분리합니다

나는 작은 예를 발견했다 빠른 코딩으로 홈페이지를 가동시킬 수있는 코드 재미 있으십시오! 내 생각에 가장 인상적인 레이아웃입니다 귀하의 페이지를 가로로 여러 개의 열 많은 내용을 가지고 있다면 매우 적합합니다 그것을 스크롤 가능한 열로 분리하려고합니다

탐색 할 수도 있습니다 사이드 바 링크를 통해 좋아하는 섹션으로 이동하십시오 그럼 그게 다야 동영상을 통해 내 생각을 알려주세요 구독을 잊지 마세요

더 흥미로운 비디오! 고마워요