본문 바로가기

웹디자인7

3d, 액티브 웹사이트, 무료소스,웹사이트디자인 https://tympanus.net/codrops/demos/ DemosCodrops' curated collection of 500+ demos, prototypes, animations, templates, layouts, UI styles, and experimental design concepts. Download and use freely under MIT.tympanus.net  신기한, 다양한 인터랙티브한 효과들로 구성된 웹페이지를 소개하는 페이지 입니다.무료로 소스나 코드가 제공 되는 것들도 있어서, 활용하면 좋을 듯 합니다! https://tympanus.net/Development/TextureTransition/ 2024. 6. 14.
[웹사이트디자인/반응형] Atoms - 어토믹해빗[아주작은습관의 힘 어플] https://atoms.jamesclear.com/?ref=lapaninja Atoms. The official Atomic Habits app Tiny changes, remarkable results! Atoms is the definitive habit app inspired by the groundbreaking principles of James Clear's best-selling book Atomic Habits. atoms.jamesclear.com 2024. 4. 22.
중국어 문장부호 알고 디자인/코딩 하기 안녕하세요! 오늘은 중국어 문장 부호에 대해서 필요한 만큼만(디자이너/퍼블리싱) 알아보겠습니다. 종종 다국어 홈페이지를 제작 하게 되는데, 그중 중국어를 만나 작업하게 될 경우 유의해야할 부분이 바로 문장 부호 입니다. 특히나, 중국어의 경우, 문장 부호에 따라 여백이 유난히 넓어 디자인에 영향을 주기도 합니다. 百度空间，让世界发现你阅读、下载、分享文档 위의 두 기호가 서로 다른 역할을 합니다. 둘다 쉼표 이지만, 역할을 달라요. 1. 반점 쉼표와 유사 합니다. 짧은 쉼을 나타냅니다. 가장 일반적인 것으로서 문장 중에서 가장 많이 쓰입니다.2. 모점반점보다는 짧은 쉼표라고 볼수 있습니다. 단어를 열거할때 쓰입니다. 모점은 쉼표와 비슷하게 생겼는데, 쉼표와 반대 방향으로 되어 있죠. 저처럼 중국어를 (일도).. 2023. 12. 12.
[디자인]색의 비율과 균형 , 강조 색상의 사용 60–30–10 규칙균형잡힌 색상을 구성하기 위한 조화로운 비율60% → 중성색 (흑/백) 30% → 보조색 10% → 강조색(악센트) 주로 실내 인테리어를 할때 많이 사용 하는 비율로 강조 색상을 10%비율로 설정 하는 것이다. 웹에서 강조색(CTA버튼) 웹에서는 5~10% 정도로 사용 해도 충분하기도 하다. CTA 버튼에 주로 사용 하여 사용자의 시선을 유도 한다. *CTA란? 마케팅에서 사용되는 용어입니다. CTA는 제품이나 서비스를 고객에게 판매하기 위해 사용되며, 보통 웹사이트나 광고 등에서 볼 수 있습니다. CTA는 고객에게 어떤 행동을 취하도록 유도하는 문구나 버튼입니다. 강조색에 인터랙션 추가마우스 호버시 → 밝게 마우스 포커스 시(클릭) → 진하게 강조색 사용 범위버튼, CTA 버튼, 링.. 2023. 9. 7.
앱/웹 디자인 Color (중요도에 따라) 모바일이나 웹 등 디자인시 가장 중요하다고 할 수 있는 부분이 바로 컬러 입니다. 의미에 따른 컬러 사용으로 다양한 정보를 제공 할 수 있기 때문입니다. 웹 앱 UI 디자인시 컬러의 의미와 사용법을 알아봤습니다. UI 디자인에서 컬러는? 상호작용 표현( 버튼, 체크박스, 컨트롤박스, 링크, 슬라이더) 의미 전달 (경고, 금지, 오류, 안전,긍정) 상태 전달 (활성/비활성, 컨트롤상태) 위계 순서 (중요도 순서) 강조 브랜드 컬러로서 - 브랜드를 나타내는 고유색 - 브랜드 통일감 - 사용자에게 동일한 경험과 메세지 전달 컬러의 구성 Primary color - 주색 Secondary color- 보조색(액션색상,강조색) 흑백 액션 색상(상호작용) 색상의 사용 버튼, CTA 버튼, 링크, 컨트롤, 토글, 스.. 2023. 9. 6.
[웹 디자인/퍼블리싱] 디자인시 PC 화면 사이즈 정하기(+미디어쿼리 분기점) 웹디자인/ 퍼블리싱 디자인 할 때 화면 크기를 어느정도로 잡아야 할지 정확히 잘 모를때가 있다. 가로값 기본은 1980이라면 높이값의 경우 모니터 사이즈인 1080이 아닌 약 1053 으로 해야 한다(상단URL 부분등 제외) 디자인 작업할때 자주 쓰는 해상도와 높이값 1. 1920 x 1080일명 FHD(Full High Definition)라고 불리는 해상도24인치 데스크탑, 보편적인 모니터 크기의 해상도XD 나 figma 에서 작업시 뷰포트는 1053px💡 브라우저의 상단 부분의 URL 과, 북마크 등의 높이값을 빼고 작업을 한다. viewport는 약, 1053px 정도로 설정 2. 1536 x 864FHD 노트북의 해상도1920 x 1080에 125% 배율을 적용한 해상도노트북 폰트 사이즈 기본 .. 2023. 7. 6.
이미지 로렘 입숨- 이미지 자동 생성 경로 로렘입숨이 텍스트 자동생성 버전이라면 로렘픽숨은 이미지 자동생성 버전. 웹디자인 시안 기획 이나 UI 디자인 등에서 활용할 수 있는 유용한 기능. 임의로 이미지를 규격에 맞게 불러와 보여 줄 수 있다. https://picsum.photos/ Lorem Picsum Lorem Ipsum... but for photos picsum.photos 사용방법 https://picsum.photos/200 /* 정사각형 */ https://picsum.photos/200/300 /* 가로, 세로 */ 특정 이미지 넣기 https://picsum.photos/id/1/200/300 /* 아래 경로에서 넣고싶은 이미지의 아이디값을 넣어준다 */ https://picsum.photos/images Lorem Picsu.. 2022. 12. 20.
728x90
반응형

티스토리툴바