올리비아 코딩스쿨

부트스트랩, 리액트, 노드 등 다양한 프레임워크를 기반으로 한 UI 키트, 탬플릿, 대시보드를 제공한다. 대부분 유료이다. 하지만 무료인 것 중에도 꽤 최신이고, 품질 좋은 것을 구할 수 있다. 크리에이티브 팀 사이트를 소개한다. https://www.creative-tim.com/ Premium Bootstrap Themes and Templates UI Kits, Templates and Dashboards built on top of Bootstrap, Vue.js, React, Angular, Node.js and Laravel. Join 2,065,602+ users and to access all our free items! www.creative-tim.com 장점은 다음과 같다. 다양한 프..

bootsnipp이라는 사이트가 있다. https://bootsnipp.com/ HTML Snippets for Twitter Boostrap framework : Bootsnipp.com A design element gallery for web designers and web developers. Find snippets using HTML, CSS, Javascript, jQuery, and Bootstrap. bootsnipp.com 부트스트랩의 HTML, CSS, JS 프레임워크 기반으로, 웹사이트의 구성요소를 디자인한 코드를 모아놓은 사이트이다. 웹디자이너, 웹개발자 또는 웹사이트의 필수적이고 중요한 구성요소를 찾고자 하는 사람들에게 도움이 될 것이다. 이 사이트에서 제공하는 것들이 무엇인지 ..

간단한 일러스트레이트, 아이콘을 구할 수 있는 사이트이다. 웹사이트를 제작할 때 필요한 유용한 아이콘이 필요하다면 이곳을 방문해보자. 모두 무료이다. (단 프로버전을 이용하고 싶다면 구독료를 지불해야한다.) https://fontawesome.com/ Font Awesome The internet's icon library + toolkit. Used by millions of designers, devs, & content creators. Open-source. Always free. Always awesome. fontawesome.com 우선 해당 사이트를 무료로 사용하기 위해 이메일을 보내서 키트 코드를 받는다. 이메일을 입력해서 send kit code를 클릭하면 아래의 화면이 나온다. 그러면..

웹디자인을 설계하는 세 가지 방법을 소개한다. 러프한 방법에서 정교한 방법으로 나아간다. 1. 와이어프레임 wireframing - 저충실도 - 신속 - 제작 에너지 소모 낮음 연필과 종이 한 장을 가지고 만들어 낸다. 코드를 쓰기 전에 디자인과 내용에 대해 다른 사람들의 의견도 받고, 그걸 바탕으로 개선 발전해 나갈텐데 그때 하는 디자인 설계를 와이어프레임이라고 한다. 와이어프레임은 신속하고 대략적으로 디자인하는 것이 핵심이다. 2. 목업 Mock-up - 고충실도 - 정교함 - 제작 에너지 소모 높음 웹사이트 디자인을 실제와 비슷하게 표현한다는 의미이다. 작동이 되는 과정을 스크린샷으로 찍어 보여주는 것처럼, 각 화면에 대한 정교한 설계가 필요하다. 미래의 웹사이트 화면을 정확히 보여주기 위해 만든다..

웹디자인을 위한 코드를 작성하기 전에 먼저 설계를 해야하는 데, 신속하고 대략적으로 웹 디자인을 하기 위해서 와이어프레임을 한다. 연필과 종이를 이용해 아이디어를 스케치하는 것을 와이어프레임이라고 한다. 와이어프레임을 하는데 도움이 되는 사이트를 소개한다. 모두 무료이다. https://sneakpeekit.com/ Sneakpeekit Sketch Sheets Printable Grids for Design Wireframing sneakpeekit.com 나의 인사이트가 담긴 아이디어를 스케치해보자. 태블릿, 모바일, 데스크탑 등 원하는 화면을 다운로드할 수 있고 zip파일로 다운로드 받으면, 압축파일을 풀어서 인쇄하거나 태블릿에 옮겨서 활용하면 된다. 그리드도 있어서, 편리하다.