طراحی وبسایت موفق بستگی به جزئیات دارد

درست است که طراحی موفق یک وبسایت از یک طرح کلی شروع می شود اما واقعا یکی از عوامل بسیار مهم برای موفق بودن، در نظر گرفتن جزئیات طرح است.

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

رنگ و سایه

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

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

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

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

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

متن و فونت

درست مانند مسئله رنگ ها، برای فونت نیز یک طرح ساده را باید انتخاب کرد. با تمرکز روی سبک‌های مختلف متنیِ با کیفیت، می توانید گزینه های متعددی مانند Bold , Light , Italics و … را در اختیار داشته باشید. 

مطمئن شوید که متن وبسایت شما در هر سایزی از صفحه نمایش «موبایل، تبلت و ...» قابل خواندن است. یکی دیگر از موارد مهم در هنگام استفاده کردن از متن داخل وبسایت، ساختن یک سلسله مراتب و طبقات است. بدین صورت که شما باید متن های سربرگ و عنوان را از متون عادی که در بدنه یک مقاله وجود دارد، متمایز کنید.

مقادیر مختلف اندازه نیز مسئله‌ای مهم است. بسیاری از اوقات بالا بردن اندازه یک فونت تنها در حد ۱ یا ۲ پوینت وبسایت را بی نظیر می کند. 

همیشه یادتان باشد که چشم های انسان ابتدا متون بزرگ‌تر را مشاهده می‌کند و بعد از آن سراغ بقیه متون کوچک می رود.

آیکن ها و عنصر ها

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

در مورد تمام موارد زیر فکر کنید.

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

برای تمامی این موارد در حالت عادی باید از یکسری فونت آیکون های مخصوص استفاده کنیم. 

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

در این بخش از نوشته قصد دارم تا شما را با چندین نمونه از این ابزارها آشنا کنم:

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

Words UI: عنصر متن تقریبا در تمام بخش های یک وبسایت دیده می شود. بخش نوشته ها، منوها، آخرین فعالیت ها، لیست ها، نظرات و … . Words UI یکی از ابزارهای مناسب برای انجام طراحی این عضو مهم از وبسایت ها است. 

Elements UI: یکی از جالبترین فریمورک های رابط کاربری Elements UI است. این فریمورک دارای ابزارهایی است که می تواند طراحی وبسایت شما را به یک سطح بالاتر ببرد. اسلایدرها، پنجره های اعلان و چیزهای دیگر. اینها بخش های کوچکی از این فریمورک ها هستند. 

Forms UI: بیشتر وبسایت ها بدون داشتن فرم، کامل به نظر نمی رسند. به هدف وبسایت های مختلف فکر کنید. -ثبت نام کردن کاربران، پرداخت هزینه به صورت آنلاین، پر کردن فرم خبرنامه و…- تمام این موارد نیازمند داشتن فرم در وبسایت است. این ابزار شامل حالت های مختلف برای قرار دادن فرم در وبسایت است.

E-commerce UI: این ابزار شامل تمام موارد لازم برای ساختن یک وبسایت با محوریت فروشگاه آنلاین است. این مجموعه شامل ابزارهایی مانند جدول قیمت، سبد خرید، صفحه بررسی پرداخت محصول و چیزهای دیگر است.

ترازبندی و شبکه بندی

هر قسمت از وبسایت شما «از تصویر گرفته تا منوها و ...» باید به صورت منطقی دارای ترازبندی و مناسبی باشد. ترازبندی هایی که داری یک ساختار منطقی و مفهومی نیستند اغلب اوقات خواندن محتوای درون آنها برای کاربران سخت می شود. 

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

Zurb’s Foundation یکی از وفق پذیرترین، پراستفاده ترین و مطمئن ترین فریمورک برای طراحی سیستم های شبکه بندی در دنیا است. استفاده از این چهارچوب بسیار ساده است و جدای از ساختن یک سیستم شبکه بندی، توانایی های بیشتری را نیز به توسعه دهندگان می دهد. 

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

منبع