Category: GUI Design

  • GUI 디자인 요소 Color-II

    GUI 디자인 요소 Color-II

    로고 이외에도 색상은 브랜드 인지도 중 가장 눈에 띄는 부분이다. 대부분 브랜드 컬러는 대담하고 다양한 커뮤니티를 반영하며, 색상을 적절히 사용하는 것이 브랜드를 응집력 있게 반영하는 가장 쉬운 방법 중 하나이다.

    1. Color Combination
    2. Color Picker
    3. Color Style Guide
    4. References
    5. Practice & Assignment

    슬라이드 자료

  • GUI 디자인 요소 Color-I

    GUI 디자인 요소 Color-I

    색상은 사람의 눈에 가장 먼저 인식되는 시각 디자인의 요소인 만큼 그 중요성을 알고 있다. 잘 조합된 음영, 색조는 호기심을 자극하고, 메시지를 전달하며, 감정과 생각을 만들어 낸다. 영상 제작에서도 전체 디자인에 영향을 미치는 색 구성표를 짜는 과정은 굉장히 신중하게 진행된다. 그러나 표준에 맞는 색상을 선택하고 조합하기란 그리 쉽지는 않다. 그러기에 디자이너는 가장 적합한 색상 조합을 도와주는 창의적이고 인기 있는 도구를 잘 골라서 활용하는 것이 매우 중요하다.

    1. 색의 기초
    2. 색의 코디네이션
    3. 색 도구들

    슬라이드 자료

  • GUI 디자인 요소 Layout-II

    GUI 디자인 요소 Layout-II

    UI/UX의 경우 종이 위에 프린트되는 정적인 결과물과는 달리 시각적 계층구조와 동적인 요소로 이루어져 있으므로 정보성과 시지각에 대한 이해가 필요하게 된다. 이 과정을 통해서 스크린 디자인에 있어서 기본적인 정보관리와 시각적 계층구조를 효과적으로 설계하는 방법을 학습하도록 한다.

    1. 시각적 계층구조
    2. 페이지 프레임워크
    3. 웹 레이아웃 특성
    4. 사례연구
    5. 리소스 활용 방법
    6. 네이밍

    슬라이드 자료

  • GUI 디자인 요소 Layout-I

    GUI 디자인 요소 Layout-I

    GUI를 위한 레이아웃 접근을 효과적으로 디자인하기 위해서 몇 가지 알아야 할 사항을 정리해 본다.

    1. 스크린 이해
    2. 공간 확보와 화면분할
    3. 레이아웃 계획
    4. 그리드(Grid)
    5. 그리드 검사하기

    슬라이드 자료

  • GUI 디자인의 원리

    GUI 디자인의 원리

    그래픽 사용자 인터페이스 디자인을 위해 일반적으로 허용되는 원칙은 다음과 같다.

    1. 심미적으로 즐거운 표현(Aesthetically pleasing) – 다음과 같은 프리젠테이션 및 그래픽 디자인 원칙에 따라 시각적 호소력을 제공한다.

    • 화면 요소 간에 의미 있는 대비를 제공한다.
    • 그룹화를 만든다.
    • 화면 요소와 그룹을 정렬 한다.
    • 3차원 표현 제공
    • 효과적으로 색상과 그래픽을 사용한다.

    2. 명확성(Clarity) – 인터페이스는 시각적, 개념적, 언어적으로 명확해야 한다.

    • 시각적 요소
    • 기능들
    • 은유
    • 단어와 텍스트

    3. 호환성(Compatibility) – 다음과 같이 호환성을 제공해야 한다.

    • 사용자
    • 과제와 직업
    • 제품
    • 사용자의 관점을 채택

    4. 이해도(Comprehensibility) – 시스템을 쉽게 이해하고 습득해야 한다. 사용자는 다음을 알아야 한다.

    • 무엇을 해야 할까요?
    • 무엇을 보아야 하는가?
    • 언제 할 것인가?
    • 어디에서 할 것인가?
    • 그것을 하는 이유
    • 그것을 하는 방법
    • 행동, 반응, 시각 준비 및 정보의 흐름은 이해하기 쉽고 문맥에 배치할 수 있는 현명한 순서여야 한다.

    5. 구성(Configurability) – 설정의 개인화, 구성 및 재구성을 쉽게 허용한다.

    • 제어 감각을 높인다.
    • 이해의 적극적인 역할을 장려한다.

    6. 일관성(Consistency) – 시스템은 같은 처리량을 보고, 작동하고, 적용해야 한다. 비슷한 구성 요소가 있어야 한다.

    • 비슷한 모양
    • 비슷한 용도
    • 비슷하게 작동
    • 동일한 조치는 항상 동일한 결과를 산출해야 한다.
    • 요소의 기능이 변경되어서는 안 된다.
    • 표준 요소의 위치는 변경되어서는 안 된다.

    7. 제어(Control) – 사용자는 상호 작용을 제어해야 한다.

    • 명시적 사용자 요청으로 인해 작업이 수행되어야 한다.
    • 작업을 신속하게 수행해야 한다.
    • 작업은 중단 또는 종료할 수 있어야 한다.
    • 사용자는 오류가 발생하면 절대로 중단해서는 안 된다.
    • 유지되는 컨텍스트는 사용자의 관점이어야 한다.
    • 목표를 달성하기 위한 수단은 사용자의 기술, 경험, 습관 및 선호도와 융통성 있고 호환 가능해야 한다.
    • 사용자가 사용할 수 있는 작업을 제한하기 때문에 상태를 피하야 한다.
    • 항상 적절한 기본값 집합을 제공하면서 사용자가 인터페이스 측면을 사용자 정의 할 수 있도록 허용한다.

    8. 직접성(Directness) – 직무 수행을 위한 직접적인 방법을 제공한다.

    • 사용할 수 있는 대안이 표시되어야 하며,
    • 객체에 대한 동작의 효과가 표시되어야 한다.

    9. 효율성(Efficiency)

    • 눈과 손의 움직임과 기타 제어 동작을 최소화 한다.
    • 다양한 시스템 제어 간의 전환은 쉽고 자유롭게 이루어져야 한다.
    • 탐색 경로는 가능한 한 짧아야 합니다.
    • 화면을 통한 눈의 움직임은 분명하고 순차적이어야 한다.
    • 가능할 때마다 사용자의 요구와 필요를 예측한다.

    10. 친숙함(Familiarity) – 익숙한 개념을 사용하고 사용자에게 익숙한 언어를 사용한다.

    • 인터페이스를 자연스럽게 유지하여 사용자의 행동 패턴을 모방한다.
    • 현실 세계의 은유를 사용한다.

    11. 유연성(Flexibility) – 시스템은 사용자의 다양한 요구에 따라 유연해야 하며 다음을 기반으로 한 수준 및 유형의 성과를 낼 수 있어야 한다.

    • 각 사용자의 지식과 기술.
    • 각 사용자의 경험.
    • 각 사용자의 개인 취향
    • 각 사용자의 습관
    • 그 순간의 조건

    12. 용서(Forgiveness)

    • 공통적이고 피할 수 없는 인간의 실수를 이해해야 한다.
    • 가능할 때마다 오류가 발생하지 않도록 한다.
    • 가능한 치명적인 오류로부터 보호해야 한다.
    • 오류가 발생하면 건설적인 메시지를 제공한다.

    13. 예측(Predictability) – 사용자는 작업의 자연스러운 진행을 예상할 수 있어야 한다.

    • 뚜렷하고 인식 가능한 화면 요소 제공
    • 수행할 행동 결과에 단서를 제공한다.
    • 모든 기대는 완전히 균등하게 이루어져야 한다.

    14. 복구(Recovery) – 시스템에서 허용해야 하는 항목은 다음과 같다.

    • 폐지되거나 취소될 명령 또는 작업.
    • 어려움이 발생하면 즉시 특정 시점으로 복귀한다.

    의 결과로 사용자가 결코 업무를 잃지 않도록 한다.

    • 그들의 부분에 대한 오류
    • H/W, S/W 또는 통신 문제.

    15. 대응성(Responsiveness) – 시스템은 사용자의 요청에 신속하게 응답해야 한다.

    • 모든 사용자 작업에 대한 즉각적인 승인 제공
    • 비쥬얼
    • 텍스트
    • 귀의

    16. 단순성(Simplicity)

    • 가능한 한 간단한 인터페이스 제공
    • 기본값 제공
    • 화면 정렬 지점을 최소화한다.
    • 드문 행동을 희생시키면서 일반적인 행동을 간단하게 만든다.
    • 일관성과 일관성 제공

    단순성을 제공하는 5가지 방법 :

    • 먼저 공통적이고 필요한 기능을 제시한다.
    • 눈에 띄게 중요한 기능,
    • 더 정교하고 자주 사용하지 않는 기능 숨기기

    17. 투명성(Transparency)

    • 인터페이스의 메커니즘에 상관없이 사용자가 작업이나 작업에 집중할 수 있게 해야 한다.
    • 컴퓨터 내부의 작동 및 작동 알림은 사용자에게 보이지 않아야 한다.

    18. 타협(Trade-offs)

    • 최종 디자인은 종종 상충하는 설계 원리를 균형을 이루는 일련의 절충안을 기반으로 한다.
    • 사람의 요구 사항은 항상 기술적 요구 사항보다 우선한다.

    슬라이드 자료

  • PSD, XD, Sketch 파일 변환

    PSD, XD, Sketch 파일 변환

    어도비 XD 또는 포토샵으로 작업 후 Sketch 파일로 변환하는 방법에 관한 웹 툴이 공개되었습니다. 유용하게 활용하기를 바랍니다.
    아래 이미지를 클릭하면 Avocode사에서 제공하는 웹 툴을 만날 수 있습니다.

    PSD, XD, Sketch 파일을 열어 편집할 수 있는 프로그램이다. 브라우저에서 사용 가능하며, 다양한 이미지 포멧으로 저장할 수 있다.

  • 반응형 웹 디자인의 9가지 기본 원칙

    반응형 웹 디자인의 9가지 기본 원칙

    반응형 웹 디자인은 다중 스크린 문제에 대한 훌륭한 솔루션이지만 인쇄 관점에서 볼 때 어려움을 겪습니다. 고정 된 페이지 크기가 없으며, 밀리미터 또는 인치가 없으며, 물리적 인 제약이 없습니다. 점점 더 많은 방문자가 웹 사이트를 열 수 있기 때문에 데스크톱 및 모바일 용 픽셀 단위로만 설계하는 것도 과거입니다. 따라서 여기에 반응형 웹 디자인의 기본 원리를 설명해 보겠습니다. 간단하게 유지하기 위해 레이아웃에 중점을 둘 것입니다.

    반응형(Responsive) vs 적응형(Adaptive) 웹 디자인

    그것은 같아 보일지 모르지만 그렇지 않습니다. 두 가지 방법 모두 서로 보완 적이므로 올바른 방법이나 잘못된 방법은 없습니다. 내용을 결정하게 하십시오.

    흐름(The Flow)

    화면 크기가 작아짐에 따라 콘텐츠가 더 많은 수직 공간을 차지하기 시작하고 아래의 모든 내용이 푸시 다운됩니다. 이를 흐름이라고 합니다. 픽셀과 포인트로 디자인하는데 익숙하다면 이해하기 까다로울 수 있지만 익숙해지면 완전히 이해할 수 있습니다.

    상대 단위(Relative units)

    캔버스는 데스크톱, 모바일 화면 또는 그 사이의 모든 것일 수 있습니다. 픽셀 밀도도 다양 할 수 있으므로 유연하고 모든 곳에서 작동하는 장치가 필요합니다. 그것은 퍼센트와 같은 상대적 단위가 유용 할 때입니다. 그래서 무언가를 50% 넓이로 만들면 항상 화면의 절반 (또는 viewport 창은 열려있는 브라우저 창의 크기)이됩니다.

    브레이크포인트(Breakpoints)

    브레이크포인트를 사용하면 레이아웃을 미리 정의 된 지점에서 변경할 수 있습니다. 즉, 데스크톱에서는 3 개의 열이 있지만 휴대 기기에서는 1 개의 열만 있습니다. 대부분의 CSS 속성은 하나의 중단 점에서 다른 중단 점으로 변경할 수 있습니다. 일반적으로 콘텐츠를 두는 위치는 콘텐츠에 따라 다릅니다. 문장이 중단되면 중단 점을 추가해야 할 수도 있습니다. 그러나 주의해서 사용하십시오. 무엇이 영향을 미치는지를 이해하는 것이 어려울 때 빠르게 지저분해질 수 있습니다.

    최대 값(Max values)과 최소 값(Min values)

    때로는 콘텐츠가 휴대 기기와 같이 화면의 전체 너비를 차지하지만 콘텐츠가 TV 화면의 전체 너비까지 펼쳐지는 것이 좋지 않은 경우가 종종 있습니다. 이것이 Min / Max 값이 도움이되는 이유입니다. 예를 들어 너비가 100%이고 최대 너비가 1000px 인 경우 내용이 화면을 채우지 만 1000px를 넘지는 않습니다.

    중첩 된 객체(Nested objects)

    상대 위치를 기억 하십시오. 서로에 따라 많은 요소를 가지면 제어하기가 어려우므로 컨테이너의 요소를 래핑하면 더 이해하기 쉽고 깨끗하며 깔끔하게 유지할 수 있습니다. 여기서 픽셀과 같은 정적 단위가 도움이 될 수 있습니다. 로고와 버튼처럼 크기를 조정하지 않으려는 콘텐츠에 유용합니다.

    모바일(Mobile) 또는 데스크톱(Desktop) 우선

    기술적으로 작은 화면에서 큰 화면 (모바일 우선) 또는 그 반대로 (데스크톱 우선) 프로젝트를 시작하면 큰 차이가 없습니다. 그러나 모바일을 처음 사용하는 경우 추가 제한 사항이 추가되고 의사 결정을 내리는 데 도움이됩니다. 종종 사람들은 한 번에 양 끝에서 시작하기 때문에 실제로 무엇이 더 잘 작동하는지 확인해야 합니다.

    웹 폰트 vs 시스템 폰트

    귀하의 웹 사이트에 멋지게 보이는 Futura 또는 Didot을 원하십니까? 웹 폰트 사용! 그들이 멋지게 보일지라도, 각각이 다운로드 될 것이고 더 많이 가질수록 페이지를 로드하는데 더 오래 걸릴 것임을 기억하십시오. 반면에 시스템 글꼴은 매우 빠르며 사용자가 로컬 글꼴을 가지고 있지 않은 경우를 제외하고는 기본 글꼴로 돌아갑니다.

    Bitmap images vs Vectors

    아이콘에 많은 세부 정보가 있고 멋진 효과가 적용 되었습니까? 그렇다면 비트 맵을 사용하십시오. 그렇지 않은 경우 벡터 이미지 사용을 고려하십시오. 비트 맵의 경우 jpg, png 또는 gif를 사용하고 벡터의 경우 SVG 또는 아이콘 글꼴을 사용하는 것이 가장 좋습니다. 각각에는 몇 가지 이점과 단점이 있습니다. 그러나 크기를 염두에 두십시오. 사진을 최적화하지 않으면 온라인 상태로 만들 수 없습니다. 반면에 벡터는 종종 작지만 일부 오래된 브라우저는 벡터를 지원하지 않습니다. 또한 곡선이 많으면 비트맵보다 무거울 수 있으므로 현명하게 선택하십시오.

    출처 : 9 basic principles of responsive web design

  • HTML 태그

    HTML 태그

    The Root Element

    html

    Metadata

    head, title, base, link, meta, style, script

    Sections

    body, article, section, nav, aside, h1 ~ h6, header, footer, address

    Grouping

    p, pre, blockquote, ol, ul, li, dl, dt, dd, figure, figcaption, div, main, hr

    Text

    a, em, strong, cite, q, dfn, abbr, data, time, code, var, samp, kbd, mark, ruby, rb, rt, rp, rtc, bdi, bdo, span, br, wbr, small, i, b, u, s, sub, sup

    Edit

    ins, del

    Embedded Content

    img, embed, object, param, video, audio, source, track, map, area, iframe

    Tables

    table, tr, td, th, caption, tbody, thead, tfoot, colgroup, col

    Forms

    form, input, textarea, select, option, optgroup, datalist, label,
    fieldset, legend, button, output, progress, meter, keygen

    Scripting

    script, noscript, template, canvas

    HTML 태그는 HTML 요소의 시작과 끝을 표시하며 속성을 포함 할 수 있습니다. 다음과 같이 사용됩니다.

    <tagname>Element content</tagname>
    
    <tagname attributename="attributevalue">Element content</tagname>
    
    <!-- or, for the few attributes without values, simply: -->
    
    <tagname attributename>Element content</tagname>
    
    <!-- or, for the few elements without content, simply: -->
    
    <tagname>
    
    <tagname attributename="attributevalue"><tagname>Element content</tagname>
    
    <tagname attributename="attributevalue">Element content</tagname>
    
    <!-- or, for the few attributes without values, simply: -->
    
    <tagname attributename>Element content</tagname>
    
    <!-- or, for the few elements without content, simply: -->
    
    <tagname>
    
    <tagname attributename="attributevalue">

    전역 속성(global attributes)은 각 페이지에 나열된 특정 속성과 함께 모든 태그와 함께 사용할 수 있습니다.