최근 어디에서나 보셨을 법한 웹/그래픽 디자인 트렌드는 #레트로, #로파이, #세리프, #아치 총 4가지 키워드로 이야기 될 수 있을 것 같습니다. 키워드에 따라 구분하여 웹디자인과 그래픽 디자인의 트렌드에 대하여 알아보겠습니다. 전반적으로는 아르데코와 캘리그라피를 합쳐놓은 듯한 우아하고 유려한 곡선을 가진 세리프 폰트가 많이 사용되고 있습니다. 이런 형태의 폰트 디자인도 새로이 많이 제작되는 듯 합니다. 어딘지 모르게 명화 속 비너스가 떠오르는 폰트 디자인은 주로 두세가지 컬러의 그라디언트 배경에 많이 사용되며, 이미지와 그라디언트 배경 모두에는 노이즈가 가미되어 있습니다. 또한 아치 형태의 이미지 크롭이 많이 등장하고, 빛을 형상화하는 기하학 도형이나 원형, 선들이 그래픽 요소로 적용됩니다. 웹디자인..

8/1까지 가입자(대략 9월 중순까지 PG계약이 완료)에 한하여 토스 페이먼츠 PG가입비를 지원하는 이벤트가 열렸습니다! 쇼핑몰 솔루션 여기저기 알아보던 스몰비즈니스 사장님들께 희소식!!!!!! 당장 공유하고자 내용 가져왔어요. (홍보비 안받음) 요새 토스페이먼츠 결제가 여러 서비스에서 많이 보이던데 공격적인 마케팅을 진행중인가 봅니다. 저는 주로 쇼핑몰 제작 시 cafe24를 사용하지만 커스터마이징이 다양하게 가능한 대신 전문가가 아니신 분들께는 쇼핑몰 수정이 다소 어려울 수 있죠. 식스샵의 심플한 템플릿 제작 방식으로 쉽게 쇼핑몰을 만들고 운영이 가능한데 1개월동안은 PG가입비(대략 22만원 선)를 무상으로 지원한다고 하니 이렇게 반가울 수가 없습니다. PG 가입비 지원받고 쇼핑몰 오픈하는 방법 1...

배경이미지가 텍스트 컬러로 적용되는 크롭 스타일의 텍스트 디자인 적용 예제입니다. 텍스트를 많이 입력하여 스크롤이 생기면 백그라운드 이미지를 고정시켜{background-attachment:fixed;} 텍스트만 스크롤되는 패럴랙스 스타일로도 적용해볼 수 있습니다. People will throw stones at you. Don't throw them back. Collect them all and build an empire. VIEW DEMO

Life in VOGUE 프로젝트는 2018년부터 오프라인 공간에서 디자인과 패션을 접목하여 진행된 복합 프로젝트 입니다. 올해는 비대면 전시를 위해 온라인상에 VR로 가상의 빌딩을 제작하여 아티스트의 공간 디자인 프로젝트를 소개하는 사이트를 오픈했는데, 차분하면서도 고급스러운 기조로 전개되는 UI와 함께 아티스트의 작품들을 층별로 전시하여 통상적인 가상 공간 전개 방식인 360도 영상이나 커다란 갤러리 공간에 전시된 작품을 감상하는 방식이 아닌 색다른 방법으로 풀어낸 부분이 인상적입니다. 가상의 빌딩을 인지시켜주는 예쁜 일러스트로 제작된 페이퍼북으로부터 시작하여 페이지를 넘기면 엘리베이터 문 팝업 페이지가 등장하여 층을 이동하는 버튼을 누를 수 있도록 화면이 연결됩니다. 전체 메뉴 UI를 엘리베이터의 ..

youtube channel art size guide 유튜브 채널아트를 디자인할 때 만들어야 할 여러가지 사이즈가 있죠? 다양한 브라우저 및 모바일 기기에서 잘 보여지도록 유튜브에서 가이드를 제공하고 있습니다. 이미지 크기 및 파일 가이드라인 업로드 최소 크기: 16:9 가로세로 비율의 2048x1152픽셀 텍스트 및 로고가 잘리지 않는 최소 크기: 1235x338픽셀 여기에서 벗어나는 부분은 특정 보기 설정 또는 기기에서 잘릴 수 있습니다. 파일 크기: 6MB 이하 더 쉽게 만들 수 있도록 가이드가 담긴 psd를 만들어 공유합니다. 유튜브 사이즈 가이드 psd 다운로드 가이드에 따라 제작하여 적용해보았습니다. 유튜브 사이즈 가이드 psd 파일 다운로드 이 글이 도움이 되었다면, 공감과 댓글 남겨주세요!

position:absolute 일 때 가운데 정렬하는 방법 left:50%; transform:translateX(-50%;) *크로스 브라우징 사용 주의

이미지 흑백처리 CSS 이미지 작업 없이 CSS 코드만으로 흑백 처리하는 방법 마우스 hover 효과 적용시 유용하다.

멋진 명조체로 디자인된 웹사이트 11 을 소개합니다. Craig Reynolds 뉴욕 출신 Craig Reynolds 라는 디자이너의 포트폴리오 사이트로 마우스 오버 시 타이포 디자인 위로 이미지가 커서에 따라 움직이며 나타나는 효과가 인상적 입니다. 명조체와 이미지 페이드 효과가 분위기 있는 웹 디자인을 보여주고 있고, 타이틀 hover 시 해당하는 콘텐츠를 이미지로 보여주어 더욱 직관적입니다. Marvin Schwaibold 디자이너의 포트폴리오 사이트입니다. 포트폴리오의 썸네일, 상징적인 이미지와 함께 잘 보여주고 있습니다. 정형화된 레이아웃이 아닌 스크롤 인터랙션으로 이미지가 등장하는 방식이 자유로움을 느끼게 해줍니다. 특정 아이콘을 로고화하여 표현한 점이 눈여겨볼만 합니다. reiter-fris..

웹에 최적화된 이미지 파일 유형인 .svg 아이콘을 무료로 다운로드 할 수 있는 사이트를 소개합니다. feather https://feathericons.com/ 지속적으로 새로운 아이콘을 업데이트하는 듯 합니다. png로 크게 키우고 이미지를 작게 조절해도 깨지기 일쑤인 아이콘 이미지 파일을 SVG 유형으로 사용할 수 있고, 깔끔한 디자인이 포인트인 고마운 무료 사이트입니다. 제작자 Colebemis 원하는 아이콘을 클릭하면 바로 파일이 다운로드 됩니다. Size와 Stoke width를 조절하여 원하는 느낌의 아이콘 디자인으로 변경하여 다운로드도 가능합니다. Color 코드를 입력하여 컬러 변경도 가능합니다. 상단의 Reset 버튼을 클릭 시 모든 설정이 초기화됩니다. feather에서 다운로드한 s..

웹디자인에 유용한 여름테마 컬러 팔레트를 제작하였습니다. 이미지 수정 금지 및 출처를 밝히고 자유로운 배포 가능합니다. @dbre.co.kr Summer flower color palette Flower and bees color palette Fruits color palette Summer icecream color palette Summer beach color palette