반응형

피그마 Figma, 주목받는 UI GUI 디자인 프로그램

 

https://www.figma.com/

 

Figma: the collaborative interface design tool.

Build better products as a team. Design, prototype, and gather feedback all in one place with Figma.

www.figma.com

1) 윈도우OS, 맥OS 대응 + 웹 브라우저를 통한 디자인 진행

  • 웹 기반 브라우저로 사용하여 프로그램 활용 범위가 용이하며 앱 설치를 하지 않아도 됩니다.
    → 스케치는 맥OS에서만 사용 가능하지만, 피그마는 윈도우OS 및 웹 브라우저에서도 사용할 수 있습니다.
  • 웹 브라우저가 아니라도 컴퓨터에 직접 (네이티브) 프로그램을 설치하여 사용할 수도 있으므로 빠르게 작업을 진행할 수 있습니다.

2) 실시간 협업 시스템 (공동 라이브 디자인)

  • 웹 기반 브라우저 프로그램으로서, 피그마 계정 소유자가 링크를 공유하여 여러 명이 아트 보드를 확인하며 동시에 온라인으로 실시간 작업을 진행할 수 있습니다.
  • 개발자가 참조할 수 있는 정보를 주는 ‘개발 툴바’가 있어 개발자와 소통에 매우 효과적입니다.
    마우스 툴바로도 수치값을 확인할 수 있어 가이드라인이 없어도 빠른 작업이 가능합니다.
  • 스케치는 제플린 zeplin이라는 앱을 따로 사용하여 (핸드오프) 작업물을 내보내는 방식으로 개발자와 소통하는 반면, 피그마는 앱 하나에서 바로 핸드오프 기능을  사용할 수 있습니다.

3) 버전 히스토리 관리

  • 히스토리 영역을 통해 협업자 중 누가 무엇을 변경했는지 확인하고, 필요에 따라 날짜&시간별로 기록되어 있는 히스토리를 확인할 수 있습니다. 때문에 버전 관리 필요 없이 히스토리 기능을 사용하여 편리하게 버전 관리가 가능합니다.
  • 포토샵과는 다르게 사용자가 날짜를 지정하여 저장할 수 있으며, 최대 30일까지 히스토리 저장이 가능합니다.
  • 히스토리뿐만 아니라 피그마 파일로도 저장이 가능하므로 필요시 파일로 내보내기 하여 파일을 관리하실 수 있습니다.

4) 최적화된 어댑티브(ADAPTIVE) 레이아웃 시스템

  • 포토샵은 해상도에 맞추어 매번 새롭게 작업을 해야 하는 것에 비해, 피그마는 외곽 선을 조정하는 것만으로도 대부분의 콘텐츠 레이아웃을 크기에 맞게 자동 조정해 줍니다.

5) SKETCH 파일과의 연동

  • 기존에 작업하던 스케치 파일들을 피그마에 임포트 하여 작업할 수 있습니다.
  • 현재 온라인에 배포되어 있는 스케치 UI 키트들을 피그마에서도 사용할 수 있습니다.

6) 프로토타이핑 PROTOTYPING

  • 직관적인 인터페이스로 UI 상호작용 및 애니메이션 제작이 가능합니다.
  • 클릭/호버/버튼 동작 등 단순한 인터렉션을 넣어 프로토타입을 제작할 수 있습니다.
  • 모바일에 최적화되어있어 플레이 시 프레임 및 모멘텀 스크롤과 같은 세부적인 부분의 프로토타입 또한 실제 화면처럼 느낄 수 있습니다.

장점

  • 스케치와 거의 비슷한 인터페이스를 다양한 환경에서 사용하실 수 있습니다.
  • 윈도우와 맥 모두 호환이 가능하여 사용 환경이 넓습니다.
  • 프로그램을 설치하지 않아도 사용할 수 있고, 1인은 무료로 사용 가능합니다. 

단점

  • 스케치에서 옮겨올 시 폰트가 깨질 가능성이 높습니다.
    *특히 한글 폰트는 무조건 깨집니다. 앱으로 사용할 시 폰트 깨짐 현상이 줄어듭니다.
  • 심볼 기능이 없으나, 스케치에서 옮겨온 것은 사용이 가능합니다, 단 Figma → Sketch로 파일을 옮기는 것은 불가능합니다.

출처 : https://medium.com/designcodeio/figma-vs-sketch-c01e5e74eddd#.jufkza6p1

 

Figma VS Sketch

Figma is like Sketch in the browser with real-time collaboration.

medium.com

 

.

반응형
반응형

[Chrome] 크롬확장프로그램, 폰트(Font) 확인 프로그램

 

http://www.chengyinliu.com/whatfont.html

 

WhatFont Tool - The easiest way to inspect fonts in webpages « Chengyin Liu

← Back to Chengyin's main page What is this for? What is the easiest way to find out the fonts used in a webpage? Firebug or Webkit Inspector? No, that's too complicated. It should be just a click away. Hence I wrote WhatFont, with which you can easily g

www.chengyinliu.com

 

 

 

반응형
반응형

bootstrap dashboard 

*** 27 Best Free Bootstrap Admin Templates 2021 
 -> https://athemes.com/collections/free-bootstrap-admin-templates/

 

25+ Best Free Bootstrap Admin Templates 2021 - aThemes

Creating a professional looking dashboard for your website or app needn’t be expensive. Thanks to this collection of the best free Bootstrap admin templates you…

athemes.com

 
1. https://designrevision.com/downloads/shards-dashboard-lite/

2. https://demos.creative-tim.com/light-bootstrap-dashboard/examples/dashboard.html

3. https://webthemez.com/demo/brilliant-free-bootstrap-admin-template/index.html

4. https://demos.wrappixel.com/free-admin-templates/bootstrap/matrix-bootstrap-free/html/index.html

5. https://p.w3layouts.com/demos/28-03-2016/shoppy/web/index.html#

6. https://webthemez.com/demo/target-free-responsive-bootstrap-admin-template/ui-elements.html

  
7. https://demos.wrappixel.com/premium-admin-templates/bootstrap/monster-bootstrap/package/html/horizontal/index4.html
   : 메뉴 상단 

 

Monster Template by WrapPixel

Daniel Kristeen UI/UX Designer Follow 14 Photos 54 Videos 145 Tasks Lorem ipsum dolor sit ametetur adipisicing elit, sed do eiusmod tempor incididunt adipisicing elit, sed do eiusmod tempor incididunLorem ipsum dolor sit ametetur adipisicing elit, sed do e

demos.wrappixel.com

 

8. https://p.w3layouts.com/demos/july-2016/22-07-2016/colored_admin_panel/web/charts.html
   : 작은 좌측메뉴, 컬러풀한 차트

 

Colored an Admin Panel Category Flat Bootstrap Responsive Website Template | Charts :: w3layouts

 

p.w3layouts.com

반응형
반응형

image full screen css - How TO - Full Page Image

 

https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_full_page 

 

Tryit Editor v3.6

body, html { height: 100%; margin: 0; } .bg { /* The image used */ background-image: url("img_girl.jpg"); /* Full height */ height: 100%; /* Center and scale the image nicely */ background-position: center; background-repeat: no-repeat; background-size: co

www.w3schools.com

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body, html {
  height: 100%;
  margin: 0;
}

.bg {
  /* The image used */
  background-image: url("img_girl.jpg");

  /* Full height */
  height: 100%; 

  /* Center and scale the image nicely */
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}
</style>
</head>
<body>

<div class="bg"></div>

<p>This example creates a full page background image. Try to resize the browser window to see how it always will cover the full screen (when scrolled to top), and that it scales nicely on all screen sizes.</p>

</body>
</html>

반응형
반응형

 

중국어 폰트가 웹에서 굵고, 가늘고 할때 어떤 폰트 쓸까?

 

body{
  font-family: Tahoma, Helvetica, Arial, "Microsoft Yahei","微软雅黑", STXihei, "华文细黑", sans-serif;
}

중국어폰트

body{
  font-family: Tahoma, Helvetica, Arial, "Microsoft Yahei","微软雅黑", STXihei, "华文细黑", sans-serif;
}

반응형
반응형

html table css 참고 

nanati.me/html_css_table_design/

 

html/css로 만드는 table 디자인 샘플

html ⁄ css만으로 디자인한 table 샘플 몇가지를 소개할게요^^ 웹에서 테이블은 정보의 가독성을 목적으로 한 것이기 때문에 심플한 디자인이 될 수 밖에 없죠.거기다 장식할만한 파트도 선이나

nanati.me

 

반응형
반응형

[WEB] 화면별 일반적인 해상도. 웹에서 어떻게 볼 것인가?

 

반응형 웹 대응

====================================================

720, 1024, 1334, 1600 네 가지 분기 처리(Breakpoint)를 기본

360 / 640 / 720 / 1024 / 1334 / 1600 / 1920

- PC

@media all and (max-width:1500px) {}

@media all and (max-width:1280px) {}

@media all and (max-width:1180px) {}

- 태블릿, 모바일

@media all and (max-width:981px) {}

@media all and (max-width:768px) {}

@media all and (max-width:640px) {}

 

gs.statcounter.com/screen-resolution-stats

 

Screen Resolution Stats Worldwide | StatCounter Global Stats

This graph shows the stats of screen resolutions worldwide based on over 10 billion monthly page views.

gs.statcounter.com

 

Source: StatCounter Global Stats - Screen Resolution Market Share

반응형
반응형

AdminLTE - Bootstrap 4 Admin Dashboard

 

AdminLTE is a fully responsive administration template. Based on Bootstrap 4.6 framework and also the JS/jQuery plugin. Highly customizable and easy to use. Fits many screen resolutions from small mobile devices to large desktops.

 

github.com/ColorlibHQ/AdminLTE

 

ColorlibHQ/AdminLTE

AdminLTE - Free admin dashboard template based on Bootstrap 4 - ColorlibHQ/AdminLTE

github.com

반응형

+ Recent posts