4 نکته کلیدی در طراحی سایت

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

اکنون به این مسائل پیش رو بحث تکنولوژی و پیشرفت روزانه آن را که یک طراح باید خود را بروز نگه دارد نیز اضافه کنید. بنابراین در ادامه به 9 نکته کلیدی که هر طراح باید در فاز طراحی سایت به آنها توجه کند خواهیم پرداخت.

ترتیب (چشم را راهنمایی کنید)

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

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

برای مهم جلوه دادن قسمت ها مختلف از محتوای سایت (یا به عبارتی ترتیب) ابزارهای مختلفی در اختیار شما است:

• مکان – استفاده از بالای صفحه یا سایت.
• رنگ – برای مثال استفاده از فونت های درشت با رنگهای مختلف.
• کنتراست یا تضاد – متضاد بودن منجر به متفاوت بودن و جلب توجه بیشتر میشود.
• اندازه – هرچه بزرگتر باشد نسبت به کوچکترها در ترتیب جلوتر است.
• المانهای گرافیکی – اگر یک فلش بزرگی به قسمتی از صفحه اشاره کند می توانید حدس بزنید بازدیدکننده به کجای صفحه نگاه خواهد کرد؟

فاصله گذاری

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

فاصله منجر به واضح تر شدن مطلب می شود. در طراحی سایت 3 نوع فاصله است که باید مدنظر گرفت:

• فاصله خطوط اگر کم (یا خیلی زیاد) باشد می تواند منجر با ناخوانا شدن متن شود. در CSS می توانید با line-height این فاصله را کنترل کنید.
• Padding منظور از Padding فاصلی از داخل یک المان تا لبه های آن است. که منجر به فاصله میان اشیاء در صفحه می شود. شما حتما باید این فاصله را رعایت کنید تا المان ها از هم فاصله بگیرند و صفحه شلوغ نشود.
• فاصله سفید (white space) اول از همه فاصله سفید حتما نباید سفید باشد. منظور این واژه فاصله خالی درون صفحات است. فاصله خالی بیشتر برای بالانس، ترازبندی و شفافیت بیشتر متن و صفحه استفاده می شود. مقدار فاصله زیاد یعنی محتوای خیلی زیبا و ظریف، برای همین وقتی سری به سایت های معماری میزنیم مقدار بسیار زیادی فاصله سفید در صفحاتشان موجود است.

راهبری (Navigation)

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

طراحی جهت ساخته شدن

امروزه با استفاده از CSS ایجاد سایت بسیار ساده شده است. اما وقتی که شما همچنان درون فتوشاپ در حال طراحی گرافیک سایت هستید باید مطالب زیر را مدنظر قراردهید:

• آیا واقعا شدنی است؟ ممکن است فونت جالبی برای بدنه سایت انتخاب کنید، ولی آیا واقعا این یک فونت استاندارد HTML است؟ ممکن است طراحی شما بسیار شیک باشد ولی سایز 1100px عرض داشته باشد و در عمل برای بسیاری کاربران به صورت افقی اسکرول بخورد و کارایی نداشته باشد.
• اگر صفحه بزرگ باشد چکار کنم؟ آیا نیاز به پس زمینه تکرار شونده دارید؟
• آیا کاری انجام می دهید که از لحاظ فنی دشوار است؟ حتی با قدرتمند شدن CSS برخی کارها مانند چیدمان عمودی همچنان دشوار هستند و بهتر است از آنها بپرهیزید.
• آیا تغییرات کوچک در طراحی می تواند منجر به سادگی بسیار ساخت شود؟ بعضی مواقع حرکت اشیاء در صفحه به جای دیگر کار ساخت و نوشتن کد CSS را بسیار راحت می کند. برای همین باید به گونه ای سایت را طراحی کنید که در آینده به راحتی بتوان آنرا ساخت. البته نباید زیبایی و کارایی سایت را فدای راحتی در ساخت کرد.
• برای سایت های بزرگ تلاش کنید چیزها را تا جای ممکن ساده تر کنید. یک زمانی بود که همواره وقتم را صرف ایجاد تصاویر برای دکمه های سایتم می کردم. ولی اخیرا تنها از کلید های دارای آیکون در CSS استفاده می کنم و واقعا با آن مشکل ندارم. درست است استفاده از روش CSS انعطاف پذیری کمتری دارد ولی باور کنید با توجه به صرف جویی در زمان آن را به شما پیشنهاد می کنم.