디자이너의 서랍, 2020

~~현재 노션의 인라인 테이블을 추가하고 있습니다. 공사 중이죠.~~

→ 2021년에서 다시 만나요!

페이스북 페이지, 디자이너의 서랍에 올라오는 포스팅과 링크를 정리하는 노션 입니다. 디자이너의 서랍 구경가기

💡

문의 및 의견, 오타 및 잘못된 해석과 내용은 pliossun@gmail.com 으로 해주세요. 미디엄(Medium)이 많은데, 하루에 몇 개 이상의 글을 읽으면, '구독'하라는 메시지가 뜹니다.

순서

구상과 설계

타이포그래피와 폰트

UX, UI, Brand

업체

이슈

Branding

™️

브랜드

Product Designer

프로덕트 디자이너의 역할과 의미

🚦

Digital Product Designer

Design System

디자인 시스템 구축부터 운영, 비판까지

⚙

Design System

Social Design

소셜 디자인에 대한 내용

🙋🏻

소셜미디어 디자인하기

구상과 설계

디자인과 서비스 흐름

Title

Author

Caption

Platform

Date

Tags

Every NYT Front Page Since 1852

Josh Begley

165년간의 뉴욕타임즈 첫 페이지의 변화입니다. 컬러 사진이 전면에 등장한 것은 1910년입니다. 활자 매체에서 글이 사진으로 바뀌는 변화를 한 눈에 볼 수 있습니다.

Vimeo

Feb 20, 2017

History

Visualization

ON META-DESIGN AND ALGORITHMIC DESIGN SYSTEMS

SEH

메타-디자인, 디자인의 목적과 방향의 변화에 대한 글

Brunch

Mar 1, 2017

Design System

번역

Previewing Material Design 2.0

Raveesh Bhalla

2.0이라는 말은 공식적인 것이 아니라, 몇 개월간 구글의 제품들을 살펴보고 얻은 것을 표현한 말입니다. MD 2.0이라고도 하네요. 전반적으로 융통성이 조금 더 늘어다고 다양한 태스크에 반응할 수 있게 되었지만, 약간 더 복잡해진 듯 합니다.

Medium

uxdesign.cc

Apr 27, 2018

Material

Design System

Modality Is the One UX Concept That Most Designers Don’t Fully Understand

Fabian Sebastian

Modal의 개념을 알아보자.

Medium

Jan 2, 2019

번역

10 Year Challenge: How Popular Websites Have Changed

Arun Venkatesan

지난 10년간의 주요 웹사이트의 변화

Arun.is

Jan 22, 2019

Web

History

Exploring 17 years of energy transition

Mapbox

Mapbox는 지도와 다양한 데이터를 결합하여 정보를 시각화하는 비즈니스를 하는 기업입니다. 지도 위에 17년간의 에너지 변화를 담았습니다.

Medium

Mar 21, 2019

History

Visualization

Designing B2B Products That Scale

Ida Swarczewskaja

SaaS, B2B 프로덕트에서 디자인 스케일링에 대한 설명입니다.

Medium

May 4, 2019

Design System

An oral history of the AIM away message (by the people who were there)

Dale Berning Sawa

AOL의 1세대 메신저 AIM의 서비스 종료(1990년)에 대한 글입니다.

invisionapp

Aug 12, 2019

History

Message

Social

How to Design a Web Application: Software Architecture 101

The Educative Team

소프트웨어를 개발하기 위해 기본적으로 알아야 하는 소프트웨어의 구조에 대해서 잘 정리한 글

Medium

Feb 7, 2020

101

Architecture

Web

How to Design a Web Application: Software Architecture 101

So you've embarked on the entrepreneurial journey and you've decided to build your own web application. You have an idea but now it's crucial you get the architecture right. In this post we'll walk through these key areas:

https://medium.com/better-programming/how-to-design-a-web-application-software-architecture-101-df568b88da76

Designing B2B Products That Scale

Working in enterprise software for years I designed multiple SaaS products. I always tried to optimize product design process following one goal: Build a design that scales. I wanted design to follow business growth and product evolution, and to adapt to changes in user behavior at the same time.

https://medium.com/@tweetfr/designing-b2b-products-that-scale-819422446ba0

An oral history of the AIM away message (by the people who were there) | Inside Design Blog

When AOL announced it was retiring its seminal, 20-year-old chat service two years ago, a thousand ageing #2000teens shook their heads. It was like they were graduating high school all over again. "RIP AIM", "AIM is ded", "FML": the internet raged in authentic early-aughts chatspeak.

https://www.invisionapp.com/inside-design/an-oral-history-of-the-aim-away-message-by-the-people-who-were-there/?utm_campaign=Weekly%20Digest&utm_source=hs_email&utm_medium=email&utm_content=75829889&_hsenc=p2ANqtz-_N8UIPwPRineyiclPMxEkxU7PakRyPoX8TzF36ZcPGJb0hcFVlxX5c545ifsYmGBplEpExjHeKxLrGSrZvP0cKvG1Vdg&_hsmi=75882364

Watch The New York Times's Front Page Evolve Over 165 Years

The of 1852 looks fairly similar to the New York Times of today, with one big difference: Photos. In the data artist Josh Begley 's latest short film, scrolling images of every front page of the paper of record from 1852 until today reveal how images slowly made their way into the news.

https://www.fastcompany.com/3068529/watch-the-new-york-timess-front-page-evolve-over-165-years

10 Year Challenge: How Popular Websites Have Changed

January 22, 2019 As the #10yearchallenge is making its way around the internet, I thought I would look at how some of the most visited websites on the internet have aged over the last 10 years. Note: this post is best read on a computer or tablet.

https://www.arun.is/blog/10-year-challenge/?fbclid=IwAR3Oh3K-4e0CtNkSP0uEfAa-jDnJBG0ZzD5Vsd_TmjgKlc9hLgCs-UHChTA

10 Year Challenge: How Popular Websites Have Changed

Exploring 17 years of energy transition

How I built the U.S. electric generation map It was a massive amount of data - monthly generating data for tens of thousands of plants, ranging from tiny co-generation plants attached to factories to giant coal and nuclear power stations.

https://blog.mapbox.com/exploring-17-years-of-energy-transition-3a5426f7548f

앞으로의 디자인 방향에 대한 고찰 | 우리나라에서는 아직 쉽게 접하지 못하는 '메타 디자인'의 개념과 미래에 대한 좋은 글이 있어서 번역해서 올립니다. 저의 학창 시절의 교수님이기도 한 원작자에게 비상업 목적으로 사용한다고 사전에 허락을 받았으며, 이하 글의 내용의 모든 저작권은 원작자에게 있음을 미리 공지합니다.

https://brunch.co.kr/@parkisthinking/22

Previewing Material Design 2.0 - UX Collective

I could (and probably should), wait a couple of weeks until Google I/O before publishing this post where I anticipate we'll be hearing a lot about MD 2.0. However, that wouldn't be fun, would it?

https://uxdesign.cc/previewing-material-design-2-0-ec0215f0588f

모달은 대부분의 디자이너가 완전히 이해하지 못하는 유일한 UX 개념입니다. (Modality Is the One UX Concept That Most Designers Don't Fully Understand)

이 글은 Fabian Sebastian 의 Modality Is the One UX Concept That Most Designers Don't Fully Understand 글을 번역했습니다. 저의 모든 글은 허가를 받고 진행 하였습니다 Non-Modal Screens ( 비 모달 화면 ) 이게 전부입니다. 설명해 드리겠습니다. (거의) 모든 상상할 수 있는 뷰포트(viewport)는 이 두 범주 중 하나에 속합니다.

https://www.vobour.com/%EB%AA%A8%EB%8B%AC%EC%9D%80-%EB%8C%80%EB%B6%80%EB%B6%84%EC%9D%98-%EB%94%94%EC%9E%90%EC%9D%B4%EB%84%88%EA%B0%80-%EC%99%84%EC%A0%84%ED%9E%88-%EC%9D%B4%ED%95%B4%ED%95%98%EC%A7%80-%EB%AA%BB%ED%95%98%EB%8A%94-%EC%9C%A0%EC%9D%BC%ED%95%9C-ux-%EA%B0%9C%EB%85%90%EC%9E%85%EB%8B%88%EB%8B%A4?fbclid=IwAR3cdDU7I176312rGEGfXwKhMjfhxcUl61GcDG0tMAoV-aap97rKgrodPZw

디자인 전략

Title

Author

Caption

Platform

Date

Tags

The Ultimate Guide to Becoming a Great Designer (Part 1 of 3)

Jon Moore

위대한 디자이너가 되기 위한 가이드

Medium

May 16, 2019

101

Progress in your design career by thinking at the business level

Stéphane Martin

궁극적으로 디자이너는 최종 사용자와 경험이 풍부한 보호자의 목소리다.

Medium

UXplanet

Jun 4, 2019

101

Mind

The UX of Digital Platforms

Karen McClellan

마켓플레이스와 같은 플랫폼에서 UX를 설계할 때 요소를 생각합니다.

Medium

Mar 15, 2019

101

Platforms

Visual/UI Design을 향상시키기 위한 7가지 간단하고 효과적인 방법

디자인 번역 공장

디자이너가 안정적으로 비주얼과 UI 디자인을 향상시키기 위한 조언입니다.

Vobour

Aug 14, 2019

번역

Designing a digital product: the product definition phase

Cristian Radu

프로덕트 디자인의 시작과 프로세스에 대한 글

Medium

uxdesign.cc

Oct 5, 2019

Product Design

Process

UX Design Process: Choosing and Scaling Methods

✨ They Make Design ✨

프로세스 트렌드를 소개합니다.

Medium

UXplanet

Apr 1, 2019

Process

5 Design Approaches to start a New Creative Project

Masaki Iwabuchi

창의적인 프로젝트를 위한 5가지 접근 방법

Medium

UXplanet

Aug 30, 2019

Product Design

Process

Leveraging Mental Models in Product Design

Miklos Philips

프로덕트 디자인에서 맨탈 모델의 영향력

Medium

Feb 4, 2019

Product Design

Process

Core principles for product designers

Matt C

프로덕트 디자인의 핵심 요소

Medium

uxdesign.cc

Aug 9, 2019

101

Product Design

Beyond the interface

Thomas Byttebier

왜 UI 디자인은 비슷해지는가?

Medium

Jan 18, 2019

Product Design

Architecture

Design System

Why everything on Dribbble looks exactly the same

Soren Iverson

왜 드리블 디자인은 비슷해지는가?

Medium

Jun 19, 2020

Visualization

Trend

The Ultimate Guide to Becoming a Great Designer - Modus

Simplify your process and make your life easier Note: This entire article is tool agnostic. That is, it doesn't matter if you use Sketch, Figma, Adobe XD, Inkscape, or Microsoft Paint, these tips will help you. Starting any profession is a lot like going to a buffet for the very first time, where a myriad of choices are available.

https://modus.medium.com/the-ultimate-guide-to-becoming-a-great-designer-part-1-of-3-88f627233f48?fbclid=IwAR2rFol5_g7vQ82fHvfOlRg3o31LFWHmcqyMZARk_cd5m9AbJb3BZQWKC10

Progress in your design career by thinking at the business level

As you progress in your career, you may find that the growth areas become less obvious. As a young designer, focusing on the craft makes sense, but once you become strong enough in it, soft skills come into play.

https://uxplanet.org/progress-in-your-design-career-by-thinking-at-the-business-level-bfc4e4eec78a

Visual/UI Design을 향상시키기 위한 7가지 간단하고 효과적인 방법(7 simple & effective methods to get better at Visual/UI Design)

Austin Kleon의 ( 예술가와 같은 위대한- Steal Like an Artist 책의 저자)에 따르면 완전히 독창적인 것은 없습니다. 모든 새로운 아이디어는 종종 이전에 사용되었던 하나 이상의 아이디어를 리믹스한 것에 지나지 않습니다. 창조자들은 종종 실제 생활 프로젝트에 이 기술을 사용하고 적용하는 법을 배운 사람들일 뿐입니다. "모든 새로운 아이디어는 매시업이나 하나 이상의 이전 아이디어의 리믹스일 뿐입니다."

https://www.vobour.com/visual-ui-design%EC%9D%84-%ED%96%A5%EC%83%81%EC%8B%9C%ED%82%A4%EA%B8%B0-%EC%9C%84%ED%95%9C-7%EA%B0%80%EC%A7%80-%EA%B0%84%EB%8B%A8%ED%95%98%EA%B3%A0-%ED%9A%A8%EA%B3%BC%EC%A0%81%EC%9D%B8

The UX of Digital Platforms

Platforms are like marketplaces - their business model relies on being the place where others exchange things of value. From eBay to Uber to Facebook to Twitch, people use a platform to exchange goods, services, or content that the platform itself doesn't produce.

https://medium.com/re-write/the-ux-of-digital-platforms-cbd8af9599b

5 Design Approaches to start a New Creative Project

from Design Thinking, Design Driven Innovation to Speculative Design Recently, the word "design" goes beyond traditional product and communication realms. People expect that design plays the role of more socio-technical interventions such as experiences, services, and social innovations. Furthermore, it will be extended to ultimately interdisciplinary layers such as culture, policy, and society as CMU's Transition Design mentions.

https://uxplanet.org/5-design-approaches-to-start-a-new-creative-project-3b548073cb90

UX Design Process: Choosing and Scaling Methods

Everywhere you look there is a new and improved process for making a better user experience. There's Lean UX, Design Thinking, Playbooks, Human Centered Design, and many many more. If you go way-way back, not a whole lot has changed from the early days of Nielsen/Norman, Hackos and Redish, or Mayhew.

https://uxplanet.org/ux-design-process-96ccd8aa021d

Leveraging Mental Models in Product Design - The Startup - Medium

Whether it's innovating a new product or optimizing an existing one, product designers should leverage their product users' knowledge of familiar products and interfaces. The payoff is smoother interactions, faster adoption rates, and better overall usability. People know how your product works and how to use it even before you design it.

https://medium.com/swlh/leveraging-mental-models-in-ux-design-21ba8fbce22d?fbclid=IwAR2hVkYF8sEgch-8tEkUSeRigf6vaEUYfDwI0oAlnrlcZxsVKvPqXI8FJro

Designing a digital product: the product definition phase

The first step in the overall process is defining the product. Think of it as the foundation on top of which you can start building. This represents a crucial step for many reasons, but mainly it's because you can not build a product without understanding its context & its reason for existence.

https://uxdesign.cc/designing-a-digital-product-the-product-definition-phase-bd4c65b2cc93

Beyond the interface - Base Voices

In his article titled UX global trends might be narrowing our minds, author Alejandro Masferrer writes that especially in digital, everything is starting to look the same. Every interface looks similar. Alejandro is right. Have a look at some of the most popular apps of today: They essentially all look the same: bold type for titles, pure line icons for navigation, full black-and-white UI, circular avatars...

https://voices.basedesign.com/beyond-the-interface-6ab9dd725c5d

Why everything on Dribbble looks exactly the same

The commoditization of UI design In college I got an invite to join a platform called Dribbble. I had yet to join the professional world, but appreciated being added to the exclusive platform with a lot of confusing basketball metaphors.

https://medium.com/humans-of-design/why-everything-on-dribbble-looks-exactly-the-same-d1c2ddf8b4d9

디자인 실무와 팁

Title

Author

Caption

Platform

Date

Tags

Design Principles

거의 모든 디자인 원칙에 대해서 정리되어 있는 사이트

Principle

Dieter Rams: 10 Principles for Good Design

훌룡한 디자인을 위한 디터람스의 10가지 원칙

101

Principle

Exploring the Gestalt Principles of Design

CAMERON CHAPMAN

디자이너 CAMERON CHAPMAN의 디자인의 게슈탈트 요소

Visualization

Principle

How to develop an eye for Design

Kathleen Warner

눈으로 앱을 설계하는 방법 사용하지 말고, 연구해라.

Medium

uxdesign.cc

Apr 23, 2018

Process

Designing from scratch: a blank canvas

Dirk HCM van Boxtel

빈 캔버스에서 디자인을 완성해 가는 과정을 보여줍니다.

Medium

Nov 20, 2018

101

Process

Design Principles & Elements to Enhance UI Design

Khairul Anwar

UI 디자인을 개선하기 위한 디자인 원칙과 요소

Medium

Nov 18, 2018

101

Element

Principle

10 principles that form my user interface design strategy

Becky Birch

UI 디자인을 할 때, 쓸 수 있는 10가지 원칙입니다.

Medium

Jan 3, 2019

Principle

101

Interaction Design 101

Adam Gong

인터렉션 디자인을 설계하기 위한 방법

Medium

Mar 1, 2019

101

Interaction

6 Principles of Visual Design

Sarah June Fischer

6가지 비주얼 디자인 원칙

Medium

Jun 9, 2019

101

Visualization

Principle

Creating the perfect design handover

Chloe Sanderson

개발자에게 전달하기 위한 UX 디자인 최적화 방법에 대해 알려줍니다.

Medium

May 13, 2020

101

Process

프로덕트 스펙 문서 작성법

Hyunjung Kang

스펙 문서는 왜, 어떻게 써야 하는가?

Brunch

Jan 3, 2017

101

번역

Product

Core principles for product designers

Matt C

프로덕트 디자이너의 핵심 역량

Medium

Aug 9, 2019

101

Principle

Product

How to Write Your First Product Requirement Document

Karen McClellan

프로덕트 문서를 만들기 위한 첫 단계를 알려줍니다.

Medium

Jul 23, 2019

101

Product

The Many Benefits of Annotating Your Wireframes

Andrew Smyk

와이어프레임에 주석을 쓰세요.

Medium

Mar 29, 2020

101

Product

Why are we colouring in wireframes?

H Locke

와이어프레임에 색을 넣으세요.

Medium

May 25, 2020

Silent design critiques: making your design team more effective

Liam Carter-Hawkins

이 단계별 프로세스를 사용하여 Figma, Zoom 및 Google Sheets를 결합하여 설계 결정을 능률화

Medium

May 4, 2020

Process

디자인 실무와 팁

Design Principles

An Open Source collection of Design Principles and methods

https://principles.design/?fbclid=IwAR0LFHBkXYrbdWpCgFGSFOezE3S1bxN9AtUnCwFKj_s_kDxWCyoZJqKFzaA

'Dieter Rams: Ten Principles For Good Design' by Shuffle | Readymag

Back in the late 1970s, Dieter Rams was becoming increasingly concerned by the state of the world around him - "an impenetrable confusion of forms, colours and noises." Aware that he was a significant contributor to that world, he asked himself an important question: is my design good design?

https://readymag.com/shuffle/dieter-rams/?fbclid=IwAR1KddpGNMeT7aafL7W2Bna6iOC2rWqQUQ1RdLt_1jJaH-h_SQgoBrxDRxo

Exploring the Gestalt Principles of Design

Read the Spanish version of this article translated by Yesica Danderfer Negative space has long been a staple of good design. Leaving white space around elements of a design is the first thing that usually comes to mind.

https://www.toptal.com/designers/ui/gestalt-principles-of-design?fbclid=IwAR1HQPF9oVIco_n6NSOPQDMdOMuze5T-LR2RcpLB40b3Sd6hgJfeE35uUhc

How everyone can design a better application - Muzli - Design Inspiration

Building a user-friendly enterprise application is hard. Because of the complex business rules we have in our application, users can often feel overwhelmed and confused with the workflow and functionality. The downside to a counter-intuitive application is that it often leads to more training sessions and an increasing number of support tickets.

https://medium.muz.li/3-simple-steps-to-make-your-application-better-3fb06d8a820f

Design Principles & Elements to Enhance UI Design - Khairul Anwar - Medium

At its core, UI design makes use of many aspects of design principles to enhance user experience. Today, I will be talking about some of these principles that can be adopted to enhance the overall user experience and user design of an interface.

https://medium.com/@khairul.anwar.isaca/design-principles-elements-to-enhance-ui-design-72c7a93679ba?fbclid=IwAR2QwEC0DS_WTwkz8o_eM7G7gBb47KqrGpypHql3uBJVJ3Jw_WyHCakGRQY

How to develop an eye for Design - UX Collective

When I started off in design, I sucked. I was obsessed with copying pieces of the trending Dribbble shots, but oblivious to how all the pieces worked together. If you could see the harsh drop shadows and unnecessary flourish I added to things, you would gasp in horror.

https://uxdesign.cc/how-to-develop-an-eye-for-design-c5a4c64bb26c

Designing from scratch: a blank canvas

A blank canvas. it might as well be the devil himself. ... so, where do you start?! Complete nothingness. And it's not just on that page in front of you; it surrounds you and swallows you whole. There's only nothing, and it's everywhere. Ultimate freedom. No guidelines, no boundaries.

https://medium.com/8px-magazine/designing-from-scratch-a-blank-canvas-625a6f1291af

Creating the perfect design handover

D esign specifications (specs) are guidelines that developers will use to implement a design. Think of an architect providing building blueprints to the construction team. Many designers think of specs as mindless zombie work. They may even recruit a spec monkey (or more junior designer) to do it for them so that they can get on with the 'real' design stuff.

https://uxdesign.cc/creating-the-perfect-design-handover-8d617c42d23

10 principles that form my user interface design strategy

The user interface is an essential part of any digital product. When the interface is well designed, users don't notice it - it's a seamless experience. Problems begin when the user interface is poorly designed, and users cannot complete their task flow.

https://medium.com/@togetherincred/10-principles-that-form-my-user-interface-design-strategy-6ba359d4baad

6 Principles of Visual Design - Sarah June Fischer - Medium

By Sarah June Fischer This post was originally published on on April 30. In this article, I'm going to share with you six important principles I've learned in my career as a designer. I had originally called this blog post, "The 6 Rules of Visual Design" but then I realized...

https://medium.com/@Sarah_June12/6-principles-of-visual-design-789f56ccfd29

프로덕트 스펙 문서 작성법

스펙 문서는 왜, 어떻게 써야 하는가? | 원문: by Gaurav Oberoi 서사적으로 구성된 6페이지 메모를 쓰고도 명확한 생각을 가지지 않을 수는 없다. - 제프 베조스 "스펙 문서"란 단어를 들으면 대부분은 인상을 찌푸린다. 아무도 읽지 않을 문서를 작성하는 데 보낸 시간을 생각하면서... 문서 작성까지 해야 한다면 누가 과연 민첩하게 코드를

https://brunch.co.kr/@hj-kang/2?fbclid=IwAR0f_rPJuw2yox0hSirNKD92ZLDPCbFJ5t17PJtHPG921eIfntQvXEi7dBo

Core principles for product designers

Merging of practices to create a holistic design team The pain point As a designer working in an incubator lab alongside researchers, engineers, product managers, and stakeholders to build new digital products, it's clear that there is an opportunity for design to take a bigger role in the overall product development.

https://uxdesign.cc/core-principles-for-product-designers-3cedd3631788

How to Write Your First Product Requirement Document

Plus the resources you need to get started I'm writing a product requirement document (PRD) for the first time, and I'll admit, I didn't know quite where to start. But I did know one thing: I knew that I was skeptical of such a time-intensive, technical document.

https://medium.com/re-write/how-to-write-your-first-product-requirement-document-3d6b68d5b52f

The Many Benefits of Annotating Your Wireframes

Creating annotated wireframes is time consuming, but communicating the overall picture of the user experience helps stakeholders see the benefit and rationale for your design decisions. Wireframes are both project documentation and a visual communication guide; make annotation part of your work flow to eliminate misunderstandings or confusion.

https://medium.com/thinking-design/the-many-benefits-of-annotating-your-wireframes-c131a305aefe

Why are we colouring in wireframes?

I was recently involved in a debate around why some wireframes (which were definitely not UI screens) were not 100% greyscale. This got me thinking - when is it ok to use colour in wireframes, and when is it going to cause you problems further down the (design process) line?

https://blog.prototypr.io/why-are-we-colouring-in-wireframes-747dd94068e3

Silent design critiques: making your design team more effective

I magine the following scenario: You've prepared some designs and deliberated over details for days. You want some feedback and ideas on what direction to take. You manage to schedule some time in teammate's calendars and book a room for next week. The day comes and the floor is yours.

https://uxdesign.cc/silent-design-critiques-making-your-design-team-more-effective-afafa4561e82

기기의 해상도와 픽셀 밀도

Title

Author

Caption

Platform

Date

Tags

프로젝트 준비

Jongmin Park

브런치의 김강령 님, 프로젝트 준비할 때 기본 정보

Brunch

Feb 12, 2018

Process

해상도의 기준이 있어야 UI디자인을 시작할 수 있다

플러스엑스

픽셀 및 화면 크기에 대한 안내

Brunch

May 23, 2018

Device

101

Making Sense of Device Resolution & Pixel Density

Alex Hernandez

기기 해상도와 픽셀 밀도, Sketch / Figma

Medium

Jun 12, 2018

Device

101

12 Shades of Keyboard Types in iOS

Ryan NHP

12가지 iOS 키보드

Medium

Oct 24, 2019

Device

101

Designing for different screen sizes & devices

Krisztina Szerovay

디자인 할 때, 디바이스 크기에 대한 내용

Medium

Mar 28, 2020

Device

기기의 해상도와 픽셀 밀도

프로젝트 준비

서비스 디자인에 대하여 | 폴더 프로젝트 진행 시 사용하는 폴더 구조입니다. 브랜딩과 디자인 시스템을 적용한 서비스의 경우 작업 파일에 많은 디자이너와 개발자가 접근하게 되기 때문에 동일한 규칙으로 정리해 혼란을 최소화합니다. 각 폴더 내부는 원본(Resources) 재료(Assets) 작업 (.sketch, .psd 등) 결과물 (_export)로 이뤄집니다. Project-N

https://brunch.co.kr/@blckschrl/11

해상도의 기준이 있어야 UI디자인을 시작할 수 있다

author - 파워포인트러버│UX 디자이너 | "000백화점 모바일앱을 리뉴얼 하고 싶습니다. " "000 멤버스 모바일앱/웹과 PC 웹사이트를 리뉴얼 하고 싶어요" 위와 같이 업무 의뢰를 받게 되면 기본적으로 현재의 사용 환경을 먼저 파악하고 시장 트렌드에 맞는다고 판단되는 해상도를 최대와 최소 기준을 찾는 것이 가장 좋다. * 해상도화면의 정밀도를 나타내는 지표이다.

https://brunch.co.kr/@plusx/6

Making Sense of Device Resolution & Pixel Density - Prototypr

Let's also create a basic circle shape in Adobe Xd and export it at different scale factors. Although Adobe Xd's export interface is a bit different than Sketch, notice that they both default to @1x assets. You can change this by toggling between the available scale factors.

https://blog.prototypr.io/making-sense-of-device-resolution-pixel-density-40922aeb8a6

Designing for different screen sizes & devices

In this article I explain some basic concepts around designing for different viewport sizes, and I also highlight some good practices, things you should be aware of as a designer working on digital products or services. I also list out some details you should specify for the developers.

https://uxdesign.cc/designing-for-different-screen-sizes-devices-part-1-47e6e481abde

12 Shades of Keyboard Types in iOS

As per Apple's documentation, we've got 12 types of the iOS keyboard. Now, let's look through all of them, I've jotted them down with screenshots to make it easy to understand. Specifies the default keyboard for the current input method. Specifies a keyboard that displays standard ASCII characters.

https://medium.com/better-programming/12-shades-of-keyboard-types-in-ios-a413cf93bf4f

반응형 디자인 고려 사항

Being responsive - from a checklist to a BINGO card

When we talk about responsive design, we have a spectrum of devices in mind: screen size, platform, and orientation. We design for specific breakpoints so that content responds according to the device's width, allowing us to provide users with the best possible layout. To track our progress, we use a checklist.

https://tech.trustpilot.com/being-responsive-from-a-checklist-to-a-bingo-card-d8715f96ef12?fbclid=IwAR0XSpUcM9Et8sMbPCvfy8miwSLclwS-vVjnOXJLH7w9ga4bpN3svATZOWQ

Responsive Design - Best Practices and Considerations

Responsive websites are websites that adapt to all screen sizes and resolutions, not only on desktop but also on mobile, tablet, and sometimes even TV. According to Statista, mobile traffic was responsible for 52.64% of all global traffic in 2017, meaning that a website not well optimized for mobile devices is losing out on approximately half of its traffic.

https://www.toptal.com/designers/responsive/responsive-design-best-practices?fbclid=IwAR0n8EbT55qYB4AtDUkyaSNoNuEM1k-8HLPrnIEJbonFZHy7U0GvqcBjAbo

스크롤 디자인 가이드

Scrolling interactions and techniques - UX Collective

How far can you ride scrolling gestures in a design? Pretty dang far. I tested scrolling interactions in three different designs and found some do's and don't's, pros and cons, and maybe a few rules about how to incorporate scrolling. I hope this helps you when it comes to building and prototyping your next design.

https://uxdesign.cc/scrolling-interactions-techniques-d6dafbfa4716

이미지 최적화 가이드

5 steps to speed up your image heavy website - codeburst

Images are a key component of every website. According to HTTP Archive images make up for more than 60% of data loaded on web pages. Being such a critical component of almost all websites, whether it is e-commerce, news, fashion websites, blogs or travel portals, image optimization is important, and perhaps the lowest hanging fruit, if you are looking to speed up your image heavy website.

https://codeburst.io/5-steps-to-speed-up-your-image-heavy-website-65c874a86966

SNS 이미지 사이즈

2019 Social Media Image Sizes Cheat Sheet - Make A Website Hub

Last updated: 6th December 2018 Social media platforms are forever changing the image sizes and formats, so to keep you all updated I have re-created the 2018 social media image sizes cheat sheet and updated it to 2019. The need for strong social media presence has soared in 2016 and will only increase in prominence in 2019.

https://makeawebsitehub.com/social-media-image-sizes-cheat-sheet/

타이포그래피와 폰트

가변 서체와 패러매트릭 서체의 차이

계속 발전하고 대중화되고 있는 패러매트릭 서체에 대해 알아보자. | 구글이 최초의 패러메트릭 서체인 Spectral(링크)을 만든지 약 2년이 지났다. 디지털 상에서의 접점이 실시간으로 반응하는 요즘, 스스로 변화할 수 있는 유동적인 글꼴은 지금 시대를 반영하는 알맞은 트렌드라고 느껴진다. 가변 서체와 패러메트릭 서체는 단순하게 보면 환경에 따라, 사용자의 입력값에 따라 유연하게 변화하는 서체다.

https://brunch.co.kr/@outlines/34

Why letter casing is important to consider during design decisions

Everyone has their own opinion about when to use all capital letters (AC), normal mixed case (MC), title case (TC). Nudge an English teacher and she will lecture you on the rules of grammar. Ask a person who is a marketer and she will argue extensively about the importance of grabbing attention ( go for the headings!).

https://uxplanet.org/why-letter-casing-is-important-to-consider-during-design-decisions-50402acd0a4e

A11Y

Erick spiekermann 지하철이나 버스를 타면 사람들의 얼굴보다 손에 들려있는 스마트폰을 먼저 보게 됩니다. 바쁘게 손가락을 움직이며 톡을 주고받는 사람들, 게임을 하는 사람들, 주소록을 찾는 사람들, 인터넷을 보는 사람들. 그러다 문득 스마트폰이 아닌, 사람들의 얼굴을 보기 시작합니다. 미간을 찌푸리며 실지렁이 같은 눈으로 화면 속의 글씨를 읽는 사람들, 팔 너비 만큼 스마트폰을 앞으로 밀어 보는 사람들, 책을 보듯 편안하게 화면을 읽는 사람들.

https://brunch.co.kr/@gokeshi/3?fbclid=IwAR0EoIxA0mnOVfkodArT2RedukcX00OmsDa_gzkqcl7uJ635M-AMCY6dA40

Become a typography nerd in under 10 minutes

When it comes to typography, a little bit of knowledge goes a long way. People who understand good typography make our world a little more legible and beautiful. Let's learn how... Before you go any further, let's address an area of confusion-the difference between a typeface and a font.

https://medium.com/nextux/become-a-typography-nerd-in-under-10-minutes-5a7eda093cb3

50 Free Futuristic and Modern Fonts to Give Your Designs an Edgy Look

If you're looking for a great-looking font with a bit of an edge, look no further than this collection of modern fonts. This roundup full of sleek, classy, and versatile fonts is perfect for all sorts of modern designs, from websites to printed material.

https://medium.com/sketch-app-sources/50-free-futuristic-and-modern-fonts-to-give-your-designs-an-edgy-look-cbd8c4b27db3

30 Great Free Fonts for 2019 - Muzli - Design Inspiration

via Muzli design inspiration. "30 Great Free Fonts for 2019" is published by Muzli in Muzli - Design Inspiration.

https://medium.muz.li/30-great-free-fonts-for-2019-14814a17e91a

Guide for designing better mobile apps typography

Thanks to the rapid development of the Internet over the past decades, typography in interfaces has gone through the main stages of transformation into the digital world. But the design of mobile apps is still a new wave. In this article, I won't talk about the general concepts of typography, which can be used both in print and in a digital environment.

https://uxdesign.cc/guide-for-designing-better-mobile-apps-typography-5796495ef86f

5 Keys to Accessible Web Typography - Matej Latin - Medium

I wrote about fluid web typography in last month's blog post and I realised that a lot of the popular implementation techniques come with accessibility issues. So I wanted to go back and revisit the basics and the best practices of accessible web typography. This article was originally published on the Better Web Type blog .

https://medium.com/@matejlatin/5-keys-to-accessible-web-typography-2ff9de3157f5

애플, 새로운 폰트 'New York' 공개

샌프란시스코 폰트 알아보기 | 애플 OS에서 사용되는 폰트를 다운로드할 수 있는 https://developer.apple.com/fonts/에 New York 폰트가 추가되었습니다. New York 폰트는 이번 WWDC19에서 공개되었으며, 애플의 초기 GUI 디자이너였던 Susan Kare가 디자인 한 폰트를 조정해서 나왔다고 합니다. 작년 말부터 애플의 book에는 적용이 되어있

https://brunch.co.kr/@zalhanilll/375

Netflix unveils Netflix Sans, a new custom typeface developed with Dalton Maag

Netflix has unveiled a new custom typeface to be used across the streaming platform's brand identity, developed by the in-house design team in partnership with foundry Dalton Maag. According to Netflix brand design lead "Noah Nathan":http://www.noahnathan.com/, the move away from Gotham and to creating a bespoke font was driven by escalating costs and the ability to make the identity more "ownable".

https://www.itsnicethat.com/news/netflix-sans-typeface-dalton-maag-graphic-design-210318?fbclid=IwAR2WGAuS2Y9zBnRDFckqxcRPIXq2itaKbkU_Rzz8HvA7ZeWpWmMrLSQzBpM

IBM Plex

IBM Plex™ is our new typeface. It's global, it's versatile, and it's distinctly IBM.

https://www.ibm.com/plex/?fbclid=IwAR1IHOycPKc_nN-NtbD_vcRkMIePH9_J059kJjqRxTuSc4iKn0KIpo6wISU

Font Review Journal

http://fontreviewjournal.com/

UI

트렌드

Dribbble 2018 Year in Review

2018 was an amazing year-our best year yet! Our mission at Dribbble is to build the best platform in the world for designers to gain inspiration, exposure, feedback, community, and job opportunities. In 2018 alone, our community size nearly doubled!

https://dribbble.com/year/2018/plios_sun?utm_campaign=2019-01-17&utm_medium=email&utm_source=company-newsletter&fbclid=IwAR1J66GH837WH4iGb6F_iqSMAXGw0hrWOgctpeusTG6fJtMZLIckQ7V0rrU

2019 UX/UI 디자인 트렌드

곽지훈 선임 | 2017, 2018년 UX Trend를 분석한 결과, 전반적으로 모바일 퍼스트 현상이 지속되었고, 핵심 콘텐츠를 직관적으로 표현하여 사용자에게 정보를 쉽게 이해시키려는 노력이 있었습니다. UX/UI 측면을 살펴보면, 디지털 환경에서 정보의 몰입감을 높이기 위해 감성적 이미지와 과감한 표현의 UI를 사용하고, 스토리텔링 기반의 모션 인터랙션, 비디오 등 동영

https://brunch.co.kr/@usdlab/38?fbclid=IwAR16r_skmyE-5buKlNNxFi78E3ssK3tzxp2t1YNJitE3hMxMQYvwj5AcO5M

Best Website Design Trends 2019

Trendspotting: Hottest Web Design Trends For 2019

https://agentestudio.com/blog/web-design-trends-2019?fbclid=IwAR3gW3v2IJ31OYvuMBFIjWu0mTEbj-PbDGxtdzwN_DRv7vRmz1j9ISti_PM

Mobile UI: 13 basic patterns of app UI design to know about

Welcome to the world of numerous apps for every occasion. Thanks to the ubiquity of mobile applications, today a smartphone is an office, entertainment center, library, and a supermarket - all at once in your pocket. In this overwhelming abundance of applications, it's increasingly difficult to design an app that would stay on people's phones.

https://uxdesign.cc/mobile-ui-13-basic-patterns-of-app-ui-design-to-know-about-d3f7c6176f13

색, Color

모바일 UI 디자인 기본 요소 - 색채 Color

UI 디자인에서 색채의 사용 | 색채 color는 사용자 인터페이스에서 중요한 시각적이고 기능적인 요소이다. 또한 브랜드 정체성을 표현하고 앱의 스타일을 결정하는 가장 중요한 요소 중 하나이다. 네이버의 녹색이나 카카오의 노란색을 떠올려 보면 알 수 있다. 사용자 인터페이스 측면에서는 색채는 즉각적이면서 강력한 상호 작용을 유도한다. 색채와 UI 디자인 색채는 사용자에게 상호작용 요소를

https://brunch.co.kr/@chulhochoiucj0/17?fbclid=IwAR1XK0PXsLORc1feOu_vGu4RsV3GktYMWRyzfKBf7eeWz1ZgPMJeuT-I-Po

Emotional Design Psychology & Color

When it comes to emotional design, there's a lot of talk about happiness-evoking tech. However, if your goal is to shape your users' behaviors, you'll need to target a much broader emotional spectrum. After 8-years of teaching people how to use psychology to build more engaging technology and digital campaigns, I recently started sharing some of my best techniques.

https://uxplanet.org/emotional-design-psychology-color-2c65ce7f91b0

Flat UI Colors 2 - 14 Color Palettes, 280 colors 🎨

280 handpicked colors ready for COPY & PASTE

https://flatuicolors.com/?fbclid=IwAR07Lbt-spaWgaQLwMypNHuxzqp111Ju3k5eEaCoXQyqzjLi05pOlFYuJz4

Tips on colour interface design

We see and live in a world filled with color. In fact, has many different meanings and can sometimes actually be as powerful as language. A successful digital product relies heavily on the colors chosen for its UI. It's one of the first things we notice.

https://uxdesign.cc/tips-on-colour-interface-design-bccdc691eb72

When not to call a Blue a Blue - functional colour names for Design Systems

As a contractor, I frequently work with different companies and teams which included some good designers. However, regardless of where each design team might be in terms of skill level, as soon as you start handling multiple designs, organising all the elements between them starts to get tricky.

https://uxdesign.cc/when-not-to-call-a-blue-a-blue-functional-colour-names-for-design-systems-773e2a422464

Website color schemes that are changing the way we design | Inside Design Blog

Website design has seen endless trends, from the first ever website as text on a white background, to mono-color templated website themes-we've evolved to see a wide range of website design options. And, specifically, website color schemes.

https://www.invisionapp.com/inside-design/website-color-schemes/?utm_campaign=Weekly%20Digest&utm_source=hs_email&utm_medium=email&utm_content=75829889&_hsenc=p2ANqtz-_N8UIPwPRineyiclPMxEkxU7PakRyPoX8TzF36ZcPGJb0hcFVlxX5c545ifsYmGBplEpExjHeKxLrGSrZvP0cKvG1Vdg&_hsmi=75882364

The Myths of Color Contrast Accessibility

There's a growing demand for designers to make their interfaces accessible to all users. It's important to accommodate users with disabilities, but there are many myths to color contrast accessibility being perpetuated by misinformed people. They often parrot these myths to discredit a design without understanding which situations a color contrast standard applies.

https://medium.com/@uxmovement/the-myths-of-color-contrast-accessibility-4b7fcba77317

Intro to Color Theory

There's a large body of psychology and scientific literature that examines the impact of color on our thinking and emotions. In fact, there is an entire field called color psychology dedicated to the study of hues as a determinant of human behavior.

https://levelup.gitconnected.com/intro-to-color-theory-dce1a63fba01

Why Dark Gray is Brighter than Gray In CSS

A Tidbit of Computer Science History You've might not have noticed this as it's a very subtle bit of trivia but in your browser there are pre-defined colors which aren't what they seem. If I were to tell you that the swatches above are named light-gray, gray and dark-gray could you place the names with the color swatches?

https://medium.com/swlh/why-dark-gray-is-brighter-than-gray-in-css-138c59ae51c3

What are the 10 commandments of color theory?

And how to effectively use them in your projects Color theory is a vast topic that can get quite complicated very quickly. It is worth delving more deeply into it truly understand it. Yet when beginning it can be useful to have a few go-to principles to use and practice.

https://uxdesign.cc/what-are-the-10-commandments-of-color-theory-c786458e405e

Data Visualization for Color Accessibility

Let's talk about color accessibility - the ability to view all colors on a screen regardless of a reader's visual ability. A crucial feature to low-visibility and colorblind readers, color accessibility can be achieved with good design and attention to color contrast.

https://medium.com/@artur/data-visualization-for-color-accessibility-8a30ce25d90b

Accessibility Design 101: Color Contrast Considerations for UX Designers

How do you know if your color choices are accessible? It all comes down to color contrast and the ratio between your background and foreground colors. Making web designs fully accessible might sound like an overwhelming task, but color contrast compliance is an easy win. It's also something you can start doing right away.

https://medium.com/thinking-design/accessibility-design-101-color-contrast-considerations-for-ux-designers-a026b2656ff2

UX Design Colour Psychology, Theory & Accessibility

Colour is an interesting topic, which I feel is often overlooked and sometimes under-appreciated. One of the first things I was taught was the power of colour, how it can have an impact on human emotion, and that there should be purpose behind choosing one.

https://uxplanet.org/ux-design-colour-psychology-theory-accessibility-40c095cc1077

Khroma - The AI color tool for designers

Khroma is the fastest way to generate, discover, search, and save color combos and palettes you'll want to use.

http://khroma.co/?fbclid=IwAR3Rb_3gcbZj_E3Z__byRxlWkiiCpm0hF0LpYP-_jzr4HndK_dVczDj_wmo

Against the color theories

How not to choose a set of colors. Yellow and Red, Blue and Pink, Orange and Purple, Blue and Green, Yellow and Blue, are just some of the common domain color combinations that it is possible to encounter every day, multiple times.

https://uxdesign.cc/against-the-color-theories-d599567b93bd

Principles of Color Psychology in Mobile Application Design

Have you ever thought about the impact of colors on the User Interface? Knowing how to use the right color is essential not only for aesthetic purposes but also for improving User Experience by simplifying navigation throughout your mobile app. Using a specific color palette consumers can get an idea of the purpose of your app at first sight.

https://medium.com/@fireartstudio/principles-of-color-psychology-in-mobile-application-design-163582489d1b

Capture User Attention with Visual Hierarchy and Color Psychology

You want to grab attention. You want to stand out from the competition in a crowded market. You want to ensure the right things are being shown to the right visitors at the right time. What's the key to achieving these goals? Visual hierarchy and color psychology.

https://uxplanet.org/capture-user-attention-with-visual-hierarchy-and-color-psychology-deb993632c0d

그리드, 레이아웃, 컴포넌트

Negative Space in UI Design: Tips and Best Practices

We often think that silence, emptiness or colorlessness is bad for us. We take them for granted without thinking that they are the solid foundation of the contrast. Only silence lets us know the value of the sound. Only empty space lets us understand what we want to fill it with.

https://uxplanet.org/negative-space-in-ui-design-tips-and-best-practices-98311cb2ad16

8-Point 그리드 시스템

(출처 : https://medium.com/built-to-adapt/intro-to-the-8-point-grid-system-d2573cde8632#.oh33ss65e 의 기사를 번역 및 가공한 컨텐츠 입니다.) *왜 px단위가 아닌 pt단위인지는 https://brunch.co.kr/@blackindigo-red/18 를 참고하세요 :) 디자이너라면 웹 사이트나 잡지, 모바일 앱 등 무엇을 디자인하든 간에 '그리드'라는 용어를 들었을 것입니다. 모든 종류의 콘텐츠는 '그리드'라는 시스템을 이용해 배치됩니다. 우리는 가로 그리드를 사용하여 콘텐츠의 내용을 정렬하고 세로 그리드를 사용하여 텍스트 본문을 세로로 정렬합니다.

https://brunch.co.kr/@blackindigo-red/8

Case Study: Developing a Custom Grid for Android and iOS

Yet another true story about the grid! So please, if you're in a rush, then skip past the bullshit and jump directly to the idea, including an example! Let's say you were given the opportunity to design a mobile app for Android and iOS on one of the hottest topics currently worldwide, Alt-coins also known as Cryptocurrencies.

https://blog.usejournal.com/the-grid-for-crypto-a1f0026c0e4

UI 스터디 : 그리드와 레이아웃 분석방법

그리드의 최소단위를 분석하고, 시각물의 단위를 측정해보자 | 오늘은 그리드와 레이아웃 분석에 대해 좀 더 깊이 파고들어가보기로 하자. 1. 그리드라는건 대체 뭐고2. 그건 왜 만들어졌고.3. 무엇에 기반하고있는가? 그리드는 간단히 말해서 모눈종이고.x와 y 좌표로 이루어진 위상체계다. 2차원 평면에 시각물을 재현하기 만들어졌다. 사실 더 깊게 파고들어가면, 그리드란건 절대좌표나 상대좌표. 수학을 넘

https://brunch.co.kr/@clay1987/136

UI cheat sheet: pagination, infinite scroll and the load more button

When you have a lot of content, you have to rely on one of these three patterns to load it. So, which is best? What will your users like? What do most platforms use? These are the questions we will...

https://uxdesign.cc/ui-cheat-sheet-pagination-infinite-scroll-and-the-load-more-button-e5c452e279a8

UI cheat sheet: list vs grids

G rids or lists? That is the question we will look at in this cheat sheet. While they can be used anywhere in your site, we are going to look primarily at search results, catalogs and newsfeeds. Making this choice will determine how your users interact with your content and what they will engage with.

https://uxdesign.cc/ui-cheat-sheet-list-vs-grids-48151a7262a7

현재 사용하는 4px 기반의 그리드 - guleum - Medium

본 글은 UX Collective에 기제된 글을 각종 번역기와 의역, 배경지식을 활용해 번역한 글입니다. 최대한 이해가 가기 쉽게 번역했지만 영어 능력이 좋으시다면 이 글 보다는 아래의 원글을 보시는 것을 권해드립니다. (본 글의 저작권은 Ethan Wang와 UX Collective에 있습니다.) 저는 2년이상 4px 기반의 그리드를 사용해왔고...

https://medium.com/guleum/%ED%98%84%EC%9E%AC-%EC%82%AC%EC%9A%A9%ED%95%98%EB%8A%94-4px-%EA%B8%B0%EB%B0%98%EC%9D%98-%EA%B7%B8%EB%A6%AC%EB%93%9C-817ff7c8247a

버튼

UI cheat sheets: buttons

My favourite design element is the buttons. In fact, I [insert swear word of your choice] love buttons. In this cheat sheet, we will go through different types of buttons, states, and interactions. For the purpose of this story, we will be ignoring radio buttons, tabs, checkboxes, and other types of buttons - we will just be looking at 'normal' buttons.

https://uxdesign.cc/ui-cheat-sheets-buttons-7329ed9d6112

7 Basic Rules for Button Design - UX Planet

Buttons are an essential element of interaction design. They have a primary role in the conversation between a user and the system. In this article, I'll review seven basic principles you need to know to create effective buttons. When it comes to interacting with user interface, users need to know instantly what is 'clickable' and what's not.

https://uxplanet.org/7-basic-rules-for-button-design-63dcdf5676b4

brunch.co.kr

https://brunch.co.kr/@chulhochoiucj0/23?fbclid=IwAR2uznQ_9-8kg_VVQLX4S4PLFdBqeM3d8lKmFbxGVFwzl54O_CFwboIVJgA

[번역]모바일 CTA 버튼을 직관적으로 만들기

CTA버튼(Call To Action Button, 사용자의 목적을 달성하게 하는, 또는 사용자가 누르게 하여 서비스 제공자의 목적을 달성하게 하는 버튼)을 어떻게 하면 눈에 잘 들어 어도록, 직관적으로 만드는 방법에 대한 글입니다. 버튼의 중요도 및 역할에 따라 순서, 색상, 텍스트 굵기를 다르게 적용하는 방법을 안내하고 있습니다. 상식적인 내용이기는 하

https://brunch.co.kr/@monodream/20

버튼 디자인

Buttons vs Links 버튼은 사용자가 취할 수 있는 액션을 수행하게 한다. Dialog, Form, Toolbar 등의 전반적인 UI에 사용된다. 버튼과 링크의 차이는 다음과 같다. Link는 "더 보기", "Roger Wright 프로파일 보기" 등 다른 장소로 내비게이션 할 때 사용된다. Button은 "제출하기", "합치기", "새로 만들

https://brunch.co.kr/@monodream/44

The anatomy of a button - UI component series

All you need to know about button design, one of the main interactive building blocks for creating a user interface. In order to design the right interactions, we need to look back at the history and origins of physical pushbuttons, a direct predecessor of the UI component so heavily used in all digital products today.

https://uxdesign.cc/button-design-user-interface-components-series-85243b6736c7

Design better buttons

A button is an interactive element that results in an action described on it. You can bet that if it says "save" on a button, clicking it will most likely "save" something. It's also one of the most important interactive element of any digital product.

https://uxdesign.cc/design-better-buttons-a5c90a113280

Why Text Buttons Hurt Mobile Usability - UX Movement - Medium

The usability standards for buttons are higher for mobile apps than desktop apps. With a smaller screen and finger navigation, mobile buttons must be easy to tap, read, and recognize. Most solid buttons meet this standard, but text buttons rarely do. Before you use text buttons on your app, here's what you should know.

https://medium.com/@uxmovement/why-text-buttons-hurt-mobile-usability-b04c4d465437?fbclid=IwAR0Xle1rsdkamkmE7BrrZ5hreL9N8uHUsMmRdlFLcv-0ZmCs6zd9rluNGTQ

Make sense of rounded corners on buttons - UX Collective

Should we swap sharp-cornered buttons with rounded buttons? Do rounded buttons perform a better usability? How do we make wise button decisions? These are the questions you may run into when you dive into the UX behind rounded buttons in apps.

https://uxdesign.cc/make-sense-of-rounded-corners-on-buttons-dfc8e13ea7f7

Ghost buttons: Why you should be afraid. - Prototypr

Introduction: What are Ghost Buttons? You've decided to buy a new pair of shoes. You open up google, navigate to your favorite shoe site, and linger for a second at their home page. The banner image is appealing, but where is the button to get you to the pair you want?

https://blog.prototypr.io/introduction-what-are-ghost-buttons-a87af5c8cee8?fbclid=IwAR2PqiEwKXqiAbl7Torub-xRBzC1cKsPZladVMjUGam_ow3PlE32U2CdB3Y

When You Need to Show a Button's Loading State

Buttons have more than an enabled and disabled state. They also have a loading state. The loading state isn't usually shown to users because most actions happen within seconds. But for operations that take longer than usual to occur, not showing the loading state leads to action errors.

https://medium.com/@uxmovement/when-you-need-to-show-a-buttons-loading-state-41fc4d5e3c65

Toggle-Switch: Six Design Inspirations

Toggle switches are common UI control in digital interfaces. They allow users to choose between two mutually exclusive options, and the one option should always enabled by default. Toggle switches are best used for changing system settings and user preferences. Below are six excellent examples of toggle switches.

https://uxplanet.org/toggle-switches-six-design-inspirations-b0559b79acbf

Secrets to Designing an Excellent Floating Action Button

As one of the most crucial elements in Android UI, floating action button plays an important role. It's always the most charming and visual elements and presents the high efficiency of action. What are the basic guidelines for the FAB? Where can it be used? Let's take a look at this article.

https://medium.com/life-never-dead-and-gone/secrets-to-designing-an-excellent-floating-action-button-665035fe970c

폼

11 form design guidelines

I really like it when forms auto-focus the first input field as I just have to type, tab, type, tab, and done. Although it only saves me one additional click, it does enhance the overall experience in a subtle way.

https://uxdesign.cc/11-form-design-guidelines-4b2f1c659414

Designing better mobile checkout experience - a UX case study

A few weeks back, I was provided with a great opportunity to hone my UX/UI design skills and explore the food ordering industry while having fun designing and solving the frustrating checkout experience associated with some popular food ordering and delivery apps in today's market.

https://uxdesign.cc/designing-better-checkout-experience-a-case-study-of-joffud-app-a585b3e6dfa5

UI 폼 디자인의 모든 것(1부)

1.먼저 콘텐츠를 면밀히 검토한다. 2.폼에 있는 필드 개수를 최소화한다. 3.선택적(optional)인 필드라면 명확하게 표시한다. 4.폼 필드의 순서를 최적화한다. 5.출시하기 전에 폼을 철저히 테스트한다. 6.출시하기전에 A/B 테스트를 한다. 7.폼의 속도를 테스트한다. 8.넓은 레이아웃에서는 폼을 신중하게 배치한다. 9.1열(one-column) 레이아웃을 사용한다. 10.레이블은 왼쪽이 아닌 위에 배치한다. 11.리스트, 체크 박스 및 라디오 버튼을 수직으로 정렬한다.

https://brunch.co.kr/@thinkaboutlove/262

10 Ways to Improve Dropdowns in UI & UX Design

D ropdowns are one of the most widely used and versatile tools in the UI & UX designer's toolbox. They provide a simple way for designers to group many options into one handy component. There are though some fundamental ways in which dropdowns should be improved.

https://uxdesign.cc/10-ways-to-improve-dropdowns-in-ui-ux-design-59d61a304b70

더 나은 양식(form)을 디자인하는 7가지 방법 (7 ways to design better forms)

이 글은 Quovantis의 7 ways to design better forms글을 번역했습니다. 저의 모든 글은 허가를 받고 진행 하였습니다 디자이너들이 웹 양식(form)에 공감이 부족한 것에 대해 무엇...

https://www.vobour.com/%EB%8D%94-%EB%82%98%EC%9D%80-%EC%96%91%EC%8B%9D-form-%EC%9D%84-%EB%94%94%EC%9E%90%EC%9D%B8%ED%95%98%EB%8A%94-7%EA%B0%80%EC%A7%80-%EB%B0%A9%EB%B2%95-7-ways-to-d?fbclid=IwAR3OmuHbgyIiDwf8QpREeYwdF3wU9BocvSgCeK6Ey3tv5zRGEKhOKkHWxrA

텍스트를 입력하세요.

근데 어떻게요? | 안녕하세요. 오랜만입니다. 개인적으로 재충전의 시간을 가지고 돌아왔습니다. 내용을 입력하거나 수정하는데 반드시 필요한 UI가 있죠. 텍스트 필드입니다. 사용자가 서비스와 직접적으로 소통하기 위해 필요한 텍스트 필드는 어떻게 만드는 게 좋을까요. 좋은 방법을 생각하기 위해 텍스트 필드를 구성하는 요소 하나하나를 분석한 아티클을 가져왔습니다. https://

https://brunch.co.kr/@bundi/36

7 design patterns to improve your login design

Login forms may seem easy on the surface but when you dive deeper, you will find that it consists of many intricate details. In order to ensure that your user experience is seamless from the very beginning, you should design your login forms to be as intuitive as possible.

https://uxdesign.cc/7-design-patterns-to-improve-your-login-design-e75c88a87ee0

Designing better sign-up screens

In the vast majority of apps, sign in & sign up screens are the first screens a user will experience, and this first impression will affect how users' perceive the aesthetics, usability, and credibility of an app. "Unfortunately, people do judge the book by its cover."

https://uxdesign.cc/ux-tips-for-designing-better-app-sign-up-screens-3c3202658c90

아이콘

AX디자이너의 브랜드 아이콘 제작기

이 글은 아래 작업에 대한 후기이다. https://www.behance.net/gallery/84338977/Samsung-Fire-Marine-Insurance-Brand-Icon-Design 부푼 꿈을 안고 입사하게 된 신입 디자이너들은 대부분 하루빨리 재미있으면서도 중요한 업무를 맡고 싶어 한다. 나 또한 그랬다. 나에게 가장 먼저 주어진 일은 삼성화재 브랜드 아이콘 제작이었다. 말 그대로 PLUS A에 정식 출근해 책상에 앉은 지 1시간이 채 지나지 않아 얼떨결에 아이콘부터 그리기 시작했다.

https://brunch.co.kr/@plusxadvancelab/5

Foundations of iconography

Sometimes the metaphor is a little outdated, but understandable through repeated use. In the early days of personal computing the floppy disk saved our files to a thin, square disk - a whole 1.44 megabytes worth! Though we don't use this object anymore, we still use a floppy disk icon to indicate a save action.

https://uxdesign.cc/foundations-of-iconography-f95d7233a3e6

Hopefully, the Ultimate Guide to an Interface Icon Set

Creating monochrome icons for user interfaces. For nerds who have read my article on visual weight and optical alignment. An interface icon usually can be approximated to one of the basic formats: a landscape rectangle, a portrait rectangle, a diagonal rectangle, a circle, a triangle, a square.

https://medium.muz.li/icon-set-3b4fc87dc6b5

Solid Vs. Outline Icons: Which Are Faster to Recognize?

When building a mobile app, there comes a time when you have to decide whether to use solid or outline icons. Which style is better for user experience? Some think the difference between them is just a matter of preference, but research shows there's more to it than that-one style has a faster recognition rate than the other.

https://medium.com/@design.inspiration/solid-vs-outline-icons-which-are-faster-to-recognize-f4b9025ce9ba

시각적으로 균형있는 디자인하는 방법(시각 보정 팁)

목차 1.측정한 크기와 눈에 보이는 크기 2.다양한 도형의 배열(정렬) 3.시각적으로 올바른 모서리 라운딩 4.보너스 + 추천 책 1920년대 시각적 인식에 대한 게슈탈트 이론이 발표되었다. 이 이론은 우리의 눈이 어떻게 이미지를 구분하고 우리의 뇌가 어떻게 그들을 해석하는지에 대한 과정을 설명한다. 당신은 아마 해당 이론에 포함된 유사성의 원칙이나,

https://brunch.co.kr/@thinkaboutlove/227

시각적인 보정 - UI / UX 번역 매거진 - Medium

Luke Jones 가 Medium에 기고한 'Optical Adjustment '라는 글의 번역입니다. 기본적인 내용들이지만, 다시 한 번 정리해보는 의미로 번역해봅니다. 학창시절에 교수님께서 항상 말씀하셨던, 'Believe your eyes' 가 생각나는 글입니다. 디자인을 시작한 지 얼마 안되었을 때였다. 나는 포토샵이나 CSS가 말해주는 정보에 의존했다. 포토샵이 두 개의 도형이 정렬되어있다고 하면, 그럼 그냥 정렬되어 있는 것이었다.

https://medium.com/ui-ux-post-translator/%EC%8B%9C%EA%B0%81%EC%A0%81%EC%9D%B8-%EB%B3%B4%EC%A0%95-%EB%B2%88%EC%97%AD-f73a2bff120e

11 Optical Illusions Found in Visual Design - Prototypr

Throughout my years of being a Product Designer, I have come across many surprises when working with visuals that have made me go 😕😳😲😡😱. I've written this article to help you understand the reasons behind why some of these everyday 'gotchas' can leave you bewildered.

https://blog.prototypr.io/11-optical-illusions-found-in-visual-design-295e7ae211b9

Iconography. Good or bad? As always, it depends - SEEK blog - Medium

Icons are everywhere. Download one of thousands of free vector icon kits from the Internet™️ and start throwing pixels in the shape of hamburgers, kebabs and magnifying glasses over your artboards and you've got yourself a design. But have you stopped to think when to use an icon, and when not to use one?

https://medium.com/seek-blog/iconography-good-or-bad-as-always-it-depends-8ea9a28e0b

How icons improved our secondary navigation experience by 40%

Have you ever designed an amazing feature just to find out no one is using it? As designers, icons are something we deal with regularly. Whether you love them or hate them, the right icon can drastically change your user's experience.

https://uxdesign.cc/how-icons-improved-our-secondary-navigation-experience-by-40-12519e7b47d

How We Changed the Facebook Friends Icon - Facebook Design - Medium

Facebook headquarters is an amazing place. The snacks are free, the sun always shines and everyone is full of the best intentions. During my first week I encountered hundreds of people earnestly trying to make the world a better place. I also foresaw how easy it would be to adjust to this new normal and lose perspective.

https://medium.com/facebook-design/how-we-changed-the-facebook-friends-icon-dc8526ea9ea8

The design guide to iOS and Android app icons - Muzli - Design Inspiration

Despite the small size, an icon promotes an application in the App Store and Google Play, presents the user with it and also helps to find it on the Home screen after installation. It's a great responsibility, and it depends on a designer if an icon can cope with that.

https://medium.muz.li/the-design-guide-to-ios-and-android-app-icons-c1a73d3f278f

SF Symbols in iOS 13

SF Symbols were introduced during WWDC 2019 and are a big gift to developers. Apple gave us free symbols to use in our app and it's easy to use them! It's time to dive into what they are and how you...

https://medium.com/better-programming/sf-symbols-in-ios-13-60fff3127ba5

7 Principles of Icon Design

Clarity, Readability, Alignment, Brevity, Consistency, Personality, Ease of Use Creating a high-quality icon family requires a thoughtful approach, a trained eye, a bit of iteration, and a lot of practice. Below, I'll illustrate the hallmarks of quality through 7 principles and plenty of real-world examples.

https://medium.com/@minoraxis/7-principles-of-icon-design-e7187539e4a2

UX

린 UX 1단계 - 가정 세우기Ⅰ(문제기술편)

도서리뷰] 'LEAN UX'를 읽고 1/4 | 들어가기 전에 최근에 UX 관련된 책들을 몇 권 구매했는데 그 중 가장 기억에 남는 건 린시리즈의 'LEAN UX'였다. 고맙게도 두께가 그리 두껍지 않다. 가방에 넣고 어느때나 꺼내봐도 좋을! 딱 그 정도의 두께다. 그래서 더 자주 손이 갔고 시간을 정해 읽기보다 여유가 있을 때 조금씩 여러번 읽었다.

https://brunch.co.kr/@hyeminimi/12

Lean UX

So far we talk about many different aspects of UX. There are many process are followed by people and they are happy with it. I also know people who do not follow any process but still they are in business.

https://medium.com/@tushar_69534/lean-ux-f4f7fb7a373f

린스타트업은 스타트업만을 위한 게 아니다

애자일 방법론 ② 린스타트업(lean startup) | 린스타트업은 IMVU의 창립자 중 한 명인 에릭 리스(Eric Ries)에 의해 개발된 방법론이다. 그는 IMVU 설립 초기 자신들의 기대와는 다르게 실패의 어려움을 겪던 중 도요타 생산 시스템인 린 기법에 영감을 받아 린스타트업을 개발하게 된다.

https://brunch.co.kr/@hrbulletin/7?fbclid=IwAR19ASfcOAwh-VrVzh9q8WEmZ9TD1HaZwumoiovLW9NxTam0gq1sADbmq9w

UX strategies to guide users through a complicated journey

Are you designing a complicated and somewhat confusing user journey? Are you redesigning a product with features not connected cohesively? Are you trying to provide guidance to your users so that they are always clear on the next steps?

https://uxdesign.cc/ux-strategies-to-guide-users-through-a-complicated-journey-6b945b61eadd

7 Stages of User's Action in Design - Eugen Eşanu - Medium

Or why do we need to know about the human mind when designing products? Everything we design nowadays, from chairs to web applications, we make it for people. And understanding the human mind is a crucial element during the design process. Failing to do that, we make products that are difficult to use, clunky and hard to understand.

https://medium.com/@eugenesanu/7-stages-of-users-action-in-design-853f3de146b9?fbclid=IwAR3rjPLPBHRwW8aBcyxy8V7n0vBk9EK6MO72S7M08G_mQJIwrzLvP-4R_NA

uxdesign.cc

https://uxdesign.cc/10-usability-heuristics-every-designer-should-know-129b9779ac53

UX Is All About Sales

I've lost count of how many times I showed clients and stakeholders the famous "Pyramid of UX" design to clearly explain exactly what UX is. Old but gold! I'm sure that a lot of you out there did the same, multiple times! Raise your haaands!

https://uxplanet.org/ux-is-all-about-sales-db659a1fd853

The 5 Skills UI Designers Need to Become UXers

Over the last few years, the number of UI designers pursuing UX roles has increased to the point that it's become a trend. And, it's a smart move for several reasons. With today's hyperfocus on digital transformation, UX is the key to providing the right digital experience.

https://medium.com/outsystems-engineering/the-5-skills-ui-designers-need-to-become-uxers-6736e1944e06

blog.prototypr.io

https://blog.prototypr.io/so-you-want-to-hire-a-ux-designer-9906d32fda1b

UX research methods and the path to user empathy

In 1941, a baby boy named Ken was born in Oakland, CA. Ken's dad, Candido, was an Italian immigrant and inventor who, along with his brothers, supplied the United States with lightweight airplane propellers during the First World War. Unfortunately, baby Ken suffered from juvenile rheumatoid arthritis, a potentially fatal condition that can cause severe deformities.

https://uxdesign.cc/ux-research-methods-and-the-path-to-user-empathy-81f912d5845a

Interviewing: more than a user research method

The following advice is the distillation of my learnings through conducting and witnessing more than 100 interviews, as well as the gatherings collected from almost 10 books focused on user research. Prior jumping out and start asking questions to participants, you need to plan your research project.

https://uxdesign.cc/interviewing-more-than-a-user-research-method-81ab92420497

10 Psychology Concepts for Designers - Eleanor McKenna - Medium

This post was originally published on onepixelout.com Once designers were just asked to make something beautiful, but this is happily - mostly - no longer the case. The value of design is understood throughout the tech industry and it's not because we make things look nice.

https://medium.com/@onepixelout/10-psychology-concepts-for-designers-1c680a12f8d8

Design frameworks, what are they and what's the difference anyway?

In my first story ' User Experience is ... ' I promised that ... over the course of a few stories, I'll try and cover a few of the sciences we draw upon in our art as a creative community to create engaging experiences.

https://uxdesign.cc/design-frameworks-what-are-they-and-whats-the-difference-anyway-25f20e8a5bd1

So you want to hire a UX Designer.

(Or maybe you self-identify as one) First things first: There is no such thing as a UX Designer.(User) Experience Design is a design discipline on the same level as e.g. Industrial Design, Architecture and Communication Design/Advertising.

https://blog.prototypr.io/so-you-want-to-hire-a-ux-designer-9906d32fda1b

UX Inspiration #5: Mental Model

Offering visual examples of how different companies design their user experiences. In 2000, it was put forth by usability expert Jakob Nielsen, who explained that users tend to develop an expectation of design patterns based on their past experience from other products. This principle encourages designers to follow common design patterns in order to avoid...

https://uxdesign.cc/ux-inspiration-5-mental-model-e44381b6e727

The usability of UX documentation

Ultimately people don't buy things they don't understand. Whether it's a pitch or a design solution. None of your deliverables matter unless the intended audience finds them usable and understandable. And this is even more critical, now that we are working more and more in a remote context, presenting down the internet rather than face-to-face or worse, slinging something over slack or email and hoping it lands as we intended.

https://uxdesign.cc/the-usability-of-ux-deliverables-b0d28cf322a8

UX is actually very simple

I'm still not sure where to put UX. Is it design? Is it IT or psychology maybe? Hang on... why do I need to put UX into a category at all? I'm part of the last generation of people growing up with no computer or mobile phone.

https://uxdesign.cc/ux-is-actually-very-simple-ebeaf8a69fee

A Comprehensive Overview of UX Design Deliverables - Thinking Design by Adobe - Medium

What do UX designers do on a daily basis? A lot of things! UX professionals need to communicate design ideas and research findings to a range of audiences. They use deliverables (tangible records of work that has occurred) for that purpose.

https://medium.com/thinking-design/a-comprehensive-overview-of-ux-design-deliverables-192e7484bb57

UX task flows versus user flows, as demonstrated by pancakes

A common question students ask me when learning about interaction design is: what's the difference between task flows and user flows? While every designer seems to have a slightly different understanding of the two concepts, this is an effort to offer one perspective on the distinction.

https://medium.com/erika-harano/ux-task-flows-versus-user-flows-as-demonstrated-by-pancakes-896e78a98026

Web Page Usability Matters

Addy Osmani is an engineering manager at Google working on Chrome. He is author of open-source projects like Yeoman, TodoMVC and Material Design Lite. He has also written books like Learning JavaScript Design Patterns with O'Reilly.

https://addyosmani.com/blog/usability/?fbclid=IwAR0vtVA7tQuVthLpKm4LJiw6B5LasDfIBmJ5P6pYlgeiAvkfD-nBNMR2WjI

Stop copying, and start doing competitor UX analysis properly

I few years ago I was working for a company when someone in our team stumbled across the website of a brand new competitor in the sector. Their site initially looked familiar, and on closer inspection it turned out they had completely copied ours. Rather than being angry about it, I was actually more disappointed.

https://uxplanet.org/stop-copying-and-start-doing-competitor-ux-analysis-properly-bff8dbfc644f

www.researchgate.net

https://www.researchgate.net/publication/281628009_Flat_Design_vs_Traditional_Design_Comparative_Experimental_Study?fbclid=IwAR2qesBTJV8_TycPyjFreNZQThAbigyAeytcDVRubPJYTanQGIMhqRgQmjA

5 UI and UX mistakes that destroy interface (still in 2019)

As Bruce Lee once told: I' m not afraid of someone who knows 1000 tricks, I am afraid of someone who knows 1 trick 1000 times. It fits perfectly to what I'm going to tell you today: UI mistakes.

https://medium.com/vectorly-team/5-ui-and-ux-mistakes-that-destroy-interface-still-in-2019-ebf2d7678faa?fbclid=IwAR0KDV_ipcu40ghxMbt0QGtBb_3DplqOiBHsMH8CPlCM26SYzUUY4QcOJuc

Scarcity in UX: The psychological bias that became the norm

Even though scarcity can be applied to unquantifiable features like quality or experiences, its effect is much more powerful when assessing measurable resources like objects or places. It's the reason the likes of Amazon and Booking.com embrace it and use it extensively.

https://uxdesign.cc/scarcity-in-ux-the-psychological-bias-that-became-the-norm-3e666b749a9a

The Most Important Rule in UX Design that Everyone Breaks

In Product Design, and Possibly Life Management There is one principle of organization that every human should adhere to, particularly people who design products. Day after day, I see companies break this rule, and it is 100% of the time to their detriment.

https://blog.prototypr.io/the-most-important-rule-in-ux-design-that-everyone-breaks-1c1cb188931

The McDonaldization of UX - UX Collective

Once upon a time in many organizations across the world, there were those who were not too sure of UX. Was it a new gimmick - just a trend that would fade away in time? This was a time when UX had freer rein to explore how they would integrate with teams, how they would approach projects and what methods they would use.

https://uxdesign.cc/the-mcdonaldization-of-ux-705438fea958?fbclid=IwAR2wPQ4a2WWKM8yFBJGaKmyeSr_qtCpjHjuAClb5kViSf71ixjSSL-3ABcg

User onboarding principles and best practices

How clear principles and goals can help your users It's almost impossible to move ahead without clear onboarding, which helps the user understand how the product works. So, to grow sustainably and scalability. The fact is that after day one, your product retention will fall absurdly if nothing is done.

https://uxdesign.cc/user-onboarding-principles-and-best-practices-bb1ad848c553

Designing with Context in Mind

In April of 2016, Glassdoor hit a major milestone in not only our growth but in how users are interacting with our platform. For the first time, mobile users outnumbered desktop users. We have been watching this trend for a few years and we knew it was going to happen.

https://medium.com/glassdoor-design/designing-with-context-in-mind-4727d9862e77

Laws of UX and examples

Part 1 There are certain UX Laws which can help you to create a better user experience. Below you will find some of the most important UX Laws that you can apply to your next design project. Resource: The time to acquire a target is a function of the distance to and size of the target.

https://uxdesign.cc/laws-of-ux-and-examples-part-1-53128d3e824a

Designing with Data - UX Collective

Statistics help us summarize and understand the hard data we collect, and instincts do the same for all the messy real-world experiences we observe. And that's why the best products - the ones that people want to use, love to use - are built with a bit of both.

https://uxdesign.cc/designing-with-data-ed721ffa008e

Designing with Data 1. 참신함 효과(Novelty effect) 새롭거나 신기한 것을 접하게 된 사람의 호응이나 학습도가 일시적으로 증가하지만, 익숙해지면서 관심과 성취도가 감소하는 효과입니다. 일시적으로 잘되는 것 같지만, 실제 효과는 낮은 것을 말합니다. 2. 평균으로 회귀(Regression toward the mean) 극단적인 사건이 일어난 후에는 점점 평균값으로 안정되는 케이스를 말합니다. 3. 호손 효과(Hawthorne effect) 각 개인이 관찰 당하는 것을 알게되면, 관찰되는 것을 감안하여 행동한다는 것입니다. 호손 공장의 조명실험의 결과인데, UX 인터뷰나 케이스 스터디에서 주의할 요소로 뽑은 것 같습니다. 4. 확증 편향(Confirmation bias) 내가 생각하는 것과 맞는 정보는 취득하고, 그렇지 않은 정보는 무시하는 바이어스입니다. 개인이 아니라 팀, 회사 단위로 확증 편향이 일어날 수도 있습니다. 5. Instrumentation effect 통제 그룹과 실험 그룹의 계측 방법이 달라서 생기는 오류입니다. 이 경우에는 라이브된 프로덕트와 제작하거나 테스트한 환경이 다를 경우 생기는 오류를 말합니다. 6. A/A test A/B 테스트와 비슷합니다. 하나의 케이스를 두 개의 그룹에 테스트 하는 방법입니다. 7. Twyman’s law 미디어 리서치 분석가인 토니 트와이먼의 법칙으로 통계나 데이터가 뭔가 특이하고 흥미로워 보이면 틀렸다는 법칙입니다.

Eye Tracking Studies: Does the Famous F-shape Pattern Really Exist?

In 2006, Nielsen Norman published some fascinating research on how people scan and read websites. They announced that their study showed users tend to view web pages in a kind of "F-Pattern", and shared 3 examples of heat maps containing a distinct F-shape: The study's conclusion has been shared by several influential blogs over the years, and a huge number of designers and marketers have incorporated this insight into the way they work.

https://www.eyequant.com/blog/eye-tracking-f-shape-pattern-data?fbclid=IwAR3AmbvuCHxjI_Du3Ok6e1BAJD7LI-J4DH6LOnOOidvuOPp4R52c562a-a4

F패턴은 존재하는가? Does the famous F-shape pattern in eye tracking really exist? 아이트래킹에서 F패턴이 유명합니다. 왼쪽 위부터 F모양으로 시선이 집중되는 것을 F패턴이라고 합니다. 정말 F패턴이 유효한가에 대해서, Kurtis Morrison이 99개의 사이트를 조사했습니다. 결론은 첨부된 미리보기와 같습니다.

3 practical cheat sheets for designing attention grabbing UIs

Improve your design skills with the power of cognitive psychology and user behavior. Luckily there are a lot of articles about why psychology is important in UX/UI design. But unfortunately, only a few of them provide practical knowledge. What I mean by practical knowledge is those daily designs that exemplify the impact of psychological rules on design.

https://uxdesign.cc/3-practical-cheat-sheets-for-designing-attention-grabbing-uis-318e588bd864

3 practical cheat sheets for designing attention grabbing UIs Norbi Gaal가 미디엄에 쓴 사용자의 행동을 바탕으로 분석한 디자인 팁입니다. 사용자는 페이지를 보는 74%의 시간을 첫번째 화면과 두번째 화면에서 소비합니다. 이중 57%의 시간을 첫번째 화면을 보는데 씁니다. 이를 이용해서 각 화면의 배치와 폰트 선정 등에 대한 팁을 제공합니다.

The Mythology of Design - Featured Stories - Medium

In ancient Crete, just south of Greece, King Minos ruled with his wife, Pasiphaë. Poseidon, god of the Sea, sent King Minos a sacrificial bull as a gift. When Minos disregarded the gift, Poseidon cursed the bull and Pasiphaë. After spending a night with the cursed bull, Pasiphaë gave birth to the Minotaur: a half-bull, half-human monster.

https://medium.com/s/story/design-and-myth-829aabae1da

The Mythology of Design Myths, like symbols, have the magical ability to transcend culture and era 여기서 신화는 잘못된 관념이나 근거 없는 믿음이 아니라, '신화'로 사용되었습니다. 신화는 비유와 상징적인 요소의 네러티브가 그 시대를 사는 사람들의 정신과 문화에 엮여있습니다. 물론 거의 모든 시대에 영감을 주기도 합니다. Matt Yow은 현대의 '디자인'이 바로 이 신화와 같은 역할을 한다고 말합니다.