웹제작크기

페이지 정보

profile_image
작성자X수색대 조회 16회 작성일 2020-10-17 20:08:46 댓글 0

본문

웹사이트 기준 해상도 정하기

웹사이트를 제작할 때 기준 해상도를 잘못 설정하면 고객에게 불편한 경험을 전달할 수 있습니다.
글로벌 통계 데이터 및 구글 애널리틱스 통계 데이터를 이용해 기준 해상도를 설정하는 방법을 설명합니다.

* statcounter
http://gs.statcounter.com

* 사이트별 기준 해상도
- 네이버 : 1080px
- 쿠팡 : 980px
- 11번가 : 1200px
- SSG : 1280px
- 29cm : 100%
아기별 : 감사합니다. 해상도 설정하기 막막했었는데 저희가 잘하고 있는건지 덕분에 알 수 있었어요.
dbdic : 반응형웹디자인 영상 잘 봤스빈다,, 이젠 그 다음은 뭐? 실전반응형웹사이트를 봐야겠죠,.. 네 반응형웹도 트렌드가 있잖아요,,,벤치마킹을 해야한다는거죠..
국내 반응형웹만 별도로 모아는 사이트 http://dbdic.co.kr/contents/20?sort=V&cg2=1238&cg3=&cg4=7195
김경은 : 설명 감사합니다!!!
MR Lee : 도움이 많이 됬어요! 감사합니다. 다음시리즈도 기대할게요!
lemonia : 기획자로 이직한지 2달. 액슈어 설치 4일차입니다ㅜㅜ 큰도움되고있습니다. 너무감사합니다
Director Rawer : 정말 좋은영상이에요!
yoonsik jeong : 좋은 영상 감사합니다~
J : 좋은 정보입니다. 감사합니다.

#4 반응형 웹디자인을 위한 최적화된 그리드 만들기(UI 디자인 입문이라면 꼭 봐야할 영상) - 스케치 강좌

스케치 강좌 네 번째입니다. 이번에는 반응형 웹디자인을 위한 최적화된 그리드 만들기를 해보겠습니다.
레이아웃을 만들 때는 크게 4가지가 있습니다. 최대폭(max-width), 컨테이너(container), 단의 개수(columns), 거터와 칼럼 넓이 이렇게입니다.영상을 통해 가장 효과적인 레이아웃을 만들려면 몇 단이 좋은지, 거터와 칼럼 값은 어떻게 하는 게 좋은지 확인해보세요.
단순히 그리드 만들어주는 기능 설명으로 끝내는 것보다 어떤 수치를 입력하는 게 반응형 웹 디자인할 때 가장 효과적인지 알려드리는 것이 100배 유익할 것을 생각해서 만들었습니다.
UI 디자인 쪽으로 입문하시는 분이라면 꼭 봐야할 강좌 영상입니다.


ps. 맥북이 고장나서 수리하느라 너무 늦게 업로드 됐네요...ㅠㅠ 그리고, 영상에 자주 삐소리가 나는 문제 때문에 마이크를 새로 샀습니다. 아직 업로드 하진 않았지만 녹화해둔 영상을 제외한 새로운 영상부터는 새로 산 마이크로 녹화할 예정입니다.ㅎㅎ


*스케치 툴은 Mac OS에서 사용이 가능합니다.

누구나 손쉽게 배우는 디자인 강좌, 디자인베이스입니다. 스케치 툴의 첫단추는 디자인베이스에서 시작하세요. 열정만 준비하시면 다 따라 할 수 있습니다. : )

☞ 디자인베이스 소개 : http://designbase.co.kr/about/
☞ 공식 웹사이트 : http://designbase.co.kr/
☞ 네이버블로그 : https://blog.naver.com/designbasekorea


*BGM 사용 출처

Track: Robin Hustin x TobiMorrow - Light It Up (feat. Jex) [NCS Release]
Music provided by NoCopyrightSounds.
Watch:

Free Download / Stream: http://ncs.io/LightitupYO

------

Track: NIVIRO ft. PollyAnna - Fast Lane [NCS Release]
Music provided by NoCopyrightSounds.
Watch:

Free Download / Stream: http://ncs.io/FastLaneYO
디자인베이스 : 12단을 추천드리는 또 하나의 이유는 퍼블리싱 때문입니다. 퍼블리셔 혹은 웹 프론트앤드 개발자분들이 퍼블리싱할 때 '부트스트랩'이라는 유명한 프레임워크를 사용해서 개발하는 경우가 많습니다. 부트스트랩에서 제공하는 기본 컬럼수 역시 12단 입니다.
참조 : http://bootstrapk.com/css/#grid
글린다 : 기초적인 질문드려 죄송하지만 에셋(asset)이 정확히 어떤 것인지 질문드려도 될까요?
그리고 해상도(작업사이즈)는 개발자분한테 먼저 물어보고 디자인 작업을 시작하나요?
Haesol Yim : 디자인 왕초보 스케치 입문하는데 정말 도움이 많이 되는 강좌에요!!!! 감사합니다!!!!
Nissi Choi : 보석 강의입니다.. 감사합니다.
엘조네 : 그냥 최곱니다
정유진 : 360으로 작업하고 싶은데 개발쪽에서 640으로 잡아달라고 합니다. 360으로 잡고 640으로 늘려서 넘겨도 상관 없을까요?
Yeon : 그저 빛..
도레미 : 보통 안드 먼저제작하고 ios에 맞춰 늘리시나요 ? 제가 아이폰이면 아이폰 먼저 제작 후 줄여도되는건지 ㅜㅜ? 궁금합니다.
Eunhye Cho : 8:15 여기서 Offset 을 360으로 잡는 이유가 있나요??? 다른 수치로 해도 Center를 누르는 한 별로 변화가 없어 보여서요 ㅠㅠ
Amy kim : 저는 스케치는 안쓰는데 수치 설명 해주셔서 진짜 너무 많이 도움되었습니다. 감사합니다!!!!

#04.웹디자인 시작한다면 이건 꼭 보세요

추천, 구독, 알림 꼬오옥~ 눌러주세요!

안녕하세요 디자이너 마디아입니다.
현재 실무에서 쇼핑몰 UIUX 구축 디자이너로 활동하고 있으며 학생분들에게 조금이나마 도움이 될 수 있는 강의로 여러분들에게 다가가도록 하겠습니다.
--------------------------------------------------------------------------
► youtube channel: https://bit.ly/2GJYUF1
►단톡방 : https://open.kakao.com/o/gakaJCvb
►mail : madia_designer@naver.com
►cafe : https://cafe.naver.com/madiadesigner
--------------------------------------------------------------------------
본 디자인은 다양한 벤치마킹을 통해 디자인 되었음을 알립니다.
--------------------------------------------------------------------------
#그리드 #웹디자인 #해상도
유 : 4:20 저는 줄자가 스냅이 안잡히는데 왜 그럴까요 ㅠㅠ
Jeffrey Logos : 형.. 지린다..
Anne J : 4:40 엄청 초보입니다! 그리드 하는거 배워보고 싶어서 강의 듣고 있어요 도와주세용 ㅠㅠ 110으로 나눠놓고, 그리드 20잡을때요, 마르퀴툴로 누르면 그 110짜리가 선택되는데, 마디아님처럼 새로 네모 그릴려면 뭐 누르고 그려야하는건가용...?
김범진 : 상세한 설명 감사드립니다 많은 도움이 됬어요 그런데 오류?제가 이해를 잘못한건지 모르겠는데 영상에서 16분20초~16분25초 설명하시는 구간이
1060으로 나누기를 하시다가 갑자기 그 부분만 1080으로 나누기를 하셨는데 햇갈리신건지 원래 그렇게 하시는건지 궁금합니다 문의드려요^^
달의이면.光 : 역시!! 기초튼튼강의 감사합니다.
추후 여건이 되신다면 쇼핑몰 상세페이지 레이아웃 관련한 강의도 부탁합니다!!
응아냐 : 포토샵의 기초가없는사람이라면 상당히 이해하기 어려운부분이 많은거같아요 ㅠㅠ 네모칸에 색을 넣는부분부터 정렬이라던가 찍으시는분은 그냥 안다는 전재하에 하시는거겠지만 보는입장에서는 아무 설명없이 딸깍딸깍 하시는 부분들이라 어렵네요 ㅠㅠ 이기능을 이용해 어떠한식으로 해주시면 됩니다 같은 설명이 있으면 정말 좋을꺼같아요 보여지는 기능 하나하나 찾아보면서 하고있는데 19분짜리 영상 하나에 10시간 이상의 이해가 필요합니다 ㅠㅠ
응아냐 : 제일 처음에 네모칸에 색넣는거부터 막히네요..
문수민 : 유익한 강의 감사합니다~~!
봄! : 10:08 느긋느긋한 목소리로 경의로운 겁니다~ 집중해서 보다가 터졌네요 ㅎㅎㅎ., ㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋ 유익한 강의 잘봤습니다 감사합니다 :-)
순구리 : 마디아님 보다가 질문이 생겨서 댓남겨용. 1320px로 예를 들면 맨끝에 20px씩 남기고 쓰지 않는데 왜 남기는 건가요? 20px씩 없애고 1280px를 컨테이너로 그리드를 그려도 되나요?

... 

#웹제작크기

댓글목록

등록된 댓글이 없습니다.

전체 1,524건 1 페이지
게시물 검색
Copyright © www.javisi.com. All rights reserved.  Contact : help@oxmail.xyz