디자인

─────────────────────────────────── 

 

1.질문 분야 : 상세페이지 제작시 유의해야하는것들?..

2.질문하기 전에 검색해본 내용 :  상세페이지 작업, 기본사양 픽셀등 


3.질문 내용 :  안녕 톨들아 인쇄업 종사하는 톨인데 , 이번에 작은업체 홈페이지에 상세페이지 제작을 하게되었는데...

웹관련 된거라고는 학교다닐때 반응형웹디자인 껍데기만 만드는거 해봤거든 ㅠㅠ 인쇄업 종사자라... 당연히 포토샵은 일러에 비해 상대적으로 많이 미숙해 ㅠㅠ

 상세페이지 작업을 해야하는데  포토샵으로 레이어 정리하면서 해야한다고 알고 있거든? 그래서 이것저것 알아봤는데.. 한번 봐줄수있을까? ㅠㅠ 회사에 디자인쪽사수는 한명도 없어가지고 ㅠㅠ..


벡터작업에 익숙해서 늘 해상도 300으로 작업을했었는데  상세페이지는

15.6cm = 442 픽셀 (72 해상도 기준)-

기본 작업사양이 72해상도에 , 가로 860px로 보통 작업-

글꼴은 12pt 이상은 되야 잘보인다/레이어정리 필수-

세로는 디자인 레이아웃 보면서 늘리면서 작업..?-

헤더(헤드라인)/본문(디테일)/푸터(판매자 정보같은거?기타사항) 크게 세항목으로 나눠서 기획-

통으로 작업하고 후에 사진파일로 만들어서 잘라쓰기-

png로 저장-

-작은부분>큰부분 순서로 디자인


이정도 알아봤는데 ㅠㅠ 혹시 틀린부분이나  작업시에 체크해야하거나 참고할만한 사항같은게 있으면 좀 알려줄수있을까? 

ㅠㅠ부탁해 톨들아... 막막하다 상세페이지는 처음 작업해봐서 잘할수 있을련지 ㅠㅠ...



─────────────────────────────────── 

  • tory_1 2019.01.15 14:05
    가장좋은건 동종업계 사이트에 있는 상세페이지 참고하면 좋을것같아!
  • tory_2 2019.01.15 19:42
    삭제된 댓글입니다. (삭제일시: 2019/01/16 03:49:57)
  • tory_3 2019.01.15 21:22
    잘 알고 있는데!
    핀터레스트에서 상세페이지만 검색해도 많이 나오고 동종업계 상세 확인해보는것도 처음에 감 잡을때 도움될거야. 첨에 본문 서브타이틀 헤드 각각 폰트, 사이즈 동일하게 잡아 놓으면 계속 작업할때 편하고 좋을거야
  • W 2019.01.16 11:13

    폰트 사이즈를 동일하게 밥으라는게, 예를 들어 헤드는 15 / 본문용 12 이런식으로 딱딱 정해서 통일 시키라는 말이지?? ㅠㅠ

  • tory_3 2019.01.22 01:16
    @W

    너무 늦게 댓글 다는 것 같은데 ㅠㅠ 

    어 맞어. 상세 페이지 여러개 작업해야할텐데, 상품명, 인트로페이지 헤드, 서브타이틀, 상품설명 폰트나 사이즈 통일 시켜 놓으면 전체적으로 놓고 봤을때 깔끔하니 통일감 있어서 클라이언트 만족도도 높고 소비자도 깔끔하게 볼 수 있고!

    내가 말을 어렵게 꺼냈나봐 토리가 말한 것처럼 하면 돼! 

  • tory_4 2019.01.15 23:11
    윗 톨 말대로 폰트 크기를 공통으로 지정 해놓고 디자인 하는거 추천! 그 편이 코딩할때 엄청 편해! 사용하는 웹폰트명이랑 h1 은 헤드 타이틀 66px 이런식으로 스타일 가이드 만들면 조아
  • W 2019.01.17 12:29

    코딩이 홈페이지만들때?..그런거말하는거아녀? 나 웹디쪽은 문외한이라 ㅠㅠ 그냥 그 쇼핑몰 상세페이지에들어가는 그런것들만 디자인하는거야!!

  • tory_1 2019.01.16 21:14

    쓴톨이는 페이지 전부 포토샵파일로 작업한다는 말 아냐?? 코딩얘기가 나오는걸 보니 내가 잘못이해한건가 ㅜㅜㅜ


  • W 2019.01.17 18:52

    응응맞아 나는 코딩 ㄴㄴ 그냥 그 상세페이지만 디자인해서 주면대!

  • tory_6 2019.01.17 18:34

    유투브에 상세페이지 만드는 모습 보여주는 강좌있어- 연지인가 그런 이름인데 그거 보면 될듯 

  • W 2019.01.17 18:52

    한번봐자야겟다 정보고마워 톨아 ><

  • tory_7 2019.01.18 01:06
    삭제된 댓글입니다. (삭제일시: 2021/11/02 08:56:48)
  • tory_8 2019.01.18 13:58

    요즘 보통 컨텐츠 영역을 가로 1000px로 작업하구 풀 여백은 1920px까지 작업해

    워낙 와이드 모니터를 많이 쓰다보니까!

    핀터레스트에 검색해서 잘된 거 벤치마킹 좀 하구 작업 하면 편할거야~

  • tory_9 2019.01.21 09:58

    구간 섹션별로 정리하면 좋지. 공통으로 들어가는 부분의 이미지들이나 바뀔 부분들 나눠주고 여백이나 간격 통일 시키고.. 폰트 통일, 이미지 박스 여백 통일 이정도만 해도 깔끔하게 잘 나올거야! 다른 톨들 말대로 벤치마킹해서 시작하면 어렵지 않을거 같아!

  • W 2019.01.24 17:39

    다들고마워 ~ 복받아 >< (하트) 많은 도움이되었어

  • tory_10 2022.12.05 15:30

    강같다 조만간 상세페이지 제작할 일 생길거 같은데 스크랩할게 톨들아!!!


List of Articles
번호 분류 제목 날짜 조회
전체 【영화이벤트】 이미 2024년 최고의 공포 🎬 <악마와의 토크쇼> 레트로 핼러윈 시사회 76 2024.04.16 2968
전체 【영화이벤트】 두 청춘의 설렘 가득 과몰입 유발💝 🎬 <목소리의 형태> 시사회 12 2024.04.16 1851
전체 【영화이벤트】 🎬 <극장판 실바니안 패밀리: 프레야의 선물> with 실바니안 프렌즈 무대인사 시사회 17 2024.04.12 4915
전체 디미토리 전체 이용규칙 2021.04.26 564184
공지 아기다리고기다리던 동맹 만들었어 ∠( ᐛ 」∠)_ * 이용방법 수정 68 2019.01.14 100510
공지 디자인교실 공지사항 15 2018.01.16 99063
모든 공지 확인하기()
2076 잡담 나나세 아오이란 사람 나무위키 왜 이렇게 길어 ㅋㅋ.. 3 2024.04.18 65
2075 질문 간단한 3D 도형 그릴 수 있는 프로그램 있을까? 5 2024.04.18 54
2074 잡담 디자인은 취향과 분야를 많이 타서 경력있어도 불안해 2 2024.04.17 51
2073 잡담 전문 분야를 통달한 사람은 정말 멋잇군아... 2 2024.04.17 79
2072 질문 영화 포스터 폰트 뭘까? (한글) 3 2024.04.16 111
2071 질문 애프터이펙트로 이런 그래프랑 숫자 변하는거 2 2024.04.12 81
2070 질문 윤명조 300 시리즈 중 320 340 어떻게 하면 쓸수있을까 2 2024.04.11 85
2069 질문 공모전 출품 사이즈 관련해서... 14 2024.04.09 92
2068 질문 그림판에서 정한 색깔을 업체에 알려주려면 어떻게 해야해? 2 2024.04.09 104
2067 질문 포토샵, 일러스트 버전을 2021로 낮추고 싶은데 뭘 받아야 해? 2024.04.08 58
2066 질문 혹시 손목때문에 병원다니는 사람 있니? 5 2024.04.04 135
2065 질문 프로크리에이트 파일을 프로크리에이트 파일에 가져오는 방법 없을까? 2024.03.28 54
2064 질문 가구 쪽 웹디들아 너네 가구 합성 많이 해?? 8 2024.03.21 246
2063 질문 이거 폰트 뭘까 2024.03.20 193
2062 질문 한글 제안서 특정 폰트만 써야하는 디자인 어떻게 해야할까..? 2 2024.03.19 151
2061 질문 아이브 유진 인스타에 올라온 이 사진보정 어플 뭘까? 2 2024.03.17 420
2060 잡담 시안 잡아놓은 디자인 영업쪽에서 맘에 안들었는지 다 바꿔놨네.. 6 2024.03.15 345
2059 질문 요새 이런 디자인이 유행인거같은데 3 2024.03.13 630
2058 질문 패키지 디자인 작업기간 1 2024.03.09 190
2057 질문 컬러칩 6년전에 나온거 사도 될까? 3 2024.03.06 298
목록  BEST 인기글
Board Pagination 1 2 3 4 5 6 7 8 9 10 ... 104
/ 104

Copyright ⓒ 2017 - dmitory. All rights reserved.