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

1. طراحی تعاملی

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

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

2. ساخت داستان برای وب سایت

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

3. استفاده از الگو

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

4. دادن پاداش به کاربران

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

5. صبر و زمان گذاشتن

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

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

در این لیست کوتاه از مراحل طرح ریزی یک وب سایت عالی، هدف انتقال اطلاعاتی است که هر سازنده وب سایت جدید که در سازمان های دیجیتالی کار می کند، قبل از شروع یک پروژه جدید باید بداند و انجام دهد، و آنچه را که باید در طول پروژه به آن توجه داشته باشد.تمام حقوق مادی و معنوی این مقاله متعلق به شرکت مبنا به آدرس وب سایت www.sitedesign-co.com می باشد. 
20 گام برای پیاده سازی یک وب سایت عالی در زیر توضیح داده شده است:

1. فکر خود را روی کاغذ اجرا کنید

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

2. طراحی یک چارچوب سطح بالا را شروع کنید

زمانی که من می خواهم چشم اندازی از یک پروژه را ایجاد کنم، اولین کاری که انجام می دهم، ایجاد یک چارچوب (بدنه) سطح بالا است که همه مشکلات طراحی را حل میکند. چارچوب (بدنه)، UI است که محتوا را احاطه می کند و به اجرای فعالیت ها و حرکت ها در آن کمک می کند. این شامل حرکات و کامپوننت هایی مانند ستون های فرعی و میله پایین است.

3. به PSD یک شبکه اضافه کنید

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

4. فن چاپ ( تایپوگرافی) خود را انتخاب کنید

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

5. رنگ تم خود را انتخاب کنید

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

6. طرح را تقسیم بندی کنید

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

7. تجدید نظر در بیان

تجدید نظر در الگوهای تعاملی تاسیس شده در هر یک از اجزا و مشاهده این موضوع که چگونه می توانیم آن را بهبود ببخشیم، مهم است.

8. خودتان را به چالش بکشید

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

9. به جزئیات توجه کنید

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

10. تمام اجزا را طوری طراحی کنید که بتوانند در رقابت طراحی به تنهایی ارائه شوند

باید اعتراف کنم که این قطعه از توصیه های من نیست. من آن را در گذشته در Fantasy Interactive شنیده بودم و تعجب کردم که این بیانیه چقدر روشن و صحیح است. هر جزء باید طوری طراحی شود که حتی به تنهایی به عنوان بهترین جز باشد. این به این معنی است که هما اجزاء یک سایت به یک اندازه اهمیت دارند.

11. کار خود را بهبود ببخشید

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

12. فایل PSD خود را مرتب کنید

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

13. بهترین سناریو را طراحی کنید اما برای بدترین شرایط آن را مستعد کنید

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

14. طراحی شما را آزار می دهد تا زمانی که از آن متنفر هستید

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

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

15. از صرف وقت بیش از حد در یک مفهوم قبل از به اشتراک گذاری آن با مشتری اجتناب کنید

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

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

16. بهترین دوست توسعه دهنده خود باشید

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

17. ارائه

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

18. همه ایده های خود را دوست داشته باشید ولی بیش از حد به آن ها وابسته نباشید

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

19. طراحی خود را در طول فرایند توسعه پیگیری کنید

برخلاف باور عمومی، کار شما زمانی که PSD و style- sheet ها تحویل داده می شود، پایان نمیابد. شما باید در تمام طول توسعه پروژه، طرح خود را از طریق توسعه دهندگان پیگیری کنید.

20. پیشرفت کار خود را نمایش دهید

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

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

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

اما بهترین روش یادگیری طراحی سایت چیست؟

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

تمام حقوق مادی و معنوی این مقاله متعلق به شرکت مبنا به آدرس وب سایت www.sitedesign-co.com می باشد.

1.دانشگاه ها

نقاط قوت

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

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

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

نقاط ضعف

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

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

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

دوره های آنلاین

نقاط قوت

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

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

حصول و در دسترس بودن مواد به صورت غیر قابل تصوری گسترش یافته است. در حال حاضر، هر کس می تواند HTML و CSS را به راحتی یاد بگیرد. و این یک فرصت است برای افرادی که خواستار یادگیری و موفقیت هستند.

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

نقاط ضعف

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

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

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

انتخاب: کدام روش بهتر است؟

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

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

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

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

یکی از نکاتی که طراحان وب سایت به آن توجه کمی می کنند طراحی Favicon است. Favicon همان ایکنی است کا در بالای مورورگر و در کنار آدرس وب سایت شما قرار می گیرد. تمام حقوق مادی و معنوی این مقاله متعلق به شرکت مبنا به آدرس وب سایت www.sitedesign-co.com می باشد.

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

1. ابتدا لوگو مورد نظر خود را با فرمت Png انتخاب کنید ، سپس با مراجعه به وب سایت Genfavicon.com و آپلود لوگو خود Favicon خود را از سایت تحویل بگیرید.

2. پس از دانلود این فایل را در Root وب سایت خود آپلود کنید.

3. کد زیر را بین دو تگ <head></head> قرار دهید:

 <link rel=”shortcut icon” href=”http://www.example.com/favicon.ico” type=”image/x-icon”>
<link rel=”icon” href=”http://www.example.com/favicon.ico” type=”image/x-icon”>

به همین راحتی Favicon خود را ساخته و در وب سایت خود قرار داده اید. لازم به ذکر است جدا از بحث زیبایی Favicon از فاکتور های سئو و بر رنکینگ شما موثر است.

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

و یا برخی برای مدرن کردن سایت خود از طراحی پارالاکس استفاده میکنند، این طراحی بسیار زیبا است اما استفاده از آن برای طراحی سایت های پر بازدید آزار دهنده خواهد بود.

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

1- استفاده از فایل موسیقی :

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

2- استفاده از فونتهای بزرگ و یا ریز:

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

همچنین فوت ریز نا خوانا میشود و کاربر از خواندن آن مطلب دست می کشد.

3- پیغام های بزرگ و تمام صفحه:

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

4- پنجره های پاپ آپ:

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

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

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

لازم به ذکر است که کاربردی بود سایت باعث میشود که سایت موفق تری داشته باشید همچنین این ویژگی تاثیر مثبتی بر فروش شما خواهد داشت.

در این مقاله شرکت طرح و پردازش مبنا قصد داریم چند نکته برای کاربردی و کاربر پسند شدن طراحی سایت مطرح می کنیم.

1- سازگاری با موبایل و یا سایت ریسپانسیو

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

ابتدا بررسی کنید طراحی سایت شما در موبایل چگونه نمایش داده میشود برای این منظور از Google Mobile Site Tester بهره ببرید و سپس به سراغ طراحی سایت ریسپانسیو بروید.

2-ساختار و چیدمان اطلاعات

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

3-یکی از علت های اصلی که کاربر سایت شما را ترک میکند سرعت کم و دیر لود شدن سایت میباشد. میتوان گفت هیچ چیز نمیتواند به اندازه کند لود شدون سایت برای کاربر عذاب آور باشد. سایت باید بین 4 تا 6 ثانیه لود شود. ناگفته نماند سرعت لود شدن سایت در رنکینگ سایت و رتبه آن بی تاثیر نیست.

برای تست سرعت سایت میتوانید از آنالیزگر Gtmetrix استفاده نمایید.

4- سایت بسیاری از شرکت ها هنوز که هنوزه در تمامی مرورگر ها به درستی نمایش داده نمیشود، چه حیف است بخاطر چنین مسئله ساده ای شما کاربران و بازدیدکنندگان سایت خود را از دست بدهید.

در طراحی سایت بسیار بسیار مهم است که سایت طراحی شده در تمام مرورگر ها به درستی نمایش داده شود در غیر این صورت آن سایت دارای ضفت بسیار بزرگی است.

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

 هم اکنون بیشتر برنامه های اندروید مانند: gmail، گوگل مپ، گوگل پلی و...  و حتی اینباکس گوگل به سبک متریال طراحی شده اند و به همین علت آرین سالومون تلاش میکند تا گوگل را به سبک متریال در آورد.

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

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

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

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

مدیا کوئری چیست؟

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

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

مدیا کوئری قادر به شناسایی دستگاه های زیر می باشد:

پرینتر ها (print)

مانیتورهای رومیزی، تبلت و موبایل (screen)

دستگاه هایی که متن صفحه را به گفتار و صدا  تبدیل می کنند (speech)

اگر میخواهید بر تمامی این دستگاه ها تغییر اعمال کنید باید از all  بجای نوع دستگاه استفاده کنید.

کاربرد مدیا کوئری در طراحی قالب ریسپانسیو

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

اگر میخواهید یک قالب واکنش گرا طراحی کنید باید بر متا تگ  viewport و مدیا کوئری مسلط باشید.  

برای طراحی سایت ریسپانسیو لازم است در ابتدا سرویس متا تگ viewport را به سرویس سایت افزوده و سپس مدیا کوئری را به فایل CSS بیافزایید.

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

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

در فریم ورک بوت استرپ دستگاه ها را به صورت زیر بخش بندی کرده است:

موبایل : کوچیکتر از 768 پیکسل

تبلت: بزرگتر از 768 پیکسل

مانیتور رومیزی متوسط: بزرگتر از 992 پیکسل

مانیتور رو میزی بزرگ: بزرگتر از 1200 پیکسل

اجزای مختلف سایت را چگونه در این دستگاه ها نمایش دهیم؟

برای کنترل عرض اجزای مختلف سایت باید از max-width  و min-width استفاده کرد.

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

} (media screen and (max-width: 767px@

       { ;mabnasitedesign { width: 100%; margin:0 auto#   

{

حال این کد را برای تبلت باز نویسی میکنیم با این تفاوت که میخواهیم فقط در سمت راست صفحه نمایش داده شود:

 } (media screen and (min-width: 768px) and (max-width: 991px@

       { ;mabnasitedesign {width: 150px; float: right# 

{

اکثر کسانی که در حوزه طراحی وب سایت فعالیت می کنند در ساید بار سایت از ID: right استفاده می کنند، شما نیز میتوانید از کد های بالا برای ساید بار استفاد کنید کافیست mabnasitedesign را به right تغییر دهید.

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

 حال این سوال پیش میآید که آیا نرم افراز موبایل بهتر است یا سایت ریسپانسیو؟ اصلا کدام یک از این ها مناسب حرفه و بیزینس شماست؟ آیا بهتر است شما به فکر طراحی سایت خود باشید یا طرحی نرم افزار خود تا بتوانید فروش خود را افزایش دهید؟

تفاوت نرم افزار موبایل و سایت ریسپانسیو

حتی خود گوگل نیز معتقد است که طراحی وب سایت به صورت ریسپانسیو بهترین گزینه ممکن برای انتخاب است. زیرا شما با طراحی سایت ریسپانسیو میتوانید محتوای جدید خود را به سادگی در دسترس کاربران قرار دهید و فقط یکبار هزینه میکنید. اما در برنامه موبایل شما باید بیشتر هزینه کنید و با یک برنامه نویسی انتخاب نمایید که هم بر IOS و یک هم بر Android  مسلط باشد اما باز هم همه ی گوشی های هوشمند را ساپورت نکرده اید (بلک بری، نوکیا و..). نرم افزار موبایل نیز خالی از لطف نیست  از جمله مزایای نرم افزار موبایل این است که کاربر حتی بدون اتصال به اینترنت میتواند از محتوای شما استفاده کنند. همچنین در نرم افزار های موبایل باید مرتبا ورژن جدید برنامه ی خود را در دسترس کاربران قرار دهید.