Design Geeks > 포스팅 & 디자인소스

 

무료 디자인 소스 2014/02/06

 

아래 디자인 소스 정보는 SourceTree.kr 에 카테고리별로 정리해 놓았습니다.

 

CV page 템플릿

 

 

 

 

ThemFast 템플릿

 

 

 

 

Cuda 싱글페이지 템플릿

 

 

 

 

Dayoh 랜딩페이지 PSD

 

 

 

 

Fantastico 랜딩페이지 PSD

 

 

 

 

 

 

해외 디자인 소스

SourceTree.kr

 

 

Design Geeks

cafe.naver.com/dgeeks

 

 

FaceBook

facebook.com/webdcommunity

 

 

 

Design Geeks > 포스팅 & 디자인소스

 

무료 디자인 소스 2014/02/05

 

 

아래 디자인 소스 정보는 SourceTree.kr 에 카테고리별로 정리해 놓았습니다.

 

깔끔한 렌딩페이지

 

 

 

 

Notify PSD 템플릿

 

 

 

 

 

렌딩페이지 템플릿

 

 

 

 

FlatTool PSD 템플릿

 

 

 

 

 

Onepager PSD 템플릿

 

 

 

 

 

 

 

해외 디자인 소스

SourceTree.kr

 

 

Design Geeks

cafe.naver.com/dgeeks

 

 

FaceBook

facebook.com/webdcommunity

 

 

 

Design Geeks > 포스팅 & 디자인소스

 

무료 디자인 소스 2014/02/04

 

 

아래 디자인 소스 정보는 SourceTree.kr 에 카테고리별로 정리해 놓았습니다.

 

Bazinger 랜딩페이지

 

 

 

 

앱 랜딩페이지

 

 

 

 

 

Sidamurti 랜딩페이지 

 

 

 

Float 랜딩페이지

 

 

 

 

 

Dagdigdug 랜딩페이지

 

 

 

 

 

 

해외 디자인 소스

SourceTree.kr

 

 

Design Geeks

cafe.naver.com/dgeeks

 

 

FaceBook

facebook.com/webdcommunity

 

 

 

Design Geeks > 포스팅 & 디자인소스

 

해외 무료 디자인 소스 2014/02/03

 

 

아래 디자인 소스 정보는 SourceTree.kr 에 카테고리별로 정리해 놓았습니다.

 

스크린 목업

 


 

 

 

 

PrasastiEnom 대쉬보드

 

 

 

 

 

애플 디바이스 목업

 


 

 

 

브랜딩 목업

 


 

 

 

 

플렛 아이콘2

 


 

 

 

 

 

해외 디자인 소스

SourceTree.kr

 

 

Design Geeks

cafe.naver.com/dgeeks

 

 

FaceBook

facebook.com/webdcommunity

 

 

 

Design Geeks > 포스팅 & 디자인소스


웹디자인 산업 분석(인포그래픽)  
Professionals vs. Amateurs


출처  http://www.webydo.com/infographic.html


비록 webydo 홍보 수단으로 만들어진 인포그래픽이지만 내용이 유익해서 공유해 봅니다. 그리고 워드프레스와 달리 디자이너를 타겟으로 만든 솔루션이 있다는 것이 마음에 드네요~^^
부족한 영어 실력이지만 주요 내용을 요약하여 전달하려고 했습니다. 혹시 잘못 전달된 내용을 있다면 지적해 주시길 부탁 드립니다.



- 아래 인포그래픽 내용 - 

전세계에 웹사이트가 약 7억 8천 500만개가 있다.
그리고 매달 1,600만 개 웹사이트가 추가로 생겨나고 있다..
2013년 기준 ,미국 웹디자인 산업 규모는 200.1억 달러 (한화로 약, 21조4,000억 원)이다.

이 많은 웹사이트는 누가 만들고 있나?
전문가집단(웹디자이너+개발자)이 전체의 74%를 만들 있으며, 
아마추어(DIY 유져)가 약 3%에 해당하는 웹사이트를 만들고 있다.

웹디자인 산업의 문제점은
1. 전문가 집단의 작업은 느리고 복잡하다 (그리고 사업장의 45% 이상이 아직 웹사이트를 갖고 있지 않다.)
2. 웹디자인 산업의 예산은 개발자가 70%를 차지하고 있으며 디자이너는 고작 30%를 차지하고 있다.
3. 아마추어가 만든 웹사이트(DIY)에 도메인을 연결하는 경우는 2%에 불과하다.

3,800만 디자이너를 위한 웹사이트 빌더 솔루션은
- 100% 크리에이티브 디자인이 가능한 솔루션
- 아마추어 DIY 솔루션과 다른 전문전인 소프트웨어
- 개발자가 필요없는 솔루션
- 코딩할 필요 없는 솔루션


웹디자인 시장에 제공되는 3가지 종류의 솔루션

1. 개발자 타켓의 솔루션     

2. 디자이너 타겟의 솔루션   
MU(웹사이트 주소를 못찾았습니다)

3.아마추어(DIY 유져) 타겟의 솔루션 





 

해외 디자인 소스

SourceTree.kr

 

 

Design Geeks

cafe.naver.com/dgeeks

 

 

FaceBook

facebook.com/webdcommunity

 

 

 


Design Geeks > 포스팅 & 디자인소스



여백을 잘 활용한 13개 웹디자인  


출처  http://webdesignledger.com/inspiration/13-inspiring-examples-of-whitespace-in-web-design


부족한 영어 실력이지만 주요 내용을 요약하여 전달하려고 했습니다. 혹시 잘못 전달된 내용을 있다면 지적해 주시길 부탁 드립니다.



좋은 웹디자인에는 다양한 요소가 있지만 그 중에서도 여백은 중요한 요소 중 하나다. 
여백이란 이미지, 글씨, 칼럼 등 디자인 요소들 사이에 비어있는 공간을 말한다.
이런 비어있는 공간은 레이아웃을 깔끔하고 우아하게 만들어준다.
그리고 여백이 꼭 흰색(White color)일 필요는 없다. 단지 비어 있으면 된다.
어떤 색상은 여백의 역할을 하기도하며 
이로인해 깔끔하고 우아한 디자인이 나온다. 


Cory Gibbons






Metta Skincare






Webydo






Bookshelf







Plainwhite





Barley 





Brad Hogan




Musio




Hop.in




BrightByte





Who’s your Santa?




CycleLux





Suki





 

해외 디자인 소스

SourceTree.kr

 

 

Design Geeks

cafe.naver.com/dgeeks

 

 

FaceBook

facebook.com/webdcommunity

 

 

 


Design Geeks > 포스팅 & 디자인소스



플렛 디자인을 활용한 35가지 레이아웃 웹사이트 


출처  http://spyrestudios.com/35-website-layouts-flat-graphics-icons
참고  http://sourcetree.kr/?act=def&cat_1=&cat_2=&cat_3=&keyword=flat&x=-889&y=-167



그 동안 수집해 놓은 SourceTree.kr 웹사이트에 플렛 디자인소스와 함께 아래 35가지 플렛 스타일 웹디자인 사례를 참고해 보시길 바랍니다. 혹시 SourceTree.kr 웹사이트를 활용한 웹디자인 스터디 아이디어가 있으신분들은 댓글이나 쪽지로 소중한 의견 부탁드립니다. 부족한 영어 실력이지만 주요 내용을 요약하여 전달하려고 했습니다. 혹시 잘못 전달된 내용을 있다면 지적해 주시길 부탁 드립니다.



플렛 스타일의 웹디자인은 한동안 계속 될 것이고, 많은 디자이너들이 더 많은 무료 디자인소스와 UI kit 를 공개할 것이다. 
이는 CSS3를 활용한 웹디자이너(개발자)에게 영향을 줄 것이다.그리고 이미 세계적으로 많은 플렛 디자인소스들이 널리 퍼져있다. 아래 35가지 웹사이트들은 미적으로 벨런스를 잘 이루고 있다.
























http://www.une-cuisine-astucieuse.fr/




































































































































































































 

 

해외 디자인 소스

SourceTree.kr

 

 

Design Geeks

cafe.naver.com/dgeeks

 

 

FaceBook

facebook.com/webdcommunity

 

 

 


Design Geeks > 포스팅 & 디자인소스



2014년 예상되는 웹디자인 트랜드 10가지 


출처  http://thenextweb.com/dd/2013/12/29/10-web-design-trends-can-expect-see-2014


비록 해외에서 작성된 글이지만 국내 웹디자인 트랜드를 이해하는데 도움이 되길 바라는 마음으로 작성했습니다.

부족한 영어 실력이지만 주요 내용을 요약하여 전달하려고 했습니다. 혹시 잘못 전달된 내용을 있다면 지적해 주시길 부탁 드립니다.



1. 식상하지 않은 타이포그래피

     Non-boring typography





2014년에는 '개성있는 폰트'가 유행할 것으로 예상된다.

예를 들어, 위 그림에 나온 Stuff and Nonsense 웹사이트에서는 전통적 Serif 폰트를 사용하는 대신에 

새로롭고 아름다운 Serif 폰트를 사용함으로써 보다 전문적이고 개성있는 디자인을 보여주고 있다.

2014년에는 단순하고 정형적인 기존의 폰트에서 벗어나 

개성있는 타이포그래피를 사용하는 웹사이트들이 늘어날 것으로 보인다.







2. 플렛 디자인
     Flat design





2013년 애플의 iOS7 발표 이후 웹 디자인에서 ‘Flat design’이 많이 활용 되고있다.

2014년에도 'Flat design'은 여전히 트랜드를 유지할 것으로 보인다.







3. Large hero 영역이 슬라이더를 사라지게 만들 것이다.

     Large hero areas quickly killing sliders






2014년도 가장 유망한 트랜드는 바로 Large hero 영역에 대한 것이다.

참고로 Large hero 영역은 웹사이트 인트로 부분, 적은 양의 텍스트를 갖는 한 개의 이미지로 구성된 웹사이트 상단에 위치한 

넓은 영역을 의미한다.


앞으로 Large hero 영역은 더 강화될 것이고 심지어 슬라이더가 위치했던 자리까지 꿰찰것이다.

위의 Realtii.com 사이트는 이에 대한 좋은 예를 보여준다






4. 모바일에 더 많은 포커스가 맞춰 질 것이다.

     Heavier focus on mobile






모바일 기기를 이용하여 웹사이트에 접속하는 것은 이제 일상적인 일이 되었다. 

2014년도에는 모바일을 고려한 디자인이 더욱 강화될 것으로 보인다.






5. 비디오가 텍스트를 대체할 것이다.

     Videos in place of text




hero 영역에 동영상을 활용하여 컨텐츠나 정보를 동영상으로 제공할 수 있다면 더할나위 없이 좋을 것이다.

비록 동영상이 상대적으로 큰용량을 필요로하여 모바일에 적합하지 않은 면이 있지만, 

텍스트보다 훨씬 효과적으로 내용을 전달할 수 있는 수단임은 분명하다.





6. 스크롤이 긴 웹사이트

     Long scrolling sites





예전에는 일반적으로 컨텐츠가 많은 경우에만 긴 스크롤을 활용한 디자인을 하였지만 

요즘에는 컨텐츠가 잘 정리 되어 있어도 긴 스크롤을 활용한 디자인을 사용하는 사례를 종종 볼 수 있다.


위의 예 (Macaw’s wesite)를 보면, 콘텐츠들이 잘 정리되어 있음에도 불구하고

긴 스크롤을 활용한 디자인을 사용하고 있다. 하지만 스크롤을 효과적으로 사용했기 때문에 

사용자 입장에서는 스크롤을 많이 내리고 있다는 느낌을 주지는 않는다.





7. 단조로운 색상을 활용한 웹디자인

     Simple color schemes





2014년에는 단조로운 색상의 웹사이트들을 많이 보게 될 것이다. 

여기서 ‘단조로운 색상’이란 1, 2종류의 컬러만을 사용하는 것을 의미한다.


위의 UIKit  웹사이트를 보면 블루 색상만 사용했다. 

(블랙이나 화이트는 디자인관점에서는 컬러로 여기지 않는다). 

이러한 단조로운 색상을 활용한 디자인은 2번에서 언급한 “Flat design”과 함께 사용될 수도 있다.


요즘에는 컬러를 거의 사용하지 않는 웹사이트들도 볼 수 있다. 

화이트나 블랙, 또는 이들 사이의 중간색들이 널리 사용되고 있으며

이 경우 강한 효과를 주고자 하는 부분에 포인트 색상을 넣어 디자인을 할 수도 있다.




8. 단순화된 컨텐츠

     Simplified content






2014년에는 더욱 더 단순화된 컨텐츠 디자인이 주요한 웹디자인 트랜드가 될 것이다.

요즘에는 사용자의 집중 시간이 짧아짐에 따라 컨텐츠를 길게하기 보다는 짧게 하는 것이 효과적이다.

그리고 최근에는 250글자를 넘는 내용을 보이는 웹사이트를 찾아보기 힘들어졌다.





9. 슬라이드바를 빼라

     Dropping the sidebar





보통 블로그나 매거진 웹사이트에서는 슬라이드바가 없는 디자인을 흔히 볼 수 있었다. 

하지만 요즘은 블로그나 매거진 외 다른 타입의 웹사이트들에서도 

슬라이드바가 없는 디자인을 종종 볼 수 있다. 

슬라이드바를 없애면, 좀더 나은 비쥬얼효과를 얻을 수 있다. 

예를 들어 

사용자는 자신의 주의를 분산시키는 것들이 적을수록 편안하게 웹사이트의 내용을 읽을 수 있다. 

이것이 슬라이드바를 없애는 이유 중 하나이다.






10. 이미지 리터칭

     Manipulated imagery





2014년에 우리는 리터칭한 이미지 (color overlay, blurred 등)를 더 많이 보게 될것이다.

위의 예(the Seattle Cider Co)를 보면, 이 사이트의 분위기에 잘 맞도록 고풍적이면서 전원적인 느낌을 갖도록 리터칭한 사진이 hero area에 사용된 것을 볼 수 있다.




11. 보너스 : 괴상하고 섹시하며 신선한 것

      Bonus : Crazy, sexy, cool stuff





웹 개발에 있어서는 항상 신선하고 획기적인 것들이 나오고 인기를 끌어왔다.

위의 예(Tobi’ Story 웹사이트)와 같이 웹사이트에서 특정 부분에 움직임을 주기 위해 HTML5를 사용하는 방식도 이중 하나가 되겠다. 

새로운 시도는 매우 환영을 만한 일이겠으나, 단 너무 극단으로 치달아서는 안되겠다.





 

 

해외 디자인 소스

SourceTree.kr

 

 

Design Geeks

cafe.naver.com/dgeeks

 

 

FaceBook

facebook.com/webdcommunity

 

 

 


웹 디자이너 커뮤니티 Design Geeks

http://cafe.naver.com/dgeeks/7405


첫 인터뷰에 적극 응해주시고 디자이너 커뮤니티 형성을 응원해 주신 심영재 님께 감사드립니다.

엔씨소프트에서 근무하는 심영재님을 만나 UI 디자이너의 생활과 주니어 시절 웹에이전시에서의 경험 그리고 디자인과 디자이너에 대해 폭 넓게 이야기를 나누었습니다. 편집한 인터뷰 내용은 주니어 디자이너분들에게 도움이 될만한 내용으로 편집하여 구성하였습니다.

 심영재 엔씨소프트 UI 디자이너

(현) NCsoft (플랫폼기획실 UI디자인팀)
(전) MEDIA4TH


  엔씨소프트, UI 디자이너

 
 Q소속된 엔씨소프트 UI 디자인 팀에 대해 간략하게 소개해 주세요.
UI 디자인 팀은 엔씨소프트 게임의 정보를 전달하기 위한 모바일, 웹사이트 디자인과 프로모션 및 기타 디자인 업무를 하고 있습니다. 엔씨소프트는 프로모션 및 마케팅을 해외 게임 업체들에 비해 공격적으로 진행하고 있어 UI 디자인 팀도 그 만큼 활발히 운영되고 있습니다.

 Q심영재님은 UI 디자인 팀에서 어떤 일을 하시나요?
저는 아이온 게임의 모바일, 웹사이트 및 프로모션 디자인을 총괄하고 있습니다. 또 게임 안에서 웹 정보를 불러와 주는 UI 디자인과 신생게임이 런칭되면 해당 웹사이트의 시안 작업도 하고 있습니다



  디자이너는 디자인 실력뿐만 아니라 커뮤니케이션 능력도 필요한 영역

 
 Q엔씨소프트에 입사하게 된 이유는 무엇입니까?
한 웹에이전시에서 3년을 근무하다 보니, 다른 환경에서 새롭게 시작하고 싶은 욕구가 있었습니다.
때마침 엔씨소프트에서 제의가 들어와서 자연스럽게 입사를 하게 되었습니다.
큰회사에서의 직장 생활과 큰조직에서 경험을 쌓고 싶은 마음이 컸던것 같습니다.

 Q엔씨소프트에서 디자이너로써 쌓을 수 있는 역량은 무엇이라고 생각하십니까?
웹에이전시에서는 타 부서나 클라이언트와 커뮤니케이션을 많이 나누는 시스템이 아닌 PM이나 팀장을 통해 내용을 전달받아 일을 진행하는 경우가 많았습니다. 하지만 엔씨소프트에서는 본인이 회의에 직접 참석해야 하고 사업부서의 이야기를 듣고 의견을 나누면서 디자인을 하기 때문에 기획, 마케팅 능력과 함께 커뮤니케이션 능력이 향상 되었다고 생각합니다. 디자이너에게 디자인 실력이 가장 중요하지만 그에 맞는 커뮤니케이션 능력도 소홀히 해서는 안될 영역이라고 봅니다.







  디자이너로써 훈련된 디자인 감각은 다양한 분야에서 활용할 수 있는 능력

 
 Q디자인 영감을 어떻게 얻나요?
엔씨소프트는 게임회사이기 때문에 최초의 디자인 영감은 게임 그림에서 나옵니다. 그림 소스가 한정 되어 있을 경우에는 디자인 퀄리티를 일정하게 유지하기 위해 구글의 이미지 검색을 통하여 디자인 영감을 얻고 있습니다. 구글에서 검색되는 사진, 그래픽, 일러스트 등 가리지 않고 이미지를 보면서 다양한 조합과 아이디어를 떠올리다 보면 어느새 디자인 영감을 얻게 됩니다. 또 게임마다 컬러와 컨셉트 및 가이드를 맞춰야 하기 때문에 그 안에서 변화를 만들어 내기 위해 노력을 하고 있습니다.

 Q디자이너 JOB의 장점이나 매력은?
내가 작업한 디자인 결과물을 많은 사람들이 보고 활용할 때 디자이너로써 자부심을 느낍니다.
디자이너라면 무엇을 보더라도 일반인 보다 다른 눈높이의 디자인 감각으로 보게 됩니다.
이런 감각은 어떤 일에서도 활용할 수 있는 능력이라고 생각합니다. 포토샵이 단순히 웹디자인을 위한 툴이 아닌 것처럼 디자인 능력도 넓게 활용 할 수 있다고 생각합니다.

 Q웹디자이너 전망
웹사이트 디자인 산업은 정체기에 있지만 모바일 (웹/앱)디자이너라는 명칭으로 영역을 넓히거나 옮기는 웹디자이너 분들이 계십니다. 관심을 갖고 트렌드에 맞게 꾸준히 공부해 간다면 다양한 비젼을 찾을 수 있다고 생각합니다.

 






  웹에이전시에서 경험한 주니어 디자이너 생활과 야근

 
 웹에이전시 입사를 준비하는 분들을 위한 질문을  몇 가지 질문을 드리겠습니다.
 
 Q신입 때 주로 어떤 작업을 했고 느꼈던 점은 무엇인가요?
처음에는 웹사이트 관리 업무와 배너 디자인 작업부터 시작 했어요.
평소 활동하던 동호회에서 작업했던 디자인 결과물들에 대해 인정을 받아왔던 터라 실무에서도 잘 할 수 있다고 생각 했지만 막상 접해보니 스스로 부족함을 많이 느꼈습니다. 프로와 차이를 절실히 느꼈던 것 같습니다.

 Q신입 때부터 코딩이나 플래시 작업 없이 디자인 작업만 하셨는데요. 웹디자이너로써 디자인 작업만 하는 것에 대해 어떻게 생각하십니까?
당시에 코딩이나 플래시를 못했던 것은 아니였지만, 특별히 잘하는 것도 아니였어요. 평소 디자인을 할 때 코딩 작업을 고려하지 않을 수 없었는데. 코딩을 전문적으로 하는 팀이 있어서 레이아웃 구조에 대한 고민 없이 자유롭게 디자인을 할 수 있어서 좋았던 것 같습니다.

 Q메인시안 작업은 입사 후 언제 처음 하셨나요?
처음 메인 시안 작업은 입사 1년 후 처음 기회가 왔지만 당연히 채택되지 못했고 비딩에 함께 참여한 동료와 선배들의 디자인 시안을 보면서 많은 자극을 받았던 기억이 납니다.

 Q실력을 쌓기 위해 웹에이전시 입사를 준비하는 분들에게 조언 부탁드립니다.
웹에이전시에 입사하려면 자신이 상상하는 스타일리쉬한 디자이너의 이미지는 버렸으면 좋겠습니다.
신입 디자이너는 개인적인 시간도 부족하고 체력과 정신적으로 힘든 기간이라고 생각합니다. 당연히 열심히 해야 하지만 잘 해야 합니다. 그래야 많은 기회를 얻을 수 있고 더 많은 코칭을 받아 경험을 쌓을 수 있습니다. 상대적으로 경력이 많은 디자이너가 시안 채택이 안 되고 다른 기회마저 줄어서 스스로 퇴사하거나 퇴출되는 것을 목격하고 자극을 받은 경험이 있습니다.

 Q야근에 대해 어떻게 생각하세요?

디자인 퀄리티는 디자이너의 작업시간과 정비례하지는 않지만 중요한 요소라고 생각합니다.
이런 디자인의 특징과 대한민국 클라이언트의 빨리빨리 문화가 상충해서 피치 못하게 야근을 하는 경우가 많습니다. 디자이너로서 디자인에 욕심과 열정 때문에 야근을 한다면 야근 자체에 불만은 없겠지만
단순한 운영 업무나 도무지 답이 나오지 않는 디자인 작업 때문에 야근을 할 경우에는 야근에 불만이 생긴다고 생각합니다. 그리고 매번 어렵고 불만스러운 상황의 연속된다면 디자이너로써 진로나 이직을 생각해 보는 것도 좋을 것 같습니다. 그렇다고 은근히 매일 야근을 강조하는 디자인 회사는 옹호해 주고 싶진 않네요.

 Q후배 디자이너에게 한마디
디자이너는 업무의 특성상 슬럼프가 자주 오는 직업이라고 생각합니다.
심리적인 고단함을 풀어주고 슬럼프를 극복할 수 있는 취미 생활을 가지셨으면 좋겠습니다.
  

  INTEREST

 
 Q좋아하는 디자이너
관심 있는 국내 디자이너는 조수용(메거진B) 대표님과 김영세(이노디자인) 대표님
그리고 해외 디자이너는 디터 람스(산업디자이너)와 조나단 아이브(애플) 이 있습니다.

 Q취미
사진, 카메라, 자동차, 디지털기기에 관심과 취미가 있고 지금은 생활 속에서 즐기는 정도입니다.


 Q
일주일에 1~ 2회 정도 술자리를 갖고 있습니다.

 Q최근 관심사
최근 인테리어, 건축, 가구 디자인을 흥미롭게 보고 있습니다.

  

FaceBook
https://www.facebook.com/zestywerk

  2013년 8월 17일 토요일에 심영재님이 참여하는 오프라인 모임이 있습니다. 실무자들 만남과 교류에 많은 참여 바랍니다.  http://cafe.naver.com/dgeeks/7422



웹디자이너 커뮤니티 Design Geeks

 

   애플 디바이스 디자인 소스 





1. 아이맥 27인치


















3. 맥북 프로 그래픽
http://sourcetree.kr/?act=def&vidx=617


















5. 맥북 프로 그래픽









6. 아이패드 미니 그래픽







7. 아이폰5 PSD 그립







8. 아이폰 / 아이패드 mini









10. 3D 아이폰5 그래픽













12. 맥북에어 그래픽










13. 화이트 아이폰5 PNG










14. 아이폰5 그래픽 PSD















+ Recent posts