طراحی وب سایتی که بتواند در عین زیبایی، قابل استفاده نیز باشد، بتواند پیام را برساند و برند را نیز گسترش دهد، فعالیت بسیار مشکلی خواهد بود.
این حقیقت را اضافه کنید که تعداد زیادی از طراحان وب، خود آموخته هستند و اینکه متوسط به طور متناوب همان طور که تکنولوژی تغییر می کند، طراحی وب نیز تغییر می کند.
پس امروز من 9 اصل طراحی ام برای طراحی خوب وب را قرار داده ام. اینها تنها نظرات من هستند و سعی کرده ام که لینک های دیگری را بر روی موضوع قرار دهم تا تنها صدای من را نشنوید. بدیهی است، من تعداد زیادی تکذیب نامه دارم: قوانین برای شکستن ساخته شده اند، انواع مختلف طراحی وجود دارد و من همیشه با نظرات خودم زندگی نمی کنم. پس لطفا اینها را به عنوان مشاهداتی در نظر بگیرید که من با شما در میان گذاشته ام.
سایت Capture the Valley از نوارها رنگی استفاده کرده است تا چشم شما را به قسمت های مختلف سایت راهنمایی کند.
1- اولویت بندی (چشم را راهنمایی کنید)
طراحی وب سایت خوب، شاید بیشتر از نوع دیگری از طراحی در مورد اطلاعات است. یکی از اولین ابزارهای شما در مهماتخانه اولویت بندی است. زمانی که یک طراحی خوب را ناوبری کنید، کاربر باید در اطراف صفحه نمایش به وسیله طراح راهنمایی شود. من این را اولویت بندی می نمامم و این در مورد این است که هریک از بخش های بصری چه وزنی از طراحی شما را در بر می گیرد.
یک مثال ساده از اولویت بندی در بیشتر سایت ها این است که اولین چیزی شما مشاهده می کنید لوگو است. این موضوع اغلب رخ می دهد چرا که این چیز بزرگی است و بر اساس مطالعات اولین جایی است که افراد به آن نگاه می کنند (بالا و سمت چپ). این چیز خوبی است زیرا شما ممکن است بخواهید کاربر فورا بفهمد که سایت می خواهد چه چیزی را نشان دهد.
اما اولویت بندی باید چیزی فراتر باشد. شما باید چشمان کاربر در طول یک سری از مراحل راهنمایی کنید. برای مثال، ممکن است بخواهید کاربر شما از لوگو/ برند به موقعیت اصلی یک اعلامیه برود، در کنار یک تصویر (تا به سایت شخصیت بدهید)، سپس به متن بدنه اصلی، با ناوبری و یک نوار کناری یک دوم موقعیت در سری مراحل است.
آن چیزی که کاربر شما باید آن را دنبال کند شمایید، طراح وب، تا بتواند کشف کند.
برای رسیدن به اولویت بندی شما ابزار زیادی در دسترس دارید.
موقعیت – جایی که چیزهایی بر روی صفحه است مشخصا آن چیزی را که کاربر می بیند را تحت تاثیر قرار می دهد.
رنگ – استفاده از رنگ های لطیف و ضخیم یک روش ساده است تا به کاربر شما بگوید کجا را نگاه کند.
کنتراست – متفاوت بودن چیزها را برجسته می کند، همان طور که شبیه هم بودن آنها را در اولویت دوم قرار می دهد.
اندازه – بزرگ اولویت بالاتری از کوچک دارد (به غیر از اینکه زمانی که همه چیز بزرگ است یک چیز کوچک ممکن است برجسته باشد که مدیون زمینه بزرگ است)
عناصر طراحی – اگر اینجا یک پیکان بزرگ وجود داشته باشد، حدس بزنید کاربر کجا را نگاه خواهد کرد؟
ماریوس یک سایت بسیار تمیز و ساده با فضای بسیار دارد.
2- فاصله گذاری
هنگامی که من اولین بار طراحی را شروع کردم می خواستم همه فضای موجود را با مواد پر کنم. فضای خالی به نظر اضافی می رسید. در حقیقت معکوس این موضوع درست است.
فاصله گذاری چیزها را دقیق می کند. در طراحی وب سه جنبه از فاصله گذاری وجود دارد که باید در نظر گرفت.
فاصله خط
هنگامی که شما متن قرار می دهید، فاصله بین خطوط مستقیما بر چگونگی قابلیت خواندن آن تاثیرگذار است. فاصله بسیار کم برای چشمان شما بسیار راحت است که از یک خط به خط دیگری برود بدون آنکه به آن توجه کند. فاصله بسیار زیاد به این معناست که زمانی که شما یک خط از متن را به پایان می رسانید و به خط بعدی می روید چشمان شما ممکن است گم شود. بنابراین شما نیازمند پیدا کردن یک متوسط خوب هستید. شما می توانید فاصله بین خطوط را در CSS با سلکتور Line-height تنظیم نمایید. به طور کلی من فهمیدم که مقدار پیش فرض معمولا فاصله بسیار کوچکی است. فاصله خط به صورت فنی leading (فاصله خطوط) نامیده می شود، چرا که درایورهایی از فرآیندهایی که در پرینترها استفاده شده است برای جدا کردن خطوط متن در روزگاران قدیم با جایگزینی میله های سرب بین خطوط استفاده می کند.
لایه گذاری
به طور کلی متن صحبتی هرگز نباید المان های دیگر را لمس کند. تصاویر برای مثال نباید متن را لمس کند، حتی حاشیه یا جداول آن را.
لایه گذاری فضایی است بین المان ها و متن. قانون ساده اینجا این است که شما باید «همیشه» فاصله داشته باشید. البته در اینجا استثنائاتی نیز وجود دارد، در موارد خاص اگر متن یک بخش از تیتر / گرافیک یا اینکه نام شما است اما به عنوان یک قانون کلی، قرار دادن فاصله بین متن و بقیه جهان آن را بینهایت قابل خواندن و خوش آیند می کند.
فضای سفید
اول از همه، فضای سفید نیازی به سفید ندارد. این عبارت به سادگی به فضای خالی در صفحه بر می گردد (یا فضای معکوس که معمولا نامیده می شود). فضای سفید برای دادن تعادل، تناسب و رنگ زمینه به صفحه استفاده می شود. مقدار زیادی فضای سفید برازنده تر و مجلل تر به نظر می رسد، پس برای مثال اگر شما به سایت یک هنرمند گران قیمت بروید، شما تقریبا همیشه مقدار زیادی فضای سفید خواهید دید. اگر شما می خواهید تا استفاده از فضای سفید به طور موثر را یاد بگیرید، به یک مجله بروید و چگونگی استفاده از آن را ببینید. تبلیغات برای یک برند بزرگ از ساعت و ماشین و یا چیزهایی شبیه به این به مقدار زیادی از فضای خالی راهنمایی می کند که به عنوان یکی از المان های طراحی استفاده می شود.
Noodlebox یک کار خوب از استفاده از وضعیت روشن/خاموش در مسیریابی اش استفاده کرده است تا کاربر را مشتاق نگه دارد.
3- مسیریابی
یکی از خسته کننده ترین تجاربی که شما می توانید در یک وب سایت داشته باشید این است که نتوانید مشخص کنید جایی که می خواهید بروید یا جایی که هستید. من فکر می کنم که برای بیشتر طراحان وب، ناوبری یک جنبه است که ما به عنوان مدیر، برنامه ریزی می کنیم، اما من مثال های بسیار بدی از آن پیدا کردم. اینجا دو جنبه از ناوبری وجود دارد تا به ذهن بسپارید.
مسیریابی– کجا می توانید بروید؟
اینجا قوانین عامی وجود دارد که به یاد داشته باشید. دکمه ها برای رفتن به اطراف یک سایت باید به راحتی پیدا شوند و به بالای سایت بروند و به راحتی قابل تشخیص باشند. آنها باید شبیه دکمه های ناوبری باشند و به خوبی توصیف شده باشند. متن دکمه باید بسیار تمیز باشد همانطور که جایی که شما را می خواهد ببرد. در کنار حس معمول، این همچنین مهم است که ناوبری قابل استفاده باشد. برای مثال اگر شما یک قرار گیری برای اشاره گر ماوس برای زیر- منو دارید، مطمئن شدن در مورد اینکه شخص بتواند آیتم های زیر – منو را بدون از دست دادن اشاره گر ببیند مهم است. به طور مشابه تغییر دادن رنگ یا تصویر بر روی محل اشاره گر ماوس یک بازخورد مناسب برای کاربر دارد.
مکان یابی – الان شما کجا هستید؟
راه های زیادی وجود دارد که شما بتوانید کاربر را راهنمایی کنید بدون اینکه تمرینی وجود داشته باشد. در سایت های کوچک، این ممکن است تنها یک موضوع از یک تیتر بزرگ یا یک مدل «پایین» از دکمه مناسب در منوی شما باشد. در یک سایت بزرگ تر، شما ممکن است بخواهید از تکنیک تکه های نان دنباله دار استفاده کنید، زیر تیتر و یک نقشه سایت برای یک گم شدن صادقانه!
4- طراحی برای ساخت
زندگی به مراتب ساده تر می شود زمانی که طراحان وب از طرح بندی های CSS استفاده می کنند، اما الان هنوز هم فکر کردن در مورد چگونگی رفتن سراغ ساختن یک سایت زمانی که در فوتوشاپ هستید وجود دارد. همچنین چیزهایی شبیه به این را نیز در نظر بگیرید:
- آیا این واقعا می تواند انجام شود؟
شما ممکن است که یک فونت جالب برای متن ها انتخاب کرده باشید اما آیا واقعا در HTML نیز این فونت وجود دارد؟ شما ممکن است یک طرح داشته باشید که زیبا به نظر برسد اما پهنای آن 1100 پیکسل است و در یک اسکرولر برای بیشتر کاربران نتیجه خواهد داد. این مهم است بدانید چیزهایی را که می توانید انجام دهید و نمی توانید انجام دهید که چرا من معتقدم همه طراحان وب همچنین باید سایت هایی را حداقل چندبار بسازند.
- چه اتفاقی می افتد زمانی که یک صفحه نمایش تغییر اندازه می دهد؟
آیا نیاز است که شما پس زمینه را دوباره تکرار کنید؟ آنها چگونه کار می کنند؟ آیا طرح در وسط است یا سمت چپ؟
- آیا شما هرچیزی را که به صورت فنی سخت است انجام می دهید؟
حتی با موقعیت CSS ، چیزهایی شبیه به راستای عمودی هنوز مقداری رنج آور است و گاهی اوقات نمی توان به بهترین چیزها رسید.
- تغییرات کوچک می توانند در طرح به سادگی ایجاد شوند. آن را چگونه می سازید؟
گاهی اوقات جابجایی یک شیء در اطراف یک طرح می تواند یک اختلاف بزرگ در چگونگی کد CSS شما داشته باشد. مخصوصا زمانی که عناصر یک طرح در کنار یکدیگر قرار می گیرد، این مقداری پیچیدگی به ساخت اضافه می کند. بنابراین اگر طرح شما 3 المان دارد و هر المان به طور کامل جدا از یکدیگر هستند این واقعا برای ساخت ساده است. از طرف دیگر اگر همه این سه المان با یکدیگر همپوشانی داشته باشند، این هنوز می تواند ساده باشد، اما ممکن است مقداری پیچیده تر باشد. شما باید یک تعادل بین آن چیزی که به نظر خوب است و تغییرات کوچک که بتواند ساخت شما را آسان کند برقرار کنید.
- برای سایت های بزرگ، مخصوصا می توانید چیزها را ساده کنید؟
زمانی بود که من استفاده می کردم تا دکمه های تصویر را برای سایت هایم ایجاد نمایم. بنابراین اگر اینجا یک دکمه دانلود وجود داشت، برای مثال، من یک تصویر دانلود کوچک ایجاد می کردم. در سال آخر یا پیش تر، من استفاده از CSS را شروع کردم تا دکمه هایم را بسازم و هرگز باز نخواهم گشت. مطمئن باشید، این بدان معناست که دکمه های من همیشه یک قابلیت انعطاف نداشت که ممکن بود آرزوی آن را داشته باشم اما پس انداز در زمان ساخت آنها ممکن است چیزی نباشد اما ده ها دکمه زمان زیادی را می گیرد.
اگر هرکس تایپ خوب را می دانست این بدان معناست که من عاشق تایپوگرافی هستم.
5- تایپوگرافی
متن رایج ترین المان طراحی است، بنابراین تعجب آور نیست که افکار زیادی روی آن شده باشد. این مهم است که موضوعات شبیه به این را در نظر بگیرید:
انتخاب فونت – انواع مختلفی از فونت ها چیزهای مختلفی در مورد طرح می گوید. تعدادی امروزی به نظر می رسد، تعدادی یکپارچه با سیستم به نظر می رسد. مطمئن شوید که شما از ابزار درست برای کارتان استفاده می کنید.
اندازه فونت – سال ها پیش مرسوم بود که متن واقعا ریز وجود داشت. خوشبختانه این روزها مردم شروع کرده اند بفهمند که متن به معنای خواندن است، نه فقط نگاه کردن. مطمئن شوید اندازه های متن تان پایدار، به اندازه کافی بزرگ برای خواندن و متناسب باشند که تیترها و زیرتیترها به صورت مناسبی قرار بگیرند.
فاصله گذاری – همان طور که بالا بحث شد، فاصله بین خطوط و دور بودن از اشیاء دیگر مهم است که در نظر گرفته شوند. شما همچنین باید به فاصله بین نویسه ها نیز فکر کنید، تفکر بر روی وب از اهمیت کمتری برخوردار است همان طور که شما کنترل بیشتری نداشته اید.
طول خط – اینجا قانون سخت و سریعی وجود ندارد، اما به طور کلی خطوط متن شما نباید زیاد طولانی باشند. هرچه آنها طولانی تر باشند، خواندن آنها سخت تر است. ستون های کوچک از متن بهتر کار می کند. (فکر کنید در مورد متن های یک روزنامه چگونه است)
رنگ – یکی از بدترین عادت های من ساختن متن با رنگ زمینه کم است. این به نظر خوب است اما به راحتی خوانده نمی شود، متاسفانه هنوز به نظر می رسد با هر طرح سایتی این کار را انجام می دهم.
پاراگراف بندی – قبل از شروع طراحی، من دوست دارم متن را در هر چیزی هم تراز کنم. این برای این است که گوشه های زیبا در هر جانب از پاراگراف ها داشته باشم. متاسفانه هم تراز کردن متن مستلزم ایجاد فضای خالی بین کلمات جایی که آنها فاصله گذاری خودکار دارند، است. این برای چشم شما زمانی که آنها را می خوانید خوب نیست، پس به چپ چین بچسبید بدون توجه به اینکه یک جسم جادویی که به طور کامل فاصله بندی شده باشد، داشته باشید.
Happycog سایت ساده و با کاربری ساده ای را ایجاد کرده است.
6- قابلیت استفاده
طرح وب سایت فقط بر پایه ی تصاویر زیباست نیست. به همراه اطلاعات زیاد و برهم کنش بر روی اثرگذار بودن وب سایت، این مهم است که شما، طراح برای آن همه چیز را تهیه کند. به این معنا که ساختن طرح وب سایت شما قابل استفاده باشد. ما پیش از این جنبه هایی از قابلیت استفاده را بحث کرده ایم – جهت یابی، اولویت بندی و متن. اینجا سه موضوع مهم دیگر نیز وجود دارد:
پیوستن به استانداردها
اینجا چیزهای قطعی وجود دارد که افراد منتظر آن هستند و باعث سردرگمی آنها نمی شود. برای مثال، اگر متن یک آندرلاین داشته باشد، شما انتظار دارید که آن یک لینک باشد. انجام غیر از این تمرین خوبی از قابلیت استفاده نیست. مطمئن باشید، شما می توانید بعضی از کنوانسیون ها را زیر پا بگذارید اما بیشتر وب سایت شما باید دقیقا همان چیزی که افراد انتظار آن را دارند، انجام بدهد!
در مورد آن چیزی که کاربران حقیقتا انجام خواهند داد فکر کنید
نمونه سازی یک ابزار رایج است که برای «سعی» در طراحی استفاده می شود. این انجام شده است زیرا اغلب هنگامی که شما حقیقتا از یک طرح استفاده می کنید، شما به چیزهای کوچک توجه می کنید که یک تفاوت بزرگ ایجاد کنید. ALA یک مقاله داشت به نام «هرگز زمانی که شما برگشت را می شناسید از اخطار استفاده نکنید» که یک مثال خوب از طرح رابط کوچک است که می تواند زندگی کاربر را افتضاح کند.
در مورد وظایف کاربر فکر کنید
زمانی که یک کاربر به سایت شما می آید حقیقتا آنها سعی می کنند چه کاری انجام دهند؟ یک لیست از انواع مختلف وظیفه افراد که ممکن است در سایت انجام دهند تهیه کنید، چگونه به آنها می رسند و چگونه شما می توانید این را برای آنها راحت کنید. این ممکن است به این معنا باشد که یک وظایف رایجی بر روی صفحه اصلی داشته باشید. (برای مثال، خرید را شروع کنید، بدانید درمورد آنچه که ما انجام می دهیم و غیره) یا این بدان معناست که در مورد چیزهایی شبیه به داشتن یک جعبه جستجو که همیشه در دسترس است مطمئن شوید. در پایان روز، طرح وب شما برای افراد یک ابزار برای استفاده است و افراد دوست ندارند از ابزار رنج آور استفاده کنند.
Electric pulp به نظر خشک می آید ولی با یک نگاه دیگر، همه چیز خط کشی شده و مرتب است.
7- همتراز کردن
نگه داشتن چیزها در یک خط در طراحی وب مهم است همان طور که در طراحی چاپ مهم است. گفته نمی شود که «همه چیز» باید در یک خط مستقیم باشد، اما ترجیح است که شما چیزها را به طور موافق در یک صفحه جاگذاری کنید. هم تراز کردن طرح شما را منظم تر و بهتر می کند همان طور که آراسته به نظر می رسد.
شما همچنین ممکن است طرح تان را بر پایه ی یک شبکه بندی خاص قرار دهید. من باید اعتراف کنم که این کار را آگاهانه انجام نمی دهم – هرچند واضح است که یک سایت شبیه به Psdtuts+ در حقیقت یک ساختار شبکه بندی خاص دارد. این سال ها من هنرمندان واقعا خوبی در طراحی شبکه بندی دیده ام. شامل SmashingMagazine’s Designing with Grid-Based Approach و یک لیست جدا گانه از Thinking Outside The Grid در حقیقت اگر شما مشتاق طراحی شبکه ای هستید، شما باید قطعا یه نگاه به سایت DesignByGrid.com بیاندازید.
سایت ExpressionEngine، حقیقت شفافیت است. همه چیز شفاف و مشخص است.
8- شفافیت (مشخص بودن)
در CSS شما، همه ی پیکسل ها مشخص هستند. بنابراین در مورد آن جای نگرانی نیست، اما در فوتوشاپ به این صورت نیست. برای رسیدن به یک طرح نافذ شما باید:
- لبه های شکل را با پیکسل ها شکسته نگه دارید. این ممکن است شامل پاک کردن شکل هها، خطوط و جعبه ها به صورت دستی شود اگر شما آنها را در فوتوشاپ ایجاد کنید
- مطمئن شوید که کنتراست بالا باشد پس مرزها به وضوح مشخص می شود.
- برای تاکید بر روی مرزها کافی است اندکی کنتراست اغراق آمیز شود
Veerie جزئیات بسیار کوچک را نیز بسیار باثبات به کار برده است.
9- ثبات
ثبات به معنای این است که هر چیزی تطبیق داشته باشد. اندازه تیترها، انتخاب فونت، رنگ آمیزی، مدل دکمه ها، فاصله گذاری، طراحی المان ها، مدل های نگاره ها، انتخاب عکس ها و غیره. هرچیزی باید مضمون گذاری شود تا طراحی شما را بین صفحات و صفحات مشابه منسجم کند.
نگهداری پایداری طرح تان در مورد حرفه ای بودن است.
تناقضات در یک طرح شبیه به گفتار اشتباه در یک مقاله است. آنها تنها احساس کیفیت را کم می کند. هرچند طراحی شما خوب به نظر برسد، ثابت نگه داشتن آن همیشه یک شکاف به ارمغان می آورد. هرچند اگر آن یک طرح بد باشد، حداقل آن را ثابت نگه دارید. آسان ترین روش برای نگه داشتن ثبات، تصمیم های پیشین را انجام دهید و به آنها بچسبید. با یک سایت حقیقتا بزرگ، هرچند چیزها می توانند در فرآیندهای طراحی تغیییر کنند. زمانی که من برای مثال FlashDen را طراحی کردم، فرآیندها ماه ها طول کشید و در پایان تعدادی از ایده های من برای دکمه ها و تصاویر عوض شدند بنابراین من باید بازگردم و صفحات اخیر را برای تطبیق دقیق آنها اصلاح کنم.
داشتن یک تنظیم خوب از css می تواند همچنین یک راه طولانی برای طرح پایدار باشد. سعی کنید هسته مرکزی تگ ها مثل <h1> و <p> را به نحوی تعریف کنید که با پیشفرض های شما همخوانی داشته باشد و از فراخوانی کلاسهای مشخص به طور دائم اجتناب کند.
اگه میشه از نحوه رنگ بندی سایت هم مطلب بذارید.
یا علی