웹 개발 개념 모든 웹 디자이너는 이해해야한다.
대략 말할 것이 많다. 디자이너와 개발자 사이의 격차. 수 많은 디자이너 / 개발자 하이브리드가 있습니다. 동전의 양면을 이해하다, 하지만 그들은 아주 적다..
독창적 인 프로젝트가 번창합니다. 적절한 의사 소통. 그러나 디자이너와 개발자가 어떻게해야하는지에 대해 확신이 서지 않으면 어려울 수 있습니다. 서로 이야기하다. 필자는 디자이너가 적절한 JavaScript를 작성하는 방법을 알아야 할 필요가 없으며 개발자가 타이포그래피 선택을 마스터해서는 안된다고 생각합니다. 하지만 근본적인 주제들 내가 생각하기에 두 가지 방향으로 갈 것.
다음 주제는 내 개인적인 것입니다 모든 디자이너가 이해해야하는 중요한 웹 개발 아이디어. 디자이너 / 개발자로서 나는 두 영역을 혼동하는 것이 얼마나 혼란 스러운지 알고 있습니다. 그러나 명확한 이해가 의사 소통을 향상시키고 디자이너를 창조적 인 팀에게 훨씬 더 가치있게 만들기 때문에 항상 배워야 할 가치가 있습니다..
프론트 엔드 코드 동작
웹 디자이너는 종종 자신의 디자인 재능과 함께 프론트 엔드 기술을 가지고 있다고 생각됩니다. 이 주제는 뜨겁게 토론 된 주제입니다. 정답이 없다..
디자이너가해야 할 일 편안하다. 그것이 시각적 디자인 작업 만한다는 것을 의미한다면 그렇게 될 것입니다. 그러나 프론트 엔드 기술에 대한 간략한 이해는 동일한 디자이너를 만들 수 있습니다. 보다 직관적 인 개발자를위한 애셋을 만들 때.
나는 모든 디자이너가 적어도 프론트 엔드 개발의 세 가지 기본 언어 (HTML, CSS 및 JS)을 사용하는 방법에 대해 설명합니다. 예를 들어, 대부분의 드롭 다운 메뉴는 JavaScript에 의존하지만 CSS 전용 대안도 있습니다.
디자이너가 드롭 다운 메뉴를 만들 때, 디자이너는 코드를 통한 구현의 복잡성. 자바 스크립트를 필요로하는 요소를 이해하는 디자이너는 개발자가 빌드를 요구하는 것을 이해할 수 있도록 더 잘 준비 할 수 있습니다..
이것은 가능하다 한 줄의 코드를 작성하는 것을 배우지 않고.
CSS가 만들어진 웹 사이트 스타일. CSS 애니메이션과 CSS를 제외하고는 대부분 정적입니다. 대부분의 비주얼을 생성한다. 페이지에. 가장 역동적 인 기능 JavaScript로 작성되었습니다..
이 구분을 이해할 수 있다면 디자인 작업에 의식적인 노력이 숨 쉬게 될 것입니다. 또한 UX 모션 디자이너가 인터페이스에 애니메이션을 적용하는 데 필요한 작업량을 고려해야합니다..
반응 기법
모든 웹 디자이너는 적어도 용어를 알아야합니다. 반응이 빠른 디자인. 이렇게하면 웹 사이트에서 다른 화면 크기에 적응, 각각 다른 레이아웃이 속하는 새 레이아웃을 적용 할 때의 기기 크기는 다음과 같습니다. 중단 점에 의해 정의 됨, CSS 파일에 추가되었습니다..
중단 점은 특정 픽셀 너비 (또는 / 또는 때로는 높이) 최소 또는 최대로, 레이아웃이 화면 크기에 맞게 조정됩니다. 따라서 응답 성있는 레이아웃은 320px 스마트 폰에서보다 1080px 모니터에서 다르게 보일 것입니다..
실제 사이트에서 중단 점이 작동하는 방식을 보려면 미디어 쿼리 웹 사이트를 확인하십시오..
디자이너로서의 당신의 직업은 각 중단 점이 어떻게 모형에 영향을 미친다.. 당신은 여러 comps를 디자인하는 임무를 맡을 수 있습니다. 다른 화면 크기에 맞추기.
레이아웃이 변경 될 때 CSS 브레이크 포인트가 조건을 정의했다는 것을 알게되면, 개발자는이 애셋을 개발자 팀에 전달하는 것이 훨씬 쉬워집니다.
모듈 형 디자인으로 생각하십시오.
개발자들은 언제나 코드 재사용 이 접근법이 개발을 가능하게 할 때 가능한 한 많이 덜 자세한 과 파일 크기 줄이기 - 사실 그것은 중요한 코드 최적화 기술입니다..
모듈 식 디자인 웹 사이트를 만드는 방법을 설명합니다. “모듈들” 그것은 가능하다 시간이지나면서 재사용된다.. 버튼을 생각하고, 입력 양식, 제목 스타일 또는 고급 스타일로 블록 인용 부호 사용.
만약 너라면 모듈 식으로 디자인 요소, 개발자가 레이아웃을 쉽게 코딩 할 수있게되었습니다. 재사용 가능한 CSS 클래스. 언제 어디에서 할 수 있는지 생각하는 것이 좋습니다. 합리적으로 재사용 동일한 색상, 질감 및 페이지 요소를 사용하지만 스마트에 대해 알아야합니다. 전반적인 미학을 해치지 않는다..
당신이 주석 달기 서로 다른 모형에 복사 한 요소가 반복 코드로 사이트의 이러한 부분을 마크 업하십시오. - 더 빠르고 간단한 개발.
모듈 형 설계 관련 원자 설계, 두 접근법 모두 개발자를 대상으로합니다. 하나 심상 코드 작동 방식을 이해하는 데 도움을 줄 수 있습니다. 모듈 식 디자인 시각화 몇 가지 예를 보려면이 게시물을 확인하십시오..
망막 이미지 및 SVG 이해
일반적으로 이미지를 준비하고 필요한 사진을 캡처하며 처음부터 아이콘을 디자인하는 것은 디자이너의 임무입니다. 이는 디자이너가 시각적 자산 전달 개발자는 결국 레이아웃에 코드화합니다. 이 점을 이해하는 것이 중요합니다. 망막 크기 ~까지 망막 지원 자산을 통과시킨다. 최종 모형과 함께 개발자에게.
망막 디자인 워크 플로우에 대해 더 자세히 알고 싶다면이 Smashing Magazine 포스트를 적극 추천합니다. Retinize Photoshop 액션의 무료 모음입니다. 자동으로 망막 버전을 만든다. 자산의.
대부분의 디자이너는 이미 지원을 알고 있습니다. @ 2x 이미지, 그러나 최신 iPhone 6+ 기기에는 @ 3x 해상도. 그러나 일부 프로젝트는 @ 3x 이미지 크기에 신경 쓰지 않으므로 자산을 확정하기 전에 프로젝트 리더와상의하십시오..
고려해야 할 마지막 사항은 SVG의 발전 웹에서. 최신의 모든 브라우저는 SVG를 지원합니다. 벡터 기반 이미지 형식. 이것은 SVG 아이콘이 품질 손실없이 자동으로 확장 가능, SVG 그래픽에 망막 자산이 필요하지 않습니다..
모든 크리에이티브 팀이 웹 디자인을 위해 SVG를 기꺼이 갈 생각은 아닙니다. 그들은 브라우저에서 확실히 지원되지만 어떤 경우에는 구현하기 까다로워 질 수도 있습니다. 이것이 성공적인 디자이너 / 개발자 관계에서 커뮤니케이션이 중요한 이유입니다.
벡터 그래픽 사용의 장단점에 대해 토론하고 각 프로젝트에 가장 적합한 것이 무엇이든 결정하십시오. 이러한 기능을 이해하면 개발자와 명확하게 커뮤니케이션 할 수있을뿐만 아니라 망막 지원을위한 레이아웃을 코드화 할 수 있습니다..
접근성 이해하기
점진적 향상 과 우아한 퇴화 동일한 문제를 처리하는 두 가지 다른 방법 : 접근성. 모든 사용자가 웹 사이트의 동적 기능을 100 % 지원하는 기기 또는 실행 브라우저에있는 것은 아닙니다..
이 사용자는 여전히 효과가있는 경험, 이는 적절한 코딩으로 처리해야합니다. 일부 스크린 리더는 모든 자바 스크립트와 CSS 코드를 무시할 수 있지만 웹 사이트 여전히 기능이 필요하다..
나는 최근에 게시물 덮음을 했어. 점진적 향상 자세하게 말하자면 내가 선호하는 개발 방식이기 때문입니다. 점진적 향상 매우 기본적인 기능으로 시작됩니다., 다음 최대 작품 “많은” 풍모.
우아한 퇴화 는 정반대의 접근법 어디에 모든 주요 기능이 먼저 설계되었습니다., 사용자가 JavaScript 또는 CSS를 지원하지 않으면 개발자가 이러한 기능을 처리하는 방법을 결정합니다.
디자이너가 이러한 상황에 대한 모형을 만들지는 않을 것입니다. 그러나 설계자는이 용어와 그 의미를 이해하는 것이 중요합니다. 개발 프로세스에 영향을 미친다.. 접근성이 큰 관심사 인 프로젝트의 경우 특히 그렇습니다.
폐쇄 중
내가 옵션으로 생각하기 때문에 건너 뛴 몇 가지 주제가 있습니다.. 버전 관리, 오류 처리 및 JavaScript 애니메이션 디자이너가 탐구하고자하는 몇 가지 복잡한 주제입니다..
그러나 사실이 포스트에서 언급 한 요점은 디자이너가 개발 팀의 요구 사항을 이해하는 데 도움이 될 것입니다. 웹 개발의 표면을 감추면 통찰력을 얻다. 아이디어를 전달하고 제작 과정에서 발생하는 문제에 공감하는 데 도움이 될 것입니다..
더 많은 관련 콘텐츠를 찾고 있다면 다음 게시물을 살펴보십시오.
- 개발자와 효과적으로 의사 소통하는 방법 (smashingmagazine.com)
- 디자이너와 개발자가 서로 이해하는 법을 배우십시오. (uie.com)
- 코드 작성 학습을 통해 UX 디자이너로서의 이점 제공 (jessicaivins.net)
