콘텐츠
- 코드를 사용한 디자인의 이점
- 데이터 우선
- 무료 모바일 서비스
- 공통 언어 찾기
- 더 빨리 배우기
- 빠른 반복
- 출시 시간 단축
- 왜 HTML5인가?
- 마법의 데이터 속성
- CSS3 – 새로운 Photoshop
- Sass + Compass : 마법처럼 맛있는
- jQuery : 오, 네 가능합니다
- 프레임 워크
- 마지막 생각들
이 기사는 웹 디자이너와 개발자를위한 세계에서 가장 많이 팔리는 잡지 인 .net 잡지 235 호에 처음 게재되었습니다.
나는 필요한 것보다 더 많은 일을하는 것을 열렬히 좋아 한 적이 없습니다. 나는 나 또는 내 팀을 더 효과적으로 만드는 능력에 따라 방법과 도구를 평가하는 경향이 있습니다. 그들은 우리를 작동하는 제품으로 얼마나 빨리 이끌어 줍니까? 의사 소통에 얼마나 효과적입니까? 그들은 우리의 길에서 벗어나 있습니까?
수년에 걸쳐 디자인 프로세스와 도구를 조정했습니다. 계속 그렇게 할 것이라고 생각합니다. 이것이 바로 기술과 웹을위한 디자인의 특성입니다. 이 산업은 끊임없이 진화하고 있습니다. 우리의 프로세스와 도구도 진화해야합니다.
HTML5 및 CSS3를 사용하면보다 쉽게 업스트림 디자인 프로세스를 전환 할 수 있습니다. Photoshop에서 벗어나 생생하고 숨쉬는 디자인으로 더 쉽게 전환 할 수 있습니다. Foundation, Bootstrap 및 jQuery와 같은 도구를 사용하면 설계 프로세스를보다 접근하기 쉽게 코딩 할 수 있습니다.
코드를 사용한 디자인의 이점
첫째, 저는 작업 과정에서 Photoshop이나 다른 시각적 디자인 편집기를 삭제하는 것을 옹호하지 않습니다. 대신이 디자인을 조만간 코드로 옮길 때의 이점에 초점을 맞출 것입니다.
데이터 우선
HTML로 디자인 할 때 항상 좋아했던 점은 데이터 우선 관점에서 생각하도록 장려한다는 것입니다. 반대로 Illustrator, OmniGraffle 또는 Balsamiq와 같은 그리기 프로그램을 사용하면 상자에서 시작하여 데이터로 채 웁니다.
HTML에서 DOM (문서 객체 모델)을 구성합니다. 마치 목차를 만드는 것과 같습니다. 의미있는 계층 구조를 가진 진정한 정보 디자인으로의 복귀입니다. HTML5는 기사, 섹션, 머리글, 옆, 바닥 글 등의 새로운 의미 요소를 추가하여 한 단계 더 나아갑니다. 이 데이터 우선 접근 방식은 모바일 우선 반응 형 디자인과 잘 어울립니다.
무료 모바일 서비스
이 글을 읽고 있다면 모바일 용으로 디자인하고있을 것입니다. 그리고 한 두 가지 형태를 디자인해야 할 가능성이 있습니다. HTML5를 사용하면 운이 좋습니다. HTML5 이전에는 입력 유형이 거의 텍스트 또는 비밀번호 필드였습니다. HTML5는 다음과 같은 여러 추가 입력 유형을 도입했습니다.
입력 유형 = "email"> 입력 유형 = "tel"> 입력 유형 = "url"> 입력 유형 = "날짜"> 입력 유형 = "날짜-시간">
이러한 추가 고유 입력 유형의 정말 멋진 점은 iOS 및 Android의 모바일 브라우저가이를 인식하고 상황에 맞는 키보드를 자동으로 교체한다는 것입니다. 특별한 jQuery 플러그인이나 해킹이 필요하지 않습니다. 아, 브라우저가 입력 유형 = "이메일"> 즉, 기본적으로 텍스트 입력이됩니다.
공통 언어 찾기
"디자이너와 개발자가 같은 언어로 작업 할 수 있다는 점이 놀랍습니다."– Inflection의 애플리케이션 개발자 인 John Drago.
이것이 친숙하게 들리는 지보십시오. 저는 Ruby, Python, Java 또는 .NET으로 주변 서클을 코딩 할 수있는 6 명의 서버 측 애플리케이션 개발자가있는 회의실에 있습니다. 나는 유일한 디자이너입니다. 내 제안 중 일부는 처음에는 구현하기에 너무 복잡하다고 무시됩니다. 화이트 보드로 가서 디자인 구현 방법에 대한 HTML과 CSS를 보드에 작성하기 시작합니다. 갑자기 대화 톤이 바뀌고 개발자 중 한 명이 마지 못해 말합니다. "글쎄요. 우리가 그렇게하면 작동 할 수 있습니다."
더 많은 디자인 프로세스를 코드로 이동함으로써 개발자와의 대화가 개선되었습니다. 코드로 디자인을 만드는 방법을 알고 있으면 존경심이 더해집니다. 그 존경을 얻기 위해 전문가가 될 필요는 없습니다. 내 HTML 및 CSS 기술은 견고하지만 JavaScript 기술은 기껏해야 평범합니다. 그리고 나는 그것을 인정하는 것을 부끄러워하지 않습니다. 하지만 프론트 엔드 또는 서버 측 개발자와 작업 할 때 공통 언어로 말하거나 중간에 만날 수 있다는 사실은 큰 이점입니다.
더 빨리 배우기
와이어 프레임과 시각적 합성물이 계획에 도움이 될 수 있지만 이러한 정적 인공물은 이론적입니다. 누군가에게 상호 작용을 설명하려고 몇 번이나 시도한 적이 있습니까? "나는 그것을 봐야 할 것 같습니다." 프로토 타입에 더 빨리 도달할수록 사람들이 상호 작용할 수있는 무언가가있을수록 더 빨리 디자인을 경험하고 아이디어가 작동하는지 확인할 수 있습니다.
빠른 반복
최종적으로 제작 된 디자인이 포토샵 컴포지션과 정확히 일치 한 것이 언제입니까? 거의 없다. 디지털 제품 디자인을 통해 변화는 끊임없이 발생합니다. 또한 수십 개의 화면에서 제목 크기를 22pt에서 24pt로 늘리는 등의 변경 사항은 Photoshop에서 몇 시간이 걸릴 수 있습니다. 고급 개체는 Photoshop에서 일정 수준의 개체 지향 디자인을 제공합니다. 안타깝게도 제가 아는 대부분의 비주얼 디자이너는 스마트 오브젝트를 충분히 활용하지 않습니다. CSS를 사용하면 디자인에 대한보다 체계적인 접근 방식을 장려하기 때문에 인쇄상의 변경에는 몇 시간이 아닌 몇 분이 걸립니다.
모든 버튼의 선형 그래디언트를 변경하는 것은 어떻습니까? 아니면 테두리의 크기? 사각형 모서리에서 2px 둥근 모서리로 변경하는 것은 어떻습니까? Photoshop에서는 몇 시간이 걸릴 수 있으며 여전히 코딩해야합니다. 코드로 디자인 할 수있는 기능은 시각적 디자인을 반복하기 위해 Photoshop으로 돌아가는 왕복 여행을 피하는 데 도움이됩니다. CSS3 및 Sass (이 기사 뒷부분에서 다룰 예정 임)를 사용하여 이러한 변경 사항을 코드로 업스트림으로 이동하면 실시간으로 수행 할 수 있으며 몇 분 밖에 걸리지 않습니다.
출시 시간 단축
수년에 걸쳐 디자인 워크 플로의 업스트림을 코드로 전환하면서 실질적인 개선을 경험했습니다. 출시 시간이 약 20 ~ 30 % 단축되었습니다. 더 많이할수록 중복되는 노력에 드는 시간이 줄어 듭니다. Photoshop이나 Fireworks로 들어가는 시간을 줄이고 코드 작업을 반복합니다.
어떤 시점에서 디자인은 CMS, Rails 앱 또는 다른 어떤 유형의 백엔드와 인터페이스해야합니다. 내 디자인 작업의 대부분이 코드에 있기 때문에 통합이 더 빨리 이루어집니다. 몇 년 전, 제 고객 중 한 명인 PointRoll은 5 일 만에 프로토 타입에서 프로덕션으로 전환했습니다.
왜 HTML5인가?
HTML5는 이전 버전의 HTML보다 쉽습니다. 예를 들어 문서 유형 선언을 살펴보십시오. 이전 버전의 HTML에서는 DOCTYPE 다음과 같이 보였습니다.
! DOCTYPE html PUBLIC "-// W3C // DTD XHTML 1.1 // EN" "http://www.w3.org/TR/xhtml11/DTD/ xhtml11.dtd">
그리고 여섯 가지 버전이있었습니다. 다행히 HTML5 DOCTYPE 다음과 같이 보입니다.
! DOCTYPE HTML>
진지하게. 그게 다입니다. 놀랍도록 간단합니다.
표준 HTML 페이지를 만들 때 머리글, 기본 콘텐츠 영역, 사이드 바 및 바닥 글과 같은 여러 공통 요소가 있습니다. 이전에 이와 같은 것을 본 적이있을 것입니다.
div id = "header> div id ="nav "> / div> / div> div id ="main "> div id ="sidebar "> / div> / div> div id ="footer "> / div>
거기에는 평범한 것이 없습니다. 그러나 콘텐츠로 채워지면이 템플릿은 div 수프로 바뀝니다. 반대로 HTML5의 새로운 의미 요소를 사용하면 다음과 같이 훨씬 더 간단하고 쉽게 스캔 할 수 있습니다.
header> nav> / nav> / header> article> aside> / aside> / article> footer> / footer>
저것 봐. 말이되는 것.
마법의 데이터 속성
HTML5에는 고유 한 의미 론적 의미를 만들 수있는 또 다른 멋진 후크가 있습니다. 데이터-. 이전에는 DOM 요소에 의미있는 것을 할당하려는 경우 ID, 클래스 및 역할로 제한되었습니다.
안타깝게도 ID는 고유해야합니다. 수업은 보편적이지만 (yippee!) 사용하면 금방 엉망이 될 수 있습니다. 역할은 ARIA에 중요한 의미를 제공하는 활용도가 낮은 자산입니다. 최근에 저는 Inflection에서 개발중인 이벤트 추적 분석 플랫폼에 데이터를 사용하고 있습니다.우리는 디자인 테스트의 열렬한 팬입니다. 상호 작용이 많은 애플리케이션이나 페이지에서 작업 할 때 페이지 내에서 고객 참여에 대한보다 세분화 된 통찰력을 얻고 싶습니다.
들어가다 데이터-. 이를 통해 '자신 만의 정의'의미 모델을 할당하고 전달하고 연결할 수 있습니다. 예를 들어 다음과 같이 할 수 있습니다.
입력 유형 = "button"data-id = "facebook"dataregion = "main"data-event = "register"> 입력 유형 = "button"data-id = "twitter"dataregion = "main"data-event = "등록 "> 입력 유형 ="버튼 "data-id ="linkedin "dataregion ="main "data-event ="register ">
JavaScript가있는 리스너를 페이지에 연결할 수 있으며 고객이 마우스를 가리 키거나이 버튼을 클릭 할 때마다 해당 활동을 추적 할 수 있습니다. Twitter에서 OAuth를 통해 등록 된 사람을 추적하는 대신 Facebook, Twitter, LinkedIn을 차례로 가리킨 다음 마지막으로 OAuth 모델로 Twitter를 선택하기로 결정한 것을 확인할 수 있습니다.
이것을 Pinterest와 같은 사이트 또는 고객이 타일을 끌어서 놓아 관심에 따라 재정렬하는 새로운 Myspace 디자인으로 확장한다고 상상해보십시오. 또는 관심이없는 타일을 숨길 수도 있습니다. 데이터- 속성을 사용하면 정의 할 수있는 항목에 의미 론적 의미의 추가 계층을 첨부하거나 할당 할 수 있습니다. Ajax에 크게 의존하는 사이트와 앱의 경우 무한한 기회가 열립니다.
CSS3 – 새로운 Photoshop
CSS3는 배경 이미지, 슬라이스 및 악명 높은 '미닫이 문'기술이 필요했던 완전히 새로운 수준의 디자인 룩앤필을 가져 왔습니다. 고맙게도 그것은 모두 과거의 일입니다.
선형 그래디언트, 둥근 모서리, 멋진 글자 누르기 효과를주는 텍스트 그림자, 마우스 오버시 글로우가있는 멋진 버튼을 만드는 방법을 살펴 보겠습니다. 이러한 기술을 배우면 먼 길을 갈 것입니다. 각각은 독립적으로 사용하거나 다양한 조합으로 사용하여 오늘날 웹에서 유행하는 현재의 시각적 인기를 끌어낼 수 있습니다.
먼저 기본값을 몇 가지 조정하겠습니다. 버튼> 과 입력 유형 = "submit"> 집단. 표준 CSS 재설정 중 하나를 사용한다고 가정하면 크기와 호흡 공간을 조금 추가하겠습니다.
/ * 버튼이있는 버튼 버튼 ====================================== * * / button, input [type = "submit"] {높이 : 2.7em; 패딩 : .4em .7em; 라인 높이 : 1.9; }
Protip : 제출 된 버튼과 입력은 스타일을 변경하기가 까다로울 수 있습니다. 줄 높이를 1.6 이상으로 조정하여 발견했습니다. 내부에 추가 div 또는 스팬이 필요한 해킹을 피할 수 있습니다. 버튼> 꼬리표.
이제 버튼 문제를 '수정'했으므로 .btn 둥근 모서리, 선형 그래디언트, 외곽선 및 활자 모양의 멋진 깔끔한 버튼을 제공합니다.
.btn {디스플레이 : 인라인 블록; 테두리 : 1px 단색 # d4d4cc; -moz-border-radius : 4px; -webkit-border-radius : 4px; 테두리 반경 : 4px; 패딩 : .4em .7em; 배경 : # edeff2; 배경 : -webkit-gradient (linear, 0 % 0 %, 0 % 100 %, from (#fefefe), color-stop (0.55, # edeff2), to (# e4e6e9)); 배경 : -moz-linear-gradient (center top, #fefefe, # edeff2 55 %, # e4e6e9); -moz-box-shadow : rgba (160,172,187, .7) 0 0 .2em 0; -webkit-box-shadow : rgba (160,172,187, .7) 00 .2em 0; 상자 그림자 : rgba (160,172,187, .7) 00 .2em 0; 색상 : # 6c7786; 글꼴 크기 : 1.1em; 텍스트 그림자 : #fefefe 1px 0 1px; 줄 높이 : 1.375em; 커서 : 포인터; }
그런 다음 미묘한 빛이있는 멋진 호버 효과를 상자 그림자 방법:
.btn : hover, .btn : focus {-moz-box-shadow : # 129ceb 0px 0px 2px; -webkit-box-shadow : # 129ceb 00 2px; 상자 그림자 : # 129ceb 000 2px; 배경 : # e6e9eb; 배경 : -webkit-gradient (linear, 0 % 0 %, 0 % 100 %, from (# f7f7f7), color-stop (0.55, # f6f6f7), to (# e6e9eb)); 배경 : -moz-lineargradient (중앙 상단, # f7f7f7, # f6f6f7 55 %, # e6e9eb); 색상 : # 45484b; 텍스트 그림자 : rgb (255,255,255) 1px 1px 0; 테두리 색상 : # c9c9c0; }
이제 저는 선형 그래디언트 코드를 작성하는 것을 좋아하지 않습니다. 길고 혼란 스럽습니다. 보시다시피, 저는 -moz, -웹킷, 표준 모델입니다. -o 및 -ms 버전을 포함하려면 코드를 두 배로 늘려야합니다.
다른 두 가지 옵션이 있습니다. 하나는 CSS3 생성기입니다. ColorZilla를 포함하여 웹에서 여러 가지를 사용할 수 있습니다. 하지만 게임을 좀 더 발전시키고 싶다면 Sass에 뛰어 드는 것을 고려해보십시오. Compass와 결합하면 신의 선물입니다.
Sass + Compass : 마법처럼 맛있는
CSS4 유니콘 에디션에 대한 기대를 멈출 수 있습니다. 여기에 Sass + Compass라고합니다. Sass는 Syntactically Awesome Stylesheets의 약자입니다. 변수, 믹스 인, 익스텐더 및 기타 장점을 추가하여 CSS3의 모든 전통적인 이점을 계승합니다.
저는 최근에 같은 파란색 음영에 30 개 이상의 변형이있는 5,000 줄 CSS 파일을 리팩토링했습니다. Sass를 사용하여 모든 변형을 다음 코드로 대체했습니다.
색상 : $ blue;
정의함으로써 $ blue 내 _variables.scss 모든 CSS 또는 SCSS 파일이 참조 할 수있는 기본 색상을 만들 수 있습니다. CSS를 작성하는 누구나 사용할 수 있습니다. $ blue 스포이드 사용, 16 진 코드 또는 RGB, RGBA 또는 HSL 색상 찾기에 대해 걱정할 필요가 없습니다.
선형 그래디언트 코드를 기억하십니까? 여러 줄의 코드를 작성하는 대신 다음과 같이하십시오.
@include background (linear-gradient (# b1cfdc, # 7a9cac));
Sass와 Compass가 무거운 작업을 수행하고 올바른 구문을 생성하도록하십시오. 완료. 더 어둡거나 더 밝은 색상 버전을 원한다고 가정 해 보겠습니다. Photoshop에서 스포이드를 이동하거나 Sass에서 밝게 / 어둡게 명령을 사용할 수 있습니다.
@include background (linear-gradient (darken ($ litegray, 2 %), darken ($ off-white, 5 %)));
2 % 어두워 진 선형 그래디언트가 생성됩니다. $ 라이트 그레이 5 % 어둡게 미색. Voil! HEX 또는 RGB 코드도 필요하지 않습니다.
jQuery : 오, 네 가능합니다
고백 할 게 있습니다. 나를 협박하는 데 사용되는 JavaScript. 그런 다음 jQuery를 찾았습니다. 저는 JavaScript 전문가라고 주장하지는 않지만 jQuery를 사용하는 데 필요한 모든 종류의 전환이나 기능을 수행 할 수 있다고 확신합니다.
예를 들어, 새 번호 추가 링크를 클릭하여 화면에 입력 된 보조 전화 번호를 표시하는 기능을 생각해보십시오. jQuery를 사용하여 다음과 같이 작성하면됩니다.
//-프로그레시브 공개-// $ ( '. new-number'). click (function () {$ ( '. alt-number'). fadeIn ( 'fast');});
더 발전된 것을 찾고 계십니까? 아마 플러그인이있을 것입니다. 기본 동작은 쉽고 복잡한 동작은 jQuery로 접근 할 수 있습니다.
프레임 워크
오늘날 가장 강력한 프레임 워크 중 두 가지는 Foundation과 Bootstrap입니다. 이제 CSS 프레임 워크를 무시하기 전에 한 가지 물어 보겠습니다. jQuery를 사용하십니까? 루비 온 레일즈? 장고? 모든 프레임 워크.
jQuery 및 RoR과 마찬가지로 Foundation 및 Bootstrap은 우리가 반복해서 수행하는 작업 (예 : 재설정, 타이포그래피, 그리드, 양식, 버튼, 탐색 및 목록)이 상당히 많다는 사실을 인식하여 탄생했습니다. Foundation과 Bootstrap은 모두 도우미 클래스를 사용하여 반응 형 디자인을 지원합니다. 둘 다 잘 문서화되고 도로 테스트를 거쳤으므로 안심하고 사용할 수 있습니다.
둘 사이의 한 가지 주요 차이점 : Bootstrap은 CSS 전처리를위한 LESS 시스템을 기반으로하는 반면 Foundation은 Sass를 기반으로합니다. 추가 기능으로 인해 Sass를 LESS보다 적게 선호하지만 Sass와 LESS 모두 기존 CSS를 조각으로 만듭니다.
프레임 워크에 대한 마지막 생각. 다른 사람의 프레임 워크의 추가 부풀음을 상속하고 싶지 않은 경우 기존 프레임 워크를 골라 뼈까지 벗겨 내거나 일부 프레임 워크에서 체리를 골라 직접 굴려보세요. 어느 쪽이든 매번 처음부터 시작할 이유가 없습니다.
마지막 생각들
디자인이 최종적으로 어떻게 나올지 더 잘 제어하고 싶으십니까? 더 많은 프로세스를 코드 업스트림으로 이동합니다. HTML5는 마침내 DOM에 의미를 부여합니다. 무의미한 것에 대한 좋은 라이드 DOCTYPEs 및 divitis. CSS3는 새로운 Photoshop입니다 : 선형 그래디언트, 테두리 반경 및 상자 그림자 FTW! 그리고 Bootstrap, Foundation, Sass 및 jQuery와 같은 도구를 사용하면 디자인을 코드로 업스트림하는 것이 그 어느 때보 다 쉬워졌습니다.
Creative Bloq에서 놀라운 HTML5 예제 55 개를 찾아보세요.
