편물
내 경력을 시작할 때 필요했던 누락된 조언
유사한 실수를 하지 않고 인생의 귀중한 세월을 낭비하지 않도록 돕기 위해 Paul Boag는 경력 초기에 배운 교훈과 어려운 진실을 공유합니다.
더 읽어보기웹사이트 속도 테스트 이미지 분석 도구 소개
웹 개발자는 하이퍼텍스트를 작성하는 데 하루를 보내지만 바이트 단위로 웹의 대부분은 이미지로 구성됩니다. 이미지가 평균적인 웹 페이지의 성능에 미치는 영향은 아무리 강조해도 지나치지 않습니다. 더 빠른 웹 사이트는 도달 범위가 더 넓고 영향력이 더 큽니다. **웹사이트 이미지의 성능을 향상**하기 위해 할 수 있는 가장 먼저 할 수 있는 가장 중요한 일은 이미지를 측정하는 방법을 파악하는 것입니다. 당사의 (Cloudinary) 이미지 스마트를 활용하여 모든 웹사이트의 이미지 성능을 측정, 진단 및 (결정적으로) 전달할 수 있도록 하는 완전 무료 도구인 _Website Speed Test_를 입력하십시오. 더 나은 점은 Pat Meenan의 WebPagetest 위에 구축되고 통합된다는 것입니다. 관심있는? 읽어!
더 읽어보기3D 비디오를 촬영하기 위해 iOS 앱을 구축한 방법(사례 연구)
이 기사에서 Evgeny Khrolenok와 Igor Mikheiko는 사람들이 자신만의 3D 스테레오 비디오를 만드는 데 도움이 되는 앱을 개발하면서 배운 내용을 공유합니다.
더 읽어보기Markdown에서 Shadow DOM으로 패턴 라이브러리 구축하기
어떤 사람들은 문서 작성을 싫어하고 다른 사람들은 그냥 쓰기를 싫어합니다. 나는 글쓰기를 좋아하게 되었습니다. 그렇지 않으면 이 글을 읽지 않을 것입니다. 전문적인 지도를 제공하는 디자인 컨설턴트로서 글쓰기는 내가 하는 일의 큰 부분을 차지하기 때문에 글쓰기를 좋아하는 데 도움이 됩니다. 그러나 나는 워드 프로세서를 싫어하고, 싫어하고, 싫어한다. 기술 웹 문서를 작성할 때(읽기: [패턴 라이브러리](https://www.smashingmagazine.com/taking-pattern-libraries-next-level/)) 워드 프로세서는 불순종할 뿐만 아니라 부적절합니다. 이상적으로는 문서화하는 구성 요소를 인라인으로 포함할 수 있는 쓰기 모드가 필요하며 문서 자체가 HTML, CSS 및 JavaScript로 만들어지지 않는 한 불가능합니다. 이 기사에서는 단축 코드 및 Shadow DOM 캡슐화의 도움으로 Markdown에 코드 데모를 쉽게 포함하는 방법을 공유할 것입니다.
더 읽어보기주간 디자인 회의를 활용하는 방법
어떻게 팀의 참여를 유지합니까? 팀에서 출시되는 모든 정보를 최신 상태로 유지하려면 어떻게 해야 합니까? 팀원들은 얼마나 자주 서로 얼굴을 맞대고 이야기합니까? 업무를 완수하거나 성장을 추구하는 데 충분한 지원을 받고 있습니까?
더 읽어보기왼손잡이 브러시 레터링: 시작하는 방법
레터링과 서예는 디자이너의 도구 상자에서 빠르게 원하는 기술이 되고 있습니다. Marian Bantjes, Jessica Hische, Sean Wes, Martina Flor와 같은 디자이너들은 우리 모두에게 영감을 줄 뿐만 아니라 표준이 되었습니다. 그들의 작업은 클라이언트 기반만이 아닙니다. 그들은 팔로워들에게도 제품을 제공함으로써 그들 자신의 브랜드가 되었습니다. 다른 디자이너들도 그 뒤를 따랐고 이제는 레터링과 서예가 도처에 있는 것처럼 보일 것입니다.
더 읽어보기완벽한 아코디언 디자인
디자인 패턴. 종종 경외감이나 분노를 불러일으키는 거의 신화적인 문구입니다. 디자이너로서 우리는 디자인 패턴을 적절한 고려 없이 거의 기계적으로 다양한 컨텍스트에 적용할 수 있는 일반적인 기성 솔루션으로 생각하는 경향이 있습니다. 항해? 캔버스 밖에서! 오늘의 거래? 회전 목마! 당신은 아이디어를 얻을.
더 읽어보기큰 것이 충분하지 않을 때: 영웅 이미지로 디자인하기
사용자가 귀하의 페이지를 방문하면 일종의 반응을 느낄 것입니다. 그것이 긍정적이든 부정적이든, 그 반응은 대부분 그들이 보는 것에 의해 결정됩니다. **시각은 아마도 인간의 가장 강력한 감각**이기 때문에 영웅 이미지는 사용자의 관심을 끄는 가장 빠른 방법 중 하나입니다. 대담하고 그래픽적이며 의도적인 이미지가 사용자를 사로잡습니다. 사용자를 즉시 끌어들이고 미니멀리스트 앱이나 웹사이트의 완벽한 중심이 됩니다. 영웅 이미지는 단순히 예쁜 그림 그 이상입니다. 강력한 커뮤니케이션 도구입니다. 이 기사에서는 영웅 이미지 사용에 대한 몇 가지 팁을 제공합니다. 또한 시작하여 자신의 디자인을 좀 더 다르게 프로토타이핑하고 와이어프레이밍하려는 경우 _Adobe XD_를 무료로 다운로드하여 테스트할 수 있습니다.
더 읽어보기계속 스크롤하십시오! 길고 긴 페이지를 디자인하는 방법
길거나 [무한 스크롤](https://www.smashingmagazine.com/2013/05/infinite-scrolling-lets-get-to-the-bottom-of-this/)이 있는 웹사이트가 최근 점점 보편화되고 있습니다. 단순한 추세나 우연이 아닙니다. 긴 스크롤 기술을 사용하면 사용자가 중단이나 추가 상호 작용 없이 콘텐츠 청크를 탐색할 수 있습니다. 사용자가 페이지를 아래로 스크롤할 때 정보가 표시됩니다.
더 읽어보기CSS Poly Fluid Sizing을 사용한 Fluid Responsive Typography
Fluid 레이아웃은 수년간 프론트엔드 개발의 정상적인 부분이었습니다. 그러나 유동적 타이포그래피에 대한 아이디어는 비교적 새로운 것이며 아직 완전히 탐구되지 않았습니다. 지금까지 대부분의 개발자들의 유동적인 타이포그래피 아이디어는 최소 및 최대 크기가 있는 뷰포트 단위를 사용하는 것입니다. 이 기사에서 우리는 그것을 다른 수준으로 가져갈 것입니다. 잘 지원되는 브라우저 기능과 몇 가지 기본 대수학을 사용하여 여러 중단점과 미리 정의된 글꼴 크기에 걸쳐 **확장 가능하고 유동적인 타이포그래피를 만드는 방법**을 검토할 것입니다. 가장 좋은 점은 Sass를 사용하여 모든 것을 자동화할 수 있다는 것입니다.
더 읽어보기