페미위키 사이트 개발 중 디자인 관련 내용을 정리한 문서입니다. 기술 관련 문서는 페미위키:기술을 참고하세요.

1 디자인팀 의사 결정 및 작업 방식

디자인팀의 작업은 디자인 기획 -> 작업 분배 -> 작업 의 순서로 진행됩니다. 각 단계는 모두가 동시에 진행이 완료될 때 까지 대기하는 것이 아닌, 각 큰 갈래의 업무마다 이루어질 예정입니다. 또한 큰 갈래 안에서도 다시 세부적으로 분배하는 것이 가능합니다. 예를 들어, 3분이 담당하기로 한 작업이 있다면, 기획->분배를 다시 거쳐 A님-1번 작업, B님-2번 작업, C님-3번 작업 등이 가능합니다.

디자인 작업의 우선순위는 페미위키:로드맵을 기반으로 합니다.

다음은 각 작업 단계에 대한 상세 설명입니다.

1.1 디자인 기획

  • 큰 틀과 디자인의 방향성 등에 대하여 다같이 의견을 나누는 단계.
  • 일시를 정해 함께 회의를 하거나, 기한을 정해두고 (카톡 혹은 위키를 통해) 의견을 나눕니다.
  • 이 과정을 통해 작업의 순서와 분량을 파악합니다.

1.2 분배

  • 디자인 기획을 통해 파악한 내용을 토대로 각자의 업무를 분담합니다.
  • 작업 분배가 이루어지는 갈래/덩어리는 아직 상의가 필요합니다.

1.3 작업

  • 각자에게 분배된 디자인 작업을 하는 단계입니다.
  • 피드백이 필요하다고 생각이 되는 경우, 카톡 혹은 위키를 이용하여 의견을 나눕니다.

1.4 디자인 원칙

디자인 의사결정은 다음 원칙에 따릅니다.

  • 독자 우선: 독자와 필자의 사용성이 상충할 경우 독자의 사용성을 우선 고려할 것
  • 모바일 우선: 다양한 디바이스를 지원할 것. 특히 모바일 기기에서 원하는 문서를 쉽게 찾을 수 있고, 긴 글도 편하게 읽을 수 있을 것
  • 컨텐츠 우선: 문서의 가독성이 가장 중요. 불필요한 꾸밈 요소나 잘 안쓰이는 요소 등을 최소화화여 필요 없이 주의를 분산시키지 않는다

2 작업 항목

아래 나열된 분류를 통해 작업 중인 항목을 표기합니다. 항목 뒷부분에 서명을 해주시기 바라며, 완료된 경우 항목 앞에 [완료]를 표기합니다.

2.1 기본 디자인 요소

기본적인 디자인 요소. 가장 우선적으로 전체적인 의견이 필요한 부분입니다.

  • [완료] 로고
  • 컬러
    • 대표 컬러 - 연보라색
      • ■302a45 - (@color4)
      • ■4f4b93 - 체크박스 색 등으로 사용중
      • ■5144a3 - (@color3)링크 글자 색 등으로 사용중
      • ■746ccb - (@color2)
      • ■aca8e0 - (#siteNotice border)
      • ■aca7e2 - 버튼 배경색 등으로 사용중
      • ■aca6e4 - (@color1)스킨 등에서 사용중
      • ■c3bffd - 선택된 글자 배경 등에서 사용중
    • 서브 컬러
      • ■a5c831 - 바뀐글 등에서 사용중
      • ■dae8b2 - 주시·주시 해제 알림창 배경색 등으로 사용중
    • 구 토론 문서에서 쓰던 색들[1]
      • ■afc8e7 ■fdba7d ■9ade8d ■fd9998 ■c5b1d4
  • 스킨
    • 컨셉 : 미니멀, 지적 섹시
    • 사이트 레이아웃 그리드
  • 대문
    • [완료] 페미위키 인삿말
    • [완료] 기여자 순위 (게임요소관련)
    • 컨텐츠 바로가기
    • [진행중] 도움말

2.2 공통

사용자 정보 영역

  • 사용자
  • 토론
  • 알림
  • 메시지
  • 환경 설정
  • 주시 문서 목록
  • 기여
  • 로그인/로그아웃

네비게이션 영역

도구 영역

  • 여기를 가리키는 문서
  • 가리키는 글의 바뀜
  • 파일 올리기
  • 특수 문서 목록
  • 인쇄용 판
  • 고유 링크
  • 문서 정보
  • (사용자 페이지인 경우) 사용자 기여
  • (사용자 페이지인 경우) 기록 목록
  • (사용자 페이지인 경우) 이메일 보내기

문서 도구

문서 탭

  • 문서
    • 제목
    • 하위 페이지
    • 분류
    • “XXXX 문서에서 이동”
  • 토론
  • 최근 수정일

검색

저작권 및 각종 안내

  • 저작권 안내
  • 개인정보 정책
  • 페미위키 소개
  • 면책 조항
  • 모바일 보기 / 데스크탑 보기

기타

  • 각종 메시지 (저장되었습니다 등)

2.3 [완료] 문서 읽기 화면

이 글을 보려면 오른쪽 '펼치기' 버튼 클릭

제목

  • 제목 수준 1, 2, 3, 4, 5, 6

인용

  • ...

단락

링크

목록


2.4 최근 바뀜

페미위키:바뀐글

2.5 문서 편집 화면

2.6 검색 결과 화면

2.7 기타

3 참고 자료

3.1 미디어위키 스킨 제작 매뉴얼

  • Part 1: It explains what you need to consider when you’re designing the look and feel of your skin.
  • Part 2: It explains how to get your skin to display content to the user.
  • Part 3: It explains the different aspects you need to test and take into consideration when creating your skin.

3.2 회의록

3.2.1 20160827 회의내용

이 글을 보려면 오른쪽 '펼치기' 버튼 클릭

디자인 관련 결정사항

GNB 한줄에 모두 담는다. 로고(클릭하면 메인), 최근 바뀜, 검색창, 메뉴+Badge.

메뉴 누르면 위에서 아래로 밀고 내려온다. 메뉴는 세 섹션으로 구성:

  • 현재 문서와 관련된 기능들
  • 임의 문서로, 도움말 등
  • 사용자 관련 (로그아웃, 환경 설정 등)

편집 버튼은 제목 우측 끝에(첫 단계 제목(h2)까지만), 마지막 줄 baseline에 맞춰서 편집 아이콘으로. 색 좀 옅게

편집 아이콘을 누르면 모바일은 원본 편집, 데스크탑에서는 편집이 뜬다.

문서 하단 토론, 편집, 원본 편집 및 역사보기, 인쇄용 판, 고유 링크, 문서 정보 등.

모바일 화면에서도 목차 보이고, 본문 접지 않는다.

본문 중 제목에도 번호를 붙인다. (목차와 마찬가지로)


디자인팀 인원을 로고 부분과 스킨 부분으로 나누어서 동시에 진행해야할 것 같으며, 스킨 부분에 지원하지 않으신 분들은 자동적으로 로고 부분에 참여해주시게 됩니다. 추가적으로 스킨에 도움을 주실 분들은 얘기해주세요. 로고 부문 진행해주실 분들은 수요일까지 아이디어 시안 혹은 확실한 방향을 보여줄 수 있는 레퍼런스 2가지와 함께 간단한 설명을 위키 페미위키토론:디자인에 올려주시길 부탁드리겠습니다. 시안 혹은 레퍼런스들을 추려서 다음 주 안으로 의견을 나누어 컨셉을 결정하고, 결정된 컨셉과 같은 방향으로 또 다시 아이디어를 모아보려고 합니다.

오늘 회의에서의 로고 요소에 대한 짤막한 의견도 첨부합니다

- 그래픽 로고와 텍스트 로고 - 그래픽 로고와 기본 텍스트 (패턴화가 쉬운) - 텍스트+아이콘이 합쳐진 디자인 (FEMIWIKI에서 F만 그림이라던지)

  1. https://github.com/femiwiki/femiwiki.com/commit/3cf400535cc7691bebdc7fd5904a2da9632a0cb4#diff-eecde246eae2f8d38f1637a114c6e87e