Learn UX/UI

Try these UX and UI tutorials to learn the principles of user-centered design, prototyping, and wireframing. Learn to craft beautiful and intuitive user interfaces.
Read more
Read less
All content
Courses
Tutorials

Getting started with UX/UI

  • 8 Usability Heuristics (Explained With Toasters)

    8 Usability Heuristics (Explained With Toasters)

    Maddy Beard
  • What is Information Architecture? (UX Tips and Examples)

    What is Information Architecture? (UX Tips and Examples)

    Andrea Eppy

    • All UX/UI content:

    1. CSS와 JavaScript를 사용해 수평방향 타임라인 만들기

      CSS와 JavaScript를 사용해 수평방향 타임라인 만들기

      Tutorial • Intermediate

      저는 지난 글에서 기초부터 작성하는 수직방향의 반응형 타임라인을 제작하는 방법을 알려드렸습니다. 오늘은 그와 관련하여 수평방향 타임라인을 만드는 과정을 내용으로 다룰 겁니다.

    2. 초보자용 와이어프레임 제작 가이드

      초보자용 와이어프레임 제작 가이드

      Tutorial • Beginner

      디자인 진행 과정 전체에서 와이어프레임을 제작하는 단계는 중요합니다. 무엇보다 먼저 디자인의 정보 체계를 잡을 수 있습니다. 그에 맞춰서 여러분이 생각하는 사용자의 정보 처리 방식을 기준으로 해서 레이아웃을 짜기가 편해집니다. 아직 와이어프레임을 만들어 본 적이 없다면 지금 시작해...

    3. 당신은 모를 수도 있는 CSS의 7가지 단위

      당신은 모를 수도 있는 CSS의 7가지 단위

      Tutorial • Beginner

      우리가 잘 알고 있는 CSS기술을 사용하는 것은 쉽고 간단하지만 새로운 문제에 맞닥드리면 해결하기 어려워집니다.

    4. 최소화되고 기능적인 UI를 디자인하는 방법

      최소화되고 기능적인 UI를 디자인하는 방법

      Tutorial • Beginner

      미니멀리즘은 “최소의 여백과 단순함으로 특징지어진 스타일이나 테크닉”으로 정의됩니다. 그러니까, 일련의 구성요소들을 바라는 효과를 내기 위해 필요한 최소 양으로 줄이는 것입니다. 이는 불필요한 요소들은 줄이고 엄밀히 인터페이스의 기능에만 필요한 요소들은 남겨야 한다는 의미이지요.

    5. Sketch 심볼을 사용해 플로우 다이어그램을 제작하는 방법

      Sketch 심볼을 사용해 플로우 다이어그램을 제작하는 방법

      Tutorial • Beginner

      이 튜토리얼에서 우리는 Sketch에서 재사용 가능한 유저 플로우와 태스크 플로우 다이어그램을 제작해 보겠습니다. 심볼이 효과를 내도록 기본 요소들과 한두 가지 변경된 요소들을 사용해 Sketch 심볼의 파워를 활용할 것입니다.

    6. 어도비 대안 : 픽셀 아트 응용 프로그램

      어도비 대안 : 픽셀 아트 응용 프로그램

      Tutorial • Beginner

      픽셀 아트는 향수를 목적으로 만든 그래픽의 복고풍 스타일로 종종 간주됩니다. 초기 비디오 게임으로 돌아갔습니다. 그러나 저와 다른 많은 픽셀 아트의 애호가들에게, 각 픽셀을 미적 스테이지에 세심하게 놓아두는 것은 정밀도, 복잡성 및 미학적인 것입니다. 이 미학 스테이지는 진정으로...

    7. 글쓰기가 UX 디자인 역량인 이유 3가지

      글쓰기가 UX 디자인 역량인 이유 3가지

      Tutorial • Beginner

      글쓰기는 디자인 영역을 넘어 사용자에게 미치는 또다른 매체이며, 사용자가 목적을 달성하도록 도와줍니다. 다음은 많은 디자이너들이 그들의 UX 역량을 키우는 한 가지 방법으로 글을 계속 써야하는 이유를 설명해 주는 세 가지 포인트 입니다.

    8. 다섯 가지의 UX 핵심 구성요소

      다섯 가지의 UX 핵심 구성요소

      Tutorial • Beginner

      여러분이 사용자 경험 디자인에 대해 충분히 이해하도록 제가 사용자 경험 디자이너가 어떤 작업을 하는지, 다섯 가지의 UX 핵심 구성요소를 얘기하며 완료하는 작업을 설명하겠습니다.

    9. UX 터치포인트란 정확히 무엇인가? 

      UX 터치포인트란 정확히 무엇인가? 

      Tutorial • Beginner

      사용자가 "니즈"부터 "목적 달성"까지 이동하는 방법이며 사용자들이 제품과 상호작용하는 방식인 고객 여정은 여러 다양한 단계들이나 터치포인트로 이루어집니다. 우리가 터치포인트를 더 잘 이해할 수 있도록 조금 더 면밀히 살펴보겠습니다.

    10. 인라인으로 된 공유하기 메뉴는 어떻게 코딩할까?

      인라인으로 된 공유하기 메뉴는 어떻게 코딩할까?

      Tutorial • Intermediate

      이번 튜토리얼에서 우리는 소위 "인라인으로 된 공유하기 메뉴"의 제작 방법을 학습할 것입니다. 이 인터페이스는 독자가 페이지를 공유하고, 하이라이트 표시된 텍스트를 인용할 수 있는 메뉴를 띄우는 방식으로 동작합니다. 여러분은 Medium처럼 몇몇 유명한 사이트에서 이와 유사한...

    11. 종합 안내: Rem 그리고 Em, 언제 써야 할까

      종합 안내: Rem 그리고 Em, 언제 써야 할까

      Tutorial • Intermediate

      여러분은 아마 좀 더 유연한 측정 단위의 사용을 고려해 보신 적이 있으셨을 겁니다. 그런데 언제 rem 단위를 쓰고, 또 언제 em을 쓸 것인지 아직 완전하게 이해하지 못하셨다면, 이번에 확실하게 안내해 드리겠습니다!

    12. 웹 디자인 용어: "어포던스(Affordance)"란?

      웹 디자인 용어: "어포던스(Affordance)"란?

      Tutorial • Beginner

      "어포던스"는 웹 디자인 세계에서 자주 듣게 될 용어입니다. 이 용어는 Tuts+의 튜토리얼에서 일상적으로 보입니다. 그런 이유로 이 글에서는 용어에 관해 생기는 불확실함을 말끔히 씻어내도록 정의를 내려보겠습니다.

    Related Categories

    CSS
    HTML/CSS
    UI Design
    Sketch
    Unlimited Downloads
    From $16.50/month
    Get access to over one million creative assets on Envato Elements.
    Over 9 Million Digital Assets
    Everything you need for your next creative project.
    Create Beautiful Logos, Designs
    & Mockups in Seconds
    Design like a professional without Photoshop.
    Join the Community
    Share ideas. Host meetups. Lead discussions. Collaborate.
    Quick LinksExplore popular categories