개발자와 디자이너 협업스터디 200919

만다라트 기법
->키워드 찾기

브랜드 아이덴디티
->첫인상 만들기(이걸 만다라트로 함)

 

만다라트 키워드(부드러운, 달콤한, 부드러운 등등)에서 뽑아낸 느낌으로 컬러칩을 만든다

color.adobe.com/ko/create/color-wheel

https://color.adobe.com/ko/create/color-wheel

메인컬러 2~3개
서브컬러 2~3개

선정 후 디자인 시작하면 된다

 

레퍼런스 찾기 시작

behance.net에서
1)research 웹디자인 파랑
2)developer 웹디자인 파랑
3)designer 웹디자인 파랑

 

 

디자인선행작업
1)키워드 도출(만다라트로 이용)
2)컬러 키워드 ->산정 
메인/서브 컬러 만들기
3)레퍼런스 찾기(behance pinterest 드리블 노트폴리오 사이트를 활용해서)
핀터레스트가 드리블이랑 비핸스랑 다 연결되어 있음
4)디자인가이드(개발자에게 컨벤션이랑 같다)

개발자의 컨벤션 = 디자인가이드

 

예시1

저는 미팅때 주요 키워드를 3가지 정도 뽑아와서 
로고 디자인도 프로젝트에 포함되어있으면 브랜딩 작업 우선하고요
핀터레스트에서 관련된 키워드 전부다 검색해서 이미지 자료들을 스케치 파일로 불러옵니다
그중에서 이미지 맵처럼 만들어서 브랜드 로고 먼저 만들고 색상은 마지막에 선택하는 편이며, 사이트 디자인은 로고 결정된 후에 작업 시작합니당

 

예시2
회사BI가 정해진 경우
저는 현재는 회사사이트 리뉴얼디자인하는게 거의 전부라서 말씀하신대로 로고랑 대표이미지색상이 정해져있어서 그거에 맞게 웹사이트 많이 봐요 요즘 웹사이트어떻게 구성되어있나 그래서 그거 짜집기해서 메인만들고 서브페이지 작업합니다

인하우스 회사
자체서비스를 디자인하는 회사임(외주아니고/외부신경안쓰고)


서핏
-크롬앱
-디자인 아티클을 보여줌
-최신 트렌드를 보여줌
ex)밀리의 서재 디자인가이드를 배포했다(확인)

 

 

www.carbondesignsystem.com/

디자인 가이드 잘된 곳

carbon design system으로 검색
디자인도 되어있지만 코드값도 잘 되어있다

 

공부하는데 가장 좋은것은 커뮤니티이다~
저작자가 직접 올리기 때문에
디자인 몰라도 가입해보자


TODO)
디자인에 필요한 크롬 앱 검색해서 찾아보기

---

개발쪽은 스크립트 진행
html css는 대소문자 구문안하자미나
스크립는 대소문자 구분함

 

HTML

<button class="btn">button</button>
<div class="article">article text</div>

 

CSS

.article{
display:none;
}

.article.--act{
display:block;
}

 

JAVASCRIPT

let $btn = document.querySelector(".btn");
let $article = document.querySelector(".article");

 

$btn.addEventListener("click", function(){

  $article.classList.toggle("--act");

 

});

 

구글에서

자바스크립트 선택자
자바스크립트 변수
자바스크립트 이벤트 부여
자바스크립트 클래스 제어

라고 검색하면 많이 나옴

 

함수로 만들어서 재사용할수 있다^^ 토글되는 것들을 여러개 만들데 다음의 함수를 이용한다
fuction setClickEvent(btnName, articleName){
  let $btn = document.querySelector(btnName);
  let $article = document.querySelector(articleName);

  $btn.addEventListener("click", function(){

    $article.classList.toggle("--act");

 });

};

 

setClickEvent(".btn", ".article");

 

---

리디자인해보자

 

리디자인
기존서비스를 두고 새롭게 디자인하는 방법(포트폴리오처럼)

26일까지 하고 서비스 선정하기
메인만 구축/디자인 하기
서비스 사이트 골라보기

아이콘은 svg로 한다

잘 전달되면 좋은 디자인
의도한 봐가 잘 전달되는지

---

figma에서 svg넣으면 된다
figma앱에서 드래그앤 드롭하면 된다