چرا سبک طراحی از گذشته تا به حال تغییر نکرده است؟

دلایل عدم تغییر اصول طراحی در 50 سال گذشته چیست؟


میلاد عالی ۱۱ دیدگاه اصول طراحی وب سایت چهارشنبه, ۲۳ام مرداد , ۱۳۹۲ 12128 بازدید

شیوه ها تغییر میکنند و طرح ها( Design ها) می آیند و میروند، اما طراحی بصری و اصول اساسی آن تغییر چندانی در ۵۰ سال گذشته نداشته است. اگر آخرین شیوه ها در طراحی چاپ، نسبت حاشیه ها (در طراحی کتاب)، طراحی وب سایت، ساختار شبکه ای (grid) یا هر جنبه دیگری از طراحی را نگاه کنید متوجه میشوید که تمامی آنها بر پایه یکسری اصول قدیمی مثل قانون یک سوم و نسبت طلایی استوار هستند. برای دستیابی به علت این موضوع بهتر است چند مثال از تکنولوژی های طراحی که بسرعت رشد کرده و هنوز به طریقی به ریشه های خود وابسته هستند را، بررسی کنیم .

grids - webtarget.ir

BOOK Margins (حاشیه بندی کتاب) :

در چند سال گذشته کتاب ها و فناوریهای خواندن کتاب دستخوش تحولات بسیار زیادی شده اند اما شیوه تعیین حاشیه برای کتاب تا به امروز تغییر نکرده است. مهم نیست که رسانه در دست شما روی کاغذ چاپ شده باشد یا تبدیل به یک کتاب الکترونیکی شده باشد. تعیین کردن فضای حاشیه مناسب برای هر نوع رسانه نوشتاری، ضروری است. شما باید برای حاشیه های کناری، شرح تصاویر، شماره صفحه و غیره فضای کافی در نظر بگیرید. خوانش یک متن در بهترین حالت فقط زمانی میسر میشود که بین هر یک از اجزای صفحه به مقدار کافی فضای خالی (Navigate Space) وجود داشته باشد. در زیر یک نمونه از چگونگی تعیین حاشیه صفحه برای کتاب را میبینید که با استفاده از ترکیب چند زاویه مختلف بدست آمده است .

grids - webtarget.ir

از گوشه بالای هر صفحه شروع به کشیدن خط میکنیم و از گوشه پایین در مقابل آن خارج می شویم سپس خطی به شکل ضربدر روی کل صفحه ایجاد میکنیم برای درک بهتر شکل زیر را ببینید :

grids - webtarget.ir

یک خط عمودی در جایی که دو خط یکدیگر را قطع میکنند میکشیم

grids - webtarget.ir

در مرحله بعد با کشیدن خطوطی مورب از بالا و پایین خط عمود جدیدی که کشیدیم رسم میکنیم نقطه تقاطع خط مورب با خط اصلی که قبلا کشیده بودیم (دایره قرمز) نقطه شروع محتوای صفحه ما میباشد.

grids - webtarget.ir

بدین ترتیب شروع به کشیدن خطی فرضی از نقطه شروع تا تقاطع بعدی با خط مورب میکنیم و ادامه می دهیم مانند شکل زیر .

grids - webtarget.ir

این همان روشی است که برای ایجاد نظم بصری در صفحات سالهاست که مورد استفاده قرار میگیرد.

قانون یک سوم :

قانون یک سوم، از حدود به دو قرن پیش یا حتی بیشتر، وجود داشته است. این قانون برای اولین بار در سال ۱۷۹۰ ثبت و کشف شد و امروزه هنوز به عنوان یک روش کاربردی برای ترکیب بندی بطور گسترده از آن استفاده میکنیم. این قانون بسیار ساده است و راحتترین راه برای تعیین نقطه کانونی یک تصویر نیز میباشد. شما میتوانید این قانون را به هر شکل یا جهتی از یک تصویر یا طرح اعمال کنید.

grids - webtarget.ir

برای اجرای قانون یک سوم تصویر یا طرح خود را انتخاب کنید و آنرا به سه بخش مساوی به صورت عمودی و افقی تقسیم نمایید حالا شما ۹ بخش مساوی از طرح خود را دارید که در آن نقاط تلاقی خطوط عمودی و افقی را نقاط کانونی تصویر می گویند

grids - webtarget.ir

سپس تصویر خود را طوری برش بزنید که موضوع اصلی تصویر شما روی یکی از چهار نقطه کانونی بیفتد. حال میتوانید تفاوت زیبایی شناختی دو تصویر را قبل و بعد از اعمال قانون یک سوم مشاهده کنید

grids - webtarget.ir

قانون هیک و طراحی وب سایت :

مدت زمان صرف شده جهت انتخاب یک گزینه از منو بستگی به چگونگی سازماندهی و ارائه آن دارد. کار شما زمانی سخت تر میشود که هیچ ریتم و نظمی در نحوه انتخاب و چینش آن منو در کار نباشد. به مثال زیر توجه کنید، در این سایت تعداد بسیار زیادی گزینه برای انتخاب وجود دارد حال فرض کنید شما برای اولین بار وارد این سایت شده اید و بدنبال یک مورد خاص هستید مطمئنا بین این همه گزینه گیج میشوید.

grids - webtarget.ir

سایت ebay وموارد ارائه شده در آن را در زیر میبینیم ،شما هر چیزی در ebay را با کمترین اطلاعات ارائه شده و بیشترین سازماندهی براحتی میتوانید پیدا کنید .بسیاری از استدلالهای دقیق و فکر شده در پس طراحی این وب سایت وجود دارد ،به نوار جستجو بزرگ در وسط صفحه توجه کنید شما براحتی می توانید گزینه مورد نظر خود را در آن تایپ وآن را جستجو نمایید . اگر ترجیح می دهید از طریق منو سایت را مرورکنید آنرا میتوانید در سمت چپ بصورت کاملا طبقه بندی شده بیابید . حال تصور کنید که ebay تمام اقلام موجود خود را در صفحه اصلی قرار میداد ،قانون هیک دقیقا در اینجا بکار می آید چون فرایند انتخاب را با استفاده از دسته بندی کردن موضوعات و قرار دادن آیتم های مرتبط با یکدیگر در یک دسته بسیار ساده می کند. این قانون زمانی مهمتر میشود که طرح شما بصورت LandScape باشد که در آن وجود اطلاعات و لینکهای زیاد میتواند منجر به کاهش تاثیر گذاری و کارایی لازم شود .

grids - webtarget.ir

قانون Fitt و طراحی وب سایت :

قانون Fitt میگوید که جایی که شما برای شروع جستجو در سایت انتخاب میکنید به اندازه بزرگی منو بستگی دارد. هر چه منو بزرگتر باشد جذابیت بصری آن به همان اندازه بیشتر می شود البته تا زمانیکه اندازه آن از حد معمول بزرگتر نباشد که در اینصورت به همان نسبت اثر آن کم میشود. این قانون همچنین این واقعیت را که شما هیچ وقت نمی توانید مشخص کنید که کاربر دقیقا پیمایش خود را از کجا شروع میکند را نیز پوشش میدهد اما اکثرا حرکت اولیه آنها بستگی به اندازه منو در صفحه دارد.

نسبت طلایی :

نسبت طلایی برای مدت زمان بسیار زیادی در اطراف ما وجود داشته شما میتوانید نمونه های بسیار زیادی از آنرا در طبیعت اطراف خود پیدا کنید. حتی آن را می توانید در آثار هنری مشهوری مثل مونالیزا بیابید. نسسبت طلایی تعیین کننده بهترین و زیباترین ترکیب میان نواحی مختلف طرح می باشد که ما آنرا امروزه در طراحی های مدرن وب سایت می بینیم. فرض کنید شما یک وب سایت با عرض ۱۰۲۴px دارید اگر عرض وب سایت را بر ۱٫۶ تقسیم کنیم مقدار ۶۴۰px بدست می آید که منطقه قرار گرفتن Content یا محتوای سایت میباشد.حال اگر ۶۴۰ را از ۱۰۲۴ کسر کنیم مقدار ۳۸۴ را داریم که عرض ایده آل برای نوار کناری با استفاده از قانون طلایی می باشد.

grids - webtarget.ir

در زیر یک نمونه از وب سایت که ساختار پایه آن بر اساس نسبت طلایی است را میبینیم . همانطور که میبینید قانون نسبت طلایی تنها برای مشخص کردن نوار کناری بکار نمی رود بلکه آنرا می توان برای تعیین کردن محل قرار گرفتن محتوای وب سایت نیز بکار برد ،منطقه آبی رنگ در زیر منطقه محتوای اصلی است که در آن منوی اصلی نیز گنجانده شده و همچنین تبلیغات کوچکی در پایین صفحه ،در منطقه نارنجی هم که بخش های ثانویه از وب سایت در آن قرار دارد می توانیم آیکون های شبکه های اجتماعی و فروشگاه و غیره را ببینیم.

grids - webtarget.ir

وب سایت تلفن همراه آمریکا نیز بر پایه نسبت طلایی طراحی شده توجه داشته باشید به چگونگی قرار گرفتن تلفن ها در راستای این نسبت و همچنین این نکته را در نظر داشته باشید که چطور با شکستن این نسبت (قرار دادن چهار باکس در پایین صفحه) هنوز میتوان طرحی منسجم و هم تراز با دیگر عناصر داشت.

grids - webtarget.ir

نتیجه :

ممکن است طراحی در ۵۰ سال گذشته از نظر سبک تغییراتی داشته باشد اما اصول اساسی آن هنوز هم پا بر جاست . نسبت طلایی ،Fitt ،قانون هیک و قانون یک سوم هنوز هم بطور گسترده مورد استفاده قرار میگیرند .این روش ها بر اساس نسبت های ریاضی بدست آمده اند و هنوز هم بهترین دستورالعمل برای بدست آوردن بهترین نتایج در هنرهای بصری می باشند سبکهای جدید اغلب بر اصول بدست آمده در صدها سال پیش می باشند آیا شما هم در طرح های خود از این قوانین پیروی میکنید یا به ابزارهای مدرن مثل سیستم grid و قالبهای آماده بسنده میکنید؟

 

منبع



نویسنده / مترجم : میلاد عالی


۱۱ دیدگاه برای این نوشته ثبت شده است


  1. مهدی
    ۲۴ مرداد ۱۳۹۲

    ممنونم از مطلب مفیدتون

    ساده اما عمیق




  2. وحید زارعی
    ۳ شهریور ۱۳۹۲

    عالی بود




  3. مهری
    ۷ شهریور ۱۳۹۲

    سلام و درود
    ممنون از مطالب و نکاتی که اشاره کردید
    یه سوال
    من بدنبال تبدیل و یا طراحی قالب برای وردپرس هستم
    در یکی از شهرستانهای دور هستم و امکان شرکت در کلاسهای اموزشی که خوب اکثرا هم فوق العاده هستند رو ندارم
    اگر براتون مقدوره و منبع اموزشی خوبی رو در دسترس دارین (فارسی یا انگلیسی ) ممنون میشم معرفی کنین
    با html و css اشنایی چندساله دارم و در طراحی ایستا نسبتا از کار خودم راضیم اما نیازم بیشتر به وب سایت پویاست که خوب گرچه حرفه ام نبوده اما دوست دارم خودم برای خودم یه وب تعریف کنم
    واقعا ممنون میشم در این زمینه اگر منابع خوبی رو میتونین بهم معرفی کنین
    البته منابعی که تا حد امکان به زبان ساده و مقدماتی در cms باشند
    با ارزوی توفیق روزافزون برای شما دوست عزیز




    • میلاد عالی
      ۱۲ شهریور ۱۳۹۲

      با سلام
      در مورد سوالتون فکر میکنم بهترین منبع فارسی فروم رسمی ورد پرس فارسی هست و از بهترین منابع انگلیسی میتونم کتابهای انتشارات Sitepoint رو که با یک سرچ ساده میتونید پیدا کنید بهتون معرفی کنم ،امیدوارم کمکتون کرده باشم
      موفق باشید.




  4. رها
    ۲۱ شهریور ۱۳۹۲

    سلام
    یه سوال
    ایا میشه صفحات و قالب یه وب سایت رو با زبان asp.net طراحی کرد یا قالب اصلی همیشه باید با زبان html و css نوشته بشه
    ممنون میشم در این باره منو راهنمایی کنین
    موفق وپیروز باشید




  5. طراحی سایت
    ۱۷ آذر ۱۳۹۲

    سلام٬ در مورد نسبت طلایی بد نبود این موضوع را اضافه می‌کردید که علاوه بر استفاده افقی٬ می‌توان آنرا بصورت عمودی نیز استفاده کرد.
    مثلا ۳۸۴px بالای سایت نیز از اهمیت بالایی برخوردار می‌شود٬ همچنین تقاطع ناحیه طلایی عمودی و افقی اهمیت بسیار بسیار زیادی دارد و بیشتر به چشم خواهد آمد.
    نمونه‌اش در tutsplus آمده است.




  6. مسعود
    ۱۰ اردیبهشت ۱۳۹۳

    سلام!
    مطلب جالبی بود… بعضی هاشو می دونستم ولی بعضی هاشم برام تازه بود… ممنون!




  7. ghazal
    ۲۱ آبان ۱۳۹۳

    سلام خسته نباشید
    میشه لطفا چند تا کتاب به من معرفی کنید در زمینه طراحی وبسایت ، مطالبی که شما انتخاب میکنید خیلی مفیدن، ولی من چون برای پایان نامه میخوام ذکر منبع لازمه،
    خیلی ممنون میشم اگر اینجا امکانش نیست بصورت جداگانه برایم ایمیل بزنید نام چند منبع رو…

    سپاس




  8. ali
    ۲۴ بهمن ۱۳۹۳

    ممنون




  9. SeyedMehdi M0usavi
    ۲۲ اردیبهشت ۱۳۹۴

    کار شما به عنوان طراح وب خیلی عالیه. شما اصولی و درست طراحی می کنید. به همین دلیل به عنوان تشکر پیش دوستانم از سایت و شرکتتون تبلیغ خواهم کرد.




  10. فرنوش
    ۲۱ فروردین ۱۳۹۵

    جالب بود ممنون



دیدگاه خود را بنویسید





نشانی ایمیل شما منتشر نخواهد شد.

کامنت های شما بعد از تأیید توسط نویسنده وبلاگ، منتشر خواهند شد.

لطفا دیدگاهتان تا حد امکان مربوط به پست بالا باشد. اگر حرف دیگری دارید و یا قصد تماس با من را دارید، از فرم تماس استفاده کنید.

شما میتوانید با مراجعه به سایت گراواتار یک آواتار اختصاصی برای خود تعریف کنید، تا در کنار نام شما نمایش داده شود

برای قرار دادن کدهای نمونه می توانید از تگ های [php] ، [html] ، [css] و [js] استفاده کنید.
به عنوان مثال کدهای php را می توان به صورت زیر قرار داد:
[php] var $whoLoveIranians = "WebTarget!"; [/php]



کلیه حقوق مادی و معنوی برای وب سایت وب تارگت محفوظ است ©2017 وب‌تارگت

استفاده از مطالب وب سایت در سایر وب سایت‌ها و نشریات چاپی با ذکر منبع آزاد است.