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

وقتی که ما پروژه های جدید را شروع می کنیم، به روز رسانی وب سایت ها و وبلاگ های قدیمی تر را فراموش می کنیم. در این مقاله من می خواهم 30 ایده ی قوی ارائه دهم که بتوانید به کمک آنها، وب سایت خود را زیباتر سازید. تمامی آنها بر اساس طراحی front-endنیست. همچنین من در مورد کدهای محبوب HTML5 بحث خواهم کرد. این کدها به تجزیه کنندگان و اسپایدرها برای دسته بندی داده ها، کمک می کنند.

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

1. تست UX

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

2. Whitespace

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

از طریق تست A/B می توانید ناحیه هایی که نیاز به فضای بیشتری دارند را شناسایی کنید.

3. فونت وب

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

4. سایه های CSS3

وقتی من برای ارتقای طرح از سایه ها صحبت می کنم، منظورم دو ویژگی متفاوت است. Box-shadow برای ایجاد div وbox بسیار محبوب است. اضافه کردن این افکت ها به container، wrapper، یا box های صفحات داخلی، باعث ایجاد طرح های سه بعدی می شود.

اما استفاده از CSS3 text-shadow برای نوشتن ارزش دارد. شرکت اپل جز اولین کمپانی هایی بود که از text shadow در طرح هایش استفاده کرد. می توانید با اضافه کردن text shadow های مخالف با رنگ فونت طرح جالبی بسازید. ) مثلا سایه ی سفید برای فونت مشکی، سایه ی سیاه برای فونت روشن)

5. Textureها و قالب های تکرار شونده

وب سایت های زیادی هستند که فقط از طرح های رنگی استفاده کرده اند. اما برای متمایز شدن با وب سایت های دیگر اضافه کردن textureبه پس زمینه، ایده ی جالبی خواهد بود. یکی از برنامه های کاربردی وب که به صورت رایگان هم ارائه می شود Noise Texture Generator هست، که بر روی تمامی مرورگرها قابل اجراست.

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

6. CSS3 Gradient

حالا که داریم در مورد طرح پس زمینه صحبت می کنیم، لازم دونستم که CSS3 gradient را هم مطرح کنم. آنها توسعه دهندگان وب را از استفاده از Adobe Photoshop بی نیاز می کنند. می توانید از این gradientها در تمام قسمت های طرح خود استفاده کنید، نظیر بدنه، قسمت منو، footerو دیگر بخش های مهم.

7. Bootstrap

Bootstrap یک چارچوب frontend برای توسعه دهندگان وب است، که شامل دکمه ها، لینک ها، ستون ها، و هزاران قالب های از پیش تعیین شده است. رایج ترین استفاده از bootstrap در صفحه های فرود است.

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

8. HTML5 Kichstart

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

9. رابط کاربری JQuery

انیمیشن و اسلایدر معمولا در کتابخانه ی jQuery انجام می شود.این یک کتابخانه منبع باز رایج، برای توسعه دهندگان frontend است، اما این با کتابخانه ی jQuery UI نیز در ارتباط است. شما می توانید که همه ی انیمیشن های jQuery را در منوهای کشویی، محو شدن گزینه ها، حرکت اسلایدها، و هرچیز داینامیک دیگر، ارتقا دهید.

وب سایت jQuery UI صفحه ای دارد که شما می توانید انیمیشن های گوناگونی را تست کنید و ببینید که از کدام یک بیشتر خوشتان می آید.

10. عکس های پس زمینه ی عجیب

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

11. آیکون های منو

برای جلب توجه مشتریان در صفحه، بهتر است که از آیکون های کوچک استفاده کنید. لینک های منوی استاندارد به کاربران کمک می کند که صفحات را بهتر پیدا کنند. هزارات آیکون رایگان وجود دارد که شما می توانید از آنها در بالای منو، نوار کناری، یا footer استفاده کنید.

12. آپ دیت رنگ طرح

منظورم این نیست که رنگ کل طرحتون رو عوض کنید، بلکه می توانید رنگ های جدیدی به آن اضافه کنید. بعد از گذشت چند ماه، بهتر است که قسمت های کوچک را آپ دیت کنید، تا بتوانید توجه کاربران جلب کنید. بعضی از آیتم های مورد علاقه شامل پس زمینه، هدر، لینک ها برای آپ دیت کردن، مناسب هستند. می توانید از ابزارهای آنلاین مثل color scheme designer استفاده کنید.

13. افزایش پشتیبانی مرورگر

ساختن وب سایتی که همه ی مرورگرها از اون پشتیبانی کنند بسیار سخت است. هنوز هم افرادی هستند که از اینترنت اکسپلورر 6 استفاده می کنند. مهمترین مرورگرها شامل آخرین نسخه از مرورگر موزیلا فایرفاکس، اپرا، کروم، سافاری، و IE9 هستند. اما اینترنت اکسپلورر 6- 8 هنوز هم به صورت گسترده در بین بازرگانان و کامپیوترهای قدیمی رواج دارد.

14. تایپوگرافی مناسب

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

15. پخش از طریق رسانه های اجتماعی

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

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

16. بحث کاربر

اگر از سیستم مدیریت محتوا مثل Wordpress و Drupal استفاده می کنید، پس امکان استفاده از قالب نظرات بصورت پیش فرض را دارید. هرچند وقتی که یک صفحه ی وب ایستا را می سازید باید دیتابیس را هم برای سیستم بسازید تا بتواند عملکردها را انجام دهید. اما با رشد تکنولوژی Open source، توسعه دهندگان از Disqus استفاده می کنند. با استفاده از این روش، شما مستقیما با تمیز کردن spamو junk در قسمت "بحث کردن" در ارتباط نیستید.

17. گسترش ناحیه ی footer

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

18. عکس های ریسپانسیو

عکس های صفحه ریسپانسیو تقریبا رایج شده اند. تقریبا امروزه داشتن یک عکس با اندازه ی ثابت مضحک است. یک تکنیک رایج این است که به همه ی عکس ها در CSS،width: 100% بدهیم. عکس ریسپانسیو یک افزونه در jQuery ست. تنها کافی ست که آن را به در صفحه اجرا کنید.

19. دسترسی به منو

من توصیه نمی کنم که دائم منوها را آپ دیت کنید، اما به نظرم ارزش دارد به منوی طرحتون نگاه کنید و روش بهتری برای ایجاد زیرمنوها پیدا کنید.

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

20. میکروفورمت ها و میکرودیتاها

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

21. مرتب کردن لینک های منو

برای بعضی از وب سایت ها، مرتب کردن محتوای منو کار سختی نیست. اما بعضی از وب سایت های بازرگانی یا سرمایه گذاری بسیاری را دیدم که کمی کار پیچیده می شود. و حتی بعضی از آیتم ها را نمی توان پیدا کرد. وقت بگذارید و سایت خود را از چشم یک کاربر نگاه کنید.

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

22. لینک برگشت به بالا

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

23. شخصی سازی کد

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

24. اضافه کردن خاصیت Width/height به عکس

حقیقتا این کار تا حدودی زمان بر است، البته به تعداد عکسی که دارید بستگی دارد. اما اگر عکسی را در وب سایتتون پیدا کردید که برای آن Width/height تعریف نکرده اید، حتما آن را آپ دیت کنید.

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

25. آگاه سازی JavaScript

هر توسعه دهنده ای که در JavaScript کار کرده است، باکس های رایج گفتگو را می شناسد. شما می توانید یک جعبه ی هشدار بسازید که با ارائه ی دکمه ی تایید به کاربر، اطلاعات را نمایش دهد. اما هشدار تایید هم وجود دارد که در یک کادر سریع برای کاربر به نمایش در می آید، در این کادر دو گزینه ی بله/خیر برای کاربر وجود دارد. همه ی اینها با استفاده از alertify.js قابل اجراست. Alertify.js یک کتابخانه ی کوچک منبع بازست که برای طراحی جعبه های هشدارfrontend ساخته می شود. راه اندازی آن بسیار سریع ست.

Responsive media queries

Responsive queries را می توان به stylesheetهای موجود در طرح اضافه کرد. همچنین خیلی راحت می توان Styleجدیدی ایجاد کرد تا بتوان نمایش در صفحه های مختلف مثل مانیتورها، تبلت ها، و تلفن های هوشمند را کنترل کرد.

Responsive queries همیشه نیاز ندارند که که طرح شما را ریسپانسیو کنند. بعضی اوقات ممکن ست که فقط بیت های محتوا مثل یک footer بزرگ را پنهان کند. بنابراین شما می توانید یک footer کوچک شده ی ریسپانسیو را به نمایش بگذارید.

27. لینک های وابسته

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

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

28. فونت های آیکونی

فونت های آیکونی برای منو، لیست ها، و حتی محتوای صفحه ی اصلی، عالی هستند. اکثر این آیکون ها را می توانید خیلی آسان به وب سایتتون اضافه کنید. در این حالت شما طراحی معنادارتری نسبت به آیکون های PNG دارید.

29. سایه ی عکس

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

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

30. Alternate stylesheets

همه ی media styleهایی که باید در طرح وب سایتتون استفاده کنید را بررسی کنید. طرح شما باید برای نمایش در دسکتاپ، لپ تاپ، تبلت، و حتی تلفن های هوشمند مناسب باشد. فراموش نکنید که پروژه ها و mediaچاپ شده، گاهی پشتیبانی و ریسپانسیو نمی شوند.

اگر شما مخاطبانی دارید که از اینجور mediaهای مبهم استفاده می کنند، من alternate stylesheet را برای وب سایت شما توصیه می کنم. این ها می تونند بر اساس نوع media نام گذاری شوند. و حقیقتا زمان زیادی برای تغییر default وب سایت برای چاپگرهای رایج نیاز نیست.

نتیجه گیری

طراحان خلاق و توسعه دهندگان frontend تعدادی تکنیک مفید ازاین مقاله پیدا می کنند. اکثر این ایده ها برای پیاده سازی، بیشتر از 1-2 ساعت وقت نمی گیرند، حتی بسیاری از آنها به زمانی کمتر از 15-30 دقیقه نیاز دارد.

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