설계 전환 개선

4487 단어 designtipsuxhandoff

간단한 소개
훌륭하고 성공적인 디지털 제품을 만들려면 많은 일을 해야 한다.예를 들어 기획, 시장 연구, 원형 구축, 디자인, 코드, 출하 등등...전체 과정을 완성하려면 대량의 인수인계와 팀 소통을 해야 한다.더 고통스러운 전환 중 하나는 디자인에서 개발로의 전환이다.
디자인과 개발은 보통 두 개의 독립된 팀에서 이루어지기 때문이다.디자인 팀은 디자인 시스템, 사용자 인터페이스, 도형과 시각적 효과를 만드는 것을 책임진다.개발팀은 디자인 성과를 기능성 제품으로 전환시켰다.

그렇다면 디자인에서 개발까지의 인수인계는 무엇일까?
디자인 이양은 디자인 팀이 납품할 수 있는 성과를 개발 팀에 이관하는 것을 말한다.그리고 개발팀은 실현부터 시작한다.만약 실시 기준이 없다면 이 과정은 악몽으로 변할 수도 있다.제품의 품질이 위태롭기 때문에, 이것은 두 팀 간의 양호한 합작을 위한 좋은 생각이다.
이것은 로켓 과학이 아니다.대량의 도구와 플랫폼이 설계 인수인계를 간소화하는 데 쓰일 수 있다.디자인의 순조로운 인수인계를 유지하기 위해 디자이너와 개발자는 반드시 디자인 과정에 참여해야 한다.다음은 디자이너와 개발자가 디자인 인수인계를 어떻게 개선하는지에 대한 기교들입니다.

디자이너에게 주는 조언
  • 프레임에 관심이 있다.개발자와 그들이 계획한 틀에 대해 토론하고 관련 내용을 읽는다.그들이 사용하고 있습니까Bootstrap?아니면Tailwind CSS?그것과 그 가능성의 한계성을 이해하다.이러한 가능성과 한계를 이해하면 더욱 적합한 디자인 요소를 만드는 데 도움이 될 것입니다.
  • 프레임을 검토한 후 프레임에 포함된 UI 요소를 사용해 보십시오.프레임의 팔레트, 간격, 레이아웃 설정 및 매핑할 수 있는 모든 내용을 매핑합니다.
  • 디자인된 플랫폼의 디자인 추세를 따른다.예를 들어 iOS 프로그램을 설계하고 있다면 탭 높이를 함부로 설정하지 마세요.iOSAndroid 모두 디자인 가이드가 있으니 꼭 읽어야 합니다.개발팀은 이 때문에 당신에게 감사할 것입니다!
  • UI 설계를 위해 현대적인 도구를 사용합니다.포토샵을 버릴 때가 됐어.Adobe 생태계에 남고 싶으면 가보세요 Adobe XD.만약 없다면, 나는 한번 볼 것을 건의합니다 Figma.

  • 개발자에게 보내는 팁
  • 디자이너가 계획한 틀을 가르쳐 줍니다.동시에 그들이 계획적으로 사용하는 디자인 도구를 가르쳐 달라고 한다.Figma, Adobe XD, Sketch 또는 디자인 팀이 사용하는 모든 것을 사용하는 방법을 배웁니다.이 도구를 사용하여 설계와 구축 제품을 볼 수 있으므로 반드시 검토해야 합니다.
  • 디자인 시스템은 디자이너만을 대상으로 하는 것이 아니다.디자이너와 이야기를 나누고 코드로 디자인 시스템을 만든다.만약 당신이 웹 사이트를 개발하고 있다면, 테마를 만듭니다.배치하다.js 파일을 만들고 거기에 디자인 시스템을 설정합니다.팔레트, 간격 및 레이아웃 시스템을 추가합니다.가능한 한 디자인 시스템의 어떤 요소도 잊지 마세요.js 파일은 간단할 거예요.다음은 당신을 시작하게 하는 것들입니다.
  • module.exports = {
       colors: {
          ...
       },
       fontFamily: {
          ...
       },
       margin: {
          ...
       },
       padding: {
          ...
       }
    }
    
  • 설계 시스템을 설치한 후 시스템 외부의 값을 사용하지 마십시오.만약 디자인 시스템의 여분이 18px와 20px라면 어느 곳에서든 19px를 사용하지 마세요!테마 파일을 가져옵니다. 정의된 내용만 사용합니다.
  • 디자인 시스템을 볼 때 천박하지 마세요!모든 세부 사항이 매우 중요하다.설계자가 배경#121212을 로 설정하면 검정색으로 간주하지 않고 검사 없이 #000000로 설정합니다.모든 것을 검사하다.색상, 글꼴 크기, 행 높이 및 경계 반지름을 확인합니다.너는 다른 생각을 할 수 있지만, 바로 이 작은 물건들이 디자인을 완전하게 느끼게 한다.

  • 두 팀에 대한 조언.
  • 소통.운에 맡기지 마라.만약 당신이 어떤 일에 대해 확실하지 않다면 동료와 소통하세요.
  • 필기를 남기다.Figma 및 Adobe XD와 같은 현대 디자인 도구에 주석이 내장되어 있습니다.두 팀 모두 평론 시스템을 이용하여 질문과 해석을 추가할 수 있다.
  • 당신의 일을 돌이켜 보세요.하나의 기능을 완성한 후에는 반드시 그것을 검사해야 한다.두 팀 말이야.코드가 깨끗하고 설계가 정확함을 확보하다.

  • 결론
    팀워크가 항상 그렇게 쉬운 것은 아니다.하지만 이것도 악몽은 아니다.네가 사용하고 있는 공구에 대해 현명해야 한다.이 밖에 소통에 있어서는 똑똑해야 한다.개발자와 디자이너가 완전히 동기화되면 놀라운 일이 일어난다.

    무료 Figma 템플릿
    무료 Figma 템플릿을 보려면 원본 게시물here으로 이동하십시오.

    좋은 웹페이지 즐겨찾기