1-12 Web Design Trend

이번 시간에는 웹디자인 트렌드 7가지에 대해서 알아보도록 하겠습니다 첫번째로 작년에 이어서 계속해서 백그라운드로 고화질 이미지 또는 비디오를 삽입하는 것입니다 이미지나 동영상을 화면에 가득 채워서 보여주는 기법인데요 사이트에 접속하자 마자 방문자에 시선을 한눈에 사로잡기 때문에 여전히 많이 사용되고 있습니다

작년과 다른 점이 있다면 일반 고화질 이미지보다는 직접 그린 일러스트를 삽입하는 것입니다 또는 정적인 이미지보다 동영상이 훨씬 효과적이다 그러나 사례를 한번 보도록 하겠습니다 여기 보시면 고화질 이미지를 사용을 해서 지금 로딩되는데 약간의 시간이 걸린 것을 확인할 수가 있습니다 이렇게 고화질 이미지를 사용을 하고 있고요 이번에는 동영상이 탑재된 메인 패널 슬라이드를 보실 수가 있는데요 정적인 이미지보다는 동적인 이미지가 훨신 더 집중시키는 힘을 가지고 있는 것을 확인을 하실수가 있습니다 2번째로 단색과 인터랙션을 가진 대비색을 사용하는 것입니다 해당 사이트의 메인 컬러나 컨샙 컬러를 일관된 색으로 전채를 유지시키고 사용자의 유도가 필요한 부분에는 대비되는 색으로 집중시킵니다 여기 사례를 보시면 이렇게 푸른 계통의 한 컬러로 전체적으로 통일을 시키고 부분적으로는 흰색으로 포인트를 주고 있어서 사이트가 전체적으로 선명한 느낌이 들도록 하고 있습니다 세번째로는 카드레이아웃 디자인입니다 작년에 이어서 올해도 여전히 카드레이아웃이 유행할것이고 대표적인 사이트로는 pinterest가 있습니다 카드 형태에 장점으로는 배치와 재배치 간의 작업이 수월하기 때문에 반응형 웹사이트 제작 시 아주 유용하게 사용이 되고 있고요 그리고 정보의 양에 따라서 크기 조절이 아주 쉽고 사용자들이 더욱 빨리 볼 수 있기 때문에 클릭을 유도하는 장점을 가지고 있습니다 사례로 이렇게 pinterest를 보실텐데요 pinterest는 홈페이지 전체가 카드레이아웃 상태로 되어있고 카드에 담고있는 이 정보에 양에 따라서 자유롭게 지금 배치를 시키고 있습니다 다른 사례를 보시면 네 이렇게 마찬가지로 홈페이지 전체가 카드레이아웃 되어 있지만 pinterest와는 달리 일정한 그리드 간격을 유지하고 있습니다 네번째로 플렛 디자인 아이콘에 변화입니다 아이콘는 테스트가 아닌 간단한 인포 그래픽으로 정보를 전달하는 데 훨씬 효과적이기 때문에 자주 사용을 하는데요 작년에는 면으로 색이 꽉찬 형태였다면은 요즘 최근에는 라인형태로 심플한 스타일로 바뀌고 있습니다 홈페이지에서도 버튼들을 한번 보시면 면으로 되어있던 버튼들이이 선으로 지금 많이 바뀌고 있는 추세에 있구요 이렇게 아이콘을 다운로드 받을 수 있는 사이트에도 보시면 메인에 노출된 아이콘들을 확인을 해보시면 이런 형태로 면으로 찾는 아이콘들 보다는 선으로 더 간단하고 심플한 아이콘들을 많이 노출시키고 있는 것은 확인을 하실수가 있습니다 다섯 번째로는 시네마그레프인데요 영화와 사진의 합성어로 사진에서 부분만 움직이는 효과를 말합니다 sns에서 움짤 등에 그런 콘텐츠 변화로 나타나는 트렌드 중에 하나이고요 이미지보다는 몰입도가 훨씬 높기 때문에 주목성이 높은 큰 장점을 가지고 있습니다 사례를 한번 보시면 이렇게 정적인 이미지에서 특정 부분만 이렇게 동적인 효과를 주고 있는 것을 확인을 한 실수가 있습니다 여섯 번째로는 롱스크롤입니다 모바일 환경이 계속 발전함에 따라서 수직적인 흐름에 디자인인 롱스크롤도 계속해서 트렌드가 되고 있는데요 컨텐츠가 많다면 무리일수도 있겠지만 한 페이지 안에서 모든 색션을 담아서 스토리텔링 컨셉을 만들 수가 있습니다 섹션을 명확하게 구분짓지 않고 자연스런 흐름으로 이야기했듯이 진행하는 방식으로도 컨텐츠를 풀어나갈 수가 있는데요 그 사례로 요즘에는 롱스크롤 페이지가 많기 때문에 많은 페이지에서 보실 수가 있으실텐데요 이런 식으로 페이지를 내릴 수록 어떤 흐름을 가지고 있고 콘텐츠들이 이렇게 점점 나타나는 형태로 홈페이지에 컨셉을 끌고 가고 있는 것을 확인 하실수가 있습니다 마지막 일곱 번째로 리치 애니메이션입니다 플렛디자인이 생기면서 필연적으로 생긴 애니메이션 효과는 깔끔함과 동시에 약간 재미없는 플렛 디자인에 단점을 보완하기 좋은 효과입니다 정적인 홈페이지에서 생기를 불어넣는 듯한 그런 느낌을 주는데요 팝업 알림 효과나 패럴랙스의 스크롤링 그리고 오버효과 등이 있습니다 하지만 너무 많은 효과를 넣어버리면은 사용자에 흐름을 방해를 할 수가 있기 때문에 적당히 사용을 하시는게 좋습니다 사례를 한번 보도록 하곘습니다 이렇게 보시면 호버했을 때 이렇게 컬러가 바뀌면서 택스트가 위로 살짝 올라오는 이런 효과를 주고있고요 다른 사례로는 이렇게 스크롤을 내리면 내리는 그 시점에 따라서 부분적으로 이 텍스트와 콘텐츠들이 나타나는 효과를 주고 있습니다 지금 보신것처럼 방금 앞부분에 로딩 효과를 주고있고 또 로딩 효과가 끝나고 나면은 동영상과 동시에 기본 콘텐츠가 나타나고 있는데 다 동적인 이미지를 나타내고 있습니다 디자인 트렌드는 흐름이 굉장히 빠르기 때문에 한상 트렌드를 읽기 위해서는 사례를 많이 보는 것이 가장 중요합니다 외국 사이트나 국내 사이트들 중에서도 디자인이 잘 된 페이지들을 모아둔 그런 사이트들이 많아서 참고를 하시면 좋을 것 같습니까

Diseño Web 20 – Tipografía

디자인 부분에 다음 요소는 글꼴 유형, 즉 글꼴입니다 내 조언이 방법으로, 때마다 새 작업을 입력, 입력 체계의 서로 다른 스타일로, PC에 다운로드 한 이미지의 은행을 가지고있다 웹 페이지를 만들고, 가지고, 더 많거나 적은 특정 다운로드 한 글꼴의 팬 유형의 유형, 그것은 당신이 모든 스타일의 매우 중요합니다

각 페이지는 타겟 고객 및 회사를 전달하고자하는 이미지에 따라 다른 소스가 필요합니다 예를 들어, 경우 클라이언트가 심각 프로젝트를 전달하고자하는 경우 회사는 골을 원한다; 당신이 심각한 소스를 넣어 가지고 있기 때문에 당신이 만화 산세 MS를 넣어가는 것이 아니다, 당신은 아마도 이러한 곡선과 둥근 마무리, 스타일이있는 서체를 넣어 가지고 있기 때문에 예를 들어, 세련된 옷을 저장하기 위해, 그러나 그것은 읽을; 그것은뿐만 포쉬로 진부하거나 소스가 말하는 것을 이해하지 일이 아니다 예, 예를 들어, 페이지 인 청소년 프로젝​​트 것을 현대 편지로 뭔가 청소년, 그래서, 거기 당신은 설정 한 당신은 셀틱 문자로, 아일랜드의 줄에 페이지를 만들려고하는 경우 문제는 당신이 회사는 클라이언트가 투영하고자하는 소스가 더 맞는 것으로 전망하고 싶어 볼 필요가 있다는 것입니다

제목 잘 띄는 주요 것에 매우 큰 문자를 넣어 기억; 정상 크기 당신이보고 싶은 것을 넣어하지 않습니다, 당신은 강조하고 대담한해야합니다 그리고 그 일이 당신은 그들이 가장자리에 붙어 넣지 마십시오, 더 눈에 띄는 싶지만에 매우 큰 영역이있을 것이다 그 빈의 주위에, 그래서 그는 시력을 갈 것입니다 난 당신이 모든 소스가 거기 형식으로 변환 웹, 즉, "TTF", "EOT", "WOFF", "SVG"한에서 당신을 확보, 기억; 에 확인 그들은 모든 형식입니다 어쩌면 당신은 이미이 있기 때문에 동영상 설명에 나는, 형식의 소스 남아있다, 당신은 변환 할 수있는 곳을 링크 드리겠습니다 소스는 당신이 알 수 있도록 다음 나는 당신에게 링크를 드리겠습니다, 배출하지만, 다른 확장을 갖고 싶어 당신이이 이미지를 다운로드 할 수있는 알고 싶은 경우에, 잘, 구글 글꼴은 많은있다; 하지만이 이미지 은행과 더 많은 페이지가 있고 당신을 나는 동영상 설명에 링크를 떠날거야

우리는 글꼴을 본 적이 한 번 음, 우리는 애니메이션을 볼 수 있습니다; 이는 다음의 요소입니다

Sketch Web Design Course: E-commerce Checkout Page Design Part 2 of 2

저는 Skillthrive의 Hunter이고 두 부분으로 구성된 Sketch 과정의 두 번째 수업에 오신 것을 환영합니다 이번 강의에서는 체크 아웃 디자인 개념의 장바구니 섹션을 만드는 방법을 알려 드리겠습니다

또한 아직 작성하지 않았다면 다음과 같이 최종 Sketch 파일을 다운로드하십시오 Skillthrivecom의 무료 회원 설명에 참여할 수있는 링크가 있습니다 시작하려면 'T'를 눌러 텍스트 레이어를 만들고 '장바구니'를 입력하십시오

이 텍스트가 수업 1에서 만든이 텍스트 스타일로 설정되어 있는지 확인하겠습니다 텍스트 레이어를 왼쪽에서 95 픽셀, 위쪽에서 110 픽셀 이동합니다 하단은 오른쪽에있는 'Card Details (카드 세부 정보)'레이어의 하단에 맞춰져 있습니다 타원형 도구에 액세스하려면 'O'를 누르고 만들려면 드래그하는 동안 Shift 키를 누릅니다 150 픽셀의 원입니다

나는 경계를 끈 다음 무료 코스 파일로 돌아가서 하나를 드래그합니다 포함 된 시계 이미지의 여기에 와서 높이를 150 픽셀로 조정하고 원 위에 이미지를 맞 춥니 다 두 레이어를 모두 선택하고 마스크를 만듭니다 이 새 그룹의 이름을 '시청'이라고하겠습니다 위의 텍스트 레이어에서 그룹을 80 픽셀 이동합니다

텍스트 도구로 돌아가서 'Trendy Bamboo'를 제품 이름으로 입력하겠습니다 텍스트를 선택하고이 텍스트 스타일을 선택합니다 텍스트 레이어의 중심을 이미지 위에 놓고 65 픽셀 떨어진 곳으로 옮깁니다 레이어를 선택하고 Option 키를 누른 상태에서 드래그하여 복제합니다 텍스트를 선택하고 'Large'를 입력하여 시계 크기를 나타냅니다

그러면 텍스트를 다시 선택하고 가중치를 중간, 크기를 15, 문자 간격은 05입니다 또한이 텍스트 스타일을 저장 한 다음 레이어가 레이어의 맨 위가 제목의 맨 아래에 닿아 있다고 가정합니다 이제 수량 선택기로 이동합니다 먼저 가로 9 픽셀, 세로 3 픽셀의 사각형을 만듭니다

국경을 끄고 채우기가 순수한 흰색인지 확인하겠습니다 이 사각형의 이름을 '마이너스'로 지정하겠습니다 나는 사각형을 복제하여 11 픽셀 너비로 만들 것입니다 이 직사각형을 복제하여 여기에 올리면 90도 회전합니다 그런 다음 두 직사각형을 모두 선택하고 'Union'을 클릭하여 도형을 결합합니다

나는이 새로운 모양을 '플러스'라고 부를 것이다 'U'를 치면 둥근 사각형 도구로 바뀌고 둥근 사각형을 만들겠습니다 가로 60 픽셀, 세로 40 픽셀입니다 채우기를 해제하고 테두리 색상을 순수한 흰색, 두께를 1, 반지름을 8로 설정합니다 텍스트 도구로 가서 '1'을 입력합니다

텍스트는 'Large'텍스트의 글꼴과 동일해야하지만, 그렇지 않은 경우에는 저장된 텍스트 스타일을 선택하십시오 이제 숫자를 사각형 내부에 놓고 숫자와 사각형을 그룹화하고, 그룹의 이름을 '수량'으로 지정하십시오 그런 다음 둥근 직사각형의 왼쪽에 20 픽셀을 마이너스 기호로 가운데 맞추어 놓습니다 그 다음에는 더하기 기호를 반대로하십시오 마이너스, 플러스 및 수량을 그룹화하고 그룹의 '수량 선택기'이름을 지정하겠습니다

새 그룹을 제품 제목에 상대적으로 배치하고 간격을 240 픽셀 추가합니다 다음으로, 가격을 입력하고 텍스트 스타일을 제품 제목과 동일하게 변경하겠습니다 저는 텍스트를 중심에두고 그 양을 130 픽셀만큼 움직일 것입니다 22 픽셀 너비와 2 픽셀 높이의 새 사각형을 만들고, 테두리를 채우고 채우기가 순수한 흰색인지 확인하십시오 도형을 45도 회전시킨 다음 Command-D로 복제합니다

중복 된 이 아이콘을 클릭하면 가로로 뒤집습니다 그런 다음 두 직사각형을 모두 선택하고 'Union'을 클릭하여 모양을 결합합니다 모양을 '삭제'라고 이름을 정하고 가격 레이어에 가운데 놓고 110 픽셀 떨어진 곳으로 옮깁니다 마지막으로 키보드에서 'L'을 눌러 라인을 만듭니다 나는 교대를 잡고 완벽하게 직선을 만들기 위해 끌고 갈 것이다

색상이 순수한 흰색인지, 두께가 하나인지, 길이가 1,095 픽셀인지를 확인합니다 시계 이미지에 맞춰 왼쪽으로 45 픽셀 이동하고 이름을 '디바이더'로 바꿉니다 제품 섹션의 모든 레이어와 그룹을 선택하고 Command-G로 그룹화합니다 이 그룹의 이름을 '장바구니 항목'으로 지정하고 기호로 바꿀 것입니다 나는 심볼을 복제하고 각 새로운 섹션을 서로 45 픽셀 씩 간격을두기 위해 옵션을 잡을 것입니다

재정의를 사용하면 제품 제목, 이미지, 가격 등을 동적으로 변경할 수 있습니다 원본 Symbol에 영향을주지 않고 텍스트 도구로 돌아가서 '쇼핑 계속'을 입력하겠습니다 레이어를 왼쪽 정렬하고 마지막 장바구니 항목의 아래쪽에서 45 픽셀 이동합니다 옵션을 잡고 오른쪽으로 드래그하여 텍스트 레이어를 복제하고 텍스트 레이어를 변경합니다 text to 'Subtotal :'텍스트 레이어를 다시 복제하고 총 가격을 입력합니다

이 경우에는 '$ 10797'이며 텍스트 스타일을 변경합니다 부분합 위에 레이어를 배치하고 10 픽셀 간격으로 배치합니다 부분합 및 가격 레이어를 그룹화하고 이름을 '소계'로 지정합니다 바로 정렬합니다

카트 항목으로 이동하고 하단에서 40 픽셀 이동합니다 장바구니 섹션으로 만든 모든 레이어를 그룹화하고 장바구니 이름을 지정하겠습니다 그리고 그게 다야! 우리는 프로젝트를 수출하고 세계와 공유 할 준비가되었습니다 이 Sketch 튜토리얼이 마음에 들면, 여기에서 확인하십시오 그리고이 비디오가 마음에 들면, 그것을 엄지 손가락으로 올려 구독하고 친구와 공유하십시오

나는 다음에 너를 볼거야

Sketch Web Design Course: E-commerce Checkout Page Design – Lesson One

나는 Skillthrive의 Hunter이고이 두 편의 Sketch 튜토리얼의 첫 번째 수업에 오신 것을 환영합니다 이 수업에서는 프로젝트를 시작하고 색상 팔레트의 심볼을 만들고 체크 아웃 디자인 컨셉에 대한 구매 모달

오늘 내가 만들고있는 마지막 스케치 파일을 다운로드하려면 가입 할 수 있습니다 아래의 링크에서 Skillthrive를 무료로 이용하십시오 그렇게 말하면 시작합시다 Sketch를 연 다음 키보드에서 'A'를 클릭하여 대지를 만들어 봅시다 그런 다음 대지 보드를 클릭하고 드래그하여 1920×1080 크기로 설정하십시오

아트 보드의 장바구니 이름을 지정하십시오 다음으로,이 디자인에서 사용할 색상을 보유 할 Artboards를 몇 개 만듭니다 그 후에 프로젝트에서 색상을 쉽게 제어 할 수있는 기호로 변환 할 것입니다 아트 보드 도구에 액세스하려면 'A'를 다시 누른 다음 드래그하는 동안 Shift 키를 누릅니다 180 픽셀의 사각형을 만듭니다

그런 다음 'R'을 눌러 사각형 도구에 액세스하고 직사각형을 대지로 채 웁니다 나는 경계선을 끄고 16 진수 코드 F2B632로 채우기를 설정합니다 나는 그 색상을 내 문서 색상으로 저장할 것입니다 이 대지에 'color /'라는 이름을 붙이고 그 뒤에 16 진수 코드를 붙입니다 나는 다른 Artboards와 유사한 프로세스를 수행 할 것인데, Sketch to group 이 상징들은 함께

그런 다음 화면의 16 진수 코드를 사용하여이 과정을 5 번 더 반복합니다 대지 만들기가 끝나면 레이어 목록에서 선택합니다 그런 다음 레이어 중 하나를 마우스 오른쪽 버튼으로 클릭하고 '심볼 만들기'를 선택합니다 모든 프로젝트 기호를 저장할 새 페이지를 작성하십시오 아트 보드에 직사각형을 채워 배경을 만들고 테두리를 끕니다

직사각형의 채우기를 선택하는 대신 직사각형을 색상 Symbol의 마스크로 사용합니다 따라서 '문서'로 '삽입', '색상'으로 이동하여이 색상을 선택하겠습니다 내 마우스를 직사각형 위에 놓고 클릭하여 심볼을 배치합니다 이제 배경을 채우기 위해 기호의 크기를 조정할 수 있습니다 레이어 목록에서 심볼과 사각형을 선택하고 '마스크'를 클릭합니다

그런 다음이 그룹의 이름을 '배경'으로 바꿉니다 이 배경의 색상을 변경하려면 레이어를 선택하고 여기로 올 수 있습니다 색상 중 하나를 선택하십시오 다음으로 폭이 637 픽셀, 높이가 1,080 픽셀 인 직사각형을 만듭니다 그것은 대지의 오른쪽에 있습니다

나는 경계선을 끄고 직사각형 꼭대기에 색 기호를 놓을 것이다 크기를 조정하고 직사각형을 마스크로 사용하십시오 이 레이어의 이름을 'Modal Background'로 바꿉니다 내 키보드에서 'T'를 눌러 텍스트 도구에 액세스합니다 직사각형 상단을 클릭하고 '카드 세부 사항'을 입력하기 시작합니다

텍스트를 선택하고 텍스트 설정으로 이동합니다 나는 서체를 몬트 세 라트 (Montserrat), 체중을 세미 볼드, 크기를 40, 문자 간격을 23으로 설정할 것입니다 '텍스트 스타일 없음'이라는 텍스트 설정 위에있는 상자를 클릭하고 '새 텍스트 스타일 만들기'를 클릭하겠습니다 이제는이를 참조하여 일관성을 유지하고 일관되게 유지할 수 있습니다

내 프로젝트 전체에서 텍스트 스타일 다음 섹션으로 이동하기 전에 이동 도구로이 텍스트 레이어를 선택하겠습니다 위쪽에서 120 픽셀, 왼쪽에서 95 픽셀을 배치하십시오 Option을 누르고있는 동안 레이어를 이동하여 다른 요소와의 간격을 확인합니다 다른 텍스트 레이어를 만들고 '카드 유형'을 입력하겠습니다

이 글꼴을 선택하고 텍스트 크기를 20 및 문자 간격으로 변경합니다 17로 설정하고 새 텍스트 스타일을 만듭니다 이 레이어를 '카드 세부 정보'레이어의 왼쪽에 정렬하고 하단에서 85 픽셀 이동합니다 그런 다음 코스 파일로 이동하여 세 개의 신용 카드 이미지를 가져 와서 Sketch로 드래그합니다

세 개의 레이어가 모두 선택된 상태에서 커맨드 + K를 눌러 스케일을 조정합니다 모든 세 개의 레이어는 60 픽셀에 비례합니다 첫 번째 레이어를 왼쪽 정렬하고 섹션 제목 맨 아래에서 25 픽셀 이동합니다 다음 두 레이어를 서로 60 픽셀 씩 중앙에 배치합니다 Command + G를 눌러 네 개의 레이어를 모두 그룹화하고 '카드 유형'그룹을 호출합니다

텍스트 도구로 돌아가서 '카드에 이름'을 입력하겠습니다 이 레이어를 왼쪽 정렬하고 첫 번째 그룹의 아래쪽에서 60 픽셀 이동합니다 라인 도구에 액세스하려면 'L'을 누르고 직선을 생성하려면 Shift 키를 누른 상태로 드래그합니다 라인의 길이가 365 픽셀이고 두께가 1 픽셀이고 순수한 흰색으로 설정되었는지 확인하겠습니다 또한 섹션 제목과 60 픽셀을 맞 춥니 다

그런 다음 두 레이어를 그룹화하고 그룹의 이름을 카드에 이름을 지정합니다 다음 섹션을 만들려면 '카드의 이름'그룹을 선택하고 Option 키를 누른다 60 픽셀을 드래그하여 그룹을 복제했습니다 그룹 이름을 '카드 번호'로 변경하고 일치시킬 제목을 변경하겠습니다 나는 다음 섹션을 같은 방식으로 복제 할 것이고 나는이 그룹을 'Expiry Date'라고 부를 것이다

섹션 제목을 변경하십시오 선을 53 픽셀로 단축합니다 이제 선 도구로 20 픽셀 수직선을 만들고, 이번에는 Shift 키 나는 아래로 끌고 간다 그런 다음 만료 날짜 그룹에서 해당 줄을 이동합니다 Shift-Command-R을 누르고 마우스를 사용하여 20도 회전시킵니다

그런 다음 선을 왼쪽 선의 맨 아래에 정렬하고 5 픽셀 떨어져 있는지 확인합니다 두 레이어를 선택하고 Option 키를 누른 채로 오른쪽으로 드래그합니다 또한 Shift 키를 누른 채로 선을 위아래로 움직이지 않도록 할 수 있습니다 이번에는 새로운 수익을 왼쪽의 회전 된 선의 위쪽 가장자리 자, 이제 단 하나의 추가 수익이 필요합니다

따라서이 옵션을 선택하고 Option과 이것을 같은 방법으로 정렬하십시오 5 줄 레이어를 그룹화하고 '만료 정보'그룹을 호출합니다 이 레이어를 섹션 제목의 하단에서 43 픽셀 이동합니다 다음 섹션에서는 만료 그룹의 옵션을 잡고 오른쪽으로 드래그합니다 이 그룹 및 섹션 제목을 'CVV'로 지정하겠습니다

나는 'Expiry Info'그룹에 들어가서 가장 왼쪽 하단 라인을 그룹 밖으로 끌어 올 것이다 그런 다음 그룹을 선택하고 삭제합니다 그런 다음 그룹을 위아래로 이동하지 않도록 그룹을 정렬합니다 이 모든 레이어를 선택하고 그룹화하여 '카드 세부 정보'라고합니다 폭이 638 픽셀이고 높이가 152 픽셀 인 새 사각형을 만듭니다

나는 경계선을 끄고 노란색 심벌 컬러를 사용할 것이다 레이어 이름을 '버튼 배경'으로 지정하겠습니다 텍스트 도구로 가서 'Complete Purchase'를 입력하겠습니다 텍스트를 선택하고 크기를 30으로 변경합니다 이 텍스트 레이어와 버튼 배경을 선택하고 함께 그룹화 한 다음 새 그룹 'Purchase Button'

텍스트 레이어를 가운데에 배치하고이 레이어에서 새 텍스트 스타일을 만듭니다 모달 배경, 구입 단추 및 카드 정보 그룹을 선택하고 이름을 지정합니다 'Checkout Modal'그룹 그런 다음이 그룹에서 심볼을 만들어 심볼 페이지로 보냅니다 그리고이 수업을 위해서입니다! 다음 단원에서는 장바구니를 만들 것입니다

나는 다음에 너를 볼거야!

Photoshop Responsive Web Design Tutorial – Understanding Mobile & Tablet Design 7/48

안녕, 유튜브! 내 이름은 댄이고 이것은 무료 동영상 중 하나입니다 그것은 내가 가르치는 코스의 일부입니다

그래서 당신이 좋아하면 설명에 링크가 있습니다 그러나 지금은 우리가 가진 것을 무료로 보자 적응 형 웹 디자인은 웹을 변경하는 방법입니다 브라우저의 크기에 따라 여기 당신은 Smashing Magazine을보고 있습니다

Smashing Magazine은 자주 읽는 웹 사이트입니다 나는 그들이 다른 페이지를 재 설계하려고 노력한 것을 좋아한다 브라우저의 크기에 따라 다릅니다 이제는 iMac과 같이 매우 큰 화면을 보게 될 것입니다 또는 매우 높은 정의를 지닌 매우 큰 모니터 인 4K 모니터입니다

왼쪽에는 메뉴와 탐색 하위 메뉴가 있으며, 주요 내용 및 광고, 하지만 정상적인 데스크톱에서 볼 때 줄어들면 당신은 그들이이 탐색 바를 바꾸는 것을 볼 것입니다, 주요 내용 및 광고 그러나 작아지면 타블렛을 보자 조금 변경 : 광고를 제거, 탐색 모음이 작아집니다 모바일 용 뷰로 축소하면 다시 변경됩니다 Photoshop에서 디자인 할 때 고려해야 할 사항은 무엇입니까? 그것은 정적 매체이며, 확장 가능하거나 신축 적이 지 않다는 것입니다

당신이 웹 페이지에서 얻는 것과 같습니다 Photoshop에서 프로토 타입을 요약 할 때 디자이너가 수행하는 작업 다른 시각을 디자인하는 것입니다 그래서 개발자에게 넘겨줌으로써 모바일로 바뀌면 사이트가하는 일을 알고, 메뉴가 태블릿보기에있을 때 어떤 일이 발생합니까? 모든 질문은 스케치에서 대답해야합니다 우리는 많은 의심들이오고가는 것을 원하지 않습니다 개발자와 사용자간에 문제 해결을 시도합니다

개념화 단계에서 해결되었을 것입니다 그리고 이것은 적응 형 웹 디자인에 대한 빠른 소개였습니다 공유하고 싶기 때문에이 무료 동영상을 만들었습니다 비록 내가 당신이 풀코스 과정을 계속하기를 원한다면, 50 개 이상의 동영상이 있습니다 설명에 할인 코드가 있습니다

제발, "좋아"하고 구독하십시오 나중에 YouTube에서 멋진 사람들과 만나십시오 나는 내 손으로 작별 인사를하고 있지만, 너는 그것을 보지 못했다 그렇지?