디자이너의 도구 집합 : 워크 플로, 소프트웨어 및 웹 사이트

소프트웨어 개발자, 콘텐츠 작성자, 마케팅 담당자 등과 마찬가지로 디자이너는 일상적인 작업을 처리하는 데 도움이되는 훌륭한 도구 세트가 필요합니다. 여기서 우리가 시도한 것은 이러한 도구, 워크 플로 및 이러한 도구를 결합하여 작업 속도를 높이고 실수와 오류 가능성을 줄이는 방법을 설명하는 것입니다.

정보를 수집하다

새로운 프로젝트가 오면 처음 몇 시간은 주로 클라이언트가 직면 한 문제, 목표, 좋아하는 것 등 그에 대한 정보를 수집하는 것입니다.이 중요한 단계에서 디자이너는 다음과 같은 정보를 얻으려고 노력해야합니다. 가능한 한 많은 유용한 데이터를 사용하여 나중에 교육적인 결정을 내리는 데 사용됩니다.

Evernote

Evernote는 놀라운 소프트웨어입니다. 단순한 메모 용 앱이 아닙니다. 파일을 저장하고 컬렉션, 태그, 그룹 등으로 결합 할 수 있습니다. 강력한 검색을 통해 이전 프로젝트 등으로 다시 참조 할 수 있습니다. 물론 가장 강력한 측면은 사용 방법입니다. 일부 조직 접근 방식에 대한 대략적인 지침이 있습니다.

이메일, Slack, Zoom…

다음은 또 다른 명백한 것입니다. 그러나 우리가 그것을 추가 한 이유가 있습니다. 전화, 메시지 또는 화상 회의를 연기하는 것은 프로젝트에 큰 지연이 될 수 있습니다. 종종 화면을 공유하고 목업, 와이어 프레임, 개념 및 디자인을 검토하는 기능은 생명의 은인입니다. 잊지 마세요

영감 찾기

정보가 충분하면 다음 단계는 영감을 수집하는 것입니다. 앱 / 웹 사이트의 모양, 스타일, 목표 등 사용할 수있는 새로운 기술이나 다른 유형의 미디어에 대한 멋진 아이디어가 있습니까? ? 모든 디자이너는 웹 사이트, 서적, 잡지 등 무엇이든 좌우로 영감을 얻습니다.

Dribbble, Behance 및 유사 웹 사이트

바로 이러한 이유로 Dribbble과 같은 웹 사이트가 존재합니다. 그곳에서 디자이너들은 우리가 현재 직면하고있는 문제를 해결하는 아이디어와 접근 방식을 찾아 볼 수 있습니다. 때때로 목표는 "서비스 A에 대한 일반 판매 페이지"를 구축하는 것입니다. 그 판매 페이지에는 말 그대로 재고 사진이있는 몇 개의 단락이 있습니다. 전혀 영감을주지 않는 목표이지만 현실적입니다. 음, 색상, 타이포그래피, 간격 등의 조합은 모두 조금 더 독특 할 수 있습니다. 다른 레이아웃도 시도해보세요! 그리고 그 아이디어는 3-4 년 전에 게시 된 임의의 랜딩 페이지에서 나올 수 있습니다. 99Design의 디스커버리 페이지도보기 좋은 곳입니다!

Awwwards

Awwwards와 같은 사이트는 실제로 구축되고 작동하는 것으로 볼 수있는 것을 보여주기 때문에 별도의 카테고리에 분류합니다. 또한 "모든 디자인 작업"이 아닌 예술적인 방식에 더 중점을 둡니다. 대부분의 경우 사이트가 너무 무거워서 고급 컴퓨터에서만 사용할 수 있지만 여전히 사이트에서 영감을 얻을 수 있습니다.

색상 팔레트 / 브랜딩

사전 정의 된 색상이없는 새로운 빌드의 경우 작업을 시작하는 단계 중 하나는 새 사이트에 맞는 것을 선택하는 것입니다. 접근하는 방법에는 두 가지가 있습니다. 기존 색 구성표를 선택하거나 기본 / 보조 색을 설정하고이를 기반으로 전체 구성표를 수정하는 것입니다.

ColorHunt

Color Hunt와 같은 웹 사이트는 커뮤니티에서 만든 색상 팔레트 컬렉션을 제공합니다. 직접 선택하여 사용하거나 시작할 기본 색상을 선택할 수 있습니다. 예쁘지는 않지만 Color Lovers도 비슷합니다.

BrandColors

BrandColors는 약간 다른 목표를 가지고 있습니다. 주요 브랜드 목록과 색상 구성표를 제공합니다. 빌드에 영감을 줄 수있는 멋진 색조와 조합을 찾을 수 있습니다. 색상은 저작권의 대상이 아니지만, 예를 들어 Amazon과 같은 곳에서 모든 색상을 복사하여 붙여 넣는 대신 약간의 색상을 사용하는 것이 좋습니다.

프리미엄 및 무료 자산

사이트의 모든 구성 요소에 대해 작업 할 시간이 항상 충분하지는 않습니다. 때로는 다른 디자이너 / 사진가가 만든 아이콘 팩, 일러스트레이션 또는 스톡 사진을 가져 와서 직접 사용하는 것이 가장 좋습니다.

• Font-Awesome – 글꼴 글리프 형태의 거대한 아이콘 모음
• Envato Elements – 좋은 가격에 엄선 된 프리미엄 품질 자산.
• Unsplash – 고품질 무료 사진 모음집
• squircley, getwaves, blobmaker와 같은 SVG 생성기
• Adobe Fonts (유료) 및 Google Fonts (무료)

여기에서 가장 좋은 팁은 위와 같은 사이트를 몇 개 찾아서 가까이 두어 작업에 가장 적합한 그래픽을 검색하고 찾는 데 필요한 시간과 노력을 최대한 줄이는 것입니다.

주요 디자인 도구

초기 작업을 중단하면 실제로 디자인을 구축하게됩니다. 디자이너를위한 모든 진보적 인 소프트웨어에는 웹 / 앱 디자인을 구축하는 데 필요한 모든 도구가 있으므로 와이어 프레임 도구는 건너 뛰겠습니다.

Figma

DevriX에서 디자인 작업을위한 핵심 선택은 Figma입니다. Linux, Mac 또는 Windows 등 팀의 모든 구성원이 액세스 할 수있는 브라우저 기반 앱은 물론 뛰어난 공동 작업 기능을 제공합니다. 이전에는 Adobe XD를 사용했지만 Linux 기반 멤버는 사용할 수 없었고 Sketch는 Mac에서만 잠겨 있습니다.

일러스트 레이터 / 어피 니티 디자이너

더 많은 사용자 정의 작업의 경우 Illustrator 또는 Affinity Designer가 최고의 선택입니다. 지난 1 ~ 2 년 동안 맞춤형 일러스트레이션은 웹 사이트에서 가장 인기있는 부분 중 하나였습니다. 크고 화려한 그래픽이 접힌 부분을 지배하고 올바른 도구에 대한 더 많은 경험은 확실히 좋은 일입니다. 여기에서 웹 페이지에서 자산으로 사용할 수있는 3d 모델 렌더링을 위해 Blender와 같은 3D 소프트웨어를 추가 할 수도 있습니다.

포토샵 / 어피 니티 포토

Photoshop은 웹 디자인을위한 최고의 소프트웨어였습니다. 특히 웹에 주로 초점을 맞춘 이러한 모든 훌륭한 도구가 있기 때문에 오늘날 이상하게 들릴 수 있습니다. 그러나 Photoshop은 여전히 ​​훌륭한 도구이며 모양 / 양식을 편집하거나 잘라야하는 사진이있을 때 자주 사용합니다.

표시

하지만 디자인 작업 만이 아닙니다. 정적 PNG입니다. 모션 그래픽과 인터랙션에 좀 더 집중하는 일부 디자이너. 마우스 오버, 스 와이프 또는 클릭시 요소가 어떻게 작동해야하는지에 대한 좋은 데모는 프런트 엔드 개발자의 작업에 크게 도움이됩니다. Figma와 Adobe XD 모두 도움이 될 수 있지만 둘 다 제한적입니다.

Adobe After Effects

애프터 이펙트는 모션 그래픽의 첫 번째 선택 중 하나로 간주됩니다. 모든 동작과 애니메이션을 나타내는 데 필요한 모든 도구를 제공합니다. 여기서 디자이너에게 상기시키는 좋은 점은 애니메이션은 웹의 한계를 따라야한다는 것입니다. 모션 블러를 추가하는 것은 할 수있는 일이 아닙니다. 따라서 더 고급 애니메이션에 들어가면 프론트 엔드 개발 팀과 확실히 논의하거나 웹에서 애니메이션과 가능한 것에 대해 자세히 읽어보십시오. UX와 A11y도 마찬가지입니다.

저장

Figma와 Adobe XD는 클라우드에 중점을두고 있으므로 작업 손실에 대해 걱정할 필요는 없지만 Photoshop, Illustrator 파일, 다운로드 한 글꼴, 사진 등 모든 것이 컴퓨터에 상주하는 것은 아닙니다.

특히 둘 이상의 컴퓨터에서 작업하는 경우 백업하고 항상 액세스 할 수 있도록하는 것이 가장 좋습니다. 그리고 공유에 관해서는 매우 쉽습니다.

드롭 박스

이를위한 최고의 선택은 Dropbox입니다. 사용하기 쉬운 데스크톱 앱으로 파일을 계속 감시하고 변경하는 즉시 클라우드에 동기화합니다. 여기에서 클릭 한 번으로 고객 또는 팀과 공유 할 수 있습니다.