본문 바로가기

  • Building landing pages: A sneak peak behind our process


    Building landing pages: A sneak peak behind our process

    The ultimate guide to building landing pages


  • 11 steps to keep Figma clean


    11 steps to keep Figma clean

    We all probably already know how it is to receive a project from someone else. Not everyone works the same way, it’s what makes our field…


  • Using Figma interactive components to create functional buttons


    Using Figma interactive components to create functional buttons

    Using Figma’s new Interactive Components to make reusable buttons in your prototypes


  • How we use Figma’s API to deliver design to the production


    How we use Figma’s API to deliver design to the production

    Why did we choose Figma?


  • Elements of Design: Color and Contrast


    Elements of Design: Color and Contrast

    Use color and contrast to grab attention and gain brand trust.. “Elements of Design: Color and Contrast” is published by Kristi Pelzel in Upskilling.


  • UI/UX Design: 100% Remote Usability Testing with Maze


    UI/UX Design: 100% Remote Usability Testing with Maze

    How to setup streamlined remote usability testing with maze.co, and get real, actionable results.


  • The Design Thinking Process


    The Design Thinking Process

    Design Thinking is a 5-step process to come up with meaningful ideas that solve real problems for a particular group of people. The process is taught in top design and business schools around the world. It has brought many businesses lots of happy customers and helped entrepreneurs from all around the world, to solve problems with innovative new solutions. #learn #designthinking

    Never miss a new video with our mailing list:

    Join and support us!

    Crash Course:

    Guide for Facilitators:

    Entire Script:
    Step 1: Empathize
    The purpose of step one is to conduct interviews that give you an idea about what people really care about. We need to empathize with their situation.
    For example, if you want to help old people, you might find that they want to keep the ability to walk around. In your conversations, they might share with you different ways they can do that. Later into the interview you'll want to dig a little deeper, look for personal stories or situations where things became difficult. Ideally, you redo the process with many people with the same problem.

    Step 2: Define the Problem
    Looking at the interviews, you can now understand the actual needs that people are trying to fulfill with certain activities. One way to do that is to underline the verbs or activities that the people mentioned when talking about their problems: like going for a walk, meeting old friends for tea, or simply going grocery shopping around the corner store. You might realize it's not so much about going out, but more about staying in touch. After your analysis, formulate a problem statement: “Some elderly are afraid to be lonely. The want to stay connected.”

    Step 3: Ideate
    Now focus only on the problem statement and come up with ideas that solve the problem. The point is not to get a perfect idea, but rather to come up with as many ideas: like unique virtual reality experiences, senior friendly hover boards or a modified pushcart. Whatever it is, sketch up your best ideas and show them to the people you are trying to help, so you get their feedback.

    Step 4: Prototype
    Now take a moment to reflect on what you have learned from your conversations about the different ideas. Ask yourself, how does your idea fit in the context of people's actual lives. Your solution could be a combination of a new idea and what is already being used. Then connect the dots, sketch up your final solution and go build a real prototype that's just good enough to be tested.

    Step 5: Test
    Now test your prototype with actual users. Don't defend your idea in case people don't like it, the point is to learn what works and what didn't, so any feedback is great. Then go back to ideation or prototyping and apply your learning. Repeat the process until you have a prototype that works and solves the real problem. Now you are ready to change the world or open shop.

    To experience design thinking first hand, do the free virtual design thinking crash course from Stanford’s D-School right now. You will learn to design a new gift giving experience. Find the link and a guide for facilitators in the description below. After you are done, share your experience and gift idea in the comment To learn more about creative and critical thinking, check out our other sprouts videos. And if you want to support our channel, visit http://patreon.com/sprouts.


  • 잘 팔리는 기업용 소프트웨어 디자인하기


    잘 팔리는 기업용 소프트웨어 디자인하기

    우리가 만드는 소프트웨어는 잘 팔려야 합니다. 하지만 그러한 제품(특히 기업용 소프트웨어)이 갖춰야 하는 기능이 겉으로 잘 드러나지 않는 것이라면, 잘 팔리는 제품을 만들기란 쉽지 않습니다. 이런 특성으로 인해서 다음과 같은 2가지의 어려움이 발생합니다.


  • 회사 업무 시스템도 UX 시대! 업무효율 높이는 노하우 대방출~


    회사 업무 시스템도 UX 시대! 업무효율 높이는 노하우 대방출~

    이 세상의 모든 제품, 시스템을 만드는 사람들에게 ‘사용성’이라는 단어는 이제 매우 익숙해졌습니다. 달라진 것이 있다면 ‘사용성’이라는 개념이 일반 사용자뿐만 아니라 제품이나 시..


  • 피그마, 디자인 그리고 8px


    피그마, 디자인 그리고 8px

    디자이너, 개발자 그리고 그 중간에 있는것들 | 최근 피그마 코리아 페이스북 그룹에서 활동하기 시작했다. 필자가 개발한 피그마 플러그인 'util+'를 만든 이유에 대해 포스팅했다. 포스팅 댓글들을 보니 생각보다 8픽셀에 집착?하는 디자이너들이 많은것 같더라. 이 사실을 알게 되고 플러그인 개발하는게 즐거워졌다. 8픽셀 디자인이 필요한 이유는 무엇인가? 여기에 대해서는 나보다 훨씬 잘 설명한 포


  • 피그마 디자인코드와 개발환경


    피그마 디자인코드와 개발환경

    리액트, 뷰, 스벨트, 플러터, 스위프트, 코틀린... | 피그마에서 디자인을 실제 개발에 적용하기 위한 코드를 Inspect창을 통해 볼 수 있다. Inspect / Code 에서 CSS, iOS, Android 탭을 선택하면 각각에 해당하는 코드로 보여준다. 이 코드들은 웹, 아이폰, 안드로이드폰의 세가지 환경에 적용되는 디자인 코드들이다. 디자인 코드를 제어할수 있는 환경에 대해 살펴보면 웹은 자바스크립


  • 피그마 디자인을 코드로 만드는 방법


    피그마 디자인을 코드로 만드는 방법

    개발환경 설정없이 시작하는 코딩 | 피그마로 디자인을 완성하면 inspect창을 통해 실제 개발에 적용할 수 있는 코드를 확인할 수 있다. 완성된 디자인을 개발에 적용하는 과정은 각 컴포넌트들의 class name을 정하고 피그마 inspect창의 코드를 복사하여 붙여 넣는다. 이렇게 붙여넣기만 하면 짠~ 하고 디자인과 똑같이 브라우저에 나타날것이라 예상되지만 실제로는 어느정도 코드의 수


  • 개발 구조를 만드는 피그마 플러그인


    개발 구조를 만드는 피그마 플러그인

    피그마 플러그인 #util+ | 필자는 지난 포스팅에서 피그마로 개발 구조를 잡는 방법에 대해 포스팅을 했다. 이 글을 통해 개발구조를 잡아가는 흐름과 개발에 적용한 결과를 이미지를 통해 설명했다. https://brunch.co.kr/@eddwardpark/53 이 과정에서 피그마 플러그인을 사용하여 구조를 잡았다. 여기서 사용한 플러그인(util+)을 어떻게 활용했는지 살펴보자


  • 인간의 눈으로 보는 컬러 디자인 시스템


    인간의 눈으로 보는 컬러 디자인 시스템

    컬러에 대한 이해 | 각각의 색상을 색상휠로 구분하여 사용하는 방법중 HSL, HSB, HSV등이 있다. 색상을 표현하는 방법중 HSL( hue, saturation, lightness )을 기준으로 보면 색을 결정하는 요소는 hue인것을 알수 있다. hue의 컬러휠 빨간색 0도 기준으로 360도까지 노란색, 녹색, 파란색, 자주색등으로 배치되어 있다. 왼쪽의 컬러휠은 1


  • 피그마로 개발 구조 잡기


    피그마로 개발 구조 잡기

    디자인을 개발에 맞게 구조화 하기 | 위의 이미지는 최근 필자가 참여한 프로젝트의 일부분을 각색하여 피그마로 재구성한 디자인이다. 실제 개발까지 진행된 프로젝트의 예제라고 보면 된다. 기획을 바탕으로 디자인을 완성하면 위의 이미지와 같이 2차원적으로 보여지게 된다. 2차원적인 컴포넌트들로는 개발자가 html의 구조를 잡기에는 매우 어렵다. 구조를 완성하고 javascript(react,


  • 디자이너가 개발과 친해지는 방법


    디자이너가 개발과 친해지는 방법

    어디서부터 시작해야 하나? | 디자이너가 개발을 배우는게 어려운 이유는 무엇일까? html은 tag(div, button, input, h1, p)라는 재료를 이용해 디자인에 맞게 구조를 만드는 역할을 한다. css는 html로 만든 뼈대위에 살을 붙여 디자인이 완성된 웹페이지를 만든다. js는 이렇게 만들어진 웹페이지의 구성요소들의 움직임 또는 필요한 기능을 수행한다. 개발을


라이브러리에 저장

좋아하는 강좌들을 수집하고 관리하고 공유하세요