الهه دارنگ
|
چگونه میتوان وب سایتی زیبا طراحی کرد 1. تراز بودن طرح خود را حفظ کنید 2. طرح خود را بهوسیله شبکهها تقسیمبندی کنید 3. حداکثر دو یا سه رنگ پایه برای طراحی خود انتخاب کنید 4. سعی کنید گرافیکی درست کنید که باهم هماهنگی داشته باشند 5. تایپوگرافی وبسایتتان را بهتر کنید 6. با اضافه کردن فاصلههای سفید عناصرتان را برجسته کنید 7. همه عناصر به یکدیگر متصل و سازگاری داشته باشند |
به نظر میرسد این روزها هرکسی وب سایتی ساخته است و شلوغی وب روزبهروز بیشتر میشود به معنای واقعی کلمه در حین خواندن این مقاله دهها سایت اضافه میشود.
" خوشبختانه " برای ما طراحان وب، به نظر نمیرسد کسی بداند چه چیزی باعث ایجاد و یا خرابی یک وبسایت میشود.
با توجه به اینکه در پروسهی طراحی وب خلاقیت نقش مهمی دارد، میتوان فراتر از علم آن را هنر نامید. اما ازآنجاییکه رسانهای برای ارائه و نمایش میباشد بعضی از اصول نیز در آن اعمال میشوند. با پیروی از تعدادی توصیهی مفید ساده هر شخصی قادر به ایجاد یک طراحی زیبای بصری است تا با آن شناخته شود. البته نه به این سادگی، مطمئناً استعداد و تجربه نیز مهم است. اما هر شخصی میتواند در عرض چند دقیقه صفحه اصلی خود را زیباتر کند.
به نظر شما چه چیزی باعث زیبایی یک طراحی میشود؟ فلش؟ فلش گزینه خوبی است اما بهتنهایی باعث زیبایی یک طراحی نمیشود. وبسایتهای زیادی با فلش طراحیشدهاند و خوب نیستند. همچنین برای طراحی نیاز نیست حتماً بهعنوانمثال در illustrator خیلی حرفهای باشید تا بتوانید طرحهایی بسیار حرفهای ایجاد کنید. بلکه به طراحی وب همانند یک همزیستی از عناصر مختلف نگاه کنید. هیچ عنصر واحدی بیشترین اهمیت را ندارد. بلکه مجموع عناصر باعث میشود یک طرح خوب به نظر برسد. در ادامه به 7 اصل کلیدی در طراحی وب سایت های جذاب بصری می پردازیم.
1 . تراز بودن طرح خود را حفظ کنید
تراز بودن طرح یعنی اطمینان از این موضوع که طرحتان به یکطرف یا طرف دیگر متمایل نشود. مانند تعادل وزن در رسیدن به تقارن یا عدم تقارن است.
به سگ موجود در تصویر زیر که مربوط به هدر یک سایت است، نگاه کنید. توجه کنید که چگونه صلیب سمت راست وزن بصری اضافهای را که سگ در سمت چپ ایجاد میکند جبران میکند. این جزئیات، کوچک اما بسیار بااهمیت میباشند. با پنهان کردن صلیب توسط دستتان میتوانید متوجه تأثیرگذاری آن شوید.
این همان چیزی است که از آن بهعنوان بالانس نامتقارن نام برده میشود و درواقع همان تعادل است. اگر مراقب نحوه چیدمان کارها نباشید، طراحی شما خیلی زود نامتعادل میشود. وزن بصری یک طرح را میتوانید از بسیاری جهات، مانند رنگ، اندازه و افزودن یا حذف عناصر، دستکاری کنید. بهعنوانمثال در ساخت صلیب اگر از رنگ نارنجی استفاده کنید سمت راست سنگینتر میشود و مجدداً احتمال به هم ریختن تعادل طرح وجود دارد.
دستیابی به تعادل نامتقارن موضوع حساس و ظریفی میباشد که تنظیم آن زمانبر است و در اینجا همچنین نیاز به چشمی خواهید داشت که تا حدی آموزشدیده باشد و بتواند آن را به تصویر درآورد.
در زیر مثال دیگری برای بالانس متقارن آورده شده است. اگرچه گرافیک هدر بهصورت بالانس نامتقارن است، اما باقی طرح در نواحی پایینتر، دارای ستونهای متقارن است. ممکن است دستیابی به طرحی با بالانس نامتقارن سخت باشد اما سبب میشود طرح سرزندهتری داشته باشید.
با نگاهی به طرحهای مختلف به این نکته پی خواهید برد که طرحی که خوب به نظر میرسد احیاناً تعادل خوبی در زیربنای آن وجود دارد و هر طرحی که در این مقاله به آن اشاره شده است امتیازات بالایی در هر یک از هفت اصل موردبحث ما دارد.
مفهوم شبکه با مفهوم تعادل ارتباط نزدیکی دارد. شبکه متشکل از یک سری رولهای عمودی و افقی است که به شما کمک میکند طرحتان را تقسیمبندی کنید. نگاهی به ستونها داشته باشید، ستونها خوانایی را بهبود میبخشند و درک محتوای صفحه را آسانتر میکنند. فاصلهگذاری و استفاده از قانون یکسوم (یا نسبت طلایی مشابه) همهچیز را برای چشم راحتتر میکند.
قانون سوم و نسبت طلایی نشان میدهد که بهعنوانمثال چرا سایدبارها معمولاً یکسوم از عرض صفحه هستند و یا چرا مساحت محتوای اصلی تقریباً مشابه با عرض صفحه تقسیم بر 1.62 است (همانند عدد پی در ریاضیات). در این مقاله به دلیل و چرایی این امر نمیپردازیم، اما ظاهراً این مسئله در عمل صادق است و به همین دلیل است که سوژه در عکسهای حرفهای معمولاً در وسط نیست و در تقاطع یک شبکه خیالی نه خانه قرار میگیرد. (3 در 3 با دو خط عمودی و دو خط افقی)
شبکه مخصوصاً به طرحهای مینیمالیستی کمک شایانی میکند.
درحالیکه در تصویر فوق طراحی بهخودیخود ازنظر بصری چشمگیر نیست، ساختار دقیق و واضح عناصر به بهتر دیده شدن آن کمک میکند. ستون سمت چپ تقریباً دو برابر سایز ساید بار راست است که کاملاً منطقی است و باید هنگام ایجاد طرحهای خود به آن توجه کنید.
3 . حداکثر دو یا سه رنگ پایه را برای طراحی خود انتخاب کنید
اگر در وبسایت The First Twenty رنگ قرمز را به سبز لیمویی تغییر دهید، چه میشود؟ خوب به نظر میرسد؟ بهاحتمالزیاد خیر. زیرا به پالت رنگ یکسانی تعلق ندارد. (البته سبز لیمویی نیز رنگ سادهای برای کار نیست ). ترکیب بعضی رنگها با یکدیگر خوب هستند و بعضی دیگر نه. تئوریهای زیادی برای رنگها و نحوه ترکیب آنها باهم وجود دارد، ازجمله قراردادهایی در مورد طرحهای تکرنگ و متضاد وجود دارند، اما اکثر آنها به تصمیم مشترک و احساسی که منتقل میکنند، وابسته میباشند.
جستجو کنید که چه چیزهایی با یکدیگر بهتر کار میکنند. تا حد امکان از طراحی وبسایتها مانند وبسایتهای ویترینی CSS) مانند Best Web Gallery) کمک بگیرید ، تا از نحوه تعامل رنگها با یکدیگر مطلع شوید. حداکثر دو یا سه رنگ پایه برای طرحتان انتخاب کنید و سپس از رنگها و سایههای این رنگهای پایه استفاده کنید و در صورت نیاز پالت رنگی خود را توسعه دهید.
انتخاب رنگ زیبا بهاندازه انتخاب رنگ مناسب مهم است. یک طرح برای رستورانی کوچک و گرم ونرم با تناژ رنگی متناسب با خاک مثل قرمز ، قهوهای و ... خوب است. البته برای انتخاب این رنگها قاعده و دستورالعمل صددرصدی وجود ندارد. هر رنگی پیامی را میرساند و این به شما بستگی دارد که پیام درست را دریافت کنید.
وبسایت Bence Kucsan سبک طراحی رنگی منحصربهفرد خود را دارد و عمدتاً از رنگهای تک (سایه و رنگهای یکرنگ ) و بیرنگ (سفید و سیاه ) با یکرنگ (مانند قرمز ) برای برجسته کردن استفاده میکند.
ترکیب رنگی سیاهوسفید بسیار شیک و حرفهای است. و رنگ قرمز نیز جهت برجسته کردن بعضی از عناصر و برای اینکه طراحی را از حالت کسلکننده حفظ کند به این ترکیب اضافه شده است. البته آنچه باعث جذابیت این طرح میشود چیزی فراتر از استفاده از رنگ قرمز است.
در خصوص رنگ، سایت زیر نیز مثال خوبی است :
در نگاه اول به نظر میرسد انتخاب رنگ در این طرح اختیاری است ولی وقتی از نزدیک نگاه دقیقتری میکنید متوجه پالت رنگی مشخصشدهای میشوید که برای اطمینان از خوب بودن تمامی عناصر لازم میباشد.
4 . سعی کنید گرافیکها بهخوبی باهم هماهنگ شوند.
طراحی عالی نیازی به گرافیک فانتزی ندارد. اما گرافیک ضعیف قطعاً به طرح آسیب میزند. گرافیکها به پیام تصویری اضافه میشوند. سایتهایی مثل WebDesigner Wall دارای تصاویر چشمگیری هستند که در سایتهای دیگر کمتر دیده میشود.
تیم ون دام در وبسایت خود Max Voltar از طرحهای گرافیک انگشتشماری استفاده میکند، اما در عوض آنها را با بیشترین فکر و دقت پیادهسازی میکند. یک تصویر پسزمینه مناسب و یک تاج پیچیده دو مورد از آنها هستند. ازنظر بصری، خیلی چشمگیر نیستند، اما بهظاهر و احساس وبسایت میافزایند و هماهنگ میباشند.
در طرح بالا از گرافیک بیشتری استفاده شده است و بهصورت ویژه هر دو دیدگاه شماتیک و فنی در آن اجرا شده است. شما ممکن است یک illustrator کار یا عکاس عالی نباشید، اما این بدان معنا نیست که نمیتوانید گرافیک عالی را در وبسایت خود قرار دهید. برخی از مهارتهای پایهای فتوشاپ، تعدادی عکس استوک و سلیقه و ذوق هنری خوب تمام چیزی است که نیاز دارید. سعی کنید گرافیکها را بهخوبی باهم هماهنگ کنید و مطمئن شوید که آنها سبک موردنظر شمارا ترسیم میکنند. اگرچه همه ما از تواناییهای طبیعی یکسانی برخوردار نیستیم. بااینحال میتوانید برخی چیزها را با یادگیری از دیگران بدست آورید، گاهی اوقات فقط باید سبکی را انتخاب کنید که برای شما مناسبتر است.
5 . تایپوگرافی وبسایت خود را بهبود دهید
هنر، موضوعی سخت برای گفتگو میباشد زیرا عناصر مختلف بسیاری را در برمیگیرد. گرچه میتوان آن را بهعنوان شاخهای از طراحی در نظر گرفت، اما میتوان عمری را صرف تسلط بر همه جنبههای آن سپری کرد. در این مقاله مجالی برای ارائهی مرجعی کامل برای تایپوگرافی وجود ندارد، بنابراین سعی شده است بحث خود را به آنچه در کوتاهمدت به درد شما میخورد محدود کنیم.
تایپوگرافی وب در مقایسه با تایپوگرافی چاپی ناقص است. بزرگترین تفاوت آن، عدم کنترل کامل ما بر ظاهر آن در وب به دلیل ویژگی پویای آن است. بدیهی است که رندر پویا نقاط قوت خود را دارد، اما حداقل در حال حاضر طراحان وب کنترل کمی بر نتایج دارند. نبود فونت در کامپیوتر کاربر، اختلاف در مرورگرها و سیستمعامل و عموماً پشتیبانی زیرمجموعه css ، تایپوگرافی وب را به یک کار دلهرهآور تبدیل کرده است.
font stacks دستههای قلم
برای بهتر شدن تایپوگرافی یک وبسایت چندین روش خوب و کاربردی وجود دارد. ما در اینجا به سه مورد از آنها خواهیم پرداخت. یکی از آنها دستههای فونت (font stacks ) است.
دستههای فونت css پایه هستند آنها به شما اجازه میدهند ترتیب ارائه فونتها را تعریف کنید. بهطور دقیق، ما در اینجا از سبک حروف صحبت میکنیم نه قلمها(فونتها).
body { font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; }
پراپرتی مذکور به بدنه اصلی سبک "Helvetica Neue"را میدهد و این مستلزم این است که کامپیوتر کاربر آن نوع فونت خاص را نصب کرده باشد. امروزه در مکها "Helvetica Neue" از قبل نصب شده است ولی در اکثر دستگاههای ویندوزی وجود ندارد.
زیبایی دستههای فونت این است که میتوانید "fallbacks" تعریف کنید یعنی هر موقع سبک حروفی ایجاد شده از بین رفت مرورگر بهسادگی به دنبال مورد بعدی میرود. البته در این حالت طرح برای همه یکسان دیده نمیشود و بهاینترتیب مجدداً کنترل خود را از دست میدهیم. اما برای کسانی که نمیخواهند به راهحل دیگری متوسل شوند (مثل جایگزینی عکس) بهترین پیشنهادی هست که در حال حاضر css ارائه میدهد.
Helvetica Neue بهبودیافته Helvetica است و ازآنجاکه در بیشتر کامپیوترها فونت Arial نصب شده است (حداقل در ویندوزها و مکها ) بنابراین انتخاب خوبی برای وب میباشد. بیشتر طراحان Helvetica را به Arial ترجیح میدهند با انتخاب این دسته شما به دو تا از بهترینها در جهان دست خواهید یافت. Helvetica برای کسانی که آن را دارند و Arial برای مواقعی که Helvetica موجود نباشد.
طول و ارتفاع خطوط
درcss طول را میتوان با تعریف عرض برای باکس محتوا کنترل کرد (بهعنوانمثال عناصر پاراگراف). طول و ارتفاع خطوط بر خوانایی متن تأثیر میگذارند. اگر خطها زیاد کوتاه و یا زیاد بلند باشند کاربر برای خواندن محتوای متن راحت نیست که این مشکل اغلب در fluid layouts دیده میشود بین 40 تا 80 کاراکتر در هر خط ایده آل به نظر میرسد.
با ویژگی line-height در css میشود ارتفاع را تنظیم نمود.
عموماً ارتفاع خط 1.5در پاراگرافها بهخوبی کار میکند و این یعنی زمانی که سایز متن 12 نقطه میباشد ارتفاع خط 18 نقطه میشود (1.5*12) که به متن فضای تنفس میدهد.
نقلقولهای معلق و بولتها
سومین روش برای خوانایی بهتر استفاده از نقلقولهای معلق و بولتها میباشد بهجای اینکه متن با لیستهای بولتی و نقلقولها را با تراز بندی پیشفرض بگذارید، آن را بهصورت افقی با بقیه متن موجود در صفحه تراز کنید.
مثال زیر نمونهای از استفاده از این روش میباشد.
از خط قرمز در تصویر بالا برای نشان دادن اینکه چگونه کل متن بهصورت افقی تراز است، استفاده شده است. بهسادگی بهوسیله تنظیم ویژگی padding –left css لیست گلولهای روی 0 میتوان به نتیجه بالا رسید.
از سوی دیگر کشیدن نقلقول معلق به این سادگی نیست. بیشتر طراحان برای علامت نقلقول به عکس بکگراند متوسل میشوند:
علامت نقلقول در این مثال روی جریان متن تأثیری نمیگذارد. این موارد جزئیاتی هستند که اغلب از آنها گذر میشود ولی ارزش توجه را دارند.
قوانین چاپی که اجرا نمیشوند
کاملاً واضح و مشخص است که نسخه چاپی و نسخه وب شبیه هم نیستند، اما بسیاری از افراد با آنها طوری رفتار میکنند که گویی مثل هم هستند. چاپ ثابت و وب داینامیک است. کنترل کامل روی اینکه طراحی شما در هر دستگاهی چطور به نظر میرسد غیرممکن است.
در حال حاضر مجبور هستیم بهسادگی این تفاوتها را بپذیریم به وب مثل نسخه آنلاین چاپ نگاه نکنیم بلکه از پتانسیل ذاتی وب بهطور کامل استفاده کنیم.
جایگزینی تصویر
نظرتان درباره جایگزینی تصویر بجای متن چیست؟ در مورد دستههای فونت صحبت کردیم آیا استفاده از آنها بهتر از جایگزینی تصویر نیست؟ این انتخاب بستگی به اهمیت هریک از آنها برای شما دارد: اینکه قادر باشید دقیقاً فونتی که مدنظر دارید نمایش دهید و یا محتوایی پویا، قابلدسترس و مناسب برای سئو داشته باشید؟ برخی از تکنیکهای جایگزینی تصویر بسیار پیشرفته شدهاند، اما هنوز بهاندازه متن انعطافپذیر نیستند. جایگزینی تصویر بهخوبی در سرفصلها و بخشهای منتخب استفاده میشود، اما راهحل مناسبی برای متن نیست.
فاصله سفید و یا منفی مربوط به چیزی است که وجود ندارد. فضای سفید نیز مانند طول و عرض، باعث ایجاد فضای تنفس و آرامش فضایی به متن میشود. میتوانید با افزودن کمی فضای خالی در اطراف عناصر آنها را مشخصتر کنید. برای اطمینان از خوانایی، مطمئن شوید که پاراگرافها پدینگ کافی داشته باشند.
استفاده از فضای سفید برای تبلیغات عطر یا هر تبلیغی برای یک کالای لوکس شناخته شده است.
به طراحی وبسایت بالا توجه کنید. این طراحی بهشدت به تایپوگرافی و فضای سفید متکی است فضای سفید حدود 50% از صفحه را اشغال میکند. و یکی از آسانترین و تأثیرگذارترین راهها برای ساخت یک طراحی خوشمنظره و خوانا میباشد.
فضای سفید باعث شیکتر شدن یک طراحی میشود. از فضاهای خالی دریک طرح هراس نداشته باشید. معمولاً طراحان کمتجربه وسوسه میشوند که به هر قسمت از طرح چیزی بیفزایند. طراحی در مورد برقراری ارتباط با یک پیام است. بنابراین عناصر طراحی باید از این پیام پشتیبانی کنند نه اینکه باعث شلوغی طرح شوند.
نمونه زیر مثال خوب دیگری برای استفاده فراوان از فضای سفید است:
بعضی از افراد ممکن است سبک "مینیمالیسم" را با "ساده" اشتباه بگیرند. کشیدن چنین سبکی نه ساده است و نه آسان.
7.تمامی عناصر به یکدیگر متصل و سازگاری داشته باشند
اتصال در اینجا به طراحی وبی اشاره دارد که هم دارای یکپارچگی و هم ثبات است. این دو ویژگی، حرفهای بودن یک طرح (و بنابراین طراح آن) را نشان میدهد. و از صفات بسیار گستردهای هستند. یک طرح باید در استفاده از رنگها، در طیف قلمها، آیکونها و غیره سازگار باشد. تمامی این جنبهها مهم هستند. یک طراحی میتواند عالی به نظر برسد و باز هم از ناسازگاری رنج ببرد.
زمانی که طرحی ناسازگار باشد، پیوستگی آن از بین میرود. پیوستگی با ثبات کمی متفاوت است. پیوستگی به چگونگی تعامل و سازگاری عناصر مختلف در یک طرح اشاره دارد. مثلاً آیا رنگها و گرافیکها با هم مطابقت دارند؟ آیا همهچیز به یک پیام واحد کمک میکند؟ از طرف دیگر، سازگاری بین صفحات یک طرح مطرح میشود.
شاید دراینبین پیوستگی مهمتر باشد. بدون پیوستگی، داشتن طرحی خوب دشوار است. اما ناسازگاری شاید سبب شود طرح کمی نامرتب دیده شود اما الزاماً سبب بد شدن طراحی نمیشود.
از هفت اصلی که در این مقاله به آنها پرداختهشده، مهمترین آنها پیوستگی است. پیوستگی به نحوه جمع شدن همه عناصر در کنار یکدیگر مربوط میشود: تعادل، شبکهبندی، رنگها، گرافیک و فضای سفید. درواقع میتوان گفت پیوستگی نوعی چسب است که باعث اتصال همهچیز به یکدیگر میشود. بدون این چسب، طرح از هم میپاشد. شما میتوانید از یک پالت رنگی زیبا و درخشان و دقیق استفاده کنید، اما اگر گرافیک افتضاح باشد یا با هم مطابقت نداشته باشد یا هر چیزی بدون فکر در کنار هم باشد، طراحی بهسادگی شکست میخورد.
این مرحله سختترین قسمت طراحی است. چیزی نیست که بتوان بهراحتی آن را آموزش داد. کمی توانایی و تجربه طبیعی نیز دراینبین لازم است. اما درنهایت دقیقاً همان چیزیست که سبب میشود یک طرح خوب دیده شود.
قبلاً از سایت WebDesigner Wall به دلیل گرافیک زیبا تعریف کردیم، این سایت همچنین مثال خوبی برای پیوستگی نیز میباشد. وقتی بهدقت به گرافیک و سبک آن نگاه میکنید، همه چیز ظاهری آبرنگی دارد.: تصاویر مقالات، تصاویر پسزمینه آبرنگی، doodles و آیکونهای دستی، سبک طراحی نظرسنجی و غیره. توجه به جزئیات باعث برتری این طرح میشود.
نتیجهگیری
یک طراحی خوب تنها به هفت اصل کلیدی که در اینجا موردبحث قرار گرفت، محدود نیست. جنبههایی مانند قابلیت دسترسی، قابلیت خواندن و قابلیت استفاده نیز در این امر مؤثرند. و به همین دلیل طراحی وب کاری دشوار است. امروزه باوجود بسیاری از سیستمهای مدیریت محتوا، ابزارهای وبلاگ نویسی و مواردی که بهراحتی در دسترس هستند، ورود به طراحی آسان است اما تسلط کامل بر همه جنبههای طراحی وب بهراستی نیاز به زمان و البته استعداد دارد. داشتن توانایی ساختن طرحهای زیبا تنها یک جنبه است، اما جنبهای مهم است.