Typography Usability | تاپیوگرافی اصولی در وب سایت کاربردپذیر

#WUD2016 • @sia_mac
!‫وب‬‫ﻃﺮاﺣﯽ‬‫از‬‫درﺻﺪ‬۹۵
!‫ﻣﯽدﻫﺪ‬‫ﺗﺸﮑﯿﻞ‬‫ﻧﻮﺷﺘﺎری‬‫ﻣﺤﺘﻮا‬‫را‬ ‫وب‬‫ﺻﻔﺤﻪ‬‫ﻫﺮ‬‫از‬‫درﺻﺪ‬۹۵

khabaronline.ir

‫ﮐﺎر5ﺮدﭘﺬﯾﺮی‬‫و‬‫<ﭙﻮﮔﺮاﻓﯽ‬‫ﯾ‬‫ﺗﺎ‬

.‫ﮐﻨﺪ‬‫ﺑﺮﻗﺮار‬‫ارﺗﺒﺎط‬‫آن‬‫ﺑﺎ‬‫ﮐﺎر¾ﺮ‬‫و‬‫ﺑﺎﺷﻨﺪ‬‫ﺧﻮاﻧﺪن‬ ‫ﻗﺎﺑﻞ‬ ‫ﺑﺎﯾﺪ‬ ‫ﻧﻮﺷﺘﺎری‬‫ﻣﺤﺘﻮا‬
‫ﺧﻮب‬‫<ﭙﻮﮔﺮاﻓﯽ‬‫ﯾ‬‫ﺗﺎ‬

“The Art and Technique of
Arranging type in order to
make language visible”
(Source: Wikipedia)

‫ﮐﺎر5ﺮدﭘﺬﯾﺮی‬‫در‬‫<ﭙﻮﮔﺮاﻓﯽ‬‫ﯾ‬‫ﺗﺎ‬‫ﻧﮑﺘﻪ‬۱۲
(‫)ﮔﺎﯾﺪﻻﯾﻦ‬

‫ﻋﯿﻦ‬ ‫در‬‫و‬‫ﺑﺎﺷﺪ‬‫داﺷﺘﻪ‬‫را‬ ‫ﮐﺎﻓﯽ‬‫ﺧﻮاﻧﺎﯾﯽ‬ ‫ﺑﺎﯾﺪ‬‫ﻣﯽﺷﻮد‬‫اﻧﺘﺨﺎب‬‫ﮐﻪ‬‫ﻓﻮﻧﺘﯽ‬
.‫ﺑﺎﺷﺪ‬‫ﺒﺎ‬ ‫ز‬ ‫ﺣﺎل‬
‫ﺧﻮب‬‫ﻓﻮﻧﺖ‬‫اﻧﺘﺨﺎب‬-۱

،‫ﻣﯽﺷﻮد‬‫ﺑﺎﻋﺚ‬ ‫ﻓﻮﻧﺖﻫﺎ‬‫ﺣﺪ‬‫از‬‫ﺑﯿﺶ‬‫
اﺳﺘﻔﺎده‬
.‫دﻫﺪ‬‫دﺳﺖ‬‫ﮐﺎر¾ﺮ‬‫ﺑﻪ‬‫ﺑﻮدن‬‫ﻏﯿﺮﺣﺮﻓﻪای‬‫و‬‫ﺑﻮدن‬ ‫ﻧﺎﻗﺺ‬‫ﺣﺲ‬
‫ﮐﻨﯿﻢ‬‫اﺳﺘﻔﺎده‬‫ﺻﻔﺤﻪ‬‫در‬‫ﺗﺎﯾﭗﻓﯿﺲ‬۳‫از‬‫ﺣﺪاﮐﺜﺮ‬-۲

‫دارﻧﺪ‬ ‫ﺑﯿﺸﺘﺮی‬‫ﯽ‬‫ﺧﻮاﻧﺎﯾ‬.‫ﮐﻨﯿﻢ‬ ‫اﺳﺘﻔﺎده‬ ‫ﭘﺎراﮔﺮافﻫﺎ‬‫و‬‫ﻣﺘﻮن‬ ‫ﺑﺮای‬‫ﻒ‬ ‫ﺳﻦﺳﺮ‬‫ﻓﻮﻧﺖﻫﺎی‬‫از‬
.‫ﺗﺮﻧﺪ‬ ‫ﻣﻨﺎﺳﺐ‬‫ﻧﻤﺎﯾﺶ‬ ‫ﺻﻔﺤﺎت‬ ‫ﺑﺮای‬‫
و‬
.‫ﮐﻨﯿﻢ‬‫اﺳﺘﻔﺎده‬ ‫ﻦ‬ ‫ﻋﻨﺎو‬‫ﺑﺮای‬ ‫ﻒ‬ ‫ﺳﺮ‬‫ﻓﻮﻧﺖﻫﺎی‬‫
از‬
‫ﺷﻮﯾﻢ‬‫ﻗﺎﺋﻞ‬‫ﻓﺮق‬‫ﻋﻨﺎوﯾﻦ‬‫و‬‫ﭘﺎراﮔﺮافﻫﺎ‬‫ﺑﯿﻦ‬-۳

‫ﺑﻪ‬‫ﺑﺎﯾﺪ‬‫ﺳﺎﯾﺰﻫﺎ‬‫اﻧﺘﺨﺎب‬‫در‬.‫دارد‬ ‫ﺎدی‬ ‫ز‬ ‫ﺗﺎﺛﯿﺮ‬‫ﯽ‬‫ﺧﻮاﻧﺎﯾ‬ ‫در‬‫ﻧﻮﺷﺘﻪ‬‫ﻓﻮﻧﺖ‬‫اﻧﺪازه‬
.‫ﮐﻨﯿﻢ‬‫دﻗﺖ‬‫ﺷﺪن‬‫ﺧﻮاﻧﺪه‬‫در‬‫ﺖﻫﺎ‬ ‫
اوﻟﻮ‬
‫ﻃﻮل‬،‫ﺧﻄﻮط‬‫ارﺗﻔﺎع‬،‫ﺳﺎﯾﺰﻫﺎ‬‫ﻓﻮﻧﺖ‬‫اﻧﺘﺨﺎب‬‫ﯾﻌﻨﯽ‬‫وب‬‫در‬‫ﻧﺴﺒﺖﻫﺎ‬‫ﻗﺎﻧﻮن‬
.‫ﻧﺴﺒﺖ‬‫ﯾﮏ‬ ‫ﻃﺒﻖ‬…‫و‬‫ﻧﻮﺷﺘﻪ‬‫ﺳﺘﻮن‬‫ﻃﻮل‬،‫ﻓﺎﺻﻠﻪﻫﺎ‬،‫ﺧﻄﻮط‬
‫ﻧﺴﺒﯿﺖ‬‫ﻗﺎﻧﻮن‬-۴

#WUD2016 • @sia_mac#WUD2016 • @sia_mac

‫دﯾﺪه‬‫ﺑﺎﯾﺪ‬‫ﺻﻔﺤﻪ‬‫در‬‫ﻣﻬﻢ‬‫ﺟﺰ‬‫ﯾﮏ‬‫ﭼﺸﻢ‬‫ﺑﻪ‬‫ﻫﺴﺘﻨﺪ‬‫ﺻﻔﺤﻪ‬‫در‬‫ﮐﻪ‬‫ﻧﻮﺷﺘﻪﻫﺎﯾﯽ‬
.‫ﺷﻮد‬ ‫دﯾﺰاﯾﻦ‬‫ﺑﺎﯾﺪ‬ ‫آنﻫﺎ‬‫ﻗﺴﻤﺖ‬‫ﺑﻪ‬‫ﻗﺴﻤﺖ‬‫و‬‫ﺷﻮﻧﺪ‬
‫ﮐﺎر5ﺮی‬‫راﺑﻂ‬‫ﻋﻨﻮان‬‫ﺑﻪ‬‫ﻧﻮﺷﺘﻪ‬-۵

‫و‬‫ﻣﺮورﮔﺮﻫﺎ‬‫در‬‫و‬‫اﻧﺪ‬ ‫ﺷﺪه‬‫ﺑﻬﯿﻨﻪ‬‫وب‬‫ﺑﺮای‬ ‫ﮐﻪ‬‫ﮐﻨﯿﻢ‬‫اﺳﺘﻔﺎده‬‫ﯽ‬‫ﻓﻮﻧﺖﻫﺎﯾ‬‫از‬
.‫ﺷﻮﻧﺪ‬‫داده‬‫ﻧﻤﺎﯾﺶ‬‫ﺻﺤﯿﺢ‬‫ﻣﺨﺘﻠﻒ‬‫ﻫﺎی‬ ‫ﺳﯿﺴﺘﻢﻋﺎﻣﻞ‬
‫وب‬‫ﻓﻮﻧﺖ‬-۶

‫ﻫﺮﻗﺴﻤﺖ‬‫ﺑﺮای‬‫و‬‫ﮐﻨﯿﻢ‬ ‫ﻣﺤﺪود‬‫را‬‫ﻣﯽﮐﻨﯿﻢ‬‫اﺳﺘﻔﺎده‬‫ﮐﻪ‬‫ﻓﻮﻧﺖﻫﺎﯾﯽ‬‫و‬ *‫رﻧﮓﻫﺎ‬
.‫ﮐﻨﯿﻢ‬‫اﺳﺘﻔﺎده‬‫ﺻﻔﺤﻪ‬‫ﺟﺎی‬ ‫ﻫﻤﻪ‬‫در‬‫آن‬‫از‬‫و‬‫ﻢ‬ ‫ﺷﻮ‬‫ﻗﺎﺋﻞ‬‫ﺘﯽ‬ ‫ﻫﻮ‬
‫ﺑﺒﺨﺸﯿﻢ‬‫ﻫﻮﯾﺖ‬‫ﻓﻮﻧﺖﻫﺎ‬‫و‬‫رﻧﮓﻫﺎ‬‫ﺑﻪ‬-۷
.‫ﻧﮑﻨﯿﻢ‬‫اﺳﺘﻔﺎده‬‫آﺑﯽ‬‫رﻧﮓ‬ ‫از‬،‫ﻧﻮﺷﺘﻪﻫﺎ‬‫رﻧﮓ‬‫ﺑﺮای‬*

‫را‬ ‫ﻧﮕﺎرﺷﯽ‬ ‫ﻗﻮاﻧﯿﻦ‬‫و‬‫ز¾ﺎن‬‫دﺳﺘﻮر‬ ‫ﺑﺎﯾﺪ‬‫ﻣﯽﺷﻮد‬‫ﻧﻮﺷﺘﻪ‬ ‫ﮐﻪ‬‫ز¾ﺎﻧﯽ‬‫ﻫﺮ‬‫در‬‫ﻣﺘﻮن‬
.‫ﻧﯿﻢﻓﺎﺻﻠﻪ‬ ‫از‬‫اﺳﺘﻔﺎده‬‫ﻓﺎرﺳﯽ‬‫ز¾ﺎن‬ ‫در‬ ‫ﻣﺜﺎل‬‫ﻋﻨﻮان‬‫ﺑﻪ‬.‫ﺑﺎﺷﺪ‬‫داﺷﺘﻪ‬
‫ﻧﮕﺎرﺷﯽ‬‫ﻗﻮاﻧﯿﻦ‬‫رﻋﺎﯾﺖ‬-۸

‫ﻫﺰارﮔﺎن‬‫ﺟﺪاﮐﻨﻨﺪه‬‫از‬‫ﺑﻮد‬ ‫ﺑﯿﺸﺘﺮ‬ ‫ﮐﺎراﮐﺘﺮ‬ ۵‫از‬‫اﮔﺮ‬،‫ﻣﯽﮐﻨﯿﻢ‬‫ﺗﺎﯾﭗ‬‫ﻋﺪدی‬‫وﻗﺘﯽ‬
.‫ﺗﻮﻣﺎن‬ ۱۰۰٫۰۰۰٫۰۰۰:‫ﻣﺜﺎل‬.‫ﮐﻨﯿﻢ‬‫اﺳﺘﻔﺎده‬
‫ﻫﺰارﮔﺎن‬‫ﺟﺪاﮐﻨﻨﺪه‬-۹

!‫ﻧﺰﻧﻦ‬‫ﭼﺸﻤﮏ‬‫ﻧﻮﺷﺘﻪﻫﺎ‬-۱۰

‫رﻧﮓﻫﺎ‬‫ﺑﯿﻦ‬‫ﺗﻔﺎوت‬ .‫ﺑﺎﺷﻨﺪ‬ ‫ﺑﻬﻢ‬ ‫ﺷﺒﯿﻪ‬‫ﻧﺒﺎﯾﺪ‬‫ﭘﺲزﻣﯿﻨﻪ‬ ‫رﻧﮓ‬‫و‬‫ﻧﻮﺷﺘﻪ‬‫رﻧﮓ‬
.‫ﮐﻨﺪ‬ ‫اﺳﮑﻦ‬‫آنرا‬‫و‬‫ﺑﺒנﯿﺪ‬‫را‬‫ﻧﻮﺷﺘﻪ‬‫راﺣﺘﯽ‬‫ﺑﻪ‬‫ﮐﺎر¾ﺮ‬‫ﻣﯽﺷﻮد‬‫ﺑﺎﻋﺚ‬
‫رﻧﮕﯽ‬‫ﺳﺎﺧﺘﺎر‬-۱۱

‫اﻧﺪازه‬‫و‬‫ﺷﻮﻧﺪ‬ ‫ﻧﻮﺷﺘﻪ‬‫ﺧﻂ‬‫ﯾﮏ‬‫در‬(‫ﮐﻠﻤﻪ‬۱۲-۹)‫ﮐﺎراﮐﺘﺮ‬۷۰-۴۰‫ﺑﯿﻦ‬‫ﺑﺎﯾﺪ‬‫ﻧﻮﺷﺘﻪﻫﺎ‬
.‫ﺑﺎﺷﺪ‬‫ﭘﯿﮑﺴﻞ‬ ۷۶۸-۵۶۰‫ﺑﯿﻦ‬‫ﻧﻮﺷﺘﻪ‬‫ﻋﺮض‬
‫ﻧﻮﺷﺘﻪ‬‫ﺳﺘﻮن‬‫اﻧﺪازه‬-۱۲

:‫اﺻﻮﻟﯽ‬‫<ﭙﻮﮔﺮاﻓﯽ‬‫ﯾ‬‫ﺗﺎ‬‫ﺑﺎ‬‫<ﯽ‬‫ﯾ‬‫وبﺳﺎﯾﺖﻫﺎ‬

‫<ﭙـﻮﮔﺮاﻓﯽ‬‫ﯾ‬‫ﺗﺎ‬
bit.ly/rwdconf94

Typography Usability | تاپیوگرافی اصولی در وب سایت کاربردپذیر

Typography Usability | تاپیوگرافی اصولی در وب سایت کاربردپذیر

Recomendados

Recomendados

Mais conteúdo relacionado

Mais procurados

Mais procurados (20)

Destaque

Destaque (20)

Typography Usability | تاپیوگرافی اصولی در وب سایت کاربردپذیر